activity 4.4.3

Compukid · May 11, 2024 · 08353d8 · 08353d8
1 parent fd4c581
commit 08353d8
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 0 deletions.
diff --git a/activity_4.4.3/index.html b/activity_4.4.3/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html> 
+<!--It's a best practice to always declare DOCTYPE!-->
+<html lang="en">
+  <head>
+    <title>Practice with Relative Positioning</title>
+      <meta charset="utf-8">
+      <link rel="stylesheet" href="style.css">
+  </head>
+  <body>
+    <h1>This is the main title</h1>
+    <h2>this is the subtitle</h2>
+    <section>
+      <div>
+      <h3>subsection title</h3>
+          <p>
+      The "position" property sets the algorithm for how the Web browser will compute the way the HTML elements are placed on the page. There are four different value options for the position property:
+        </p>
+    </div>
+    <div>
+      <h3>subsection title</h3>
+      <p>
+     Once you've set the position to "relative" that frees you up to set the top, right, bottom and left properties- otherwise known as the "box offsets". These properties specify the distance between this object and its normal static position and the corner of the box that we are specifying.
+
+For example, if we set the "left" to be "30px", it will move the element 30px to the right away from the left of where it was placed by default.
+      </p>
+      </div>
+    </section>
+  </body>
+</html>
diff --git a/activity_4.4.3/style.css b/activity_4.4.3/style.css
@@ -0,0 +1,24 @@
+body {
+    background-color: #EFEFEF;
+    color: #A9A9A9;
+    font-family: "Book Antiqua", serif; 
+  }
+  h1 {
+    color: #FF3B3F;
+  }
+  h2 {
+    position: relative;
+    left: 20px;
+  }
+  div {
+    background-color: #CAEBF2;
+    width: 80%;
+    position: relative;
+    left: 3em;
+  }
+  h3 {
+    color: #FF3B3F;
+  }
+  p {
+    width: 90%;
+  }