diff --git a/css/styles.css b/css/styles.css index 8fdbb6d..ca8ef7f 100644 --- a/css/styles.css +++ b/css/styles.css @@ -665,6 +665,23 @@ progress { font-size: 150%; } + #pill-main { + animation-name: example; + animation-duration: 1.5s; /* Adjust as needed */ + animation-iteration-count: 1; /* Plays only once */ + animation-fill-mode: forwards; /* Keeps the last frame */ + height: auto; + background-position: center; + background-size: cover; + width: 85vw; + height: 95vh; + background-repeat: no-repeat; + } + + #pill-img { + display: none; + } + } @@ -673,6 +690,14 @@ progress { .tech-image-container img { max-width: 50%; } + #pill-main { + background-image: none; + } + #pill-img { + display: block; + width: 100%; + height: auto; + } .keyboard-header { font-weight: bold; } @@ -8598,24 +8623,11 @@ textarea.form-control-lg { --bs-text-opacity: 0.75; } -#pill-main { - animation-name: example; - animation-duration: 1.5s; /* Adjust as needed */ - animation-iteration-count: 1; /* Plays only once */ - animation-fill-mode: forwards; /* Keeps the last frame */ - height: auto; - background-position: center; - background-size: cover; - width: 85vw; - height: 95vh; - background-repeat: no-repeat; -} - @keyframes example { - 0%, 24.99999% {background-image: url("../assets/components/main-1.png");} - 25%, 49.99999% {background-image: url("../assets/components/main-2.png");} - 50%, 74.99999% {background-image: url("../assets/components/main-3.png");} - 75%, 100% {background-image: url("../assets/components/main-4.png");} + 0% {background-image: url("../assets/components/main-1.png");} + 25% {background-image: url("../assets/components/main-2.png");} + 50% {background-image: url("../assets/components/main-3.png");} + 100% {background-image: url("../assets/components/main-4.png");} } .text-opacity-100 { diff --git a/index.html b/index.html index 152ede0..0f44c16 100644 --- a/index.html +++ b/index.html @@ -15,18 +15,16 @@
+ Find My Pill