commit 4b50382cd345ac4c39cb1618cf14e28e881a69ed Author: bharath Date: Mon Oct 31 13:01:43 2022 +0530 Latest Update diff --git a/_breakpoints.scss b/_breakpoints.scss new file mode 100644 index 0000000..96f601b --- /dev/null +++ b/_breakpoints.scss @@ -0,0 +1,6 @@ +$breakpoints: ("mobile":450px); +@mixin mobile { + @media (max-width: map-get($breakpoints, "mobile")) { + @content; + } +} \ No newline at end of file diff --git a/_mixins.scss b/_mixins.scss new file mode 100644 index 0000000..b1431f9 --- /dev/null +++ b/_mixins.scss @@ -0,0 +1,41 @@ +@import "_breakpoints"; + +@mixin container { + width: 100%; + max-width: 1200px; + margin: 0 auto; +} +@mixin flex-row { + display: flex; + flex-direction: row; +} +@mixin flex-column { + display: flex; + flex-direction: column; +} +@mixin flex-center { + display: flex; + justify-content: center; + align-items: center; +} +@mixin content-box-hover { + background-image: url(images/pexels-karolina-grabowska-5882705.jpg); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + position: relative; + + .content-box-items { + position: relative; + z-index: 1; + color: white; + + h3 { + color: white; + } + } + + .overlay-blue { + opacity: 0.8; + } +} \ No newline at end of file diff --git a/_reset.scss b/_reset.scss new file mode 100644 index 0000000..3dfa98c --- /dev/null +++ b/_reset.scss @@ -0,0 +1,34 @@ +@import "_mixins"; + +*, body{ + margin: 0; + padding: 0; + list-style: none; + box-sizing: border-box; + font-family: Roboto; +} + +p{ + opacity: 0.8; +} +.container{ + @include container; +} +img{ + width: 100%; +} +.overlay-blue { + width: 100%; + height: 100%; + background-color: $secondary-color; + opacity: 0.8; + top: 0; + left: 0; + bottom: 0; + right: 0; + position: absolute; +} +a{ + text-decoration: none; +} + diff --git a/_variables.scss b/_variables.scss new file mode 100644 index 0000000..4db18a2 --- /dev/null +++ b/_variables.scss @@ -0,0 +1,4 @@ +$primary-color: #652EE1; +$secondary-color: #221543; +$tertiary-color: #103660; +$quaternary-color: #EEEFF3; \ No newline at end of file diff --git a/images/amazon.png b/images/amazon.png new file mode 100644 index 0000000..b4e7c9f Binary files /dev/null and b/images/amazon.png differ diff --git a/images/call.svg b/images/call.svg new file mode 100644 index 0000000..167c21c --- /dev/null +++ b/images/call.svg @@ -0,0 +1 @@ +Call \ No newline at end of file diff --git a/images/cart.png b/images/cart.png new file mode 100644 index 0000000..e6c9467 Binary files /dev/null and b/images/cart.png differ diff --git a/images/chevron-forward.svg b/images/chevron-forward.svg new file mode 100644 index 0000000..e80a88f --- /dev/null +++ b/images/chevron-forward.svg @@ -0,0 +1,10 @@ + + + + + + + diff --git a/images/circular-wall-clock.png b/images/circular-wall-clock.png new file mode 100644 index 0000000..259e17e Binary files /dev/null and b/images/circular-wall-clock.png differ diff --git a/images/cisco.png b/images/cisco.png new file mode 100644 index 0000000..d17a441 Binary files /dev/null and b/images/cisco.png differ diff --git a/images/document.png b/images/document.png new file mode 100644 index 0000000..441cc3b Binary files /dev/null and b/images/document.png differ diff --git a/images/dollar.png b/images/dollar.png new file mode 100644 index 0000000..580e809 Binary files /dev/null and b/images/dollar.png differ diff --git a/images/facebook.png b/images/facebook.png new file mode 100644 index 0000000..6d0e772 Binary files /dev/null and b/images/facebook.png differ diff --git a/images/facebook.svg b/images/facebook.svg new file mode 100644 index 0000000..56c40db --- /dev/null +++ b/images/facebook.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/google.png b/images/google.png new file mode 100644 index 0000000..f28dbd8 Binary files /dev/null and b/images/google.png differ diff --git a/images/google.svg b/images/google.svg new file mode 100644 index 0000000..26f6725 --- /dev/null +++ b/images/google.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/headphones.png b/images/headphones.png new file mode 100644 index 0000000..6cab753 Binary files /dev/null and b/images/headphones.png differ diff --git a/images/instagram.png b/images/instagram.png new file mode 100644 index 0000000..48e85c6 Binary files /dev/null and b/images/instagram.png differ diff --git a/images/intel.png b/images/intel.png new file mode 100644 index 0000000..3fa9a14 Binary files /dev/null and b/images/intel.png differ diff --git a/images/linkedin.svg b/images/linkedin.svg new file mode 100644 index 0000000..1b0ebb2 --- /dev/null +++ b/images/linkedin.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/location.svg b/images/location.svg new file mode 100644 index 0000000..09fbff9 --- /dev/null +++ b/images/location.svg @@ -0,0 +1 @@ +Location \ No newline at end of file diff --git a/images/logo-2.png b/images/logo-2.png new file mode 100644 index 0000000..bb692c9 Binary files /dev/null and b/images/logo-2.png differ diff --git a/images/logo.png b/images/logo.png new file mode 100644 index 0000000..5ff3ab4 Binary files /dev/null and b/images/logo.png differ diff --git a/images/love-hand-drawn-heart-symbol-outline.png b/images/love-hand-drawn-heart-symbol-outline.png new file mode 100644 index 0000000..7af1b8c Binary files /dev/null and b/images/love-hand-drawn-heart-symbol-outline.png differ diff --git a/images/magnifying-glass.png b/images/magnifying-glass.png new file mode 100644 index 0000000..ba988cc Binary files /dev/null and b/images/magnifying-glass.png differ diff --git a/images/mail.svg b/images/mail.svg new file mode 100644 index 0000000..5ffe7dc --- /dev/null +++ b/images/mail.svg @@ -0,0 +1 @@ +Mail \ No newline at end of file diff --git a/images/map-pin.png b/images/map-pin.png new file mode 100644 index 0000000..cbc4a91 Binary files /dev/null and b/images/map-pin.png differ diff --git a/images/pexels-karolina-grabowska-5882705.jpg b/images/pexels-karolina-grabowska-5882705.jpg new file mode 100644 index 0000000..1320d3a Binary files /dev/null and b/images/pexels-karolina-grabowska-5882705.jpg differ diff --git a/images/phone.png b/images/phone.png new file mode 100644 index 0000000..32328c3 Binary files /dev/null and b/images/phone.png differ diff --git a/images/pie-chart.png b/images/pie-chart.png new file mode 100644 index 0000000..e7ac243 Binary files /dev/null and b/images/pie-chart.png differ diff --git a/images/samsung.png b/images/samsung.png new file mode 100644 index 0000000..549a11f Binary files /dev/null and b/images/samsung.png differ diff --git a/images/staff-1.webp b/images/staff-1.webp new file mode 100644 index 0000000..a25cb77 Binary files /dev/null and b/images/staff-1.webp differ diff --git a/images/staff-2.jpeg b/images/staff-2.jpeg new file mode 100644 index 0000000..074082b Binary files /dev/null and b/images/staff-2.jpeg differ diff --git a/images/staff-3.webp b/images/staff-3.webp new file mode 100644 index 0000000..0a1a18f Binary files /dev/null and b/images/staff-3.webp differ diff --git a/images/staff-4.jpeg b/images/staff-4.jpeg new file mode 100644 index 0000000..af0abaf Binary files /dev/null and b/images/staff-4.jpeg differ diff --git a/images/support.png b/images/support.png new file mode 100644 index 0000000..ace3a38 Binary files /dev/null and b/images/support.png differ diff --git a/images/time.svg b/images/time.svg new file mode 100644 index 0000000..0157009 --- /dev/null +++ b/images/time.svg @@ -0,0 +1 @@ +Time \ No newline at end of file diff --git a/images/trophy.png b/images/trophy.png new file mode 100644 index 0000000..4dd6d0a Binary files /dev/null and b/images/trophy.png differ diff --git a/images/twitter.png b/images/twitter.png new file mode 100644 index 0000000..4a74d43 Binary files /dev/null and b/images/twitter.png differ diff --git a/images/twitter.svg b/images/twitter.svg new file mode 100644 index 0000000..4d241f1 --- /dev/null +++ b/images/twitter.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..9caa8b6 --- /dev/null +++ b/index.html @@ -0,0 +1,620 @@ + + + + + + + + Financial + + + + + + + + +
+
+ +
+
+
+

Communication is the key for any Global Business

+
+ About Us + Our Services +
+
+
+
+
+
+
+

Would you like to speak to one of our wealth advisers?

+

Just submit your contact details and we'll be in touch shortly.

+
+
+
+ Get Quote +
+
+
+
+
+
+

About Us

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore + et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. +

+
+
+
+
+
+
+ +
+

Financial Projection

+

+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo + consequat. +

+
+
+
+
+
+
+ +
+

Financial Projection

+

+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo + consequat. +

+
+
+
+
+
+
+ +
+

Financial Projection

+

+ Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. +

+
+
+
+
+
+
+
+
+
+

We advise you, you call the right decision!

+

We help enterpreneurs get their act together before they talk to investors.

+
+
+
+
+ +
+

90

+

Companies consulted

+
+
+
+ +
+

120

+

Consultants

+
+
+
+ +
+

50

+

Awards Winning

+
+
+
+ +
+

240

+

Satisfied Customers

+
+
+
+
+
+
+

Our Industries

+
    +
  • +
    + +
    +
    +

    Corporate Finance

    +

    + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. +

    +
    +
    • +
  • +
    + +
    +
    +

    Corporate Finance

    +

    + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. +

    +
    +
    • +
  • +
    + +
    +
    +

    Corporate Finance

    +

    + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. +

    +
    +
    • +
  • +
    + +
    +
    +

    Corporate Finance

    +

    + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. +

    +
    +
    • +
  • +
    + +
    +
    +

    Corporate Finance

    +

    + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. +

    +
    +
    • +
  • +
    + +
    +
    +

    Corporate Finance

    +

    + Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. +

    +
    +
    • +
+
+
+
+
+
+

Meet Our Team

+

We are here to Acelerate your business and help you find the way.

+
+ +
+
+
+
+
+
+

Request a call back

+

Would you like to speak to one of our financial advisers? Just submit your contact details and we'll + be in touch shortly. You can also email us if you prefer that type of communication.

+
+
+ + + + +
+
+
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..8a2b7ad --- /dev/null +++ b/style.css @@ -0,0 +1,1172 @@ +*, body { + margin: 0; + padding: 0; + list-style: none; + box-sizing: border-box; + font-family: Roboto; +} + +p { + opacity: 0.8; +} + +.container { + width: 100%; + max-width: 1200px; + margin: 0 auto; +} + +img { + width: 100%; +} + +.overlay-blue { + width: 100%; + height: 100%; + background-color: #221543; + opacity: 0.8; + top: 0; + left: 0; + bottom: 0; + right: 0; + position: absolute; +} + +a { + text-decoration: none; +} + +#menu { + position: absolute; + opacity: 0; +} +#menu:checked + .hamburger-menu .patty { + background-color: white; +} +#menu:checked + .hamburger-menu .patty::before { + transform: rotate(-45deg); + top: 0; + left: 0; + opacity: 0.5; +} +#menu:checked + .hamburger-menu .patty::after { + transform: rotate(45deg); + top: 0; + left: 0; + opacity: 0.5; +} +#menu:checked ~ header .container .navbar { + height: 55vh; +} +#menu:checked ~ header .container .overlay { + width: 100%; + height: 100vh; + position: absolute; + background-color: black; + left: 0; + z-index: 3; + opacity: 0.9; +} + +.hamburger-menu { + position: absolute; + top: 5.5rem; + right: 2rem; + cursor: pointer; + z-index: 5; + display: none; +} +@media (max-width: 450px) { + .hamburger-menu { + display: block; + } +} +.hamburger-menu .patty { + width: 1.5rem; + height: 0.2rem; + background-color: black; + position: relative; + transition: transform 0.3s; +} +.hamburger-menu .patty::before { + content: ""; + position: absolute; + top: -0.5rem; + left: -0.25rem; + width: 1.5rem; + height: 0.2rem; + background-color: black; + transition: transform 0.3s; +} +.hamburger-menu .patty::after { + content: ""; + position: absolute; + top: 0.5rem; + left: 0.25rem; + width: 1.5rem; + height: 0.2rem; + background-color: black; + transition: transform 0.3s; +} + +header { + position: relative; +} +@media (max-width: 450px) { + header { + display: flex; + flex-direction: column; + } +} +header .top-bar { + background-color: #EEEFF3; +} +header .top-bar .container { + display: flex; + flex-direction: row; +} +@media (max-width: 450px) { + header .top-bar .container { + width: 100%; + justify-content: space-between; + } +} +header .top-bar .container .top-bar-button { + display: flex; + width: 10%; + justify-content: center; +} +@media (max-width: 450px) { + header .top-bar .container .top-bar-button { + display: none; + } +} +header .top-bar .container .top-bar-button a { + color: white; + text-decoration: none; + background-color: #652EE1; + padding: 1rem; +} +header .top-bar .container h5 { + padding-top: 1rem; + text-align: left; + width: 75%; +} +@media (max-width: 450px) { + header .top-bar .container h5 { + width: 70%; + text-align: center; + padding: 0.5rem; + } +} +header .top-bar .container #lang { + background-color: transparent; + border: none; + width: 5%; + margin-right: 2%; +} +@media (max-width: 450px) { + header .top-bar .container #lang { + display: none; + } +} +header .top-bar .container .social { + display: flex; + justify-content: center; + align-items: center; + width: 10%; + border-left: 1px solid lightgrey; + margin: 0; +} +@media (max-width: 450px) { + header .top-bar .container .social { + width: 30%; + } +} +header .top-bar .container .social figure { + width: 50%; + display: flex; +} +header .mid-bar { + padding: 3rem 0 5rem; +} +@media (max-width: 450px) { + header .mid-bar { + padding: 2rem 0; + background-color: white; + } +} +header .mid-bar .container { + display: flex; + flex-direction: row; + justify-content: space-between; +} +@media (max-width: 450px) { + header .mid-bar .container { + display: flex; + flex-direction: column; + } +} +header .mid-bar .container .logo { + width: 25%; + margin-right: 10%; +} +@media (max-width: 450px) { + header .mid-bar .container .logo { + width: 60%; + margin-left: 5%; + } +} +header .mid-bar .container .contact-details { + display: flex; + justify-content: flex-end; + width: 22%; +} +@media (max-width: 450px) { + header .mid-bar .container .contact-details { + display: none; + } +} +header .mid-bar .container .contact-details .left-icon { + margin-right: 10%; + border: 1px solid lightgrey; + height: 3rem; + width: 3rem; + position: relative; + rotate: 45deg; +} +header .mid-bar .container .contact-details .left-icon img { + width: 35%; + top: 33%; + left: 35%; + position: absolute; + rotate: -45deg; +} +header .mid-bar .container .contact-details .details h4 { + color: #103660; +} +header .navbar { + width: 100%; + max-width: 1200px; + margin: 0 auto; + display: flex; + flex-direction: row; + background-color: #221543; + z-index: 1; + position: absolute; + bottom: -2rem; +} +@media (max-width: 450px) { + header .navbar { + display: flex; + flex-direction: column; + bottom: auto; + position: relative; + top: 0; + z-index: 3; + height: 0; + overflow: hidden; + transition: height 1s; + } +} +header .navbar .menu { + display: flex; + flex-direction: row; + margin: 0; + width: 75%; +} +@media (max-width: 450px) { + header .navbar .menu { + display: flex; + flex-direction: column; + width: 100%; + margin-top: 4.4rem; + margin-bottom: 1rem; + } +} +header .navbar .menu a { + display: flex; + justify-content: center; + align-items: center; + color: white; + text-transform: uppercase; + font-size: 0.9rem; + font-weight: 500; + padding: 0 1.6rem; + transition: background-color 0.5s; +} +@media (max-width: 450px) { + header .navbar .menu a { + padding: 1rem 0; + } +} +header .navbar .menu a:hover { + background-color: #652EE1; +} +header .navbar .menu a.active { + background-color: #652EE1; +} +header .navbar .search { + width: 25%; + display: flex; + justify-content: flex-end; +} +@media (max-width: 450px) { + header .navbar .search { + width: 80%; + position: absolute; + margin-top: 0.8rem; + } +} +header .navbar .search input { + padding: 1rem; + border: none; + background-color: transparent; + color: white; + outline: none; + width: 100%; +} +header .navbar .search button { + padding: 0.5rem 1rem; + background-color: transparent; + border: none; +} +header .navbar .search button figure { + width: 1rem; +} +header .navbar a.cart { + display: flex; + padding: 1.5rem; + background-color: transparent; + transition: background-color 0.5s; +} +@media (max-width: 450px) { + header .navbar a.cart { + position: absolute; + top: 0; + right: 0; + border-left: 1px solid rgba(255, 255, 255, 0.2); + } +} +header .navbar a.cart figure { + width: 1rem; +} +header .navbar a.cart:hover { + background-color: #652EE1; +} + +.upfold { + width: 100%; + position: relative; + overflow: hidden; + -o-object-position: bottom; + object-position: bottom; + height: 65vh; +} +@media (max-width: 450px) { + .upfold { + height: auto; + } + .upfold img { + width: 100%; + height: 50vh; + -o-object-fit: cover; + object-fit: cover; + } +} +.upfold .upfold-text { + position: absolute; + z-index: 2; + top: 30%; + width: 100%; +} +@media (max-width: 450px) { + .upfold .upfold-text { + top: auto; + bottom: 0; + } +} +.upfold .upfold-text .container { + display: flex; + flex-direction: column; +} +.upfold .upfold-text .container h1 { + font-size: 4rem; + width: 70%; + margin-bottom: 5%; + color: #103660; +} +@media (max-width: 450px) { + .upfold .upfold-text .container h1 { + font-size: 2rem; + text-align: center; + width: 90%; + margin-left: 5%; + margin-bottom: 10%; + } +} +@media (max-width: 450px) { + .upfold .upfold-text .container .upfold-links { + display: flex; + flex-direction: row; + } +} +.upfold .upfold-text .container .upfold-links a { + background-color: white; + color: #103660; + padding: 0.7rem 2rem; + text-decoration: none; + margin-right: 1%; + text-transform: uppercase; + font-size: 0.8rem; + line-height: 1.5rem; + font-weight: 500; + transition: background-color 0.5s, color 0.5s; +} +@media (max-width: 450px) { + .upfold .upfold-text .container .upfold-links a { + display: flex; + justify-content: center; + align-items: center; + width: 50%; + margin: 0; + } +} +.upfold .upfold-text .container .upfold-links a:nth-child(1) { + background-color: white; + color: #103660; +} +.upfold .upfold-text .container .upfold-links a:nth-child(2) { + background-color: #652EE1; + color: white; +} +.upfold .upfold-text .container .upfold-links a:hover { + opacity: 0.8; +} + +.get-quote { + display: flex; + flex-direction: row; + background-color: #221543; + color: white; + margin: 0; + padding: 2.5rem 0; +} +.get-quote .container { + display: flex; + flex-direction: row; +} +@media (max-width: 450px) { + .get-quote .container { + display: flex; + flex-direction: column; + margin: 0 2rem; + height: 25vh; + justify-content: space-between; + } +} +.get-quote .container .get-quote-text { + width: 90%; +} +@media (max-width: 450px) { + .get-quote .container .get-quote-text { + width: 100%; + } + .get-quote .container .get-quote-text h2 { + margin-bottom: 2rem; + } +} +.get-quote .container .get-quote-button { + display: flex; +} +.get-quote .container .get-quote-button a { + background-color: #652EE1; + color: white; + text-decoration: none; + text-transform: uppercase; + width: 10%; + text-align: center; + padding: 1rem; + font-weight: 600; + font-size: small; + width: 100%; + margin-top: 0.3rem; + opacity: 1; + transition: opacity 0.5s; +} +.get-quote .container .get-quote-button a:hover { + opacity: 0.8; +} + +.about { + padding: 5% 0; + text-align: center; +} +@media (max-width: 450px) { + .about { + padding: 3rem 0; + padding-bottom: 0; + } +} +.about .container { + display: flex; + flex-direction: column; +} +@media (max-width: 450px) { + .about .container .about-text { + width: 90%; + margin: 0 auto; + } +} +.about .container .about-text .heading { + padding-bottom: 7%; + color: #221543; + position: relative; + font-size: 2.5rem; + text-align: center; +} +.about .container .about-text .heading::after { + content: ""; + height: 5px; + width: 5%; + background-color: #652EE1; + position: absolute; + left: 47.5%; + top: 60%; +} +.about .container .about-text .heading p { + width: 70%; + margin-left: 15%; + font-size: large; + line-height: 1.5rem; +} +.about .container .services-short { + display: flex; + margin-top: 5%; + box-shadow: 0rem 0 2rem rgba(0, 0, 0, 0.361); +} +@media (max-width: 450px) { + .about .container .services-short { + margin-top: 4rem; + display: flex; + flex-direction: column; + } +} +.about .container .services-short .content-box { + padding: 3rem; + position: relative; + border-right: 1px solid rgba(196, 196, 196, 0.361); +} +@media (max-width: 450px) { + .about .container .services-short .content-box { + border: none; + } +} +.about .container .services-short .content-box .overlay-blue { + opacity: 0; + transition: opacity 0.5s; +} +@media (max-width: 450px) { + .about .container .services-short .content-box:nth-child(2) { + background-image: url(images/pexels-karolina-grabowska-5882705.jpg); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + position: relative; + } + .about .container .services-short .content-box:nth-child(2) .content-box-items { + position: relative; + z-index: 1; + color: white; + } + .about .container .services-short .content-box:nth-child(2) .content-box-items h3 { + color: white; + } + .about .container .services-short .content-box:nth-child(2) .overlay-blue { + opacity: 0.8; + } +} +.about .container .services-short .content-box:hover { + background-image: url(images/pexels-karolina-grabowska-5882705.jpg); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + position: relative; +} +.about .container .services-short .content-box:hover .content-box-items { + position: relative; + z-index: 1; + color: white; +} +.about .container .services-short .content-box:hover .content-box-items h3 { + color: white; +} +.about .container .services-short .content-box:hover .overlay-blue { + opacity: 0.8; +} +.about .container .services-short .content-box:nth-child(3) { + border: none; +} +.about .container .services-short .content-box figure { + margin: 0 auto; + margin-bottom: 5%; + width: 2rem; +} +.about .container .services-short .content-box h3 { + color: var(--third-color); +} +.about .container .services-short .content-box p { + font-size: medium; + line-height: 1.5rem; + margin-top: 1rem; +} + +.progress-report { + background-image: url(images/pexels-karolina-grabowska-5882705.jpg); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + padding: 5% 0; + position: relative; +} +.progress-report .container { + display: flex; + flex-direction: column; + position: relative; + z-index: 1; +} +.progress-report .container .progress-report-text { + text-align: center; + color: white; +} +@media (max-width: 450px) { + .progress-report .container .progress-report-text { + width: 90%; + margin-left: 5%; + margin-top: 2.5rem; + } +} +.progress-report .container .progress-report-text h2 { + font-size: 2.5rem; + margin-bottom: 1rem; +} +.progress-report .container .progress-report-text p { + font-size: large; +} +.progress-report .container .progress-report-blocks { + display: flex; + flex-direction: row; + justify-content: space-between; +} +@media (max-width: 450px) { + .progress-report .container .progress-report-blocks { + flex-wrap: wrap; + justify-content: space-between; + height: 50vh; + margin-top: 2rem; + } +} +.progress-report .container .progress-report-blocks .progress-box { + display: flex; + flex-direction: column; + align-items: center; + color: white; + margin-top: 5%; +} +@media (max-width: 450px) { + .progress-report .container .progress-report-blocks .progress-box { + width: 50%; + } +} +.progress-report .container .progress-report-blocks .progress-box h2 { + font-size: 3rem; + margin: 0.7rem 0; +} +.progress-report .container .progress-report-blocks .progress-box img { + width: 40px; +} +.progress-report .container .progress-report-blocks .progress-box p { + font-weight: 600; +} + +.industries { + margin: 5% 0; +} +@media (max-width: 450px) { + .industries { + margin: 3rem 0; + } +} +.industries .container { + display: flex; + flex-direction: column; +} +.industries .container .heading { + padding-bottom: 7%; + color: #221543; + position: relative; + font-size: 2.5rem; + text-align: center; +} +@media (max-width: 450px) { + .industries .container .heading { + padding-bottom: 5rem; + } +} +.industries .container .heading::after { + content: ""; + height: 5px; + width: 5%; + background-color: #652EE1; + position: absolute; + left: 47.5%; + top: 60%; +} +@media (max-width: 450px) { + .industries .container .heading::after { + width: 20%; + left: 40%; + } +} +.industries .container .industry-list { + display: flex; + flex-direction: row; + flex-wrap: wrap; + margin-top: 2%; +} +.industries .container .industry-list li { + width: 33.33%; + display: flex; + margin-bottom: 5%; +} +@media (max-width: 450px) { + .industries .container .industry-list li { + width: 50%; + display: flex; + flex-direction: column; + display: flex; + justify-content: center; + align-items: center; + text-align: center; + margin-bottom: 2rem; + } +} +.industries .container .industry-list li:nth-child(4), .industries .container .industry-list li:nth-child(5), .industries .container .industry-list li:nth-child(6) { + margin-bottom: 0; +} +@media (max-width: 450px) { + .industries .container .industry-list li:nth-child(4) { + margin-bottom: 2rem; + } +} +.industries .container .industry-list li figure { + display: flex; + align-items: center; + justify-content: center; + padding: 1rem; + width: 6rem; + height: 3.7rem; + border-radius: 3rem; + background-color: #652EE1; +} +@media (max-width: 450px) { + .industries .container .industry-list li figure { + width: 4rem; + height: 4rem; + margin-bottom: 1rem; + } +} +.industries .container .industry-list li .industry-list-text { + display: flex; + flex-direction: column; + margin-left: 5%; +} +.industries .container .industry-list li .industry-list-text h3 { + color: #103660; + margin-bottom: 3%; +} +.industries .container .industry-list li .industry-list-text p { + line-height: 1.5rem; +} + +.team { + background-color: #EEEFF3; + padding: 5% 0; +} +@media (max-width: 450px) { + .team { + padding: 3rem 0; + } +} +.team .container { + display: flex; + flex-direction: column; +} +.team .container .heading-2 { + text-align: center; + margin-bottom: 5%; +} +.team .container .heading-2 h2 { + font-size: 2rem; + margin-bottom: 1%; +} +.team .container .heading-2 p { + font-size: medium; +} +.team .container .staffs { + display: flex; + flex-direction: row; + justify-content: space-between; +} +@media (max-width: 450px) { + .team .container .staffs { + flex-wrap: wrap; + justify-content: space-around; + } +} +.team .container .staffs li { + width: 25%; + margin-right: 3%; + position: relative; + height: 40vh; + overflow: hidden; +} +@media (max-width: 450px) { + .team .container .staffs li { + width: 45%; + margin: 2.5%; + } +} +.team .container .staffs li:hover .staff-social-media { + bottom: 0; +} +.team .container .staffs li:last-child { + margin: 0; +} +@media (max-width: 450px) { + .team .container .staffs li:last-child { + margin: 2.5%; + } +} +.team .container .staffs li .staff-photo { + width: 100%; + height: 100%; + overflow: hidden; +} +@media (max-width: 450px) { + .team .container .staffs li .staff-photo img { + margin-top: 4rem; + } +} +.team .container .staffs li .staff-details { + position: absolute; + z-index: 1; + bottom: 0; + display: flex; + flex-direction: column; + text-align: center; + width: 100%; + padding: 1rem; + background-color: #221543; + color: white; +} +@media (max-width: 450px) { + .team .container .staffs li .staff-details { + bottom: auto; + top: 0; + } +} +.team .container .staffs li .staff-social-media { + position: absolute; + z-index: 1; + bottom: -5rem; + display: flex; + flex-direction: row; + justify-content: space-around; + width: 100%; + padding: 1.57rem; + background-color: #652EE1; + color: white; + transition: bottom 0.5s; +} +@media (max-width: 450px) { + .team .container .staffs li .staff-social-media { + bottom: 0; + padding: 1rem; + } +} +.team .container .staffs li .staff-social-media a { + padding: 0.25rem; + border-radius: 1rem; +} +.team .container .staffs li .staff-social-media a figure { + height: 24px; +} +.team .container .staffs li .staff-social-media a figure img { + width: 100%; +} +.team .container .staffs li .staff-social-media a:hover { + background-color: white; +} +.team .container .staffs li .staff-social-media a:hover svg { + fill: #652EE1; +} + +.quick-enquiry-form { + padding: 4rem 0; + background-image: url(images/pexels-karolina-grabowska-5882705.jpg); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + position: relative; +} +.quick-enquiry-form .container { + display: flex; + flex-direction: column; +} +.quick-enquiry-form .container .heading-2 { + width: 70%; + margin-left: 15%; + position: relative; + z-index: 1; + color: white; + text-align: center; + padding-bottom: 0; + margin-bottom: 0; +} +@media (max-width: 450px) { + .quick-enquiry-form .container .heading-2 { + width: 90%; + margin-left: 5%; + } +} +.quick-enquiry-form .container .heading-2 h2 { + font-size: 2rem; + margin-bottom: 1rem; +} +.quick-enquiry-form .container .heading-2 p { + line-height: 1.5rem; + margin-bottom: 2rem; +} +.quick-enquiry-form .container form { + position: relative; + z-index: 1; + display: flex; + width: 100%; +} +@media (max-width: 450px) { + .quick-enquiry-form .container form { + flex-wrap: wrap; + justify-content: space-around; + } +} +.quick-enquiry-form .container form select, +.quick-enquiry-form .container form input, +.quick-enquiry-form .container form button { + display: flex; + width: 25%; + margin-right: 1%; + padding: 1rem; + border: none; + font-size: 0.9rem; +} +@media (max-width: 450px) { + .quick-enquiry-form .container form select, +.quick-enquiry-form .container form input, +.quick-enquiry-form .container form button { + width: 65%; + margin-bottom: 0.5rem; + padding: auto; + margin-right: 0; + } +} +.quick-enquiry-form .container form button { + justify-content: center; + color: white; + background-color: #652EE1; + font-weight: 600; + text-transform: uppercase; +} + +.clients { + background-color: #EEEFF3; + padding: 2% 0; +} +.clients .container { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; +} +.clients .container figure { + display: flex; + width: 20%; + padding: 0 5%; +} +.clients .container figure img { + filter: grayscale(1); +} + +footer { + background-color: #221543; + padding: 4% 0; +} +@media (max-width: 450px) { + footer { + padding: 3rem 0; + } +} +footer .container { + display: flex; + flex-direction: row; +} +@media (max-width: 450px) { + footer .container { + display: flex; + flex-direction: column; + } +} +footer .container .company-details, +footer .container .quick-links, +footer .container .recent-news, +footer .container .newsletter { + display: flex; + flex-direction: column; + width: 25%; + color: white; + margin-top: 1rem; +} +@media (max-width: 450px) { + footer .container .company-details, +footer .container .quick-links, +footer .container .recent-news, +footer .container .newsletter { + width: auto; + margin: 2rem 2rem 0 2rem; + } +} +footer .container .company-details { + margin-top: 0; +} +footer .container .company-details figure { + width: 70%; +} +footer .container .company-details p { + font-size: small; + margin-top: 2rem; + margin-right: 2rem; +} +footer .container .company-details ul li { + margin: 1rem 0; + position: relative; + padding-left: 2rem; + font-size: small; + opacity: 0.8; +} +footer .container .company-details ul li::before { + fill: white; + position: absolute; + width: 1rem; + left: 0; + top: 0; +} +footer .container .company-details ul li:nth-child(1)::before { + content: url(images/location.svg); +} +footer .container .company-details ul li:nth-child(2)::before { + content: url(images/call.svg); +} +footer .container .company-details ul li:nth-child(3)::before { + content: url(images/mail.svg); +} +footer .container .quick-links { + width: 25%; +} +@media (max-width: 450px) { + footer .container .quick-links { + width: 100%; + } +} +footer .container .quick-links h3 { + width: 100%; +} +footer .container .quick-links .links { + display: flex; + width: 100%; + margin-top: 2rem; +} +footer .container .quick-links .links ul { + width: 50%; +} +footer .container .quick-links .links ul li { + padding: 0.5rem 0; + padding-left: 2rem; + position: relative; +} +footer .container .quick-links .links ul li::before { + position: absolute; + content: url(images/chevron-forward.svg); + width: 1rem; + top: 0.6rem; + left: 0; + opacity: 0.8; +} +footer .container .quick-links .links ul li a { + text-decoration: none; + color: white; + opacity: 0.8; + font-size: small; +} +footer .container .recent-news { + padding-right: 2rem; +} +footer .container .recent-news ul { + margin-top: 2rem; + display: flex; + flex-direction: column; +} +footer .container .recent-news ul li { + margin-bottom: 1.5rem; + opacity: 0.8; +} +footer .container .recent-news ul li h4 { + font-size: 1.1rem; + font-weight: 100; + margin-bottom: 0.5rem; + line-height: 1.5rem; +} +footer .container .recent-news ul li h5 { + padding-left: 1.5rem; + font-weight: 100; + opacity: 0.5; + position: relative; +} +footer .container .recent-news ul li h5::before { + content: url(images/time.svg); + position: absolute; + width: 16px; + top: 0; + left: 0; +} +footer .container .newsletter { + padding-right: 2rem; +} +footer .container .newsletter p { + margin-top: 1rem; + margin-bottom: 2rem; + font-size: small; +} +footer .container .newsletter form { + display: flex; + flex-direction: column; +} +footer .container .newsletter form input, +footer .container .newsletter form button { + padding: 0.8rem; + margin-bottom: 0.3rem; + border: none; +} +footer .container .newsletter form button { + background-color: #652EE1; + color: white; +}/*# sourceMappingURL=style.css.map */ \ No newline at end of file diff --git a/style.css.map b/style.css.map new file mode 100644 index 0000000..f7e15d6 --- /dev/null +++ b/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["_reset.scss","style.css","_mixins.scss","_variables.scss","style.scss","_breakpoints.scss"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file diff --git a/style.scss b/style.scss new file mode 100644 index 0000000..1f0152c --- /dev/null +++ b/style.scss @@ -0,0 +1,1188 @@ +@import "_variables"; +@import "_mixins"; +@import "_breakpoints"; +@import "_reset"; + +#menu { + position: absolute; + opacity: 0; + + &:checked { + +.hamburger-menu { + .patty { + background-color: white; + + &::before { + transform: rotate(-45deg); + top: 0; + left: 0; + opacity: 0.5; + } + + &::after { + transform: rotate(45deg); + top: 0; + left: 0; + opacity: 0.5; + } + } + } + + + + ~header .container .navbar { + height: 55vh; + } + + ~header .container .overlay { + width: 100%; + height: 100vh; + position: absolute; + background-color: black; + left: 0; + z-index: 3; + opacity: 0.9; + } + } + + +} + +.hamburger-menu { + position: absolute; + top: 5.5rem; + right: 2rem; + cursor: pointer; + z-index: 5; + display: none; + + @include mobile { + display: block; + } + + .patty { + width: 1.5rem; + height: 0.2rem; + background-color: black; + position: relative; + transition: transform 0.3s; + + &::before { + content: ""; + position: absolute; + top: -0.5rem; + left: -0.25rem; + width: 1.5rem; + height: 0.2rem; + background-color: black; + transition: transform 0.3s; + } + + &::after { + content: ""; + position: absolute; + top: 0.5rem; + left: 0.25rem; + width: 1.5rem; + height: 0.2rem; + background-color: black; + transition: transform 0.3s; + } + } +} + +header { + position: relative; + + @include mobile { + @include flex-column; + } + + + .top-bar { + background-color: $quaternary-color; + + + + .container { + @include flex-row; + + @include mobile { + width: 100%; + justify-content: space-between; + } + + .top-bar-button { + display: flex; + width: 10%; + justify-content: center; + + @include mobile { + display: none; + } + + a { + color: white; + text-decoration: none; + background-color: $primary-color; + padding: 1rem; + } + } + + h5 { + padding-top: 1rem; + text-align: left; + width: 75%; + + @include mobile { + width: 70%; + text-align: center; + padding: 0.5rem; + } + } + + #lang { + background-color: transparent; + border: none; + width: 5%; + margin-right: 2%; + + @include mobile { + display: none; + } + } + + .social { + @include flex-center; + width: 10%; + border-left: 1px solid lightgrey; + margin: 0; + + @include mobile { + width: 30%; + } + + figure { + width: 50%; + display: flex; + } + } + } + } + + .mid-bar { + padding: 3rem 0 5rem; + + @include mobile { + padding: 2rem 0; + background-color: white; + } + + .container { + @include flex-row; + justify-content: space-between; + + @include mobile { + @include flex-column; + } + + .logo { + width: 25%; + margin-right: 10%; + + @include mobile { + width: 100%-40%; + margin-left: 5%; + } + } + + .contact-details { + display: flex; + justify-content: flex-end; + width: 22%; + + @include mobile { + display: none; + } + + .left-icon { + margin-right: 10%; + border: 1px solid lightgrey; + height: 3rem; + width: 3rem; + position: relative; + rotate: 45deg; + + img { + width: 35%; + top: 33%; + left: 35%; + position: absolute; + rotate: -45deg; + } + } + + .details { + h4 { + color: $tertiary-color; + } + } + } + } + } + + + .navbar { + @include container; + @include flex-row; + background-color: $secondary-color; + z-index: 1; + position: absolute; + bottom: -2rem; + + @include mobile { + @include flex-column; + bottom: auto; + position: relative; + top: 0; + z-index: 3; + height: 0; + overflow: hidden; + transition: height 1s; + } + + .menu { + @include flex-row; + margin: 0; + width: 75%; + + @include mobile { + @include flex-column; + width: 100%; + margin-top: 4.4rem; + margin-bottom: 1rem + } + + a { + @include flex-center; + color: white; + text-transform: uppercase; + font-size: 0.9rem; + font-weight: 500; + padding: 0 1.6rem; + transition: background-color 0.5s; + + @include mobile { + padding: 1rem 0; + } + + &:hover { + background-color: $primary-color; + } + } + + a.active { + background-color: $primary-color; + } + } + + .search { + width: 25%; + display: flex; + justify-content: flex-end; + + @include mobile { + width: 80%; + position: absolute; + margin-top: 0.8rem; + } + + input { + padding: 1rem; + border: none; + background-color: transparent; + color: white; + outline: none; + width: 100%; + } + + button { + padding: 0.5rem 1rem; + background-color: transparent; + border: none; + + figure { + width: 1rem; + } + } + + } + + a.cart { + display: flex; + padding: 1.5rem; + background-color: transparent; + transition: background-color 0.5s; + + @include mobile { + position: absolute; + top: 0; + right: 0; + border-left: 1px solid rgba(255, 255, 255, 0.2); + } + + figure { + width: 1rem; + } + + &:hover { + background-color: $primary-color; + } + } + } + +} + + +.upfold { + width: 100%; + position: relative; + overflow: hidden; + object-position: bottom; + height: 65vh; + + @include mobile { + height: auto; + + img { + width: 100%; + height: 50vh; + object-fit: cover; + } + } + + .upfold-text { + position: absolute; + z-index: 2; + top: 30%; + width: 100%; + + @include mobile { + top: auto; + bottom: 0; + } + + .container { + @include flex-column; + + h1 { + font-size: 4rem; + width: 70%; + margin-bottom: 5%; + color: $tertiary-color; + + @include mobile { + font-size: 2rem; + text-align: center; + width: 90%; + margin-left: 5%; + margin-bottom: 10%; + } + } + + .upfold-links { + @include mobile { + @include flex-row; + } + + a { + background-color: white; + color: $tertiary-color; + padding: 0.7rem 2rem; + text-decoration: none; + margin-right: 1%; + text-transform: uppercase; + font-size: 0.8rem; + line-height: 1.5rem; + font-weight: 500; + transition: background-color 0.5s, color 0.5s; + + @include mobile { + @include flex-center; + width: 50%; + margin: 0; + } + + &:nth-child(1) { + background-color: white; + color: $tertiary-color; + } + + &:nth-child(2) { + background-color: $primary-color; + color: white; + } + + &:hover { + opacity: 0.8; + } + + } + } + } + } +} + +.get-quote { + @include flex-row; + background-color: $secondary-color; + color: white; + margin: 0; + padding: 2.5rem 0; + + .container { + @include flex-row; + + @include mobile { + @include flex-column; + margin: 0 2rem; + height: 25vh; + justify-content: space-between; + } + + .get-quote-text { + width: 90%; + + @include mobile { + width: 100%; + + h2 { + margin-bottom: 2rem; + } + } + } + + .get-quote-button { + display: flex; + + a { + background-color: $primary-color; + color: white; + text-decoration: none; + text-transform: uppercase; + width: 10%; + text-align: center; + padding: 1rem; + font-weight: 600; + font-size: small; + width: 100%; + margin-top: 0.3rem; + opacity: 1; + transition: opacity 0.5s; + + &:hover { + opacity: 0.8; + } + } + } + } +} + +.about { + padding: 5% 0; + text-align: center; + + @include mobile { + padding: 3rem 0; + padding-bottom: 0; + } + + .container { + @include flex-column; + + .about-text { + @include mobile { + width: 90%; + margin: 0 auto; + } + + .heading { + padding-bottom: 7%; + color: $secondary-color; + position: relative; + font-size: 2.5rem; + text-align: center; + + &::after { + content: ''; + height: 5px; + width: 5%; + background-color: $primary-color; + position: absolute; + left: 47.5%; + top: 60%; + } + + p { + width: 70%; + margin-left: 15%; + font-size: large; + line-height: 1.5rem; + } + } + } + + .services-short { + display: flex; + margin-top: 5%; + box-shadow: 0rem 0 2rem rgba(0, 0, 0, 0.361); + + @include mobile { + margin-top: 4rem; + @include flex-column; + } + + .content-box { + padding: 3rem; + position: relative; + border-right: 1px solid rgba(196, 196, 196, 0.361); + + @include mobile { + border: none; + } + + .overlay-blue { + opacity: 0; + transition: opacity 0.5s; + } + + &:nth-child(2) { + @include mobile { + @include content-box-hover; + } + } + + &:hover { + @include content-box-hover + } + + &:nth-child(3) { + border: none; + } + + figure { + margin: 0 auto; + margin-bottom: 5%; + width: 2rem; + } + + h3 { + color: var(--third-color); + } + + p { + font-size: medium; + line-height: 1.5rem; + margin-top: 1rem; + } + } + } + } + +} + +.progress-report { + background-image: url(images/pexels-karolina-grabowska-5882705.jpg); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + padding: 5% 0; + position: relative; + + .container { + @include flex-column; + position: relative; + z-index: 1; + + + .progress-report-text { + text-align: center; + color: white; + + @include mobile { + width: 90%; + margin-left: 5%; + margin-top: 2.5rem; + } + + h2 { + font-size: 2.5rem; + margin-bottom: 1rem; + } + + p { + font-size: large; + } + } + + .progress-report-blocks { + @include flex-row; + justify-content: space-between; + + @include mobile { + flex-wrap: wrap; + justify-content: space-between; + height: 50vh; + margin-top: 2rem; + } + + .progress-box { + @include flex-column; + align-items: center; + color: white; + margin-top: 5%; + + @include mobile { + width: 50%; + } + + h2 { + font-size: 3rem; + margin: 0.7rem 0; + } + + img { + width: 40px; + } + + p { + font-weight: 600; + } + } + } + } +} + +.industries { + margin: 5% 0; + + @include mobile { + margin: 3rem 0; + } + + .container { + @include flex-column; + + .heading { + padding-bottom: 7%; + color: $secondary-color; + position: relative; + font-size: 2.5rem; + text-align: center; + + @include mobile { + padding-bottom: 5rem; + } + + &::after { + content: ''; + height: 5px; + width: 5%; + background-color: $primary-color; + position: absolute; + left: 47.5%; + top: 60%; + + @include mobile { + width: 20%; + left: 40%; + } + } + } + + .industry-list { + display: flex; + flex-direction: row; + flex-wrap: wrap; + margin-top: 2%; + + li { + width: 33.33%; + display: flex; + margin-bottom: 5%; + + @include mobile { + width: 50%; + @include flex-column; + @include flex-center; + text-align: center; + margin-bottom: 2rem; + } + + &:nth-child(4), + &:nth-child(5), + &:nth-child(6) { + margin-bottom: 0; + } + + &:nth-child(4) { + @include mobile { + margin-bottom: 2rem; + } + } + + figure { + display: flex; + align-items: center; + justify-content: center; + padding: 1rem; + width: 6rem; + height: 3.7rem; + border-radius: 3rem; + background-color: $primary-color; + + @include mobile { + width: 4rem; + height: 4rem; + margin-bottom: 1rem; + } + } + + .industry-list-text { + display: flex; + flex-direction: column; + margin-left: 5%; + + h3 { + color: $tertiary-color; + margin-bottom: 3%; + } + + p { + line-height: 1.5rem; + } + } + } + } + } +} + +.team { + background-color: $quaternary-color; + padding: 5% 0; + + @include mobile { + padding: 3rem 0; + } + + .container { + @include flex-column; + + .heading-2 { + text-align: center; + margin-bottom: 5%; + + h2 { + font-size: 2rem; + margin-bottom: 1%; + } + + p { + font-size: medium; + } + } + + .staffs { + @include flex-row; + justify-content: space-between; + + @include mobile { + flex-wrap: wrap; + justify-content: space-around; + } + + li { + width: 25%; + margin-right: 3%; + position: relative; + height: 40vh; + overflow: hidden; + + @include mobile { + width: 45%; + margin: 2.5%; + } + + &:hover { + .staff-social-media { + bottom: 0; + } + } + + &:last-child { + margin: 0; + + @include mobile { + margin: 2.5%; + } + } + + .staff-photo { + width: 100%; + height: 100%; + overflow: hidden; + + img { + @include mobile { + margin-top: 4rem; + } + } + } + + .staff-details { + position: absolute; + z-index: 1; + bottom: 0; + display: flex; + flex-direction: column; + text-align: center; + width: 100%; + padding: 1rem; + background-color: $secondary-color; + color: white; + + @include mobile { + bottom: auto; + top: 0; + } + } + + .staff-social-media { + position: absolute; + z-index: 1; + bottom: -5rem; + display: flex; + flex-direction: row; + justify-content: space-around; + width: 100%; + padding: 1.57rem; + background-color: $primary-color; + color: white; + transition: bottom 0.5s; + + @include mobile { + bottom: 0; + padding: 1rem; + } + + a { + padding: 0.25rem; + border-radius: 1rem; + + figure { + height: 24px; + + img { + width: 100%; + } + } + + &:hover { + background-color: white; + + svg { + fill: $primary-color; + } + } + } + } + } + } + } +} + +.quick-enquiry-form { + padding: 4rem 0; + background-image: url(images/pexels-karolina-grabowska-5882705.jpg); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + position: relative; + + .container { + @include flex-column; + + .heading-2 { + width: 70%; + margin-left: 15%; + position: relative; + z-index: 1; + color: white; + text-align: center; + padding-bottom: 0; + margin-bottom: 0; + + @include mobile { + width: 90%; + margin-left: 5%; + } + + h2 { + font-size: 2rem; + margin-bottom: 1rem; + } + + p { + line-height: 1.5rem; + margin-bottom: 2rem; + } + } + + form { + position: relative; + z-index: 1; + display: flex; + width: 100%; + + @include mobile { + flex-wrap: wrap; + justify-content: space-around; + } + + select, + input, + button { + display: flex; + width: 25%; + margin-right: 1%; + padding: 1rem; + border: none; + font-size: 0.9rem; + + @include mobile { + width: 65%; + margin-bottom: 0.5rem; + padding: auto; + margin-right: 0; + } + } + + button { + justify-content: center; + color: white; + background-color: $primary-color; + font-weight: 600; + text-transform: uppercase; + + } + } + } +} + +.clients { + background-color: $quaternary-color; + padding: 2% 0; + + .container { + @include flex-row; + align-items: center; + justify-content: space-between; + + figure { + display: flex; + width: 20%; + padding: 0 5%; + + img { + filter: grayscale(1); + } + } + } +} + +footer { + background-color: $secondary-color; + padding: 4% 0; + + @include mobile { + padding: 3rem 0; + } + + .container { + @include flex-row; + + @include mobile { + @include flex-column; + } + + .company-details, + .quick-links, + .recent-news, + .newsletter { + @include flex-column; + width: 25%; + color: white; + margin-top: 1rem; + + @include mobile { + width: auto; + margin: 2rem 2rem 0 2rem; + } + } + + .company-details { + margin-top: 0; + + figure { + width: 70%; + } + + p { + font-size: small; + margin-top: 2rem; + margin-right: 2rem; + } + + ul li { + margin: 1rem 0; + position: relative; + padding-left: 2rem; + font-size: small; + opacity: 0.8; + + &::before { + fill: white; + position: absolute; + width: 1rem; + left: 0; + top: 0; + } + + &:nth-child(1) { + &::before { + content: url(images/location.svg); + } + } + + &:nth-child(2) { + &::before { + content: url(images/call.svg); + } + } + + &:nth-child(3) { + &::before { + content: url(images/mail.svg); + } + } + } + } + + .quick-links { + width: 25%; + + @include mobile { + width: 100%; + } + + h3 { + width: 100%; + } + + .links { + display: flex; + width: 100%; + margin-top: 2rem; + + ul { + width: 50%; + + li { + padding: 0.5rem 0; + padding-left: 2rem; + position: relative; + + &::before { + position: absolute; + content: url(images/chevron-forward.svg); + width: 1rem; + top: 0.6rem; + left: 0; + opacity: 0.8; + } + + a { + text-decoration: none; + color: white; + opacity: 0.8; + font-size: small; + } + } + } + } + } + + .recent-news { + padding-right: 2rem; + + ul { + margin-top: 2rem; + display: flex; + flex-direction: column; + + li { + margin-bottom: 1.5rem; + opacity: 0.8; + + h4 { + font-size: 1.1rem; + font-weight: 100; + margin-bottom: 0.5rem; + line-height: 1.5rem; + } + + h5 { + padding-left: 1.5rem; + font-weight: 100; + opacity: 0.5; + position: relative; + + &::before { + content: url(images/time.svg); + position: absolute; + width: 16px; + top: 0; + left: 0; + } + } + } + } + } + + .newsletter { + padding-right: 2rem; + + p { + margin-top: 1rem; + margin-bottom: 2rem; + font-size: small; + } + + form { + @include flex-column; + + input, + button { + padding: 0.8rem; + margin-bottom: 0.3rem; + border: none; + } + + button { + background-color: $primary-color; + color: white; + } + } + } + } +} \ No newline at end of file