updated webpage

hmh49 · Nov 12, 2018 · fb82930 · fb82930
1 parent 93bae90
commit fb82930
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 13 deletions.
diff --git a/boxes.css b/boxes.css
@@ -0,0 +1,17 @@
+h1, p {
+  background-color: #DDE0E3;    /* Light gray */
+}
+
+em, strong {
+  background-color: #B2D6FF;    /* Light blue */
+  display: inline;
+}
+h1 {
+  padding: 50px;
+}
+p {
+  padding-top: 20px;
+  padding-bottom: 20px;
+  padding-left: 10px;
+  padding-right: 10px;
+}
diff --git a/boxes.html b/boxes.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang='en'>
+    <head>
+        <meta charset='UTF-8'/>
+        <title>Boxes Are Easy!</title>
+        <link rel='stylesheet' href='boxes.css'/>
+    </head>
+    <body>
+        <h1>Headings Are Block Elements</h1>
+
+        <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>
+    </body>
+</html>
diff --git a/index.css b/index.css
@@ -4,30 +4,32 @@ color: Crimson;
 font-family: arial, helvetica, sans-serif;
 }
 /* hmh 2018-11-6 I've changed styles for h1-h6 and changed the background colors for a more appealing look */
+/* hmh 2018-11-12 I've added padding and margins to my headings and paragraphs and centered my title */
 
 ul {
     list-style-type: circle; color: Crimson;
 }
 h1 {
-    background-color: Lightgray; color: Darkred;
+    background-color: Lightgray; color: Darkred; padding: 50px; margin: 50px; text-align: center; border: 1px solid #5D6063
 }
+
 h2 {
-    background-color: Lightgray; color: Darkred;
+    background-color: Lightgray; color: Darkred; padding: 20px; border: 1px solid #5D6063
 }
 h3  {
-    background-color: Lightgray; color: Darkred
+    background-color: Lightgray; color: Darkred; border: 1px solid #5D6063
 }
 h4  {
-    background-color: Lightgray; color: Darkred
+    background-color: Lightgray; color: Darkred; border: 1px solid #5D6063
 }
 h5  {
-    background-color: Lightgray; color: Darkred
+    background-color: Lightgray; color: Darkred; border: 1px solid #5D6063
 }
 h6  {
-    background-color: Lightgray; color: Darkred
+    background-color: Lightgray; color: Darkred; border: 1px solid #5D6063
 }
 p {
-    color: Crimson;
+    color: Crimson; 
 
 }
 
@@ -41,22 +43,22 @@ a   {
     color: black; 
 }
 .obj {
-    color: black;
+    color: black; padding: 0px; text-align: center; margin: 0px;
 }
 .ed {
-    color: black;
+    color: black; padding: 0px;text-align: center; margin: 0px;
 }
 .ach {
-    color: black;
+    color: black;padding: 0px;text-align: center; margin: 0px;
 }
 .empl {
-    color: black
+    color: black; padding: 0px;text-align: center; margin: 0px;
 }
 .lang {
-    color: black;
+    color: black; padding: 0px;text-align: center; margin: 0px;
 }
 .skills {
-    color: black;
+    color: black; padding: 0px;text-align: center; margin: 0px;
 }
 #puppy {
     width: 200px; height: 150px; margin: auto; display: block;

diff --git a/index.html b/index.html
@@ -9,6 +9,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     </head>
 <!-- hmh 2018-11-6 I have added a header and some sections as well as the link to my resume -->
+<!-- hmh 2018-11-12 I have added padding to my headings and class and id tags to my photos -->
     <body>
         <header>
             <h1 class="title"><strong>Hannah's Webpage</strong></h1>

diff --git a/resume.html b/resume.html
@@ -8,6 +8,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     </head>
     <!-- hmh 2018-11-6 I have created this entire resume using articles, headers, sections, and a footer -->
+    <!-- hmh 2018-11-12 I have changed the headings to be centered using padding and margin settings -->
     <body>
         <article>
             Hannah Hostetler