Referat Reja: Asosiy qisim

Tabiatning nima uchun hammaga yoqadi?

Chunki u chiroyli, nafis, real.

Selection funksiya yordamida buni shakillantirdim

CSS qismi esa quydagicha

.container {
width: 90%;
max-width: 1000px;
margin: auto
}

Backgrountdagi rasimni yuklash

#summary:after {
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: url(../images/summary.jpg) repeat center center;
opacity: .3
}

Fondagi rasim ustiga pardani quyidagi kod yordamida hosil qildim

#summary {
width: 100%;
text-align: center;
position: relative;
padding: 4em 0 6em 0;
color: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
text-shadow: 0 0 1px rgba(0, 0, 0, .05), 0 1px 2px rgba(0, 0, 0, .3);
background: #AA7742

Keyingi sahifa esa eng qizg’in joylarni korsatib unga ta’rif berish uchun

HTML

Tabiatning eng chiroyli qisimlari

Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam dolor voluptatem cupiditate ullam ducimus ratione aut consequatur repellat odio incidunt laborum velit iusto saepe quidem expedita alias laboriosam, cumque ab?

Sharshara

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis eius ea velit impedit accusantium voluptas culpa, veniam labore maxime ullam amet debitis ipsam ratione rerum placeat sint, voluptatem voluptate cumque?

Sohil

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Optio ratione soluta assumenda enim? Consequuntur repellendus incidunt, labore minus quo a ipsum. Impedit reprehenderit totam repellendus iure harum fugiat nam ipsum?

O'rmon

Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque fuga ratione dolor aperiam neque tenetur voluptatem quidem quo quis, laudantium officia numquam vitae dolorum exercitationem ex expedita iusto perferendis consequuntur.

CSS
Container classini ushbu qisim uchun ham qolladim

.container {
width: 90%;
max-width: 1000px;
margin: auto
}

.body-header {

margin: 0 0 4em 0
}

.cf:before,

.cf:after {
content: "";
display: table
}

.cf:after {

clear: both
}

.cf {
*zoom: 1

}
.img-circle-div {
display: inline;
float: left;
width: 31.372549019607842%;
margin: 0 .9803921568627451%;
*width: 31.32046568627451%;
*margin: 0 .9283088235294117%;
text-align: center
}

So’ngi qisim sifatida bir nechta rasmdan iborat toplamni qoshdim

Ushbu uch rasim leta singari aylanadi

HTML

•