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

feat: add lession 23 + 24 + 25 to Applied visual design lession
thuongtruong1009 · May 3, 2022 · 4889eb6 · 4889eb6
2 parents 4f5a26c + 60c7635
commit 4889eb6
Show file tree

Hide file tree

Showing 3 changed files with 102 additions and 0 deletions.
diff --git a/Applied Visual Design/23_push-elements-left-or-right-with-the-float-property.html b/Applied Visual Design/23_push-elements-left-or-right-with-the-float-property.html
@@ -0,0 +1,42 @@
+<!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 23</title>
+    <style>
+        #left {
+            position: left;
+            float: left;
+        }
+
+        #right {
+            position: right;
+            float: right;
+        }
+
+        aside,
+        section {
+            padding: 2px;
+            background-color: #ccc;
+        }
+    </style>
+</head>
+
+<body>
+    <header>
+        <h1>Welcome!</h1>
+    </header>
+    <section id="left">
+        <h2>Content</h2>
+        <p>Good stuff</p>
+    </section>
+    <aside id="right">
+        <h2>Sidebar</h2>
+        <p>Links</p>
+    </aside>
+</body>
+
+</html>
diff --git a/...sual Design/24_change-the-position-of-overlapping-elements-with-the-z-index-property.html b/...sual Design/24_change-the-position-of-overlapping-elements-with-the-z-index-property.html
@@ -0,0 +1,37 @@
+<!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 24</title>
+    <style>
+        div {
+            width: 60%;
+            height: 200px;
+            margin-top: 20px;
+        }
+
+        .first {
+            background-color: red;
+            position: absolute;
+            z-index: 2;
+        }
+
+        .second {
+            background-color: blue;
+            position: absolute;
+            left: 40px;
+            top: 50px;
+            z-index: 1;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="first"></div>
+    <div class="second"></div>
+</body>
+
+</html>
diff --git a/Applied Visual Design/25_center-an-element-horizontally-using-the-margin-property.html b/Applied Visual Design/25_center-an-element-horizontally-using-the-margin-property.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>Lession 25</title>
+    <style>
+        div {
+            background-color: blue;
+            height: 100px;
+            width: 100px;
+            margin: auto;
+        }
+    </style>
+</head>
+
+<body>
+    <div></div>
+</body>
+
+</html>