<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.div1 {
text-align: center;
width: 200px;
background-color: #009688;
margin: 10px;
}
.container {
text-align: center;
background-color: #c1c1eb;
margin: 0 200px;
}
.container1 {
text-align: center;
background-color: #c1c1eb;
margin-top: 0;
margin-left: 200px;
margin-right: 200px;
margin-bottom: 0;
}
.container2 {
text-align: center;
background-color: #c1c1eb;
padding: 30px;
}
.container3 {
text-align: center;
background-color: #c1c1eb;
padding: 100px 50px;
}
.container4 {
text-align: center;
background-color: #c1c1eb;
padding: 20px;
margin: 50px;
border: 5px solid #0e0e9a;
}
.container5 {
text-align: center;
background-color: #c1c1eb;
padding: 20px;
margin: 50px;
border-top: 5px solid #0e0e9a;
border-bottom: 5px solid #0e0e9a;
border-right: 5px dashed #5a5af7;
border-left: 5px dashed #5a5af7;
}
.p1 {
background-color: #009688;
width: 60px;
word-break: break-word;
}
a {
font-size: 24px;
display: block;
}
</style>
</head>
<body>
<div class="div1">6nok 1</div>
<div class="div1">6nok 2</div>
<div class="container">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam pariatur officiis hic dicta ullam impedit,
nesciunt ex commodi, quisquam itaque ab neque nam consectetur animi molestiae laborum facilis. Unde, itaque.
Vitae eveniet, delectus laboriosam exercitationem provident deleniti recusandae aperiam esse mollitia
debitis
quo maxime officia atque quod aut neque impedit excepturi nesciunt soluta sequi? Accusamus, facere
blanditiis!
Dolorum, repellendus animi?</p>
</div>
<br>
<div class="container1">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam pariatur officiis hic dicta ullam impedit,
nesciunt ex commodi, quisquam itaque ab neque nam consectetur animi molestiae laborum facilis. Unde, itaque.
Vitae eveniet, delectus laboriosam exercitationem provident deleniti recusandae aperiam esse mollitia
debitis quo maxime officia atque quod aut neque impedit excepturi nesciunt soluta sequi? Accusamus, facere
blanditiis! Dolorum, repellendus animi?</p>
</div>
<br>
<div class="container2">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam pariatur officiis hic dicta ullam impedit,
nesciunt ex commodi, quisquam itaque ab neque nam consectetur animi molestiae laborum facilis. Unde, itaque.
Vitae eveniet, delectus laboriosam exercitationem provident deleniti recusandae aperiam esse mollitia
debitis quo maxime officia atque quod aut neque impedit excepturi nesciunt soluta sequi? Accusamus, facere
blanditiis! Dolorum, repellendus animi?</p>
</div>
<br>
<div class="container3">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam pariatur officiis hic dicta ullam impedit,
nesciunt ex commodi, quisquam itaque ab neque nam consectetur animi molestiae laborum facilis. Unde, itaque.
Vitae eveniet, delectus laboriosam exercitationem provident deleniti recusandae aperiam esse mollitia
debitis quo maxime officia atque quod aut neque impedit excepturi nesciunt soluta sequi? Accusamus, facere
blanditiis! Dolorum, repellendus animi?</p>
</div>
<br>
<div class="container4">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam pariatur officiis hic dicta ullam impedit,
nesciunt ex commodi, quisquam itaque ab neque nam consectetur animi molestiae laborum facilis. Unde, itaque.
Vitae eveniet, delectus laboriosam exercitationem provident deleniti recusandae aperiam esse mollitia
debitis quo maxime officia atque quod aut neque impedit excepturi nesciunt soluta sequi? Accusamus, facere
blanditiis! Dolorum, repellendus animi?</p>
</div>
<br>
<div class="container5">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam pariatur officiis hic dicta ullam impedit,
nesciunt ex commodi, quisquam itaque ab neque nam consectetur animi molestiae laborum facilis. Unde, itaque.
Vitae eveniet, delectus laboriosam exercitationem provident deleniti recusandae aperiam esse mollitia
debitis quo maxime officia atque quod aut neque impedit excepturi nesciunt soluta sequi? Accusamus, facere
blanditiis! Dolorum, repellendus animi?</p>
</div>
<p class="p1">
Hello World Hello WorldHello WorldHello World
</p>
<br>
<div class="divtask6-1" style="width: 80%;">
<p class="ptask6-1" style="font-size: 20px;background-color: #009688; width: 80%; word-break: break-word;">
Hello WorldHello WorldHello WorldHello WorldHello WorldHello World
</p>
</div>
<br>
<p class="task62-p"
style="font-size: 24px; background: #009688; width: 200px; word-break: break-word; box-sizing: border-box; border: 10px solid #077a6f;">
111111111111111111111111111111
</p>
<br>
<p class="task63-p"
style="font-size: 24px; background: #009688; width: 200px; word-break: break-word; border: 10px solid #077a6f;">
22222222222222222222222222222222222222222222222222</p>
<br>
<a href="https://codepen.io">Codepen</a>
<a href="https://tfc.vsu.by">Training of foreign citizens</a>
<a href="https://vsu.by">Vsu</a>
</body>
</html>© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
暂无评论内容