#sass-6

#sass-7 variable

#sass-8 mixin

#sass-9 sass loyixa

TPass

Сайт кафе

→ Жанр: #LandingPage
→ Сложность: #средний
→ Язык: #EN
→ Адаптив: Нет

@figma2html

Shuni xamma tugatib kelsin

Sass orqalik

Ertaga kelib dars qilib ketsanglarxam boʻlaveradi

#responsive darslari-1

#responsive darslari-2

#responsive darslari-3

#responsive darslari-4

#responsive darslari-5

#responsive darslari-6

#responsive darslari-7

#responsive darslari-8

#responsive darslari-9

$white: #FFFFFF;

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

.header {
width: 100%;
height: 50px;
margin: 0 auto;
background-color: rgb(45, 45, 171);
}

.container {
width: 1164px;
margin: 0 auto;
}

.header__nav {
display: flex;
align-items: center;
justify-content: space-between;
}

.header__wrap {
display: flex;
align-items: center;
gap: 10px;
}

.header__tit {
font-size: 36px;
font-family: Open Sans;
color: $white;
}

.header__img {
width: 38px;
height: 42px;
object-fit: cover;
}

.header__link {
color: $white;
}

.menu {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}

.header__btn {
width: 130px;
height: 43px;
background-color: #FFBC51;
border-radius: 96px;
border: none;
color: #FFFFFF;
}

.btn__wrap {
position: relative;
}

.btn {
position: absolute;
top: 0;
right: -5px;
}

.menu-btn {
position: absolute;
right: -5px;
z-index: 2;
display: none;
}

.menu-toggle {
position: absolute;
display: none; /* Hide checkbox */
visibility: hidden;
z-index: 1;
}

@media screen and (max-width: 398px) {
.container {
width: 350px;
margin: 0 auto;
}

.menu-toggle {
display: none; /* Hide checkbox */
}

.menu-btn {
display: block;
width: 30px;
height: 5px;
margin: 6px 0;
transition: 0.4s;

}

.menu {
position: fixed;
top: 0;
left: -250px;
width: 250px;
height: 100%;
display: flex;
flex-direction: column;
background: #333;
color: white;
padding-top: 60px;
transition: 0.4s;
z-index: -1;
}

.menu a {
display: block;
color: white;
text-decoration: none;
}

.menu a:hover {
background: #555;
}

/* When menu-toggle is checked, show the menu */
.menu-toggle:checked ~ .menu {
left: 0;
}

.menu-toggle:checked ~ .menu-btn span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}

.menu-toggle:checked ~ .menu-btn span:nth-child(2) {
opacity: 0;
}

.menu-toggle:checked ~ .menu-btn span:nth-child(3) {
transform: rotate(-45deg) translate(5px, -5px);
}
}

#sass project-1

#sass project-2