S03

Tirsog · Oct 12, 2021 · 084a016 · 084a016
1 parent da5c198
commit 084a016
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 10 deletions.
diff --git a/flex/03-flex-header-2/index.html b/flex/03-flex-header-2/index.html
@@ -9,18 +9,22 @@
 </head>
 <body>
   <div class="header">
-    <div class="logo">
-      LOGO
+      <div class="leftblock">
+        <div class="logo">
+          LOGO
+        </div>
+        <ul class="links">
+          <li><a href="google.com">link-one</a></li>
+          <li><a href="google.com">link-two</a></li>
+          <li><a href="google.com">link-three</a></li>
+        </ul>
     </div>
-    <ul class="links">
-      <li><a href="google.com">link-one</a></li>
-      <li><a href="google.com">link-two</a></li>
-      <li><a href="google.com">link-three</a></li>
-    </ul>
-    <button class="notifications">
+    <div class="rightblock">
+      <button class="notifications">
       1 new notification
-    </button>
-    <div class="profile-image"></div>
+     </button>
+      <div class="profile-image"></div>
+    </div>
   </div>
 </body>
 </html>
diff --git a/flex/03-flex-header-2/style.css b/flex/03-flex-header-2/style.css
@@ -12,6 +12,9 @@ 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: 0 8px 0 8px;
 }
 
 .profile-image {
@@ -28,13 +31,23 @@ body {
   font-weight: 900;
   font-style: italic;
 }
+.leftblock{
+  display: flex;
+  gap: 16px;
+}
+.rightblock{
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
 
 button {
   border: none;
   border-radius: 8px;
   background: rebeccapurple;
   color: white;
   padding: 8px 24px;
+
 }
 
 a {
@@ -45,4 +58,6 @@ a {
 
 ul {
   list-style-type: none;
+  display: flex;
+  gap: 10px
 }