Sahifa bosh menyu HTML kodini yozib olamiz. Va tekshirib ko`ramiz.

HTML kodi tayyorlandi endi esa css tilida ozgina kod yozib bezaklar beramiz.
*{
margin: 0;
padding: 0;
}
#site{
width: 100%;

}
#header{

width: 100%;
background-color: white;
height: 100vh;
}
.htop{
width: 80%;
margin: 0 auto;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
border-bottom: 1px solid gray;
}
.tleft{
width: 30%;
display: flex;
flex-direction: row;
padding-top: 15px;
}
.tleft img{
height: 70%;
}.tleft h3{
text-transform: uppercase;
color: green;
}
.tleft h4{
color: red;
font-size: 10px;
margin-left: -60px;
margin-top: 20px;
}
.tcenter{
width: 40%;
}
.tcenter ul{
list-style: none;
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.tcenter ul li{
width: 23%;
padding-top: 15px;
text-align: center;
}
.tcenter ul li a{
display: inline-block;
height: 92%;
text-decoration: none;
}
.tcenter ul li a:hover{
border-bottom: 2px solid green;
color: #3D3D3D;
}

.tright{
width:30%;

text-align: center;
padding-top: 15px;
}
.tright i{
margin-right: 10px;
font-size: 15pt;
}
.tright button{
padding: 5px 10px;
color: white;
background-color: green;
border: none;
border-radius: 10px;
}

.hbottom{

width: 80%;
margin: 10px auto;
display: flex;
flex-direction: row;
background: linear-gradient(97.77deg, rgba(245, 245, 245, 0.5) -23.46%, rgba(245, 245, 245, 0.5) 107.51%);

}
.bleft{

margin-top: 150px;
padding-left: 30px;
}
.bleft h4{
font-size: 15pt;
font-weight: 500;
text-transform: uppercase;
}
.bleft h1{
font-size:40pt;
text-transform: uppercase;
}
.bleft font{
color: green;
}
.bleft p{
color: grey;
}
.bleft button{
margin-top: 40px;
padding: 5px 15px;
text-transform: uppercase;
background-color: green;
color: honeydew;
border: 2px solid green;
border-radius: 5px;
cursor: pointer;
}
.bleft button:hover{
color: green;
background-color: honeydew;
border: 2px solid green;
}
.r2{
margin-top: 320px;
}
.r1{
margin-top: -480px;
}

Birinchi qismi tayyor.

Ikkinchi qismi uchun HTML kod yozamiz.