| 1 |
- <!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"><link rel="stylesheet" href="css/style.min.css"><title>WD - module work on markup NIX</title></head><body><header class="header"><div class="container"><div class="header__top"><a href="#"><h2 class="header__logo">WD</h2></a><nav class="header__nav"><ul class="header__pc"><li><a href="#">ГЛАВНАЯ</a></li><li><a href="#about">ОБ АВТОРЕ</a></li><li><a href="#projects">РАБОТЫ</a></li><li><a href="#skills">ПРОЦЕСС</a></li><li><a href="#">КОНТАКТЫ</a></li></ul><div class="hamburger"><span></span> <span class="long"></span> <span></span></div><ul class="menu"><li class="menu__link"><a href="#">ГЛАВНАЯ</a></li><li class="menu__link"><a href="#about">ОБ АВТОРЕ</a></li><li class="menu__link"><a href="#projects">РАБОТЫ</a></li><li class="menu__link"><a href="#skills">ПРОЦЕСС</a></li><li class="menu__link"><a href="#">КОНТАКТЫ</a></li></ul></nav></div><div class="header__wrapper"><img src="img/Frame.png" alt="Frame"><div class="header__content"><h1>Дизайн и верстка</h1><p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.</p><button class="btn btn__header">НАПИСАТЬ МНЕ</button></div></div></div></header><main class="main"><section id="about" class="about"><div class="container"><div class="about__wrapper"><h2>Обо мне</h2><p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.</p></div></div></section><section class="numbers"><div class="container"><div class="numbers__wrapper"><div class="numbers__item"><div class="number__img"><img src="icons/project.png" width="50" alt="Project "></div><div class="numbers__desc"><h4>40+</h4><span>проектов</span></div></div><div class="numbers__item"><div class="number__img"><img src="icons/project.png" width="50" alt="Project "></div><div class="numbers__desc"><h4>40+</h4><span>проектов</span></div></div><div class="numbers__item"><div class="number__img"><img src="icons/project.png" width="50" alt="Project "></div><div class="numbers__desc"><h4>40+</h4><span>проектов</span></div></div><div class="numbers__item"><div class="number__img"><img src="icons/project.png" width="50" alt="Project "></div><div class="numbers__desc"><h4>40+</h4><span>проектов</span></div></div><div class="numbers__item"><div class="number__img"><img src="icons/project.png" width="50" alt="Project "></div><div class="numbers__desc"><h4>40+</h4><span>проектов</span></div></div></div></div></section><section id="skills" class="skills"><div class="container"><div class="skills__wrapper"><div class="skills__list"><h4>Мои навыки</h4><span>Adobe Photoshop</span><div class="skills__progress"></div><span>Adobe Photoshop</span><div class="skills__progress"></div><span>Adobe Photoshop</span><div class="skills__progress"></div></div><div class="skills__img"><img src="img/skills.png" width="555" alt="My photo"></div></div></div></section><section class="video"><div class="container"><div class="video__wrapper"><h2>Как я работаю</h2><p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.</p></div><div class="video__img"><img src="img/video.png" alt="video"> <a href=""><img src="img/play-button.png" class="video__play" alt="play"></a></div></div></section><section id="projects" class="projects"><div class="row"><div class="col"><div class="projects__item"><a href="#"><img src="img/project_list.png" alt="project_list"></a></div></div><div class="col"><div class="projects__item"><a href="#"><img src="img/project_pc.png" alt="project_pc"></a></div></div><div class="col"><div class="projects__item"><a href="#"><img src="img/project_list.png" alt="project_list"></a></div></div><div class="col"><div class="projects__item"><a href="#"><img src="img/project_pc.png" alt="project_pc"></a></div></div><div class="col"><div class="projects__item"><a href="#"><img src="img/project_list.png" alt="project_list"></a></div></div><div class="col"><div class="projects__item"><a href="#"><img src="img/project_pc.png" alt="project_pc"></a></div></div><div class="col"><div class="projects__item"><a href="#"><img src="img/project_list.png" alt="project_list"></a></div></div><div class="col"><div class="projects__item"><a href="#"><img src="img/project_pc.png" alt="project_pc"></a></div></div></div></section><section class="clients"><div class="container"><div class="clients__wrapper"><a href="#"><img class="clients__img" src="img/windows.png" alt="windows"></a><a href="#"><img class="clients__img" src="img/windows.png" alt="windows"></a><a href="#"><img class="clients__img" src="img/windows.png" alt="windows"></a><a href="#"><img class="clients__img" src="img/windows.png" alt="windows"></a></div></div></section><section class="form"><div class="container"><div class="form__title"><h3>Хотите веб-сайт?</h3><p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века.</p></div><form action="#"><div class="form__wrapper"><div class="form__inputs"><input type="text" required placeholder="Ваше имя"> <input type="e-mail" required placeholder="Ваш e-mail"></div><textarea name="message" placeholder="Сообщение" id="text" cols="30" rows="10"></textarea> <button type="submit">ОТПРАВИТЬ</button></div></form></div></section></main><footer class="footer"><div class="container"><div class="footer__wrapper"><div class="footer__title"><h3>Сергей Борщ</h3><span>(с) 2021. Все права защищены.</span></div><div class="footer__icons"><a href="#"><img src="img/vk_logo.png" width="44" alt="logo"></a><a href="#"><img src="img/vk_logo.png" width="44" alt="logo"></a><a href="#"><img src="img/vk_logo.png" width="44" alt="logo"></a></div></div></div></footer><script src="js/script.js"></script></body></html>
|
