zepp
/
my-cafe-events
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

further project work 

add background image
add and initial styling of header and footer
(will change colors later)
This commit is contained in:
emma 2025-01-29 23:39:21 -05:00
parent 666e8f3abc
commit 1e764e68a9
3 changed files with 20 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
cafe-events/valentines-day-25/img/background.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

5
cafe-events/valentines-day-25/index.html
View File

@ -8,10 +8,15 @@
</head> </head>
<body> <body>
<header>for you, emma &lt;3</header>
<div class="container"> <div class="container">
<div class="cupcakes"></div> <div class="cupcakes"></div>
<img src="./img/sweets.jpg" alt="a box of chocolate cupcakes"> <img src="./img/sweets.jpg" alt="a box of chocolate cupcakes">
</div> </div>
<script src="./script/script.js" defer></script> <script src="./script/script.js" defer></script>
<footer>
<p>happy valentine's day!</p>
<p>credits</p>
</footer>
</body> </body>
</html> </html>

16
cafe-events/valentines-day-25/style/style.css
View File

@ -11,8 +11,10 @@ html {
body { body {
height: 100vh; height: 100vh;
width: auto; width: auto;
background-image: url("/img/background.png");
display: flex; display: flex;
justify-content: center; flex-direction: column;
justify-content: space-between;
align-items: center; align-items: center;
} }
@ -41,3 +43,15 @@ img {
width: auto; width: auto;
object-fit: contain; object-fit: contain;
} }
header {
width: 100vw;
height: 10vh;
background: hotpink;
}
footer {
width: 100vw;
height: 10vh;
background: hotpink;
}