WebDev-ShakoHS · jonathanfoster13 · Sep 10, 2021 · Sep 10, 2021 · Sep 14, 2021 · Sep 15, 2021
diff --git a/Version1.0/webDevUser14.html b/Version1.0/webDevUser14.html
@@ -1,8 +1,8 @@
 <!DOCTYPE html>
 <html lang="en">
 <!--Version 1.0 
-	Name:
-	Date Completed:
+	Name: Jonathan Foster
+	Date Completed: 9/10/21
  -->
     <head>
 
@@ -12,7 +12,7 @@
 
     <body>
 
-        <center>My name is User #14</center>
+        <center>My name is Jonathan</center>
 
     </body>
 

diff --git a/Version2.0/webDevUser14.html b/Version2.0/webDevUser14.html
@@ -7,7 +7,7 @@
 
 <head>
 
-    <title>User ## Version 2.0 </title>
+    <title>Jonathan's </title>Version 2.0 </title>
 
     <!-- Meta -->
     <meta charset="utf-8">
@@ -19,8 +19,67 @@
     <link rel="stylesheet" href="style.css">
 
     <style>
-
+section  background-color lightblue
+
+        #banner {
+            border: 5px outset black;
+            background-color: lightblue;
+            text-align: center;
+        }
+
+        div#face {
+            width: 40vw;
+            height: 40vw;
+            max-width: 400px;
+            max-height: 400px;
+            margin: 0 auto;
+            position: relative;
+            background: blue;
+            margin-top: 2rem;
+        }
+
+        div#face,
+        div#face * {
+            border-radius: 50%;
+        }
+
+        .eye {
+            width: 25%;
+            height: 25%;
+            background: orange;
+            position: absolute;
+            top: 20%;
+        }
+
+        .left.eye {
+            left: 20%;
+        }
+
+        .right.eye {
+            right: 20%;
+        }
+
+        .pupil {
+            background:green;
+            width: 50%;
+            height: 50%;
+            position: relative;
+            left: 25%;
+            transform-origin: bottom;
+        }
+
+        #mouth {
+            position: relative;
+            width: 60%;
+            left: 20%;
+            height: 25%;
+            border: 1vw solid transparent;
+            border-radius: 50%;
+            top: 50%;
+            border-bottom-color: #000;
+        }
     </style>
+
 </head>
 
 <body>
@@ -37,19 +96,54 @@ <h1>About Me</h1>
             <h2>Heading Examples</h2>
 
             <!-- Put your Headings ↓↓↓↓↓↓Below↓↓↓↓↓↓ here-->
-
+            <h1>this is heading 1</h1>
+            <h2>this is heading 2</h2>
+            <h3>this is heading 3</h3>
+            <h4>this is heading 4</h4>
+            <h5>this is heading 5</h5>
+            <h6>this is heading 6</h6>
             <!-- Put your Headings ↑↑↑↑↑↑Above↑↑↑↑↑↑ here-->
 
             <h2>Examples of "Other" HTML elements</h2>
 
             <!-- Put your 8 examples of other elements ↓↓↓↓↓↓Below↓↓↓↓↓↓ here-->
-
+            <del></del> - puts a strike through the words
+            <ins></ins> - adds underline
+            <sub></sub> -- subscript
+            <sup></sup> -- superscript
+            <small></small> -- defines a small text
+            <progress value="22" max="100"> </progress> - represents the progress of a task
+            <hr> — will place a horizontal line (no closing tag needed)
+            <abbr title="World Health Organization"> WHO </abbr> -- used to show acronyms
             <!-- Put your 8 examples of other elements ↑↑↑↑↑↑Above↑↑↑↑↑↑ here-->
         </div>
+        <div>
+            <h1>PUT YOUR BIG TITLE HERE</h1>
+<section>
+    <h2>Introduction or 1st Point</h2>
+    <p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. It usually begins with:</p>
+</section>
+
+<section>
+    <h2>2nd Point</h2>
+    <p>Content in here that explains your 2nd point</p>
+</section>
+
+        </div>
         <div id="banner">
+            This is a banner
         </div>
         <div id="face">
-
+            <div class="left eye">
+                <div class="pupil">
+                </div>
+            </div>
+            <div class="right eye">
+                <div class="pupil">
+                </div>
+            </div>
+            <div id="mouth">
+            </div>
         </div>
     </main>
 

diff --git a/Version3.0/user14/CSS/aboutme.html b/Version3.0/user14/CSS/aboutme.html
@@ -0,0 +1,162 @@
++<!DOCTYPE html>
+<html lang="en">
+<!--Version 3.0
+        Name:
+        Date Completed:
+    -->
+
+<head>
+
+    <title>Web Dev User ## </title>
+
+    <!-- Meta -->
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="description" content="SHS WebDev Version 3.0">
+
+    <!-- CSS -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link rel="stylesheet" href="CSS/style.css">
+
+    <!-- JavaScript -->
+    <!-- These are needed to get the responsive menu to work -->
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
+
+    <!-- Custom styles for this template -->
+    <style type="text/css">
+        menu {
+            margin: 0;
+            padding: 0;
+        }
+
+        .wideMargin {
+            margin: 15px;
+        }
+
+        footer {
+            font-size: 12px;
+            text-align: center;
+        }
+        h3 {
+            padding: 50px;
+            background-color: lavender;
+        }
+
+        h3 {
+            border-bottom: 1px solid #dd7b7b;
+            border-right: 3px dotted #ff5100;
+            border-top: 5px inset;
+            border-left: 3px dashed #093d02;
+            padding: 50px;
+            background-color: lavender;
+            display: inline-block;
+        }
+
+        h3 {
+            padding: 50px;
+            background-color: lavender;
+            display: inline-block;
+            border: 1px solid #5D6063;
+        }
+
+        p {
+            padding-top: 5px;
+            padding-bottom: 50px;
+            padding-left: 30px;
+            padding-right: 5px;
+            background-color: rgb(0, 244, 252);
+        }
+
+        p {
+            padding: 5px 50px 30px 5px;
+            margin-bottom: 50px;
+            background-color: aquamarine;
+        }
+
+        p {
+            padding: 20px 10px;
+            /* Vertical  Horizontal */
+        }
+
+        strong {
+            margin: 50px;
+            padding: 50px;
+            background-color: rgb(200, 173, 230);
+        }
+
+        p {
+            padding: 5px 50px 30px 5px;
+            background-color: rgb(246, 230, 250);
+            margin-top: 25px;
+            margin-bottom: 50px;
+        }
+
+
+
+
+
+
+
+
+
+
+
+    </style>
+</head>
+
+<body>
+    <!---------------------------------- Begin the nav-bar ------------------------------------------>
+    <menu>
+        <nav class="navbar navbar-expand-md navbar-dark bg-dark">
+            <a href="http://shakonet.isd720.com" class="navbar-brand">WebDev</a>
+            <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarCollapse">
+                <div class="navbar-nav">
+                    <!--↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ Edit These Items in your Menu ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓-->
+                    <a href="index.html" class="nav-item nav-link">Home</a>
+                    <a href="aboutMe.html" class="nav-item nav-link active">About Me</a>
+                    <a href="music.html" class="nav-item nav-link">Music</a>
+                    <a href="list.html" class="nav-item nav-link">Lists</a>
+                    <a href="mailto:sample@gmail.com?Subject=Hello" class="nav-item nav-link disabled"
+                        tabindex="-1">Contact</a>
+                    <!--↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ Edit These Items in your Menu ↑↑↑↑↑↑↑↑↑↑↑↑↑↑-->
+                </div>
+                <div class="navbar-nav ml-auto">
+                    <a href="#" class="nav-item nav-link disabled">Login</a>
+                </div>
+            </div>
+        </nav>
+        <!---------------------------------- End the nav-bar ------------------------------------->
+    </menu>
+
+    <main class="wideMargin">
+
+        <h1 class="text-left my-3">About Me</h1><!-- Edit this line for the title of your page -->
+
+        <!--↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ Put your content below this line ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓-->
+        <h3>Headings Are Block Elements</h3>
+
+        <p>paragraphs are blocks, too.<em>However</em>, &lt;em&gt; and &lt;strong&gt;
+        elements are not. They are <strong>inline</strong> elements.</p>
+
+        <p>Block elements define the flow of the HTML document, while inline elements
+        do not.</p>
+        <!--↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑ Make sure all your content is above this line ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑-->
+    </main>
+
+    <!---------------------------------- Begin the footer ------------->
+    <footer class="wideMargin">
+        <div>
+            Webpage made by <a href="#" target="_blank">[your name]</a>
+        </div>
+    </footer>
+    <!---------------------------------- End the footer ------------->
+</body>
+
+</html>
diff --git a/Version3.0/user14/CSS/style.css b/Version3.0/user14/CSS/style.css
@@ -1,21 +1,17 @@
-table {
-	font-family: "Marker Felt", "Comic Sans MS", fantasy;
-	color: #003366;
-	margin-left: auto;
-	margin-right: auto;
-	text-align: left;
-	border-collapse: collapse;
-	cellspacing: 0px;
+table{
+margin-right: auto;
+text-align: left;
+border-collapse: collapse;
+border-spacing: 0px;
+border-spacing: 0px;
 }
 
 tr {
-	border: 1px solid #ffffff;
-	text-align: center;
-	background-color:#9FB6CD; 
+color: #ffffff;
+background-color: blueviolet;
 }
 
-th {
-	text-align: center;
-	color: #ffffff;
-	background-color: #003366;
+body{
+background-image: url("../images/NFL-Team-Logos.jpeg"); 
+background-color: rgb(126, 110, 56); 
 }
diff --git a/Version3.0/user14/images/Kendrick-Lamar-Good-Kid-Maad-City1-1024x1024.jpeg b/Version3.0/user14/images/Kendrick-Lamar-Good-Kid-Maad-City1-1024x1024.jpeg
diff --git a/Version3.0/user14/images/TCD.jpg b/Version3.0/user14/images/TCD.jpg
diff --git a/Version3.0/user14/images/blonde.jpeg b/Version3.0/user14/images/blonde.jpeg
diff --git a/Version3.0/user14/images/blonded.jpeg b/Version3.0/user14/images/blonded.jpeg
diff --git a/Version3.0/user14/images/gkkmc.jpg b/Version3.0/user14/images/gkkmc.jpg
diff --git a/Version3.0/user14/images/gkmc.jpg b/Version3.0/user14/images/gkmc.jpg
diff --git a/Version3.0/user14/images/graduation.jpeg b/Version3.0/user14/images/graduation.jpeg
diff --git a/Version3.0/user14/images/graduuation.jpeg b/Version3.0/user14/images/graduuation.jpeg
diff --git a/Version3.0/user14/images/topab.jpeg b/Version3.0/user14/images/topab.jpeg
diff --git a/Version3.0/user14/images/tpab.jpeg b/Version3.0/user14/images/tpab.jpeg