Added lesson 14

Ramasamy3488 · May 3, 2022 · 4a2cf74 · 4a2cf74
1 parent f91ec80
commit 4a2cf74
Show file tree

Hide file tree

Showing 5 changed files with 124 additions and 0 deletions.
diff --git a/14_lesson/css/style.css b/14_lesson/css/style.css
@@ -0,0 +1,46 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: "Roboto", sans-serif;
+  min-height: 100vh;
+  padding: 20px;
+}
+
+.container {
+  max-width: 800px;
+  min-height: 400px;
+  margin-inline: auto;
+  border: 1px solid #000;
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+  align-items: center;
+  flex-flow: row wrap;
+  align-content: space-evenly;
+} 
+
+.box {
+  /* min-width: 100px; */
+  height: 100px;
+  background-color: #000;
+  color: #fff;
+  font-size: 2rem;
+  padding: 0.5rem;
+
+  display: flex;
+  justify-content: center; 
+  align-items: center;
+
+  flex: 1 1 150px;
+}
+
+.box:nth-child(2) {
+  flex: 2 2 150px;
+  order: 1;
+}
diff --git a/14_lesson/index.html b/14_lesson/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CSS Flexbox</title>
+    <link rel="stylesheet" href="css/style.css">
+</head>
+
+<body>
+   <main class="container">
+        <div class="box">1</div>
+        <div class="box">2</div>
+        <div class="box">3</div>
+        <div class="box">4</div>
+        <div class="box">5</div>
+        <div class="box">6</div>
+   </main>
+</body>
+
+</html>
diff --git a/14_lesson_starter/css/style.css b/14_lesson_starter/css/style.css
@@ -0,0 +1,29 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: "Roboto", sans-serif;
+  min-height: 100vh;
+  padding: 20px;
+}
+
+.container {
+  max-width: 800px;
+  min-height: 400px;
+  margin-inline: auto;
+  border: 1px solid #000;
+} 
+
+.box {
+  min-width: 100px;
+  min-height: 100px;
+  background-color: #000;
+  color: #fff;
+  font-size: 2rem;
+  padding: 0.5rem;
+}
diff --git a/14_lesson_starter/index.html b/14_lesson_starter/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CSS Flexbox</title>
+    <link rel="stylesheet" href="css/style.css">
+</head>
+
+<body>
+   <main class="container">
+        <div class="box">1</div>
+        <div class="box">2</div>
+        <div class="box">3</div>
+        <div class="box">4</div>
+        <div class="box">5</div>
+        <div class="box">6</div>
+   </main>
+</body>
+
+</html>
diff --git a/README.md b/README.md
@@ -62,6 +62,7 @@
 - 🔗 [MDN: Basic Concepts of MultiCol](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol)
 - 🔗 [MDN: Margin Collapsing](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing)
 - 🔗 [MDN: Position](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning)
+- 🔗 [MDN: Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox)
 
 ### 📚 Typography Resources:
 - 🔗 [MDN: Fundamental Text and Font Styling](https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals)
@@ -110,5 +111,7 @@
 - 🔗 [Chapter 12 Starter Code](https://github.com/gitdagray/css_course/tree/main/12_lesson_starter)
 - 🔗 [Chapter 13 Starter Code](https://github.com/gitdagray/css_course/tree/main/13_lesson_starter)
 - 🔗 [Chapter 13 Completed Code](https://github.com/gitdagray/css_course/tree/main/13_lesson)
+- 🔗 [Chapter 14 Starter Code](https://github.com/gitdagray/css_course/tree/main/14_lesson_starter)
+- 🔗 [Chapter 14 Completed Code](https://github.com/gitdagray/css_course/tree/main/14_lesson)