flex 6

sayedak · sayedak · commit 0919192b3a55 · 2021-12-02T10:34:03.000+06:00
diff --git a/flex/06-flex-layout/index.html b/flex/06-flex-layout/index.html
@@ -24,8 +24,8 @@
         <input type="text" />
       </div>
       <div class="buttons">
-        <button>Do the thing!</button>
-        <button>Do the other thing!</button>
+        <button class="b1">Do the thing!</button>
+        <button class="b2">Do the other thing!</button>
       </div>
     </div>
     <div class="footer">
diff --git a/flex/06-flex-layout/style.css b/flex/06-flex-layout/style.css
@@ -5,6 +5,8 @@ body {
   margin: 0;
   overflow: hidden;
   font-family: Roboto, sans-serif;
+  display: flex;
+  flex-direction: column;
 }
 
 img {
@@ -25,46 +27,58 @@ input {
   width: 400px;
   margin-bottom: 16px;
 }
+
+/* List style */
 li {
   list-style: none;
 }
-
+/* Link style */
 a {
   text-decoration: none;
   color: black;
 }
+/* Header style */
 .header {
   display: flex;
   justify-content: space-between;
-  align-content: center;
+  padding: 16px;
 }
 
+/* Header child style */
 .header .left-links,
 .header .right-links {
   display: flex;
-  padding-left: 15px;
-  column-gap: 1em;
+  margin: 0;
+  padding: 0;
+  gap: 1em;
 }
-.header .right-links {
-  padding-left: 0;
-  padding-right: 15px;
+
+.b1,
+.b2 {
+  padding: 8px 20px;
 }
 
-.logo {
+/* Footer style */
+.footer {
   display: flex;
-  justify-content: center;
-  align-content: center;
-  align-items: center;
-  padding: 10rem;
-  padding-bottom: 0;
+  justify-content: space-between;
+  padding: 16px;
+  background-color: #eee;
 }
 
-.input {
+/* Header child style */
+.footer .left-links,
+.footer .right-links {
   display: flex;
-  justify-content: center;
+  margin: 0;
+  padding: 0;
+  gap: 1em;
 }
 
-.buttons {
+.content {
+  flex: 1;
   display: flex;
   justify-content: center;
+  align-items: center;
+  flex-direction: column;
 }
