diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..84c6023
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,171 @@
+html {
+  background-color: #DCDCDC;
+}
+body {
+  margin: 0 auto;
+  max-width: 1920px;
+  background-color: #fff;
+}
+header {
+  background-image: url(../img/photo.png);
+  background-size: cover;
+  background-repeat: no-repeat;
+  width: 100%;
+  padding: 40px 0;
+}
+.header_top {
+  display: flex;
+  justify-content: center;
+  text-align: center;
+}
+.header_logo {
+  display: flex;
+  font-family: Raleway;
+  font-size: 34px;
+  font-weight: 400;
+  text-decoration: none;
+  margin-right: 219px;
+  height: 56px;
+  line-height: 56px;
+  color: #fff;
+}
+nav ul {
+  display: flex;
+}
+nav li {
+  list-style-type: none;
+  margin-right: 30px;
+}
+nav li:last-child {
+  margin-right: 63px;
+}
+nav a {
+  text-decoration: none;
+  font-family: Montserrat;
+  font-size: 14px;
+  font-weight: 300;
+  color: #fff;
+  text-transform: capitalize;
+}
+nav a:hover {
+  color: #dcdcdc;
+}
+nav a:active {
+  color: gray;
+}
+.header_basket {
+  display: block;
+  width: 18px;
+  height: 24px;
+  background: url("../img/icon-cart.png");
+  background-size: contain;
+  background-repeat: no-repeat;
+  margin: auto 0;
+}
+.header_basket:hover {
+  filter: invert(0.2);
+}
+.header_basket:active {
+  filter: invert(0.7);
+}
+.service {
+  display: flex;
+  justify-content: center;
+  padding-top: 120px;
+  padding-bottom: 80px;
+}
+.service_box {
+  width: 266px;
+  text-align: center;
+  position: relative;
+  margin-right: 33px;
+}
+.service_box:last-child {
+  margin-right: 0;
+}
+.service_box input {
+  display: none;
+}
+.service_box input:checked ~ .service_label {
+  color: #c7b299;
+}
+.service_box input:checked ~ .service_label:before {
+  filter: invert(0);
+}
+.service_box input:checked ~ .service_box_line {
+  background-color: #c7b299;
+}
+.service_box label {
+  font-family: Raleway;
+  color:  #555;
+  font-size: 22px;
+  font-weight: 600;
+  text-transform: capitalize;
+  cursor: pointer;
+}
+.service_box label[for=service_option1]:before {
+  content: "";
+  display: block;
+  height: 49px;
+  width: 49px;
+  position: absolute;
+  top: -60px;
+  left: 108.5px;
+  background: url("../img/icon1.png");
+  background-size: contain;
+  background-repeat: no-repeat;
+  margin: 0 auto;
+  filter: invert(0.6);
+}
+.service_box label[for=service_option2]:before {
+  content: "";
+  display: block;
+  height: 40px;
+  width: 44px;
+  position: absolute;
+  top: -60px;
+  left: 111px;
+  background: url("../img/icon2.png");
+  background-size: contain;
+  background-repeat: no-repeat;
+  margin: 0 auto;
+  filter: invert(0.6);
+}
+.service_box label[for=service_option3]:before {
+  content: "";
+  display: block;
+  height: 44px;
+  width: 44px;
+  position: absolute;
+  top: -60px;
+  left: 111px;
+  background: url("../img/icon3.png");
+  background-size: contain;
+  background-repeat: no-repeat;
+  margin: 0 auto;
+  filter: invert(0.6);
+  margin-bottom: 30px;
+}
+.service_box label[for=service_option4]:before {
+  content: "";
+  display: block;
+  height: 36px;
+  width: 52px;
+  position: absolute;
+  top: -60px;
+  left: 107px;
+  background: url("../img/icon4.png");
+  background-size: contain;
+  background-repeat: no-repeat;
+  margin: 0 auto;
+  filter: invert(0.6);
+  margin-bottom: 30px;
+}
+.service_box_line {
+  display: block;
+  height: 3px;
+  width: 70px;
+  background-color: #f1eee9;
+  margin: 0 auto;
+  margin-top: 30px;
+}
\ No newline at end of file
diff --git a/img/icon-cart.png b/img/icon-cart.png
new file mode 100644
index 0000000..48dc369
Binary files /dev/null and b/img/icon-cart.png differ
diff --git a/img/icon-search.png b/img/icon-search.png
new file mode 100644
index 0000000..6176c63
Binary files /dev/null and b/img/icon-search.png differ
diff --git a/img/icon1.png b/img/icon1.png
new file mode 100644
index 0000000..e8ccb50
Binary files /dev/null and b/img/icon1.png differ
diff --git a/img/icon2.png b/img/icon2.png
new file mode 100644
index 0000000..5dc9cd2
Binary files /dev/null and b/img/icon2.png differ
diff --git a/img/icon3.png b/img/icon3.png
new file mode 100644
index 0000000..4d57cc6
Binary files /dev/null and b/img/icon3.png differ
diff --git a/img/icon4.png b/img/icon4.png
new file mode 100644
index 0000000..d86f7de
Binary files /dev/null and b/img/icon4.png differ
diff --git a/img/logos.png b/img/logos.png
new file mode 100644
index 0000000..af33285
Binary files /dev/null and b/img/logos.png differ
diff --git a/img/photo.png b/img/photo.png
new file mode 100644
index 0000000..dc75a2f
Binary files /dev/null and b/img/photo.png differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..1bd2608
--- /dev/null
+++ b/index.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Document</title>
+  <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+  <header>
+    <div class="header_top">
+      <a href="#" class="header_logo"><img src="img/logos.png" alt="logos" height="56" width="64">Waxom</a>
+      <nav>
+        <ul>
+          <li><a href="#">Home</a></li>
+          <li><a href="#">About us</a></li>
+          <li><a href="#">Portfolio</a></li>
+          <li><a href="#">Features</a></li>
+          <li><a href="#">Blog</a></li>
+          <li><a href="#">Pricing</a></li>
+          <li><a href="#">Shortcodecs</a></li>
+          <li><a href="#">Contact</a></li>
+        </ul>
+      </nav>
+      <a href="#" class="header_basket"></a>
+    </div>
+  </header>
+  <main>
+    <section class="service">
+      <div class="service_box">
+        <input type="radio" name="service_option" id="service_option1" checked>
+        <label class="service_label" for="service_option1">Web &amp; app design</label>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero reiciendis obcaecati illo beatae soluta nesciunt aperiam ex, nostrum quo! Expedita deserunt eaque molestias, odit culpa, unde enim. Neque quia, voluptate.</p>
+        <span class="service_box_line"></span>
+      </div>
+      <div class="service_box">
+        <input type="radio" name="service_option" id="service_option2">
+        <label class="service_label" for="service_option2">Development</label>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero reiciendis obcaecati illo beatae soluta nesciunt aperiam ex, nostrum quo! Expedita deserunt eaque molestias, odit culpa, unde enim. Neque quia, voluptate.</p>
+        <span class="service_box_line"></span>
+      </div>
+      <div class="service_box">
+        <input type="radio" name="service_option" id="service_option3">
+        <label class="service_label" for="service_option3">Customization</label>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero reiciendis obcaecati illo beatae soluta nesciunt aperiam ex, nostrum quo! Expedita deserunt eaque molestias, odit culpa, unde enim. Neque quia, voluptate.</p>
+        <span class="service_box_line"></span>
+      </div>
+      <div class="service_box">
+        <input type="radio" name="service_option" id="service_option4">
+        <label class="service_label" for="service_option4">Marketing</label>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero reiciendis obcaecati illo beatae soluta nesciunt aperiam ex, nostrum quo! Expedita deserunt eaque molestias, odit culpa, unde enim. Neque quia, voluptate.</p>
+        <span class="service_box_line"></span>
+      </div>
+    </section>
+  </main>
+</body>
+</html>
\ No newline at end of file