Roman456
/
js02_Romanenko


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
							<!DOCTYPE html>
<html lang="zxx">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HomeWork</title>
    <link rel="icon" href="https://www.webfx.com/tools/emoji-cheat-sheet/graphics/emojis/house.png" sizes="32x32">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <div class="wrapper">
        <header class="header">
            <div class="logo">
                <a href="https://a-level.com.ua/" target="_blank">
                    <img src="img/level-logo.png" alt="logo">
                </a>
            </div>
            <nav class="menu-nav">
                <ul>
                    <li><a href="#">Item 1</a></li>
                    <li><a href="#">Item 2</a></li>
                    <li><a href="#">Item 3</a></li>
                    <li><a href="#">Item 4</a></li>
                    <li><a href="#">Item 5</a></li>
                </ul>
            </nav>
        </header>
        <main class="main">
            <div class="content">
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem quaerat enim accusantium
                        eum
                        tempora, facere ullam numquam voluptatem error, deserunt provident aspernatur. Nihil doloribus
                        ipsam
                        quidem
                        illum unde corporis nam.
                        Corporis, vero exercitationem itaque nisi cum deserunt. Odit omnis tenetur excepturi voluptatem
                        ipsa
                        hic.
                        Repudiandae, tenetur vero? Ipsa est ipsam odit soluta? Tempora sed sit, quod provident natus
                        minus
                        blanditiis.
                        Maiores voluptatum, fuga impedit eveniet, tempore rem hic atque temporibus repudiandae corporis
                        fugiat
                        incidunt. Culpa animi cupiditate minima esse, quisquam nemo! Obcaecati optio culpa iure, dolores
                        nisi harum
                        dicta saepe.</p>
                <section>
                    <h2>OUR WORK</h2>
                    <div class="cards">
                        <div class="card-item">
                            <img class="card-img" src="img/cat.jpg" alt="cat">
                            <div class="text">
                                <h2>Lorem ipsum dolor sit amet</h2>
                                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Inventore explicabo ab in
                                    iusto ex
                                    ipsa ad a, officia eligendi, qui pariatur, libero enim sequi. Repellendus veritatis
                                    quaerat
                                    itaque veniam ut?</p>
                            </div>
                            <a href="#">Go</a>
                        </div>
                        <div class="card-item">
                            <img class="card-img" src="img/cat.jpg" alt="cat">
                            <div class="text">
                                <h3>Lorem ipsum dolor sit amet</h3>
                                <p>Lorem, ipsum dolor sit amet.</p>
                            </div>
                            <a href="#">Go</a>
                        </div>
                        <div class="card-item">
                            <img class="card-img" src="img/cat.jpg" alt="cat">
                            <div class="text">
                                <h3>Lorem ipsum dolor sit amet</h3>
                                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Inventore explicabo ab in
                                    iusto ex
                                    ipsa ad a, officia eligendi, qui pariatur, libero enim sequi.</p>
                            </div>
                            <a href="#">Go</a>
                        </div>
                        <div class="card-item">
                            <img class="card-img" src="img/cat.jpg" alt="cat">
                            <div class="text">
                                <h3>Lorem ipsum dolor sit amet</h3>
                                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolor, provident!</p>
                            </div>
                            <a href="#">Go</a>
                        </div>
                        <div class="card-item">
                            <img class="card-img" src="img/cat.jpg" alt="cat">
                            <div class="text">
                                <h3>Lorem ipsum dolor sit amet</h3>
                                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellendus veritatis
                                    quaerat
                                    itaque veniam ut?</p>
                            </div>
                            <a href="#">Go</a>
                        </div>
                        <div class="card-item">
                            <img class="card-img" src="img/cat.jpg" alt="cat">
                            <div class="text">
                                <h3>Lorem ipsum dolor sit amet</h3>
                                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Inventore explicabo ab in
                                    iusto ex
                                    ipsa ad a, officia eligendi, qui pariatur, libero enim sequi. Repellendus veritatis
                                    quaerat
                                    itaque veniam ut? </p>
                            </div>
                            <a href="#">Go</a>
                        </div>
                    </div>
                </section>
                <section>
                <h2>3.Третий уровень("только флекс")</h2>
                <div class="holder">
                    <div class="item">1</div>
                    <div class="item">2</div>
                    <div class="item">3</div>
                    <div class="item">4</div>
                    <div class="item">5</div>
                </div>
            </section>
        </div>
            <aside class="aside1">Aside1</aside>
            <aside class="aside2">Aside2</aside>
        </main>
        <footer class="footer">Footer</footer>
    </div>
</body>

</html>