100-project-100-days-website/100_projects/22-page-transition-with-gsap-animation/style.css
2023-03-15 17:18:58 +03:00
Ask

97 lines
1.6 KiB
CSS

{25aaf6e667af8154a50a98634c2a2ef434f1db18 true 1602 style.css 0xc001fe2850}

*{
margin:0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: #000;
color: #fff;
}
img{
width: 100%;
height: 100%;
}
.warpper{
width: 100%;
height: 100%;
}
.nav{
padding: 20px 40px;
display: flex;
justify-content: space-between;
flex-direction: row;
align-items: center;
width: 100%;
}
.nav .left{
display: flex;
justify-content: flex-start;
flex-direction: row;
align-items: center;
}
.nav .left h3{
font-weight: 400;
padding-right: 10px;
}
.nav .left h3{
font-weight:700;
font-style: italic;
}
.nav .right h3{
font-weight: 400;
padding-right: 10px;
font-size: 24px;
}
.nav .right p{
font-size: 14px;
}
.intro{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.intro .hero{
display: flex;
justify-content: flex-start;
flex-direction: row;
align-items: center;
padding: 130px 40px;
transform: translateY(100%);
}
.intro .hero .left-hero{
width: 55%;
}
.intro .hero .left-hero h1{
font-size: 3rem;
font-weight: 500;
line-height: 70px;
}
@media(max-width:767px){
.intro .hero{
display: flex;
flex-direction: column;
gap: 10px;
}
.intro .hero .left-hero h1{
font-size: 25px;
}
.intro .hero .right-hero,
.intro .hero .left-hero{
text-align: center;
width: 100% !important
}
}
.intro .hero .right-hero{
width: 40%;
}
.slider{
position: fixed;
top: 0;
left: 0;
background-color: #18181a;
width: 100%;
height: 100%;
transform: translateY(100%);
}