code-differently · michael-mcmasters · Oct 22, 2020 · Oct 22, 2020 · Oct 22, 2020 · Oct 22, 2020
diff --git a/about.html b/about.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" type="text/css" href="styles.css">
+  <title>Document</title>
+</head>
+
+<body>
+
+  <div id="navbar">
+    <a href='./index.html'>Home</a>
+    <a href="./contact-form.html">Contact</a>
+    <a href="https://www.linkedin.com/in/michael-mcmasters-aa11501b9/">LinkedIn</a>
+    <a href="./about.html">About</a>
+  </div>
+
+  <div class="main-content-wrapper">
+
+    <h1 class="title">About</h1>
+
+    <p>Michael is a man who loves puppies and is looking for a job.
+      This page wasn't a part of the assignment. But he thought an About tab would look great
+      on the navbar.</p>
+    <p>&#169 Here's a copyright symbol.</p>
+
+  </div>
+</body>
+
+</html>
diff --git a/contact-form.html b/contact-form.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" type="text/css" href="styles.css">
+  <title>Document</title>
+</head>
+
+<body>
+  <div id="navbar">
+    <a href='./index.html'>Home</a>
+    <a href="./contact-form.html">Contact</a>
+    <a href="https://www.linkedin.com/in/michael-mcmasters-aa11501b9/">LinkedIn</a>
+    <a href="./about.html">About</a>
+  </div>
+
+  <div class="main-content-wrapper">
+
+    <h1 class="title">Contact</h1>
+
+    <form action="contact-form.html" method="post">
+
+      <label for="name">First Name:</label>
+      <br>
+      <input type=text" id="name" name="first-name" placeholder="First Name">
+      <br>
+      <br>
+
+      <label for="name">Last Name:</label>
+      <br>
+      <input type=text" id="last-name" name="last-name" placeholder="Last Name">
+      <br>
+      <br>
+
+      <label for="name">Phone Number:</label>
+      <br>
+      <input type=text" id="phone-number" name="phone-number" placeholder="(xxx)-xxx-xxxx">
+      <br>
+      <br>
+
+      <label>Contact Type:</label>
+      <br>
+      <input type="radio" id="landline" name="contact-type">
+      <label for="landline">Landline</label>
+      <br>
+      <input type="radio" id="mobile" name="contact-type">
+      <label for="mobile">Mobile</label>
+      <br>
+      <br>
+
+      <label for="name">Email:</label>
+      <br>
+      <input type=text" id="email" name="email" placeholder="xxxx@xxx.com">
+      <br>
+      <br>
+
+      <label for="marketing">How did you hear about us:</label>
+      <br>
+      <select id="marketing" name="marketing">
+        <option value="search-engine">Search Engine</option>
+        <option value="social-media">Social Media</option>
+        <option value="recruiter">Recruiter</option>
+      </select>
+      <br>
+      <br>
+
+      <label>Interest for contacting:</label>
+      <br>
+      <input type="checkbox" id="javascript" value="interest-for-contacting" name="contact-interest">
+      <label for="javascript">Javascript</label><br>
+      <input type="checkbox" id="html" value="interest-for-contacting" name="contact-interest">
+      <label for="html">HTML</label><br>
+      <input type="checkbox" id="css" value="interest-for-contacting" name="contact-interest">
+      <label for="css">CSS</label><br>
+      <input type="checkbox" id="git" value="interest-for-contacting" name="contact-interest">
+      <label for="git">Git</label><br>
+      <input type="checkbox" id="unity" value="interest-for-contacting" name="contact-interest">
+      <label for="unity">Unity</label><br>
+      <input type="checkbox" id="c-sharp" value="interest-for-contacting" name="contact-interest">
+      <label for="c-sharp">C#</label><br>
+      <br>
+
+      <label for="message">Message</label>
+      <br>
+      <textarea id="message" name="user_message" maxlength="250" placeholder="Type message here..."></textarea>
+      <br>
+      <br>
+
+      <button type="submit">Submit</button>
+
+    </form>
+
+  </div>
+</body>
+
+</html>
diff --git a/images/avatar.jpg b/images/avatar.jpg
diff --git a/index.css b/index.css
@@ -0,0 +1,51 @@
+/* This is for CSS that only index.html uses. Global styles are in styles.css */
+
+img {
+  border-radius: 50%;
+  width: 12em;
+  float: right;
+
+  transition: 0.2s;
+}
+
+img:hover {
+  cursor: pointer;
+  opacity: 0.9;
+}
+
+.hover-transition {
+  border-left: 0px solid var(--secondary-text-color);
+  transition: 0.4s;
+}
+
+.hover-transition:hover {
+  background-color: #d88f53;
+  border-left: 6px solid var(--secondary-text-color);
+  padding-left: 10px;
+}
+
+.company {
+  font-weight: bold;
+}
+
+.position {
+  font-style: bold;
+  color: var(--secondary-text-color);
+}
+
+.date {
+  font-style: italic;
+  color: var(--secondary-text-color);
+}
+
+.main-text {
+  display: block;
+}
+
+@media (max-width: 1072px) {
+  img {
+    float: none;
+    display: block;
+    margin: auto;
+  }
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" type="text/css" href="styles.css">
+  <link rel="stylesheet" type="text/css" href="index.css">
+  <title>Resume</title>
+</head>
+
+<body>
+
+  <div id="navbar">
+    <a href='./index.html'>Home</a>
+    <a href="./contact-form.html">Contact</a>
+    <a href="https://www.linkedin.com/in/michael-mcmasters-aa11501b9/">LinkedIn</a>
+    <a href="./about.html">About</a>
+  </div>
+
+
+  <div class="main-content-wrapper">
+
+    <h1 class="title">Michael McMasters</h1>
+
+    <a href="https://www.linkedin.com/in/michael-mcmasters-aa11501b9/"><img src="./images/avatar.jpg"
+        alt="An image of the author"></a>
+
+    <p class="hover-transition">
+      <strong>Objective: </strong>To secure long-term employment in the field of Computer Science. To advance my
+      position and become a full-stack developer; To secure a challenging position that will expand my skills and let
+      me program anything I want.
+    </p>
+
+    <p class="hover-transition">
+      <strong>Education: </strong>High School Degree
+    </p>
+
+    <p class="hover-transition">
+      <strong>Skills: </strong> Javascript &#8729 HTML &#8729 CSS &#8729 Git &#8729 Unity &#8729 C#
+    </p>
+
+    <p class="hover-transition">
+      <strong>Awards: </strong> Employee of the year at My Alarm Center. Invited by Facebook to be an Oculus Start
+      member for indie game developers.
+    </p>
+    <br>
+    <br>
+
+    <div class="hover-transition">
+      <span class="company">Doordash: </span><span class="position">Independent Contractor</span><br>
+      <span class="date">November 2016 - Present</span><br>
+      <span class="main-text">Worked full-time around the Philly metro area driving passengers to their destinations;
+        picked up food from various restaurants and delivered to customers
+      </span>
+    </div>
+
+    <p class="hover-transition">
+      <span class="company">Hop Energy: </span><span class="position">Independent Contractor: Database Entry
+        Clerk</span><br>
+      <span class="date">February 2016 - November 2016</span><br>
+      <span class="main-text">Scanned hard copy contracts into computer database;
+        updated and organized customer account information; trained staff
+      </span>
+    </p>
+
+    <p class="hover-transition">
+      <span class="company">My Alarm Center: </span><span class="position">Installation Coordinator</span><br>
+      <span class="date">March 2014 - January 2016</span><br>
+      <span class="main-text">Liaison between Sales reps and field technicians; solely responsible for new customer
+        shell accounts; created work orders; processed customer billing; handled technician payments; organized
+        technician inventory
+      </span>
+    </p>
+
+  </div>
+
+</body>
+
+</html>
diff --git a/styles.css b/styles.css
@@ -0,0 +1,83 @@
+/* This is for global styles that all pages use */
+
+body {
+  --primary-text-color: #222527;
+  --secondary-text-color: rgb(70, 70, 70);
+  --background-color: #f4a261;
+  --background-color-hover: #d88f53;
+  --border-color: var(--secondary-text-color);
+
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
+    "Open Sans", "Helvetica Neue", sans-serif;
+
+  color: var(--primary-text-color);
+
+  background-color: #2a9d8f;
+}
+
+#navbar {
+  margin: -10px -10px 20px -10px; /* Negative so div goes to edge of screen */
+  padding: 35px 25%;
+  background-color: #222;
+
+  display: flex;
+  flex-direction: row;
+  color: green;
+  list-style: none;
+}
+
+#navbar a {
+  padding: 15px;
+  font-size: 18px;
+  border-radius: 20px;
+
+  transition: 0.2s;
+}
+
+#navbar :nth-child(4) {
+  margin-left: auto;
+}
+
+a:link {
+  color: green;
+}
+
+a:visited {
+  color: var(--background-color-hover);
+}
+
+a:hover {
+  color: yellow;
+  background-color: #18343f;
+  border-radius: 20px;
+}
+
+.main-content-wrapper {
+  margin: auto;
+  padding: 0 20px 20px;
+  width: 50%;
+  background-color: var(--background-color);
+  border-radius: 40px;
+  box-shadow: 13px 13px 0 #222;
+}
+
+.primary-text {
+  color: var(--primary-text-color);
+}
+
+.secondary-text {
+  color: var(--secondary-text-color);
+}
+
+.title {
+  text-align: center;
+  margin-top: 10px;
+  padding: 10px 0px;
+  border-radius: 40px 40px 0 0;
+  border-bottom: 1px solid var(--border-color);
+
+  transition: 0.2s;
+}
+.title:hover {
+  background-color: var(--background-color-hover);
+}