From 2dcfb4822d3bc39a499c1e74b44e21154748a058 Mon Sep 17 00:00:00 2001
From: Amatullah Brown <amatullahbrown@Amatullahs-MBP.fios-router.home>
Date: Thu, 19 Nov 2020 15:58:56 -0500
Subject: [PATCH 1/3] need to update for mobile first

---
 contact.html | 58 ++++++++++++++++++++++++++++++++++++++++
 resume.html  | 75 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 133 insertions(+)
 create mode 100644 contact.html
 create mode 100644 resume.html
diff --git a/contact.html b/contact.html
new file mode 100644
index 0000000..d0cd517
--- /dev/null
+++ b/contact.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Contact Me</title>
+    <style>
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+        }
+        @media (max-width: 610;) {
+            td {
+                float: left;
+                display: inline-block;
+            }
+            td:nth-child(2) {
+                clear: both; /*this isnt working...guess i need to watch a video*/
+            }
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <a href="resume.html">Home</a>
+    </header>
+    <h3>Contact Me</h3>
+    <form>
+        <table>
+            <tr>
+                <td>First Name <input id="firstName" type="text" maxlength="30"></td>
+                <td class="second">Last Name <input id="lastName" type="text" maxlength="30"><br></td>
+            </tr>
+            <tr>
+                <td>Phone Number <input id="phoneNum" type="text"></td>
+                <td>Phone Type <input id="landline" type="radio" value="landline"><label for="landline">Landline</label>
+                    <input id="mobile" type="radio" value="mobile">
+                    <label for="mobile">Mobile</label></td>
+            </tr>
+            <tr>
+                <td>Email <input id="email" type="text" maxlength="50"></td>
+                <td>
+                    <label for="method">How did you hear about us?</label> 
+                    <select id="method" name="method">
+                        <option value="searchEngine">Search Engine</option>
+                        <option value="socialMedia">Social Media</option>
+                        <option value="recruiter">Recruiter</option>
+                    </select>
+                </td>
+            </tr>
+        </table>
+        <input type="submit">
+        
+        
+        
+        
+    </form>
+</body>
+</html>
\ No newline at end of file
diff --git a/resume.html b/resume.html
new file mode 100644
index 0000000..8ab3509
--- /dev/null
+++ b/resume.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Amatullah Brown's Resume</title>
+    <style>
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+            width: 95%;
+            margin: 0 15% 0 2%;
+        }
+        img {
+            width: 200px;
+            height:200px;
+            border: solid white 1px;
+            border-radius: 50%;
+        }
+        #profile {
+            position: absolute;
+            top: 0px;
+            right: 15px;
+        }
+        #objectivep {
+            margin: 0 15% 0 0;
+        }
+        @media (max-width: 1000px;) { /*adjust to a mobile first approach*/
+            body {
+                width: 50%;
+                /* margin: 0 25% 0 0; */
+            }
+        }
+        /* @media (max-width: 960px;) {
+            #objectivep {
+                margin: 0 35% 0 0;
+            }
+        }
+        @media (max-width: 700px;) {
+            #objectivep {
+                margin: 0 90% 0 0;
+            }
+        } */
+        /*@media (max-width: 510px;) {
+            #objectivep {
+                margin: 0 80% 0 0;
+            }
+        }*/
+        /* idk why these aren't working...i guess watch more videos? */
+    </style>
+</head>
+<body>
+    <h1>Amatullah Brown</h1>
+    <h4>Objective</h4>
+    <p id="objectivep">I am a linguist by training, fluent in French and English and conversational in Arabic. I am currently studying to become a Full Stack Web Developer. I am interested in combining my interest in languages and computer science and potentially working in natural language processing.</p>
+    <h4>Work Experience</h4>
+    <ul>
+        <li>Project Manager, Overbrook Center</li>
+        <li>Canvasser, For Our Future PA</li>
+        <li>Student Academic Mentor, Swarthmore College</li>
+    </ul>
+    <h4>Education</h4>
+    <ul>
+        <li>Bachelors of Arts, Linguistics <i>Swarthmore College</i></li>
+    </ul>
+    <h4>Skills</h4>
+    <ul>
+        <li>HTML</li>
+        <li>CSS</li>
+        <li>JavaScript</li>
+    </ul>
+    <a href="https://www.linkedin.com/in/amatullahb/">Linkedin Profile</a><br>
+    <img id="profile" src="https://media-exp1.licdn.com/dms/image/C4D03AQFkl-SiehaSNg/profile-displayphoto-shrink_400_400/0?e=1611187200&v=beta&t=5RKxvgkrBymQDkVKhznaYJNJ6JSLJ0BKiDOfg1Lgwzg" alt="Image of Amatullah Brown" border: 50%>
+    <a href="contact.html">Contact Me</a>
+</body>
+</html>
\ No newline at end of file

From b8297971f183bbd74a7759f62e784288a60920f9 Mon Sep 17 00:00:00 2001
From: Amatullah Brown <amatullahbrown@Amatullahs-MBP.fios-router.home>
Date: Mon, 23 Nov 2020 00:22:48 -0500
Subject: [PATCH 2/3] still working on adaptive css

---
 contact.html | 113 ++++++++++++++++++++++++++++++++++++++++++++-------
 resume.html  |  23 ++++++++---
 2 files changed, 115 insertions(+), 21 deletions(-)

diff --git a/contact.html b/contact.html
index d0cd517..d1c1b73 100644
--- a/contact.html
+++ b/contact.html
@@ -8,37 +8,103 @@
         body {
             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
         }
-        @media (max-width: 610;) {
-            td {
+        
+        @media (max-width: 750) {
+            /* table{
+                display:block;
+                float:left;
+                clear:both;
+            }
+            tr,td{
+                display: block;
+
+                }
+            td{
+                width: 50%;
+                float: left;
+                }
+            td.second{
+                width:100%;
+                float:left;
+                clear:both
+                } */
+            /* td {
                 float: left;
                 display: inline-block;
+            } */
+            table tr th:nth-child(2),
+            .second {
+                clear: both;
+                visibility: hidden;
             }
-            td:nth-child(2) {
-                clear: both; /*this isnt working...guess i need to watch a video*/
-            }
-        }
+        } /*this isnt working for some reason*/
     </style>
 </head>
 <body>
     <header>
         <a href="resume.html">Home</a>
     </header>
-    <h3>Contact Me</h3>
-    <form>
+    
+    <form action="contact.html" method="post">
+        <h3>Contact Me</h3>
+        <!-- <label for="firstName">First Name</label>
+        <input id="firstName" type="text" maxlength="30">
+        <label for="lastName">Last Name</label>
+        <input id="lastName" type="text" maxlength="30"><br>
+        <label for="phoneNum" minlength="10">Phone Number</label>
+        <input id="phoneNum" type="text">
+        Phone Type 
+        <input id="landline" type="radio" value="landline">
+        <label for="landline">Landline</label>
+        <input id="mobile" type="radio" value="mobile">
+        <label for="mobile">Mobile</label><br>
+        <label for="email">Email</label>
+        <input id="email" type="email" maxlength="50">
+        <label for="method">How did you hear about us?</label> 
+        <select id="method" name="method">
+            <option value="searchEngine">Search Engine</option>
+            <option value="socialMedia">Social Media</option>
+            <option value="recruiter">Recruiter</option>
+        </select><br>
+        Interest for Contacting 
+        <input type="checkbox" id="HTML" name="HTML" value="HTML">
+        <label for="HTML">HTML</label>
+        <input type="checkbox" id="CSS" name="CSS" value="CSS">
+        <label for="CSS">CSS</label>
+        <input type="checkbox" id="JavaScript" name="JavaScript" value="JavaScript">
+        <label for="JavaScript">JavaScript</label><br>
+        <label for="message">Message</label>
+        <input id="message" type="text" maxlength="250"><br> -->
         <table>
             <tr>
-                <td>First Name <input id="firstName" type="text" maxlength="30"></td>
-                <td class="second">Last Name <input id="lastName" type="text" maxlength="30"><br></td>
+                <td>
+                    <label for="firstName">First Name</label>
+                    <input id="firstName" type="text" maxlength="30">
+                </td>
+                <td class="second">
+                    <label for="lastName">Last Name</label>
+                    <input id="lastName" type="text" maxlength="30">
+                </td>
             </tr>
             <tr>
-                <td>Phone Number <input id="phoneNum" type="text"></td>
-                <td>Phone Type <input id="landline" type="radio" value="landline"><label for="landline">Landline</label>
+                <td>
+                    <label for="phoneNum" minlength="10">Phone Number</label>
+                    <input id="phoneNum" type="text">
+                </td>
+                <td class="second">
+                    Phone Type 
+                    <input id="landline" type="radio" value="landline">
+                    <label for="landline">Landline</label>
                     <input id="mobile" type="radio" value="mobile">
-                    <label for="mobile">Mobile</label></td>
+                    <label for="mobile">Mobile</label>
+                </td>
             </tr>
             <tr>
-                <td>Email <input id="email" type="text" maxlength="50"></td>
                 <td>
+                    <label for="email">Email</label>
+                    <input id="email" type="email" maxlength="50">
+                </td>
+                <td class="second">
                     <label for="method">How did you hear about us?</label> 
                     <select id="method" name="method">
                         <option value="searchEngine">Search Engine</option>
@@ -47,9 +113,26 @@ <h3>Contact Me</h3>
                     </select>
                 </td>
             </tr>
+            <tr>
+                <td>
+                    Interest for Contacting 
+                    <input type="checkbox" id="HTML" name="HTML" value="HTML">
+                    <label for="HTML">HTML</label>
+                    <input type="checkbox" id="CSS" name="CSS" value="CSS">
+                    <label for="CSS">CSS</label>
+                    <input type="checkbox" id="JavaScript" name="JavaScript" value="JavaScript">
+                    <label for="JavaScript">JavaScript</label>
+                </td>
+            </tr>
+            <tr>
+                <td class="second">
+                    <label for="message">Message</label>
+                    <textarea id="message" name="message" rows="3" cols="30" maxlength="250"></textarea>
+                </td>
+            </tr>
         </table>
         <input type="submit">
-        
+        <!-- <button type="submit">Submit</button> -->
         
         
         
diff --git a/resume.html b/resume.html
index 8ab3509..ebbca81 100644
--- a/resume.html
+++ b/resume.html
@@ -7,7 +7,7 @@
     <style>
         body {
             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-            width: 95%;
+            width: 96%;
             margin: 0 15% 0 2%;
         }
         img {
@@ -24,17 +24,28 @@
         #objectivep {
             margin: 0 15% 0 0;
         }
-        @media (max-width: 1000px;) { /*adjust to a mobile first approach*/
+        @media (max-width: 1135) {
+            #objectivep {
+                margin: 0 25% 0 0;
+                width: 60%;
+            }
+        }
+        @media (max-width: 650px) { /*adjust to a mobile first approach*/
             body {
-                width: 50%;
-                /* margin: 0 25% 0 0; */
+                width: 65%;
+                margin: 0 25% 0 2%;
+            }
+        }
+        @media (min-width: 650px) and (max-width: 820px) {
+            body {
+                width: 80%;
             }
         }
         /* @media (max-width: 960px;) {
             #objectivep {
                 margin: 0 35% 0 0;
             }
-        }
+        } 1135
         @media (max-width: 700px;) {
             #objectivep {
                 margin: 0 90% 0 0;
@@ -60,7 +71,7 @@ <h4>Work Experience</h4>
     </ul>
     <h4>Education</h4>
     <ul>
-        <li>Bachelors of Arts, Linguistics <i>Swarthmore College</i></li>
+        <li>Bachelors of Arts, Linguistics and French, <i>Swarthmore College</i></li>
     </ul>
     <h4>Skills</h4>
     <ul>

From 82b479128e6735987a80257c758314d0d65e7f7f Mon Sep 17 00:00:00 2001
From: Amatullah Brown <amatullahbrown@Amatullahs-MBP.fios-router.home>
Date: Mon, 23 Nov 2020 16:58:28 -0500
Subject: [PATCH 3/3] not sure why submit button moves

---
 contact.html | 163 ++++++++++++++++-----------------------------------
 1 file changed, 49 insertions(+), 114 deletions(-)

diff --git a/contact.html b/contact.html
index d1c1b73..50c0efe 100644
--- a/contact.html
+++ b/contact.html
@@ -8,36 +8,26 @@
         body {
             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
         }
-        
-        @media (max-width: 750) {
-            /* table{
-                display:block;
-                float:left;
-                clear:both;
-            }
-            tr,td{
-                display: block;
-
-                }
-            td{
-                width: 50%;
-                float: left;
-                }
-            td.second{
-                width:100%;
-                float:left;
-                clear:both
-                } */
-            /* td {
+        /* @media (min-width: 750px) {
+            .first {
+                width: 40%;
                 float: left;
-                display: inline-block;
-            } */
-            table tr th:nth-child(2),
+            }
             .second {
-                clear: both;
-                visibility: hidden;
+                width: 60%;
+                float: right;
             }
-        } /*this isnt working for some reason*/
+        }
+        @media (min-width: 800px) {
+            .first {
+                width: 300px;
+                float: left;
+            }
+            .second {
+                width: 300px%;
+                float: right;
+            } causes the submit button to fall between the two floats, not sure how to fix
+        } */
     </style>
 </head>
 <body>
@@ -47,95 +37,40 @@
     
     <form action="contact.html" method="post">
         <h3>Contact Me</h3>
-        <!-- <label for="firstName">First Name</label>
-        <input id="firstName" type="text" maxlength="30">
-        <label for="lastName">Last Name</label>
-        <input id="lastName" type="text" maxlength="30"><br>
-        <label for="phoneNum" minlength="10">Phone Number</label>
-        <input id="phoneNum" type="text">
-        Phone Type 
-        <input id="landline" type="radio" value="landline">
-        <label for="landline">Landline</label>
-        <input id="mobile" type="radio" value="mobile">
-        <label for="mobile">Mobile</label><br>
-        <label for="email">Email</label>
-        <input id="email" type="email" maxlength="50">
-        <label for="method">How did you hear about us?</label> 
-        <select id="method" name="method">
-            <option value="searchEngine">Search Engine</option>
-            <option value="socialMedia">Social Media</option>
-            <option value="recruiter">Recruiter</option>
-        </select><br>
-        Interest for Contacting 
-        <input type="checkbox" id="HTML" name="HTML" value="HTML">
-        <label for="HTML">HTML</label>
-        <input type="checkbox" id="CSS" name="CSS" value="CSS">
-        <label for="CSS">CSS</label>
-        <input type="checkbox" id="JavaScript" name="JavaScript" value="JavaScript">
-        <label for="JavaScript">JavaScript</label><br>
-        <label for="message">Message</label>
-        <input id="message" type="text" maxlength="250"><br> -->
-        <table>
-            <tr>
-                <td>
-                    <label for="firstName">First Name</label>
-                    <input id="firstName" type="text" maxlength="30">
-                </td>
-                <td class="second">
-                    <label for="lastName">Last Name</label>
-                    <input id="lastName" type="text" maxlength="30">
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <label for="phoneNum" minlength="10">Phone Number</label>
-                    <input id="phoneNum" type="text">
-                </td>
-                <td class="second">
-                    Phone Type 
-                    <input id="landline" type="radio" value="landline">
-                    <label for="landline">Landline</label>
-                    <input id="mobile" type="radio" value="mobile">
-                    <label for="mobile">Mobile</label>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    <label for="email">Email</label>
-                    <input id="email" type="email" maxlength="50">
-                </td>
-                <td class="second">
-                    <label for="method">How did you hear about us?</label> 
-                    <select id="method" name="method">
-                        <option value="searchEngine">Search Engine</option>
-                        <option value="socialMedia">Social Media</option>
-                        <option value="recruiter">Recruiter</option>
-                    </select>
-                </td>
-            </tr>
-            <tr>
-                <td>
-                    Interest for Contacting 
-                    <input type="checkbox" id="HTML" name="HTML" value="HTML">
-                    <label for="HTML">HTML</label>
-                    <input type="checkbox" id="CSS" name="CSS" value="CSS">
-                    <label for="CSS">CSS</label>
-                    <input type="checkbox" id="JavaScript" name="JavaScript" value="JavaScript">
-                    <label for="JavaScript">JavaScript</label>
-                </td>
-            </tr>
-            <tr>
-                <td class="second">
-                    <label for="message">Message</label>
-                    <textarea id="message" name="message" rows="3" cols="30" maxlength="250"></textarea>
-                </td>
-            </tr>
-        </table>
+        <div class="first">
+            <label for="firstName">First Name</label>
+            <input id="firstName" type="text" maxlength="30"><br><br>
+            <label for="lastName">Last Name</label>
+            <input id="lastName" type="text" maxlength="30"><br><br>
+            <label for="phoneNum" minlength="10">Phone Number</label>
+            <input id="phoneNum" type="text"><br><br>
+            <label>Phone Type</label> 
+            <input id="landline" type="radio" value="landline" name="phone_type">
+            <label for="landline">Landline</label>
+            <input id="mobile" type="radio" value="mobile" name="phone_type">
+            <label for="mobile">Mobile</label><br><br>
+            <label for="email">Email</label>
+            <input id="email" type="email" maxlength="50"><br><br>
+        </div>
+        <div class="second">
+            <label for="method">How did you hear about us?</label> 
+            <select id="method" name="method">
+                <option value="searchEngine">Search Engine</option>
+                <option value="socialMedia">Social Media</option>
+                <option value="recruiter">Recruiter</option>
+            </select><br><br>
+            <label>Interest for Contacting</label>
+            <input type="checkbox" id="HTML" name="interest" value="HTML">
+            <label for="HTML">HTML</label>
+            <input type="checkbox" id="CSS" name="interest" value="CSS">
+            <label for="CSS">CSS</label>
+            <input type="checkbox" id="JavaScript" name="interest" value="JavaScript">
+            <label for="JavaScript">JavaScript</label><br><br>
+            <label for="message">Message</label><br>
+            <textarea id="message" name="message" rows="3" cols="30" maxlength="250"></textarea><br><br>
+        </div>
         <input type="submit">
         <!-- <button type="submit">Submit</button> -->
-        
-        
-        
     </form>
 </body>
 </html>
\ No newline at end of file

First Name	Last Name
Phone Number	Phone Type Landline + + Mobile
Email	+ How did you hear about us? + +
First Name	Last Name	+ First Name + +	+ Last Name + +
Phone Number	Phone Type Landline +	+ Phone Number + +	+ Phone Type + + Landline - Mobile
Email	+ Email + +	How did you hear about us?
+ Interest for Contacting + + HTML + + CSS + + JavaScript +
+ Message + +
- First Name - -	- Last Name - -
- Phone Number - -	- Phone Type - - Landline - - Mobile -
- Email - -	- How did you hear about us? - -
- Interest for Contacting - - HTML - - CSS - - JavaScript -
- Message - -