Stanislav23reg · Stanislav23reg · Sep 19, 2018 · Sep 28, 2018
diff --git a/css/style.css b/css/style.css
diff --git a/favicon.ico b/favicon.ico
diff --git a/img/Plus.gif b/img/Plus.gif
diff --git a/img/check icon.png b/img/check icon.png
diff --git a/img/email icon.png b/img/email icon.png
diff --git a/img/facebook icon.png b/img/facebook icon.png
diff --git a/img/google icon.png b/img/google icon.png
diff --git a/img/icq icon.png b/img/icq icon.png
diff --git a/img/in icon.png b/img/in icon.png
diff --git a/img/phone icon.png b/img/phone icon.png
diff --git a/img/product.jpg b/img/product.jpg
diff --git a/img/scrinshot1.JPG b/img/scrinshot1.JPG
diff --git a/img/scrinshot2.JPG b/img/scrinshot2.JPG
diff --git a/img/scrinshot3.JPG b/img/scrinshot3.JPG
diff --git a/img/scrinshot4.JPG b/img/scrinshot4.JPG
diff --git a/img/skype icon.png b/img/skype icon.png
diff --git a/img/twitter icon.png b/img/twitter icon.png
diff --git a/img/user1.jpg b/img/user1.jpg
diff --git a/img/user2.jpg b/img/user2.jpg
diff --git a/img/user3.jpg b/img/user3.jpg
diff --git a/img/user4.jpg b/img/user4.jpg
diff --git a/img/youtube icon.png b/img/youtube icon.png
diff --git a/index.html b/index.html
@@ -0,0 +1,197 @@
+<!DOCTYPE html>
+<html lang="ru">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Купить велосипед Stark Jam 24.1 V</title>
+  <link rel="stylesheet" href="css/style.css">
+  <link rel="shortcut icon" href="favicon.ico">
+</head>
+
+<body>
+  <header>
+    <div class="header_left">
+      <h1>Велосипед stark jam 24</h1>
+      <ul>
+        <li>Легко и быстро складывается</li>
+        <li>Для езды по городу и небольших путешествий</li>
+        <li>Удобный, стильный и очень практичный</li>
+        <li>Большие 24-х дюймовые колёса</li>
+      </ul>
+    </div>
+    <img src="img/product.jpg" alt="название товара" height="214" width="469">
+  </header>
+  <main>
+    <section class="about">
+      <div class="about_left">
+        <h2>Описание товара</h2>
+        <p>Велосипед для взрослых Stark Jam 24.1 V оборудован шестью передачами, которые позволят вам уверенно перемещаться по городу, а также эффективными ободными тормозами типа V-brake.</p>
+        <p>Лёгкая алюминиевая рама, удобная система сборки велосипеда, компактный багажник, подножка и крылья делают этот велосипед удобным в эксплуатации.</p>
+      </div>
+      <div class="about_right">
+        <iframe width="430" height="245" src="https://www.youtube.com/embed/ayXv6JFGlRg" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
+      </div>
+    </section>
+    <section class="pluses">
+      <h2>Преимущества</h2>
+      <div class="pluses_wrapper">
+        <ul>
+          <li>Лёгкая алюминиевая рама, удобная система сборки велосипеда, компактный багажник, подножка и крылья делают этот велосипед удобным в эксплуатации.</li>
+          <li>Лёгкая алюминиевая рама, удобная система сборки велосипеда, компактный багажник, подножка и крылья делают этот велосипед удобным в эксплуатации.</li>
+          <li>Лёгкая алюминиевая рама, удобная система сборки велосипеда, компактный багажник, подножка и крылья делают этот велосипед удобным в эксплуатации.</li>
+        </ul>
+        <ul>
+          <li>Лёгкая алюминиевая рама, удобная система сборки велосипеда, компактный багажник, подножка и крылья делают этот велосипед удобным в эксплуатации.</li>
+          <li>Лёгкая алюминиевая рама, удобная система сборки велосипеда, компактный багажник, подножка и крылья делают этот велосипед удобным в эксплуатации.</li>
+          <li>Лёгкая алюминиевая рама, удобная система сборки велосипеда, компактный багажник, подножка и крылья делают этот велосипед удобным в эксплуатации.</li>
+        </ul>
+      </div>
+    </section>
+    <section class="scrinshots">
+      <h2>Скриншоты</h2>
+      <div class="scrinshots_wrapper">
+        <div class="scrinshot">
+          <figure><img src="img/scrinshot1.JPG" alt="велосипед в багажнике" width="200" height="150"></figure>
+          <div>
+            <span>Помещается в багажнике</span>
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores mollitia cupiditate quo, ipsum culpa natus nisi architecto nostrum sit aliquid facilis debitis fuga, quae corrupti voluptate? Praesentium optio, consectetur voluptatum!</p>
+          </div>
+        </div>
+        <div class="scrinshot">
+          <figure><img src="img/scrinshot2.JPG" alt="городской велосипед" width="200" height="150"></figure>
+          <div>
+            <span>Для города</span>
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores mollitia cupiditate quo, ipsum culpa natus nisi architecto nostrum sit aliquid facilis debitis fuga, quae corrupti voluptate? Praesentium optio, consectetur voluptatum!</p>
+          </div>
+        </div>
+        <div class="scrinshot">
+          <figure><img src="img/scrinshot3.JPG" alt="складной велосипед" width="200" height="150"></figure>
+          <div>
+            <span>Легко складывается</span>
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores mollitia cupiditate quo, ipsum culpa natus nisi architecto nostrum sit aliquid facilis debitis fuga, quae corrupti voluptate? Praesentium optio, consectetur voluptatum!</p>
+          </div>
+        </div>
+        <div class="scrinshot">
+          <figure><img src="img/scrinshot4.JPG" alt="девушка на велосипеде" width="200" height="150"></figure>
+          <div>
+            <span>Для активного отдыха</span>
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores mollitia cupiditate quo, ipsum culpa natus nisi architecto nostrum sit aliquid facilis debitis fuga, quae corrupti voluptate? Praesentium optio, consectetur voluptatum!</p>
+          </div>
+        </div>
+      </div>
+    </section>
+    <section class="reviews">
+      <h2>Отзывы</h2>
+      <div class="reviews_wrapper">
+        <div class="review">
+          <div class="user_photo user1"></div>
+          <div class="user_comment">
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio nemo delectus in quis quo, necessitatibus autem quisquam non fuga vitae. Repellat ex nesciunt, adipisci iusto nisi veniam maiores praesentium ratione.</p>
+            <span>user 1</span>
+          </div>
+        </div>
+        <div class="review">
+          <div class="user_photo user2"></div>
+          <div class="user_comment">
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio nemo delectus in quis quo, necessitatibus autem quisquam non fuga vitae. Repellat ex nesciunt, adipisci iusto nisi veniam maiores praesentium ratione.</p>
+            <span>user 2</span>
+          </div>
+        </div>
+        <div class="review">
+          <div class="user_photo user3"></div>
+          <div class="user_comment">
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio nemo delectus in quis quo, necessitatibus autem quisquam non fuga vitae. Repellat ex nesciunt, adipisci iusto nisi veniam maiores praesentium ratione.</p>
+            <span>user 3</span>
+          </div>
+        </div>
+        <div class="review">
+          <div class="user_photo user4"></div>
+          <div class="user_comment">
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio nemo delectus in quis quo, necessitatibus autem quisquam non fuga vitae. Repellat ex nesciunt, adipisci iusto nisi veniam maiores praesentium ratione.</p>
+            <span>user 4</span>
+          </div>
+        </div>
+      </div>
+    </section>
+    <section class="buy_now">
+      <h2>Купить товар</h2>
+      <div class="buy_now_wrapper">
+        <div class="buy_now_box">
+          <span class="buy_now_name">standart</span>
+          <span class="buy_now_price">&#8381; 1000</span>
+          <ol>
+            <li>Lorem ipsum dolor sit amet</li>
+            <li>Lorem ipsum dolor sit amet</li>
+            <li>Lorem ipsum dolor sit amet</li>
+            <li>Lorem ipsum dolor sit amet</li>
+          </ol>
+          <a href="#">buy</a>
+        </div>
+        <div class="buy_now_box">
+          <span class="buy_now_name">premium</span>
+          <span class="buy_now_price">&#8381; 1500</span>
+          <ol>
+            <li>Lorem ipsum dolor sit amet</li>
+            <li>Lorem ipsum dolor sit amet</li>
+            <li>Lorem ipsum dolor sit amet</li>
+            <li>Lorem ipsum dolor sit amet</li>
+            <li>Lorem ipsum dolor sit amet</li>
+            <li>Lorem ipsum dolor sit amet</li>
+            <li>Lorem ipsum dolor sit amet</li>
+            <li>Lorem ipsum dolor sit amet</li>
+          </ol>
+          <a href="#">buy</a>
+        </div>
+        <div class="buy_now_box">
+          <span class="buy_now_name">lux</span>
+          <span class="buy_now_price">&#8381; 2000</span>
+          <ol>
+            <li>Lorem ipsum dolor sit amet</li>
+            <li>Lorem ipsum dolor sit amet</li>
+            <li>Lorem ipsum dolor sit amet</li>
+            <li>Lorem ipsum dolor sit amet</li>
+            <li>Lorem ipsum dolor sit amet</li>
+            <li>Lorem ipsum dolor sit amet</li>
+            <li>Lorem ipsum dolor sit amet</li>            
+            <li>Lorem ipsum dolor sit amet</li>
+            <li>Lorem ipsum dolor sit amet</li>
+            <li>Lorem ipsum dolor sit amet</li>
+            <li>Lorem ipsum dolor sit amet</li>
+            <li>Lorem ipsum dolor sit amet</li>
+          </ol>
+          <a href="#">buy</a>
+        </div>
+      </div>
+    </section>
+  </main>
+  <footer>
+    <h2>Контакты</h2>
+    <div class="contacts">
+      <form action="#">
+        <input type="text" placeholder="Имя" required>
+        <input type="text" placeholder="email" required>
+        <textarea name="contact_form" rows="6" placeholder="Текст сообщения:"></textarea>
+        <input type="submit">
+      </form>
+      <div class="contacts_right">
+        <ul class="contacts_messengers">
+          <li class="contact_skype">skype</li>
+          <li class="contact_icq">999999999</li>
+          <li class="contact_mail">[email protected]</li>
+          <li class="contact_tel"><a href="tel:+7000000000">+7000000000</a></li>
+        </ul>
+        <ul class="contacts_social">
+          <li><a class="contacts_social_twitter" href="#"></a></li>
+          <li><a class="contacts_social_facebook" href="#"></a></li>
+          <li><a class="contacts_social_in" href="#"></a></li>
+          <li><a class="contacts_social_google" href="#"></a></li>
+          <li><a class="contacts_social_youtube" href="#"></a></li>
+        </ul>
+      </div>
+    </div>
+    <span class="copyright">Copyright &copy; 2018</span>
+  </footer>
+</body>
+
+</html>