Merge pull request 'Feat/Top-Cards' (#5) from Feat/Top-Cards into develop

Reviewed-on: #5

assets/styles/main.css

@@ -58,3 +58,31 @@ body{
     width: 17%;
     padding: 0 0 178px;
 }
+
+.top-cards{   
+    display: grid;
+    grid-template-columns: repeat(3, 18%);
+    gap: 20px;
+    justify-content: center;
+    padding: 0 0 80px;
+}
+
+.top-card{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: #FFFFFF;
+    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
+}
+
+.top-card-image{
+    display: block;
+    padding: 36px 124px 0;
+}
+
+.top-card-description{
+    font-size: 16px;
+    line-height: 24px;
+    text-align: center;
+    padding: 26px;
+}

index.html

@@ -37,6 +37,35 @@
 
          </section>
 
+        <section class="top-cards">
+           <div class="top-card">
+               <img class="top-card-image" src="./assets/images/top-card-01.png" alt="Image 1" />
+               
+               <p class="top-card-description" >
+                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. 
+               </p>
+
+           </div>
+
+           <div class="top-card">
+               <img class="top-card-image" src="./assets/images/top-card-02.png" alt="Image 2" />
+
+               <p class="top-card-description" >
+                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. 
+               </p>
+
+           </div>
+
+           <div class="top-card">
+               <img class="top-card-image" src="./assets/images/top-card-03.png" alt="Image 3" />
+
+               <p class="top-card-description" >
+                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. 
+               </p>
+
+           </div>
+        </section>
+
        </main>
 
     </body>