activity 4.3.3

Compukid · May 11, 2024 · fd4c581 · fd4c581
1 parent 8b1bb79
commit fd4c581
Show file tree

Hide file tree

Showing 2 changed files with 111 additions and 0 deletions.
diff --git a/activity_4.3.3/index.html b/activity_4.3.3/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <title>My HTML page</title>
+        <link rel="stylesheet" href="style.css">
+    </head>
+  <body>
+   <header>
+    <h2>welcome greeting subtitle</h2>
+    <h1>Homepage Title</h1>
+   </header>
+  <section id="navigation">
+   <ul>
+    <li>nav link 1</li>
+    <li>nav link 2</li>
+    <li>nav link 3</li>
+    <li>nav link 4</li>
+    </ul>
+   </section>
+   <section id="content">
+    <div id="topRight">
+    If your elements are still not exactly where you want them to be after adjusting the padding, margins and alignment, then you can try out the float property. The "float" property is one of the most powerful tools you can master when learning CSS.
+    </div>
+    <div id="topLeft">
+    Up until now, we haven't moved elements very far from wherever the web browser automatically places them, but as you've probably noticed this has left our page very left side heavy.
+    </div>
+    <div id="bottomRight">
+    The float property liberates an element from its automatic position and lifts it up to "float" on top of other elements in the direction you specify.  You can specify float either right, left or the default of none.
+    </div>
+    <div id="bottomLeft">
+    Elements underneath a floating object will automatically wrap themselves around the content. For example, if you float an image, the text underneath will wrap around it so that none of it is actually obscured underneath the image.
+    </div>
+   </section>
+  </body>
+</html>
diff --git a/activity_4.3.3/style.css b/activity_4.3.3/style.css
@@ -0,0 +1,75 @@
+body {
+    background-color: #4ABDAC;
+    color: #FFFFFF;
+    font-family: Georgia, serif;
+ }
+ header {
+    background-color: #F7B733;
+    height: 75px;
+ }
+
+ h1 {
+    padding: 15px;
+    float: left;
+    margin: auto;
+
+ }
+
+ h2 {
+
+    float: right;
+ }
+ #navigation {
+    height: 30px;
+    width: 30%;
+    margin-left: auto;
+    margin-right: auto;
+
+ }
+
+ #navigation li:hover {
+    border-bottom: 1px #FC4A1A solid;
+ }
+
+ ul {
+
+    list-style-type: none;
+
+ }
+
+ li {
+
+    float: right;
+    margin: auto;
+    padding: 0.4em;
+ }
+
+ #content {
+    background-color: #DFDCE3;
+    width: 50%;
+    margin-bottom: 20px;
+    margin-left: auto;
+    margin-right: auto;
+ }
+
+ div {
+    background-color: #FC4A1A;
+    width: 250px;
+    height: 150px;
+    padding: 10px;
+    margin: 20px;
+ }
+
+ #topRight {
+
+    float: right;
+    margin-top: 0%;
+    min-width: 50px;
+ }
+
+ #bottomRight {
+
+        float: right;
+        margin-top: 0%;
+        min-width: 50px;
+ }