'first-section-fix'

kandyy9 · Mar 5, 2024 · cb46ddc · cb46ddc
1 parent c2280d8
commit cb46ddc
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 9 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -155,17 +155,35 @@ img{
     background-color:var(--pressed-state-color);
 }
 
-.quality ul{
+.visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    border: 0;
+    padding: 0;
+    white-space: nowrap;
+    clip-path: inset(100%);
+    clip: rect(0 0 0 0);
+    overflow: hidden;
+}
+
+.quality-list {
     display: flex;
     gap: 24px;
 }
 
+.quality-list-item{
+    width: calc((100% - 72px) / 4);
+}
+
 .section-title {
     text-align: center;
     font-size: 36px;
     font-weight: 700;
     line-height: 1.11;
     letter-spacing: 0.02em;
+    margin-bottom:8px;
     text-transform: capitalize;
     color: var(--dark-color);
 }

diff --git a/index.html b/index.html
@@ -58,32 +58,31 @@ <h1 class="hero-title">Effective Solutions for Your Business</h1>
         </div>
       </section>
       <section class="quality">
-        <div class="container">
-          <div class="wrap">
-            <h2></h2>
-            <ul>
-              <li>
+        <div class="container wrap">
+            <h2 class="visually-hidden"></h2>
+            <ul class="quality-list">
+              <li class="quality-list-item">
                 <h3 class="section-item-title">Strategy</h3>
                 <p class="section-paragraph">
                   Our goal is to identify the business problem to walk away with
                   the perfect and creative solution.
                 </p>
               </li>
-              <li>
+              <li class="quality-list-item">
                 <h3 class="section-item-title">Punctuality</h3>
                 <p class="section-paragraph">
                   Bring the key message to the brand's audience for the best
                   price within the shortest possible time.
                 </p>
               </li>
-              <li>
+              <li class="quality-list-item">
                 <h3 class="section-item-title">Diligence</h3>
                 <p class="section-paragraph">
                   Research and confirm brands that present the strongest digital
                   growth opportunities and minimize risk.
                 </p>
               </li>
-              <li>
+              <li class="quality-list-item">
                 <h3 class="section-item-title">Technologies</h3>
                 <p class="section-paragraph">
                   Design practice focused on digital experiences. We bring forth