Add files via upload

sophiamf · Mar 3, 2019 · fa07ef9 · fa07ef9
1 parent 0bb6c84
commit fa07ef9
Show file tree

Hide file tree

Showing 3 changed files with 261 additions and 0 deletions.
diff --git a/practice_website/css/style.css b/practice_website/css/style.css
@@ -0,0 +1,187 @@
+@import url('https://fonts.googleapis.com/css?family=Montserrat:400,400i,600,900|Playfair+Display:900');
+
+* {
+  margin:0;
+  padding: 0;
+}
+
+body {
+  font-family: "Montserrat", sans-serif;
+}
+
+h1 {
+  color: #003bde;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 60px;
+}
+
+h2, section p {
+  font-family: "Playfair Display", sans-serif;
+  font-weight: 400;
+}
+
+h6 {
+  font-size: 13px;
+  font-weight: lighter;
+  padding-bottom: 15px;
+}
+
+nav {
+  display: flex;
+  justify-content: space-between;
+  padding: 0px 60px;
+  height: 61px;
+  position: sticky;
+  top:0;
+  background-color: rgba(255, 255, 255, .97);
+
+}
+
+nav li {
+  color: #051033;
+  display: inline-block;
+  padding-left: 30px;
+}
+
+nav ul {
+  list-style: none;
+}
+
+nav button {
+  color:white;
+  background-color: #003bde;
+}
+
+header {
+  display: flex;
+}
+
+header div {
+  background-color: #003bde;
+  color: white;
+  padding: 100px 60px;
+  display: inline-block;
+  width: 50%;
+  /* display: flex;
+  flex-direction: column;
+  justify-content: center; */
+}
+
+header button {
+  color: #003bde;
+}
+
+header h2 {
+  font-size: 42px;
+  margin-bottom: 30px;
+  width: 70%
+}
+
+section {
+  text-align: center;
+  padding: 90px 60px;
+}
+
+section p {
+  font-size: 40px;
+}
+
+footer {
+  display: flex;
+  justify-content: space-between;
+  padding: 0px 60px;
+  line-height: 90px;
+  padding-left: 30px;
+  border-top: 1px solid lightgray;
+}
+
+footer a {
+  text-decoration: none;
+  font-size: 13px;
+  color: gray;
+  padding-left: 30px;
+}
+
+
+/* Object Classes */
+
+.btn {
+  border-radius: 5px;
+  border: 0;
+  font-size: 17px;
+  font-family: "Montserrat", sans-serif;
+  text-transform: capitalize;
+  letter-spacing: .3px;
+  padding: 15px 30px;
+  transition: 250ms linear;
+}
+
+.btn:hover {
+  background-color: #003bde;
+  color: white;
+}
+
+
+.btn-primary {
+  padding: 0 15px;
+  margin: 14px 0 14px 8px;
+  line-height: 34px;
+}
+
+/* Object IDs */
+
+#headerLeft {
+  height: 350px;
+  background-image: url(https://images.unsplash.com/photo-1533727937480-da3a97967e95?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1951&q=80);
+  background-size: cover;
+  background-blend-mode: color-burn;
+  background-position: center;
+}
+
+#headerRight {
+  height: 350px;
+  background-image: url(https://images.unsplash.com/photo-1434494878577-86c23bcb06b9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80);
+  background-size: cover;
+  background-blend-mode: color-burn;
+  background-position: center;
+}
+
+.hamburger {
+  margin-top: 15px;
+  display: none;
+}
+
+.hamburger span {
+  display: block;
+  width: 30px;
+  height: 2px;
+  background-color: #003bde;
+  margin: 5px 0;
+}
+
+@media screen and (max-width: 900px) {
+
+  .hamburger {
+    display: block;
+  }
+
+  header {
+    flex-wrap: wrap;
+  }
+
+  header div {
+    width: 100%;
+  }
+
+  #headerRight, #headerLeft {
+    height: auto;
+  }
+
+  nav ul {
+    display:none;
+  }
+
+}
diff --git a/practice_website/index.html b/practice_website/index.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <title>Oscar Starter</title>
+    <link rel="stylesheet" href="css/style.css">
+  </head>
+  <body>
+    <nav id="main-nav">
+      <h1>Oscar</h1>
+      <ul>
+        <li>Plans</li>
+        <li>Features</li>
+        <li>Resources</li>
+        <li>
+          <button class="btn btn-primary">Get a Free Quote</button>
+        </li>
+      </ul>
+      <div class="hamburger">
+        <span></span>
+        <span></span>
+        <span></span>
+      </div>
+    </nav>
+
+    <header>
+      <div id="headerLeft">
+        <h2>You and Your Family Covered.</h2>
+        <button class="btn">Pick Your Personalized Plan</button>
+      </div>
+      <div id="headerRight">
+        <h2>Your Business Covered.</h2>
+        <button class="btn">Learn More</button>
+      </div>
+    </header>
+
+    <section>
+      <h6>Hi, we're Oscar</h6>
+      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
+    </section>
+
+  <footer>
+    <div>
+      <a href="" target="_blank">English</a>
+      <a href="" target="_blank">Spanish</a>
+      <a href="" target="_blank">Other</a>
+      <a href="" target="_blank">Terms of Service</a>
+    </div>
+    <div>
+      <a href="" target="_blank">Instagram</a>
+    </div>
+  </footer>
+
+  <script src="js/script.js"></script>
+  </body>
+</html>
diff --git a/practice_website/js/script.js b/practice_website/js/script.js
@@ -0,0 +1,18 @@
+// art('Hello World')
+
+
+window.addEventListener('scroll',function(){
+  let windowScrollPos = window.scrollY;
+
+  console.log({windowScrollPos})
+
+  //if the user has scrolled more than 50px
+    //add a blue background to the nav and white text
+  if (windowScrollPos > 300) {
+    let navigation = document.getElementById('main-nav')
+  }
+
+  //else
+    //Remove the Background
+
+});