Mavazu: html funktsiyalari va ob'ektlari. Grafika va doimiy ilovalar

Download 285.19 Kb.

bet	2/2
Sana	20.06.2023
Hajmi	285.19 Kb.
	#1632557

1 2

Bog'liq
lv2WsJLsH2CxiaR-omNqkqVudxwAWXxP

Explore The Natural Beauty Of Halmahera With Us
Choice Of
What do customers say about us
Prepare Yourself And Start Exploring With Us.

II. Amaliy qism

HTML va PHP kodlari qismi

HTML
DOCTYPE html>

GoTrip

Choice Of

Destinations

explore the beauty of god's earth in a beautiful forest and have fun

Exsplore Now

What do customers say about us?

Alpanasap

Japung, Indonesia

Very satisfying service makes it comfortable, a beautiful place in the world.

Prepare Yourself And Start Exploring With Us.

There's the best discount for you today.

Get Started

CSS
@import 'global';

//
.header{

background-image: url('../images/header-bg.svg');
@extend %bg;
background-color: $green;
&-top{
display: flex;
justify-content: space-between;
color: #fff;
&__title{
font-size: 20px;
@extend %poppinsSemiBold;
margin-top: 57px;
}
.menu{
display: flex;
gap: 80px;
font-size: 15px;
@extend %poppinsMedium;
margin-top: 57px;
transition: all 0.3s;
}
.menu__item:hover, &__link:hover{
text-decoration: underline;
color: #fff;
}
&__btn{
display: flex;
gap: 25px;
font-size: 15px;
@extend %poppinsMedium;
}
&__link{
margin-top: 57px;
}
.link{
padding: 13px 43px;
border-radius: 27px;
margin-top: 44px;
}
}
&-btns{
display: none;
}
&-content{
display: grid;
grid-template-columns: repeat(2, 1fr);
color: #fff;
&__info{
padding-top: 100px;
}
.link-grey{
padding: 12px 30px;
border-radius: 18px;
background-color: rgba(255, 255, 255, 0.25);;
}
.title{
width: 100%;
padding-top: 30px;
color: #fff;

}
.text{

width: 100%;
padding-bottom: 50px;
color: $darkWhite;
}
.link{
padding: 27px 48px;
border-radius: 27px;
}
}
&-img{
height: 600px;
}
}

//
.choise{

display: grid;
grid-template-columns: repeat(2, 1fr);
position: relative;
&-content{
padding-top: 50px;
.text{
width: 60%;
padding-bottom: 60px;
}
.link{
padding: 25px 45px;
border-radius: 27px;
}
}
&-gallery{
&__img:nth-child(1){
height: 250px;
}
&__img{
height: 300px;
}
&__img:nth-child(3){
width: 15%;
height: 250px;
border-radius: 20px;
}
}
.next{
position: absolute;
left: 48%;
top: 55%;
}
}

//
.customer{

display: grid;
grid-template-columns: 400px 1fr;
padding-top: 100px;
&-img{
height: 350px;
margin-top: 30px;
}
&-info{
display: flex;
align-items: center;
gap: 33px;
img{
width: 100px;
height: 100px;
border-radius: 100px;
background-color: $orange;
}
.text-mini{
color: $lightblack;
}
}
.title, .text{
width: 65%;
}
.stars{
img{
width: 50px;
height: 50px;
}
}
}

//
.prepare{

background-image: url('../images/Prepare-bg.png');
@extend %bg;
}
.menu{
display: flex;
gap: 80px;
&__info{
color: $lightblack;
}
}
&-btn{
display: flex;
gap: 25px;
align-items: center;
}

&-link{
border: 1px solid $orange;

background-color: $orange;
color: #fff;
padding: 13px 43px;
border-radius: 27px;
}
}

3. Sahifalar ko`rinishi

Download 285.19 Kb.

Do'stlaringiz bilan baham: