Skip to content

Commit

Permalink
animated the pop-up with a drop animation
Browse files Browse the repository at this point in the history
  • Loading branch information
DiksonIvySon committed Oct 16, 2023
1 parent 7a2d279 commit bd4e074
Show file tree
Hide file tree
Showing 2 changed files with 16 additions and 2 deletions.
14 changes: 14 additions & 0 deletions foodRecipes/search.css
Original file line number Diff line number Diff line change
Expand Up @@ -161,6 +161,20 @@ footer {
background-color: #F0F0F0;
width: 92%;
min-height: 95vh;
animation: drop 1s ease-in-out forwards;
}

@keyframes drop {
0% {
opacity: 0;
transform: translateY(-300px);
}
70%{
transform: translateY(90px);
}
100% {
transform: translateY(-0%);
}
}

.pop-up .close-popUp {
Expand Down
4 changes: 2 additions & 2 deletions foodRecipes/search.html
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ <h4>Try searching another related ingredient</h4>
</main>

<div id="pop-up" class="pop-up" style="display: none">
<div class="close-popUp" >
<!-- <div class="close-popUp" >
<i class="fa-solid fa-xmark"></i>
</div>
<div class="popUp-image-container">
Expand Down Expand Up @@ -91,7 +91,7 @@ <h4><b>Instructions:</b></h4>
<a href="">
<button>Watch Video</button>
</a>
</div>
</div> -->
</div>

<footer>
Expand Down

0 comments on commit bd4e074

Please sign in to comment.