From dc59f78f00677458ac55833f1b0c7973585af0e8 Mon Sep 17 00:00:00 2001
From: Paulette Flores <pauletteflores8@gmail.com>
Date: Sat, 25 Mar 2023 18:54:27 -0400
Subject: [PATCH] starter pete thinkful

---
 index.html | 50 +++++++++++++++++++++++++++++++-------------------
 style.css  | 35 +++++++++++++++++++++++++++++++++--
 2 files changed, 64 insertions(+), 21 deletions(-)

diff --git a/index.html b/index.html
index ec3ce73..e49b88a 100644
--- a/index.html
+++ b/index.html
@@ -28,25 +28,29 @@ <h1>Pete Thinkful | Artist</h1>
         <article id="about">
           <h2>About</h2>
           <section>
-            <h3>Hi! I'm Pete Thinkful</h3>
-            <div>
+            <div class="flexgroup">
+             <div class="flexitem">
               <img
                 class="image-circle"
                 src="images/pete-thinkful.png"
                 alt="Pete Thinkful"
               />
+             </div>
+             <div class="flexitemx">
+              <h3>Hi! I'm Pete Thinkful</h3>
+              <p>I'm an artist living in Denver, Colorado.</p>
+              <p>As an artist, I'm interested in:</p>
+              <ul>
+                <li>Producing abstract art</li>
+                <li>Creating street graffiti art</li>
+                <li>Connecting with like-minded artists</li>
+              </ul>
+              <p>
+                Please feel free to take a look at my website and feel free to
+               <a href="#contact">contact me</a>.
+              </p>
+             </div>
             </div>
-            <p>I'm an artist living in Denver, Colorado.</p>
-            <p>As an artist, I'm interested in:</p>
-            <ul>
-              <li>Producing abstract art</li>
-              <li>Creating street graffiti art</li>
-              <li>Connecting with like-minded artists</li>
-            </ul>
-            <p>
-              Please feel free to take a look at my website and feel free to
-              <a href="#contact">contact me</a>.
-            </p>
           </section>
 
           <section>
@@ -69,7 +73,9 @@ <h3>Pete's Background</h3>
         <!-- Portfolio section -->
         <article id="portfolio">
           <h2>Portfolio</h2>
-          <section>
+          <div class="flexgroup">
+           <div class="flexitem">
+           <section>
             <h3>Abstract Red</h3>
             <div>
               <img src="images/abstract-red.png" alt="Abstract Red" />
@@ -78,9 +84,11 @@ <h3>Abstract Red</h3>
               Vaporware wayfarers heirloom neutra disrupt. Activated charcoal
               waistcoat scenester hell of.
             </p>
-          </section>
+           </section>
+           </div>
 
-          <section>
+           <div class="flexitem">
+           <section>
             <h3>Spiral Zany</h3>
             <div>
               <img src="images/spiral-zany.png" alt="Spiral Zany" />
@@ -89,9 +97,11 @@ <h3>Spiral Zany</h3>
               Sriracha portland taxidermy cronut messenger bag, vegan
               distillery. Vaporware kickstarter air plant mumblecore food truck.
             </p>
-          </section>
+           </section>
+           </div>
 
-          <section>
+           <div class="flexitem">   
+           <section>
             <h3>Melted Rainbow</h3>
             <div>
               <img src="images/melted-rainbow.png" alt="Melted Rainbow" />
@@ -100,7 +110,9 @@ <h3>Melted Rainbow</h3>
               Edison bulb single-origin coffee snackwave, actually ennui
               locavore shabby chic forage.
             </p>
-          </section>
+           </section>
+           </div>
+          </div>
         </article>
 
         <hr />
diff --git a/style.css b/style.css
index 852500d..f575d2d 100644
--- a/style.css
+++ b/style.css
@@ -18,7 +18,14 @@ h3 {
 
 /* Header */
 header {
+  display: flex;
   text-align: center;
+  flex-direction: row;
+  justify-content: center;
+}
+
+nav {
+  margin-top: 35px;
 }
 
 /* Containers */
@@ -52,7 +59,7 @@ a:hover {
 }
 
 nav a {
-  padding-left: 20px;
+  padding-left: 40px;
 }
 
 /* Images */
@@ -64,7 +71,7 @@ img {
 
 .image-circle {
   border: 2px solid #003049;
-  border-radius: 50%;
+  border-radius: 50%; 
 }
 
 /* Footer */
@@ -76,3 +83,27 @@ footer {
 hr {
   border: 1px solid black;
 }
+
+.flexgroup {
+  display: flex;  
+  flex-direction: row;
+  justify-content: space-between;
+ }
+
+.flexitem {
+  flex: 1;  
+  margin: 5px;
+}
+
+.flexitemx {
+   flex: 1;
+   text-align: left;
+}
+
+article div section p {
+  font-size: 14px;
+}
+
+ul {
+  text-align: left;
+}