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