3 years ago · 232ec56d17
--- a/2/css/style.css
+++ b/2/css/style.css
@@ -0,0 +1,54 @@
 
				+body {

			
 
				+    margin: 0;

			
 
				+    padding: 0;

			
 
				+}

			
 
				+

			
 
				+.quote__color {

			
 
				+    color: green;

			
 
				+}

			
 
				+

			
 
				+.holder, .text-box {

			
 
				+    margin-left: 15px;

			
 
				+}

			
 
				+

			
 
				+a[href^='https://'] {

			
 
				+    color: red;

			
 
				+}

			
 
				+

			
 
				+.list li:nth-child(4) {

			
 
				+    background-color: green;

			
 
				+}

			
 
				+

			
 
				+.list + p {

			
 
				+    font-size: 26px;

			
 
				+}

			
 
				+

			
 
				+.text-box h3:first-child {

			
 
				+    color: pink;

			
 
				+}

			
 
				+

			
 
				+#greycol {

			
 
				+    color: grey;

			
 
				+}

			
 
				+

			
 
				+.text-box div p {

			
 
				+    color: red;

			
 
				+}

			
 
				+

			
 
				+.text-box p:nth-child(7) {

			
 
				+    color: green;

			
 
				+}

			
 
				+

			
 
				+.text-box .yellow {

			
 
				+    color: yellow;

			
 
				+}

			
 
				+

			
 
				+.bg-box {

			
 
				+    width: 100%;

			
 
				+    height: 100vh;

			
 
				+    background-image: url(../images/nature.jpg), url(../images/lamp.png), url(../images/grass.png), url(../images/hedgehog.png), url(../images/donut.png);

			
 
				+    background-repeat: no-repeat, repeat-x, repeat-x, repeat-y, repeat-y;

			
 
				+    background-position: 50%, 0 0, 0 100%, 0 0, 100% 0;

			
 
				+    background-size: auto, 50px, 400px, 50px, 50px;

			
 
				+    background-color: green;

			
 
				+}

			
--- a/2/images/donut.png
+++ b/2/images/donut.png
--- a/2/images/favicon.png
+++ b/2/images/favicon.png
--- a/2/images/grass.png
+++ b/2/images/grass.png
--- a/2/images/hedgehog.png
+++ b/2/images/hedgehog.png
--- a/2/images/lamp.png
+++ b/2/images/lamp.png
--- a/2/images/nature.jpg
+++ b/2/images/nature.jpg
--- a/2/index.html
+++ b/2/index.html
@@ -0,0 +1,68 @@
 
				+<!DOCTYPE html>

			
 
				+<html lang="en">

			
 
				+<head>

			
 
				+    <meta charset="UTF-8">

			
 
				+    <meta http-equiv="X-UA-Compatible" content="IE=edge">

			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0">

			
 
				+    <title>A-level</title>

			
 
				+    <link rel="icon" href="images/favicon.png" type="image/x-icon">

			
 
				+    <link rel="stylesheet" href="css/style.css">

			
 
				+    <style>

			
 
				+        .quote__color {

			
 
				+            color: blue;

			
 
				+        }

			
 
				+    </style>

			
 
				+</head>

			
 
				+<body>

			
 
				+    <header>

			
 
				+

			
 
				+    </header>

			
 
				+    <main>

			
 
				+        <!-- Первый уровень -->

			
 
				+        <figure class="quote__color" style="color: red;">

			
 
				+            <blockquote cite="https://www.huxley.net/bnw/four.html">

			
 
				+                <p>Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.</p>

			
 
				+            </blockquote>

			
 
				+            <figcaption>—Aldous Huxley, <cite>Brave New World</cite></figcaption>

			
 
				+        </figure>

			
 
				+

			
 
				+        <!-- Второй уровень -->

			
 
				+        <div class="holder">

			
 
				+            <h1>Title</h1>

			
 
				+            <ul class="list">

			
 
				+                <li>

			
 
				+                    <a href="#">link1</a>

			
 
				+                    <ul>

			
 
				+                        <li><a href="#">link2</a></li>

			
 
				+                        <li><a href="#">link3</a></li>

			
 
				+                    </ul>

			
 
				+                </li>

			
 
				+                <li><a href="https://www.youtube.com/">link4</a></li>

			
 
				+                <li><a href="https://validator.w3.org/">link5</a></li>

			
 
				+                <li><a href="#">link6</a></li>

			
 
				+            </ul>

			
 
				+            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolore, accusamus.</p>

			
 
				+            <h1>Title</h1>

			
 
				+            <p>Lorem ipsum dolor sit amet.</p>

			
 
				+        </div>

			
 
				+

			
 
				+        <!-- Второй уровень (“работаю с css-ом”) -->

			
 
				+        <div class="text-box">

			
 
				+            <h3>Покрасьте меня в розовый цвет (color:pink).</h3>

			
 
				+            <p>Данный элемент должен остаться неоформленным.</p>

			
 
				+            <p id='greycol'>Покрасьте меня в серый цвет (color:grey).</p>

			
 
				+            <div>Данный элемент должен остаться неоформленным.</div>

			
 
				+            <div><p>Покрасьте меня в красный цвет (color:red).</p></div>

			
 
				+            <h3>Данный элемент должен остаться неоформленным.</h3>

			
 
				+            <p>Покрасьте меня в зеленый цвет (color:green).</p>

			
 
				+            <p class='yellow'>Покрасьте меня в желтый цвет (color:yellow).</p>

			
 
				+        </div>

			
 
				+

			
 
				+        <!-- Кто совсем молодец ("по желанию") -->

			
 
				+        <div class="bg-box"></div> 

			
 
				+    </main>

			
 
				+    <footer>

			
 
				+

			
 
				+    </footer>

			
 
				+</body>

			
 
				+</html>
			
--- a/2/screen-validator.png
+++ b/2/screen-validator.png