Initial commit

project1/css/media.css

+@media screen and (max-width: 1150px) {
+  .container {
+    max-width: 900px;
+  }
+
+  .header {
+    position: static;
+  }
+
+  .call_us_btn {
+    right: 5px;
+  }
+
+  .gallery_img {
+    float: left;
+    width: 100%;
+    height: auto;
+  }
+
+  .gallery_images {
+    text-align: center;
+  }
+
+  .promo {
+    text-align: center;
+  }
+
+  .gallery_img_link {
+    width: 30%;
+  }
+
+  .our_partners {
+    padding: 0;
+  }
+
+  .partner_item {
+    margin-right: 70px;
+  }
+
+  .client_quotes {
+    padding: 0 10px;
+    text-align: center;
+  }
+
+  .client_quote {
+    text-align: left;
+    width: 40%;
+  }
+
+  .form {
+    width: 400px;
+  }
+
+  .form_field input {
+    height: 50px;
+  }
+
+  .form_btn {
+    padding: 20px 0;
+  }
+
+  .promo_title {
+    font-size: 30px;
+    top: 25%;
+    left: 5%;
+    line-height: 50px;
+  }
+}
+
+@media screen and (max-width: 900px) {
+  .container {
+    max-width: 600px;
+  }
+
+  .menu {
+    padding-top: 0;
+  }
+
+  .logo {
+    margin-top: 15px;
+  }
+
+  .drop_menu {
+    display: none;
+  }
+
+  .menu_item {
+    display: block;
+    text-align: right;
+    margin: 0;
+  }
+
+  .menu_link {
+    padding: 15px 25px;
+    display: block;
+    font-size: 17px;
+    border-radius: 0;
+  }
+
+  .menu_link:hover {
+    border-bottom-color: transparent;
+  }
+
+  .menu_list {
+    display: none;
+    margin-top: 35px;
+  }
+
+  .bars_icon {
+    display: inline-block;
+    width: 35px;
+    height: 32px;
+    background: url(../img/bars_ic.png) no-repeat center;
+    padding: 30px;
+    padding-left: 50px;
+    position: absolute;
+    right: 0;
+  }
+
+  input:checked+.menu_list {
+    display: block;
+  }
+
+  .call_us_btn {
+    right: 38%;
+    top: 10px;
+  }
+
+  .promo_title {
+    font-size: 30px;
+    top: 25%;
+    left: 5%;
+    line-height: 50px;
+  }
+
+  .promo_title_small {
+    font-size: 25px;
+  }
+
+  .gallery {
+    padding-top: 50px;
+  }
+
+  .page_subtitle {
+    margin-bottom: 30px;
+  }
+
+  .gallery_img_link {
+    width: 40%
+  }
+
+  .partner_link {
+    padding: 10px;
+  }
+
+  .partner_item {
+    margin: 0;
+    margin-bottom: 30px;
+    width: 30%;
+  }
+
+  .partners_wrapper {
+    text-align: center;
+    padding-bottom: 0;
+  }
+
+  .our_clients {
+    padding-bottom: 50px;
+  }
+
+  .client_quote {
+    display: block;
+    width: 100%;
+    padding: 10px 15px;
+    background: rgba(255, 255, 255, 0.7);
+    border-radius: 5px;
+  }
+
+  .form {
+    padding: 20px;
+    margin-top: 100px;
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .container {
+    max-width: 400px;
+  }
+
+  .logo {
+    margin-left: 10px;
+  }
+
+  .call_us_btn {
+    position: static;
+    display: inline-block;
+    margin-top: 20px;
+    margin-right: 100px;
+    margin-left: 10px;
+    padding: 10px 35px
+  }
+
+  .form {
+    width: 100%;
+  }
+
+  .promo_title {
+    font-size: 20px;
+    line-height: 1.2;
+    top: 20%;
+  }
+
+  .promo_title_small {
+    font-size: 16px;
+  }
+
+  .section_title {
+    font-size: 25px;
+    letter-spacing: 2px;
+    margin-bottom: 15px;
+  }
+
+  .page_subtitle {
+    letter-spacing: normal;
+  }
+
+  .gallery {
+    padding: 20px 0;
+  }
+
+  .gallery_img_link {
+    width: 80%;
+    margin-bottom: 20px;
+  }
+
+  .partner_item {
+    width: 40%;
+    margin-bottom: 40px;
+  }
+
+  .our_clients {
+    padding: 40px 5px;
+  }
+
+  .client_quotes {
+    padding: 0;
+  }
+
+  .client_quote {
+    text-align: center;
+  }
+
+  .client_link {
+    text-align: center;
+  }
+
+  .client_name {
+    width: 100%;
+    margin-left: 0;
+    margin-top: 10px;
+  }
+
+  .client_quote_text {
+    font-size: 16px;
+    line-height: 20px;
+  }
+
+  .form {
+    background: rgba(255, 255, 255, 0.7);
+    margin-top: 50px;
+
+  }
+
+  .form_subtitle {
+    margin-bottom: 20px;
+  }
+}
\ No newline at end of file

project1/css/reset.css

+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+
+body {
+  line-height: 1;
+}
+
+ol,
+ul {
+  list-style: none;
+}
+
+blockquote,
+q {
+  quotes: none;
+}
+
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: '';
+  content: none;
+}
+
+table {
+  border-spacing: 0;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+}
+
+.clearfix::after {
+  content: "";
+  display: block;
+  clear: both;
+}
+button, input {
+  outline: none;
+}
\ No newline at end of file

project1/css/style.css

+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.container {
+  max-width: 1140px;
+  margin: 0 auto;
+}
+
+.page_titles {
+  text-transform: uppercase;
+  font-weight: bold;
+}
+
+.header {
+  text-transform: uppercase;
+  font-weight: bold;
+  font-size: 12px;
+  position: fixed;
+  background: rgba(255, 255, 255, 0.8);
+  width: 100%;
+  z-index: 111;
+}
+
+.drop_menu {
+  display: none;
+}
+
+.menu {
+  padding-top: 33px;
+  padding-bottom: 29px;
+  position: relative;
+}
+
+.logo {
+  display: inline-block;
+  background: url(../img/logo.png);
+  width: 117px;
+  height: 27px;
+  margin-right: 71px;
+  margin-left: 3px;
+}
+
+.menu_list {
+  display: inline-block;
+  vertical-align: top;
+  margin-top: 7px;
+}
+
+.menu_item {
+  display: inline-block;
+  color: #9daeb6;
+  margin-right: 22px;
+}
+
+.menu_item:last-child {
+  margin-right: 0;
+}
+
+.menu_link {
+  border-bottom: 2px solid transparent;
+  padding: 9px 0;
+}
+
+.menu_link:hover {
+  border-bottom-color: #36aeea;
+}
+
+.call_us_btn {
+  color: #36aeea;
+  border: 3px solid #36aeea;
+  border-radius: 3px;
+  font-family: 'Raleway', sans-serif;
+  letter-spacing: 2px;
+  padding: 13px 42px;
+  position: absolute;
+  right: 0;
+  top: 24px;
+}
+
+.call_us_btn:hover {
+  color: white;
+  background: #36aeea
+}
+
+.promo_img {
+  width: 100%;
+  height: auto;
+}
+
+.promo {
+  position: relative;
+  color: white;
+}
+
+.promo_title {
+  position: absolute;
+  top: 35%;
+  font-size: 60px;
+  line-height: 75px;
+  right: 49%;
+}
+
+.promo_title_small {
+  font-size: 36px;
+  font-weight: normal;
+  display: block;
+  text-transform: lowercase;
+}
+
+.gallery {
+  text-align: center;
+  padding-top: 73px;
+  padding-bottom: 29px;
+}
+
+.section_title {
+  font-size: 30px;
+  letter-spacing: 3px;
+  margin-bottom: 23px;
+}
+
+.page_subtitle {
+  font-size: 18px;
+  letter-spacing: 2px;
+  margin-bottom: 59px
+}
+
+.gallery_img {
+  display: block;
+  width: 360px;
+  height: 243px;
+  border-radius: 2px;
+}
+
+.gallery_img_link {
+  display: inline-block;
+  margin-bottom: 28px;
+}
+
+.partner_link:hover,
+.gallery_img_link:hover,
+.form_btn:hover,
+.client_link:hover {
+  opacity: 0.8;
+}
+
+.gallery_images {
+  text-align: justify;
+}
+
+.gallery_images::after {
+  content: '';
+  display: inline-block;
+  width: 100%;
+}
+
+.our_partners {
+  background: #f8f9fa;
+  vertical-align: middle;
+  padding-top: 28px;
+  padding-bottom: 20px;
+}
+
+.partners_wrapper {
+  padding: 43px;
+}
+
+.partner_item {
+  height: 38px;
+  display: inline-block;
+  padding: 0;
+  margin-right: 120px;
+}
+
+.partner_item:last-child {
+  margin-right: 0;
+
+}
+
+.partner_link {
+  vertical-align: middle;
+  display: inline-block;
+  background: url(../img/social_networks_sprite.png);
+}
+
+.slack_ic {
+  width: 83px;
+  height: 25px;
+  background-position: 0 -8px;
+}
+
+.a_ic {
+  width: 34px;
+  height: 38px;
+  background-position: -85px 0;
+}
+
+.google_ic {
+  width: 81px;
+  height: 29px;
+  background-position: -124px -7px;
+}
+
+.facebook_ic {
+  width: 82px;
+  height: 16px;
+  background-position: -207px -10px;
+}
+
+.spotify_ic {
+  width: 81px;
+  height: 25px;
+  background-position: -294px -5px;
+}
+
+.nike_ic {
+  width: 70px;
+  height: 26px;
+  background-position: -374px -4px;
+}
+
+.our_clients {
+  padding-top: 75px;
+  text-align: center;
+  background-size: cover;
+  background: url(../img/wather.png) no-repeat bottom center;
+  padding-bottom: 164px;
+}
+
+.client_quotes {
+  text-align: left;
+}
+
+.client_quote {
+  display: inline-block;
+  width: 47%;
+  margin-top: 28px;
+  margin-right: 44px;
+}
+
+.client_quote:last-child {
+  margin-right: 0;
+
+}
+
+.client_quote_text::before {
+  content: url(../img/quotes_ic.png);
+  display: block;
+  margin-bottom: 1px;
+}
+
+.client_quote_text {
+  font-size: 18px;
+  text-align: left;
+  color: #858282;
+  line-height: 33px;
+  margin-bottom: 24px;
+}
+
+.client_link {
+  display: inline-block;
+}
+
+.client_avatar {
+  border-radius: 50%;
+}
+
+.client_name {
+  display: inline-block;
+  vertical-align: top;
+  text-transform: capitalize;
+  color: #36aeea;
+  font-weight: bold;
+  font-size: 16px;
+  margin-top: 25px;
+  margin-left: 14px;
+}
+
+.client_position {
+  font-weight: normal;
+  text-transform: none;
+}
+
+.form {
+  padding: 30px;
+  background: rgba(255, 255, 255, 0.5);
+  width: 515px;
+  border-radius: 10px;
+  margin: 130px auto 0;
+}
+
+.form_title {
+  color: #36aeea;
+  font-size: 36px;
+  letter-spacing: 3px;
+  margin-bottom: 10px;
+  margin-top: 5px;
+}
+
+.form_subtitle {
+  font-size: 16px;
+  margin-bottom: 39px;
+}
+
+.form_field input {
+  width: 100%;
+  height: 60px;
+  border: none;
+  border-radius: 5px;
+  font-size: 18px;
+  padding-left: 17px;
+}
+
+.form_field input::placeholder {
+  color: #ccc;
+}
+
+.form_btn {
+  width: 100%;
+  border: none;
+  background: #36aeea;
+  color: white;
+  text-transform: uppercase;
+  font-size: 16px;
+  font-weight: bold;
+  padding: 26px 0;
+  letter-spacing: 2px;
+  margin-bottom: 20px;
+  cursor: pointer;
+}
+
+.form_field {
+  margin-bottom: 20px
+}
\ No newline at end of file

project1/index.html

+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700|Raleway:700|Roboto:400,700&display=swap"
+    rel="stylesheet">
+  <link rel="stylesheet" href="css/reset.css">
+  <link rel="stylesheet" href="css/style.css">
+  <link rel="stylesheet" href="css/media.css">
+
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Document</title>
+</head>
+
+<body>
+  <header class="header">
+    <div class="container menu">
+      <a href="#" class="logo"></a>
+      <label class="bars_icon" for="drop_menu"></label>
+      <input class="drop_menu" type="checkbox" id="drop_menu">
+      <ul class="menu_list">
+        <li class="menu_item"><a href="#" class="menu_link">main slide</a></li>
+        <li class="menu_item"><a href="#" class="menu_link">gallery</a></li>
+        <li class="menu_item"><a href="#" class="menu_link">Clients say </a></li>
+        <li class="menu_item"><a href="#" class="menu_link">contacts</a></li>
+      </ul>
+      <a href="#" class="call_us_btn">call us</a>
+    </div>
+  </header>
+  <div class="promo">
+    <img class="promo_img" src="img/traveler_in_mountains.jpg" alt="traveler in mountains">
+    <h2 class="promo_title page_titles">Adventure Time
+      <small class="promo_title_small">
+        is waiting for you in the mountains</small></h2>
+  </div>
+
+  <div class="gallery container">
+    <h3 class="section_title page_titles">gallery</h3>
+    <p class="page_subtitle">lorem ipsum is sImply dummy</p>
+    <div class="gallery_images">
+      <a href="#" class="gallery_img_link">
+        <img src="img/traveler_on_the_lake.jpg" alt="traveler on the lake" class="gallery_img">
+      </a>
+      <a href="#" class="gallery_img_link">
+        <img src="img/pair_in_mountains_takes_photo.jpg" alt="pair in mountais takes photo" class="gallery_img">
+      </a>
+      <a href="#" class="gallery_img_link">
+        <img src="img/selfie_in_mountains.jpg" alt="selfie in mountains" class="gallery_img">
+      </a>
+      <a href="#" class="gallery_img_link">
+        <img src="img/crag_view.jpg" alt="crag view" class="gallery_img">
+      </a>
+      <a href="#" class="gallery_img_link">
+        <img src="img/pair_in_mountains.jpg" alt="pair in mountains" class="gallery_img">
+      </a>
+      <a href="#" class="gallery_img_link">
+        <img src="img/river_in_the_mountains.jpg" alt="river in the mountains" class="gallery_img">
+      </a>
+    </div>
+  </div>
+  <div class="our_partners">
+    <div class="container partners_wrapper">
+      <div class="partner_item">
+        <a class="slack_ic partner_link" href="#"></a>
+      </div>
+      <div class="partner_item">
+        <a class=" a_ic partner_link" href="#"></a>
+      </div>
+      <div class="partner_item">
+        <a class=" google_ic partner_link" href="#"></a>
+      </div>
+      <div class="partner_item">
+        <a class=" facebook_ic partner_link" href="#"></a>
+      </div>
+      <div class="partner_item">
+        <a class=" spotify_ic partner_link" href="#"></a>
+      </div>
+      <div class="partner_item">
+        <a class="nike_ic partner_link" href="#"></a>
+      </div>
+    </div>
+  </div>
+  <div class="our_clients">
+    <div class="container">
+      <h3 class="section_title page_titles">our Clients say</h3>
+      <p class="page_subtitle">Lorem ipsum is simply dummy</p>
+      <div class="client_quotes">
+        <div class="client_quote">
+          <p class="client_quote_text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do enim ad minim
+            veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
+            dolor in reprehenderit in voluptate velit esse </p>
+          <a href="#" class="client_link">
+            <img class="client_avatar" src="img/pavliv_yaroslav_avatar.jpg" alt="pavliv yaroslav">
+            <h4 class="client_name">pavliv yaroslav <small class="client_position">Web designer</small></h4>
+          </a>
+        </div>
+        <div class="client_quote">
+          <p class="client_quote_text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do enim ad minim
+            veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
+            dolor
+            in reprehenderit in voluptate velit esse </p>
+          <a href="#" class="client_link">
+            <img class="client_avatar" src="img/john_scott_avatar.jpg" alt="john scott">
+            <h4 class="client_name"> john scott <small class="client_position">The Fringe</small></h4>
+          </a>
+        </div>
+      </div>
+      <form action="#">
+        <div class="form">
+          <h3 class="form_title page_titles">contacts</h3>
+          <p class="form_subtitle">Sign up for our newsletter to receive updates</p>
+          <div class="form_fields">
+            <div class="form_field">
+              <input type="text" placeholder="Name">
+            </div>
+            <div class="form_field">
+              <input type="tel" placeholder="Phone">
+            </div>
+            <div class="form_field">
+              <input type="email" placeholder="E-mail">
+            </div>
+          </div>
+          <button class="form_btn" type="submit">send</button>
+        </div>
+      </form>
+    </div>
+  </div>
+</body>
+
+</html>
\ No newline at end of file

project2/css/style.css

+.footer_social_networks_item,.quotes_item_ic,.projects_item_title_icon{background-color:#86c840;border-radius:50%;align-items:center;justify-content:center;color:#fff;display:inline-flex}.footer_menu_link:hover,.news_link:hover,.news_about_link:hover,.projects_link:hover,.projects_item_title_wrapp:hover,.header .navbar .nav-link:hover,.btn:hover{opacity:.8}body{font-family:"Open Sans",sans-serif}*{box-sizing:border-box;margin:0;padding:0}ul{list-style:none}a{text-decoration:none;color:inherit}.clearfix::after{content:"";display:block;clear:both}.container{max-width:940px;margin:0 auto;padding:0}.title{color:#333;font-weight:normal;font-family:"Roboto Slab",serif}.title small{display:block;color:#424242;font-family:"Open Sans",sans-serif}.content_block_title{border-left:5px solid #86c840;font-size:36px;line-height:1.2;padding:0 18px;margin-bottom:30px}.content_block_title small{font-size:16px}.btn{display:inline-block;background:#86c840;border:none;color:#fff;cursor:pointer;padding:10px 20px;font-size:16px;text-transform:uppercase;text-shadow:2px 2px 5px #969696;border-radius:1px}.btn:focus{outline:none}.btn_arrow_ic{display:inline-block;margin-left:15px}@media screen and (max-width: 940px){.container{max-width:90%}}.header{text-transform:capitalize;font-family:"Roboto Slab",serif;align-items:center;padding:25px 0;margin-bottom:50px}@media screen and (max-width: 940px){.header{margin-bottom:0}}.header .navbar{padding:0;font-size:16px}.header .navbar-toggler{background:url(../img/bars_ic.png) no-repeat center}.header .navbar-nav{margin-left:auto}.header .navbar-collapse{text-align:right}.header .navbar_home_ic{color:#86c840;font-size:14px}.header .navbar .nav-link{margin-left:34px;padding:5px}.header .navbar .nav-link:first-child{margin-left:0}@media screen and (max-width: 940px){.header .navbar .nav-link:first-child{display:none}}@media screen and (max-width: 940px){.header .navbar .nav-link{margin-left:0;display:block;padding:15px 0;text-transform:uppercase;text-align:center}}.promo{background:url(../img/main_pic.jpg) no-repeat;background-size:cover;padding:67px 0;color:#424242;margin-bottom:40px}@media screen and (max-width: 730px){.promo{margin-bottom:20px}}.promo_content{max-width:390px}@media screen and (max-width: 940px){.promo_content{max-width:90%;margin:0 auto}}.promo_title{font-size:36px;margin-bottom:17px}.promo_txt{margin-bottom:35px;line-height:1.5;font-size:16px;font-weight:600}.promo_form{margin-bottom:13px}.promo_form_description{margin-bottom:10px}.promo_form input{height:38px;width:250px;border:1px solid #dadada;padding-left:15px}.promo_form input::placeholder{color:#aaa;font-size:16px}@media screen and (max-width: 730px){.promo_form input{margin-bottom:20px}}.promo_form_btn{background:#34b02a}.projects{padding-top:40px;padding-bottom:72px}.projects_flexbox{padding-top:25px;display:flex;flex-wrap:wrap;justify-content:space-between}@media screen and (max-width: 940px){.projects_flexbox{justify-content:space-around}}.projects_item{flex-basis:300px;margin-bottom:30px}.projects_item_title{font-size:16px}.projects_item_title_wrapp{display:flex;justify-content:space-between;align-items:center;padding:17px 13px}.projects_item_title_icon{height:32px;width:32px}.projects_item small{display:block}.projects_img{display:block;width:100%;height:auto}.projects_img_wrapp{position:relative;border:5px solid #eee;z-index:1;border-radius:5px}.projects_img_wrapp:hover .projects_hoverblock{display:flex}.projects_hoverblock{padding:13px 10px;font-size:12px;color:#fff;background:rgba(0,0,0,.6);position:absolute;bottom:0;left:0;width:100%;justify-content:space-between;display:none}@media screen and (max-width: 940px){.projects_hoverblock{display:flex}}.projects_link{display:inline-block;margin-left:16px}.projects_link_icon{font-size:13px}.projects_btn{padding:8px 28px}.projects_btn_wrapp{text-align:center;margin:10px 0}.quotes{background:#f1f1f1;padding:35px 0}.quotes_item{display:flex;align-items:center;justify-content:space-between}.quotes_item_ic{height:47px;width:47px}.quotes_item_ic_left{margin-bottom:10px}.quotes_item_ic_right{margin-top:18px}.quotes_txt{flex-basis:800px;font-size:28px;text-align:center;letter-spacing:-1px}@media screen and (max-width: 940px){.quotes_txt{flex-basis:70%}}@media screen and (max-width: 730px){.quotes_txt{font-size:25px}}.news{padding-top:83px}@media screen and (max-width: 730px){.news{padding-top:30px}}.news_item{display:flex;align-items:start;margin-bottom:74px}@media screen and (max-width: 730px){.news_item{display:block}}.news_item_wrapp{padding-top:49px}@media screen and (max-width: 730px){.news_item_wrapp{padding-top:10px}}.news_img_wrapp{flex-basis:250px}.news_img_wrapp img{width:100%;height:auto;display:block}.news_info{margin-left:40px}@media screen and (max-width: 730px){.news_info{margin-left:0}}.news_title{font-size:28px;line-height:20px;color:#111;margin-bottom:10px}@media screen and (max-width: 940px){.news_title{line-height:normal}}.news_about_item{font-size:14px;color:#aaa;padding:0 7px;display:inline-block}.news_about_item::before{content:"";display:inline-block;vertical-align:middle;margin-right:15px;background:#86c840;border-radius:50%;height:6px;width:6px}.news_about_item:first-child{padding-left:0}.news_about_item:first-child::before{display:none}.news_txt{font-size:16px;padding-top:10px;line-height:1.5;margin-top:17px;letter-spacing:-1px}.news_link{font-size:16px;display:inline-block;margin-top:14px}.news_link::before{content:url(../img/news_link_arrow_ic.png);display:inline-block;vertical-align:middle;margin-right:5px}.our_shop{background:#222;color:#fff;padding-top:46px;padding-bottom:37px}@media screen and (max-width: 730px){.our_shop{padding:10px 0}}.our_shop_img{flex-basis:140px;height:auto;display:block}.our_shop_title{color:#fff;font-size:18px;padding-bottom:24px}.our_shop_flexbox{display:flex;justify-content:space-between}@media screen and (max-width: 730px){.our_shop_flexbox{display:block}}.our_shop_txt{font-size:16px}.our_shop_item{flex-basis:50%}@media screen and (max-width: 730px){.our_shop_item{margin-bottom:50px}}.our_shop_item_tweets{padding-left:31px}@media screen and (max-width: 730px){.our_shop_item_tweets{padding-left:0}}.our_shop_visit{display:flex;align-items:flex-start}.our_shop_info{padding-left:32px}.our_shop_info_txt{margin-bottom:27px}.our_shop_btn{padding:4px 20px;font-size:14px}.tweets_hashtag{display:block}.tweets_date{font-size:12px;display:block}.tweets_list_item{background:url(../img/tweet_ic.png) no-repeat 0 3px;padding-left:27px;margin-bottom:9px}.footer{padding:33px 0;display:flex;justify-content:space-between;align-items:center;font-size:13px}@media screen and (max-width: 730px){.footer{padding:15px 0}}@media screen and (max-width: 940px){.footer_item{margin-bottom:30px}}@media screen and (max-width: 940px){.footer{display:block;text-align:center}}.footer_design_autor{margin-left:59px}@media screen and (max-width: 940px){.footer_design_autor{margin:0}}.footer_menu_item{display:inline-block;margin-right:27px}@media screen and (max-width: 730px){.footer_menu_item{display:block;margin:0}}@media screen and (max-width: 730px){.footer_menu_link{display:block;padding:10px 0;text-transform:uppercase}}.footer_social_networks_item{margin:0 4px;background:#222;height:40px;width:40px}.footer_social_networks_item:hover{background:#34b02a}

project2/sass/_header_promo.sass

+.header
+    text-transform: capitalize
+    font-family: $secondlyFf
+    align-items: center
+    padding: 25px 0
+    margin-bottom: 50px
+    +md
+        margin-bottom: 0
+    .navbar
+        padding: 0
+        font-size: 16px
+        &-toggler
+            background: url(../img/bars_ic.png) no-repeat center
+        &-nav
+            margin-left: auto
+        &-collapse
+            text-align: right
+        &_home_ic
+            color: $mainAccentDesignColor
+            font-size: 14px
+        .nav-link
+            margin-left: 34px
+            padding: 5px
+            &:hover
+                @extend  %hover_opacity
+            &:first-child
+                margin-left: 0
+                +md
+                    display: none
+            +md
+                margin-left: 0
+                display: block
+                padding: 15px 0
+                text-transform: uppercase
+                text-align: center
+
+.promo
+    background: url(../img/main_pic.jpg) no-repeat
+    background-size: cover
+    padding: 67px 0
+    color: #424242
+    margin-bottom: 40px
+    +sm
+        margin-bottom: 20px
+    &_content
+        max-width: 390px
+        +md
+            max-width: 90%
+            margin: 0 auto
+    &_title
+        font-size: 36px
+        margin-bottom: 17px
+    &_txt
+        margin-bottom: 35px
+        line-height: 1.5
+        font-size: 16px
+        font-weight: 600
+    &_form
+        margin-bottom: 13px
+        &_description
+            margin-bottom: 10px
+        input
+            height: 38px
+            width: 250px
+            border: 1px solid #dadada
+            padding-left: 15px
+            &::placeholder
+                color: #aaaaaa
+                font-size: 16px
+            +sm
+                margin-bottom: 20px
+        &_btn
+            background: $secondlyAccentDesignColor

project2/sass/_mixins.sass

+=circle($size)
+    height: $size
+    width: $size
+=md
+    @media screen and  (max-width: 940px)
+        @content
+=sm
+    @media screen and  (max-width: 730px)
+        @content

project2/sass/_ourShop_footer.sass

+.our_shop
+  background: #222222
+  color: white
+  padding-top: 46px
+  padding-bottom: 37px
+  +sm
+    padding: 10px 0
+  &_img
+    flex-basis: 140px
+    height: auto
+    display: block
+  &_title
+    color: white
+    font-size: 18px
+    padding-bottom: 24px
+  &_flexbox
+    display: flex
+    justify-content: space-between
+    +sm
+      display: block
+  &_txt
+    font-size: 16px
+  &_item
+    flex-basis: 50%
+    +sm
+      margin-bottom: 50px
+    &_tweets
+      padding-left: 31px
+      +sm
+        padding-left: 0
+
+  &_visit
+    display: flex
+    align-items: flex-start
+
+  &_info
+    padding-left: 32px
+
+    &_txt
+      margin-bottom: 27px
+  &_btn
+    padding: 4px 20px
+    font-size: 14px
+.tweets
+  &_hashtag
+    display: block
+  &_date
+    font-size: 12px
+    display: block
+  &_list_item
+    background: url(../img/tweet_ic.png) no-repeat 0 3px
+    padding-left: 27px
+    margin-bottom: 9px
+
+.footer
+  padding: 33px 0
+  display: flex
+  justify-content: space-between
+  align-items: center
+  font-size: 13px
+  +sm
+    padding: 15px 0
+  &_item
+    +md
+      margin-bottom: 30px
+  +md
+    display: block
+    text-align: center
+  &_design_autor
+    margin-left: 59px
+    +md
+      margin: 0
+  &_menu_item
+    display: inline-block
+    margin-right: 27px
+    +sm
+      display: block
+      margin: 0
+  &_menu_link
+    +sm
+      display: block
+      padding: 10px 0
+      text-transform: uppercase
+    &:hover
+        @extend  %hover_opacity
+
+  &_social_networks_item
+    margin: 0 4px
+    background: #222222
+    &:hover
+      background: $secondlyAccentDesignColor
+    +circle(40px)
+    @extend %circle_addition_element
\ No newline at end of file

project2/sass/_projects.sass

+.projects
+  padding-top: 40px
+  padding-bottom: 72px
+  &_flexbox
+    padding-top: 25px
+    display: flex
+    flex-wrap: wrap
+    justify-content: space-between
+    +md
+      justify-content: space-around
+  &_item
+    flex-basis: 300px
+    margin-bottom: 30px
+    &_title
+      font-size: 16px
+      &_wrapp
+        display: flex
+        justify-content: space-between
+        align-items: center
+        padding: 17px 13px
+        &:hover
+         @extend  %hover_opacity
+      &_icon
+        @extend %circle_addition_element
+        +circle(32px)
+    small
+      display: block
+  &_img
+    display: block
+    width: 100%
+    height: auto
+    &_wrapp
+      position: relative
+      border: 5px solid #eeeeee
+      z-index: 1
+      border-radius: 5px
+      &:hover
+        .projects_hoverblock
+          display: flex
+  &_hoverblock
+    padding: 13px 10px
+    font-size: 12px
+    color: white
+    background: rgba(0, 0, 0, 0.6)
+    position: absolute
+    bottom: 0
+    left: 0
+    width: 100%
+    justify-content: space-between
+    display: none
+    +md
+      display: flex
+  &_link
+    display: inline-block
+    margin-left: 16px
+    &:hover
+       @extend  %hover_opacity
+    &_icon
+      font-size: 13px
+  &_btn
+    padding: 8px 28px
+    &_wrapp
+      text-align: center
+      margin: 10px 0

project2/sass/_quotes_news.sass

+.quotes
+  background: #f1f1f1
+  padding: 35px 0
+  &_item
+    display: flex
+    align-items: center
+    justify-content: space-between
+    &_ic
+      @extend %circle_addition_element
+      +circle(47px)
+      &_left
+        margin-bottom: 10px
+      &_right
+        margin-top: 18px
+  &_txt
+    flex-basis: 800px
+    font-size: 28px
+    text-align: center
+    letter-spacing: -1px
+    +md
+      flex-basis: 70%
+    +sm
+      font-size: 25px
+.news
+  padding-top: 83px
+  +sm
+    padding-top: 30px
+  &_item
+    display: flex
+    align-items: start
+    margin-bottom: 74px
+    +sm
+      display: block
+    &_wrapp
+      padding-top: 49px
+      +sm
+        padding-top: 10px
+  &_img_wrapp
+    flex-basis: 250px
+    img
+      width: 100%
+      height: auto
+      display: block
+  &_info
+    margin-left: 40px
+    +sm
+      margin-left: 0
+  &_title
+    font-size: 28px
+    line-height: 20px
+    color: #111111
+    margin-bottom: 10px
+    +md
+      line-height: normal
+  &_about_item
+    font-size: 14px
+    color: #aaaaaa
+    padding: 0 7px
+    display: inline-block
+    &::before
+      content: ''
+      display: inline-block
+      vertical-align: middle
+      margin-right: 15px
+      background: $mainAccentDesignColor
+      border-radius: 50%
+      +circle(6px)
+    &:first-child
+      padding-left: 0
+      &::before
+        display: none
+  &_txt
+    font-size: 16px
+    padding-top: 10px
+    line-height: 1.5
+    margin-top: 17px
+    letter-spacing: -1px
+  &_about_link
+    &:hover
+       @extend  %hover_opacity
+  &_link
+    font-size: 16px
+    display: inline-block
+    margin-top: 14px
+    &:hover
+      @extend  %hover_opacity
+    &::before
+      content: url(../img/news_link_arrow_ic.png)
+      display: inline-block
+      vertical-align: middle
+      margin-right: 5px

project2/sass/_templateSelectors.sass

+%circle_addition_element
+  background-color: $mainAccentDesignColor
+  border-radius: 50%
+  align-items: center
+  justify-content: center
+  color: white
+  display: inline-flex
+%hover_opacity
+  opacity: 0.8
\ No newline at end of file

project2/sass/_variables.sass

+$mainAccentDesignColor: #86c840
+$secondlyAccentDesignColor: #34b02a
+$mainFf:  'Open Sans', sans-serif
+$secondlyFf: 'Roboto Slab', serif

project2/sass/style.sass

+@import _variables
+@import _mixins
+@import _templateSelectors
+
+body
+    font-family: $mainFf
+*
+    box-sizing: border-box
+    margin: 0
+    padding: 0
+ul
+
+    list-style: none
+a
+    text-decoration: none
+    color: inherit
+
+.clearfix::after
+    content: ""
+    display: block
+    clear: both
+
+.container
+    max-width: 940px
+    margin: 0 auto
+    padding: 0
+.title
+    color: #333333
+    font-weight: normal
+    font-family: $secondlyFf
+    small
+        display: block
+        color: #424242
+        font-family: $mainFf
+.content_block_title
+    border-left: 5px solid $mainAccentDesignColor
+    font-size: 36px
+    line-height: 1.2
+    padding: 0 18px
+    margin-bottom: 30px
+    small
+        font-size: 16px
+
+.btn
+    display: inline-block
+    background: $mainAccentDesignColor
+    border: none
+    color: white
+    cursor: pointer
+    padding: 10px 20px
+    font-size: 16px
+    text-transform: uppercase
+    text-shadow: 2px 2px 5px rgba(150, 150, 150, 1)
+    border-radius: 1px
+    &:hover
+        @extend  %hover_opacity
+    &:focus
+        outline: none
+    &_arrow_ic
+        display: inline-block
+        margin-left: 15px
+
+.container
+    +md
+        max-width: 90%
+@import _header_promo
+@import _projects
+@import _quotes_news.sass
+@import _ourShop_footer.sass