added desktop layout for info section

iliAsghar · Aug 20, 2024 · e98d8d4 · e98d8d4
1 parent 70f250e
commit e98d8d4
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 11 deletions.
diff --git a/assets/images/girl with laptop.jpg → assets/images/girl-with-laptop.jpg b/assets/images/girl with laptop.jpg → assets/images/girl-with-laptop.jpg
diff --git a/assets/stylesheets/sections/info.css b/assets/stylesheets/sections/info.css
@@ -7,14 +7,14 @@
 }
 
 .info__nav {
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-rows: repeat(1fr);
   font-family: var(--ff-Roboto);
   font-size: 3rem;
   font-weight: 600;
   text-align: center;
   gap: .5rem;
-  margin-bottom: 2rem;
+  margin-bottom: 5rem;
 }
 
 .info__nav-btn {
@@ -24,7 +24,7 @@
 }
 
 .info__nav-btn--active {
-  background-color: var(--clr-accent);
+  background-color: var(--clr-accent) !important;
 }
 
 .info__page {
@@ -60,10 +60,42 @@
 
 .info__page__button {
   font-family: var(--ff-OpenSans);
-  padding: 1.25rem 2.95rem;
+  padding: 1rem 2.95rem;
   background-color: var(--clr-accent);
   font-size: 1.7rem;
   text-transform: uppercase;
   text-decoration: none;
   color: var(--clr-true-dark);
+}
+
+@media screen and (hover:hover) {
+  .info__nav-btn:hover {
+    background-color: var(--clr-primary-light);
+  }
+
+  .info__page__button:hover {
+    background-color: var(--clr-accent-dark);
+  }
+}
+
+@media screen and (min-width: 600px) {
+  .info__nav {
+    grid-template-rows: repeat(2, 1fr);
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .reviews-btn {
+    grid-column: 1/3;
+  }
+}
+
+@media screen and (min-width: 900px) {
+  .info__nav {
+    grid-template-rows: none;
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .reviews-btn {
+    grid-column: auto;
+  }
 }
diff --git a/index.html b/index.html
@@ -90,21 +90,21 @@ <h2 class="services__title">What We Do</h2>
   <section class="info">
     <div class="container">
       <ul class="info__nav list-nostyle">
-        <li class="info__nav-btn info__nav-btn--active">Description</li>
-        <li class="info__nav-btn">Specifications</li>
-        <li class="info__nav-btn">Reviews</li>
+        <li class="info__nav-btn sescription.btn">Description</li>
+        <li class="info__nav-btn specifications-btn">Specifications</li>
+        <li class="info__nav-btn reviews-btn info__nav-btn--active">Reviews</li>
       </ul>
       <div class="info__pages">
-        <div class="info__page description info__page--active">
-          <img src="./assets/images/girl with laptop.jpg" alt="Logitics" class="description__image">
+        <div class="info__page description">
+          <img src="./assets/images/girl-with-laptop.jpg" alt="Logitics" class="description__image">
           <p class="info__page__text"><strong>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem quisquam eum ullam, consequuntur officiis hic temporibus esse tempora odit vitae possimus enim iure saepe. Quidem quasi aut provident consequuntur illum.</strong></p>
           <p class="info__page__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione nobis excepturi quis dolorem. Recusandae incidunt ullam consequatur molestias, temporibus dicta ipsum non itaque quisquam fugit atque obcaecati vero voluptate officiis consectetur porro laudantium nam sint.</p>
         </div>
         <div class="info__page specifications">
           <p class="info__page__text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Reprehenderit repudiandae, iusto ad laboriosam rem dolorum dolorem mollitia facilis quis minus, voluptate veniam adipisci accusantium velit neque a ex eaque est ipsa, illo non? Quaerat.</p>
           <p class="info__page__text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eius minus laudantium quidem sed aliquid illum provident quibusdam repudiandae, impedit facilis expedita vitae alias, optio perferendis neque dignissimos quas rerum? Voluptatibus nihil a ipsa modi!</p>
         </div>
-        <div class="info__page reviews">
+        <div class="info__page reviews info__page--active">
           <h4 class="reviews__title">Be The First To Review This Product!</h4>
           <p class="info__page__text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eveniet vero, fugiat enim laborum sunt reiciendis repellendus excepturi cumque id quae.</p>
           <a href="" class="info__page__button">Write product review</a>