https://pastein.ru/t/1zy
Загрузка данных
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Задачник HTML и CSS от Трепачёва Дмитрия</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav>
<a href="#" class="active">Main</a>
<a href="#">About Us</a>
<a href="#">Products</a>
<a href="#">Information</a>
<a href="#">Contacts</a>
</nav>
</header>
<div class="wrapper">
<aside>
<h2>Lorem Ipsum Dolor Sit.</h2>
<p>
Aliquam rutrum magna vitae congue finibus. Vivamus malesuada molestie auctor. Proin nec velit nec ex
consequat porta ut at ex. Mauris eget lobortis neque. Aliquam laoreet velit ac quam scelerisque, at
rutrum ex mattis. Nam vestibulum sapien dui, non sagittis dui tempor quis. Etiam tempus massa et
rhoncus sagittis. Aliquam nec rhoncus ipsum, consequat condimentum arcu. Proin fringilla, urna non
molestie mollis, erat nunc elementum turpis, nec aliquet dolor metus sit amet felis. Vestibulum et
sapien vitae velit suscipit laoreet.
</p>
<p>
Curabitur tincidunt arcu risus, vel tristique mauris pulvinar sed. Morbi suscipit a eros et pretium.
Nunc gravida at sapien ut vestibulum. In in volutpat neque. Orci varius natoque penatibus et magnis
dis parturient montes, nascetur ridiculus mus. Nulla vestibulum tincidunt mauris id efficitur.
Phasellus feugiat lorem eget lobortis scelerisque.
Aenean placerat metus vitae orci sodales, vitae fermentum lorem auctor. Integer vitae fermentum
magna. Nulla facilisi. Maecenas tincidunt euismod eros at fermentum. Maecenas vel massa non dolor
cursus rhoncus. Curabitur ligula ante, fringilla ac tincidunt id, placerat eget purus. Vestibulum
sodales turpis ex, finibus ultrices lacus semper maximus. Integer placerat laoreet mi. Praesent
interdum ex orci, nec.
</p>
<p>
Etiam ornare libero sed eros luctus pellentesque. Nullam eu urna nunc. Sed luctus congue quam, nec
sollicitudin lacus lacinia ut. Ut interdum mauris vel neque porta egestas. Vestibulum commodo mauris
et ligula ornare interdum. Pellentesque dapibus risus nunc, pulvinar maximus ligula suscipit at.
Nunc a pharetra elit. Phasellus aliquet sit amet dui sit amet hendrerit. Sed tristique, nibh nec
ultrices hendrerit, ex.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dui neque, vulputate vel lobortis
sed, accumsan non urna. Aenean vitae mi ac nibh pharetra ullamcorper et et lacus. Pellentesque et
leo accumsan, rhoncus lorem nec, elementum turpis. Fusce euismod risus eget orci interdum eleifend.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi
mollis..
</p>
<p>
Etiam imperdiet a lorem non laoreet. Vestibulum ullamcorper bibendum eleifend. Aenean ac congue
velit. Mauris lacinia nisi non velit pulvinar, at condimentum ligula tristique. Proin ex ipsum,
suscipit quis dictum et, sollicitudin quis massa. Suspendisse porttitor vehicula neque. Vestibulum
vulputate sem leo, et auctor felis interdum eu. Aliquam ut nisl sit amet sem sollicitudin pharetra.
</p>
<p>
Maecenas dolor enim, scelerisque a felis in, placerat vestibulum ligula. Cras nec orci et nibh
convallis faucibus a nec elit. Maecenas odio neque, convallis non leo vitae, fermentum vestibulum
ante. Vivamus porta luctus tortor quis lacinia. Morbi purus nisi, mattis vel pretium eget, malesuada
vulputate nibh. Interdum et malesuada fames ac.
</p>
<p>
Aenean dictum erat quis arcu tincidunt pulvinar. Etiam vel mattis metus. Sed vel ligula nunc.
Suspendisse egestas malesuada nunc, a lobortis quam facilisis eu. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia curae; Pellentesque aliquam quis sem sit amet
cursus. Ut luctus arcu sit amet nulla consequat porttitor. Mauris vitae enim at quam efficitur
commodo id ut ex. Suspendisse potenti. Nulla facilisi. In vel.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In luctus rutrum turpis, pharetra.
</p>
<p>
Nunc dapibus massa eu velit consequat, at efficitur mauris rutrum. Curabitur efficitur cursus
sapien, a vehicula nunc tincidunt id. In hac habitasse platea dictumst. Suspendisse sed fermentum
nunc, non ultricies.
</p>
</aside>
<main>
<h1>Aliquam Sodales Consectetur.</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse urna ante, egestas ac nibh sit
amet, vehicula posuere quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pretium
consequat volutpat. Integer ultricies ligula eget arcu volutpat vehicula. Sed et congue nisi, ac cursus
ex. Duis tempus arcu magna, quis auctor odio congue in. Duis nunc leo, tempor nec dignissim sed, euismod
vel nibh.
</p>
<img src="images/bee-1.jpg" alt="pic">
<p>
Sed consequat lobortis tellus quis fringilla. Aenean eleifend sapien quis tellus rhoncus, et elementum
justo pulvinar. Vestibulum gravida metus non turpis congue dignissim. Cras vitae urna nibh. Morbi
consectetur ex vel cursus bibendum. Nunc dignissim massa non lacus commodo fringilla. Sed id ipsum ac
diam fermentum condimentum feugiat a nunc. Nulla tincidunt vel ante non venenatis. Vestibulum fermentum
velit et auctor sodales. Sed sagittis metus eget justo lobortis lobortis. Nulla dictum condimentum
ipsum, a interdum nibh rutrum a. Nulla sed justo mi. Suspendisse sit amet feugiat magna.
</p>
<h2>Etiam et Bibendum!</h2>
<p>
Nulla eros justo, vulputate ac eros in, semper pharetra ex. Interdum et malesuada fames ac ante ipsum
primis in faucibus. Quisque venenatis pellentesque lacus, eget commodo velit. Vivamus porta lobortis
elit, fringilla imperdiet leo placerat id. Sed volutpat et tortor id ultricies. Integer efficitur mi id
dui porta eleifend. Aliquam aliquet condimentum eros eu euismod. Interdum et malesuada fames ac ante
ipsum primis in faucibus. Vivamus euismod accumsan mauris at tincidunt. Etiam euismod vitae elit ut
feugiat.
</p>
<h2>Morbi Blandit Lectus</h2>
<img src="images/bee-2.jpg" alt="pic">
<p>
Pellentesque pellentesque sem ac justo tristique pellentesque. Vestibulum semper pulvinar rutrum.
Maecenas odio urna, porta sed lectus eget, fringilla posuere odio. Maecenas pulvinar sed massa vitae
tincidunt. Praesent ullamcorper est ac lorem aliquet, sed tempus lacus iaculis. Pellentesque a odio
pharetra, sagittis enim sit amet, euismod leo. Nullam egestas, nisi eget blandit dignissim, augue dui
accumsan est, at tincidunt ipsum metus quis justo. Aenean sed mauris ornare, faucibus tortor in, iaculis
magna. Duis eros lectus, auctor eu mi sit amet, ornare scelerisque elit.
</p>
<p>
Integer a sollicitudin quam. Sed laoreet finibus velit ut rhoncus. Nunc euismod neque at ligula
venenatis vestibulum. Nulla facilisi. Nunc aliquet, erat sed ullamcorper malesuada, sapien magna tempor
augue, at malesuada felis enim at quam. Curabitur ornare tincidunt nisi id cursus. Nunc finibus non
massa in vestibulum. Etiam euismod metus ut euismod sagittis. Donec tincidunt neque a dolor posuere
egestas. Proin sed dolor dui. In urna tellus, pretium in eleifend eget, pellentesque et enim. Etiam
pulvinar velit nec libero iaculis, vitae consectetur elit pellentesque.
</p>
</main>
<aside>
<h2>Benefits of Honey</h2>
<ul>
<li>
Etiam erat arcu, commodo sed enim at, lacinia ullamcorper lacus. Fusce ut dignissim arcu.
Aliquam pulvinar massa rhoncus.
</li>
<li>
Quisque vestibulum sem et felis condimentum viverra. Mauris ut quam ut eros laoreet pellentesque
id ut arcu. Aliquam posuere sodales orci non feugiat. Sed dignissim congue ultricies. Nullam.
</li>
<li>
Maecenas venenatis feugiat magna, eu porttitor dolor tempus nec. Ut auctor sem sed sem aliquet,
sed lacinia justo tristique.
</li>
<li>
Nunc arcu ante, tincidunt vel viverra vel, luctus ac augue. Aliquam sollicitudin dapibus quam eu
fringilla.
</li>
<li>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In luctus rutrum turpis, pharetra.
</li>
<li>
Vivamus eu auctor elit. Ut accumsan lorem sit amet tincidunt molestie. Sed efficitur ante vel
velit convallis, non finibus leo mattis. Fusce consectetur felis eget cursus
</li>
<li>
Aenean finibus tincidunt magna, a posuere velit convallis ut. Etiam nisl magna, varius ac tortor
eget, venenatis vehicula mauris. Curabitur non lacus enim. Suspendisse potenti. Phasellus tellus
neque, venenatis nec lorem id, tempor.
</li>
</ul>
<img src="images/bee-3.jpg" alt="pic">
<img src="images/bee-4.jpg" alt="pic">
<h2>Honey Harmful Properties</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in ante id nulla dignissim
venenatis finibus sed ex. Aenean vehicula urna rutrum pharetra luctus. Vivamus sagittis erat in
risus mollis, sit amet venenatis dolor suscipit. Aenean venenatis accumsan vehicula. Nam efficitur
et enim et sollicitudin. Aenean scelerisque venenatis purus tincidunt euismod. Vestibulum egestas
metus placerat leo rhoncus, sed finibus metus.
</p>
<p>
Nulla et mauris purus. Curabitur et malesuada libero, id congue magna. Suspendisse et lorem rutrum,
pharetra risus eu, faucibus libero. Suspendisse a est quis eros auctor congue sed et.
</p>
<img src="images/bee-5.jpg" alt="pic">
</aside>
</div>
<footer>
<div class="footer-center">
<div class="footer-wrp">
<h2>Praesent Vitae Turpis</h2>
<p>
Etiam pulvinar velit nec libero iaculis, vitae consectetur elit pellentesque.
</p>
<p>
Curabitur ornare tincidunt nisi id cursus.
</p>
<hr>
<p>
Praesent ullamcorper est ac lorem aliquet, sed tempus lacus iaculis. Pellentesque a odio
pharetra, sagittis enim sit amet, euismod leo.
</p>
</div>
<div class="footer-wrp">
<h2>Donec - in Auctor</h2>
<p>
Etiam pulvinar velit nec libero iaculis, vitae consectetur elit pellentesque.
</p>
<p>
Curabitur ornare tincidunt nisi id cursus.
</p>
<hr>
<p>
Praesent ullamcorper est ac lorem aliquet, sed tempus lacus iaculis. Pellentesque a odio
pharetra, sagittis enim sit amet, euismod leo.
</p>
</div>
<div class="footer-wrp">
<h2>Etiam Imperdiet Semper</h2>
<p>
Etiam pulvinar velit nec libero iaculis, vitae consectetur elit pellentesque.
</p>
<p>
Curabitur ornare tincidunt nisi id cursus.
</p>
<hr>
<p>
Praesent ullamcorper est ac lorem aliquet, sed tempus lacus iaculis. Pellentesque a odio
pharetra, sagittis enim sit amet, euismod leo.
</p>
</div>
<div class="footer-wrp">
<h2>Donec Imperdiet Non</h2>
<p>
Etiam pulvinar velit nec libero iaculis, vitae consectetur elit pellentesque.
</p>
<p>
Curabitur ornare tincidunt nisi id cursus.
</p>
<hr>
<p>
Praesent ullamcorper est ac lorem aliquet, sed tempus lacus iaculis. Pellentesque a odio
pharetra, sagittis enim sit amet, euismod leo.
</p>
</div>
</div>
<div class="copyright">
www.pchela.com © 2010-2015. Honey.
</div>
</footer>
</body>
</html>
body,
p,
h1,
h2,
ul {
margin: 0;
padding: 0;
}
body {
background-color: #EBEBEB;
font-family: sans-serif;
}
.wrapper {
display: flex;
flex-wrap: wrap;
background-color: #ffffff;
width: 1100px;
margin: 0 auto;
}
.footer-center {
width: 1100px;
margin: 0 auto;
}
header,
footer {
background-color: #242424;
}
nav {
min-height: 50px;
display: flex;
align-items: center;
width: 1100px;
margin: 0 auto;
}
nav a {
display: block;
padding: 0 20px;
font-size: 19px;
box-sizing: border-box;
}
nav a:link,
nav a:visited {
color: #ffffff;
text-decoration: none;
}
nav a:hover,
nav a.active {
background-color: #585858;
line-height: 50px;
}
aside {
width: 300px;
display: flex;
flex-direction: column;
padding: 20px 20px 0 20px;
box-sizing: border-box;
}
aside h2 {
font-size: 17px;
margin-bottom: 10px;
}
aside p,
aside li {
font-size: 13px;
text-align: justify;
margin: 0 0 10px 0;
}
aside ul {
list-style-type: none
}
main {
min-height: 600px;
padding: 20px 0;
text-align: justify;
width: 495px;
box-sizing: border-box;
}
main h1 {
font-size: 21px;
}
main h2 {
font-size: 19px;
margin: 20px 0;
}
main p {
font-size: 13px;
margin: 10px 0;
}
main img {
width: 495px;
height: 375px;
}
footer {
display: flex;
flex-direction: column;
font-size: 13px;
text-align: center;
color: #ffffff;
min-height: 281px;
}
.footer-center {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding-top: 30px;
box-sizing: border-box;
}
.copyright {
min-height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
aside img {
height: 168px;
width: 270px;
display: inline-block;
margin: 10px 0;
}
.footer-wrp {
width: 250px;
background-color: #EBEBEB;
color: #000000;
min-height: 200px;
display: flex;
flex-direction: column;
}
.footer-wrp hr {
width: 248px;
}
.footer-wrp h2 {
margin: 15px 0 10px 0;
}
.footer-center p {
font-size: 12px;
}
