diff --git a/index.html b/index.html index d76887e..5667031 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,5 @@ - + @@ -7,33 +7,34 @@ + + + - + Nudge INC - - - +
- + - +
@@ -110,31 +111,32 @@

Standard GPS Function

User Testimonials

See what our customers have to say about Nudge!

-
-
-
- customer testimonial 1 +
+
+
+ testimonial +
+
+ testimonial +
+
+ testimonial +
+
+ testimonial
-
- customer testimonial 2 +
+ testimonial
-
- customer testimonial 3 -
-
-
- - - - - - -
+
+ testimonial +
+
-
+

Subscription Plans @@ -146,7 +148,7 @@

+

Basic

@@ -160,7 +162,7 @@

Basic

  • With Ads
  • Tech support between office hours
    • - Get Nudge Now + Get Nudge Now

    Premium

    @@ -175,7 +177,7 @@

    Premium

  • No Ads
  • 24/7 Premium Tech support
    • - Get Nudge Now + Get Nudge Now
    @@ -184,7 +186,7 @@

    Premium

    -

    About Team Nudge

    +

    About Team Nudge

    We are some university students who came with an idea for a product and decided to develop it into a project!

    @@ -193,23 +195,23 @@

    About Team Nudge

    We are some university students who came with an idea for a product and decided to develop it into a project!

    --> -
    +
    -
    +
    Nicholas Turbide
    Nicholas Turbide
    - Costumer Service
    + Customer Service

    Github link

    LinkedIn link

    -
    +
    Zakaria Oulli
    Zakaria Oulli
    Arts and Design

    Github link

    LinkedIn link

    -
    +
    Mohanad Mohamed
    Mohanad Mohamed
    User Experience
    @@ -219,21 +221,21 @@

    About Team Nudge

    -
    +
    Christina Song
    Christina Song
    Product Design

    Github link

    LinkedIn link

    -
    +
    Jessica Nguyen
    Jessica Nguyen
    - Business Manager
    + Business Manager

    Github link

    LinkedIn link

    -
    +
    Diane Tsang
    Diane Tsang
    Creative Director
    @@ -242,43 +244,115 @@

    About Team Nudge

    +
    + +
    + Nicholas Turbide +
    Nicholas Turbide
    + Customer Service
    +

    Github link

    +

    LinkedIn link

    +
    +
    + Zakaria Oulli +
    Zakaria Oulli
    + Arts and Design
    +

    Github link

    +

    LinkedIn link

    +
    +
    + Mohanad Mohamed +
    Mohanad Mohamed
    + User Experience
    +

    Github link

    +

    LinkedIn link

    +
    + +
    + Christina Song +
    Christina Song
    + Product Design
    +

    Github link

    +

    LinkedIn link

    +
    +
    + Jessica Nguyen +
    Jessica Nguyen
    + Business Manager
    +

    Github link

    +

    LinkedIn link

    +
    +
    + Diane Tsang +
    Diane Tsang
    + Creative Director
    +

    Github link

    +

    LinkedIn link

    +
    +
    +
    -
    -
    -

    FAQ - FREQUENTLY ASKED QUESTIONS

    -
    - -
    - -
    -
    -
    - +
    +
    +

    FAQ - FREQUENTLY ASKED QUESTIONS

    +
    + +
    +
    +
    + +
    +
    + + +
    +
    +

    Contact Us

    +
    + + +
    + +
    + + +
    +
    + + +
    + +
    Send Message + Thank you for messaging us, we will be in touch within 3 Business days +
    +
    +
    +
    @@ -290,13 +364,22 @@

    NUDGE

    +
    +

    COMPANY

    + +

    QUICK LINKS

    @@ -304,8 +387,12 @@

    QUICK LINKS

    DOWNLOAD

    - Download on the App Store - Get it on Google Play + + Download on the App Store + + + Get it on Google Play +
    @@ -313,39 +400,35 @@

    DOWNLOAD

    DOWNLOAD

    - - Download on the App Store + + Download on the App Store - - Get it on Google Play + + Get it on Google Play
    -

    Copyright © 2020 Nudge Inc. All rights reserved

    +

    Copyright © 2020 Nudge Inc. All rights reserved.

    -

    Privacy & Terms

    +

    Privacy & Terms

    - @@ -356,8 +439,7 @@

    FOLLOW US

    duration: 1250, } ); - - + diff --git a/main.js b/main.js index 2491ea3..913e036 100644 --- a/main.js +++ b/main.js @@ -15,137 +15,33 @@ $(window).scroll(function() { }); }); -// main -/* ------------CUSTOMER TESTIMONIALS------------------- */ -// declare global variables -var origReviewLinks = ["./images/tweet1.png", - "./images/tweet2.png", - "./images/tweet3.png", - "./images/tweet4.png", - "./images/tweet5.png", - "./images/tweet6.png"]; -var reviewLinks = origReviewLinks; -var shift = 0; -window.setInterval(shiftReviews, 10000); +$(".home-text").delay(2000).animate({"opacity": "1"}, 1000); -// function to shift reviews -function shiftReviews() { - temp = ""; - firstImage = reviewLinks[0]; - for (i = 0; i < reviewLinks.length - 1; i++) { - reviewLinks[i] = reviewLinks[i+1]; - } - shift += 1; - if (shift > 5) { - shift -= 6; - } - console.log("shift = " + shift); - reviewLinks[reviewLinks.length-1] = firstImage; - displayReviews(); -} +$(".arrow").delay(3000).animate({"opacity": "1"}, 1000); -// function to display reviews -function displayReviews() { - - document.getElementById("custReview1").src=reviewLinks[0]; - document.getElementById("custReview2").src=reviewLinks[1]; - document.getElementById("custReview3").src=reviewLinks[2]; - // set dots - document.getElementById("dot1").style.color = "rgba(255,255,255,0.3)"; - document.getElementById("dot2").style.color = "rgba(255,255,255,0.3)"; - document.getElementById("dot3").style.color = "rgba(255,255,255,0.3)"; - document.getElementById("dot4").style.color = "rgba(255,255,255,0.3)"; - document.getElementById("dot5").style.color = "rgba(255,255,255,0.3)"; - document.getElementById("dot6").style.color = "rgba(255,255,255,0.3)"; - - if (shift == 0) { - document.getElementById("dot1").style.color = "rgba(255,255,255,0.6)"; - } - else if (shift == 1) { - document.getElementById("dot2").style.color = "rgba(255,255,255,0.6)"; +// CUSTOMER TESTIMONIALS +$(".carousel").owlCarousel({ + margin: 20, + loop: true, + autoplay: true, + autoplayTimeout: 5000, + autoplayHoverPause: true, + responsive: { + 0:{ + items:1, + nav: false + }, + 600:{ + items:2, + nav: false + }, + 1000:{ + items:3, + nav: false + } } - else if (shift == 2) { - document.getElementById("dot3").style.color = "rgba(255,255,255,0.6)"; - } - else if (shift == 3) { - document.getElementById("dot4").style.color = "rgba(255,255,255,0.6)"; - } - else if (shift == 4) { - document.getElementById("dot5").style.color = "rgba(255,255,255,0.6)"; - } - else if (shift == 5) { - document.getElementById("dot6").style.color = "rgba(255,255,255,0.6)"; - } -} - -function dot1() { - console.log("dot1 clicked"); - reviewLinks = ["./images/tweet1.png", - "./images/tweet2.png", - "./images/tweet3.png", - "./images/tweet4.png", - "./images/tweet5.png", - "./images/tweet6.png"]; - shift = 0; - displayReviews(); -} -function dot2() { - console.log("dot2 clicked"); - reviewLinks = ["./images/tweet2.png", - "./images/tweet3.png", - "./images/tweet4.png", - "./images/tweet5.png", - "./images/tweet6.png", - "./images/tweet1.png"]; - shift = 1; - displayReviews(); -} -function dot3() { - console.log("dot3 clicked"); - reviewLinks = ["./images/tweet3.png", - "./images/tweet4.png", - "./images/tweet5.png", - "./images/tweet6.png", - "./images/tweet1.png", - "./images/tweet2.png"]; - shift = 2; - displayReviews(); -} -function dot4() { - console.log("dot4 clicked"); - reviewLinks = ["./images/tweet4.png", - "./images/tweet5.png", - "./images/tweet6.png", - "./images/tweet1.png", - "./images/tweet2.png", - "./images/tweet3.png"]; - shift = 3; - displayReviews(); -} -function dot5() { - console.log("dot5 clicked"); - reviewLinks = ["./images/tweet5.png", - "./images/tweet6.png", - "./images/tweet1.png", - "./images/tweet2.png", - "./images/tweet3.png", - "./images/tweet4.png"]; - shift = 4; - displayReviews(); -} -function dot6() { - console.log("dot6 clicked"); - reviewLinks = ["./images/tweet6.png", - "./images/tweet1.png", - "./images/tweet2.png", - "./images/tweet3.png", - "./images/tweet4.png", - "./images/tweet5.png"]; - shift = 5; - displayReviews(); -} -/* ---- Customer Testimonials end ---- */ + }); function myFunction() { var dots = document.getElementById("dots"); @@ -192,3 +88,16 @@ function myFunction3() { moreText.style.display = "inline"; } } + +// Contact Us +function ThankYou(){ + var contactbutton = document.getElementById("SupportPopup"); + contactbutton.style.display = "inline-block"; + contactbutton.classList.toggle("show"); + setTimeout(hideThankYou, 4000); +} +function hideThankYou(){ + var contactbutton = document.getElementById("SupportPopup"); + contactbutton.style.display = "none"; + contactbutton.classList.toggle("hide"); +} diff --git a/style.css b/style.css index 4689c14..851ae9e 100644 --- a/style.css +++ b/style.css @@ -26,15 +26,19 @@ p , figcaption, caption{ /* MAIN */ -html, body{ +html, body { height:100%; scroll-behavior: smooth; } -:target{ +:target { scroll-margin-top: 4.5rem; } +#about-us:target { + scroll-margin-top: 5rem; +} + * { box-sizing: border-box; margin: 0; @@ -43,8 +47,6 @@ html, body{ /* NAVBAR */ -/* THE COLOURS ARE JUST FOR TESTS IT DOESN'T HAVE TO BE THAT IF WE DONT WANT IT */ - header{ display: flex; justify-content: space-between; @@ -87,17 +89,23 @@ li, a, button{ button{ padding: 9px 25px; - background-color: rgb(231, 215, 66); + background-color: yellow; border-width:5px; border-radius: 50px; cursor: pointer; transition: all 0.3s ease 0s; - color: #171717; + color: black; } button:hover{ - border-color:#F4F8FD; + background-color: black; + border-color:yellow; + color: white; + +} +.logo { + width: 12vw; } /* HOME */ @@ -132,6 +140,7 @@ button:hover{ display: inline-block; bottom: 35%; right: 25%; + opacity: 0; } .home-text h1{ @@ -154,18 +163,39 @@ button:hover{ bottom:8%; right:48%; border-radius: 5px; + opacity: 0; } .arrow:hover{ border-color: #F4F8FD; } -@media screen and (max-height: 600px) { +@media screen and (max-height: 500px) { + .arrow { + padding: 8px; + height: 30px; + width: 30px; + border-width: 0 4px 4px 0; + } + + .home-text{ + padding: 30px 30px 30px 30px; + } + .home-text h1{ + font-size: 25px; + } + + .home-text h2{ + font-size: 12px; + } +} + +@media screen and (min-height: 500px) and (max-height: 600px) { .home-text{ padding: 40px 40px 40px 40px; } .home-text h1{ - font-size: 45px; + font-size: 35px; } .home-text h2{ @@ -294,157 +324,145 @@ button:hover{ .blog-post_img{ + min-width: 30rem; max-width: 30rem; transform: translate(0, -8rem); } + /* End of Features */ /* ------------ CUSTOMER TESTIMONIALS ------------- */ +/* +COLOURS +Yellow: #F1F119 +Light Blue: #44D6C4 +Grey: #2D2D39 +Off White: #F4F8FD +Off Black: #171717 +*/ .cust-reviews { - width: 100%; - height: 90vh; - min-height: 700px; - padding: 40px 20px; - padding-bottom: 30px; - background-color: #171717; - font-size: 16px; + width: 100%; + height: 87vh; + min-height: 700px; + padding: 40px 20px; + padding-bottom: 30px; + background-color: #171717; + font-size: 16px; } .cust-reviews .upper-container { - position: relative; - margin-bottom: 20px; - text-shadow: 0 2px 5px rgba(0,0,0,.5); - /* box-shadow: 0 5px 25px rgba(0,0,0,.5); */ + position: relative; + margin-bottom: 20px; + text-shadow: 0 2px 5px rgba(0,0,0,.5); } .cust-reviews h2 { - /* background-color: #171717; */ - color: #F1F119 ; - text-align: left; - /* font-size: 2.5rem; */ - font-size: 2em; - font-family: 'Montserrat', sans-serif; - /* font-weight: 500; */ - margin: 0.8rem; - margin-left: 0; + color: #F1F119 ; + text-align: left; + /* font-size: 2.5rem; */ + font-size: 2em; + font-family: 'Montserrat', sans-serif; + /* font-weight: 500; */ + margin: 0.8rem; + margin-left: 0; } .cust-reviews p { - /* background-color: #2D2D39; */ - color: #F4F8FD; - font-size: 1.5rem; - margin-bottom: 0.6rem; + color: #F4F8FD; + font-size: 1.5rem; + margin-bottom: 0.6rem; +} +.cust-reviews .wrapper { + width: 100%; + box-sizing: border-box; + background-image: url("./images/city_intersection.jpg"); + background-repeat: no-repeat; + background-attachment: fixed; + background-size: cover; + position: relative; + z-index: 1; + padding: 15px; + padding-top:10px; + display: flex; + flex-direction: column; + justify-content: center; } -.cust-reviews .row { - box-sizing: border-box; - background-image: url("./images/city_intersection.jpg"); - background-repeat: no-repeat; - background-attachment: fixed; - background-size: cover; - position: relative; - z-index: 1; - height: 60vh; - min-height: 450px; - padding: 12px; - padding-bottom: 5px; - display: flex; - flex-direction: column; - justify-content: space-evenly; +.cust-reviews .wrapper::after { + position: absolute; + z-index: -1; + top: 0; + left: 0; + height: 100%; + width: 100%; + content: ''; + background: rgba(0,0,0,0.6); } -.cust-reviews .row::after { - position: absolute; - z-index: -1; - top: 0; - left: 0; - height: 100%; - width: 100%; - content: ''; - background: rgba(0,0,0,0.6); +.cust-reviews .wrapper .carousel { + max-width: 1500px; + margin: auto; + padding: 0 30px; } -.cust-reviews .row:after { - /* Clear floats after the columns */ - content: ""; - display: table; - clear: both; +.cust-reviews .wrapper .carousel .card { + /* width:25vw; + min-width: 250px; */ + width:300px; + color: #fff; + text-align: center; + margin: 20px 0; + /* margin-top: 10px; */ + line-height: 250px; + font-size: 90px; + font-weight: 600; + border-radius: 10px; + box-shadow: 0px 4px 15px rgba(0,0,0,0.2); } -.cust-reviews .columns { - display: flex; - flex-direction: row; - justify-content: space-around; - align-items: flex-start; +.cust-reviews .wrapper .carousel .card img { + width: inherit; + height: auto; + box-shadow: 5px 6px 6px rgba(0,0,0,0.7); } -.cust-reviews .columns .column { - /* width: 360px; */ - width: 25vw; - height: 45vh; - min-height: 300px; +.owl-dots{ + text-align: center; + margin-top: 40px; } -.cust-reviews .column img { - width: inherit; - height: auto; - border: 2px solid #171717; - outline: 0.5px solid #F4F8FD; - box-shadow: 4px 5px 5px black; +.owl-dot:not(:last-child) { + margin-right: 20px; } +.owl-dot{ + height: 20px; + width: 20px; + margin: 0 5px; + outline: none; + /* border-radius: 14px; */ + border-radius: 50%; + /* border: 2px solid #F1F119!important; */ + border: 2.4px solid rgba(255,255,255,0.7)!important; + box-shadow: 0px 4px 15px rgba(0,0,0,0.2); + transition: all 0.3s ease; +} +.owl-dot.active, +.owl-dot:hover{ + /* background: #F1F119!important; */ + background: rgba(255,255,255,0.6)!important; +} + .cust-reviews .zoom { transition: transform .2s; } .cust-reviews .zoom:hover { - -ms-transform: scale(1.5); /* IE 9 */ - -webkit-transform: scale(1.5); /* Safari 3-8 */ - transform: scale(1.2); -} -.cust-reviews .bottom-dots { - width: 20vw; - min-width: 200px; - align-self: center; - margin-top: 22px; - display: flex; - flex-direction: row; - justify-content: space-around; -} -.cust-reviews button { - padding: 0; - background-color: rgba(231, 215, 66, 0); - border: none; - border-radius: 70px; - cursor: pointer; - transition: all 0.3s ease 0s; - user-select: none; -} -.cust-reviews button:focus { - outline: none; - box-shadow: none; + -ms-transform: scale(1.1); /* IE 9 */ + -webkit-transform: scale(1.1); /* Safari 3-8 */ + transform: scale(1.1); } -.cust-reviews .bottom-dots i { - font-size: 1.4vw; - color: rgba(255,255,255,0.3); -} -/* Customer Testimonials Animations */ -.custReview1, .custReview2, .custReview3 { - animation-name: tweet; - animation-duration: 1s; -} -/* @keyframes tweet { - from {} - to {} -} */ + /* RESPONSIVE CUSTOMER TESTIMONIALS */ +@media screen and (min-width: 1300px) { + .cust-reviews .wrapper .carousel .card { + width: 350px; + } +} @media screen and (max-width: 1155px) { .cust-reviews { height: 84vh } - .cust-reviews .row { - height: 54vh; - } - .cust-reviews .row .columns .column { - width: 28vw; - min-height: 280px; - } - .cust-reviews .bottom-dots { - margin-top: 9px; - } - .cust-reviews .bottom-dots i { - font-size: 1.45vw; - } } @media screen and (max-width: 955px) { .cust-reviews h2 { @@ -456,35 +474,15 @@ button:hover{ .cust-reviews { min-height: 650px; } - .cust-reviews .row { - min-height: 420px; - } -} -@media screen and (max-width: 900px) { - .cust-reviews .columns { - justify-content: center; - margin-bottom: 0; - } - .cust-reviews .row .columns .column { - width: 300px; - height: 42vh; - } - #custReview1, #custReview3 { - display: none; - } - .cust-reviews .bottom-dots { - margin-top: 0; - } - .cust-reviews .bottom-dots i { - font-size: 1.8vw; - } } @media screen and (max-width: 600px) { .cust-reviews { min-height: 600px; } - .cust-reviews .row { - min-height: 350px; + .cust-reviews .zoom:hover { + -ms-transform: scale(1.05); /* IE 9 */ + -webkit-transform: scale(1.05); /* Safari 3-8 */ + transform: scale(1.05); } .cust-reviews .bottom-dots i { font-size: 13px; @@ -497,22 +495,28 @@ button:hover{ .cust-reviews p { font-size: 16px; } - .cust-reviews .row { - min-height: 400px; + .cust-reviews .zoom:hover { + /* disable zoom */ + -ms-transform: scale(1); /* IE 9 */ + -webkit-transform: scale(1); /* Safari 3-8 */ + transform: scale(1); } - .cust-reviews .row .columns .column { - min-width: 280px; - min-height: 250px; +} +@media screen and (max-width: 470px) { + .cust-reviews .wrapper { + padding-left:0; + padding-right:0; } - .cust-reviews .bottom-dots { - min-width: 150px; + .cust-reviews .wrapper .carousel{ + padding-left:40px; + padding-right:10px; } - .cust-reviews .bottom-dots i { - font-size: 12px; + .cust-reviews .wrapper .carousel .card { + width: 270px; } } -/*ABOUT US SECTION*/ +/* /////////////////////////////////////////////////////////////////////////ABOUT US Section////////////////////////////////////////////////////////////////////////////////////// */ div.about_us{ background-color: #171717; @@ -524,37 +528,27 @@ div.about_us h1{ } p.introinfo{ - font-size: 25px; } div.about_us img{ transition: transform .4s; - } div.about_us img:hover{ transform: scale(1.1); } -section.r1 p{ - background-color: ; - display: inline; -} -section.r2 p{ - background-color: ; +figure p{ display: inline; } section{ - padding: 20px; display: flex; flex-direction: row; - } - section button{ border-radius: 20px; box-shadow: grey 2px 2px 0; @@ -588,13 +582,11 @@ section .github a{ } section .github a:hover{ - background-color:#F2F21F; - + background-color:#F2F21F; } section .linkedIn a:hover{ - background-color: #32D4E6; - + background-color: #32D4E6; } section .github a{ @@ -606,15 +598,6 @@ section .linkedIn a{ background-image: url("images/linkedin.png"); } - -.people { - - padding: 20px; - display: flex; - flex-direction: row; - -} - figcaption{ color: #F2F21F; font-size: 22px; @@ -629,7 +612,7 @@ figcaption{ .people figure { margin: auto; text-align: center; - width: 200px; + width: 230px; } .people figure img { border-radius: 50%; @@ -637,6 +620,54 @@ figcaption{ width: 150px; } +.peoplev2{ + display: none; +} + +/*RESPONSIVE RULES FOR ABOUT US SECTION*/ + +@media screen and (max-width: 644px) { + + .people{ + display: none; + } + + .peoplev2{ + display: flex; + flex-direction: row; + padding: 0px; + flex-wrap: wrap; + } + + figure{ + padding: 10px; + } + + p.introinfo{ + font-size: 22px; + } +} + +@media screen and (max-width: 565px) { + + .h_main{ + font-size: 30px; + } + + p.introinfo{ + font-size: 20px; + padding-bottom: 0px; + } +} + +@media screen and (max-width: 516px) { + + p.introinfo{ + font-size: 18px; + padding-bottom: 0px; + } +} + /* /////////////////////////////////////////////////////////////////////////FAQ Section////////////////////////////////////////////////////////////////////////////////////// */ .Faq-background{ @@ -746,6 +777,127 @@ figcaption{ width: 40% ; } } + + +/* Contact Us Section*/ +.contact-us-background{ + background-color: #171717; + height: 550px; + width: 100%; +} +.contact-us { + background-color: #171717; + width : 50%; + position: absolute; + transform: translate(45%, 0%); + margin: 50px 50px 50px 50px; + padding: 30px 40px 30px 40px; + box-sizing: border-box; + border-radius: 8px; + text-align: center; + +} + +.contact-us h1{ + color: yellow; + margin-bottom: 25px; + font-weight: 200; + font-family: 'Raleway', sans-serif; +} + +.contact-us .contact-textb{ + border: 1px solid yellow; + margin: 8px 0; + padding: 12px 18px; + border-radius: 8px; + font-family: 'Raleway', sans-serif; +} + +.contact-us .contact-textb label{ + display:block; + text-align: left; + + color: yellow; + text-transform: uppercase; + font-size: 14px; + font-family: 'Raleway', sans-serif; +} + +.contact-us .contact-textb input, .contact-us .contact-textb textarea{ + color: yellow; + width: 100%; + border: none; + background: none; + outline: none; + font-size: 18px; + margin-top: 6px; + + font-family: 'Raleway', sans-serif; +} + +.contact-us .contactbutton{ + display: block; + background: yellow; + padding: 14px 0; + color: #171717; + text-transform: uppercase; + cursor: pointer; + margin-top: 40px; + width: 40%; + transform: translate(75%, 0%); + border-radius: 8px; + font-family: 'Raleway', sans-serif; +} + +.contact-us .contactbutton:hover{ + opacity: 50%; +} +@media screen and (max-width: 1440px){ + .contact-us{ + width: 50%; + height: 50% + } +} +.contact-us-background .contact-us .contactbutton .Supportpop{ + visibility: hidden; + width: 160px; + background-color: #555; + color: #fff; + text-align: center; + border-radius: 6px; + padding: 8px 0; + position: absolute; + z-index: 1; + bottom: 125%; + left: 50%; + margin-left: -80px; + +} +.contact-us-background .contact-us .contactbutton .Supportpop::after{ + content: ""; + position: absolute; + top: 100%; + left: 50%; + margin-left: -5px; + border-width: 5px; + border-style: solid; + border-color: #555 transparent transparent transparent; +} +.contact-us-background .contact-us .contactbutton .show{ + visibility: visible; + -webkit-animation: fadeIn 1s; + animation: fadeIn 1s +} + +@-webkit-keyframes fadeIn { + from {opacity: 0;} + to {opacity: 1;} +} + +@keyframes fadeIn { + from {opacity: 0;} + to {opacity:1 ;} +} /* $$$$$ Section */ } @@ -953,24 +1105,25 @@ body{ .footer .row { display: flex; flex-direction: row; - justify-content: space-between; + justify-content: space-between; } .footer .row .column { width: 22vw; + min-width: 185px; margin-top: 20px; } .footer .row .column:nth-child(1) { - width: 44vw; + width: 30vw; min-width: 260px; - margin-right: 35px; + margin-right: 60px; margin-top: 0; } -.footer .row .column:nth-child(3) .download-pics { +.footer .row .column:nth-child(4) .download-pics { width:inherit; display: flex; flex-direction: column; } -.footer .row .column:nth-child(3) .download-pics img { +.footer .row .column:nth-child(4) .download-pics img { width: inherit; max-width: 170px; min-width: 120px; @@ -982,14 +1135,14 @@ body{ .footer .row .column li { list-style-type: none; } -.footer li a:hover { +.footer li a:hover, .bottom-band a:hover { color: #F1F119; } .footer .row .column img{ width: 70%; height: auto; } -.footer .column img:hover { +.footer img:hover { cursor: pointer; } @@ -1016,10 +1169,6 @@ body{ flex-direction: row; justify-content: space-around; } -.bottom-band .privacy p:hover{ - cursor: pointer; - color: #F1F119; -} .footer h3 { font-size: 30px; color: #F1F119; @@ -1031,32 +1180,32 @@ body{ color: #979797; font-family: 'Raleway', sans-serif; } -.footer p { +.footer p, .bottom-band p { font-size: 16px; color: #e0e4e9; font-family: 'Raleway', sans-serif; } -.footer a { +.footer a, .bottom-band a { font-size: 14px; font-weight: 100; font-family: 'Raleway', sans-serif; } -.bottom-band p { +.bottom-band p, .bottom-band a{ padding: 10px; font-size: 13px; - color: #e0e4e9; - font-family: 'Raleway', sans-serif; } -@media screen and (max-width:775px) { - .footer .row .column:nth-child(1) { - margin-right: 20px; +@media screen and (max-width:1000px) { + .footer .row { + flex-wrap: wrap; + /* justify-content: space-evenly; */ } - .footer .row .column:nth-child(2) { - margin-right: 20px; + .footer .row .column:nth-child(1) { + margin-right: 30px; } -} -@media screen and (max-width:600px) { - .footer .row .column:nth-child(3) { + /* .footer .row .column:nth-child(2),.footer .row .column:nth-child(3) { + margin-right: 15px; + } */ + .footer .row .column:nth-child(4) { display: None; } .footer .download { @@ -1073,26 +1222,28 @@ body{ .footer .download .download-pics img { width: 48%; height: auto; + max-width: 300px; min-width: 120px; - margin-bottom: 11px; } - .footer .download .download-pics img:hover { - cursor: pointer; +} +@media screen and (max-width:600px) { + .footer .row .column:nth-child(2),.footer .row .column:nth-child(3) { + min-width: 170px; } } -@media screen and (max-width:400px) { +@media screen and (max-width:430px) { .footer { padding: 30px; } .footer h4 { white-space: nowrap; } - .footer .row { - flex-wrap: wrap; - } .footer .row .column:nth-child(1) { min-width: 200px; } + .footer .row .column:nth-child(2),.footer .row .column:nth-child(3) { + margin-right: 10px; + } .footer .follow-us .socials { width: 150px; }