Ada-C14 · Blaine206 · Oct 24, 2020 · Oct 24, 2020 · Oct 26, 2020 · Oct 26, 2020
diff --git a/.github/PULL_REQUEST_TEMPLATE b/.github/PULL_REQUEST_TEMPLATE
@@ -4,10 +4,10 @@ Congratulations! You're submitting your assignment!
 ## Comprehension Questions
 Question | Answer
 :------------- | :-------------
-Did you have to resolve any issues when running the HTML Validator? If so, what were they? |
-Why is it important to consider and use semantic HTML? |
-How did you decide to structure your CSS? |
-What was the most challenging piece of this assignment? |
-Describe one area that you gained more clarity on when completing this assignment |
+Did you have to resolve any issues when running the HTML Validator? If so, what were they? | I had to place the language preference in the opening html element, correct h1's place below the heading, and remove hx's from ul's .  
+Why is it important to consider and use semantic HTML? | It helps organize, navigate, and make information clearer for those that might work with or look at what's happening beneath.  
+How did you decide to structure your CSS? | I decided it based on frustration, after attempting flex-box and burning out, I decided to start from scratch and keep things as clean and malleable as possible.
+What was the most challenging piece of this assignment? | Deciding how to organize, and understanding flexbox and grid.  Definately need more hands on practice/live-code witnessing.  Also, remembering the heirarchy and inline elements.
+Describe one area that you gained more clarity on when completing this assignment |. Sizing, inline element changing, display, some design components, would love to learn more.
 **Optional** |
-Did you deploy to GitHub Pages? If so, what is the URL to your website? |
+Did you deploy to GitHub Pages? If so, what is the URL to your website? | Not yet, but I hope to soon.
diff --git a/about.html b/about.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="description" content="Blaine's Portfolio using HTML and CSS">
+    <title>Blaine's Portfolio</title>
+    <link rel="stylesheet" type="text/css" href="style.css">
+  </head>
+  <body class="about">  
+    <header>
+      <h1>About Atsbeha</h1>
+      <nav>
+        <ul>
+          <li><a href="index.html">Home</a></li>
+          <li><a href="portfolio.html">Portfolio</a></li>
+          <li><a href="code-journal.html">Code</a></li>
+          <li><a href="hobby-blog.html">Blog</a></li>
+        </ul>
+      </nav>
+    </header>
+
+    <main>
+      <article>
+        <h2>In a nutshell...</h2>
+        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Curabitur vitae nunc sed velit dignissim sodales. Orci phasellus egestas tellus rutrum tellus pellentesque. Ornare quam viverra orci sagittis eu volutpat odio facilisis mauris. Enim ut tellus elementum sagittis. Ut sem nulla pharetra diam sit amet. Mattis nunc sed blandit libero volutpat. Eu turpis egestas pretium aenean pharetra magna. Lectus arcu bibendum at varius vel pharetra vel. Aliquam nulla facilisi cras fermentum odio eu feugiat. Volutpat est velit egestas dui id.</p>
+
+        <p> Dolor sit amet consectetur adipiscing elit. Blandit massa enim nec dui nunc mattis. Molestie a iaculis at erat pellentesque adipiscing commodo. Ac tortor vitae purus faucibus. Sem integer vitae justo eget magna fermentum iaculis. Sit amet justo donec enim diam vulputate ut pharetra sit. Sagittis purus sit amet volutpat. Bibendum arcu vitae elementum curabitur vitae nunc. Mattis vulputate enim nulla aliquet porttitor lacus luctus accumsan tortor. Vitae congue mauris rhoncus aenean vel elit scelerisque.</p>
+      </article>
+    </main>
+
+    <footer>
+      <h4> &copy; 2020 </h4>
+      <nav>
+        <ul>
+          <li><a href="index.html">Home</a></li>
+          <li><a href="portfolio.html">Portfolio</a></li>
+          <li><a href="code-journal.html">Code</a></li>
+          <li><a href="hobby-blog.html">Blog</a></li>
+        </ul>
+      </nav>
+    </footer>
+
+  </body>
+</html>
diff --git a/code-journal.html b/code-journal.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="description" content="Blaine's Portfolio using HTML and CSS">
+    <title>Blaine's Portfolio</title>
+    <link rel="stylesheet" type="text/css" href="style.css">
+  </head>
+  <body class=code>
+    <header>
+      <h1>Code Atsbeha</h1>
+      <!-- <nav>
+        <ul>
+          <li><a href="index.html">Home</a></li>
+          <li><a href="about.html">About</a></li>
+          <li><a href="portfolio.html">Portfolio</a></li>
+          <li><a href="hobby-blog.html">Blog</a></li>
+        </ul>
+      </nav> -->
+    </header>
+
+    <!-- <main>
+      <article>
+        <h2>Projects</h2>
+        <ul>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+        </ul>
+      </article>
+      <article>
+        <h2> CS Fun - Algorithms  </h2>
+        <ul>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+          <li></li>
+        </ul>
+      </article>
+    </main> -->
+
+    <footer>
+      <h4>  &copy; 2020 </h4>
+      <nav>
+        <ul>
+          <li><a href="index.html">Home</a></li>
+          <li><a href="about.html">About</a></li>
+          <li><a href="portfolio.html">Portfolio</a></li>
+          <li><a href="hobby-blog.html">Blog</a></li>
+        </ul>
+      </nav>
+    </footer>
+
+  </body>
+</html>
diff --git a/hobby-blog.html b/hobby-blog.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="description" content="Blaine's Portfolio using HTML and CSS">
+    <title>Blaine's Portfolio</title>
+    <link rel="stylesheet" type="text/css" href="style.css">
+  </head>
+  <body class="blog">
+    <header>
+      <h1>Blog Atsbeha</h1>
+      <nav>
+        <ul>
+          <li><a href="index.html">Home</a></li>
+          <li><a href="about.html">About</a></li>
+          <li><a href="portfolio.html">Portfolio</a></li>
+          <li><a href="code-journal.html">Code</a></li>
+        </ul>
+      </nav>
+    </header>
+
+  <main>
+    <h2>A few of my favorite things:</h2>
+    <div class="row">
+      <div class="column">
+        <img class="resize" src="images/babies.jpeg" alt="Two women on paddle boards, one doing a headstand.">
+        <img class="resize" src="images/mandela-prison-pano.jpeg" alt="Four young adults on a safari truck.">
+        <img class="resize" src="images/ny-lake.jpeg" alt="Man hugging woman on motorcycle, both laughing.">
+        <img class="resize" src="images/womans-march.jpeg" alt="Two students, one instructor standing in front of cooking ingredients.">
+      </div>
+      <div class="column">
+        <img class="resize" src="images/hawaii-paddle.jpeg" alt="Two women on paddle boards, one doing a headstand.">
+        <img class="resize" src="images/tanz-ken-truck.jpeg" alt="Four young adults on a safari truck.">
+        <img class="resize" src="images/ethi-motorbike.jpeg" alt="Man hugging woman on motorcycle, both laughing.">
+        <img class="resize" src="images/south-africa-cook.jpeg" alt="Two students, one instructor standing in front of cooking ingredients.">
+      </div>
+      <div class="column">
+        <img class="resize" src="images/miss-patties-gg.jpeg" alt="Barn with doors slightly open and woman peaking out">
+        <img class="resize" src="images/cheetah-brother.jpeg" alt="Cheetah cat portrait">
+        <img class="resize" src="images/elephant-fam.jpeg" alt="Elephant family eating">
+        <img class="resize" src="images/south-africa-seal.jpeg" alt="Man on dock feeding a seal a fish from his mouth">
+      </div>
+      <div class="column">
+        <img class="resize" src="images/seas-meet.jpeg" alt="Man walking on rocks into the ocean">
+        <img class="resize" src="images/ost.jpeg" alt="Ostrich on a plain">
+        <img class="resize" src="images/port-practice.jpeg" alt="Portrait of a young woman">
+        <img class="resize" src="images/juans.jpeg" alt="Front of a kayak on the water and a partial view of land">
+      </div>
+
+    </div>
+  </main>
+
+    <footer>
+      <h4>  &copy; 2020 </h4>
+      <nav>
+        <ul>
+          <li><a href="index.html">Home</a></li>
+          <li><a href="about.html">About</a></li>
+          <li><a href="portfolio.html">Portfolio</a></li>
+          <li><a href="code-journal.html">Code</a></li>
+        </ul>
+      </nav>
+    </footer>
+
+  </body>
+</html>
+
+
+
diff --git a/images/babies.jpeg b/images/babies.jpeg
diff --git a/images/cheetah-brother.jpeg b/images/cheetah-brother.jpeg
diff --git a/images/elephant-fam.jpeg b/images/elephant-fam.jpeg
diff --git a/images/ethi-motorbike.jpeg b/images/ethi-motorbike.jpeg
diff --git a/images/hawaii-paddle.jpeg b/images/hawaii-paddle.jpeg
diff --git a/images/juans.jpeg b/images/juans.jpeg
diff --git a/images/laugh.jpeg b/images/laugh.jpeg
diff --git a/images/mandela-prison-pano.jpeg b/images/mandela-prison-pano.jpeg
diff --git a/images/miss-patties-gg.jpeg b/images/miss-patties-gg.jpeg
diff --git a/images/ny-lake.jpeg b/images/ny-lake.jpeg
diff --git a/images/ost.jpeg b/images/ost.jpeg
diff --git a/images/painting.jpeg b/images/painting.jpeg
diff --git a/images/port-practice.jpeg b/images/port-practice.jpeg
diff --git a/images/seas-meet.jpeg b/images/seas-meet.jpeg
diff --git a/images/smile.jpeg b/images/smile.jpeg
diff --git a/images/south-africa-cook.jpeg b/images/south-africa-cook.jpeg
diff --git a/images/south-africa-seal.jpeg b/images/south-africa-seal.jpeg
diff --git a/images/tanz-bike.jpeg b/images/tanz-bike.jpeg
diff --git a/images/tanz-ken-truck.jpeg b/images/tanz-ken-truck.jpeg
diff --git a/images/womans-march.jpeg b/images/womans-march.jpeg
diff --git a/index.html b/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="description" content="Blaine's Portfolio using HTML and CSS">
+    <title>Blaine's Portfolio</title>
+    <link rel="stylesheet" type="text/css" href="style.css">
+  </head>
+
+  <body class="home">
+      <header>
+        <h1>Home Atsbeha</h1>
+      </header>
+        <nav>
+          <ul>
+            <li class="item"><a href="about.html">About</a></li>
+            <li class="item"><a href="portfolio.html">Portfolio</a></li>
+            <li class="item"><a href="code-journal.html">Code</a></li>
+            <li class="item"><a href="hobby-blog.html">Blog</a></li>
+          </ul>
+        </nav>
+    <main>
+      <article class="home">
+          <h2>Hello, my name is Blaine!</h2>
+          <p> <span class="highlight">A</span> whole human, always working on development.
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Enim sed faucibus turpis in eu mi bibendum neque egestas. Placerat in egestas erat imperdiet sed euismod nisi. Id leo in vitae turpis massa. Turpis egestas sed tempus urna et. Natoque penatibus et magnis dis parturient montes nascetur ridiculus. Blandit massa enim nec dui nunc mattis. Lectus arcu bibendum at varius vel. Arcu non odio euismod lacinia at quis risus. Neque convallis a cras semper. Morbi tempus iaculis urna id volutpat. Mauris augue neque gravida in. Justo nec ultrices dui sapien. Sit amet cursus sit amet dictum sit amet. Vulputate enim nulla aliquet porttitor lacus luctus accumsan. Id venenatis a condimentum vitae sapien pellentesque. </p>
+      </article>
+    </main>
+
+    <footer>
+      <h5>  &copy; 2020😉 </h5>
+      <nav>
+        <ul>
+          <li><a href="about.html">About</a></li>
+          <li><a href="portfolio.html">Portfolio</a></li>
+          <li><a href="code-journal.html">Code</a></li>
+          <li><a href="hobby-blog.html">Blog</a></li>
+        </ul>
+      </nav>
+    </footer>
+  </body>
+</html>
+
diff --git a/portfolio.html b/portfolio.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="description" content="Blaine's Portfolio using HTML and CSS">
+    <title>Blaine's Portfolio</title>
+    <link rel="stylesheet" type="text/css" href="style.css">
+  </head>
+  <body class="portfolio">
+    <header>
+      <h1>Portfolio Atsbeha</h1>
+      <nav>
+        <ul>
+          <li><a href="index.html">Home</a></li>
+          <li><a href="about.html">About</a></li>
+          <li><a href="code-journal.html">Code</a></li>
+          <li><a href="hobby-blog.html">Blog</a></li>
+        </ul>
+      </nav>
+    </header>
+
+    <main>
+      <article>
+        <h2>Projects</h2>
+        <ul id="project-list">
+          <li><a href="https://github.com/Blaine206/ride-share">Ride Share</a>: Utilizes Hashes, Arrays, CSV files</li>
+          <li><a href="https://github.com/Blaine206/solar-system">Solar System</a>: CLI & Object Oriented Programming</li>
+          <li><a href="https://github.com/Blaine206/grocery-store">Grocery Store</a>: Test-Driven-Development & Object Composition</li>
+          <li><a href="https://github.com/Blaine206/personal-portfolio-site">Personal Portfolio</a>: Html/CSS Webpage Development (W.I.P.)</li>
+        </ul>
+      </article>
+      <article>
+        <h2>CS Fun & Algorithms</h2>
+        <ul id="cs-list">
+          <li><a href="https://github.com/Blaine206/binary-and-decimal">Binary-and-decimal</a>: Method converting binary number to decimal number</li>
+          <li><a href="https://github.com/Blaine206/tdd-exercise">TDD</a>: Test Driven Development</li>
+          <li><a href="https://github.com/Blaine206/array-equals">Array Equals</a>: Method deftermining arrays are of the same length </li>
+          <li><a href="https://github.com/Blaine206/string-manipulation-practice">String Manipulation Practice</a>: Manipulating strings arguments and sorting</li>
+        </ul>
+      </article>
+
+      <section>
+
+      </section>
+    </main>
+
+
+    <footer>
+      <h4>  &copy; 2020 </h4>
+      <nav>
+        <ul>
+          <li><a href="index.html">Home</a></li>
+          <li><a href="about.html">About</a></li>
+          <li><a href="code-journal.html">Code</a></li>
+          <li><a href="hobby-blog.html">Blog</a></li>
+        </ul>
+      </nav>
+    </footer>
+
+  </body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,90 @@
+* {
+  /* background-color: rgb(109, 208, 238); */
+  scroll-margin-block: auto;
+  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+  text-align: center;
+  color: rgb(182, 64, 1);
+  text-shadow: rgb(122, 1, 1) 0px 0px 10px;
+}
+
+body.home {
+  background-image:url('images/smile.jpeg');
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  background-size: cover;
+}
+
+nav {
+  /* text-align: right;
+  background-position: left; */
+  padding: 0em;
+  background-color: rgba(187, 119, 17, 0.493);
+}
+
+header nav ul li {
+  line-height: auto
+}
+
+header h1 {
+  /* background-color: rgba(202, 185, 32, 0.315); */
+  text-align: center;
+  font-size: 30pt;
+  font-stretch: extra-expanded;
+}
+
+ul li { 
+  list-style-type: none;
+  text-align: center;
+}
+
+img.resize {
+  max-width: 45%;
+  max-height: auto;
+}
+
+#row-images li img > * {
+  float: center;
+}
+
+footer nav ul li {
+  line-height: auto
+}
+
+main p, h2 {
+  text-align: center;
+  font-family: Arial, Helvetica, sans-serif;
+  padding: 8px
+  /* float: left; */
+  /* width: 50%; */
+}
+
+/* main * {
+  background-color: rgba(206, 131, 19, 0.315);
+} */
+
+#project-list li {
+  text-align: center;
+  list-style-type: unset;
+}
+
+#cs-list li {
+  text-align: center;
+  list-style-type: unset;
+}
+
+/* Try and impliment flexbox or grid here*/
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0 4px;
+}
+
+.column {
+  flex: 50%;
+  padding: 0 4px;
+}
+
+.column img {
+  margin-top: 8px;
+  vertical-align: middle;
+}