Notoric
/
FEWD-CTEC3905
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added support for mobile too

This commit is contained in:
Notoric 2024-02-24 00:07:38 +00:00
parent dc521d03c5
commit beca781996
1 changed files with 32 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
css/styles.css
View File

@ -9,6 +9,7 @@
} }
body { body {
font-family: 'Outfit', sans-serif; font-family: 'Outfit', sans-serif;
margin: 0; margin: 0;
@ -16,6 +17,8 @@ body {
box-sizing: border-box; box-sizing: border-box;
} }
/* LANDING STYLES */
@keyframes fadeImage { @keyframes fadeImage {
0% { 0% {
opacity: 1; opacity: 1;
@ -104,8 +107,10 @@ h1 {
font-size: 1.5em; font-size: 1.5em;
} }
/* CAROUSEL STYLES */
#carousel { #carousel {
height: 910px; height: 100vh;
background-color: #0d0d0d; background-color: #0d0d0d;
position: relative; position: relative;
display: flex; display: flex;
@ -113,6 +118,7 @@ h1 {
#carousel-container { #carousel-container {
display: flex; display: flex;
flex-direction: column;
width: 100%; width: 100%;
padding: 50px; padding: 50px;
} }
@ -120,15 +126,15 @@ h1 {
.carousel-item { .carousel-item {
position: relative; position: relative;
display:block; display:block;
height: 800px; height: 150px;
width: 150px; width: 96%;
min-width: 150px; min-height: 150px;
margin-inline: 12px; margin: 12px;
border-radius: 81px; border-radius: 81px;
border: 5px solid black; border: 5px solid black;
overflow: hidden; overflow: hidden;
transition: width 1s ease; transition: width 1s ease, height 1s ease;
} }
.carousel-item .carousel-id { .carousel-item .carousel-id {
@ -162,7 +168,7 @@ h1 {
} }
#carousel-container .active { #carousel-container .active {
width:100%; height:100%;
} }
#carousel-container #carousel-1 { #carousel-container #carousel-1 {
@ -204,5 +210,24 @@ h1 {
@media screen and (min-width: 1000px) { @media screen and (min-width: 1000px) {
/* applies to screens wider than 999px */ /* applies to screens wider than 999px */
#carousel {
height: 910px;
}
#carousel-container {
display: flex;
flex-direction: row;
}
.carousel-item {
min-width: 200px;
height: 800px;
width: 150px;
min-width: 150px;
}
#carousel-container .active {
width:100%;
}
} }