Done css-exercises-fork/foundations/flex/03-flex-center Exercise

deadMartial · Nov 1, 2024 · 2251df8 · 2251df8
1 parent 7dfada0
commit 2251df8
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 3 deletions.
diff --git a/foundations/flex/03-flex-header-2/index.html b/foundations/flex/03-flex-header-2/index.html
@@ -9,18 +9,22 @@
   </head>
   <body>
     <div class="header">
+      <div class="left">
       <div class="logo">
         LOGO
       </div>
       <ul class="links">
-        <li><a href="https://google.com">link-one</a></li>
+        <li><a href="https://google.com" style="text-decoration: none;">link-one</a></li>
         <li><a href="https://google.com">link-two</a></li>
         <li><a href="https://google.com">link-three</a></li>
       </ul>
+    </div>
+    <div class="right">
       <button class="notifications">
         1 new notification
       </button>
       <div class="profile-image"></div>
     </div>
+    </div>
   </body>
 </html>
diff --git a/foundations/flex/03-flex-header-2/style.css b/foundations/flex/03-flex-header-2/style.css
@@ -12,8 +12,29 @@ body {
   background: white;
   border-bottom: 1px solid #ddd;
   box-shadow: 0 0 8px rgba(0,0,0,.1);
+  display: flex;
+  justify-content: space-between;
+  padding: 8px;
+  align-items: center;
 }
 
+.left{
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+  align-items: center;
+}
+.right{
+  display: flex;
+  gap: 16px
+}
+
+.links{
+  display: flex;
+  gap: 10px;
+}
+
+
 .profile-image {
   background: rebeccapurple;
   box-shadow: inset 2px 2px 4px rgba(0,0,0,.5);
@@ -39,10 +60,12 @@ button {
 
 a {
   /* this removes the line under our links */
-  text-decoration: none;
+  text-decoration:line-through;
   color: rebeccapurple;
 }
 
 ul {
   list-style-type: none;
-}
+  margin: 0;
+  padding: 0;
+}