Week 3 files

week-3/css/style.css

@@ -0,0 +1,287 @@
+body {
+  background-color: black;
+}
+
+.section-2 {
+  background-color: white;
+}
+
+.header-container {
+  background-color: black;
+}
+
+nav ul li {
+  font-size: large;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  color: white;
+  list-style-type: none;
+  padding: 2.5px;
+}
+
+ul {
+  padding: 0;
+  margin: 0;
+}
+
+h1 {
+  font-family: Raleway;
+  text-transform: uppercase;
+  padding: 0;
+  margin: 0;
+  padding-top: 5px;
+  padding-bottom: 5px;
+}
+
+h2 {
+  font-family: Raleway;
+  font-size: large;
+  padding: 0;
+  margin: 0;
+  padding-top: 5px;
+  padding-bottom: 5px;
+}
+
+h3 {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  padding: 0;
+  margin: 0;
+  padding-top: 5px;
+  padding-bottom: 5px;
+}
+
+p {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  padding: 0;
+  margin: 0;
+  padding-top: 5px;
+  padding-bottom: 5px;
+}
+
+#dwnld-btn {
+  background-color: transparent;
+  border-color: white;
+  border-style: solid;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  color: white;
+  font-size: medium;
+}
+
+form {
+  padding: 0;
+}
+.form-slots {
+  padding-left: 15px;
+  padding-right: 15px;
+}
+#free {
+  color: orange;
+  background-color: transparent;
+  padding-left: 5px;
+  padding-right: 5px;
+}
+.form-text {
+  padding-top: 20px;
+}
+input {
+  color: grey;
+  border: none;
+}
+input:focus::-webkit-input-placeholder {
+  color: transparent;
+}
+#form-btn {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  font-size: 20px;
+  color: white;
+  background-color: orange;
+  padding: 10px;
+  padding-left: 75px;
+  padding-right: 75px;
+  margin-top: 10px;
+}
+
+footer {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 10px;
+}
+footer p {
+  color: grey;
+  padding: 10px;
+}
+footer img {
+  width: 1rem;
+  height: 1.2rem;
+  padding-top: 25px;
+  padding-left: 25px;
+}
+@media (min-width: 320px) {
+  .header-container {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+  }
+  #header-img {
+    width: 3rem;
+    height: 1rem;
+    padding-top: 5px;
+  }
+  nav {
+    padding-top: 10px;
+    padding-bottom: 10px;
+  }
+  .section-1 {
+    color: white;
+  }
+  .row1-left {
+    padding: 10px;
+    padding-top: 25px;
+  }
+  #dwnld-btn {
+    padding: 5px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+  }
+  .sign-up {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    background-color: white;
+  }
+  .sign-up h2 {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+      Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+    color: black;
+    background-color: #f5f5f5;
+    padding: 15px;
+  }
+
+  .section-2 {
+    padding: 10px;
+    padding-top: 25px;
+  }
+  .section-2 p {
+    color: grey;
+  }
+  .socials {
+    padding-top: 15px;
+  }
+  .sub-socials {
+    display: flex;
+    justify-content: space-evenly;
+    padding: 10px;
+  }
+  footer img {
+    padding-left: 20px;
+  }
+}
+
+@media (min-width: 768px) {
+  .header-container {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: row;
+    align-items: center;
+  }
+  #header-img {
+    padding-left: 4rem;
+  }
+  nav {
+    padding-right: 45px;
+  }
+  nav ul {
+    display: flex;
+    justify-content: space-evenly;
+    flex-direction: row;
+  }
+  nav ul li {
+    padding-right: 10px;
+  }
+  .section-1 {
+    display: flex;
+    justify-content: space-evenly;
+    flex-direction: row;
+    align-items: center;
+    background-color: transparent;
+    margin-left: -15px;
+    margin-right: -15px;
+  }
+  .row1-left {
+    width: 20rem;
+  }
+  .sign-up h2 {
+    padding: 10px;
+  }
+
+  .section-2 {
+    display: flex;
+    justify-content: center;
+    margin-left: -15px;
+    margin-right: -15px;
+  }
+  .section-2-container {
+    display: flex;
+    justify-content: space-evenly;
+    flex-direction: column;
+  }
+  .socials {
+    display: flex;
+    justify-content: center;
+    flex-direction: row;
+  }
+  .sub-socials {
+    padding: 0;
+  }
+  .sub-socials img {
+    padding-left: 25px;
+  }
+}
+
+@media (min-width: 1024px) {
+  body {
+    width: 1024px;
+    margin: 0 auto;
+  }
+
+  #header-img {
+    padding-left: 8.5rem;
+  }
+  nav {
+    padding-right: 7rem;
+  }
+  .section-1 {
+    padding-top: 60px;
+    padding-bottom: 70px;
+  }
+  .row1-left {
+    width: 22rem;
+  }
+  .row1-left h1 {
+    font-size: x-large;
+  }
+
+  .section-2-container {
+    display: flex;
+    justify-content: space-evenly;
+    flex-direction: row;
+    align-items: center;
+    padding-bottom: 10px;
+  }
+  .media {
+    width: 20rem;
+    padding-right: 10px;
+  }
+  .sub-socials img {
+    width: 2.2rem;
+    height: 2.5rem;
+  }
+}

week-3/index.html

@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <link rel="stylesheet" href="css/style.css" />
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>AXIT</title>
+  </head>
+  <body>
+    <header>
+      <div class="header-container">
+        <div>
+          <img src="images/Logo.png" alt="Little logo" id="header-img" />
+        </div>
+        <div>
+          <nav>
+            <ul>
+              <li>Features</li>
+              <li>About</li>
+              <li>Pricing</li>
+              <li>Reviews</li>
+              <li>Contact</li>
+            </ul>
+          </nav>
+        </div>
+      </div>
+    </header>
+    <main>
+      <section
+        class="section-1"
+        style="background-image: url(images/image.png)"
+      >
+        <div class="row1-left">
+          <img src="images/Logo.png" alt="Big logo" />
+          <h1>Modern axure template for beautiful prototypes</h1>
+          <p id="special-text">______</p>
+          <p>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores
+            esse eligendi quae at quod, voluptatem eum voluptate, accusantium
+          </p>
+          <button id="dwnld-btn">Download</button>
+        </div>
+        <div class="sign-up">
+          <h2>Try Your <mark id="free">FREE</mark> Trial Today</h2>
+          <div class="form-text">
+            <form action="mailto:daniel.collette@uconn.edu" method="POST">
+              <div class="form-slots">
+                <input type="text" placeholder="Name" id="form-text" />
+                <hr />
+                <input type="email" placeholder="Email" id="form-text" />
+                <hr />
+                <input type="text" placeholder="Password" id="form-text" />
+                <hr />
+              </div>
+              <input type="submit" value="Get Started" id="form-btn" />
+            </form>
+          </div>
+        </div>
+      </section>
+      <section class="section-2">
+        <div class="section-2-container">
+          <div class="media">
+            <h2>Social Media</h2>
+            <p>
+              Lorem ipsum dolor sit amet consectetur, adipisicing elit. Magni
+              officiis, quas eum enim
+            </p>
+          </div>
+          <div class="socials">
+            <div class="sub-socials">
+              <img src="images/icons/facebook.png" alt="facebook" />
+              <img src="images/icons/twitter.png" alt="twitter" />
+              <img src="images/icons/google.png" alt="google plus" />
+            </div>
+            <div class="sub-socials">
+              <img src="images/icons/pintrist.png" alt="pinterest" />
+              <img src="images/icons/insta.png" alt="instagram" />
+              <img src="images/icons/su.png" alt="su" />
+              <img src="images/icons/wifi.png" alt="wifi" />
+            </div>
+          </div>
+        </div>
+      </section>
+    </main>
+    <footer>
+      <div>
+        <img src="images/icons/facebook.png" alt="facebook" />
+        <img src="images/icons/twitter.png" alt="twitter" />
+        <img src="images/icons/google.png" alt="google plus" />
+        <img src="images/icons/pintrist.png" alt="pinterest" />
+        <img src="images/icons/insta.png" alt="instagram" />
+        <img src="images/icons/su.png" alt="su" />
+        <img src="images/icons/wifi.png" alt="wifi" />
+      </div>
+      <p>@2015 Auxre Themes</p>
+    </footer>
+  </body>
+</html>