adding all exercises

tlawlor15 · Oct 8, 2024 · fab2f8a · fab2f8a
1 parent d299f38
commit fab2f8a
Show file tree

Hide file tree

Showing 23 changed files with 310 additions and 97 deletions.
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
diff --git a/flex/01-flex-center/style.css b/flex/01-flex-center/style.css
@@ -3,6 +3,9 @@
   border: 4px solid midnightblue;
   width: 400px;
   height: 300px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .box {

diff --git a/flex/02-flex-header/style.css b/flex/02-flex-header/style.css
@@ -1,6 +1,10 @@
 .header  {
   font-family: monospace;
   background: papayawhip;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px
 }
 
 .logo {
@@ -9,11 +13,16 @@
   color: tomato;
   background: white;
   padding: 4px 32px;
+  justify-content: center;
 }
 
 ul {
   /* this removes the dots on the list items*/
   list-style-type: none;
+  display: flex;
+  margin: 0;
+  padding: 0;
+  gap: 8px;
 }
 
 a {
@@ -22,4 +31,4 @@ a {
   padding: 8px;
   /* this removes the line under the links */
   text-decoration: none;
-}
+}
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="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">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>
-      <ul class="links">
-        <li><a href="https://google.com">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>
-      <button class="notifications">
-        1 new notification
-      </button>
-      <div class="profile-image"></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;
+  padding: 8px;
+  justify-content: space-between;
 }
 
 .profile-image {
@@ -45,4 +48,14 @@ a {
 
 ul {
   list-style-type: none;
+  display: flex;
+  gap: 16px;
+  margin: 0;
+  padding: 0;
 }
+
+.left, .right {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
diff --git a/flex/04-flex-information/index.html b/flex/04-flex-information/index.html
@@ -8,20 +8,25 @@
     <link rel="stylesheet" href="style.css">
   </head>
   <body>
-    <div class="title">Information!</div>
-
-    <img src="./images/barberry.png" alt="barberry">
-    <div class="text">This is a type of plant. We love this one.</div>
-
-    <img src="./images/chilli.png" alt="chili">
-    <div class="text">This is another type of plant. Isn't it nice?</div>
-
-    <img src="./images/pepper.png" alt="pepper">
-    <div class="text">We have so many plants. Yay plants.</div>
-
-    <img src="./images/saffron.png" alt="saffron">
-    <div class="text">I'm running out of things to say about plants.</div>
-
+    <div class="icons">
+      <div class="title">Information!</div>
+      <div class="plant barberry">
+        <img src="./images/barberry.png" alt="barberry">
+        <div class="text">This is a type of plant. We love this one.</div>
+      </div>
+      <div class="plant chili">
+        <img src="./images/chilli.png" alt="chili">
+        <div class="text">This is another type of plant. Isn't it nice?</div>
+      </div>
+      <div class="plant pepper">
+        <img src="./images/pepper.png" alt="pepper">
+        <div class="text">We have so many plants. Yay plants.</div>
+      </div>
+      <div class="plant saffron">
+        <img src="./images/saffron.png" alt="saffron">
+        <div class="text">I'm running out of things to say about plants.</div>
+      </div>
+    </div>
     <!-- disregard this section, it's here to give attribution to the creator of these icons -->
     <div class="footer">
       <div>Icons made by <a href="https://www.flaticon.com/authors/icongeek26" title="Icongeek26">Icongeek26</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></div>

diff --git a/flex/04-flex-information/style.css b/flex/04-flex-information/style.css
@@ -12,6 +12,13 @@ img {
   font-weight: 900;
 }
 
+.icons {
+  display: flex;
+  padding: 8px;
+  justify-content: space-between;
+  flex-basis: 200px;
+}
+
 /* do not edit this footer */
 .footer {
   position: fixed;

diff --git a/flex/05-flex-modal/index.html b/flex/05-flex-modal/index.html
@@ -10,11 +10,16 @@
   <body>
     <div class="modal">
       <div class="icon">!</div>
-      <div class="header">Are you sure you want to do that?</div>
-      <button class="close-button">✖</button>
-      <div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur excepturi id soluta, numquam minima rerum doloremque eveniet aspernatur beatae commodi. Cupiditate recusandae ad repellendus quidem consectetur sequi amet aspernatur cumque!</div>
-      <button class="continue">Continue</button>
-      <button class="cancel">Cancel</button>
+      <div class="main">
+        <div class="header">Are you sure you want to do that?
+          <button class="close-button">✖</button>
+        </div>
+        <div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur excepturi id soluta, numquam minima rerum doloremque eveniet aspernatur beatae commodi. Cupiditate recusandae ad repellendus quidem consectetur sequi amet aspernatur cumque!</div>
+        <div class = "buttons">
+          <button class="continue">Continue</button>
+          <button class="cancel">Cancel</button>
+        </div>
+      </div>
     </div>
   </body>
 </html>
diff --git a/flex/05-flex-modal/style.css b/flex/05-flex-modal/style.css
@@ -20,6 +20,15 @@ body {
   width: 480px;
   border-radius: 10px;
   box-shadow: 2px 4px 16px rgba(0,0,0,.2);
+  padding: 16px;
+  gap: 16px;
+  display: flex
+}
+
+.main {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
 }
 
 .icon {
@@ -33,6 +42,7 @@ body {
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-shrink: 0;
 }
 
 .close-button {
@@ -66,4 +76,17 @@ button.cancel {
   background: white;
   border: 1px solid #ddd;
   color: royalblue;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.buttons{
+  display:flex;
+  gap: 8px;
 }
diff --git a/flex/06-flex-layout/style.css b/flex/06-flex-layout/style.css
@@ -5,6 +5,9 @@ body {
   margin: 0;
   overflow: hidden;
   font-family: Roboto, sans-serif;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
 }
 
 img {
@@ -16,6 +19,7 @@ button {
   border: none;
   border-radius: 8px;
   background: #eee;
+  padding: 8px 16px;
 }
 
 input {
@@ -24,3 +28,39 @@ input {
   padding: 8px 24px;
   width: 400px;
 }
+
+ul {
+  display: flex;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  gap: 16px
+}
+
+.header, .footer {
+  display: flex;
+  justify-content: space-between;
+  padding: 16px;
+}
+
+.left-links, .right-links {
+  display: flex;
+  gap: 16px;
+}
+
+.footer {
+  background-color: #eeeeee;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+}
+
+a {
+  text-decoration: none;
+  color: grey;
+}
diff --git a/flex/07-flex-layout-2/index.html b/flex/07-flex-layout-2/index.html
@@ -11,23 +11,24 @@
     <div class="header">
       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>
-
-    <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="middle">
+      <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="content">
+        <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>