100-project-100-days-website/100_projects/58-cloud-translate-banner-js/style.css
2023-04-20 03:20:26 +03:00
Ask

63 lines
1.0 KiB
CSS

{c4de156fbd177a52afda4bb24f2082a73a658d59 true 1047 style.css 0xc002b15880}

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header{
position: relative;
width: 100%;
height: 80vh;
background: url(bg.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: flex;
justify-content: center;
align-items: center;
}
.header #text{
position: relative;
font-size: 12em;
color: #fff;
transition: .3s;
}
@media(max-width:767px){
.header #text{
font-size: 6em;
}
}
.header .clouds{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: none;
}
.header .clouds img{
position: absolute;
bottom: 0;
max-width: 100%;
animation: animate calc(10s * var(--i)) linear infinite;
}
@keyframes animate{
0%{
transform: translateX(-100%);
}
100%{
transform: translateX(100%);
}
}
section{
position: relative;
padding: 75px 100px
}
section h2{
position: relative;
font-size: 2.5em;
margin-bottom: 20px;
}