Merge pull request #59 from thuongtruong1009/Applied-Visual-Design

feat: add lession 26 + 27 + 28 to Applied Visual Design lession
thuongtruong1009 · May 4, 2022 · c1f6e20 · c1f6e20
2 parents 4889eb6 + 8710ac1
commit c1f6e20
Show file tree

Hide file tree

Showing 3 changed files with 133 additions and 0 deletions.
diff --git a/Applied Visual Design/26_learn-about-complementary-colors.html b/Applied Visual Design/26_learn-about-complementary-colors.html
@@ -0,0 +1,35 @@
+<!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>Lesion 26</title>
+    <style>
+        body {
+            background-color: #FFFFFF;
+        }
+
+        .blue {
+            background-color: #0000FF;
+        }
+
+        .yellow {
+            background-color: #FFFF00;
+        }
+
+        div {
+            display: inline-block;
+            height: 100px;
+            width: 100px;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="blue"></div>
+    <div class="yellow"></div>
+</body>
+
+</html>
diff --git a/Applied Visual Design/27_learn-about-tertiary-colors.html b/Applied Visual Design/27_learn-about-tertiary-colors.html
@@ -0,0 +1,40 @@
+<!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>Lession 27</title>
+    <style>
+        body {
+            background-color: #FFFFFF;
+        }
+
+        .orange {
+            background-color: #FF7F00;
+        }
+
+        .cyan {
+            background-color: #00FFFF;
+        }
+
+        .raspberry {
+            background-color: #FF007F;
+        }
+
+        div {
+            height: 100px;
+            width: 100px;
+            margin-bottom: 5px;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="orange"></div>
+    <div class="cyan"></div>
+    <div class="raspberry"></div>
+</body>
+
+</html>
diff --git a/Applied Visual Design/28_adjust-the-color-of-various-elements-to-complementary-colors.html b/Applied Visual Design/28_adjust-the-color-of-various-elements-to-complementary-colors.html
@@ -0,0 +1,58 @@
+<!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>Lession 28</title>
+    <style>
+        body {
+            background-color: white;
+        }
+
+        header {
+            background-color: 09A7A1;
+            color: white;
+            padding: 0.25em;
+        }
+
+        h2 {
+            color: 09A7A1;
+        }
+
+        button {
+            background-color: FF790E;
+        }
+
+        footer {
+            background-color: 09A7A1;
+            color: white;
+            padding: 0.5em;
+        }
+    </style>
+</head>
+
+<body>
+    <header>
+        <h1>Cooking with FCC!</h1>
+    </header>
+    <main>
+        <article>
+            <h2>Machine Learning in the Kitchen</h2>
+            <p>Join this two day workshop that walks through how to implement cutting-edge snack-getting algorithms with a command line interface. Coding usually involves writing exact instructions, but sometimes you need your computer to execute flexible
+                commands, like <code>fetch Pringles</code>.</p>
+            <button>Sign Up</button>
+        </article>
+        <article>
+            <h2>Bisection Vegetable Chopping</h2>
+            <p>This week-long retreat will level-up your coding ninja skills to actual ninja skills. No longer is the humble bisection search limited to sorted arrays or coding interview questions, applying its concepts in the kitchen will have you chopping
+                carrots in O(log n) time before you know it.</p>
+            <button>Sign Up</button>
+        </article>
+    </main>
+    <br>
+    <footer>&copy; 2018 FCC Kitchen</footer>
+</body>
+
+</html>