Helen
/
markup


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
							<!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>