create image map container

create container div
style and position with css
This commit is contained in:
emma 2025-01-29 22:07:31 -05:00
parent 87b5df9248
commit 57604e0be7
2 changed files with 17 additions and 1 deletions

View File

@ -9,6 +9,7 @@
<body> <body>
<div class="container"> <div class="container">
<div class="chocolates"></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>

View File

@ -20,6 +20,20 @@ body {
.container { .container {
height: 75vh; height: 75vh;
width: auto; width: auto;
position: relative;
z-index: 0;
}
.chocolates {
height: 44vh;
width: 18vw;
top: 15vh;
left: 6vw;
padding-left: 1.25rem;
padding-top: 1.25rem;
padding-right: .5rem;
position: absolute;
z-index: 1;
} }
img { img {
@ -27,3 +41,4 @@ img {
width: auto; width: auto;
object-fit: contain; object-fit: contain;
} }