9

index.html

@@ -30,8 +30,8 @@
           <nav class="nav-left">
             <ul class="menu-box">
               <li><a class="link active" href="#">About us</a></li>
-              <li><a href="#">Reservation</a></li>
-              <li><a href="#">Gallery</a></li>
+              <li><a class="link" href="#">Reservation</a></li>
+              <li><a class="link" href="#">Gallery</a></li>
             </ul>
           </nav>
 
@@ -41,9 +41,9 @@
 
           <nav class="nav-right">
             <ul class="menu-box">
-              <li><a href="#">Blog</a></li>
-              <li><a href="#">Elements</a></li>
-              <li><a href="#">Shop</a></li>
+              <li><a class="link-two link-active" href="#">Blog</a></li>
+              <li><a class="link" href="#">Elements</a></li>
+              <li><a class="link-two link-active" href="#">Shop</a></li>
             </ul>
           </nav>
         </div>
@@ -60,6 +60,9 @@
                 <option value="Chose your class">
                   Chose your class
                 </option>
+                <option value="Chose your class">
+                  Chose your class
+                </option>
               </select>
               <button class="form-button">Try it</button>
             </form>
@@ -211,7 +214,7 @@
         <div class="five-content">
           <div class="features content">
             <div class="features-boxs">
-              <img src="./img/feture-1.png" alt="" />
+              <img src="./img/feture-1.png" alt="features" />
               <h1>
                 IMPROVED OVERALL <br />
                 HEALTH
@@ -223,7 +226,7 @@
               </p>
             </div>
             <div class="features-boxs">
-              <img src="./img/feture-2.png" alt="" />
+              <img src="./img/feture-2.png" alt="features" />
               <h1>
                 INCREASED <br />
                 CONCENTRATION
@@ -235,7 +238,7 @@
               </p>
             </div>
             <div class="features-boxs">
-              <img src="./img/feture-3.png" alt="" />
+              <img src="./img/feture-3.png" alt="features" />
               <h1>
                 BLANCE <br />
                 YOUR MIND
@@ -247,7 +250,7 @@
               </p>
             </div>
             <div class="features-boxs">
-              <img src="./img/feture-4.png" alt="" />
+              <img src="./img/feture-4.png" alt="features" />
               <h1>
                 SLEEP <br />
                 BETTER
@@ -259,7 +262,7 @@
               </p>
             </div>
             <div class="features-boxs">
-              <img src="./img/feture-5.png" alt="" />
+              <img src="./img/feture-5.png" alt="features" />
               <h1>
                 WEIGHT LOSS
               </h1>
@@ -270,7 +273,7 @@
               </p>
             </div>
             <div class="features-boxs">
-              <img src="./img/feture-6.png" alt="" />
+              <img src="./img/feture-6.png" alt="features" />
               <h1>
                 STRENGTHENS <br />
                 YOUR BONES
@@ -282,7 +285,7 @@
               </p>
             </div>
             <div class="features-boxs">
-              <img src="./img/feture-7.png" alt="" />
+              <img src="./img/feture-7.png" alt="features" />
               <h1>
                 INCREASED <br />
                 FLEXIBILITY
@@ -294,7 +297,7 @@
               </p>
             </div>
             <div class="features-boxs">
-              <img src="./img/feture-8.png" alt="" />
+              <img src="./img/feture-8.png" alt="features" />
               <h1>
                 LOWER BLOOD <br />
                 PRESSURE
@@ -390,15 +393,15 @@
               <div class="connection">
                 <ul class="icon-left">
                   <li>
-                    <a class="icon-map" href=""
+                    <a class="icon-map" href="#"
                       >5419 Joseph Mountains Apt. 716</a
                     >
-                    <a class="icon-mail" href="">joga.info@example.com</a>
-                    <a class="icon-phone" href=""
+                    <a class="icon-mail" href="#">joga.info@example.com</a>
+                    <a class="icon-phone" href="#"
                       >+1 234 567 89 <br />
                       +1 234 678 90
                     </a>
-                    <a class="icon-planet" href="">www.example.com</a>
+                    <a class="icon-planet" href="#">www.example.com</a>
                   </li>
                 </ul>
               </div>

style.css

@@ -57,7 +57,7 @@
 }
 .icon-mail:before {
   content: "\e905";
-  font-size: 20px;
+  font-size: 25px;
   padding-right: 20px;
 }
 .icon-map:before {
@@ -92,8 +92,8 @@ a {
   display: flex;
   flex-direction: column;
   /* max-width: 100%; */
-  width: 1920px;
-  /* width: 100%; */
+  /* width: 1920px; */
+  width: 100%;
   /* max-width: 1920px; */
   min-height: 100vh;
 }
@@ -143,7 +143,6 @@ a {
 .menu-box .active {
   color: #5363db;
 }
-
 .active:after {
   content: "";
   display: block;
@@ -154,6 +153,39 @@ a {
   top: 100%;
   left: 32%;
   margin-top: 1px;
+  
+}
+
+.menu-box a:hover {
+  color: #5363db;
+}
+
+.menu-box :hover .link:after {
+  content: "";
+  display: block;
+  width: 30px;
+  height: 1px;
+  background: #5363db;
+  position: absolute;
+  top: 100%;
+  left: 32%;
+  margin-top: 1px;
+}
+
+.link-two {
+  position: relative;
+}
+
+.menu-box :hover .link-active::after {
+  content: "";
+  display: block;
+  width: 20px;
+  height: 1px;
+  background: #5363db;
+  position: absolute;
+  top: 100%;
+  left: 32%;
+  margin-top: 1px;
 }
 /* HEADER */
 
@@ -223,6 +255,15 @@ select {
   margin-bottom: 15px;
 }
 
+.form option {
+  color: black;
+}
+
+input:focus,
+select:focus {
+  outline: none;
+}
+
 .form-button {
   background: #475bf1;
   border-radius: 8px;
@@ -235,6 +276,15 @@ select {
   font-weight: bold;
   font-size: 16px;
   margin-bottom: 20px;
+  transition: all 0.4s;
+}
+
+.form-button:hover{
+  background: white;
+  color: blue;
+  box-shadow: 5px 5px 20px blue;
+  transform: scale(1.1);
+  font-size: 20px;
 }
 
 .text-on-fone {
@@ -318,7 +368,7 @@ select {
 }
 
 .box-info {
-  width: 570px;
+  max-width: 570px;
   box-shadow: 3px 3px 15px #e4e4e4;
 }
 
@@ -609,11 +659,20 @@ select {
   font-weight: bold;
   padding: 16px 48px;
   background: #5b6ceb;
+  transition: transform 0.4s;
+}
+
+.box-prices a:hover{
+  background: white;
+  color: blue;
+  box-shadow: 5px 5px 20px blue;
+  transform: scale(1.1);
+  font-size: 20px;
 }
 
 .boxs-bloquotes {
   margin-top: 110px;
-  width: 1170px;
+  /* width: 1170px; */
   height: 250px;
   background: white;
   box-shadow: 2px 2px 15px #c7c7c7;
@@ -656,19 +715,19 @@ select {
   right: -50px;
 }
 
-.bloquotes cite{
+.bloquotes cite {
   color: #777777;
 }
 
-.bloquotes cite>p{
+.bloquotes cite > p {
   font-size: 20px;
   color: #5b6ceb;
   font-weight: bold;
   padding-top: 5px;
 }
 
-.bloquotes cite::before{
-  content: '';
+.bloquotes cite::before {
+  content: "";
   background: #d7d7d7;
   width: 2px;
   height: 75px;
@@ -678,34 +737,35 @@ select {
   left: 255px;
 }
 
-.blockquote-slider{
-  position: absolute;
+.blockquote-slider {
+  width: 50px;
+  position: relative;
   left: 100%;
-  top: 20px;
+  bottom: 55%; 
+  /* right: -20%; */
 }
 
-.slide{
+.slide {
   border: 2px solid grey;
   border-radius: 50%;
   width: 20px;
   height: 20px;
   margin-top: 20px;
-  margin-left: 45px;
+  margin-left: 20px;
 }
 
-.slide:nth-child(2){
-  border: 2px solid blue;
+.slide:nth-child(2) {
+  /* border-color:  blue; */
   border-radius: 50%;
-  width: 20px;
-  height: 20px;
-  margin-top: 20px;
-  margin-left: 45px;
+  /* width: 20px; */
+  /* height: 20px; */
+  /* margin-left: 20px; */
   display: flex;
-  align-items: center;
-  justify-content: center;
+  /* align-items: center; */
+  /* justify-content: center; */
 }
 
-.slide > .slide-active{
+.slide > .slide-active {
   background: blue;
   border-radius: 50%;
   /* margin: 0 auto; */
@@ -762,6 +822,12 @@ select {
   justify-content: space-between;
 }
 
+.icon li:hover{
+  transform: scale(1.3);
+  border-radius: 50%;
+  box-shadow: 5px 5px 20px white;
+}
+
 .contacts {
   max-width: 500px;
 }
@@ -775,11 +841,16 @@ select {
   flex-wrap: wrap;
 }
 
+.icon-planet{
+  padding-right: 30px;
+}
+
+
 .footer-copyright {
   background: #5363d8;
 }
 .copyright {
-  padding: 50px 0;
+  padding: 42px 0;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -790,7 +861,7 @@ select {
   font-size: 16px;
 }
 
-@media (max-width: 1365px) {
+@media (max-width: 1200px) {
   .form-text {
     max-width: 850px;
     height: 360px;