From f1d36b5b00683f437453c965bb7be411cba4c8a2 Mon Sep 17 00:00:00 2001
From: Ryon <barlowryon@gmail.com>
Date: Thu, 9 Apr 2020 00:05:07 -0400
Subject: [PATCH 1/2] copy and pasted

---
 css/index.css | 350 ++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 350 insertions(+)

diff --git a/css/index.css b/css/index.css
index 0c9959c1e5..dbbdb52a15 100644
--- a/css/index.css
+++ b/css/index.css
@@ -1,3 +1,353 @@
 /* Use your own code or past solution for Great Idea Web Page CSS here! */
 
+/* nav styles */
+.main-nav-content {
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    margin-top: 20px;
+  }
+  .main-nav-content a {
+    font-size: 1.2rem;
+    padding: 10px;
+  }
+  .main-nav-content a {
+    text-decoration: none;
+    color: black;
+    opacity: 0.6;
+  }
+  .main-nav-content a:hover {
+    opacity: 1;
+  }
+  
+  /* header styles */
+  .main-header {
+    width: 80%;
+    margin: 50px auto;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+  }
+  .main-header-content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+  .main-header-img {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .main-header h1 {
+    font-size: 5rem;
+    text-align: center;
+  }
+  .main-header a {
+    display: block;
+    border: 1px solid black;
+    width: 180px;
+    text-align: center;
+    text-decoration: none;
+    color: black;
+    padding: 9px;
+  }
+  
+  /* main content */
+  .main-content {
+    width: 80%;
+    margin: auto;
+    height: 20vh;
+    display: flex;
+    justify-content: space-evenly;
+  }
+  hr {
+    width: 80%;
+    margin: 20px auto;
+    border: none;
+    border-bottom: 1px solid black;
+  }
+  
+  .main-content p {
+    color: #000;
+    font-weight: 300;
+  }
+  .main-content h1 {
+    font-size: 1.3rem;
+  }
+  .main-content p,
+  .main-content h1 {
+    padding: 0 10px;
+  }
+  
+  /* background image */
+  .background-image {
+    background: url("../img/mid-page-accent.jpg");
+    height: 182px;
+    width: 80%;
+    background-size: cover;
+    background-position: center;
+    margin: 0 auto 40px;
+  }
+  
+  /* services section */
+  
+  .services {
+    width: 80%;
+    margin: auto;
+    height: 30vh;
+    display: flex;
+    justify-content: space-evenly;
+  }
+  .services h1 {
+    font-size: 1.2rem;
+  }
+  .services p,
+  .services h1 {
+    margin: 10px 10px;
+  }
+  
+  footer {
+    width: 80%;
+    margin: auto;
+    padding-bottom: 100px;
+  }
+  .footer-content {
+    display: flex;
+    flex-direction: column;
+    width: 200px;
+  }
+  
+  .footer-content a {
+    text-decoration: none;
+    color: black;
+    font-weight: 500;
+  }
+  .copy {
+    text-align: center;
+    padding: 20px;
+  }
+  
+  /* services.html styles */
+  
+  /* main header */
+  .header-content {
+    width: 80%;
+    margin: 50px auto;
+    display: flex;
+    flex-direction: column;
+  }
+  .header-content h1 {
+    margin-top: 20px;
+    font-size: 1.4rem;
+    font-weight: 500;
+  }
+  .header-content img {
+    object-fit: cover;
+  }
+  .header-content p {
+    font-weight: 400;
+    color: black;
+    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  }
+  
+  /* services */
+  .services-content {
+    width: 80%;
+    margin: auto;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-between;
+  }
+  
+  .services-content div h1 {
+    font-size: 1.2rem;
+  }
+  .services-content div a {
+    background: white;
+    display: block;
+    margin-top: 20px;
+    width: 120px;
+    text-align: center;
+    padding: 10px;
+    color: black;
+    text-decoration: none;
+    border: 1px solid black;
+  }
+  .services-content div {
+    background: lightgray;
+    width: 40%;
+    border: 1px solid black;
+    margin: 20px;
+    padding: 20px;
+  }
+  
+  /* services facts */
+  .facts-wrapper {
+    width: 80%;
+    margin: 50px auto;
+    display: flex;
+    align-items: flex-start;
+  }
+  .facts-wrapper h1 {
+    font-size: 1.3rem;
+  }
+  .facts-wrapper ul {
+    margin-top: 40px;
+    list-style: square;
+    margin-left: 20px;
+  }
+  .facts-wrapper li {
+    margin: 20px 0;
+  }
+  .facts-wrapper img {
+    margin-left: 20px;
+  }
+  
+  /* services.html media queries */
+  @media (max-width: 800px) {
+    .header-content,
+    .services-content,
+    .facts-wrapper,
+    hr {
+      width: 90%;
+    }
+    .header-content,
+    .services-content,
+    .facts-wrapper {
+      flex-direction: column;
+    }
+    .services-content div {
+      width: 100%;
+      margin: 20px auto;
+    }
+    .facts-wrapper {
+      justify-content: center;
+      align-items: center;
+    }
+    .main-nav-content {
+      flex-wrap: wrap;
+      justify-content: space-evenly;
+    }
+    .facts-wrapper img {
+      width: 100%;
+      margin: 0;
+    }
+  }
+  
+  /* index.html media queries */
+  @media (max-width: 800px) {
+    .main-header,
+    .background-image,
+    footer {
+      width: 90%;
+      flex-direction: column;
+    }
+    .main-content {
+      width: 90%;
+    }
+  
+    /* change logo order */
+    .main-nav-content .logo-link {
+      order: -1;
+      align-self: flex-start;
+      flex-direction: column;
+      width: 100%;
+      margin: auto;
+      text-align: center;
+    }
+  
+    .main-header img {
+      display: none;
+    }
+    .main-content-about-right,
+    .main-content-about-left {
+      margin-bottom: 20px;
+    }
+    /* .main-content-about-left {
+      margin-top: 40px;
+    } */
+    .background-image {
+      margin: 60px auto;
+    }
+    .services {
+      width: 90%;
+    }
+    hr {
+      margin: 70px auto;
+    }
+  }
+  
+  /* index.html media 500px */
+  
+  @media (max-width: 500px) {
+    .main-nav-content {
+      flex-direction: column;
+    }
+    .main-nav-content a:nth-child(1) {
+      border-top: 1px solid grey;
+      /* border-bottom: 1px solid grey; */
+      width: 100%;
+      text-align: center;
+    }
+    .main-nav-content a:nth-child(2) {
+      border-top: 1px solid grey;
+  
+      width: 100%;
+      text-align: center;
+    }
+    .main-nav-content a:nth-child(3) {
+      border-top: 1px solid grey;
+  
+      width: 100%;
+      text-align: center;
+    }
+    .main-nav-content a:nth-child(4) {
+      border-top: 1px solid grey;
+  
+      width: 100%;
+      text-align: center;
+    }
+    .main-nav-content a:nth-child(5) {
+      border-top: 1px solid grey;
+  
+      width: 100%;
+      text-align: center;
+    }
+    .main-nav-content a:nth-child(6) {
+      border-top: 1px solid grey;
+      border-bottom: 1px solid grey;
+      width: 100%;
+      text-align: center;
+    }
+    .main-header-content h1 {
+      font-size: 3.5rem;
+    }
+    .main-header a {
+      padding: 5px;
+      width: 130px;
+    }
+    .main-content {
+      flex-direction: column;
+      /* margin-top: 100px; */
+      height: 30vh;
+    }
+    .background-image {
+      height: 100px;
+    }
+    .services {
+      flex-direction: column;
+      height: 55vh;
+    }
+    .services-left {
+      margin-bottom: 40px;
+    }
+    .services-middle {
+      margin-bottom: 40px;
+    }
+    footer {
+      padding-bottom: 20px;
+    }
+  }
 

From 897749d6bf7164ea6a91dc9d29a4d54c60c798f7 Mon Sep 17 00:00:00 2001
From: Ryon <barlowryon@gmail.com>
Date: Sat, 11 Apr 2020 09:58:21 -0400
Subject: [PATCH 2/2] made responsive and added my own content

---
 index.html | 117 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 117 insertions(+)

diff --git a/index.html b/index.html
index 476b4b8cb9..632f980d2c 100644
--- a/index.html
+++ b/index.html
@@ -13,4 +13,121 @@
 <body>
 <!-- Use past code you created here for Great Idea Web Page or past solution for Great Idea Web Page HTML here! -->
 </body>
+<head>
+  <meta charset="utf-8">
+  <title>Great Idea - Responsive I</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link href="https://fonts.googleapis.com/css?family=Bangers|Titillium+Web" rel="stylesheet">
+  <link rel="stylesheet" href="css/reset.min.css">
+  <link rel="stylesheet" href="css/index.css">
+
+  <!--[if lt IE 9]>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
+  <![endif]-->
+</head>
+
+<body>
+  <!-- Use your own code or past solution for Great Idea Web Page HTML here! -->
+  <!-- Copy and paste your HTML from the first UI project here -->
+  <!-- nav bar -->
+  <nav class="main-nav">
+    <div class="main-nav-content">
+      <a href="services.html">Services</a>
+      <a href="#">Product</a>
+      <a href="#">Vision</a>
+      <a href="#">Features</a>
+      <a href="#">About</a>
+      <a href="#">Contact</a>
+      <a href="index.html" class="logo-link">
+        <img class="logo" src="img/logo.png" alt="Great Idea! Company logo.">
+      </a>
+
+    </div>
+
+  </nav>
+
+  <!-- header -->
+  <section>
+    <header class="main-header">
+      <div class="main-header-content">
+        <h1>Innovation
+          <br> On
+          <br> Demand</h1>
+        <a href="#">Get Started</a>
+      </div>
+      <div class="main-header-img">
+        <img src="img/header-img.png" alt="Image of a code snippet.">
+      </div>
+
+
+
+
+
+
+    </header>
+  </section>
+  <hr class="header-hr">
+  <!-- main content -->
+  <section>
+    <div class="main-content">
+
+      <div class="main-content-about-left">
+        <h1> Features</h1>
+        <p> Finally, let’s look at the class names. Since there is so little content on this site, it doesn’t seem like that matters, but consider what would happen if we started to add styling, or build out whole classes. Before moving on, change the class “something” to “subtitle”. This helps not only screen readers, but your future developer self.</p>
+      </div>
+
+      <div class="main-content-about-right">
+        <h1>About</h1>
+        <p>Screen readers are a great thing to keep top of mind while designing for accessibility. A screen reader is a tool (a browser extension or app) that transmits web page data for people with visual impairments, learning disabilities, or other needs; They usually operate by verbalizing the content or sometimes translating into braille. Screen readers read content based on how the HTML is coded, starting with </p>
+      </div>
+    </div>
+
+  </section>
+
+  <div class="background-image"></div>
+
+
+  <!-- <img class="middle-img" src="img/mid-page-accent.jpg" alt="Image of code snippets across the screen">  -->
+
+  <!-- services -->
+  <section>
+    <div class="services">
+      <div class="services-left">
+        <h1>Services</h1>
+        <p> Saturday at midnight law enforcement is to begin ensuring my business (and others) is closed under threat of revoking licenses, fines, and imprisonment. Now, bear in mind the govenor has no power to restrict business in thus manner, but I don't have the pockets to risk being made example of. This is already going to put a serious hurt on my livelihood and business.</p>
+      </div>
+      <div class="services-middle">
+        <h1>Product </h1>
+        <p>The idea of accessibility in web originated because people with disabilities needed to be able to access the internet in non-traditional ways. Unsurprisingly though, designing accessible websites has compounding benefits and it helps a plethora of other people. For example, folks using smaller browser screens are positively impacted by websites designed for those who need larger font sizes.</p>
+      </div>
+      <div class="services-right">
+        <h1>Vision</h1>
+        <p>Other universal benefits of accessibility include designs intended for permanent physical impairments that help people with temporary issues (like a broken thumb) and designs intended for the hearing impaired, for example closed captioning, that help everyone when they’re in a loud space or can’t use headphones.</p>
+      </div>
+
+
+    </div>
+  </section>
+  <hr>
+  <footer>
+    <div class="footer-content">
+      <h1> Contact</h1>
+      <address>123 Way 456 Street Somewhere, USA
+        <br>
+        <br>
+        <a href="tel:18888888888">1 (888) 888-8888 </a>
+        <br>
+        <br>
+        <a href="mailto:sales@greatidea.io"> sales@greatidea.io</a>
+      </address>
+
+
+
+    </div>
+    <div class="copy">
+      &copy; Copyright Great Idea! 2018
+    </div>
+
+  </footer>
+</body>
 </html>
\ No newline at end of file