Emmanuil преди 5 години
родител
ревизия
9526a31676
променени са 6 файла, в които са добавени 650 реда и са изтрити 763 реда
  1. 18 19
      index.html
  2. 632 92
      style.css
  3. 0 652
      style/media.css
  4. BIN
      valid-html.png
  5. BIN
      valid-media-css.png
  6. BIN
      valid-style-css.png

+ 18 - 19
index.html

@@ -22,7 +22,6 @@
     <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">
@@ -39,11 +38,11 @@
             <ul class="menu-box menu__box">
               <li><a class="link active menu__item" href="#">About us</a></li>
               <li><a class="link menu__item" href="#">Reservation</a></li>
-              <li><a class="link menu__item" href="#">Gallery</a></li>
+              <li><a class="link-two link-active link menu__item" href="#">Gallery</a></li>
 
-              <div class="logo">
+              <li class="logo-desk">
                 <a href="index.html"><img src="img/logo.png" alt="logo"/></a>
-              </div>
+              </li>
 
               <li>
                 <a class="link-two link-active menu__item" href="#">Blog</a>
@@ -112,7 +111,7 @@
                       elit, sed do eiusmod tempor <br />
                       incididunt.
                     </p>
-                    <cite>Ashtanga - Hatha</cite>
+                    <h6>Ashtanga - Hatha</h6>
                   </div>
                 </div>
                 <div class="box-info">
@@ -127,7 +126,7 @@
                       elit, sed do eiusmod tempor <br />
                       incididunt.
                     </p>
-                    <cite>Ashtanga - Hatha</cite>
+                    <h6>Ashtanga - Hatha</h6>
                   </div>
                 </div>
                 <div class="box-info">
@@ -142,7 +141,7 @@
                       elit, sed do eiusmod tempor <br />
                       incididunt.
                     </p>
-                    <cite>Ashtanga - Hatha</cite>
+                    <h6>Ashtanga - Hatha</h6>
                   </div>
                 </div>
                 <div class="box-info">
@@ -157,7 +156,7 @@
                       elit, sed do eiusmod tempor <br />
                       incididunt.
                     </p>
-                    <cite>Ashtanga - Hatha</cite>
+                    <h6>Ashtanga - Hatha</h6>
                   </div>
                 </div>
               </div>
@@ -326,27 +325,21 @@
           <div class="content">
             <div class="boxs-prices">
               <div class="box-prices">
-                <div class="title-prices">
-                  49 <sub>/ MONTH</sub>
-                </div>
+                <div class="title-prices">49 <sub>/ MONTH</sub></div>
                 <p>ENTRY DATE: MON – FRI</p>
                 <p>ENTRY TIME: 8A.M – 8P.M</p>
                 <p>NUTRITION ADVICER: NO</p>
                 <a href="#">Buy now</a>
               </div>
               <div class="box-prices">
-                <div class="title-prices">
-                  69 <sub>/ MONTH</sub>
-                </div>
+                <div class="title-prices">69 <sub>/ MONTH</sub></div>
                 <p>ENTRY DATE: MON – FRI</p>
                 <p>ENTRY TIME: 8A.M – 8P.M</p>
                 <p>NUTRITION ADVICER: NO</p>
                 <a href="#">Buy now</a>
               </div>
               <div class="box-prices">
-                <div class="title-prices">
-                  99 <sub>/ MONTH</sub>
-                </div>
+                <div class="title-prices">99 <sub>/ MONTH</sub></div>
                 <p>ENTRY DATE: MON – FRI</p>
                 <p>ENTRY TIME: 8A.M – 8P.M</p>
                 <p>NUTRITION ADVICER: NO</p>
@@ -395,16 +388,22 @@
             <div class="contacts">
               <h1>CONTACT US</h1>
               <div class="connection">
-                <ul class="icon-left">
+                <ul class="icon-contact">
                   <li>
                     <a class="icon-map" href="#"
-                      >5419 Joseph Mountains Apt. 716</a
+                      >5419 Joseph Mountains <br> Apt. 716</a
                     >
+                  </li>
+                  <li>
                     <a class="icon-mail" href="#">joga.info@example.com</a>
+                  </li>
+                  <li>
                     <a class="icon-phone" href="#"
                       >+1 234 567 89 <br />
                       +1 234 678 90
                     </a>
+                  </li>
+                  <li>
                     <a class="icon-planet" href="#">www.example.com</a>
                   </li>
                 </ul>

Файловите разлики са ограничени, защото са твърде много
+ 632 - 92
style.css


+ 0 - 652
style/media.css

@@ -1,652 +0,0 @@
-@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: -450px;
-  }
-  .bloquotes p {
-    margin-left: -355px;
-  }
-  .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 {
-    display: none;
-  }
-
-  .logo-mobile {
-    display: block;
-  }
-  
-  .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:not([not-menu]) {
-    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: -250px;
-  }
-  .bloquotes p {
-    margin-left: -155px;
-  }
-}
-
-@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: 2450px;
-  }
-  .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: -180px;
-  }
-  .bloquotes p {
-    margin-left: -85px;
-  }
-
-  .copyright {
-    padding: 30px 0;
-  }
-  .copyright > p {
-    font-size: 14px;
-  }
-}

BIN
valid-html.png


BIN
valid-media-css.png


BIN
valid-style-css.png