From f1fc7a7c3ddbff9a4f0363097e36b81c158a6094 Mon Sep 17 00:00:00 2001
From: NetMan <13informatyka14@gmail.com>
Date: Fri, 29 Dec 2023 18:45:09 +0100
Subject: [PATCH] Completed exercise 07

---
 07-flex-layout-2/index.html | 31 +++++++++++----------
 07-flex-layout-2/style.css  | 55 +++++++++++++++++++++++++++++++++++++
 2 files changed, 72 insertions(+), 14 deletions(-)

diff --git a/07-flex-layout-2/index.html b/07-flex-layout-2/index.html
index 85c1d0b..a4860c5 100644
--- a/07-flex-layout-2/index.html
+++ b/07-flex-layout-2/index.html
@@ -12,21 +12,24 @@
       MY AWESOME WEBSITE
     </div>
     
-    <div class="sidebar">
-      <ul>
-        <li><a href="#">⭐ - link one</a></li>
-        <li><a href="#">🦸🏽‍♂️ - link two</a></li>
-        <li><a href="#">🖌️ - link three</a></li>
-        <li><a href="#">👌🏽 - link four</a></li>
-      </ul>
+    <div class="content">
+      <div class="sidebar">
+        <ul>
+          <li><a href="#">⭐ - link one</a></li>
+          <li><a href="#">🦸🏽‍♂️ - link two</a></li>
+          <li><a href="#">🖌️ - link three</a></li>
+          <li><a href="#">👌🏽 - link four</a></li>
+        </ul>
+      </div>
+      <div class="cards">
+        <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, eveniet? Dolorem dignissimos maiores non delectus possimus dolor nulla repudiandae vitae provident quae, obcaecati ipsam unde impedit corrupti veritatis minima porro?</div>
+        <div class="card">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi quaerat qui iure ipsam maiores velit tempora, deleniti nesciunt fuga suscipit alias vero rem, corporis officia totam saepe excepturi odit ea.</div>
+        <div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
+        <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
+        <div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
+        <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
+      </div>
     </div>
-
-    <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, eveniet? Dolorem dignissimos maiores non delectus possimus dolor nulla repudiandae vitae provident quae, obcaecati ipsam unde impedit corrupti veritatis minima porro?</div>
-    <div class="card">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi quaerat qui iure ipsam maiores velit tempora, deleniti nesciunt fuga suscipit alias vero rem, corporis officia totam saepe excepturi odit ea.</div>
-    <div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
-    <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
-    <div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
-    <div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
     
     <div class="footer">
       The Odin Project ❤️
diff --git a/07-flex-layout-2/style.css b/07-flex-layout-2/style.css
index 6caf04c..7463150 100644
--- a/07-flex-layout-2/style.css
+++ b/07-flex-layout-2/style.css
@@ -2,12 +2,19 @@ body {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   margin: 0;
   min-height: 100vh;
+  display: flex;
+  flex-direction: column;
 }
 
 .header {
   height: 72px;
   background: darkmagenta;
   color: white;
+  font-size: 2.5rem;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  padding: 0 15px;
 }
 
 .footer {
@@ -20,10 +27,58 @@ body {
   width: 300px;
   background: royalblue;
   box-sizing: border-box;
+  flex: 0 0 auto;
+  padding: 16px 10px;
+}
+
+.sidebar ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  font-size: 1.2rem;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+/* 
+.sidebar li {
+  
+} */
+
+
+.sidebar a {
+  text-decoration: none;
+  color: #fff;
+}
+
+
+.content {
+  display: flex;
+  flex: 1;
+}
+.cards {
+  flex: 1;
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  padding: 30px;
+  gap: 20px;
+  align-items: stretch;
+  justify-content: flex-start ;
 }
 
 .card {
+  width: 320px;
+  /* height: ; */
   border: 1px solid #eee;
   box-shadow: 2px 4px 16px rgba(0,0,0,.06);
   border-radius: 4px;
+  padding: 12px;
+  font-size: 1rem;
+}
+
+.footer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
\ No newline at end of file