Completed 06-Flex-Layout

popjam · Nov 13, 2024 · d782b41 · d782b41
1 parent 3f705ac
commit d782b41
Showing 1 changed file with 51 additions and 1 deletion.
diff --git a/flex/06-flex-layout/style.css b/flex/06-flex-layout/style.css
@@ -1,19 +1,69 @@
 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
 
+* {
+  padding: 0;
+  margin: 0;
+}
+
 body {
   height: 100vh;
   margin: 0;
   overflow: hidden;
   font-family: Roboto, sans-serif;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.header,
+.footer {
+  height: 50px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 0px 20px;
+}
+
+.header ul,
+.footer ul {
+  display: flex;
+  gap: 20px;
+}
+
+.content {
+  justify-self: center;
+  align-self: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+ul,
+ol {
+  list-style-type: none;
+}
+
+ul a,
+ol a {
+  text-decoration: none;
+  color: #888888;
 }
 
 img {
   width: 600px;
+  margin-bottom: 40px;
+}
+
+.buttons {
+  margin-top: 20px;
+  display: flex;
+  gap: 10px;
 }
 
 button {
   font-family: Roboto, sans-serif;
   border: none;
+  padding: 10px 15px;
   border-radius: 8px;
   background: #eee;
 }
@@ -23,4 +73,4 @@ input {
   border-radius: 16px;
   padding: 8px 24px;
   width: 400px;
-}
+}