add index file

Roksolana-Bilous · Jan 18, 2025 · ab9f73d · ab9f73d
1 parent ae2fdcc
commit ab9f73d
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 14 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -22,6 +22,9 @@ ul,ol {
 a {
     text-decoration: none;
 }
+img {
+  display: block;
+}
 .visually-hidden {
   position: absolute;
   width: 1px;
@@ -244,6 +247,7 @@ a {
     text-align: center;
     text-transform: capitalize;
     color: #2e2f42;
+    margin-bottom: 72px;
   }
   .portfolio-list {
     display: flex;
@@ -255,7 +259,12 @@ a {
       background-color: #FFFFFF;
       width: calc(100%-72px)/4;
      }
-
+.portfolio-one {
+  padding: 32px 16px;
+  border: 1px solid #e7e9fc;
+  border-top: none;
+  margin-bottom: 8px;
+}
   .portfolio-title {
     font-weight: 500;
     font-size: 20px;

diff --git a/index.html b/index.html
@@ -8,6 +8,9 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@700&family=Roboto:wght@400;500;700&display=swap"
         rel="stylesheet">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/3.0.1/modern-normalize.min.css"
+            integrity="sha512-q6WgHqiHlKyOqslT/lgBgodhd03Wp4BEqKeW6nNtlOY4quzyG3VoQKFrieaCeSnuVseNKRGpGeDU3qPmabCANg=="
+            crossorigin="anonymous" referrerpolicy="no-referrer" />
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/3.0.1/modern-normalize.css"
             integrity="sha512-gnAN+RgTMylunXI7AMg+PtcUGpKZFkZJoFIkAWvdPFRrFJz3p2tx4+9xbjILRfN7CzoViMgS8vSf06fSQzWZjA=="
             crossorigin="anonymous" referrerpolicy="no-referrer" />
@@ -49,7 +52,7 @@ <h1 class="title-main">Effective Solutions for Your Business</h1>
 
     <section class="goals">
        <div class="container">
-            <h2 class="screen-reader-text">Goals</h2>
+            <h2 class="visually-hidden">Goals</h2>
             <ul class="goals-list">
                  <li class="goals-item">
                      <h3 class="goals-item-title">Strategy</h3>
@@ -119,33 +122,45 @@ <h2 class="portfolio-title-main">Our Portfolio</h2>
         <ul class="portfolio-list">
             <li class="portfolio-item">
                 <img src="./images/BankingApp.jpg" alt="Banking App" width="360">
-                <h3 class="portfolio-title">Banking App</h3>
-                <p class="portfolio-text">App</p>
+               <div class="portfolio-one">
+                    <h3 class="portfolio-title">Banking App</h3>
+                    <p class="portfolio-text">App</p>
+               </div>
             </li>
             <li class="portfolio-item">
                 <img src="./images/CashlessPayment.jpg" alt="Cashless Payment" width="360">
-                <h3 class="portfolio-title">Cashless Payment</h3>
-                <p class="portfolio-text">Marketing</p>
+                <div class="portfolio-one">
+                    <h3 class="portfolio-title">Cashless Payment</h3>
+                    <p class="portfolio-text">Marketing</p>
+                </div>
             </li>
             <li class="portfolio-item">
                 <img src="./images/MeditationApp.jpg" alt="Meditation App" width="360">
-                <h3 class="portfolio-title">Meditation App</h3>
-                <p class="portfolio-text">App</p>
+                <div class="portfolio-one">
+                    <h3 class="portfolio-title">Meditation App</h3>
+                    <p class="portfolio-text">App</p>
+                </div>
             </li>
             <li class="portfolio-item">
                 <img src="./images/TaxiService.jpg" alt="Taxi Service" width="360">
-                <h3 class="portfolio-title">Taxi Service</h3>
-                <p class="portfolio-text">Marketing</p>
+                <div class="portfolio-one">
+                    <h3 class="portfolio-title">Taxi Service</h3>
+                    <p class="portfolio-text">Marketing</p>
+                </div>
             </li>
             <li class="portfolio-item">
                 <img src="./images/ScreenIllustrations.jpg" alt="Screen Illustrations" width="360">
-                <h3 class="portfolio-title">Screen Illustrations</h3>
-                <p class="portfolio-text">Design</p>
+                <div class="portfolio-one">
+                    <h3 class="portfolio-title">Screen Illustrations</h3>
+                    <p class="portfolio-text">Design</p>
+                </div>
             </li>
             <li class="portfolio-item">
                 <img src="./images/OnlineCources.jpg" alt="Online Courses" width="360">
-                <h3 class="portfolio-title">Online Courses</h3>
-                <p class="portfolio-text">Marketing</p>
+                <div class="portfolio-one">
+                    <h3 class="portfolio-title">Online Courses</h3>
+                    <p class="portfolio-text">Marketing</p>
+                </div>
             </li>
         </ul>