50projects50days/netflix-mobile-navigation/style.css

111 lines
1.5 KiB
CSS
Raw Normal View History

2020-11-16 16:21:28 +00:00
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
* {
box-sizing: border-box;
}
body {
font-family: 'Muli', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.text {
text-transform: uppercase;
}
.logo {
2022-09-10 14:28:02 +00:00
width: 200px;
2020-11-16 16:21:28 +00:00
}
.nav-btn {
border: none;
background-color: transparent;
cursor: pointer;
font-size: 20px;
}
.open-btn {
position: fixed;
top: 10px;
left: 10px;
}
.nav {
position: fixed;
top: 0;
left: 0;
height: 100vh;
transform: translateX(-100%);
transition: transform 0.3s ease-in-out;
}
.nav.visible {
transform: translateX(0);
}
.nav-black {
background-color: rgb(34, 31, 31);
width: 60%;
max-width: 480px;
min-width: 320px;
transition-delay: 0.4s;
}
.nav-black.visible {
transition-delay: 0s;
}
.nav-red {
background-color: rgb(229, 9, 20);
width: 95%;
transition-delay: 0.2s;
}
.nav-red.visible {
transition-delay: 0.2s;
}
.nav-white {
background-color: #fff;
width: 95%;
padding: 40px;
position: relative;
transition-delay: 0s;
}
.nav-white.visible {
transition-delay: 0.4s;
}
.close-btn {
opacity: 0.3;
position: absolute;
top: 40px;
right: 30px;
}
.list {
list-style-type: none;
padding: 0;
}
.list li {
margin: 20px 0;
}
.list li a {
color: rgb(34, 31, 31);
font-size: 14px;
text-decoration: none;
text-transform: uppercase;
}
.list ul {
list-style-type: none;
padding-left: 20px;
}