illiaKozyr
/
Homework


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419
							<!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>Document</title>
        <link rel="stylesheet" href="css/style.css" />
        <link rel="shortcut icon" href="img/WDicon.ico" />
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
        <link
            href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap"
            rel="stylesheet"/>
    </head>
    
    <body>
        <div class="wrapper">
            <header class="header">
                <div class="container header-container">
                    <div class="header-block">
                        <div class="header-flex">
                            <div class="img-block">
                                <a href="#"
                                    ><img
                                        src="img/WD.svg"
                                        class="wd-logo"
                                        alt="WD logo"
                                /></a>
                            </div>
                            <div class="nav">
                                <input
                                    type="checkbox"
                                    id="burger"
                                    class="burger-checkbox"
                                />
                                <label for="burger" class="burger">
                                    <span></span>
                                </label>
                                <ul class="header-list">
                                    <li class="header-item">
                                        <a href="#">ГЛАВНАЯ</a>
                                    </li>
                                    <li class="header-item">
                                        <a href="#">ОБ АВТОРЕ</a>
                                    </li>
                                    <li class="header-item">
                                        <a href="#">РАБОТЫ</a>
                                    </li>
                                    <li class="header-item">
                                        <a href="#">ПРОЦЕСС</a>
                                    </li>
                                    <li class="header-item">
                                        <a href="#">КОНТАКТЫ</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </header>
            <main class="main">
                <section class="section-banner">
                    <div class="container">
                        <div class="banner-wrap">
                            <div class="col col--img">
                                <img
                                    src="./img/img-01.png"
                                    class="img-compuhter"
                                    alt="image description"
                                />
                            </div>
                            <div class="col col--description">
                                <header class="section-header">
                                    <h1 class="title">Дизайн и верстка</h1>
                                </header>
                                <div class="holder">
                                    <p>
                                        Lorem Ipsum - это текст-"рыба", часто
                                        используемый в печати и вэб-дизайне.
                                        Lorem Ipsum является стандартной "рыбой"
                                        для текстов на латинице с начала XVI
                                        века.
                                    </p>
                                </div>
                                <a href="#" class="btn">НАПИСАТЬ МНЕ</a>
                            </div>
                        </div>
                    </div>
                </section>

                <section class="about-me">
                    <div class="container">
                        <div class="about-me-h2">
                            <h2>Обо мне</h2>
                        </div>
                        <div class="about-me-lorem">
                            <p>
                                Lorem Ipsum - это текст-"рыба", часто используемый в
                                печати и вэб-дизайне. Lorem Ipsum является
                                стандартной "рыбой" для текстов на латинице с начала
                                XVI века.
                            </p>
                        </div>
                    </div>
                    
                </section>

                <section class="many-projects">
                    <div class="container">
                        <div class="project-container">
                            <div class="project">
                                <div class="project-img">
                                    <img
                                        src="img/project.svg"
                                        alt="Pencil, triangle and piece of paper"
                                    />
                                </div>
                                <div class="ptoject-text">
                                    <h3>40+</h3>
                                    <p>проектов</p>
                                </div>
                            </div>
                            <div class="project">
                                <div class="project-img">
                                    <img
                                        src="img/project.svg"
                                        alt="Pencil, triangle and piece of paper"
                                    />
                                </div>
                                <div class="ptoject-text">
                                    <h3>40+</h3>
                                    <p>проектов</p>
                                </div>
                            </div>
                            <div class="project">
                                <div class="project-img">
                                    <img
                                        src="img/project.svg"
                                        alt="Pencil, triangle and piece of paper"
                                    />
                                </div>
                                <div class="ptoject-text">
                                    <h3>40+</h3>
                                    <p>проектов</p>
                                </div>
                            </div>
                            <div class="project">
                                <div class="project-img">
                                    <img
                                        src="img/project.svg"
                                        alt="Pencil, triangle and piece of paper"
                                    />
                                </div>
                                <div class="ptoject-text">
                                    <h3>40+</h3>
                                    <p>проектов</p>
                                </div>
                            </div>
                            <div class="project">
                                <div class="project-img">
                                    <img
                                        src="img/project.svg"
                                        alt="Pencil, triangle and piece of paper"
                                    />
                                </div>
                                <div class="ptoject-text">
                                    <h3>40+</h3>
                                    <p>проектов</p>
                                </div>
                            </div>
                            <div class="project">
                                <div class="project-img">
                                    <img
                                        src="img/project.svg"
                                        alt="Pencil, triangle and piece of paper"
                                    />
                                </div>
                                <div class="ptoject-text">
                                    <h3>40+</h3>
                                    <p>проектов</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                <section class="section-skill">
                    <div class="container">
                        <div class="skill-row">
                            <div class="skill-col skill-descr">
                                <header class="section-header">
                                    <h2 class="title">Мои навыки</h2>
                                </header>
                                <div class="skill-box">
                                    <div class="skill-this">
                                        <span class="skill-label"
                                            >Adobe Photoshop</span
                                        >
                                        <div class="skill-loader">
                                            <div
                                                class="skill-load"
                                                style="width: 75%"
                                            ></div>
                                        </div>
                                    </div>
                                    <div class="skill-this">
                                        <span class="skill-label"
                                            >Adobe Photoshop</span
                                        >
                                        <div class="skill-loader">
                                            <div
                                                class="skill-load"
                                                style="width: 75%"
                                            ></div>
                                        </div>
                                    </div>
                                    <div class="skill-this">
                                        <span class="skill-label"
                                            >Adobe Photoshop</span
                                        >
                                        <div class="skill-loader">
                                            <div
                                                class="skill-load"
                                                style="width: 75%"
                                            ></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div
                                class="skill-col skill-img"
                                style="
                                    background-image: url(img/creepy-man.jpeg);
                                "
                            ></div>
                        </div>
                    </div>
                </section>

                <section class="deceptive-video">
                    <div class="container">
                        <div class="video-block">
                            <h2>Как я работаю</h2>
                            <p class="about-me-lorem lorem-p">
                                Lorem Ipsum - это текст-"рыба", часто
                                используемый в печати и вэб-дизайне. Lorem Ipsum
                                является стандартной "рыбой" для текстов на
                                латинице с начала XVI века.
                            </p>
                            <div class="fake-video-block"></div>

                            <div class="buttom-center">
                                <img
                                    src="img/video.svg"
                                    class="fake-video"
                                    alt="fake video"
                                />
                                <a href="#">
                                    <img
                                        src="img/play-button.svg"
                                        class="play-button"
                                        alt="play buttom"
                                    />
                                </a>
                            </div>
                        </div>
                    </div>
                </section>

                <section class="section-gellary">
                    <div class="row">
                        <a
                            href="#"
                            class="col"
                            style="background-image: url(img/img-04.jpg)"
                        ></a>
                        <a
                            href="#"
                            class="col"
                            style="background-image: url(img/img-03.jpg)"
                        ></a>
                        <a
                            href="#"
                            class="col col-order1"
                            style="background-image: url(img/img-04.jpg)"
                        ></a>
                        <a
                            href="#"
                            class="col col-order2"
                            style="background-image: url(img/img-03.jpg)"
                        ></a>
                        <a
                            href="#"
                            class="col col-order3"
                            style="background-image: url(img/img-03.jpg)"
                        ></a>
                        <a
                            href="#"
                            class="col col-order4"
                            style="background-image: url(img/img-04.jpg)"
                        ></a>
                        <a
                            href="#"
                            class="col"
                            style="background-image: url(img/img-03.jpg)"
                        ></a>
                        <a
                            href="#"
                            class="col"
                            style="background-image: url(img/img-04.jpg)"
                        ></a>
                    </div>
                </section>

                <section class="microsoft">
                    <div class="container">
                        <div class="microsoft-flex-block">
                            <div class="col-microsoft">
                                <a href="#">
                                    <img
                                        src="img/microsoft.png"
                                        width="255"
                                        alt="microsoft logo"
                                    />
                                </a>
                            </div>
                            <div class="col-microsoft">
                                <a href="#">
                                    <img
                                        src="img/microsoft.png"
                                        width="255"
                                        alt="microsoft logo"
                                    />
                                </a>
                            </div>
                            <div class="col-microsoft">
                                <a href="#">
                                    <img
                                        src="img/microsoft.png"
                                        width="255"
                                        alt="microsoft logo"
                                    />
                                </a>
                            </div>
                            <div class="col-microsoft">
                                <a href="#">
                                    <img
                                        src="img/microsoft.png"
                                        width="255"
                                        alt="microsoft logo"
                                    />
                                </a>
                            </div>
                        </div>
                    </div>
                </section>

                <section class="form-section">
                    <div class="container">
                        <div class="input-block">
                            <h2>Хотите веб-сайт?</h2>
                            <p class="about-me-lorem-p">
                                Lorem Ipsum - это текст-"рыба", часто
                                используемый в печати и вэб-дизайне. Lorem Ipsum
                                является стандартной "рыбой" для текстов на
                                латинице с начала XVI века.
                            </p>
                            <form class="form-block-name-email">
                                <input
                                    type="text"
                                    class="input-name"
                                    placeholder="Ваше имя"
                                />
                                <input
                                    type="email"
                                    class="input-email"
                                    placeholder="Ваш e-mail"
                                />
                            </form>
                            <form action="">
                                <textarea
                                    name="Message"
                                    class="message-form"
                                    cols="35"
                                    rows="15"
                                    placeholder="Сообщение"
                                ></textarea>
                            </form>
                            <a href="#" class="btn">ОТПРАВИТЬ</a>
                        </div>
                    </div>
                </section>
            </main>

            <footer class="footer">
                <div class="container">
                  <div class="footer-block">
                    <div class="info">
                      <h3>Иванов Иван</h3>
                      <p>(с) 2018. Все права защищены.</p>
                    </div>
                    <div class="vk-img">
                      <a href="#"
                        ><img src="./img/vk.svg" class="vk-logo" alt="VK logo"
                      /></a>
                      <a href="#"
                        ><img src="./img/vk.svg" class="vk-logo" alt="VK logo"
                      /></a>
                      <a href="#"
                        ><img src="./img/vk.svg" class="vk-logo" alt="VK logo"
                      /></a>
                    </div>
                  </div>
                </div>
              </footer>
        </div>
    </body>
</html>