From fa07ef9dc79a7a909a286ec6f7bd09eec8a11a00 Mon Sep 17 00:00:00 2001 From: Sophia Date: Sat, 2 Mar 2019 16:42:38 -0800 Subject: [PATCH] Add files via upload --- practice_website/css/style.css | 187 +++++++++++++++++++++++++++++++++ practice_website/index.html | 56 ++++++++++ practice_website/js/script.js | 18 ++++ 3 files changed, 261 insertions(+) create mode 100644 practice_website/css/style.css create mode 100644 practice_website/index.html create mode 100644 practice_website/js/script.js diff --git a/practice_website/css/style.css b/practice_website/css/style.css new file mode 100644 index 0000000..54e6244 --- /dev/null +++ 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 new file mode 100644 index 0000000..6f4952b --- /dev/null +++ b/practice_website/index.html @@ -0,0 +1,56 @@ + + + + + Oscar Starter + + + + + +
+
+

You and Your Family Covered.

+ +
+
+

Your Business Covered.

+ +
+
+ +
+
Hi, we're Oscar
+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

+
+ + + + + + diff --git a/practice_website/js/script.js b/practice_website/js/script.js new file mode 100644 index 0000000..55d3341 --- /dev/null +++ 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 + +});