finished

Lain62 · Dec 2, 2023 · 8f3039a · 8f3039a
1 parent 0280a7f
commit 8f3039a
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 1 deletion.
diff --git a/flex/07-flex-layout-2/index.html b/flex/07-flex-layout-2/index.html
@@ -12,6 +12,8 @@
       MY AWESOME WEBSITE
     </div>
 
+    <div class="content">
+
     <div class="sidebar">
       <ul>
         <li><a href="#">⭐ - link one</a></li>
@@ -21,13 +23,17 @@
       </ul>
     </div>
 
+    <div class="card-container">
     <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="footer">
       The Odin Project ❤️
     </div>

diff --git a/flex/07-flex-layout-2/style.css b/flex/07-flex-layout-2/style.css
@@ -26,4 +26,65 @@ body {
   border: 1px solid #eee;
   box-shadow: 2px 4px 16px rgba(0,0,0,.06);
   border-radius: 4px;
+}
+
+/* solution */
+
+.header{
+  font-size: 32px;
+  font-weight: 900;
+  display: flex;
+  align-items: center;
+  padding-left: 16px;
+}
+
+ul{
+  list-style-type: none;
+  margin: 0;
+  padding: 0px;
+}
+
+li{
+  padding: 8px;
+}
+
+
+a{
+  text-decoration: none;
+  color: #eee;
+  font-size: 24px;
+}
+
+body{
+  display: flex;
+  flex-direction: column;
+
+}
+
+.sidebar{
+  flex-shrink: 0;
+  padding: 16px;
+}
+
+.content{
+  display: flex;
+  flex: 1;
+}
+
+.card-container{
+  display: flex;
+  padding: 32px;
+  flex-wrap: wrap;
+}
+
+.card{
+  width: 300px;
+  margin: 8px;
+  padding: 32px;
+}
+
+.footer{
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }