Roman456
/
js02_Romanenko


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
							<!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 href="https://fonts.googleapis.com/css2?family=Courgette&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/fonts.css">
    <link rel="stylesheet" href="css/main.css">
</head>

<body>
    <div class="wrapper">
        <header class="header">
            <div class="header-top">
                <div class="header-logo">
                    <img src="images/logo.png" alt="logo">
                </div>
                <nav class="main-nav hamburger-menu">
                    <!-- элемент, по которому юзер будет кликать  -->
                    <input id="menu__toggle" type="checkbox" />
                    <label class="menu__btn" for="menu__toggle">
                        <span></span>
                    </label>
                    <!-- /* наше меню */ -->
                    <ul class="menu__box">
                        <li><a class="menu__item" href="#">Главная</a></li>
                        <li><a class="menu__item" href="#">Проекты</a></li>
                        <li><a class="menu__item" href="#">Команда</a></li>
                        <li><a class="menu__item" href="#">Блог</a></li>
                        <li><a class="menu__item" href="#">Контакты</a></li>
                    </ul>
                </nav>
            </div>
            <div class="header-bottom">
                <div class="story">
                    <div class="text-story">
                        <h1>Our Story</h1>
                        <p>
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, voluptatibus molestiae?
                            Laborum
                            illum quod voluptatem quos magni placeat voluptas delectus ut aut, eveniet consectetur
                            cupiditate
                            saepe omnis minus incidunt officia!
                        </p>
                    </div>
                </div>
            </div>
        </header>
        <main class="main">
            <div class="content">
                <section class="description">
                    <div class="img-food">
                        <img src="images/food.jpg" alt="food">
                    </div>
                    <div class="text-food">
                        <h3>LOREM TEXT</h3>
                        <p>
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus deserunt quaerat, magni odit
                            illum, veniam asperiores ab magnam vitae officia omnis iusto aperiam tempore quasi tempora
                            voluptatum velit. Quis, nostrum.
                        </p>
                    </div>
                </section>
                <section class="description">
                    <div class="img-jaguar">
                        <img src="images/jaguar.png" alt="jaguar">
                    </div>
                    <div class="text-beer">
                        <h3> MEXICAN CRAFT BEER</h3>
                        <p>
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus deserunt quaerat, magni odit
                            illum, veniam asperiores ab magnam vitae officia omnis iusto aperiam tempore quasi tempora
                            voluptatum velit. Quis, nostrum.
                            Non quia beatae adipisci magni maiores blanditiis fugiat cumque architecto corrupti
                            molestiae hic, repellendus nulla dicta cum et sit necessitatibus repudiandae fugit quas
                            totam libero!
                        </p>
                        <button class="btn">SEE OUR BEER</button>
                    </div>
                </section>
            </div>
        </main>
        <div class="client-form">
            <h3>FORM</h3>
            <form class="id-card" action="#" method="post">
                <input type="text" name="name" placeholder="Name">
                <input type="email" name="email" placeholder="Mail">
                <input type="tel" name="Phone" placeholder="Phone">
                <textarea cols="30" rows="10" placeholder="More info"></textarea>
                <!-- <input type="submit" value="SUBMIT"> -->
            </form>
            <button class="btn">SUBMIT</button>
        </div>
        <footer>
            <div class="footer">
                <img class="footer-logo" src="images/logo.png" alt="logo">
                <div>
                    <h3>CONTACT</h3>
                    <p>
                        610 N Coast Hwy, <br>
                        Laguna Beach, CA 92651
                    </p>
                    <button class="btn-footer">GET DIRECTIONS</button>
                </div>
                <ul class="social-networks">
                    <li><a href="https://twitter.com" target="_blank"><i class="icon-twitter"></i></a></li>
                    <li><a href="https://www.facebook.com/" target="_blank"><i class="icon-facebook"></i></a></li>
                    <li><a href="https://google.com" target="_blank"><i class="icon-google"></i></a></li>
                </ul>
            </div>
        </footer>
    </div>
</body>

</html>