From a4441bd97352577fc734374b1479f322cabfd1da Mon Sep 17 00:00:00 2001
From: Britt Dalby <91482954+brittney-dalby@users.noreply.github.com>
Date: Mon, 1 Nov 2021 11:39:54 -0600
Subject: [PATCH 1/3] set up media queries

---
 index.html      |  8 ++++----
 style/index.css | 26 +++++++++++++++++++++-----
 2 files changed, 25 insertions(+), 9 deletions(-)
diff --git a/index.html b/index.html
index 31ea20890..9e2265328 100644
--- a/index.html
+++ b/index.html
@@ -12,10 +12,10 @@
     <header>
         <h1>Brittney Dalby</h1>
         <nav>
-            <button><a href="index.html">Home</a></button>
-            <button><a href="about.html">About</a></button>
-            <button><a href="projects.html">Projects</a></button>
-            <button><a href="contact.html">Contact</a></button>
+            <a href="index.html">Home</a>
+            <a href="about.html">About</a>
+            <a href="projects.html">Projects</a>
+            <a href="contact.html">Contact</a>
         </nav>
     </header>
     <section class="top-section">
diff --git a/style/index.css b/style/index.css
index ac44f2fb3..9baab6e00 100644
--- a/style/index.css
+++ b/style/index.css
@@ -42,18 +42,27 @@ header{
 }
 h1{
     display:flex;
-    justify-content:flex-start;
+    justify-content:center;
     font-size:5rem;
     text-transform: uppercase;
 }
-nav a{
+nav{
+    width: 40%;
     display:flex;
-    justify-content:flex-end;
+    justify-content:space-between;
+}
+nav a{
+    display:inline-block;
     text-decoration: none;
-    align-items:flex-start;
     color:#4f4f4f;
-    padding:5%; 
+    padding:2%; 
+    width:23%;
+    border:2px solid #4f4f4f;
+    border-radius:10px;
+    text-align:center;
+    letter-spacing:2px;
 }
+
 .top-section{
     display:flex;
     justify-content:center;
@@ -98,3 +107,10 @@ footer a{
     text-decoration:none;
 }
 
+@media (max-width: 800px){
+
+}
+
+@media (max-width: 500px){
+    
+}
\ No newline at end of file

From ddce52952b4e53a432260ef7fc376926d18ce533 Mon Sep 17 00:00:00 2001
From: Britt Dalby <91482954+brittney-dalby@users.noreply.github.com>
Date: Mon, 1 Nov 2021 16:43:04 -0600
Subject: [PATCH 2/3] making site responsive to phone screens

---
 .vscode/settings.json |  3 +++
 index.html            |  2 +-
 style/index.css       | 44 +++++++++++++++++++++++++++++++++++++++----
 3 files changed, 44 insertions(+), 5 deletions(-)
 create mode 100644 .vscode/settings.json

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 000000000..6f3a2913e
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 9e2265328..36abd9d92 100644
--- a/index.html
+++ b/index.html
@@ -9,7 +9,7 @@
 </head>
 
 <body>
-    <header>
+    <header class="top-header">
         <h1>Brittney Dalby</h1>
         <nav>
             <a href="index.html">Home</a>
diff --git a/style/index.css b/style/index.css
index 9baab6e00..2fd586d9d 100644
--- a/style/index.css
+++ b/style/index.css
@@ -47,7 +47,7 @@ h1{
     text-transform: uppercase;
 }
 nav{
-    width: 40%;
+    width: 50%;
     display:flex;
     justify-content:space-between;
 }
@@ -56,11 +56,12 @@ nav a{
     text-decoration: none;
     color:#4f4f4f;
     padding:2%; 
-    width:23%;
+    width:25%;
     border:2px solid #4f4f4f;
     border-radius:10px;
     text-align:center;
-    letter-spacing:2px;
+    letter-spacing:1.5px;
+    font-size:2rem;
 }
 
 .top-section{
@@ -108,9 +109,44 @@ footer a{
 }
 
 @media (max-width: 800px){
+    *{
+        max-width:100%;
+    }
+    h1{
+        font-size:3rem;
+    }
+    nav a{
+        display: flex;
+        justify-content:space-around;
+        width:100%;
+    }
+
 
 }
 
 @media (max-width: 500px){
-    
+    *{
+        max-width:100%;
+    }
+    .top-header{
+        display:flex;
+        flex-direction: column;
+        align-items:center;
+    }
+    h1{
+        font-size:4rem;
+    }
+    nav{
+        display:flex;
+        flex-direction:column;
+        align-content:center;
+    }
+    nav a{
+        margin:2% auto;
+    }
+    .image-button{
+        width:40rem;
+        height:30rem;
+    }
+   
 }
\ No newline at end of file

From 5c0fa2d1f52508d5bb4c768a8dbd796fcfcfd0bf Mon Sep 17 00:00:00 2001
From: Britt Dalby <91482954+brittney-dalby@users.noreply.github.com>
Date: Mon, 1 Nov 2021 17:03:08 -0600
Subject: [PATCH 3/3] got the responsive design for tablet screen size

---
 index.html      | 9 ++++-----
 style/index.css | 3 ++-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index 36abd9d92..0b14a9689 100644
--- a/index.html
+++ b/index.html
@@ -24,8 +24,7 @@ <h1>Brittney Dalby</h1>
             <a href="projects.html">My Projects</a>
         </button>
     </section>
-    <section>
-        <div class="row">
+    <section class="project-section">
             <div class="port-element">
                 <img src="https://picsum.photos/300" alt="random generated image">
                 <p>My Project</p>
@@ -38,8 +37,8 @@ <h1>Brittney Dalby</h1>
                 <img src="https://picsum.photos/300" alt="random generated image">
                 <p>My Project</p>
             </div>
-        </div>
-        <div class="row">
+    
+        
             <div class="port-element">
                 <img src="https://picsum.photos/300" alt="random generated image">
                 <p>My Project</p>
@@ -52,7 +51,7 @@ <h1>Brittney Dalby</h1>
                 <img src="https://picsum.photos/300" alt="random generated image">
                 <p>My Project</p>
             </div>
-        </div>
+        
     </section>
     <footer>
         <button><a href="contact.html">Contact Me</a></button>
diff --git a/style/index.css b/style/index.css
index 2fd586d9d..181a687ca 100644
--- a/style/index.css
+++ b/style/index.css
@@ -83,9 +83,10 @@ nav a{
     height:40rem;
     text-decoration: none;
 }
-.row{
+.project-section{
     display:flex;
     flex-direction:row;
+    flex-wrap:wrap;
     justify-content: space-evenly;
     padding:2rem;
 }
