Working on mobile design.

Author: sharique

Readme.md

@@ -4,5 +4,5 @@ This contains the designs and layouts examples that I created for learning or pe
 
 # Frontend mentor solutions
 
-1. [QR Code component](/fe-mentor/qr-code-component)
-2. [Easy Bank landing page](/fe-mentor/easybank-landing-page)
+1. [QR Code component](/fe-mentor/qr-code-component) - [Solution](https://sharique.github.io/designs-layouts/fe-mentor/qr-code-component/)
+2. [Easy Bank landing page](/fe-mentor/easybank-landing-page) - [Solution](https://sharique.github.io/designs-layouts/fe-mentor/easybank-landing-page/  )

fe-mentor/easybank-landing-page/index.html

@@ -95,7 +95,7 @@ <h2>Why choose Easybank?</h2>
                                 />
                             </div>
                             <div class="card-body">
-                                <h2>Online Banking</h2>
+                                <h3>Online Banking</h3>
                                 <p>
                                     Our modern web and mobile applications allow
                                     you to keep track of your finances wherever
@@ -109,7 +109,7 @@ <h2>Online Banking</h2>
                                 alt="Simple Budgeting"
                             />
                             <div class="card-body">
-                                <h2>Simple Budgeting</h2>
+                                <h3>Simple Budgeting</h3>
                                 <p>
                                     See exactly where your money goes each
                                     month. Receive
@@ -122,7 +122,7 @@ <h2>Simple Budgeting</h2>
                                 alt="Fast Onboarding"
                             />
                             <div class="card-body">
-                                <h2>Fast Onboarding</h2>
+                                <h3>Fast Onboarding</h3>
                                 <p>
                                     We don't do branches. Open your account in
                                     minutes online and start taking control of
@@ -133,7 +133,7 @@ <h2>Fast Onboarding</h2>
                         <div class="feature card">
                             <img src="images/icon-api.svg" alt="Open API" />
                             <div class="card-body">
-                                <h2>Open API</h2>
+                                <h3>Open API</h3>
                                 <p>
                                     Manage your finances like never before.
                                     Online Banking Our modern web and mobile

fe-mentor/easybank-landing-page/style.css

@@ -60,7 +60,7 @@ h2 {
 }
 /* Header */
 header {
-    padding-top: 1em;
+    padding-block: 1em;
 }
 .menu ul {
     display: flex;
@@ -140,6 +140,9 @@ footer {
     flex: 0 1 100%;
     padding: 1rem 0;
 }
+.features {
+    gap: 2rem;
+}
 
 /* Articles styling  */
 .card {
@@ -174,6 +177,9 @@ footer {
     .card-body {
         padding: 1rem;
     }
+    h3:hover {
+        color: var(--lime-green);
+    }
 }
 
 .why {
@@ -186,3 +192,45 @@ footer {
     padding: 2rem 0;
     flex-direction: column;
 }
+
+/* Mobile styling  */
+@media only screen and (max-width: 768px) {
+    .hero {
+        flex-direction: column-reverse;
+        .hero-right {
+            flex: 1 1 100%;
+            padding: 1rem;
+        }
+        .hero-left {
+            flex: 1 1 100%;
+            padding: 1rem;
+        }
+    }
+
+    .feature {
+        flex: 1 1 100%;
+    }
+
+    .card {
+        flex: 1 1 100%;
+        img {
+            display: inline-block;
+        }
+    }
+
+    .why {
+        flex-direction: column;
+        text-align: center;
+    }
+    .wrapper {
+        padding-inline: 10px;
+        flex-direction: column;
+        text-align: center;
+    }
+    .last-section {
+        padding: 0;
+    }
+    .footer-menu {
+        column-count: 1;
+    }
+}