Emmanuil 5 rokov pred
rodič
commit
5155cb6326
4 zmenil súbory, kde vykonal 658 pridanie a 1218 odobranie
  1. 8 3
      index.html
  2. 12 732
      style.css
  3. 638 0
      style/media.css
  4. 0 483
      style/style.css

+ 8 - 3
index.html

@@ -22,6 +22,7 @@
     <link rel="stylesheet" href="slick/slick.css" />
     <link rel="stylesheet" href="slick/slick-theme.css" />
     <link rel="stylesheet" href="style.css" />
+    <link rel="stylesheet" href="style/media.css" />
   </head>
   <body>
     <div class="wrapper">
@@ -49,9 +50,13 @@
               <span></span>
             </label>
             <ul class="menu-box menu__box2">
-              <li><a class="link-two link-active menu__item2" href="#">Blog</a></li>
+              <li>
+                <a class="link-two link-active menu__item2" href="#">Blog</a>
+              </li>
               <li><a class="link menu__item2" href="#">Elements</a></li>
-              <li><a class="link-two link-active menu__item2" href="#">Shop</a></li>
+              <li>
+                <a class="link-two link-active menu__item2" href="#">Shop</a>
+              </li>
             </ul>
           </nav>
         </div>
@@ -64,7 +69,7 @@
               <p>Trial Class</p>
               <input placeholder="Enter your name" type="text" />
               <input placeholder="Enter your phone" type="tel" />
-              <select name="" id="">
+              <select>
                 <option value="Chose your class">
                   Chose your class
                 </option>

+ 12 - 732
style.css

@@ -70,16 +70,11 @@
 }
 /* FONTS ICON */
 
-* {
-  font-family: "Open Sans", sans-serif;
-  font-size: 14px;
-  border: none;
-  color: #ffffff;
-}
-
+*,
 body {
   font-family: "Open Sans", sans-serif;
   font-size: 14px;
+  border: none;
   color: #ffffff;
 }
 
@@ -91,10 +86,7 @@ a {
 .wrapper {
   display: flex;
   flex-direction: column;
-  /* max-width: 100%; */
-  /* width: 1920px; */
   width: 100%;
-  /* max-width: 1920px; */
   min-height: 100vh;
 }
 
@@ -115,15 +107,10 @@ a {
 
 .content-head {
   width: 820px;
+  margin-right: 71px;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-right: 71px;
-}
-
-.nav-right > .menu-box {
-  display: flex;
-  justify-content: flex-end;
 }
 
 .menu-box > li {
@@ -187,9 +174,7 @@ a {
   margin-top: 1px;
 }
 
-#menu__toggle {
-  display: none;
-}
+#menu__toggle,
 #menu__toggle2 {
   display: none;
 }
@@ -290,6 +275,8 @@ select {
 input:focus,
 select:focus {
   outline: none;
+  border: 1px solid #475bf1;
+  border-radius: 8px;
 }
 
 .form-button {
@@ -298,12 +285,11 @@ select:focus {
   cursor: pointer;
   text-align: center;
   word-spacing: 2px;
-  margin: 17px 0 0 95px;
+  margin: 17px 0 20px 95px;
   max-width: 170px;
   padding: 13px 0 15px;
   font-weight: bold;
   font-size: 16px;
-  margin-bottom: 20px;
   transition: all 0.4s;
 }
 
@@ -352,8 +338,7 @@ select:focus {
 .block3 {
   width: 100%;
   height: 825px;
-  margin-bottom: 125px;
-  margin-top: 50px;
+  margin: 50px 0 125px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -380,8 +365,7 @@ select:focus {
 .block3-text > p {
   color: #777777;
   font-size: 40.99px;
-  padding-right: 5px;
-  padding-top: 17px;
+  padding: 17px 5px 0 0;
   word-spacing: 2px;
   letter-spacing: 1.4px;
   font-family: "Freestyle Script";
@@ -422,10 +406,8 @@ select:focus {
 
 .box-text > blockquote {
   color: #6c6c6c;
-  margin-top: 28px;
+  margin: 28px 0 10px;
   line-height: 1.6;
-  margin-top: 28px;
-  margin-bottom: 10px;
 }
 
 .box-text > cite {
@@ -435,7 +417,6 @@ select:focus {
 /* THREE CONTENT */
 .gallery {
   max-height: 700px;
-  /* width: 100%; */
   display: flex;
   flex-wrap: wrap;
   border: none;
@@ -466,7 +447,6 @@ select:focus {
   cursor: pointer;
 }
 
-
 /* FOUR CONTENT */
 .four-content {
   display: flex;
@@ -505,7 +485,6 @@ select:focus {
 
 .yoga-gallery img {
   border-radius: 8px;
-  
 }
 
 .yoga-gallery::after {
@@ -573,8 +552,7 @@ select:focus {
   text-align: center;
   line-height: 1.5;
   letter-spacing: 0.3px;
-  padding-left: 1px;
-  padding-bottom: 12px;
+  padding: 0 0 12px 1px;
   flex-grow: 1;
 }
 
@@ -598,7 +576,6 @@ select:focus {
 }
 
 .box-prices {
-  /* width: 100%; */
   border-radius: 10px;
   display: flex;
   flex-direction: column;
@@ -675,7 +652,6 @@ select:focus {
 
 .boxs-bloquotes {
   margin-top: 110px;
-  /* width: 1170px; */
   height: 250px;
   background: white;
   box-shadow: 2px 2px 15px #c7c7c7;
@@ -691,8 +667,7 @@ select:focus {
 .bloquotes blockquote {
   color: #777777;
   font-style: italic;
-  padding-top: 50px;
-  padding-bottom: 50px;
+  padding: 50px 0;
   max-width: 900px;
   position: relative;
 }
@@ -739,30 +714,24 @@ select:focus {
   top: 100px;
   left: 255px;
 }
-
 /* MAIN */
 
 /* FOOTER */
 .footer-decoration {
   background: #5b6ceb;
-  /* height: 225px; */
   max-height: 450px;
-  /* margin-top: 100px; */
   padding: 100px 0;
   display: flex;
   align-items: center;
 }
 
 .decoration {
-  /* min-width: 1100px; */
-  /* padding: 112.5px 0; */
   display: flex;
   justify-content: space-between;
 }
 
 .about {
   max-width: 500px;
-  /* height: 300px; */
 }
 
 .about > h1,
@@ -778,7 +747,6 @@ select:focus {
 }
 
 .icon {
-  /* margin-left: 20px; */
   max-width: 170px;
   font-size: 23px;
   display: flex;
@@ -823,691 +791,3 @@ select:focus {
   opacity: 0.7;
   font-size: 16px;
 }
-
-@media (max-width: 1240px) {
-  .form-text {
-    max-width: 850px;
-    height: 360px;
-    margin: 30px;
-    padding-left: 150px;
-  }
-
-  .form {
-    max-width: 240px;
-  }
-
-  .form > p {
-    margin: 20px 20px 20px;
-  }
-
-  .form > input,
-  select {
-    width: 190px;
-    height: 45px;
-    margin-left: 20px;
-  }
-  .form-button {
-    margin: 5px 0 0 95px;
-    width: 115px;
-  }
-  .text-on-fone {
-    min-width: 480px;
-    margin-top: 40px;
-    /* margin-right: 70px; */
-  }
-  .text-on-fone > h1 {
-    font-size: 43px;
-  }
-
-  .text-on-fone > p {
-    font-size: 37px;
-  }
-
-  .block3-boxs {
-    display: flex;
-    justify-content: space-around;
-  }
-/* 
-  .block3 {
-    margin-top: -10px;
-    margin-bottom: 40px;
-  }
-  .box-info > img {
-    width: 45%;
-  }
-  .box-text {
-    margin-left: 250px;
-  }
-  .box-text > h1 {
-    padding-top: 18px;
-  }
-  .box-text > blockquote {
-    margin-top: 20px;
-    margin-bottom: 15px;
-  } */
-  .block3 {
-    margin-top: -100px;
-    margin-bottom: -10px;
-  }
-  .box-info {
-    margin: 0 10px 20px;
-  }
-  .box-info > img {
-    width: 40%;
-  }
-  .box-text {
-    margin-left: 200px;
-  }
-  .box-text > h1 {
-    padding-top: 15px;
-    font-size: 18px;
-  }
-  .box-text > blockquote {
-    margin-top: 10px;
-    font-size: 13px;
-  }
-  .box-text > cite {
-    font-size: 13px;
-  }
-
-  .gallery > img {
-    width: 25%;
-    height: 25%;
-  }
-
-  .about-us {
-    width: 100%;
-    margin-top: -70px;
-    flex-direction: column;
-    align-items: center;
-  }
-  .about-us-text {
-    text-align: center;
-    padding-bottom: 50px;
-  }
-  .yoga-gallery {
-    margin-left: 0;
-  }
-
-  .features {
-    margin: -40px 0;
-    display: flex;
-    justify-content: center;
-  }
-  .features-boxs {
-    margin-left: 30px;
-    margin-bottom: 40px;
-  }
-
-  .box-prices {
-    /* margin: 0 30px; */
-  }
-  .box-prices h1 {
-    padding: 30px 110px;
-  }
-  .box-prices sub {
-    position: relative;
-    bottom: 52px;
-  }
-  .box-prices p {
-    padding-top: 45px;
-  }
-  .box-prices a {
-    margin: 45px 0;
-  }
-
-  .six-content {
-    height: 950px;
-  }
-}
-
-@media (max-width: 1060px) {
-  .form-text {
-    min-width: 600px;
-    height: 360px;
-    margin: 30px 0;
-    padding-left: 0;
-    justify-content: center;
-  }
-  .text-on-fone {
-    max-width: 400px;
-    margin-top: 40px;
-    /* padding-right: 0; */
-  }
-  .text-on-fone > h1 {
-    font-size: 37px;
-    width: 100%;
-  }
-
-  .text-on-fone > p {
-    font-size: 35px;
-  }
-
-  .block3-boxs{
-    max-width: 850px;
-  }
-  .block3 {
-    min-height: 1400px;
-    margin-top: -30px;
-    margin-bottom: -10px;
-  }
-  .box-info {
-    margin: 0 10px 30px;
-    min-height: 520px;
-  }
-  
-  .box-info > img {
-    width: 100%;
-    float: none;
-  }
-  .box-text {
-    margin-left: 10px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-  .box-text > h1 {
-    font-size: 18px;
-  }
-  .box-text > blockquote {
-    font-size: 14px;
-  }
-  .box-text > cite {
-    font-size: 14px;
-  }
-
-  /* 
-  .features {
-    display: flex;
-    justify-content: center;
-  }
-  .features-boxs{
-    margin-left: 30px;
-  } */
-
-  .box-prices h1 {
-    font-size: 60px;
-    padding: 20px 90px;
-  }
-  .box-prices sub {
-    position: relative;
-    bottom: 40px;
-    left: 80px;
-    font-size: 16px;
-  }
-  .box-prices a {
-    margin: 35px 0;
-  }
-
-  .boxs-bloquotes {
-    /* margin-top: 110px; */
-    /* width: 1170px; */
-    height: 370px;
-    /* background: white;
-  box-shadow: 2px 2px 15px #c7c7c7;
-  border-radius: 10px; */
-    position: relative;
-  }
-
-  .bloquotes {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-
-  .bloquotes img {
-    width: 290px;
-    height: 250px;
-    margin-top: -20px;
-    margin-bottom: -30px;
-  }
-
-  .bloquotes blockquote {
-    padding-top: 0;
-    padding-bottom: 30px;
-    max-width: 500px;
-    font-size: 16px;
-  }
-
-  .bloquotes blockquote::before {
-    top: -20px;
-    left: -30px;
-  }
-
-  .bloquotes blockquote::after {
-    top: 60px;
-    right: -20px;
-  }
-  .bloquotes cite {
-    margin-left: -350px;
-  }
-  .bloquotes cite::before {
-    display: none;
-  }
-
-  .icon-left a{
-    padding-bottom: 20px;
-  }
-  .icon-left li {
-    min-height: 160px;
-    padding: 60px 0 0;
-    display: flex;
-    flex-direction: column;
-  }
-}
-
-
-@media (max-width: 860px){
-  .six-content{
-    min-height: 1900px;
-  }
-  .boxs-prices{
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-  .box-prices{
-    max-width: 306px;
-    margin-top: -40px;
-    margin-bottom: 60px;
-  }
-  .box-prices h1 {
-    padding: 20px 110px;
-  }
-}
-
-
-@media (max-width: 750px){
-  .menu__btn > span,
-  .menu__btn > span::before,
-  .menu__btn > span::after {
-    display: block;
-    position: absolute;
-    width: 100%;
-    height: 2px;
-    background-color: #5b6ceb;
-    transition: transform 0.2s;
-  }
-  .menu__btn > span::before {
-    content: "";
-    top: -8px;
-  }
-  .menu__btn > span::after {
-    content: "";
-    top: 8px;
-  }
-  .menu__box {
-    position: fixed;
-    visibility: hidden;
-    top: 0;
-    left: -100%;
-    width: 250px;
-    height: 60%;
-    padding: 70px 0;
-    text-align: center;
-    background-color: white;
-    z-index: 2;
-    box-shadow: 1px 0px 6px rgba(0, 0, 0, 0.2);
-    transition: all 0.5s;
-    display: flex;
-    flex-direction: column;
-  }
-  .menu__item {
-    line-height: 3;
-    color: #333;
-    font-size: 25px;
-    font-weight: 600;
-    text-decoration: none;
-  }
-  #menu__toggle:checked ~ .menu__btn > span {
-    transform: rotate(45deg);
-    transition: transform 0.5s;
-  }
-
-  #menu__toggle:checked ~ .menu__btn > span::before {
-    top: 0;
-    transform: rotate(0);
-    transition: transform 0.5s;
-  }
-
-  #menu__toggle:checked ~ .menu__btn > span::after {
-    top: 0;
-    transform: rotate(90deg);
-    transition: transform 0.5s;
-  }
-
-  #menu__toggle:checked ~ .menu__box {
-    visibility: visible;
-    left: 0;
-  }
-
-  
-  .menu__btn2 > span,
-  .menu__btn2 > span::before,
-  .menu__btn2 > span::after {
-    display: block;
-    position: absolute;
-    width: 100%;
-    height: 2px;
-    background-color: #5b6ceb;
-    transition: transform 0.2s;
-  }
-  .menu__btn2 > span::before {
-    content: "";
-    top: -8px;
-  }
-  .menu__btn2 > span::after {
-    content: "";
-    top: 8px;
-  }
-  .menu__box2{
-    position: fixed;
-    visibility: hidden;
-    top: 0;
-    right: -100%;
-    width: 250px;
-    height: 60%;
-    margin: 0;
-    padding: 70px 0;
-    text-align: center;
-    background-color: white;
-    z-index: 2;
-    box-shadow: 1px 0px 6px rgba(0, 0, 0, 0.2);
-    transition: all 0.5s;
-    display: flex;
-    flex-direction: column;
-  }
-  .menu__item2 {
-    line-height: 3;
-    color: #333;
-    font-size: 25px;
-    font-weight: 600;
-    text-decoration: none;
-  }
-  #menu__toggle2:checked ~ .menu__btn2 > span {
-    transform: rotate(45deg);
-    transition: transform 0.5s;
-  }
-
-  #menu__toggle2:checked ~ .menu__btn2 > span::before {
-    top: 0;
-    transform: rotate(0);
-    transition: transform 0.5s;
-  }
-
-  #menu__toggle2:checked ~ .menu__btn2 > span::after {
-    top: 0;
-    transform: rotate(90deg);
-    transition: transform 0.5s;
-  }
-
-  #menu__toggle2:checked ~ .menu__box2 {
-    visibility: visible;
-    right: 0;
-  }
-
-
-
-  .first-content{
-    min-height: 850px;
-  }
-  .form-text {
-    min-width: 300px;
-    margin: 200px 0 0;
-    padding-left: 0;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column-reverse;
-  }
-  
-  .form {
-    min-width: 300px;
-    margin-top: 50px;
-  }
-  .form > p {
-    font-size: 28px;
-    padding: 15px 0;
-  }
-  
-  .form > input,
-  select {
-    min-width: 250px;
-  }
-  
-  .form-button {
-    margin: 17px 0 20px 95px;
-    min-width: 170px;
-  }
-  .text-on-fone {
-    /* max-width: 320px; */
-    min-width: 300px;
-  }
-  .text-on-fone > h1 {
-    font-size: 40px;
-    width: 100%;
-  }
-
-  .text-on-fone > p {
-    font-size: 38px;
-  }
-
-
-  .block3-boxs{
-    max-width: 570px;
-  }
-  .block3 {
-    min-height: 2500px;
-    margin-top: -40px;
-    margin-bottom: 20px;
-  }
-  .box-info {
-    margin: 0 10px 30px;
-    min-height: 500px;
-    padding: 0 26px;
-    border-radius: 10px 10px 0 0;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-  
-  .box-info > img {
-    border-radius: 10px 10px 0 0;
-    width: 120%;
-    float: none;
-  }
-  .box-text > h1 {
-    font-size: 20px;
-  }
-  .box-text > cite {
-    font-size: 14px;
-    padding-bottom: 10px;
-  }
-
-
-  .gallery {
-    max-height: 1100px;
-    display: flex;
-    flex-wrap: wrap;
-  }
-  .gallery-img {
-    width: 50%;
-  }
-  .gallery-img > img {
-    width: 100%;
-  }
-
-
-  .boxs-bloquotes {
-    height: 370px;
-    position: relative;
-  }
-
-  .bloquotes img {
-    width: 280px;
-    height: 240px;
-  }
-
-  .bloquotes blockquote {
-    max-width: 300px;
-  }
-
-  .bloquotes blockquote::after {
-    top: 90px;
-  }
-  .bloquotes cite {
-    margin-left: -150px;
-  }
-}
-
-
-@media (max-width: 470px){
-  .first-content{
-    min-height: 850px;
-  }
-  .form-text {
-    max-width: 300px;
-    margin: 200px 0 0;
-    padding-left: 0;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column-reverse;
-  }
-  .form {
-    min-width: 140px;
-  }
-
-  .form > input,
-  select {
-    min-width: 150px;
-  }
-  .form-button {
-    margin: 5px 0 20px 95px;
-    min-width: 90px;
-  }
-  .text-on-fone {
-    max-width: 100px;
-  }
-  .text-on-fone > h1 {
-    font-size: 34px;
-  }
-
-  .text-on-fone > p {
-    font-size: 32px;
-  }
-
-
-  .block3-text{
-    max-width: 240px;
-  }
-  .block3-boxs{
-    max-width: 330px;
-  }
-   .block3 {
-    min-height: 2500px;
-  } 
-  .box-info {
-    min-height: 500px;
-    padding: 0 0;
-  }
-  
-  .box-info > img {
-    width: 100%;
-  }
-
-
-  .footer-decoration{
-    min-height: 600px;
-  }
-  .decoration{
-    display: flex;
-    flex-direction: column;
-  }
-  .about > p {
-    padding: 40px 0 50px;
-  }
-  .contacts {
-    margin-left: 0;
-    margin-top: 50px;
-  }
-  .icon-left li {
-    min-height: 160px;
-    padding: 40px 0 0;
-    margin-right: 0;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .five-content{
-    max-height: 2420px;
-  }
-  .features-boxs{
-    margin-left: 0;
-  }
-
-  .slick-next {
-    right: -3px;
-  }
-  
-  .slick-prev {
-    left: -14px;
-  }
-  
-  .slick-prev::before,
-  .slick-next::before {
-    font-size: 30px;
-  }
-
-  .six-content{
-    min-height: 1800px;
-  }
-  .boxs-prices{
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-  .box-prices{
-    max-width: 270px;
-    margin-top: -40px;
-    margin-bottom: 60px;
-  }
-  .box-prices h1 {
-    padding: 20px 90px;
-  }
-
-
-  .boxs-bloquotes {
-    margin-top: 10px;
-    margin-bottom: 0;
-    height: 390px;
-    position: relative;
-  }
-
-  .bloquotes img {
-    width: 260px;
-    height: 220px;
-  }
-
-  .bloquotes blockquote {
-    max-width: 220px;
-  }
-  .bloquotes blockquote::before {
-    top: -20px;
-    left: -20px;
-  }
-  .bloquotes blockquote::after {
-    top: 120px;
-  }
-  .bloquotes cite {
-    margin-left: -80px;
-    
-  }
-
-
-
-  .copyright {
-    padding: 30px 0;
-  }
-  .copyright > p {
-    font-size: 14px;
-  }
-}

+ 638 - 0
style/media.css

@@ -0,0 +1,638 @@
+@media (max-width: 1240px) {
+  .form-text {
+    max-width: 850px;
+    height: 360px;
+    margin: 30px;
+    padding-left: 150px;
+  }
+
+  .form {
+    max-width: 240px;
+  }
+
+  .form > p {
+    margin: 20px 20px 20px;
+  }
+
+  .form > input,
+  select {
+    width: 190px;
+    height: 45px;
+    margin-left: 20px;
+  }
+  .form-button {
+    margin: 5px 0 0 95px;
+    width: 115px;
+  }
+  .text-on-fone {
+    min-width: 480px;
+    margin-top: 40px;
+  }
+  .text-on-fone > h1 {
+    font-size: 43px;
+  }
+
+  .text-on-fone > p {
+    font-size: 37px;
+  }
+
+  .block3-boxs {
+    display: flex;
+    justify-content: space-around;
+  }
+
+  .block3 {
+    margin: -100px 0 10px;
+  }
+  .box-info {
+    margin: 0 10px 20px;
+  }
+  .box-info > img {
+    width: 40%;
+  }
+  .box-text {
+    margin-left: 200px;
+  }
+  .box-text > h1 {
+    padding-top: 15px;
+    font-size: 18px;
+  }
+  .box-text > blockquote {
+    margin-top: 10px;
+    font-size: 13px;
+  }
+  .box-text > cite {
+    font-size: 13px;
+  }
+
+  .gallery > img {
+    width: 25%;
+    height: 25%;
+  }
+
+  .about-us {
+    width: 100%;
+    margin-top: -70px;
+    flex-direction: column;
+    align-items: center;
+  }
+  .about-us-text {
+    text-align: center;
+    padding-bottom: 50px;
+  }
+  .yoga-gallery {
+    margin-left: 0;
+  }
+
+  .features {
+    margin: -40px 0;
+    display: flex;
+    justify-content: center;
+  }
+  .features-boxs {
+    margin: 0 0 40px 30px;
+  }
+
+  .box-prices h1 {
+    padding: 30px 110px;
+  }
+  .box-prices sub {
+    position: relative;
+    bottom: 52px;
+  }
+  .box-prices p {
+    padding-top: 45px;
+  }
+  .box-prices a {
+    margin: 45px 0;
+  }
+
+  .six-content {
+    height: 950px;
+  }
+}
+
+@media (max-width: 1060px) {
+  .form-text {
+    min-width: 600px;
+    height: 360px;
+    margin: 30px 0;
+    padding-left: 0;
+    justify-content: center;
+  }
+  .text-on-fone {
+    max-width: 400px;
+    margin-top: 40px;
+  }
+  .text-on-fone > h1 {
+    font-size: 37px;
+    width: 100%;
+  }
+
+  .text-on-fone > p {
+    font-size: 35px;
+  }
+
+  .block3-boxs {
+    max-width: 850px;
+  }
+  .block3 {
+    min-height: 1400px;
+    margin: -30px 0 -10px;
+  }
+  .box-info {
+    margin: 0 10px 30px;
+    min-height: 520px;
+  }
+
+  .box-info > img {
+    width: 100%;
+    float: none;
+  }
+  .box-text {
+    margin-left: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  .box-text > h1 {
+    font-size: 18px;
+  }
+  .box-text > blockquote {
+    font-size: 14px;
+  }
+  .box-text > cite {
+    font-size: 14px;
+  }
+
+  .box-prices h1 {
+    font-size: 60px;
+    padding: 20px 90px;
+  }
+  .box-prices sub {
+    position: relative;
+    bottom: 40px;
+    left: 80px;
+    font-size: 16px;
+  }
+  .box-prices a {
+    margin: 35px 0;
+  }
+
+  .boxs-bloquotes {
+    height: 370px;
+    position: relative;
+  }
+
+  .bloquotes {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .bloquotes img {
+    width: 290px;
+    height: 250px;
+    margin: -20px 0 -30px;
+  }
+
+  .bloquotes blockquote {
+    padding: 0 0 30px;
+    max-width: 500px;
+    font-size: 16px;
+  }
+
+  .bloquotes blockquote::before {
+    top: -20px;
+    left: -30px;
+  }
+
+  .bloquotes blockquote::after {
+    top: 60px;
+    right: -20px;
+  }
+  .bloquotes cite {
+    margin-left: -350px;
+  }
+  .bloquotes cite::before {
+    display: none;
+  }
+
+  .icon-left a {
+    padding-bottom: 20px;
+  }
+  .icon-left li {
+    min-height: 160px;
+    padding: 60px 0 0;
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+@media (max-width: 860px) {
+  .six-content {
+    min-height: 1900px;
+  }
+  .boxs-prices {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  .box-prices {
+    max-width: 306px;
+    margin: -40px 0 60px;
+  }
+  .box-prices h1 {
+    padding: 20px 110px;
+  }
+  .box-prices p::after {
+    content: "";
+    width: 80px;
+    height: 1px;
+    background: #d7d7d7;
+    display: block;
+    position: relative;
+    top: 20px;
+    left: 30%;
+  }
+}
+
+@media (max-width: 750px) {
+  .logo {
+    padding-left: 60px;
+  }
+  .menu__btn > span,
+  .menu__btn > span::before,
+  .menu__btn > span::after {
+    display: block;
+    position: absolute;
+    width: 100%;
+    height: 2px;
+    background-color: #5b6ceb;
+    transition: transform 0.2s;
+  }
+  .menu__btn > span::before {
+    content: "";
+    top: -8px;
+  }
+  .menu__btn > span::after {
+    content: "";
+    top: 8px;
+  }
+  .menu__box {
+    position: fixed;
+    visibility: hidden;
+    top: 0;
+    left: -100%;
+    width: 250px;
+    height: 100%;
+    padding: 70px 0;
+    text-align: center;
+    background-color: #d6d6da;
+    z-index: 2;
+    box-shadow: 1px 0px 6px rgba(0, 0, 0, 0.2);
+    transition: all 0.5s;
+    display: flex;
+    flex-direction: column;
+  }
+  .menu__item {
+    line-height: 3;
+    color: #333;
+    font-size: 25px;
+    font-weight: 600;
+    text-decoration: none;
+  }
+  #menu__toggle:checked ~ .menu__btn > span {
+    transform: rotate(45deg);
+    transition: transform 0.5s;
+  }
+
+  #menu__toggle:checked ~ .menu__btn > span::before {
+    top: 0;
+    transform: rotate(0);
+    transition: transform 0.5s;
+  }
+
+  #menu__toggle:checked ~ .menu__btn > span::after {
+    top: 0;
+    transform: rotate(90deg);
+    transition: transform 0.5s;
+  }
+
+  #menu__toggle:checked ~ .menu__box {
+    visibility: visible;
+    left: 0;
+  }
+
+  .menu__btn2 > span,
+  .menu__btn2 > span::before,
+  .menu__btn2 > span::after {
+    display: block;
+    position: absolute;
+    width: 100%;
+    height: 2px;
+    background-color: #5b6ceb;
+    transition: transform 0.2s;
+  }
+  .menu__btn2 > span::before {
+    content: "";
+    top: -8px;
+  }
+  .menu__btn2 > span::after {
+    content: "";
+    top: 8px;
+  }
+  .menu__box2 {
+    position: fixed;
+    visibility: hidden;
+    top: 0;
+    right: -100%;
+    width: 250px;
+    height: 100%;
+    margin: 0;
+    padding: 70px 0;
+    text-align: center;
+    background-color: #d6d6da;
+    z-index: 2;
+    box-shadow: 1px 0px 6px rgba(0, 0, 0, 0.2);
+    transition: all 0.5s;
+    display: flex;
+    flex-direction: column;
+  }
+  .menu__item2 {
+    line-height: 3;
+    color: #333;
+    font-size: 25px;
+    font-weight: 600;
+    text-decoration: none;
+  }
+  #menu__toggle2:checked ~ .menu__btn2 > span {
+    transform: rotate(45deg);
+    transition: transform 0.5s;
+  }
+
+  #menu__toggle2:checked ~ .menu__btn2 > span::before {
+    top: 0;
+    transform: rotate(0);
+    transition: transform 0.5s;
+  }
+
+  #menu__toggle2:checked ~ .menu__btn2 > span::after {
+    top: 0;
+    transform: rotate(90deg);
+    transition: transform 0.5s;
+  }
+
+  #menu__toggle2:checked ~ .menu__box2 {
+    visibility: visible;
+    right: 0;
+  }
+
+  .first-content {
+    min-height: 850px;
+  }
+  .form-text {
+    min-width: 300px;
+    margin: 200px 0 0;
+    padding-left: 0;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column-reverse;
+  }
+
+  .form {
+    min-width: 300px;
+    margin-top: 50px;
+  }
+  .form > p {
+    font-size: 28px;
+    padding: 15px 0;
+  }
+
+  .form > input,
+  select {
+    min-width: 250px;
+  }
+
+  .form-button {
+    margin: 17px 0 20px 95px;
+    min-width: 170px;
+  }
+  .text-on-fone {
+    min-width: 300px;
+  }
+  .text-on-fone > h1 {
+    font-size: 40px;
+    width: 100%;
+  }
+
+  .text-on-fone > p {
+    font-size: 38px;
+  }
+
+  .block3-boxs {
+    max-width: 570px;
+  }
+  .block3 {
+    min-height: 2600px;
+    margin: -40px 0 20px;
+  }
+  .box-info {
+    margin: 0 10px 30px;
+    min-height: 500px;
+    padding: 0 26px;
+    border-radius: 10px 10px 0 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .box-info > img {
+    border-radius: 10px 10px 0 0;
+    width: 120%;
+    float: none;
+  }
+  .box-text > h1 {
+    font-size: 20px;
+  }
+  .box-text > cite {
+    font-size: 14px;
+    padding-bottom: 10px;
+  }
+
+  .gallery {
+    max-height: 1100px;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .gallery-img {
+    width: 50%;
+  }
+  .gallery-img > img {
+    width: 100%;
+  }
+
+  .boxs-bloquotes {
+    height: 370px;
+    position: relative;
+  }
+
+  .bloquotes img {
+    width: 280px;
+    height: 240px;
+  }
+
+  .bloquotes blockquote {
+    max-width: 300px;
+  }
+
+  .bloquotes blockquote::after {
+    top: 90px;
+  }
+  .bloquotes cite {
+    margin-left: -150px;
+  }
+}
+
+@media (max-width: 470px) {
+  .first-content {
+    min-height: 850px;
+  }
+  .form-text {
+    max-width: 300px;
+    margin: 200px 0 0;
+    padding-left: 0;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column-reverse;
+  }
+  .form {
+    min-width: 140px;
+  }
+
+  .form > input,
+  select {
+    min-width: 150px;
+  }
+  .form-button {
+    margin: 5px 0 20px 95px;
+    min-width: 90px;
+  }
+  .text-on-fone {
+    max-width: 100px;
+  }
+  .text-on-fone > h1 {
+    font-size: 34px;
+  }
+
+  .text-on-fone > p {
+    font-size: 32px;
+  }
+
+  .block3-text {
+    max-width: 240px;
+  }
+  .block3-boxs {
+    max-width: 330px;
+  }
+  .block3 {
+    min-height: 2400px;
+  }
+  .box-info {
+    min-height: 500px;
+    padding: 0 0;
+  }
+
+  .box-info > img {
+    width: 100%;
+  }
+
+  .footer-decoration {
+    min-height: 600px;
+  }
+  .decoration {
+    display: flex;
+    flex-direction: column;
+  }
+  .about > p {
+    padding: 40px 0 50px;
+  }
+  .contacts {
+    margin: 50px 0 0;
+  }
+  .icon-left li {
+    min-height: 160px;
+    padding: 40px 0 0;
+    margin-right: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .five-content {
+    max-height: 2420px;
+  }
+  .features-boxs {
+    margin-left: 0;
+  }
+
+  .slick-next {
+    right: -1px;
+  }
+
+  .slick-prev {
+    left: -16px;
+  }
+
+  .slick-prev::before,
+  .slick-next::before {
+    font-size: 35px;
+  }
+
+  .six-content {
+    min-height: 1800px;
+  }
+  .boxs-prices {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  .box-prices {
+    max-width: 270px;
+    margin: -40px 0 60px;
+  }
+  .box-prices h1 {
+    padding: 20px 90px;
+  }
+
+  .boxs-bloquotes {
+    margin: 10px 0 0;
+    height: 390px;
+    position: relative;
+  }
+
+  .bloquotes img {
+    width: 260px;
+    height: 220px;
+  }
+
+  .bloquotes blockquote {
+    max-width: 220px;
+  }
+  .bloquotes blockquote::before {
+    top: -20px;
+    left: -20px;
+  }
+  .bloquotes blockquote::after {
+    top: 120px;
+  }
+  .bloquotes cite {
+    margin-left: -80px;
+  }
+
+  .copyright {
+    padding: 30px 0;
+  }
+  .copyright > p {
+    font-size: 14px;
+  }
+}

+ 0 - 483
style/style.css

@@ -1,483 +0,0 @@
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-* {
-  font-family: "Open Sans", sans-serif;
-  font-size: 14px;
-  border: none;
-  color: #ffffff;
-}
-
-body {
-  font-family: "Open Sans", sans-serif;
-  font-size: 14px;
-  color: #ffffff;
-}
-
-a {
-  text-decoration: none;
-}
-
-/* THE ALL SITE */
-.wrapper {
-  display: flex;
-  flex-direction: column;
-  /* max-width: 100%; */
-  /* width: 1920px; */
-  /* width: 100%; */
-  /* max-width: 1920px; */
-  min-height: 100vh;
-}
-/* THE ALL SITE */
-
-/* HEADER */
-.header {
-  height: 100px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.content-head {
-  width: 820px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-right: 71px;
-}
-
-.nav-right > .menu-box {
-  display: flex;
-  justify-content: flex-end;
-}
-
-.menu-box > li {
-  display: inline;
-}
-
-.menu-box > li > a {
-  color: #555555;
-  padding: 0 13px;
-  font-weight: bold;
-}
-
-.link {
-  position: relative;
-}
-
-.menu-box .active {
-  color: #5363db;
-}
-
-.active:after {
-  content: "";
-  display: block;
-  width: 30px;
-  height: 1px;
-  background: #5363db;
-  position: absolute;
-  top: 100%;
-  left: 32%;
-  margin-top: 1px;
-}
-
-.logo {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 4px 0 2px 0;
-}
-
-.logo > h1 {
-  font-family: "Champagne & Limousines", sans-serif;
-  font-weight: bold;
-  font-size: 24px;
-  color: #6a78e0;
-  padding: 5px 0 0 3px;
-  letter-spacing: 2px;
-}
-/* HEADER */
-
-/* MAIN */
-.main {
-  flex-grow: 1;
-}
-
-.first-content {
-  background: url("../img/slider-bg.png") no-repeat;
-  /* background-size: 100%; */
-  width: 100%;
-  height: 100vh; 
-  display: flex;
-  justify-content: center;
-  position: relative;
-}
-
-/* .first-content::after{
-  content: '';
-  background: rgb(83, 99, 219, 0.9);
-  position: absolute;
-  width: 100%;
-  height: 100%;
-} */
-
-.form-text {
-  display: flex;
-  justify-content: space-between;
-  width: 930px;
-  height: 390px;
-  margin: 100px;
-  margin-left: 340px;
-  z-index: 1;
-}
-
-.form {
-  position: relative;
-  background: white;
-  border-radius: 20px;
-  box-shadow: 2px 2px 15px #4553c0;
-  display: flex;
-  flex-direction: column;
-  align-content: center;
-  width: 300px;
-}
-
-.form > p {
-  color: #5363db;
-  font-weight: bold;
-  font-size: 25.64px;
-  margin: 38px 0 29px 30px;
-  padding-left: 4px;
-}
-
-.form > input, select {
-  width: 230px;
-  height: 50px;
-  background: #f2f2f2;
-  border-radius: 8px;
-  margin-left: 30px;
-  color: black;
-}
-
-.form > input:nth-child(2) {
-  padding: 0 10px 8px;
-  margin-bottom: 15px;
-}
-
-.form > input:nth-child(3) {
-  padding: 0 10px 2px;
-  margin-bottom: 17px;
-}
-
-.form>select{ 
-  padding: 0 10px;
-  margin-bottom: 15px;
-}
-
-.form-button {
-  background: #475bf1;
-  border-radius: 8px;
-  cursor: pointer;
-  text-align: center;
-  word-spacing: 2px;
-  margin: 17px 0 0 95px;
-  width: 170px;
-  padding: 13px 0 15px;
-  font-weight: bold;
-  font-size: 16px;
-}
-
-.text-on-fone {
-  width: 570px;
-  height: 265px;
-  margin-top: 58px;
-  padding-left: 35px;
-  display: flex;
-  flex-direction: column;
-}
-
-.text-on-fone > h1 {
-  font-size: 48px;
-  text-transform: uppercase;
-  font-weight: bold;
-  line-height: 1.46;
-  letter-spacing: 0.8px;
-  display: inline;
-}
-
-.text-on-fone > p {
-  display: inline;
-  font-size: 40px;
-  letter-spacing: 2px;
-  line-height: 0.88;
-  word-spacing: 5px;
-  font-family: "Freestyle Script";
-}
-
-/* TWO CONENT */
-.two-content {
-  height: 1000px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.block3 {
-  width: 1170px;
-  height: 825px;
-  margin-bottom: 125px;
-  margin-top: 50px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-}
-
-.block3-text {
-  max-width: 420px;
-  height: 90px;
-  margin-top: 42px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.block3-text > h1 {
-  color: #5b6ceb;
-  font-weight: bold;
-  font-size: 30px;
-  text-transform: uppercase;
-  padding-top: 2px;
-  letter-spacing: 0.4px;
-}
-
-.block3-text > p {
-  color: #777777;
-  font-size: 40.99px;
-  padding-right: 5px;
-  padding-top: 17px;
-  word-spacing: 2px;
-  letter-spacing: 1.4px;
-  font-family: "Freestyle Script";
-}
-
-.block3-boxs {
-  /* border: 1px yellow solid; */
-  width: 1170px;
-  height: 625px;
-  margin-top: 67px;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  align-content: space-between;
-}
-
-.box-info {
-  width: 570px;
-  height: 300px;
-  box-shadow: 3px 3px 15px #e4e4e4;
-}
-
-.box-info > img {
-  float: left;
-}
-
-.box-text {
-  margin-left: 300px;
-  width: 245px;
-}
-
-.box-text > h1 {
-  font-size: 20px;
-  font-weight: bold;
-  text-transform: uppercase;
-  padding-top: 47px;
-  letter-spacing: 0.3px;
-}
-
-.box-text > blockquote {
-  color: #6c6c6c;
-  margin-top: 28px;
-  line-height: 1.6;
-  margin-top: 28px;
-  margin-bottom: 10px;
-}
-
-.box-text > cite {
-  color: #999999;
-}
-
-/* THREE CONTENT */
-.gallery {
-  width: 100%;
-  display: flex;
-  flex-wrap: wrap;
-}
-
-/* FOUR CONTENT */
-.four-content {
-  height: 550px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.about-us {
-  width: 1170px;
-  height: 300px;
-  display: flex;
-  justify-content: space-between;
-}
-
-.about-us-text > h1 {
-  font-size: 30px;
-  font-weight: bold;
-  color: #5b6ceb;
-  text-transform: uppercase;
-  padding-top: 20px;
-  margin-bottom: 20px;
-  word-spacing: 1px;
-  letter-spacing: 0.1px;
-}
-
-.about-us-text > p {
-  line-height: 1.7;
-  color: #555555;
-}
-
-.about-us-img {
-  border-radius: 5px;
-  box-shadow: 3px 3px 15px #c3c3c3;
-}
-/* 
-.about-us-img::before {
-  content: "sdfs";
-  width: 50px;
-  height: 50px;
-  background: #0c0c0c;
-  border: 1px black solid;
-  position: relative;
-  z-index: 1;
-} */
-
-
-/* FIVE CONTENT */
-.five-content {
-  height: 800px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background: url("../img/feture-fone.png") no-repeat;
-  background-size: 100%;
-  width: 100%;
-}
-
-.features {
-  width: 1170px;
-  height: 550px;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  align-content: space-between;
-}
-
-.features-boxs {
-  width: 270px;
-  height: 250px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.features-boxs > img {
-  width: 70px;
-  height: 70px;
-  margin-bottom: 27px;
-}
-
-.features-boxs > h1 {
-  font-size: 18px;
-  font-weight: bold;
-  text-align: center;
-  line-height: 1.5;
-  letter-spacing: 0.3px;
-  margin-left: -1px;
-  margin-bottom: 12px;
-}
-
-.features-boxs > p {
-  line-height: 1.7;
-  text-align: center;
-  font-size: 16px;
-}
-
-/* MAIN */
-.footer {
-  background: black;
-  /* height: 100px; */
-}
-
-/* @media(max-width: 1580px){
-  .form-text{
-    width: 50%;
-  }
-} */
-
-@media (max-width: 1366px) {
-  /* .first-content{
-    height: auto;
-  } */
-  .form-text {
-    width: 850px;
-    height: 320px;
-    margin: 30px;
-    margin-left: 250px;
-  }
-
-  .form {
-    width: 240px;
-  }
-
-  .form > p {
-    margin: 20px 20px 20px;
-  }
-
-  .form > input, select {
-    width: 190px;
-    height: 45px;
-    margin-left: 20px;
-  }
-  .form-button {
-    margin: 5px 0 0 95px;
-    width: 115px;
-  }
-  .text-on-fone {
-    margin-top: 40px;
-  }
-  .text-on-fone > h1 {
-    font-size: 43px;
-  }
-
-  .text-on-fone > p {
-    font-size: 37px;
-  }
-
-  .block3 {
-    /* margin-top: -350px; */
-  }
-
-  .gallery {
-    /* margin-top: -230px; */
-  }
-
-  .gallery > img {
-    width: 25%;
-  }
-
-  .about-us {
-    width: 1100px;
-  }
-}