begishev-vo · begishev-vo · Jul 17, 2020 · Jul 27, 2020 · Jul 27, 2020 · Jul 30, 2020
diff --git a/lesson/Project#1.zip b/lesson/Project#1.zip
diff --git a/lesson/Project#1/css/style.css b/lesson/Project#1/css/style.css
diff --git a/lesson/Project#1/img/2-layers.png b/lesson/Project#1/img/2-layers.png
diff --git a/lesson/Project#1/img/check_icon.png b/lesson/Project#1/img/check_icon.png
diff --git a/lesson/Project#1/img/email_icon.png b/lesson/Project#1/img/email_icon.png
diff --git a/lesson/Project#1/img/icq_icon.png b/lesson/Project#1/img/icq_icon.png
diff --git a/lesson/Project#1/img/phone_icon.png b/lesson/Project#1/img/phone_icon.png
diff --git a/lesson/Project#1/img/skype_icon.png b/lesson/Project#1/img/skype_icon.png
diff --git a/lesson/Project#1/img/social_buttons.png b/lesson/Project#1/img/social_buttons.png
diff --git a/lesson/Project#1/index.html b/lesson/Project#1/index.html
@@ -0,0 +1,179 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width">
+    <link rel="stylesheet" href="css/style.css">
+    <title>Project#1</title>
+</head>
+
+<body>
+    <div class="container">
+        <header class="main-header">
+            <div class="main-header-wrp">
+                <h1 class="main-header-title">Product name</h1>
+                <ul class="main-header-list">
+                    <li class="main-header-list-item">Put on this page information about your product</li>
+                    <li class="main-header-list-item">A detailed description of your product</li>
+                    <li class="main-header-list-item">Tell us about the advantages and merits</li>
+                    <li class="main-header-list-item">Associate the page with the payment system</li>
+                </ul>
+            </div> 
+            <img class="main-header-img" src="#" alt="фото товара" width="200" height="150"> 
+        </header>
+        <main class="content">
+            <section class="about-product">
+                <div class="about-product-container">
+                    <h2 class="about-product-title">About your product</h2>
+                    <p class="about-product-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis facilis fuga, illo at.     Natus eos, eligendi illum rerum omnis porro ex, magni, explicabo veniam incidunt in quam sapiente ut ipsum.</p>
+                    <p class="about-product-text">Pariatur iure ab sunt nesciunt, quibusdam odio iste cumque itaque, ipsa vel exercitationem ullam quos aut nostrum cupiditate fuga quaerat quam animi dolores. Sequi itaque, unde perferendis nemo debitis dolor.</p>
+                </div>
+                <video class="about-product-video" src="#" width="430" height="245"></video>
+            </section>
+            <section class="dignity">
+                <h2 class="dignity-title">Dignity and pluses product</h2>
+                <ul class="dignity-list">
+                    <li class="dignity-list-item">Delectus dolorem vero quae beatae quasi dolor deserunt iste amet atque, impedit iure placeat, ullam. Reprehenderit aliquam, nemo cum velit ratione perferendis quas, maxime, quaerat porro totam, dolore minus inventore.</li>
+                    <li class="dignity-list-item">Delectus dolorem vero quae beatae quasi dolor deserunt iste amet atque, impedit iure placeat, ullam. Reprehenderit aliquam, nemo cum velit ratione perferendis quas, maxime, quaerat porro totam, dolore minus inventore.</li>
+                    <li class="dignity-list-item">Delectus dolorem vero quae beatae quasi dolor deserunt iste amet atque, impedit iure placeat, ullam. Reprehenderit aliquam, nemo cum velit ratione perferendis quas, maxime, quaerat porro totam, dolore minus inventore.</li>
+                    <li class="dignity-list-item">Delectus dolorem vero quae beatae quasi dolor deserunt iste amet atque, impedit iure placeat, ullam. Reprehenderit aliquam, nemo cum velit ratione perferendis quas, maxime, quaerat porro totam, dolore minus inventore.</li>
+                    <li class="dignity-list-item">Delectus dolorem vero quae beatae quasi dolor deserunt iste amet atque, impedit iure placeat, ullam. Reprehenderit aliquam, nemo cum velit ratione perferendis quas, maxime, quaerat porro totam, dolore minus inventore.</li>
+                    <li class="dignity-list-item">Delectus dolorem vero quae beatae quasi dolor deserunt iste amet atque, impedit iure placeat, ullam. Reprehenderit aliquam, nemo cum velit ratione perferendis quas, maxime, quaerat porro totam, dolore minus inventore.</li>
+                </ul>
+            </section>
+            <section class="screenshots padding-site">
+                <h2 class="screenshots-title">Dignity and pluses product</h2>
+                <figure class="screenshots-item"> 
+                   <img class="screenshots-photo" src="#" alt="фото" width="200" height="150">
+                    <figcaption class="screenshots-item-txt">
+                        <h3>The description for the image</h3>
+                        <p>Pariatur iure ab sunt nesciunt, quibusdam odio iste cumque itaque, ipsa vel exercitationem ullam quos aut nostrum cupiditate fuga quaerat quam animi dolores. Sequi itaque, unde perferendis nemo debitis dolor.</p>
+                    </figcaption>
+                </figure>
+                <figure class="screenshots-item"> 
+                   <img class="screenshots-photo" src="#" alt="фото" width="200" height="150">
+                    <figcaption class="screenshots-item-txt">
+                        <h3>The description for the image</h3>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis facilis fuga, illo at. Natus eos, eligendi illum rerum omnis porro ex, magni, explicabo veniam incidunt in quam sapiente ut ipsum.</p>
+                    </figcaption>
+                </figure>
+                <figure class="screenshots-item"> 
+                   <img class="screenshots-photo" src="#" alt="фото" width="200" height="150">
+                    <figcaption class="screenshots-item-txt">
+                        <h3>The description for the image</h3>
+                        <p>Pariatur iure ab sunt nesciunt, quibusdam odio iste cumque itaque, ipsa vel exercitationem ullam quos aut nostrum cupiditate fuga quaerat quam animi dolores. Sequi itaque, unde perferendis nemo debitis dolor.</p>
+                    </figcaption>
+                </figure>
+                <figure class="screenshots-item"> 
+                   <img class="screenshots-photo" src="#" alt="фото" width="200" height="150">
+                    <figcaption class="screenshots-item-txt">
+                        <h3>The description for the image</h3>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis facilis fuga, illo at. Natus eos, eligendi illum rerum omnis porro ex, magni, explicabo veniam incidunt in quam sapiente ut ipsum.</p>
+                    </figcaption>
+                </figure>
+            </section>
+            <section class="review padding-site"> 
+               <span class="review-title">Reviews</span>
+                <article class="review-item">
+                    <div class="review-item-img"></div>
+                    <p class="review-item-txt">Porro officia cumque sint deleniti nemo facere rem vitae odit inventore cum odio, iste quia doloribus autem aperiam nulla ea neque reprehenderit. Libero doloribus, possimus officiis sapiente necessitatibus commodi consectetur? 
+                    <span class="review-item-author">Lourens S.</span> </p>
+                </article>
+                <article class="review-item">
+                    <div class="review-item-img"></div>
+                    <p class="review-item-txt">Porro officia cumque sint deleniti nemo facere rem vitae odit inventore cum odio, iste quia doloribus autem aperiam nulla ea neque reprehenderit. Libero doloribus, possimus officiis sapiente necessitatibus commodi consectetur? 
+                    <span class="review-item-author">Lourens S.</span> </p>
+                </article>
+                <article class="review-item">
+                    <div class="review-item-img"></div>
+                    <p class="review-item-txt">Porro officia cumque sint deleniti nemo facere rem vitae odit inventore cum odio, iste quia doloribus autem aperiam nulla ea neque reprehenderit. Libero doloribus, possimus officiis sapiente necessitatibus commodi consectetur? 
+                    <span class="review-item-author">Lourens S.</span> </p>
+                </article>
+                <article class="review-item">
+                    <div class="review-item-img"></div>
+                    <p class="review-item-txt">Porro officia cumque sint deleniti nemo facere rem vitae odit inventore cum odio, iste quia doloribus autem aperiam nulla ea neque reprehenderit. Libero doloribus, possimus officiis sapiente necessitatibus commodi consectetur? 
+                    <span class="review-item-author">Lourens S.</span> </p>
+                </article>
+            </section>
+            <section class="price">
+                <span class="price-title">Buy it now</span>
+                <div class="price-item"> 
+                   <span class="price-item-title">Standart</span> 
+                   <span class="price-item-cost">$100</span>
+                    <ol class="price-item-list">
+                        <li>Porro officia cumque sint deleniti;</li>
+                        <li>Тemo facere rem vitae odit;</li>
+                        <li>Cum odio, iste quia doloribus autem;</li>
+                        <li>Aperiam nulla ea neque.</li>
+                    </ol>
+                    <button class="price-item-btn">buy</button>
+                </div>
+                <div class="price-item"> 
+                   <span class="price-item-title">Premium</span> 
+                   <span class="price-item-cost">$150</span>
+                    <ol class="price-item-list">
+                        <li>Porro officia cumque sint deleniti;</li>
+                        <li>Тemo facere rem vitae odit;</li>
+                        <li>Cum odio, iste quia doloribus autem;</li>
+                        <li>Aperiam nulla ea neque.</li>
+                        <li>Porro officia cumque sint deleniti;</li>
+                        <li>Тemo facere rem vitae odit;</li>
+                        <li>Cum odio, iste quia doloribus autem;</li>
+                        <li>Aperiam nulla ea neque.</li>
+                    </ol>
+                    <button class="price-item-btn">buy</button>
+                </div>
+                <div class="price-item"> 
+                   <span class="price-item-title">Lux</span> 
+                   <span class="price-item-cost">$200</span>
+                    <ol class="price-item-list">
+                        <li>Porro officia cumque sint deleniti;</li>
+                        <li>Тemo facere rem vitae odit;</li>
+                        <li>Cum odio, iste quia doloribus autem;</li>
+                        <li>Aperiam nulla ea neque.</li>
+                        <li>Porro officia cumque sint deleniti;</li>
+                        <li>Тemo facere rem vitae odit;</li>
+                        <li>Cum odio, iste quia doloribus autem; </li>
+                        <li>Aperiam nulla ea neque.</li>
+                        <li>Porro officia cumque sint deleniti;</li>
+                        <li>Тemo facere rem vitae odit;</li>
+                        <li>Cum odio, iste quia doloribus autem;</li>
+                        <li>Aperiam nulla ea neque.</li>
+                    </ol>
+                    <button class="price-item-btn">buy</button>
+                </div>
+            </section>
+        </main>
+        <footer class="main-footer"> 
+           <span class="main-footer_title">Contacts</span>
+            <form class="main-footer_form" action="#" method="post">
+                <input type="text" placeholder="Your name:">
+                <input type="email" placeholder="Your email:">
+                <textarea placeholder="Your message:"></textarea>
+                <input type="submit" value="send"> </form>
+            <div class="main-footer_contacts">
+                <ul class="main-footer-list">
+                    <li class="main-footer-list-item-1">here_your_login_skype</li>
+                    <li class="main-footer-list-item-2">279679659</li>
+                    <li class="main-footer-list-item-3">psdhtmlcss@mail.ru</li>
+                    <li class="main-footer-list-item-4">80 00 4568 55 55</li>
+                </ul> 
+                <div class="main-footer-social">
+                   <a href="#" class="main-footer-social-item"></a>
+                   <a href="#" class="main-footer-social-item"></a>
+                   <a href="#" class="main-footer-social-item"></a>
+                   <a href="#" class="main-footer-social-item"></a>
+                   <a href="#" class="main-footer-social-item"></a>
+                </div>
+            </div>
+                <div class="main-footer-last">Copyright &copy; 2014 Product name - 
+                <a class="main-footer-link" href="#">PSD</a> 
+                <a class="main-footer-link" href="#">HTML</a> 
+                <a class="main-footer-link" href="#">CSS</a> 
+            </div>
+        </footer>
+    </div>
+</body>
+
+</html>