make section and buttons a utility class and added to utility file an…

…d also remove the corresponding properties with those utility class
dugsiiyeinc · Nov 19, 2024 · 8bf71ad · 8bf71ad
1 parent 7d6c205
commit 8bf71ad
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 121 deletions.
diff --git a/index.html b/index.html
@@ -14,7 +14,7 @@
     <script src="scripts/header.js" defer></script>
   </head>
   <body>
-    <header class="header">
+    <header class="header section">
       <div class="header__menu container">
         <div class="logo">
           <img src="assets/logo.svg" alt="posive" />
@@ -79,8 +79,8 @@
             </li>
           </ul>
           <div class="header__buttons">
-            <button class="btn btn--secondary">Log In</button>
-            <button class="btn btn--primary">Get Started</button>
+            <button class="btn btn--secondary header__btn">Log In</button>
+            <button class="btn btn--primary header__btn">Get Started</button>
             <select name="lang" id="lang" class="btn--lang">
               <option class="btn--opt" value="eng">ENG</option>
               <option class="btn--opt" value="so">SO</option>
@@ -91,7 +91,7 @@
     </header>
     <main>
       <section class="hero">
-        <div class="hero__content container">
+        <div class="hero__content section container">
           <h4 class="hero__badge">1# Best all-in-one pos platform</h4>
           <h1 class="hero__title">
             Empower your business growth with our point of sale
@@ -102,10 +102,8 @@ <h1 class="hero__title">
             competitive market
           </p>
           <div class="hero__buttons">
-            <button class="hero__btn hero__btn--primary">
-              Start free trial
-            </button>
-            <button class="hero__btn hero__btn--secondary">
+            <button class="btn btn--primary">Start free trial</button>
+            <button class="btn btn--secondary hero__btn--secondary">
               <svg
                 width="17"
                 height="16"
@@ -140,7 +138,7 @@ <h1 class="hero__title">
         </div>
       </section>
 
-      <section class="features">
+      <section class="features section">
         <div class="features__wrapper container">
           <div class="features__content">
             <div class="features__header">
@@ -313,7 +311,7 @@ <h2 class="features__title">
         </div>
       </section>
 
-      <section class="work">
+      <section class="work section">
         <h2 class="work__title">The inner workings of our POS</h2>
         <div class="work__body container">
           <div class="work__thumbnail">
@@ -480,7 +478,7 @@ <h3 class="work__sub-title">Plug-and-play apps</h3>
         </div>
       </section>
 
-      <section class="testimonials">
+      <section class="testimonials section">
         <div class="container">
           <h2 class="testimonials__title">Our customers say about us</h2>
           <p class="testimonials__description">
@@ -787,7 +785,7 @@ <h4 class="author__name">Eren Yaeger</h4>
         </div>
       </section>
 
-      <section class="faq">
+      <section class="faq section">
         <div class="faq__wrapper container">
           <div class="faq__content">
             <h2 class="faq__title">Frequently asked questions</h2>
@@ -796,8 +794,8 @@ <h2 class="faq__title">Frequently asked questions</h2>
               to ask, get in touch with our Customer support
             </p>
             <div class="faq__buttons">
-              <button class="faq__btn faq__btn--primary">More FAQs</button>
-              <button class="faq__btn faq__btn--secondary">Get in touch</button>
+              <button class="btn btn--primary">More FAQs</button>
+              <button class="btn btn--secondary">Get in touch</button>
             </div>
           </div>
           <div class="faq__accordions">
@@ -962,7 +960,7 @@ <h4 class="accordion__question">
         </div>
       </section>
 
-      <section class="cta">
+      <section class="cta section">
         <div class="cta__wrapper container">
           <div class="cta__content">
             <h2 class="cta__title">Stary selling better with Posive POS</h2>
@@ -994,7 +992,7 @@ <h2 class="cta__title">Stary selling better with Posive POS</h2>
       </section>
     </main>
 
-    <footer class="footer">
+    <footer class="footer section">
       <ul class="footer__list container">
         <li class="footer__item company">
           <img class="company__logo" src="assets/logo-white.svg" alt="Posive" />

diff --git a/styles/components/footer.css b/styles/components/footer.css
@@ -1,7 +1,6 @@
 .footer {
   background-color: var(--secondary-500);
   color: var(--primary-0);
-  padding: 65px 0px;
   position: relative;
 }
 
@@ -103,10 +102,6 @@
 }
 
 @media (max-width: 475px) {
-  .footer {
-    padding: 65px 24px;
-  }
-
   .about__link,
   .other__link,
   .contact__link {

diff --git a/styles/components/header.css b/styles/components/header.css
@@ -50,31 +50,6 @@
   gap: 10px;
 }
 
-.btn {
-  background: none;
-  border: none;
-  outline: none;
-  border: 1px solid #dce4e8;
-  border-radius: 10px;
-  padding: 12px 24px;
-  font-size: 0.875rem;
-  font-weight: 700;
-  line-height: 150%;
-  letter-spacing: -2%;
-  cursor: pointer;
-}
-
-.btn--secondary {
-  background-color: var(--primary-0);
-  color: #1a1c1e;
-}
-
-.btn--primary {
-  background-color: var(--primary-500);
-  color: var(--primary-0);
-  border-color: var(--primary-600);
-}
-
 .btn--lang {
   border: none;
   outline: none;
@@ -105,7 +80,7 @@
     font-size: 0.75rem;
   }
 
-  .btn {
+  .header__btn {
     padding: 8px 12px;
     font-size: 0.75rem;
   }

diff --git a/styles/style.css b/styles/style.css
@@ -4,7 +4,6 @@
   background-repeat: no-repeat;
   background-position: bottom;
   background-size: contain;
-  margin-top: 70px;
   text-align: center;
   padding-inline: 24px;
 }
@@ -51,29 +50,7 @@
   margin-top: 32px;
 }
 
-.hero__btn {
-  background: none;
-  border: none;
-  outline: none;
-  border: 1px solid #dce4e8;
-  border-radius: 10px;
-  padding: 13px 24px;
-  font-size: 0.875rem;
-  font-weight: 700;
-  line-height: 150%;
-  letter-spacing: -2%;
-  cursor: pointer;
-}
-
-.hero__btn--primary {
-  background-color: var(--primary-500);
-  color: var(--primary-0);
-  border-color: var(--primary-600);
-}
-
 .hero__btn--secondary {
-  background-color: var(--primary-0);
-  color: #1a1c1e;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -96,7 +73,6 @@
 .features {
   background-color: var(--secondary-500);
   color: var(--primary-0);
-  padding: 100px 72px;
 }
 
 .features__wrapper {
@@ -178,10 +154,6 @@
   border-radius: 10px;
 }
 
-.work {
-  padding: 100px 72px;
-}
-
 .work__title {
   color: var(--secondary-500);
   font-size: 3.5rem;
@@ -250,7 +222,7 @@
 .testimonials {
   background-color: var(--secondary-500);
   color: var(--primary-0);
-  padding: 80px 84px;
+  /* padding: 80px 84px; */
 }
 
 .testimonials__title {
@@ -344,7 +316,7 @@
 
 .faq {
   background-color: var(--secondary-100);
-  padding: 100px 0px;
+  /* padding: 100px 0px; */
 }
 
 .faq__wrapper {
@@ -375,30 +347,6 @@
   gap: 16px;
 }
 
-.faq__btn {
-  background: none;
-  outline: none;
-  border: 1px solid #dce4e8;
-  padding: 13px 24px;
-  border-radius: 10px;
-  font-size: 0.875rem;
-  font-weight: 700;
-  line-height: 150%;
-  letter-spacing: -2%;
-  cursor: pointer;
-}
-
-.faq__btn--primary {
-  background-color: var(--primary-500);
-  color: var(--primary-0);
-  border-color: var(--primary-600);
-}
-
-.faq__btn--secondary {
-  background-color: var(--primary-0);
-  color: #1a1c1e;
-}
-
 .faq__accordions {
   display: flex;
   flex-direction: column;
@@ -532,10 +480,6 @@
     font-size: 2.8rem;
   }
 
-  .features {
-    padding: 80px 16px;
-  }
-
   .features__title {
     font-size: 2rem;
     line-height: 121%;
@@ -546,10 +490,6 @@
     max-width: 36ch;
   }
 
-  .work {
-    padding: 80px 16px;
-  }
-
   .work__title {
     font-size: 2rem;
   }
@@ -624,10 +564,6 @@
     max-width: 50ch;
   }
 
-  .features {
-    padding: 80px 16px;
-  }
-
   .features__wrapper {
     flex-direction: column;
     gap: 48px;
@@ -731,10 +667,6 @@
     display: block;
   }
 
-  .testimonials {
-    padding: 48px 24px;
-  }
-
   .testimonials__title {
     text-align: left;
     font-size: 2rem;
@@ -762,10 +694,6 @@
     height: 32px;
   }
 
-  .faq {
-    padding: 80px 16px;
-  }
-
   .faq__title {
     font-size: 2rem;
   }

diff --git a/styles/utilis.css b/styles/utilis.css
@@ -22,6 +22,35 @@
   padding-inline: 0.5rem;
 }
 
+section {
+  padding-block: 100px;
+}
+
+.btn {
+  background: none;
+  border: none;
+  outline: none;
+  border: 1px solid #dce4e8;
+  border-radius: 10px;
+  padding: 12px 24px;
+  font-size: 0.875rem;
+  font-weight: 700;
+  line-height: 150%;
+  letter-spacing: -2%;
+  cursor: pointer;
+}
+
+.btn--secondary {
+  background-color: var(--primary-0);
+  color: #1a1c1e;
+}
+
+.btn--primary {
+  background-color: var(--primary-500);
+  color: var(--primary-0);
+  border-color: var(--primary-600);
+}
+
 /* 2xl */
 @media (max-width: 1440px) {
   .container {
@@ -48,6 +77,10 @@
   .container {
     max-width: 640px;
   }
+
+  section {
+    padding-block: 65px;
+  }
 }
 
 /* sm */