diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..6e910a9
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,412 @@
+html {
+  background: #DCDCDC;
+}
+body {
+  margin: 0 auto;
+  font-family: sans-serif;
+  width: 100%;
+  max-width: 1400px;
+  background: #fff;
+}
+ul {
+  padding: 0;
+  margin: 0;
+}
+h1 {
+  font-size: 60px;
+  font-weight: 400;
+  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.3);
+  margin: 0 0 50px;
+  text-transform: capitalize;
+}
+h2 {
+  color:  #445161;
+  font-size: 30px;
+  font-weight: 400;
+  margin: 0 0 30px;
+  text-align: center;
+}
+header {
+  background: #445161;
+  padding: 50px;
+  color: #fff;
+  display: flex;
+  justify-content: space-between;
+}
+.header_left li {
+  list-style-image: url("../img/check%20icon.png");
+  margin-left: 35px;
+  font-size: 20px;
+  font-weight: 400;
+  line-height: 36px;
+  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.3);
+}
+.about {
+  padding: 50px;
+  display: flex;
+}
+.about h2 {
+  text-align: left;
+}
+.about_left p {
+  color:  #333;
+  font-size: 16px;
+  font-weight: 400;
+  margin-right: 101px;
+}
+.pluses {
+  padding: 50px;
+  background: #F2F2F2;
+}
+.pluses_wrapper {
+  display: flex;
+  color:  #333;
+  font-size: 16px;
+  font-weight: 400;
+}
+.pluses_wrapper li {
+  list-style-type: none;
+  background: url("../img/Plus.gif");
+  padding-left: 41px;
+  background-repeat: no-repeat;
+  margin-right: 23px;
+  margin-bottom: 35px;
+}
+.scrinshots {
+  padding: 50px;
+}
+.scrinshots_wrapper {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+.scrinshot {
+  display: flex;
+  width: 574px;
+  margin-bottom: 30px;
+}
+figure {
+  margin: 0;
+}
+.scrinshot img {
+  display: block;
+  width: 200px;
+  height: 150px;
+}
+.scrinshot div {
+  margin: 0 15px;
+}
+.scrinshot div span {
+  color:  #445161;
+  font-size: 24px;
+  font-weight: 400;
+}
+.scrinshot div p {
+  margin: 15px 0 0 0;
+  color:  #333333;
+  font-weight: 400;
+}
+.reviews {
+  padding: 50px;
+  background: #F2F2F2;
+}
+.reviews_wrapper {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+.review {
+  display: flex;
+  margin-bottom: 24px;
+}
+.user_photo {
+  height: 75px;
+  width: 75px;
+  border-radius: 50%;
+}
+.user1 {
+  background: url("../img/user1.jpg");
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+.user2 {
+  background: url("../img/user2.jpg");
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+.user3 {
+  background: url("../img/user3.jpg");
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+.user4 {
+  background: url("../img/user4.jpg");
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+.user_comment {
+  background: #E9E9E9;
+  width: 483px;
+  margin-left: 21px;
+  margin-bottom: 24px;
+  padding: 0 20px;
+  position: relative;
+}
+.user_comment:before {
+  content: "";
+  display: block;
+  position: absolute;
+  left: -20px;
+  top: 27px;
+  border: 10px solid transparent;
+  border-right: 10px solid #E9E9E9;
+}
+.user_comment p {
+  color:  #333333;
+  font-size: 14px;
+  font-style: italic;
+}
+.user_comment span {
+  color:  #989898;
+  font-size: 14px;
+  font-weight: 400;
+  text-transform: capitalize;
+  margin-bottom: 16px;
+  display: block;
+}
+.buy_now {
+  padding: 50px 40px 40px;
+}
+.buy_now_wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  align-items: flex-end;
+}
+.buy_now_box {
+  background: #445161;
+  border-radius: 5px;
+  border: 2px solid #445161;
+  width: 296px;
+  margin: 10px;
+}
+.buy_now_name {
+  margin: 15px 0;
+  display: block;
+  text-align: center;
+  color:  #ffffff;
+  font-size: 24px;
+  font-weight: 400;
+  text-transform: capitalize;
+}
+.buy_now_price {
+  background: #fff;
+  color:  #445162;
+  font-size: 40px;
+  font-weight: 400;
+  padding: 18px 0;
+  display: block;
+  text-align: center;
+}
+.buy_now_box ol {
+  color: #fff;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 24px;
+}
+.buy_now_box a {
+  text-decoration: none;
+  color:  #445161;
+  font-size: 18px;
+  font-weight: 700;
+  display: block;
+  width: 256px;
+  background: #fff;
+  text-align: center;
+  margin: 10px auto;
+  padding: 10px 0;
+  text-transform: uppercase;
+  border: 2px solid #fff;
+  border-radius: 5px;
+}
+.buy_now_box a:hover,
+input[type=submit]:hover {
+  color: #fff;
+  background: #445161;
+  transition: 0.4s;
+}
+.buy_now_box a:active,
+input[type=submit]:active {
+  background: #dcdcdc;
+}
+footer {
+  padding-top: 50px;
+  background: #445161;
+}
+footer h2 {
+  color: #fff;
+}
+.contacts {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 50px;
+}
+.contacts form {
+  display: flex;
+  flex-direction: column;
+}
+input[type=text],
+textarea {
+  margin-bottom: 21px;
+  color:  #445162;
+  font-size: 16px;
+  font-weight: 400;
+  padding: 14px 10px;
+  border-radius: 5px;
+  width: 500px;
+  border: none;
+}
+input[type=submit] {
+  margin: 0 auto;
+  color:  #445162;
+  font-size: 16px;
+  font-weight: 700;
+  text-transform: uppercase;
+  padding: 12px 46px;
+  background: #fff;
+  border-radius: 5px;
+  cursor: pointer;
+  border: 2px solid #fff;
+}
+input[type=text]:focus,
+textarea:focus,
+input[type=submit]:focus {
+  outline: none;
+}
+.contacts_right {
+  margin-left: 46px;
+}
+.contacts_messengers li {
+  color:  #ffffff;
+  font-size: 16px;
+  font-weight: 400;
+  list-style-type: none;
+  display: flex;
+  margin-bottom: 20px;
+}
+.contact_skype {
+  height: 26px;
+  line-height: 26px;
+}
+.contact_skype:before {
+  content: "";
+  display: block;
+  height: 26px;
+  width: 24px;
+  background: url("../img/skype%20icon.png");
+  background-size: contain;
+  background-repeat: no-repeat;
+  margin-right: 3px;
+}
+.contact_icq {
+  height: 26px;
+  line-height: 26px;
+}
+.contact_icq:before {
+  content: "";
+  display: block;
+  height: 26px;
+  width: 26px;
+  background: url("../img/icq%20icon.png");
+  background-size: contain;
+  background-repeat: no-repeat;
+  margin-right: 3px;
+}
+.contact_mail {
+  height: 22px;
+  line-height: 22px;
+}
+.contact_mail:before {
+  content: "";
+  display: block;
+  height: 22px;
+  width: 22px;
+  background: url("../img/email%20icon.png");
+  background-size: contain;
+  background-repeat: no-repeat;
+  margin-right: 3px;
+}
+.contact_tel a {
+  color:  #ffffff;
+  font-size: 16px;
+  font-weight: 400;
+  text-decoration: none;
+  vertical-align: middle;
+  display: flex;
+  height: 23px;
+  line-height: 23px;
+}
+.contact_tel a:before {
+  content: "";
+  display: block;
+  height: 23px;
+  width: 24px;
+  background: url("../img/phone%20icon.png");
+  background-size: contain;
+  background-repeat: no-repeat;
+  margin-right: 3px;
+}
+.contacts_social {
+  display: flex;
+  margin-top: 32px;
+}
+.contacts_social li {
+  list-style-type: none;
+}
+.contacts_social a {
+  display: block;
+  width: 42px;
+  height: 42px;
+  margin-left: 7.5px;
+}
+.contacts_social a:hover {
+  filter: brightness(0.75);
+}
+.contacts_social a:active {
+  filter: brightness(0.9);
+}
+.contacts_social_twitter {
+  background: url("../img/twitter%20icon.png");
+  background-size: contain;
+  background-repeat: no-repeat;
+}
+.contacts_social_facebook {
+  background: url("../img/facebook%20icon.png");
+  background-size: contain;
+  background-repeat: no-repeat;
+}
+.contacts_social_in {
+  background: url("../img/in%20icon.png");
+  background-size: contain;
+  background-repeat: no-repeat;
+}
+.contacts_social_google {
+  background: url("../img/google%20icon.png");
+  background-size: contain;
+  background-repeat: no-repeat;
+}
+.contacts_social_youtube {
+  background: url("../img/youtube%20icon.png");
+  background-size: contain;
+  background-repeat: no-repeat;
+}
+.copyright {
+  color:  #445162;
+  font-size: 12px;
+  font-weight: 400;
+  letter-spacing: 0.3px;
+  background: #F2F2F2;
+  display: block;
+  padding: 5px 0;
+  text-align: center;
+}
\ No newline at end of file
diff --git a/favicon.ico b/favicon.ico
new file mode 100644
index 0000000..640e311
Binary files /dev/null and b/favicon.ico differ
diff --git a/img/Plus.gif b/img/Plus.gif
new file mode 100644
index 0000000..b46f42d
Binary files /dev/null and b/img/Plus.gif differ
diff --git a/img/check icon.png b/img/check icon.png
new file mode 100644
index 0000000..82eb68d
Binary files /dev/null and b/img/check icon.png differ
diff --git a/img/email icon.png b/img/email icon.png
new file mode 100644
index 0000000..af2997c
Binary files /dev/null and b/img/email icon.png differ
diff --git a/img/facebook icon.png b/img/facebook icon.png
new file mode 100644
index 0000000..06bf6af
Binary files /dev/null and b/img/facebook icon.png differ
diff --git a/img/google icon.png b/img/google icon.png
new file mode 100644
index 0000000..6292240
Binary files /dev/null and b/img/google icon.png differ
diff --git a/img/icq icon.png b/img/icq icon.png
new file mode 100644
index 0000000..0bdf8c4
Binary files /dev/null and b/img/icq icon.png differ
diff --git a/img/in icon.png b/img/in icon.png
new file mode 100644
index 0000000..62479e2
Binary files /dev/null and b/img/in icon.png differ
diff --git a/img/phone icon.png b/img/phone icon.png
new file mode 100644
index 0000000..63b0f18
Binary files /dev/null and b/img/phone icon.png differ
diff --git a/img/product.jpg b/img/product.jpg
new file mode 100644
index 0000000..c05fe86
Binary files /dev/null and b/img/product.jpg differ
diff --git a/img/scrinshot1.JPG b/img/scrinshot1.JPG
new file mode 100644
index 0000000..58b7e5b
Binary files /dev/null and b/img/scrinshot1.JPG differ
diff --git a/img/scrinshot2.JPG b/img/scrinshot2.JPG
new file mode 100644
index 0000000..a25ff59
Binary files /dev/null and b/img/scrinshot2.JPG differ
diff --git a/img/scrinshot3.JPG b/img/scrinshot3.JPG
new file mode 100644
index 0000000..e75e710
Binary files /dev/null and b/img/scrinshot3.JPG differ
diff --git a/img/scrinshot4.JPG b/img/scrinshot4.JPG
new file mode 100644
index 0000000..a9775d3
Binary files /dev/null and b/img/scrinshot4.JPG differ
diff --git a/img/skype icon.png b/img/skype icon.png
new file mode 100644
index 0000000..d274c5c
Binary files /dev/null and b/img/skype icon.png differ
diff --git a/img/twitter icon.png b/img/twitter icon.png
new file mode 100644
index 0000000..ee55254
Binary files /dev/null and b/img/twitter icon.png differ
diff --git a/img/user1.jpg b/img/user1.jpg
new file mode 100644
index 0000000..7a45175
Binary files /dev/null and b/img/user1.jpg differ
diff --git a/img/user2.jpg b/img/user2.jpg
new file mode 100644
index 0000000..b5716e0
Binary files /dev/null and b/img/user2.jpg differ
diff --git a/img/user3.jpg b/img/user3.jpg
new file mode 100644
index 0000000..08b5926
Binary files /dev/null and b/img/user3.jpg differ
diff --git a/img/user4.jpg b/img/user4.jpg
new file mode 100644
index 0000000..4094d0b
Binary files /dev/null and b/img/user4.jpg differ
diff --git a/img/youtube icon.png b/img/youtube icon.png
new file mode 100644
index 0000000..b36444b
Binary files /dev/null and b/img/youtube icon.png differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..4e5f05f
--- /dev/null
+++ 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">999999999@mail.ru</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>
\ No newline at end of file