100-project-100-days-website/100_projects/62-music-website/css/style.css
2023-04-24 00:15:16 +03:00
Ask

109 lines
1.8 KiB
CSS

{dfe03018be8e377212842777a9c58fc852398c57 true 1821 style.css 0xc001ddd260}

*{
margin: 0;
padding: 0;
font-family: sans-serif;
}
.container{
height: 100vh;
max-width:100%;
background-image: url(../media/image.png);
background-size: cover;
background-position: center;
position: relative;
}
.logo{
position: relative;
font-size: 35px;
color: #fff;
font-weight: 700;
font-style: italic;
z-index: 999;
transition: .3s;
}
.logo:hover{
color: #C1E4DE;
}
.navbar-toggler{
background-color: #fff;
color: #5f5f5f;
}
.menu-icon{
width: 30px;
color: #5f5f5f;
}
.logo::before{
content: '';
position: absolute;
top: -40px;
left: 50px;
border: 50px solid ;
border-color: transparent transparent #FACDC6 transparent;
border-radius: 10px;
z-index: -1;
transform: skewX(15deg);
}
.navColor ul li a{
color: #5f5f5f;
text-transform: uppercase;
font-size: 15px;
text-decoration: none;
}
.navColor ul li a:hover{
color: #ECA8A7;
}
.content{
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 80px;
}
.left{
margin-left: 6%;
}
.left h1{
font-size: 70px;
color: #fff;
line-height: 80px;
}
.right{
margin-right: 6%;
display: flex;
align-items: center;
}
.right p{
color: #5f5f5f;
margin-bottom: 0;
font-size: 18px;
font-weight: 400;
margin-right: 10px;
}
#icon{
width: 80px;
cursor: pointer;
}
@media(max-width:767px){
.left{
margin-left: 0;
}
.left h1{
font-size: 40px;
line-height: 70px
}
.right{
display: flex;
flex-direction: column;
gap: 20px;
margin-right:0;
}
}
@media(min-width:992px){
.flex-end{
display: flex;
justify-content: flex-end;
align-items: center;
}
.nav{
margin: 10px 50px;
}
}