#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

.payment__left--card{
width: 421px;
height: 281px;
margin: 0 auto;
}
.payment__title{
width: 397px;
color: $white;
font-size: 55px;

}
.payment__text{
color: $white;
font-size: 18px;
margin-top: 10px;
}
.payment__btn{
width: 200px;
height: 50px;
background-color: #b8abab33;
border: none;
color: $white;
border-radius: 4px;
margin-top: 30px;

}

.payment__img{
width: 100%;
height: 658px;
object-fit: cover;
}
.payment__right--card{
width: 900px;
height: 688px;
margin: 0 auto;
background-image: url(../img/payment-1.png);
background-repeat: no-repeat;
}
@media screen and (max-width: 398px) {
.payment__container{
width: 326px;
margin:0 auto;
}
.payment{
width: 100%;
height: 688px;
margin: 0 auto ;
padding-top: 50px;
background:linear-gradient(#5C0E62,#00B5D0);
}
.payment__left--card{
width: 315px;
height: 277px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.payment__title{
width: 248px;
height: 98px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
font-size: 32px;
text-align: start;
}
.payment__text{
font-size: 14px;
width: 326;
height: 34px;

margin: 0 auto;
}
.payment__right--card{
width: 315px;
height: 277px;
position: relative;
margin: 0 auto;
background-image: url(../img/payment-1.png);
background-repeat: no-repeat;
background-size: 100%;
}
.payment__img{
width: 315px;
height: 177px;
position: absolute;
top: 60px;
left: -10px;
}
.payment__wrap{
display: flex;
align-items: center;
justify-content:center;
flex-direction: column;
}
}