Kafedrasi Veb dasturlashga kirish

AXBOROT TEXNOLOGIYALARI VA KOMMUNIKATSIYALARINI RIVOJLANTIRISH VAZIRLIGI MUHAMMAD AL-XORAZMIY NOMIDAGI TOSHKENT AXBOROT TEXNOLOGIYALARI UNIVERSITETI
Multimediya texnologiyalari kafedrasi
Veb dasturlashga kirish fanidan

LABORATORIYA ISHI
Mavzu: Web sahifa yaratish

Guruh: Web001
Bajardi: Asrorov Abdulaziz
Tekshirdi: Sadiqov Rustamjon
TOSHKENT – 2022

Web sahifa yaratish
Web sahifa yaratish uchun HTML va CSSdan foydalanamiz.Web sahifani matn qismi asosan htmlda amalga oshirilsa,CSSda esa berilgan matn uchun stil yani ko’rinishlarini shakllantirilib beriladi.
HTML
DOCTYPE html>

• Home


• Pages


• Features


• Extension


• Tutorial


• Contact us

---

creative

power by psdfreebies.com

Scroll Down

CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.creative{
width: 100%;
background-image: url(../images/head_fon.JPG) ;
background-repeat: no-repeat;
background-size: cover;
}
.container{
width: 80%;
margin: 0 auto;
}
nav{
display: flex;
justify-content: space-between;
align-items: center;
}
.nav_item{
display: inline-block;
color: white;
text-decoration: none;
display: inline-block;
padding: 15px 30px;
}
i{
color: white;
}
.nav_item:hover{
border-bottom: 3px solid rgb(20, 106, 235);
}
main{
/* margin: 200px 0; */
text-align: center;
align-items: center;
padding-bottom: 70px;
}
.main_title{
text-transform: uppercase;
padding-top: 80px;
font-size: 100px;
color: white;
}
.main_text{
text-transform: uppercase;
letter-spacing: 10px;
color: rgb(12, 86, 129);
padding-bottom: 60px;
}
.scroll{
width: 60px;
height: 60px;
padding-bottom: 50px;
border: 1px solid;
border-radius: 50%;
font-size: 70px;
position: relative;
color: #fff;
text-align: center;
margin: 0 auto;
}

.scroll::after{

content: '';
width: 25px;
height: 25px;
border-top: 1px solid;
border-left: 1px solid;
color: #fff;
position: absolute;
top: 16px;
left: 14px;
transform: rotate(-135deg);
}
.scroll_text{
color: white;
}

Natijasini esa brauzer yoki chrome orqali bemalol ko’rishimiz mumkin :

HTML

we are an awesome agency

FEATURE ONE

Aenean lacinia bibendum nulla sed consectetur . Vivamus sagittis lacus vel augue laoreet rutrum faucibus

FEATURE ONE

Aenean lacinia bibendum nulla sed consectetur . Vivamus sagittis lacus vel augue laoreet rutrum faucibus

FEATURE ONE

Aenean lacinia bibendum nulla sed consectetur . Vivamus sagittis lacus vel augue laoreet rutrum faucibus

FEATURE ONE

Aenean lacinia bibendum nulla sed consectetur . Vivamus sagittis lacus vel augue laoreet rutrum faucibus

CSS
.agency{
width: 100%;
background-color: rgb(11, 79, 119);
text-align: center;
height: 550px;
}
.agency_title{
text-transform: uppercase;
color: rgb(245, 247, 250);
font-size: 25px;
font-family: sans-serif;
letter-spacing: 2px;
padding: 30px;
padding-top: 100px ;
position: relative;
z-index: 1;
}
.agency_title::after{
content: 'W';
font-family: sans-serif;
font-size: 150px;
font-weight: 700px;
padding-top: 70px;
color: rgb(50, 112, 148);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: -1;
}

.block{
width: 100%;

display: flex;
flex-direction:row;

}

.box{
width: 23%;
margin-left: 10px;
text-align: justify;
padding: 20px;
}
.block_title{
font-size: 14px;
padding: 15px;
color: white;
}
.block_text{
font-size: 12px;
color: white;
}

Va natija mana shunday ko’rinishda bo’ladi;

Va shu tarzda davom etamiz va web sahifamizning davomi quyidagicha aks etadi:

Va biz HTMLda Xaritalardan ham foydalanishimiz mumkin:

VSdagi bajargan ishimiz HTMLda 177ta qatordan,CSSda esa jami 416 ta qatordan iborat bo’ldi: