Nagehan KARMA

Nagehan1 · Nagehan1 · commit a179bc5ae2a0 · 2022-07-03T16:00:04.000+01:00
diff --git a/css/style.css b/css/style.css
@@ -92,28 +92,40 @@ button{
 a{
     text-decoration: none;
 }
-footer, h3{
-    text-align: center;
-    font-size: 24px;
-}
- footer p{
-    text-align: center;
-    font-size: 12px;
- }
-.fa{
-    padding: 20px;
-    font-size: 50 px;
-    width: 20px;
-    text-align: center;
-    text-decoration: none;
-    margin: 10px;
-    border-radius: 50%;
-    display: inline;
-}
-.fa:hover{
-    opacity: 0.7;
-}
-.fa-facebook{
-    background: navy;
+footer {
+  text-align: center;
+  padding-bottom: 2rem;
+}
+.socials {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+.articles {
+  display: flex;
+  justify-content: center;
+  flex-direction: row;
+  padding: 0.4rem 1rem;
+  margin: 0rem 1rem 0rem 0rem;
+}
+article {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 33%;
+  font-size: 0.75rem;
+}
+.karma-icons {
+  width: 4rem;
+}
+.footer-link {
+  margin: 0.25rem;
+}
+.socials-icon {
+  max-width: 0.55rem;
+  padding: 0.45rem;
+  border: #d8d9dc solid 1px;
+  border-radius: 50%;
+  opacity: 0.85;
 }
 }
diff --git a/index.html b/index.html
@@ -36,6 +36,11 @@ <h1>Introducing Karma</h1>
     <!-- All the images you need are in the 'img' folder -->
 <article class="services">
     <h2>Everyone needs a little karma</h2>
+    <section class="articles">
+            <article>
+                <img class="karma-icons" src="img/icon-devices.svg" alt="devices">
+                <p>Internet for all devices</p>
+            </article>
     <div class="container">
         <div class="icon">
             <a href="#" >
@@ -51,12 +56,16 @@ <h2>Everyone needs a little karma</h2>
         </div>
     </div>
 </article>
-</body>
 <footer>
-    <h3>Join us on</h3>
-    <a href="#" class="fa-facebook"></a>
-    <a href="#" class="fa-twitter"></a>
-    <a href="#" class="fa-instagram"></a>
-    <p>&copy Karma Mobility, Inc.</p>
-</footer>
+        <hr>
+        <h5>Join us on</h5>
+        <section class="socials">
+            <a class="footer-link" href="#"><img class="socials-icon" src="img/twitter-icon.svg" alt="twitter"></a>
+            <a class="footer-link" href="#"><img class="socials-icon" src="img/facebook-icon.svg" alt="facebook"></a>
+            <a class="footer-link" href="#"><img class="socials-icon" src="img/instagram-icon.svg" alt="instagram"></a>
+        </section>
+        <p class="signature">@Karma Mobility Inc.</p>
+    </footer>
+</body>
+
 </html>
