Skip to content

Commit

Permalink
ubah menu
Browse files Browse the repository at this point in the history
  • Loading branch information
@fauziilyassaputra
fauziilyassaputra committed Sep 27, 2024
1 parent aa4f1ba commit e6eb7c9
Show file tree
Hide file tree
Showing 2 changed files with 122 additions and 26 deletions.
24 changes: 18 additions & 6 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,47 +57,59 @@ <h1>product</h1>
<div class="menu-isi">
<img src="img/susuplastik.jpg" alt="" />
<div class="menu-isip">
<p>click for detail</p>
<h3>susu kedelai terjangkau</h3>
<p>volume : 100ml</p>
<p>komposisi : sari kedelai, air isi ulang, gula pasir</p>
</div>
</div>
</div>
<div data-aos="zoom-in" data-aos-duration="1000">
<div class="menu-isi">
<img src="img/susuplastik.jpg" alt="" />
<div class="menu-isip">
<p>click for detail</p>
<h3>susu kedelai terjangkau</h3>
<p>volume : 100ml</p>
<p>komposisi : sari kedelai, air isi ulang, gula pasir</p>
</div>
</div>
</div>
<div data-aos="zoom-in" data-aos-duration="1000">
<div class="menu-isi">
<img src="img/susuplastik.jpg" alt="" />
<div class="menu-isip">
<p>click for detail</p>
<h3>susu kedelai terjangkau</h3>
<p>volume : 100ml</p>
<p>komposisi : sari kedelai, air isi ulang, gula pasir</p>
</div>
</div>
</div>
<div data-aos="zoom-in" data-aos-duration="1000">
<div class="menu-isi">
<img src="img/susubotol.jpg" alt="" />
<div class="menu-isip">
<p>click for detail</p>
<h3>susu kedelai terjangkau</h3>
<p>volume : 100ml</p>
<p>komposisi : sari kedelai, air isi ulang, gula pasir</p>
</div>
</div>
</div>
<div data-aos="zoom-in" data-aos-duration="1000">
<div class="menu-isi">
<img src="img/susubotol.jpg" alt="" />
<div class="menu-isip">
<p>click for detail</p>
<h3>susu kedelai terjangkau</h3>
<p>volume : 100ml</p>
<p>komposisi : sari kedelai, air isi ulang, gula pasir</p>
</div>
</div>
</div>
<div data-aos="zoom-in" data-aos-duration="1000">
<div class="menu-isi">
<img src="img/susubotol.jpg" alt="" />
<div class="menu-isip">
<p>click for detail</p>
<h3>susu kedelai terjangkau</h3>
<p>volume : 100ml</p>
<p>komposisi : sari kedelai, air isi ulang, gula pasir</p>
</div>
</div>
</div>
Expand Down
124 changes: 104 additions & 20 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@
body {
font-family: Arial, Helvetica, sans-serif;
background-color: rgb(245, 247, 248);
/* min-height: 300rem; */
}

nav {
Expand Down Expand Up @@ -148,41 +147,101 @@ header .hero-judul .cta:hover {

.menu-box .menu-boxisi .menu-isi {
position: relative;
margin: 1rem 3rem;
margin: 2rem 3rem;
display: flex;
justify-content: center;
align-items: center;
border: 7px solid var(--kuning);
border-radius: 2rem;
overflow: hidden;
}
.menu-box .menu-boxisi .menu-isi img {
width: 25rem;
border-radius: 1.5rem;
}

.menu-box .menu-boxisi .menu-isip {
width: 100%;
height: 100%;
opacity: 0;
width: 80%;
opacity: 1;
padding: 1rem 2rem;
background-color: var(--kuning);
box-shadow: 0 8px 24px hsla(0, 8%, 0%, 0.15);
line-height: 2rem;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
left: 0;
right: 0;
bottom: -2rem;
margin-inline: auto;
border-radius: 2rem;
opacity: 0;
transition: opacity 1s 1s;
}
.menu-box .menu-boxisi .menu-isip h3 {
font-size: 1.3rem;
font-family: Georgia, "Times New Roman", Times, serif;
display: block;
color: var(--orange);
text-shadow: 1px 1px 1px black;
}

.menu-box .menu-boxisi .menu-isip p {
font-size: 1.2rem;
font-size: 1rem;
font-family: Georgia, "Times New Roman", Times, serif;
display: inline-block;
display: block;
color: #fff;
cursor: pointer;
}

.menu-box .menu-boxisi .menu-isip:hover {
.menu-box .menu-boxisi .menu-isi:hover .menu-isip {
animation: show-data 1s forwards;
opacity: 1;
transition: opacity 0.3s;
}

.menu-box .menu-boxisi .menu-isi:hover {
animation: remove-overflow 0.1s forwards;
}

@keyframes show-data {
50% {
transform: translateY(-5rem);
}
100% {
transform: translateY(0);
}
}

@keyframes remove-overflow {
to {
overflow: initial;
}
}

@keyframes remove-data {
0% {
transform: translateY(-7rem);
}
50% {
transform: translateY(-10rem);
}
100% {
transform: translateY(0.5rem);
}
}

/* @keyframes show-overflow {
0% {
overflow: initial;
pointer-events: none;
}
50% {
overflow: hidden;
}
} */

/* .menu-box .menu-boxisi .menu-isip:hover {
opacity: 1;
background-color: rgba(0, 0, 0, 0.5);
cursor: pointer;
}
} */

.unggul-box {
min-height: 100vh;
Expand Down Expand Up @@ -388,7 +447,7 @@ header .hero-judul .cta:hover {
align-items: center;
min-height: 80vh;
padding: 1rem 7% 1rem;
/* background-color: var(--kuning); */
background-color: var(--kuning);
background: linear-gradient(180deg, var(--kuning) 50%, cornsilk);
}

Expand Down Expand Up @@ -464,17 +523,45 @@ header .hero-judul .cta:hover {

.menu-box .menu-boxisi .menu-isi {
position: relative;
margin: 1rem 1rem;
margin: 2rem 3rem;
display: flex;
justify-content: center;
align-items: center;
border: 7px solid var(--kuning);
border-radius: 2rem;
overflow: hidden;
}
.menu-box .menu-boxisi .menu-isi img {
width: 20rem;
}
.menu-box .menu-boxisi .menu-isip {
width: 80%;
padding: 1rem 2rem;
background-color: var(--kuning);
box-shadow: 0 8px 24px hsla(0, 8%, 0%, 0.15);
line-height: 2rem;
position: absolute;
left: 0;
right: 0;
bottom: -2rem;
margin-inline: auto;
border-radius: 2rem;
opacity: 0;
transition: opacity 1s 1s;
}
.menu-box .menu-boxisi .menu-isip h3 {
font-size: 1.2rem;
font-family: Georgia, "Times New Roman", Times, serif;
display: block;
color: var(--orange);
text-shadow: 1px 1px 1px black;
}

.menu-box .menu-boxisi .menu-isip p {
font-size: 1rem;
font-family: Georgia, "Times New Roman", Times, serif;
display: block;
color: #fff;
}
.menu-box .menu-judul {
min-height: 25vh;
}
Expand Down Expand Up @@ -535,9 +622,6 @@ header .hero-judul .cta:hover {
height: 5rem;
}

.menu-box .menu-boxisi .menu-isip {
display: none;
}
.menu-box .menu-judul {
min-height: 12vh;
}
Expand Down

0 comments on commit e6eb7c9

Please sign in to comment.