├── styles ├── _animation.scss ├── _buttons.scss ├── _fonts.scss ├── _config.scss ├── style.scss ├── _utilities.scss ├── _footer.scss ├── _services.scss ├── _gallery.scss ├── _contact_us.scss ├── _normalize.scss ├── _common.scss ├── _homepage.scss ├── style.css.map └── style.css ├── public ├── img │ ├── blueLogo.png │ ├── headerBg.jpg │ ├── square.jpg │ ├── personImg.jpg │ ├── whiteLogo.png │ ├── projectsImage.jpg │ ├── servicesImage.jpg │ ├── vinyl-floor.jpg │ ├── project-image-1.jpg │ ├── project-image-2.jpg │ ├── project-image-3.jpg │ ├── project-image-4.jpg │ ├── project-image-5.jpg │ ├── project-image-6.jpg │ ├── project-image-7.jpg │ ├── project-image-8.jpg │ ├── project-image-9.jpg │ ├── projectsImage2.jpg │ ├── project-image-10.jpg │ └── project-image-11.jpg └── favicon_package │ ├── favicon-16x16.ico │ ├── favicon-32x32.ico │ ├── apple-touch-icon.ico │ ├── mstile-150x150.png │ ├── android-chrome-192x192.ico │ ├── android-chrome-256x256.ico │ ├── browserconfig.xml │ ├── site.webmanifest │ └── safari-pinned-tab.svg ├── netlify.toml ├── next.config.js ├── pages ├── _app.js ├── _document.js ├── api │ └── send.js ├── index.js ├── services.js ├── contactus.js └── gallery.js ├── README.md ├── components ├── layout.js ├── WhatMore.js ├── WhyWorkWithUs.js ├── header.js ├── WhoAreWe.js ├── ServicesWeOffer.js ├── Testomonials.js ├── ViewOurProjects.js ├── footer.js └── navbar.js ├── .gitignore ├── package.json └── css └── style.css /styles/_animation.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /styles/_buttons.scss: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/blueLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeonChisum/Flooring-company---87-Lux/HEAD/public/img/blueLogo.png -------------------------------------------------------------------------------- /public/img/headerBg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeonChisum/Flooring-company---87-Lux/HEAD/public/img/headerBg.jpg -------------------------------------------------------------------------------- /public/img/square.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeonChisum/Flooring-company---87-Lux/HEAD/public/img/square.jpg -------------------------------------------------------------------------------- /public/img/personImg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeonChisum/Flooring-company---87-Lux/HEAD/public/img/personImg.jpg -------------------------------------------------------------------------------- /public/img/whiteLogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeonChisum/Flooring-company---87-Lux/HEAD/public/img/whiteLogo.png -------------------------------------------------------------------------------- /netlify.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | command = "npm run build" 3 | functions = "out_functions" 4 | publish = "out_publish" 5 | -------------------------------------------------------------------------------- /public/img/projectsImage.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeonChisum/Flooring-company---87-Lux/HEAD/public/img/projectsImage.jpg -------------------------------------------------------------------------------- /public/img/servicesImage.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeonChisum/Flooring-company---87-Lux/HEAD/public/img/servicesImage.jpg -------------------------------------------------------------------------------- /public/img/vinyl-floor.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeonChisum/Flooring-company---87-Lux/HEAD/public/img/vinyl-floor.jpg -------------------------------------------------------------------------------- /public/img/project-image-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeonChisum/Flooring-company---87-Lux/HEAD/public/img/project-image-1.jpg -------------------------------------------------------------------------------- /public/img/project-image-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeonChisum/Flooring-company---87-Lux/HEAD/public/img/project-image-2.jpg -------------------------------------------------------------------------------- /public/img/project-image-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeonChisum/Flooring-company---87-Lux/HEAD/public/img/project-image-3.jpg -------------------------------------------------------------------------------- /public/img/project-image-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeonChisum/Flooring-company---87-Lux/HEAD/public/img/project-image-4.jpg -------------------------------------------------------------------------------- /public/img/project-image-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeonChisum/Flooring-company---87-Lux/HEAD/public/img/project-image-5.jpg -------------------------------------------------------------------------------- /public/img/project-image-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeonChisum/Flooring-company---87-Lux/HEAD/public/img/project-image-6.jpg -------------------------------------------------------------------------------- /public/img/project-image-7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeonChisum/Flooring-company---87-Lux/HEAD/public/img/project-image-7.jpg -------------------------------------------------------------------------------- /public/img/project-image-8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeonChisum/Flooring-company---87-Lux/HEAD/public/img/project-image-8.jpg -------------------------------------------------------------------------------- /public/img/project-image-9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeonChisum/Flooring-company---87-Lux/HEAD/public/img/project-image-9.jpg -------------------------------------------------------------------------------- /public/img/projectsImage2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeonChisum/Flooring-company---87-Lux/HEAD/public/img/projectsImage2.jpg -------------------------------------------------------------------------------- /public/img/project-image-10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeonChisum/Flooring-company---87-Lux/HEAD/public/img/project-image-10.jpg -------------------------------------------------------------------------------- /public/img/project-image-11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeonChisum/Flooring-company---87-Lux/HEAD/public/img/project-image-11.jpg -------------------------------------------------------------------------------- /public/favicon_package/favicon-16x16.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeonChisum/Flooring-company---87-Lux/HEAD/public/favicon_package/favicon-16x16.ico -------------------------------------------------------------------------------- /public/favicon_package/favicon-32x32.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeonChisum/Flooring-company---87-Lux/HEAD/public/favicon_package/favicon-32x32.ico -------------------------------------------------------------------------------- /public/favicon_package/apple-touch-icon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeonChisum/Flooring-company---87-Lux/HEAD/public/favicon_package/apple-touch-icon.ico -------------------------------------------------------------------------------- /public/favicon_package/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeonChisum/Flooring-company---87-Lux/HEAD/public/favicon_package/mstile-150x150.png -------------------------------------------------------------------------------- /public/favicon_package/android-chrome-192x192.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeonChisum/Flooring-company---87-Lux/HEAD/public/favicon_package/android-chrome-192x192.ico -------------------------------------------------------------------------------- /public/favicon_package/android-chrome-256x256.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LeonChisum/Flooring-company---87-Lux/HEAD/public/favicon_package/android-chrome-256x256.ico -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | const withCSS = require('@zeit/next-css'); 2 | const withSass = require('@zeit/next-sass'); 3 | 4 | module.exports = withCSS( 5 | withSass({ 6 | target: 'serverless', 7 | }) 8 | ); 9 | -------------------------------------------------------------------------------- /pages/_app.js: -------------------------------------------------------------------------------- 1 | import Layout from '../components/layout'; 2 | 3 | function MyApp({ Component, pageProps }) { 4 | return ( 5 | 6 | 7 | 8 | ); 9 | } 10 | 11 | export default MyApp; 12 | -------------------------------------------------------------------------------- /styles/_fonts.scss: -------------------------------------------------------------------------------- 1 | // Google fonts link 2 | @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap'); 3 | 4 | @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap'); -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Alexis Flooring - 87 Lux 2 | 3 | Run npm install to install all the dependencies and then npm run dev to start the next server 4 | 5 | Design link - https://www.figma.com/file/RIhw6OwxgwWge0qvDoUW4N/Untitled?node-id=0%3A1 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /styles/_config.scss: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: $primary_font; 6 | } 7 | 8 | body { 9 | min-height: 100vh; 10 | } 11 | 12 | li { 13 | list-style-type: none; 14 | } 15 | 16 | a { 17 | text-decoration: none; 18 | } 19 | -------------------------------------------------------------------------------- /public/favicon_package/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #da532c 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /components/layout.js: -------------------------------------------------------------------------------- 1 | import Footer from '../components/footer'; 2 | import Navbar from '../components/navbar'; 3 | 4 | import '../styles/style.scss'; 5 | 6 | export default function Layout(props) { 7 | return ( 8 |
9 | 10 |
{props.children}
11 |
13 | ); 14 | } 15 | -------------------------------------------------------------------------------- /styles/style.scss: -------------------------------------------------------------------------------- 1 | /********* Custom Styles *********/ 2 | 3 | @import "normalize"; 4 | @import "fonts"; 5 | @import "utilities"; 6 | @import "config"; 7 | @import "buttons"; 8 | @import "animation"; 9 | 10 | /********* Pages Styles *********/ 11 | 12 | @import "common"; 13 | @import "homepage"; 14 | @import "services"; 15 | @import "gallery"; 16 | @import "contact_us"; 17 | -------------------------------------------------------------------------------- /components/WhatMore.js: -------------------------------------------------------------------------------- 1 | import Link from 'next/link'; 2 | import React from 'react'; 3 | 4 | import '../styles/style.scss'; 5 | 6 | const WhatMore = () => { 7 | return ( 8 |
9 |

What more are you waiting for?

10 |

Get a Quote from us and let’s get started working!

11 | 12 | Get a Quote 13 | 14 |
15 | ); 16 | }; 17 | 18 | export default WhatMore; 19 | -------------------------------------------------------------------------------- /pages/_document.js: -------------------------------------------------------------------------------- 1 | import Document, { Html, Head, Main, NextScript } from 'next/document'; 2 | 3 | class MyDocument extends Document { 4 | static async getInitialProps(ctx) { 5 | const initialProps = await Document.getInitialProps(ctx); 6 | return { ...initialProps }; 7 | } 8 | 9 | render() { 10 | return ( 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | ); 19 | } 20 | } 21 | 22 | export default MyDocument; 23 | -------------------------------------------------------------------------------- /public/favicon_package/site.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "name": "", 3 | "short_name": "", 4 | "icons": [ 5 | { 6 | "src": "/android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "/android-chrome-256x256.png", 12 | "sizes": "256x256", 13 | "type": "image/png" 14 | } 15 | ], 16 | "theme_color": "#ffffff", 17 | "background_color": "#ffffff", 18 | "display": "standalone" 19 | } 20 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # local env files 28 | .env 29 | .env.local 30 | .env.development.local 31 | .env.test.local 32 | .env.production.local 33 | 34 | # vercel 35 | .vercel 36 | 37 | # Files generated by next-on-netlify command 38 | /out_publish/ 39 | /out_functions/ -------------------------------------------------------------------------------- /pages/api/send.js: -------------------------------------------------------------------------------- 1 | const sgMail = require('@sendgrid/mail'); 2 | 3 | export default async function (req, res) { 4 | sgMail.setApiKey(process.env.SENDGRID_API_KEY); 5 | 6 | const { email, message, name } = req.body; 7 | 8 | const content = { 9 | to: 'leonchisum3306@gmail.com', 10 | from: 'testwebsitemoto@gmail.com', 11 | subject: `New Message From - ${email}`, 12 | text: message, 13 | html: `

${name} has sent you the following message : ${message}

`, 14 | }; 15 | 16 | try { 17 | await sgMail.send(content); 18 | res.status(200).send('Message sent successfully.'); 19 | } catch (error) { 20 | console.log('API ERROR', error); 21 | res.status(400).send('Message not sent.'); 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "app", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "format": "prettier --write \"{,!(.next)/**/}*.{js, jsx}\"", 7 | "dev": "next dev", 8 | "build": "next build", 9 | "start": "next start", 10 | "postbuild": "next-on-netlify" 11 | }, 12 | "dependencies": { 13 | "@sendgrid/mail": "^7.4.0", 14 | "@zeit/next-css": "^1.0.1", 15 | "@zeit/next-sass": "^1.0.1", 16 | "dotenv": "^8.2.0", 17 | "next": "10.0.4", 18 | "next-on-netlify": "^2.8.1", 19 | "node-sass": "^4.12.0", 20 | "react": "17.0.1", 21 | "react-dom": "17.0.1", 22 | "react-icons": "^4.1.0" 23 | }, 24 | "browser": { 25 | "fs": false, 26 | "path": false, 27 | "os": false 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /components/WhyWorkWithUs.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const WhyWorkWithUs = () => { 4 | return ( 5 |
6 |

Why work with Us?

7 |
8 |
9 |
10 |

1,237+

11 |

Satisfied Customers

12 |
13 |
14 |

3+

15 |

Active Branches

16 |
17 |
18 |

20+

19 |

Years of Excellence

20 |
21 |
22 |
23 | ); 24 | }; 25 | 26 | export default WhyWorkWithUs; 27 | -------------------------------------------------------------------------------- /styles/_utilities.scss: -------------------------------------------------------------------------------- 1 | // Add your variables 2 | 3 | // colors 4 | $primary-color: #fa001e; 5 | $secondary-color: #080036; 6 | 7 | //font-sizes 8 | $lg_heading: 2.375rem; 9 | $lg_paragraph: 0.875rem; 10 | $line_height: 1.75rem; 11 | 12 | // font 13 | $primary_font: "Inter"; 14 | $secondary_font: "Oswald"; 15 | 16 | //mixins 17 | 18 | // Create placeholder mixin 19 | @mixin placeholder($color, $size: "") { 20 | &::-webkit-input-placeholder { 21 | color: $color; 22 | @if $size != "" { 23 | font-size: $size; 24 | } 25 | } 26 | &:-moz-placeholder { 27 | color: $color; 28 | @if $size != "" { 29 | font-size: $size; 30 | } 31 | } 32 | &::-moz-placeholder { 33 | color: $color; 34 | @if $size != "" { 35 | font-size: $size; 36 | } 37 | } 38 | &:-ms-input-placeholder { 39 | color: $color; 40 | @if $size != "" { 41 | font-size: $size; 42 | } 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /components/header.js: -------------------------------------------------------------------------------- 1 | import Image from "next/image"; 2 | import "../styles/style.scss"; 3 | import Link from "next/link"; 4 | 5 | const Header = () => { 6 | return ( 7 |
11 | Background image 19 | 20 |
21 |

Trust the Professionals of the Industry.

22 |
23 | 24 | About Us 25 | 26 | 27 | Get Quote 28 | 29 |
30 |
31 |
32 | ); 33 | }; 34 | 35 | export default Header; 36 | -------------------------------------------------------------------------------- /components/WhoAreWe.js: -------------------------------------------------------------------------------- 1 | import Image from "next/image"; 2 | import React from "react"; 3 | 4 | const WhoAreWe = () => { 5 | return ( 6 |
7 |
8 |

Who are we?

9 |
10 |
11 |
12 |
13 | White Logo 21 |
22 |
23 |

24 | As a respectable flooring contractor our mission is to provide an 25 | unparalleled service through our reliable team completing projects 26 | to the highest standards. Our highly skilled team of flooring 27 | specialists have a desire to work alongside our clients on site to 28 | achieve the desired result. 29 |

30 |
31 |
32 |
33 | ); 34 | }; 35 | 36 | export default WhoAreWe; 37 | -------------------------------------------------------------------------------- /components/ServicesWeOffer.js: -------------------------------------------------------------------------------- 1 | // import { Link } from "next/link"; 2 | import Image from "next/image"; 3 | import Link from "next/link"; 4 | 5 | import "../styles/style.scss"; 6 | 7 | const ServicesWeOffer = () => { 8 | return ( 9 |
10 |
11 |

Services We Offer

12 |

13 | We offer a wide range of flooring services, and high quality 14 | installation services at affordable prices. 15 |

16 |
17 |
18 | House with beautifull Vinyl floor 26 | 27 |
28 |

Vinyl Floor Installation

29 |

30 | We offer a substantial list of suppliers, some of which shown below. 31 | We provide competitive prices and ensure the project is completed on 32 | time, on budget and to the required standard. 33 |

34 | Our services 35 |
36 |
37 |
38 | ); 39 | }; 40 | 41 | export default ServicesWeOffer; 42 | -------------------------------------------------------------------------------- /styles/_footer.scss: -------------------------------------------------------------------------------- 1 | .footer { 2 | background: $secondary-color; 3 | 4 | &__content { 5 | padding-left: 140px; 6 | padding-top: 40px; 7 | width: 100%; 8 | height: 554px; 9 | display: grid; 10 | grid-template-columns: 200px 200px; 11 | grid-column-gap: 300px; 12 | } 13 | 14 | &__logo { 15 | width: 100%; 16 | height: 171px; 17 | 18 | img { 19 | width: 100%; 20 | transform: translateX(-24px); 21 | position: relative; 22 | z-index: 0; 23 | } 24 | } 25 | &__link { 26 | font-size: 19px; 27 | font-weight: 500; 28 | text-decoration: none; 29 | letter-spacing: -0.025em; 30 | color: #ffffff; 31 | 32 | &:hover { 33 | color: $primary-color; 34 | } 35 | 36 | &:last-child { 37 | grid-column: 1/3; 38 | } 39 | } 40 | &__contact-info { 41 | height: 110px; 42 | width: 200px; 43 | display: flex; 44 | flex-direction: column; 45 | justify-content: space-between; 46 | position: relative; 47 | z-index: 1; 48 | } 49 | &__extra-links { 50 | padding-top: 80px; 51 | 52 | h2 { 53 | font-size: 23px; 54 | padding-bottom: 50px; 55 | letter-spacing: -0.025em; 56 | color: #ffffff; 57 | } 58 | 59 | div { 60 | display: grid; 61 | grid-template-columns: 200px 200px; 62 | grid-template-rows: 50px 50px 50px 50px; 63 | grid-column-gap: 100px; 64 | } 65 | } 66 | 67 | &__copyright-section { 68 | color: #ffffff; 69 | border-top: 1px solid #050052; 70 | display: flex; 71 | justify-content: space-between; 72 | align-items: center; 73 | padding: 20px 130px; 74 | } 75 | &__icons { 76 | display: flex; 77 | justify-content: space-between; 78 | width: 100px; 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /pages/index.js: -------------------------------------------------------------------------------- 1 | import Image from "next/image"; 2 | import Head from "next/head"; 3 | 4 | import Header from "../components/header"; 5 | import ServicesWeOffer from "../components/ServicesWeOffer"; 6 | import Testomonials from "../components/Testomonials"; 7 | import ViewOurProjects from "../components/ViewOurProjects"; 8 | import WhatMore from "../components/WhatMore"; 9 | import WhoAreWe from "../components/WhoAreWe"; 10 | import WhyWorkWithUs from "../components/WhyWorkWithUs"; 11 | 12 | import "../styles/style.scss"; 13 | 14 | export default function Home(props) { 15 | return ( 16 |
17 | 18 | 22 | 26 | 27 | 32 | 38 | 44 | 45 | 50 | 51 | 52 | 53 | Alexis Flooring - Affordable Floor Installations 54 | 55 | 56 |
57 | 58 | 59 | 60 | 61 | 62 | 63 |
64 | ); 65 | } 66 | -------------------------------------------------------------------------------- /components/Testomonials.js: -------------------------------------------------------------------------------- 1 | import "../styles/style.scss"; 2 | 3 | const Testomonials = () => { 4 | return ( 5 |
6 |
7 |
8 |

Testomonials

9 |
10 |
11 |
12 |
13 |
14 | Profile Piture 15 |
16 |

Joe Feriss

17 |

CEO of Infotech

18 |
19 |
20 | 21 | " If you ask me for the best 22 | floor installation service, I would highly recommend Wood Depot 23 | because of their Quality work.. I would highly recommend Wood Depot 24 | because of their Quality work..{" "} 25 | " 26 | 27 |
28 |
29 |
30 | Profile Piture 31 |
32 |

Joe Feriss

33 |

CEO of Infotech

34 |
35 |
36 | 37 | " If you ask me for the best 38 | floor installation service, I would highly recommend Wood Depot 39 | because of their Quality work.. I would highly recommend Wood Depot 40 | because of their Quality work..{" "} 41 | " 42 | 43 |
44 |
45 |
46 | Profile Piture 47 |
48 |

Joe Feriss

49 |

CEO of Infotech

50 |
51 |
52 | 53 | " If you ask me for the best 54 | floor installation service, I would highly recommend Wood Depot 55 | because of their Quality work.. I would highly recommend Wood Depot 56 | because of their Quality work..{" "} 57 | " 58 | 59 |
60 |
61 |
62 | ); 63 | }; 64 | 65 | export default Testomonials; 66 | -------------------------------------------------------------------------------- /components/ViewOurProjects.js: -------------------------------------------------------------------------------- 1 | import Image from "next/image"; 2 | import React from "react"; 3 | 4 | import "../styles/style.scss"; 5 | 6 | const ViewOurProjects = () => { 7 | return ( 8 |
9 |
10 |

View our Projects

11 |
12 |
13 |
14 |
15 | Laundry with beatifull Vinyl Floor 23 |
24 |
25 |

Luxury Vinyl Floor

26 |

27 | We were very lucky to have the privilege in supplying all the 28 | floor and wall tiles for a house renovation in Reigate this 29 | year.We were very lucky to have the privilege in supplying all the 30 | floor and wall tiles for a house renovation in Reigate this year. 31 |

32 | 40 |
41 |
42 |
43 |
44 | Livingroom with beatifull Vinyl Floor 52 |
53 |
54 |

Hollywood Vinyl Floor

55 |

56 | We were very lucky to have the privilege in supplying all the 57 | floor and wall tiles for a house renovation in Reigate this 58 | year.We were very lucky to have the privilege in supplying all the 59 | floor and wall tiles for a house renovation in Reigate this year. 60 |

61 | 69 |
70 |
71 |
72 |
73 | ); 74 | }; 75 | 76 | export default ViewOurProjects; 77 | -------------------------------------------------------------------------------- /components/footer.js: -------------------------------------------------------------------------------- 1 | import Image from 'next/image'; 2 | import Link from 'next/link'; 3 | 4 | import { FiTwitter, FiFacebook, FiYoutube } from 'react-icons/fi'; 5 | import { AiOutlineInstagram } from 'react-icons/ai'; 6 | 7 | import '../styles/style.scss'; 8 | 9 | const Footer = () => { 10 | return ( 11 |
12 |
13 |
14 |
15 | 16 | Blue Logo 24 | 25 |
26 | 27 | 46 |
47 | 48 |
49 |

Extra Links

50 |
51 | {/* 52 | Team 53 | */} 54 | 55 | Home 56 | 57 | 58 | Services 59 | 60 | 61 | About Us 62 | 63 | {/* 64 | Careers 65 | */} 66 | 67 | Contact Us 68 | 69 | {/* 70 | Best Worker Award 71 | */} 72 |
73 |
74 |
75 | 76 |
77 | 2020 © All Rights Reserved 78 |
79 |
80 | 81 |
82 |
83 | 84 |
85 |
86 | 87 |
88 |
89 | 90 |
91 |
92 |
93 |
94 | ); 95 | }; 96 | 97 | export default Footer; 98 | -------------------------------------------------------------------------------- /public/favicon_package/safari-pinned-tab.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 7 | 8 | Created by potrace 1.11, written by Peter Selinger 2001-2013 9 | 10 | 12 | 46 | 47 | 49 | 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /components/navbar.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import Image from "next/image"; 3 | import Link from "next/link"; 4 | 5 | import { BsChevronRight } from "react-icons/bs"; 6 | 7 | import "../styles/style.scss"; 8 | 9 | class Navbar extends Component { 10 | constructor() { 11 | super(); 12 | this.state = {}; 13 | } 14 | 15 | render() { 16 | return ( 17 |
18 | 19 | 20 |

21 | Check out our new offers and new services{" "} 22 | 23 |

24 | 25 | 26 | 27 |
28 |
29 |
30 | 31 | 32 | White Logo 40 | 41 | 42 |
43 | 44 |
45 | 46 | Home 47 | 48 | 49 | Services 50 | 51 | 52 | Gallery 53 | 54 | 55 | Contact Us 56 | 57 | 58 | Get a Quote 59 | 60 |
61 | 62 | {/* Mobile Container */} 63 |
64 | {/* Hamburger Menu */} 65 | 70 | 71 |
72 | 77 |
78 | 79 | {/* Mobile Menu */} 80 |
81 | 82 | Home 83 | 84 | 85 | Services 86 | 87 | 88 | Gallery 89 | 90 | 91 | Contact Us 92 | 93 | 94 | 95 | Get a Quote 96 | 97 | 98 |
99 |
100 |
101 |
102 |
103 | ); 104 | } 105 | } 106 | 107 | export default Navbar; 108 | -------------------------------------------------------------------------------- /pages/services.js: -------------------------------------------------------------------------------- 1 | import Image from "next/image"; 2 | import "../styles/style.scss"; 3 | import Head from "next/head"; 4 | import { BsChevronRight } from "react-icons/bs"; 5 | 6 | const Services = () => { 7 | return ( 8 |
9 | 10 | 14 | 18 | 19 | 24 | 30 | 36 | 37 | 42 | 43 | 44 | Services - See what we have to offer 45 | 46 | 47 |
48 |
49 |

Services we offer

50 |

51 | We offer a wide range of flooring services, and high quality 52 | installation services at affordable prices. The wide of services we 53 | offer help our customers get what they need, at the highest quality 54 | possible 55 |

56 |
57 |
58 | Dinning room with beatifull Vinyl Floor 66 | 67 |
68 |

Luxury Vinyl

69 |

70 | Luxury vinyl is one of the most durable flooring options out 71 | there. It can withstand water and moisture, as well as wear and 72 | tear. It is also stain and scratch resistant. This durability 73 | makes it an ideal flooring option. 74 |

75 | 76 | Book Service 77 | 78 |
79 |
80 | 81 |
82 |

83 | We offer a wide range of flooring services, and high quality 84 | installation services at affordable prices. The wide of services we 85 | offer help our customers get what they need, at the highest quality 86 | possible. 87 |

88 |

89 | As a respectable flooring contractor our aim is to provide an 90 | unparalleled service through our reliable team completing projects 91 | to the highest standards. Our highly skilled team of flooring 92 | specialists will wrong alongside our clients on site to achieve the 93 | desired results. 94 |

95 |
96 |
97 |
98 | ); 99 | }; 100 | 101 | export default Services; 102 | -------------------------------------------------------------------------------- /styles/_services.scss: -------------------------------------------------------------------------------- 1 | /************** services Page Styles *****************/ 2 | 3 | .services { 4 | margin-top: 5%; 5 | 6 | &__header { 7 | display: flex; 8 | flex-direction: column; 9 | justify-content: center; 10 | align-items: center; 11 | 12 | h1 { 13 | font-size: $lg_heading; 14 | color: $secondary-color; 15 | font-weight: 600; 16 | margin-bottom: 2%; 17 | } 18 | 19 | p { 20 | font-size: $lg_paragraph; 21 | line-height: $line_height; 22 | width: 50%; 23 | text-align: center; 24 | margin-bottom: 10%; 25 | } 26 | } 27 | &__example { 28 | display: flex; 29 | justify-content: space-evenly; 30 | align-items: center; 31 | position: relative; 32 | width: 90%; 33 | margin: 0 auto; 34 | 35 | &::before { 36 | content: ""; 37 | height: 140%; 38 | width: 35%; 39 | position: absolute; 40 | top: -20%; 41 | left: -6%; 42 | background: $primary-color; 43 | z-index: 0; 44 | } 45 | 46 | img { 47 | position: relative; 48 | width: 40%; 49 | z-index: 1; 50 | } 51 | 52 | &__info { 53 | padding-left: 14%; 54 | margin-top: -10%; 55 | 56 | h1 { 57 | font-size: $lg_heading; 58 | color: $secondary-color; 59 | font-weight: 600; 60 | margin-bottom: 4%; 61 | } 62 | 63 | p { 64 | font-size: $lg_paragraph; 65 | line-height: $line_height; 66 | margin-bottom: 4%; 67 | } 68 | 69 | a { 70 | text-decoration: none; 71 | color: #080036; 72 | display: flex; 73 | 74 | svg { 75 | margin-left: 12px; 76 | } 77 | } 78 | } 79 | } 80 | &__description { 81 | margin-top: 14%; 82 | padding-left: 5%; 83 | margin-bottom: 10%; 84 | 85 | p { 86 | line-height: $line_height; 87 | font-size: $lg_paragraph; 88 | width: 70%; 89 | margin-bottom: 2%; 90 | } 91 | } 92 | } 93 | 94 | /************************************************************************ MEDIA QUERIES ************************************************************************/ 95 | 96 | /**************************** Tablet Max ***/ 97 | 98 | @media all and (max-width: 1024px) { 99 | .services { 100 | &__header { 101 | margin: 4em 0 4em 0; 102 | } 103 | 104 | &__example { 105 | margin-bottom: 4em; 106 | 107 | &::before { 108 | left: -16%; 109 | } 110 | 111 | img { 112 | left: -6%; 113 | } 114 | } 115 | } 116 | } 117 | 118 | /**************************** Tablet Min ***/ 119 | 120 | @media all and (max-width: 768px) { 121 | .services { 122 | &__header { 123 | margin: 4em 0 4em 0; 124 | 125 | p { 126 | width: 100%; 127 | } 128 | } 129 | 130 | &__example { 131 | margin-bottom: 4em; 132 | } 133 | 134 | &__description { 135 | padding: 0; 136 | p { 137 | width: 100%; 138 | } 139 | } 140 | } 141 | } 142 | 143 | /**************************** Mobile Max ***/ 144 | 145 | @media all and (max-width: 600px) { 146 | .services { 147 | &__header { 148 | margin: 4em 0 4em 0; 149 | 150 | p { 151 | width: 100%; 152 | } 153 | } 154 | 155 | &__example { 156 | display: block; 157 | margin-bottom: 4em; 158 | width: 100%; 159 | 160 | &::before { 161 | position: static; 162 | } 163 | 164 | .img { 165 | width: 100%; 166 | position: static; 167 | z-index: 0; 168 | margin-bottom: 4em !important; 169 | } 170 | 171 | .services__example__info { 172 | padding: 0; 173 | margin-top: 0; 174 | } 175 | } 176 | 177 | &__description { 178 | padding: 0; 179 | p { 180 | width: 100%; 181 | } 182 | } 183 | } 184 | } 185 | -------------------------------------------------------------------------------- /styles/_gallery.scss: -------------------------------------------------------------------------------- 1 | /************** Gallery Page Styles *****************/ 2 | 3 | #gallery { 4 | padding: 5em 0; 5 | 6 | .gallery__container { 7 | width: 75%; 8 | margin: 0 auto; 9 | 10 | .gallery__title { 11 | text-align: center; 12 | font-size: $lg_heading; 13 | font-family: "Avenir Next", sans-serif; 14 | color: #080036; 15 | margin-bottom: 1em; 16 | } 17 | 18 | .gallery__p { 19 | text-align: center; 20 | font-size: $lg_paragraph; 21 | color: #3d3d3d; 22 | line-height: 2.5rem; 23 | margin-bottom: 4em; 24 | } 25 | 26 | .gallery-grid { 27 | display: grid; 28 | grid-template-columns: repeat(4, 1fr); 29 | grid-template-rows: 300px 300px 200px 200px 400px 200px; 30 | grid-gap: 1em; 31 | 32 | &--box { 33 | position: relative; 34 | transition: all 0.6s ease-in-out; 35 | 36 | .img { 37 | object-fit: cover; 38 | } 39 | 40 | &:hover { 41 | .gallery-grid__info { 42 | visibility: visible; 43 | opacity: 1; 44 | } 45 | } 46 | 47 | .gallery-grid__info { 48 | position: absolute; 49 | width: 100%; 50 | padding: 1em 0 1em 1em; 51 | color: #fff; 52 | z-index: 1; 53 | bottom: 0; 54 | background: rgba(8, 0, 54, 0.42); 55 | visibility: hidden; 56 | opacity: 0; 57 | } 58 | } 59 | 60 | &__box-1 { 61 | grid-column: 1 / 2; 62 | grid-row: 1 / 2; 63 | } 64 | 65 | &__box-2 { 66 | grid-column: 2 / 5; 67 | grid-row: 1 / 2; 68 | } 69 | 70 | &__box-3 { 71 | grid-column: 1 / 2; 72 | grid-row: 2 / 3; 73 | } 74 | 75 | &__box-4 { 76 | grid-column: 2 / 4; 77 | grid-row: 2 / 3; 78 | } 79 | 80 | &__box-5 { 81 | grid-column: 4 / 5; 82 | grid-row: 2 / 4; 83 | } 84 | 85 | &__box-6 { 86 | grid-column: 1 / 4; 87 | grid-row: 3 / 5; 88 | } 89 | 90 | &__box-7 { 91 | grid-column: 4 / 5; 92 | grid-row: 4 / 5; 93 | } 94 | 95 | &__box-8 { 96 | grid-column: 1 / 2; 97 | grid-row: 5 / 7; 98 | } 99 | 100 | &__box-9 { 101 | grid-column: 2 / 4; 102 | grid-row: 5 / 6; 103 | } 104 | 105 | &__box-10 { 106 | grid-column: 2 / 5; 107 | grid-row: 6 / 7; 108 | } 109 | 110 | &__box-11 { 111 | grid-column: 4 / 5; 112 | grid-row: 5 / 6; 113 | } 114 | } 115 | } 116 | } 117 | 118 | /************************************************************************ MEDIA QUERIES ************************************************************************/ 119 | 120 | /**************************** Tablet Max ***/ 121 | 122 | @media all and (max-width: 1024px) { 123 | #gallery { 124 | .gallery__container { 125 | width: 100%; 126 | } 127 | } 128 | } 129 | 130 | /**************************** Tablet Min ***/ 131 | 132 | @media all and (max-width: 768px) { 133 | #gallery { 134 | .gallery__container { 135 | width: 100%; 136 | } 137 | } 138 | } 139 | 140 | /**************************** Mobile Max ***/ 141 | 142 | @media all and (max-width: 600px) { 143 | #gallery { 144 | .gallery__container { 145 | width: 100%; 146 | 147 | .gallery-grid { 148 | display: grid; 149 | grid-template-columns: 1fr; 150 | grid-template-rows: 300px 300px 300px 300px 700px 300px 300px 600px 300px 300px 500px; 151 | grid-gap: 2em; 152 | 153 | &--box { 154 | position: relative; 155 | transition: all 0.6s ease-in-out; 156 | 157 | &:hover { 158 | .gallery-grid__info { 159 | visibility: visible; 160 | opacity: 1; 161 | } 162 | } 163 | 164 | .gallery-grid__info { 165 | position: absolute; 166 | width: 100%; 167 | padding: 1em 0 1em 1em; 168 | color: #fff; 169 | z-index: 1; 170 | bottom: 0; 171 | background: rgba(8, 0, 54, 0.42); 172 | visibility: hidden; 173 | opacity: 0; 174 | } 175 | } 176 | 177 | &__box-1 { 178 | grid-column: 1 / 1; 179 | grid-row: 1 / 2; 180 | } 181 | 182 | &__box-2 { 183 | grid-column: 1 / 1; 184 | grid-row: 2 / 3; 185 | } 186 | 187 | &__box-3 { 188 | grid-column: 1 / 1; 189 | grid-row: 3 / 4; 190 | } 191 | 192 | &__box-4 { 193 | grid-column: 1 / 1; 194 | grid-row: 4 / 5; 195 | } 196 | 197 | &__box-5 { 198 | grid-column: 1 / 1; 199 | grid-row: 5 / 6; 200 | } 201 | 202 | &__box-6 { 203 | grid-column: 1 / 1; 204 | grid-row: 6 / 7; 205 | } 206 | 207 | &__box-7 { 208 | grid-column: 1 / 1; 209 | grid-row: 7 / 8; 210 | } 211 | 212 | &__box-8 { 213 | grid-column: 1 / 2; 214 | grid-row: 8 / 9; 215 | } 216 | 217 | &__box-9 { 218 | grid-column: 1 / 1; 219 | grid-row: 9 / 10; 220 | } 221 | 222 | &__box-10 { 223 | grid-column: 1 / 1; 224 | grid-row: 10 / 11; 225 | } 226 | 227 | &__box-11 { 228 | grid-column: 1 / 1; 229 | grid-row: 11 / 12; 230 | } 231 | } 232 | } 233 | } 234 | } 235 | -------------------------------------------------------------------------------- /styles/_contact_us.scss: -------------------------------------------------------------------------------- 1 | /************** Contact Page Styles *****************/ 2 | 3 | .contact { 4 | display: flex; 5 | justify-content: space-evenly; 6 | padding: 0px 33px; 7 | width: 90%; 8 | margin: 0 auto; 9 | 10 | &__hero-section { 11 | width: 45%; 12 | 13 | h1 { 14 | color: $secondary-color; 15 | font-style: normal; 16 | font-weight: 600; 17 | font-size: $lg_heading; 18 | text-transform: capitalize; 19 | padding: 25% 0 40px 0; 20 | line-height: 132.19%; 21 | /* or 65px */ 22 | letter-spacing: -0.025em; 23 | width: 90%; 24 | } 25 | 26 | p { 27 | font-family: Inter; 28 | font-style: normal; 29 | font-size: $lg_paragraph; 30 | font-weight: 500; 31 | line-height: 35px; 32 | letter-spacing: 0em; 33 | text-align: left; 34 | } 35 | } 36 | 37 | &__form-section { 38 | margin-top: 86px; 39 | margin-bottom: 10%; 40 | // width: 650px; 41 | position: relative; 42 | box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.048); 43 | } 44 | 45 | &__form-section-container { 46 | padding: 0 30px; 47 | } 48 | 49 | &__form-section-header { 50 | padding-top: 15px; 51 | 52 | h2 { 53 | letter-spacing: -1px; 54 | font-style: normal; 55 | font-weight: 600; 56 | font-size: 2rem; 57 | line-height: 211.69%; 58 | } 59 | 60 | p { 61 | font-style: normal; 62 | font-weight: 500; 63 | font-size: $lg_paragraph; 64 | line-height: 184.69%; 65 | /* or 42px */ 66 | color: #5f5f5f; 67 | } 68 | } 69 | 70 | &__form { 71 | display: flex; 72 | flex-direction: column; 73 | padding-top: 20px; 74 | 75 | input, 76 | textarea, 77 | button { 78 | padding: 20px; 79 | margin: 8px 0; 80 | border-radius: 5px; 81 | 82 | @include placeholder(#c7c2c2, 13px); 83 | } 84 | 85 | input { 86 | width: 100%; 87 | border: 1px solid #e3e3e3; 88 | } 89 | 90 | textarea { 91 | height: 150px; 92 | border: 1px solid #e3e3e3; 93 | } 94 | 95 | button { 96 | background: $primary-color; 97 | color: #ffffff; 98 | letter-spacing: 0.025em; 99 | border: none; 100 | margin: 35px 0; 101 | } 102 | } 103 | } 104 | 105 | .faq { 106 | text-align: center; 107 | 108 | h1 { 109 | color: $secondary-color; 110 | font-family: $primary_font; 111 | font-style: normal; 112 | font-weight: 600; 113 | font-size: $lg_heading; 114 | letter-spacing: -0.025em; 115 | line-height: 211.69%; 116 | /* identical to box height, or 144px */ 117 | } 118 | 119 | &__container { 120 | display: flex; 121 | width: 50%; 122 | margin: 0 auto; 123 | flex-direction: column; 124 | justify-content: space-between; 125 | padding: 70px 0 200px 0; 126 | } 127 | 128 | &__questions-container { 129 | margin-bottom: 30px; 130 | } 131 | 132 | &__questions { 133 | cursor: pointer; 134 | padding: 20px; 135 | display: flex; 136 | justify-content: space-between; 137 | align-items: center; 138 | background: #ffffff; 139 | border: 1px solid #c7c7c7; 140 | box-sizing: border-box; 141 | border-radius: 5px; 142 | 143 | h1 { 144 | font-family: $primary_font; 145 | font-style: normal; 146 | font-weight: 500; 147 | font-size: 1rem; 148 | line-height: 211.69%; 149 | /* or 57px */ 150 | color: $secondary-color; 151 | } 152 | 153 | &__icon { 154 | color: #b9b3b3; 155 | } 156 | } 157 | 158 | &__answers { 159 | font-family: $primary_font; 160 | font-style: normal; 161 | font-weight: normal; 162 | font-size: 1rem; 163 | line-height: 211.69%; 164 | /* or 55px */ 165 | color: #919191; 166 | text-align: left; 167 | padding: 30px 35px; 168 | background: #ffffff; 169 | border: 1px solid #c7c7c7; 170 | box-sizing: border-box; 171 | border-radius: 5px; 172 | 173 | display: none; 174 | transition: all 0.3s ease-in-out; 175 | } 176 | } 177 | 178 | /************************************************************************ MEDIA QUERIES ************************************************************************/ 179 | 180 | /**************************** Tablet Max ***/ 181 | 182 | @media all and (max-width: 1024px) { 183 | .contact { 184 | width: 100%; 185 | padding: 0; 186 | flex-direction: column; 187 | 188 | &__hero-section { 189 | width: 100%; 190 | 191 | h1 { 192 | padding: 15% 0 40px 0; 193 | } 194 | 195 | p { 196 | width: 65%; 197 | } 198 | } 199 | } 200 | .faq { 201 | &__container { 202 | width: 100%; 203 | } 204 | } 205 | } 206 | 207 | /**************************** Tablet Min ***/ 208 | 209 | @media all and (max-width: 768px) { 210 | .footer { 211 | &__content { 212 | padding-left: 0; 213 | width: 90%; 214 | margin: 0 auto; 215 | } 216 | } 217 | } 218 | 219 | /**************************** Mobile Max ***/ 220 | 221 | @media all and (max-width: 600px) { 222 | .contact { 223 | width: 100%; 224 | padding: 0; 225 | flex-direction: column; 226 | 227 | &__hero-section { 228 | width: 100%; 229 | display: flex; 230 | flex-direction: column; 231 | justify-content: center; 232 | align-items: center; 233 | 234 | h1 { 235 | padding: 15% 0 40px 0; 236 | } 237 | 238 | p { 239 | width: 90%; 240 | } 241 | } 242 | } 243 | .faq { 244 | h1 { 245 | line-height: 132.19%; 246 | } 247 | &__container { 248 | width: 100%; 249 | } 250 | } 251 | } 252 | -------------------------------------------------------------------------------- /pages/contactus.js: -------------------------------------------------------------------------------- 1 | import Image from 'next/image'; 2 | import '../styles/style.scss'; 3 | import Head from 'next/head'; 4 | import { useState } from 'react'; 5 | 6 | import { BsPlus } from 'react-icons/bs'; 7 | import { BiMinus } from 'react-icons/bi'; 8 | import { IconContext } from 'react-icons'; 9 | 10 | const Contact = () => { 11 | const [newContact, setNewContact] = useState({ 12 | name: '', 13 | email: '', 14 | message: '', 15 | }); 16 | 17 | const [status, setStatus] = useState({ 18 | submitted: false, 19 | submitting: false, 20 | info: { error: false, msg: null }, 21 | }); 22 | 23 | const handleChange = (e) => { 24 | setNewContact({ 25 | ...newContact, 26 | [e.target.name]: e.target.value, 27 | }); 28 | setStatus({ 29 | submitted: false, 30 | submitting: false, 31 | info: { error: false, msg: null }, 32 | }); 33 | }; 34 | 35 | const handleSubmit = (e) => { 36 | e.preventDefault(); 37 | setStatus((prevStatus) => ({ ...prevStatus, submitting: true })); 38 | fetch('/api/send', { 39 | method: 'POST', 40 | headers: { 41 | 'Content-Type': 'application/json', 42 | }, 43 | body: JSON.stringify(newContact), 44 | }) 45 | .then((res) => { 46 | setNewContact({ 47 | name: '', 48 | email: '', 49 | message: '', 50 | }); 51 | handleResponse(res.status, 'Thanks For Your Interest, Please Allow Time For Our Response'); 52 | }) 53 | .catch((err) => console.log('Contact ERROR', err)); 54 | }; 55 | 56 | const handleResponse = (status, msg) => { 57 | if (status === 200) { 58 | setStatus({ 59 | submitted: true, 60 | submitting: false, 61 | info: { error: false, msg: msg }, 62 | }); 63 | } else { 64 | setStatus({ 65 | info: { error: true, msg: msg }, 66 | }); 67 | } 68 | }; 69 | 70 | function showHideDiv(id) { 71 | var x = document.getElementById(id).style; 72 | 73 | if (x.display == null || x.display == 'none') { 74 | x.display = 'block'; 75 | setExpand(true); 76 | } else { 77 | x.display = 'none'; 78 | setExpand(false); 79 | } 80 | } 81 | 82 | // this changes the icon to the right of the FAQ when clicked 83 | const [expand, setExpand] = useState(false); 84 | 85 | return ( 86 |
87 | 88 | 89 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | Contact Us - Request A Quote 102 | 103 |
104 |
105 |

So, you are interested in Wood Depot

106 |

107 | You can get started by contacting us and let us know any questions you might have, and we will 108 | get back with you within 24 hours. Hoping to working with you!{' '} 109 |

110 |
111 |
112 |
113 |
114 |

Contact Us

115 |

Please send us your questions, please don’t spam us!

116 |
117 |
122 | 128 | 134 | 140 | 143 |
144 | {status.info.error ? ( 145 |
Error: {status.info.msg}
146 | ) : ( 147 |
{status.info.msg}
148 | )} 149 |
150 |
151 |
152 |
153 |

Frequently Asked Questions (FAQ)

154 |
155 |
156 |
showHideDiv('answer1')}> 157 |

How does your pricing work?

158 | 159 |
{expand ? : }
160 | 161 |
162 |

163 | It depends on the type of Floor we install. For example, a Hardwood installation takes 2 164 | days on Average. Get a Quote to know the approximate amount of time we take to finish the 165 | Floor installation. 166 |

167 |
168 |
169 |
showHideDiv('answer2')}> 170 |

How much time does it take to finish installing a Floor?

171 | 172 |
{expand ? : }
173 | 174 |
175 |

176 | It depends on the type of Floor we install. For example, a Hardwood installation takes 2 177 | days on Average. Get a Quote to know the approximate amount of time we take to finish the 178 | Floor installation. 179 |

180 |
181 |
182 |
showHideDiv('answer3')}> 183 |

Do you provide After-sales service?

184 | 185 |
{expand ? : }
186 | 187 |
188 |

189 | It depends on the type of Floor we install. For example, a Hardwood installation takes 2 190 | days on Average. Get a Quote to know the approximate amount of time we take to finish the 191 | Floor installation. 192 |

193 |
194 |
195 |
196 |
197 | ); 198 | }; 199 | 200 | export default Contact; 201 | -------------------------------------------------------------------------------- /pages/gallery.js: -------------------------------------------------------------------------------- 1 | import Image from "next/image"; 2 | import "../styles/style.scss"; 3 | 4 | import Head from "next/head"; 5 | 6 | const Gallery = () => { 7 | return ( 8 |
9 | 10 | 14 | 18 | 19 | 24 | 30 | 36 | 37 | 42 | 43 | 44 | Gallery - See Our beautiful projects 45 | 46 | 47 | 205 |
206 | ); 207 | }; 208 | 209 | export default Gallery; 210 | -------------------------------------------------------------------------------- /styles/_normalize.scss: -------------------------------------------------------------------------------- 1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /* Document 4 | ========================================================================== */ 5 | 6 | /** 7 | * 1. Correct the line height in all browsers. 8 | * 2. Prevent adjustments of font size after orientation changes in iOS. 9 | */ 10 | 11 | html { 12 | line-height: 1.15; /* 1 */ 13 | -webkit-text-size-adjust: 100%; /* 2 */ 14 | } 15 | 16 | /* Sections 17 | ========================================================================== */ 18 | 19 | /** 20 | * Remove the margin in all browsers. 21 | */ 22 | 23 | body { 24 | margin: 0; 25 | } 26 | 27 | /** 28 | * Render the `main` element consistently in IE. 29 | */ 30 | 31 | main { 32 | display: block; 33 | } 34 | 35 | /* Grouping content 36 | ========================================================================== */ 37 | 38 | /** 39 | * 1. Add the correct box sizing in Firefox. 40 | * 2. Show the overflow in Edge and IE. 41 | */ 42 | 43 | hr { 44 | box-sizing: content-box; /* 1 */ 45 | height: 0; /* 1 */ 46 | overflow: visible; /* 2 */ 47 | } 48 | 49 | /** 50 | * 1. Correct the inheritance and scaling of font size in all browsers. 51 | * 2. Correct the odd `em` font sizing in all browsers. 52 | */ 53 | 54 | pre { 55 | font-family: monospace, monospace; /* 1 */ 56 | font-size: 1em; /* 2 */ 57 | } 58 | 59 | /* Text-level semantics 60 | ========================================================================== */ 61 | 62 | /** 63 | * Remove the gray background on active links in IE 10. 64 | */ 65 | 66 | a { 67 | background-color: transparent; 68 | } 69 | 70 | /** 71 | * 1. Remove the bottom border in Chrome 57- 72 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 73 | */ 74 | 75 | abbr[title] { 76 | border-bottom: none; /* 1 */ 77 | text-decoration: underline; /* 2 */ 78 | text-decoration: underline dotted; /* 2 */ 79 | } 80 | 81 | /** 82 | * Add the correct font weight in Chrome, Edge, and Safari. 83 | */ 84 | 85 | b, 86 | strong { 87 | font-weight: bolder; 88 | } 89 | 90 | /** 91 | * 1. Correct the inheritance and scaling of font size in all browsers. 92 | * 2. Correct the odd `em` font sizing in all browsers. 93 | */ 94 | 95 | code, 96 | kbd, 97 | samp { 98 | font-family: monospace, monospace; /* 1 */ 99 | font-size: 1em; /* 2 */ 100 | } 101 | 102 | /** 103 | * Add the correct font size in all browsers. 104 | */ 105 | 106 | small { 107 | font-size: 80%; 108 | } 109 | 110 | /** 111 | * Prevent `sub` and `sup` elements from affecting the line height in 112 | * all browsers. 113 | */ 114 | 115 | sub, 116 | sup { 117 | font-size: 75%; 118 | line-height: 0; 119 | position: relative; 120 | vertical-align: baseline; 121 | } 122 | 123 | sub { 124 | bottom: -0.25em; 125 | } 126 | 127 | sup { 128 | top: -0.5em; 129 | } 130 | 131 | /* Embedded content 132 | ========================================================================== */ 133 | 134 | /** 135 | * Remove the border on images inside links in IE 10. 136 | */ 137 | 138 | img { 139 | border-style: none; 140 | } 141 | 142 | /* Forms 143 | ========================================================================== */ 144 | 145 | /** 146 | * 1. Change the font styles in all browsers. 147 | * 2. Remove the margin in Firefox and Safari. 148 | */ 149 | 150 | button, 151 | input, 152 | optgroup, 153 | select, 154 | textarea { 155 | font-family: inherit; /* 1 */ 156 | font-size: 100%; /* 1 */ 157 | line-height: 1.15; /* 1 */ 158 | margin: 0; /* 2 */ 159 | } 160 | 161 | /** 162 | * Show the overflow in IE. 163 | * 1. Show the overflow in Edge. 164 | */ 165 | 166 | button, 167 | input { 168 | /* 1 */ 169 | overflow: visible; 170 | } 171 | 172 | /** 173 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 174 | * 1. Remove the inheritance of text transform in Firefox. 175 | */ 176 | 177 | button, 178 | select { 179 | /* 1 */ 180 | text-transform: none; 181 | } 182 | 183 | /** 184 | * Correct the inability to style clickable types in iOS and Safari. 185 | */ 186 | 187 | button, 188 | [type="button"], 189 | [type="reset"], 190 | [type="submit"] { 191 | -webkit-appearance: button; 192 | } 193 | 194 | /** 195 | * Remove the inner border and padding in Firefox. 196 | */ 197 | 198 | button::-moz-focus-inner, 199 | [type="button"]::-moz-focus-inner, 200 | [type="reset"]::-moz-focus-inner, 201 | [type="submit"]::-moz-focus-inner { 202 | border-style: none; 203 | padding: 0; 204 | } 205 | 206 | /** 207 | * Restore the focus styles unset by the previous rule. 208 | */ 209 | 210 | button:-moz-focusring, 211 | [type="button"]:-moz-focusring, 212 | [type="reset"]:-moz-focusring, 213 | [type="submit"]:-moz-focusring { 214 | outline: 1px dotted ButtonText; 215 | } 216 | 217 | /** 218 | * Correct the padding in Firefox. 219 | */ 220 | 221 | fieldset { 222 | padding: 0.35em 0.75em 0.625em; 223 | } 224 | 225 | /** 226 | * 1. Correct the text wrapping in Edge and IE. 227 | * 2. Correct the color inheritance from `fieldset` elements in IE. 228 | * 3. Remove the padding so developers are not caught out when they zero out 229 | * `fieldset` elements in all browsers. 230 | */ 231 | 232 | legend { 233 | box-sizing: border-box; /* 1 */ 234 | color: inherit; /* 2 */ 235 | display: table; /* 1 */ 236 | max-width: 100%; /* 1 */ 237 | padding: 0; /* 3 */ 238 | white-space: normal; /* 1 */ 239 | } 240 | 241 | /** 242 | * Add the correct vertical alignment in Chrome, Firefox, and Opera. 243 | */ 244 | 245 | progress { 246 | vertical-align: baseline; 247 | } 248 | 249 | /** 250 | * Remove the default vertical scrollbar in IE 10+. 251 | */ 252 | 253 | textarea { 254 | overflow: auto; 255 | } 256 | 257 | /** 258 | * 1. Add the correct box sizing in IE 10. 259 | * 2. Remove the padding in IE 10. 260 | */ 261 | 262 | [type="checkbox"], 263 | [type="radio"] { 264 | box-sizing: border-box; /* 1 */ 265 | padding: 0; /* 2 */ 266 | } 267 | 268 | /** 269 | * Correct the cursor style of increment and decrement buttons in Chrome. 270 | */ 271 | 272 | [type="number"]::-webkit-inner-spin-button, 273 | [type="number"]::-webkit-outer-spin-button { 274 | height: auto; 275 | } 276 | 277 | /** 278 | * 1. Correct the odd appearance in Chrome and Safari. 279 | * 2. Correct the outline style in Safari. 280 | */ 281 | 282 | [type="search"] { 283 | -webkit-appearance: textfield; /* 1 */ 284 | outline-offset: -2px; /* 2 */ 285 | } 286 | 287 | /** 288 | * Remove the inner padding in Chrome and Safari on macOS. 289 | */ 290 | 291 | [type="search"]::-webkit-search-decoration { 292 | -webkit-appearance: none; 293 | } 294 | 295 | /** 296 | * 1. Correct the inability to style clickable types in iOS and Safari. 297 | * 2. Change font properties to `inherit` in Safari. 298 | */ 299 | 300 | ::-webkit-file-upload-button { 301 | -webkit-appearance: button; /* 1 */ 302 | font: inherit; /* 2 */ 303 | } 304 | 305 | /* Interactive 306 | ========================================================================== */ 307 | 308 | /* 309 | * Add the correct display in Edge, IE 10+, and Firefox. 310 | */ 311 | 312 | details { 313 | display: block; 314 | } 315 | 316 | /* 317 | * Add the correct display in all browsers. 318 | */ 319 | 320 | summary { 321 | display: list-item; 322 | } 323 | 324 | /* Misc 325 | ========================================================================== */ 326 | 327 | /** 328 | * Add the correct display in IE 10+. 329 | */ 330 | 331 | template { 332 | display: none; 333 | } 334 | 335 | /** 336 | * Add the correct display in IE 10. 337 | */ 338 | 339 | [hidden] { 340 | display: none; 341 | } 342 | -------------------------------------------------------------------------------- /styles/_common.scss: -------------------------------------------------------------------------------- 1 | // Container 2 | 3 | .container { 4 | width: 100%; 5 | margin: 0 auto; 6 | } 7 | 8 | // Global style for the Image Component 9 | .img { 10 | object-fit: cover; 11 | width: 100%; 12 | max-width: 100%; 13 | height: 100%; 14 | } 15 | 16 | // Navbar 17 | .nav__container { 18 | background: #fff; 19 | box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.048); 20 | } 21 | 22 | .navbar__announcment { 23 | width: 100%; 24 | display: flex; 25 | align-items: center; 26 | font-family: "Inter"; 27 | background: #080036; 28 | color: #fff; 29 | padding: 12px 25px; 30 | font-size: 11px; 31 | font-weight: 500; 32 | cursor: pointer; 33 | } 34 | 35 | .announcment__arrow { 36 | font-size: 13px; 37 | font-weight: 700; 38 | margin-left: 5px; 39 | } 40 | 41 | .logo > .img { 42 | width: 100%; 43 | height: 100%; 44 | } 45 | 46 | .navbar { 47 | font-family: "Inter"; 48 | display: flex; 49 | justify-content: space-between; 50 | align-items: center; 51 | height: 12vh; 52 | width: 90%; 53 | margin: 0 auto; 54 | } 55 | 56 | .navbar__links { 57 | display: flex; 58 | width: 600px; 59 | justify-content: space-between; 60 | align-items: center; 61 | } 62 | 63 | .nav__link { 64 | color: black; 65 | font-weight: 600; 66 | font-size: 14px; 67 | } 68 | 69 | .button__red { 70 | background: black; 71 | color: white; 72 | padding: 15px 25px; 73 | font-size: 15px; 74 | } 75 | 76 | // Mobile Container for the Mobile menu 77 | 78 | .mobile-container { 79 | display: none; 80 | 81 | // Checkbox 82 | .hamburger-menu-checkbox { 83 | display: inline-block; 84 | visibility: hidden; 85 | opacity: 0; 86 | } 87 | 88 | .hamburger-menu-checkbox:checked ~ .mobile-menu { 89 | transform: translate3d(0, 0, 0); 90 | } 91 | 92 | // Hamburger menu 93 | .hamburger-menu { 94 | display: none; 95 | 96 | &__label { 97 | display: inline-block; 98 | cursor: pointer; 99 | } 100 | 101 | &__line { 102 | width: 2em; 103 | height: 5px; 104 | border-radius: 10px; 105 | background-color: #000; 106 | 107 | &:not(:last-child) { 108 | margin-bottom: 0.3rem; 109 | } 110 | } 111 | } 112 | 113 | // Mobile menu 114 | .mobile-menu { 115 | display: none; 116 | flex-direction: column; 117 | height: 100vh; 118 | width: 50%; 119 | background-color: #fff; 120 | padding: 2em 0 0 1em; 121 | position: absolute; 122 | top: 95%; 123 | right: 0; 124 | z-index: -1; 125 | box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.048); 126 | transition: all 0.4s ease-in-out; 127 | transform: translate3d(100%, 0, 0); 128 | 129 | &__link { 130 | color: black; 131 | font-weight: 600; 132 | font-size: 14px; 133 | 134 | &:not(:last-child) { 135 | margin-bottom: 1.7em; 136 | } 137 | } 138 | 139 | &__link--red { 140 | background: #000; 141 | color: white; 142 | width: 80%; 143 | padding: 10px 25px; 144 | font-size: $lg_paragraph; 145 | } 146 | } 147 | } 148 | 149 | //Footer 150 | .footer { 151 | background: $secondary-color; 152 | 153 | &__content { 154 | padding-left: 140px; 155 | padding-bottom: 50px; 156 | display: grid; 157 | grid-template-columns: 200px 200px; 158 | grid-column-gap: 10%; 159 | } 160 | 161 | &__logo { 162 | width: 100%; 163 | 164 | .img { 165 | width: 100%; 166 | height: 100%; 167 | } 168 | } 169 | &__link { 170 | font-weight: 500; 171 | font-size: $lg_paragraph; 172 | text-decoration: none; 173 | letter-spacing: -0.025em; 174 | color: #ffffff; 175 | 176 | &:hover { 177 | color: $primary-color; 178 | } 179 | 180 | &:last-child { 181 | grid-column: 1/3; 182 | } 183 | } 184 | &__contact-info { 185 | height: 110px; 186 | width: 200px; 187 | display: flex; 188 | flex-direction: column; 189 | justify-content: space-between; 190 | position: relative; 191 | z-index: 1; 192 | } 193 | &__extra-links { 194 | padding-top: 60px; 195 | 196 | h2 { 197 | font-size: 23px; 198 | padding-bottom: 50px; 199 | letter-spacing: -0.025em; 200 | color: #ffffff; 201 | } 202 | 203 | div { 204 | display: grid; 205 | grid-template-columns: 200px 200px; 206 | grid-template-rows: 35px 35px 35px; 207 | grid-column-gap: 2%; 208 | } 209 | } 210 | 211 | &__copyright-section { 212 | color: #ffffff; 213 | border-top: 1px solid #0d023d; 214 | display: flex; 215 | justify-content: space-between; 216 | align-items: center; 217 | padding: 20px 130px; 218 | } 219 | &__icons { 220 | display: flex; 221 | justify-content: space-between; 222 | width: 100px; 223 | } 224 | } 225 | 226 | /************************************************************************ MEDIA QUERIES ************************************************************************/ 227 | 228 | /**************************** Tablet Max ***/ 229 | 230 | @media all and (max-width: 1024px) { 231 | .container { 232 | width: 90%; 233 | margin: 0 auto; 234 | } 235 | 236 | /* Navbar Menu Style */ 237 | 238 | .navbar__content { 239 | width: 100%; 240 | position: relative; 241 | z-index: 1000; 242 | 243 | .navbar { 244 | .logo { 245 | width: 14%; 246 | img { 247 | width: 100%; 248 | } 249 | } 250 | 251 | // Navbar Links 252 | .navbar__links { 253 | display: flex; 254 | width: 60%; 255 | } 256 | } 257 | } 258 | 259 | /* Footer Style */ 260 | 261 | .footer { 262 | &__content { 263 | padding-left: 0; 264 | width: 90%; 265 | margin: 0 auto; 266 | } 267 | } 268 | } 269 | 270 | /**************************** Tablet Min ***/ 271 | 272 | @media all and (max-width: 768px) { 273 | #__next { 274 | overflow-x: hidden; 275 | } 276 | 277 | /* Navbar Menu Style */ 278 | 279 | .navbar__content { 280 | width: 100%; 281 | position: relative; 282 | z-index: 1000; 283 | 284 | .navbar { 285 | .logo { 286 | width: 20%; 287 | img { 288 | width: 100%; 289 | } 290 | } 291 | 292 | // Navbar Links 293 | .navbar__links { 294 | display: none; 295 | } 296 | 297 | // Hamburger menu 298 | .hamburger-menu { 299 | display: block; 300 | } 301 | .mobile-container { 302 | display: block; 303 | 304 | // Hamburger menu 305 | .hamburger-menu { 306 | display: inline-block; 307 | } 308 | 309 | // Mobile Menu 310 | .mobile-menu { 311 | display: flex; 312 | } 313 | } 314 | } 315 | } 316 | } 317 | 318 | /**************************** Mobile Max ***/ 319 | 320 | @media all and (max-width: 600px) { 321 | /* Navbar Menu Style */ 322 | 323 | .navbar__content { 324 | width: 100%; 325 | position: relative; 326 | z-index: 1000; 327 | 328 | .navbar { 329 | .logo { 330 | width: 28%; 331 | img { 332 | width: 100%; 333 | background-position: left bottom; 334 | } 335 | } 336 | 337 | // Navbar Links 338 | .navbar__links { 339 | display: none; 340 | } 341 | 342 | .mobile-container { 343 | display: block; 344 | 345 | // Hamburger menu 346 | .hamburger-menu { 347 | display: inline-block; 348 | } 349 | 350 | // Mobile Menu 351 | .mobile-menu { 352 | display: flex; 353 | } 354 | } 355 | } 356 | } 357 | 358 | /* Footer Style */ 359 | .footer { 360 | padding: 2em 0 0 0; 361 | 362 | &__content { 363 | display: flex; 364 | flex-direction: column; 365 | width: 90%; 366 | margin: 0 auto 2em; 367 | padding: 0; 368 | 369 | .footer__info { 370 | display: flex; 371 | flex-direction: column; 372 | width: 100%; 373 | margin-bottom: 2em; 374 | 375 | .footer__logo { 376 | width: 40%; 377 | height: 40%; 378 | margin: 0 auto 1em auto; 379 | 380 | img { 381 | width: 100%; 382 | height: 100%; 383 | position: static; 384 | transform: translateX(0); 385 | } 386 | } 387 | 388 | .footer__contact-info { 389 | display: flex; 390 | width: 100%; 391 | height: 20%; 392 | text-align: center; 393 | position: static; 394 | 395 | a:not(:last-child) { 396 | margin-bottom: 2em; 397 | } 398 | } 399 | } 400 | } 401 | 402 | &__extra-links { 403 | padding-top: 2em; 404 | 405 | h2 { 406 | text-align: center; 407 | padding-bottom: 30px; 408 | } 409 | 410 | div { 411 | display: grid; 412 | grid-template-columns: 1fr; 413 | justify-content: space-between; 414 | } 415 | } 416 | &__copyright-section { 417 | display: block; 418 | text-align: center; 419 | padding: 15px 0; 420 | 421 | .footer__icons { 422 | margin: 2em auto 0 auto; 423 | width: 50%; 424 | } 425 | } 426 | } 427 | } 428 | -------------------------------------------------------------------------------- /styles/_homepage.scss: -------------------------------------------------------------------------------- 1 | /*** Header Component Styles ***********/ 2 | 3 | .header { 4 | font-family: $primary_font; 5 | height: 65vh; 6 | display: flex; 7 | flex-direction: column; 8 | align-items: center; 9 | justify-content: center; 10 | } 11 | 12 | .header__container { 13 | text-align: center; 14 | position: absolute; 15 | z-index: 100; 16 | } 17 | 18 | .header__container > h1 { 19 | font-family: $primary_font; 20 | font-weight: 700; 21 | color: white; 22 | font-size: 70px; 23 | letter-spacing: -1px; 24 | width: 70%; 25 | margin: 0 auto; 26 | letter-spacing: -3px; 27 | } 28 | 29 | .header__container > div { 30 | padding-top: 50px; 31 | } 32 | 33 | .header__white__btn { 34 | background: white; 35 | padding: 20px 40px; 36 | color: black; 37 | font-weight: 600; 38 | border-radius: 3px; 39 | margin-right: 20px; 40 | box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1); 41 | font-size: 15px; 42 | } 43 | 44 | .header__red__btn { 45 | background: black; 46 | padding: 20px 40px; 47 | color: white; 48 | font-weight: 600; 49 | border-radius: 3px; 50 | box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1); 51 | font-size: 15px; 52 | } 53 | 54 | /*** Why Work With Us Component Styles ***********/ 55 | 56 | .why__work__with__us { 57 | height: 60vh; 58 | display: flex; 59 | flex-direction: column; 60 | align-items: center; 61 | justify-content: center; 62 | margin-bottom: 40px; 63 | margin: 70px 0; 64 | 65 | & > h3 { 66 | font-size: 38px; 67 | } 68 | 69 | & > hr { 70 | width: 100px; 71 | margin: 20px 0; 72 | border: 1px solid rgb(250, 0, 30); 73 | } 74 | 75 | & > .company__info { 76 | width: 100%; 77 | display: flex; 78 | justify-content: space-evenly; 79 | margin: 40px 0; 80 | 81 | & > div { 82 | & > h1 { 83 | font-size: 70px; 84 | color: rgb(250, 0, 30); 85 | } 86 | & > p { 87 | font-size: 25px; 88 | font-weight: 700; 89 | margin-top: 10px; 90 | } 91 | } 92 | } 93 | } 94 | 95 | /*** Services we offer Component Styles ***********/ 96 | 97 | .services__we__offer { 98 | align-items: center; 99 | width: 90%; 100 | margin: 0 auto; 101 | display: flex; 102 | flex-direction: column; 103 | margin-bottom: 40px; 104 | 105 | & > .services__header { 106 | display: flex; 107 | align-items: center; 108 | justify-content: space-around; 109 | 110 | h2 { 111 | font-size: 33px; 112 | } 113 | 114 | h4 { 115 | width: 50%; 116 | font-weight: 400; 117 | font-size: 14px; 118 | line-height: 24px; 119 | border-left: 2px solid rgb(250, 0, 30); 120 | padding-left: 25px; 121 | } 122 | } 123 | 124 | & > .service { 125 | width: 90%; 126 | margin: 0 auto; 127 | padding: 50px 0; 128 | display: flex; 129 | align-items: center; 130 | 131 | & > .service__content { 132 | padding: 0 30px; 133 | h2 { 134 | font-size: 30px; 135 | } 136 | p { 137 | font-size: 14px; 138 | line-height: 28px; 139 | padding: 15px 0; 140 | } 141 | 142 | & > a { 143 | background: rgb(250, 0, 30); 144 | color: white; 145 | padding: 15px 25px; 146 | font-size: 15px; 147 | display: inline-block; 148 | margin-top: 10px; 149 | } 150 | } 151 | } 152 | } 153 | 154 | /*** Testimonial Component Styles ***********/ 155 | 156 | .testomonials { 157 | display: flex; 158 | flex-direction: column; 159 | align-items: center; 160 | justify-content: center; 161 | margin: 70px 0; 162 | position: relative; 163 | 164 | .red__box { 165 | height: 450px; 166 | width: 450px; 167 | bottom: 10%; 168 | background: rgb(250, 0, 30); 169 | position: absolute; 170 | left: -60px; 171 | z-index: -1; 172 | } 173 | 174 | .testomonials__header { 175 | & > h1 { 176 | font-size: 38px; 177 | } 178 | 179 | & > hr { 180 | width: 100px; 181 | margin: 20px auto; 182 | border: 1px solid rgb(250, 0, 30); 183 | } 184 | } 185 | 186 | .all__testomonials { 187 | margin: 30px 0; 188 | display: grid; 189 | grid-template-columns: repeat(2, 1fr); 190 | justify-content: center; 191 | grid-gap: 30px; 192 | } 193 | 194 | .testomonial { 195 | max-width: 550px; 196 | padding: 40px 30px; 197 | 198 | .user__data { 199 | display: flex; 200 | align-items: center; 201 | img { 202 | display: inline; 203 | width: 8%; 204 | height: 100%; 205 | border-radius: 50%; 206 | padding: 0; 207 | border: 2px solid rgb(250, 0, 30); 208 | } 209 | 210 | & > div { 211 | padding-left: 10px; 212 | & > h4 { 213 | font-size: 18px; 214 | font-weight: 700; 215 | } 216 | & > p { 217 | font-size: 10px; 218 | margin-top: 3px; 219 | } 220 | } 221 | } 222 | background: white; 223 | box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.055); 224 | 225 | & > span { 226 | display: inline-block; 227 | font-style: italic; 228 | line-height: 32px; 229 | font-size: 16px; 230 | padding-top: 10px; 231 | 232 | & > .large__font { 233 | font-size: 25px; 234 | color: rgb(250, 0, 30); 235 | font-weight: 600; 236 | } 237 | } 238 | } 239 | } 240 | 241 | /*** View our projects Component Styles ***********/ 242 | 243 | .view__our__projects { 244 | width: 80%; 245 | margin: 50px auto; 246 | display: flex; 247 | flex-direction: column; 248 | justify-content: center; 249 | 250 | .projects__header { 251 | text-align: left; 252 | 253 | h1 { 254 | font-size: 38px; 255 | } 256 | } 257 | 258 | & > .projects { 259 | .project:nth-child(odd) { 260 | flex-direction: row-reverse; 261 | } 262 | 263 | .project { 264 | display: flex; 265 | order: 0; 266 | align-items: center; 267 | 268 | & > .project__info { 269 | margin-left: 40px; 270 | background: white; 271 | box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.048); 272 | width: 100%; 273 | padding: 35px 35px; 274 | 275 | h1 { 276 | font-size: 30px; 277 | color: $secondary-color; 278 | } 279 | 280 | p { 281 | font-size: 14px; 282 | width: 90%; 283 | line-height: 34px; 284 | padding: 10px 0 15px 0; 285 | } 286 | 287 | & > .project__buttons { 288 | margin-top: 5px; 289 | display: flex; 290 | font-size: 14px; 291 | align-items: center; 292 | 293 | .blue__link { 294 | font-weight: 600; 295 | padding: 15px 20px; 296 | color: $secondary-color; 297 | } 298 | 299 | .red__button { 300 | padding: 15px 20px; 301 | font-weight: 600; 302 | color: white; 303 | font-size: 12px; 304 | background: rgb(250, 0, 30); 305 | } 306 | } 307 | } 308 | } 309 | } 310 | } 311 | 312 | /*** Who We are Component Styles ***********/ 313 | 314 | .who__are__we { 315 | width: 80%; 316 | margin: 50px auto; 317 | margin-top: 100px; 318 | display: flex; 319 | flex-direction: column; 320 | justify-content: center; 321 | text-align: center; 322 | height: 60vh; 323 | 324 | .who__are__we__header { 325 | h1 { 326 | font-size: 38px; 327 | } 328 | hr { 329 | width: 100px; 330 | margin: 20px auto; 331 | border: 1px solid rgb(250, 0, 30); 332 | } 333 | } 334 | .who__are__we__content { 335 | display: grid; 336 | grid-template-columns: repeat(2, 1fr); 337 | align-items: center; 338 | height: 30vh; 339 | .logo { 340 | width: 60%; 341 | margin: 0 auto; 342 | box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.027); 343 | 344 | img { 345 | width: 65%; 346 | } 347 | } 348 | 349 | .who__are__we__info > p { 350 | text-align: left; 351 | font-size: 14px; 352 | line-height: 28px; 353 | } 354 | } 355 | } 356 | 357 | /*** What More Component Styles ***********/ 358 | 359 | .what__more { 360 | height: 40vh; 361 | display: flex; 362 | flex-direction: column; 363 | align-items: center; 364 | justify-content: center; 365 | margin-bottom: 70px; 366 | 367 | h1 { 368 | font-size: 38px; 369 | } 370 | 371 | p { 372 | padding: 20px 0; 373 | } 374 | } 375 | 376 | /************************************************************************ MEDIA QUERIES ************************************************************************/ 377 | 378 | /**************************** Tablet Max ***/ 379 | 380 | @media all and (max-width: 1024px) { 381 | // Header 382 | .header__container > h1 { 383 | font-size: $lg_heading; 384 | } 385 | .header__white__btn { 386 | padding: 10px 20px; 387 | } 388 | .header__red__btn { 389 | padding: 10px 20px; 390 | } 391 | 392 | // Why Work with us 393 | .why__work__with__us > .company__info { 394 | flex-direction: column; 395 | align-items: center; 396 | } 397 | 398 | .why__work__with__us { 399 | margin: 22% 0; 400 | } 401 | 402 | // Services 403 | 404 | .services__we__offer > .service img { 405 | display: none; 406 | width: 0; 407 | } 408 | 409 | .services__we__offer > .service .service__content { 410 | width: 100%; 411 | } 412 | .services__we__offer > .services__header h2 { 413 | font-size: 33px; 414 | margin-bottom: 10px; 415 | } 416 | 417 | // View Project 418 | 419 | .view__our__projects .projects__header h1 { 420 | text-align: center; 421 | margin-bottom: 2em; 422 | } 423 | .view__our__projects > .projects .project:nth-child(odd) { 424 | flex-direction: column; 425 | margin-top: 35px; 426 | } 427 | .view__our__projects > .projects .project { 428 | flex-direction: column; 429 | margin-top: 35px; 430 | } 431 | 432 | .view__our__projects > .projects .project .image { 433 | margin-bottom: 2em; 434 | } 435 | } 436 | 437 | /**************************** Mobile Max ***/ 438 | 439 | @media all and (max-width: 600px) { 440 | .why__work__with__us > .company__info > div > h1 { 441 | text-align: center; 442 | } 443 | .services__we__offer > .services__header h4 { 444 | width: 100%; 445 | } 446 | .services__we__offer > .service > .service__content { 447 | padding: 0; 448 | } 449 | .testomonials .red__box { 450 | bottom: 38%; 451 | } 452 | .testomonials .all__testomonials { 453 | display: flex; 454 | flex-direction: column; 455 | } 456 | 457 | .view__our__projects { 458 | width: 100%; 459 | } 460 | .view__our__projects > .projects .project > .project__info { 461 | margin-left: 0; 462 | 463 | p { 464 | width: 100%; 465 | } 466 | 467 | .project__buttons { 468 | text-align: center; 469 | } 470 | } 471 | 472 | .who__are__we { 473 | height: auto; 474 | } 475 | 476 | .who__are__we .who__are__we__content { 477 | display: flex; 478 | flex-direction: column-reverse; 479 | height: auto; 480 | } 481 | 482 | .what__more h1 { 483 | font-size: $lg_heading; 484 | text-align: center; 485 | } 486 | 487 | .what__more p { 488 | padding: 20px 50px; 489 | } 490 | } 491 | 492 | /**************************** Mobile Mid ***/ 493 | 494 | @media all and (max-width: 450px) { 495 | //@Landing-Page 496 | .why__work__with__us { 497 | margin: 42% 0; 498 | } 499 | .testomonials .red__box { 500 | width: 100%; 501 | } 502 | } 503 | 504 | /**************************** Mobile Min ***/ 505 | 506 | @media all and (max-width: 325px) { 507 | //@Landing-Page 508 | .why__work__with__us { 509 | margin: 55% 0; 510 | } 511 | } 512 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap");html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace, monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}*{margin:0;padding:0;box-sizing:border-box;font-family:"Inter"}body{min-height:100vh}li{list-style-type:none}a{text-decoration:none}.container{width:100%;margin:0 auto}.nav__container{background:white;box-shadow:0px 0px 50px rgba(0,0,0,0.048)}.logo{width:20%}.navbar__announcment{width:100%;display:flex;align-items:center;font-family:'Inter';background:#fa001e;color:white;padding:12px 25px;font-size:11px;font-weight:500;cursor:pointer}.announcment__arrow{font-size:13px;font-weight:700;margin-left:5px}.logo>img{width:45%}.navbar{font-family:'Inter';display:flex;justify-content:space-between;align-items:center;height:12vh;width:90%;margin:0 auto}.navbar__links{display:flex;width:600px;justify-content:space-between;align-items:center}.nav__link{color:black;font-weight:600;font-size:14px}.button__red{background:#fa001e;color:white;padding:15px 25px;font-size:15px}.header{font-family:"Inter";height:65vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:url("/headerBg.png")}.header__container{text-align:center}.header__container>h1{font-family:"Inter";font-weight:700;color:white;font-size:70px;letter-spacing:-1px;width:70%;margin:0 auto;letter-spacing:-3px}.header__container>div{padding-top:50px}.header__white__btn{background:white;padding:20px 40px;color:black;font-weight:600;border-radius:3px;margin-right:20px;box-shadow:0px 0px 20px rgba(0,0,0,0.1);font-size:15px}.header__red__btn{background:#fa001e;padding:20px 40px;color:white;font-weight:600;border-radius:3px;box-shadow:0px 0px 20px rgba(0,0,0,0.1);font-size:15px}.contact{display:flex;justify-content:space-evenly;padding:0px 33px;width:90%;margin:0 auto}.contact__hero-section{width:45%}.contact__hero-section h1{color:#080036;font-style:normal;font-weight:600;font-size:2.5rem;text-transform:capitalize;padding:25% 0 40px 0;line-height:132.19%;letter-spacing:-0.025em;width:90%}.contact__hero-section p{font-family:Inter;font-style:normal;font-size:.9rem;font-weight:500;line-height:35px;letter-spacing:0em;text-align:left}.contact__form-section{margin-top:86px;margin-bottom:10%;position:relative;box-shadow:0px 0px 50px rgba(0,0,0,0.048)}.contact__form-section-container{padding:0 30px}.contact__form-section-header{padding-top:15px}.contact__form-section-header h2{letter-spacing:-1px;font-style:normal;font-weight:600;font-size:2rem;line-height:211.69%}.contact__form-section-header p{font-style:normal;font-weight:500;line-height:184.69%;color:#5f5f5f}.contact__form{display:flex;flex-direction:column;padding-top:20px}.contact__form input,.contact__form textarea,.contact__form button{padding:20px;margin:8px 0;border-radius:5px}.contact__form input::-webkit-input-placeholder,.contact__form textarea::-webkit-input-placeholder,.contact__form button::-webkit-input-placeholder{color:#c7c2c2;font-size:13px}.contact__form input:-moz-placeholder,.contact__form textarea:-moz-placeholder,.contact__form button:-moz-placeholder{color:#c7c2c2;font-size:13px}.contact__form input::-moz-placeholder,.contact__form textarea::-moz-placeholder,.contact__form button::-moz-placeholder{color:#c7c2c2;font-size:13px}.contact__form input:-ms-input-placeholder,.contact__form textarea:-ms-input-placeholder,.contact__form button:-ms-input-placeholder{color:#c7c2c2;font-size:13px}.contact__form input{width:100%;border:1px solid #e3e3e3}.contact__form textarea{height:150px;border:1px solid #e3e3e3}.contact__form button{background:#fa001e;color:#ffffff;letter-spacing:0.025em;border:none;margin:35px 0}.faq{text-align:center}.faq h1{color:#080036;font-family:"Inter";font-style:normal;font-weight:600;font-size:2.5rem;letter-spacing:-0.025em;line-height:211.69%}.faq__container{display:flex;width:50%;margin:0 auto;flex-direction:column;justify-content:space-between;padding:70px 0 200px 0}.faq__questions-container{margin-bottom:30px}.faq__questions{cursor:pointer;padding:20px;display:flex;justify-content:space-between;align-items:center;background:#ffffff;border:1px solid #c7c7c7;box-sizing:border-box;border-radius:5px}.faq__questions h1{font-family:"Inter";font-style:normal;font-weight:500;font-size:1rem;line-height:211.69%;color:#080036}.faq__questions__icon{color:#b9b3b3}.faq__answers{font-family:"Inter";font-style:normal;font-weight:normal;font-size:1rem;line-height:211.69%;color:#919191;text-align:left;padding:30px 35px;background:#ffffff;border:1px solid #c7c7c7;box-sizing:border-box;border-radius:5px;display:none;transition:all 0.3s ease-in-out}.why__work__with__us{height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;margin-bottom:40px;margin:70px 0}.why__work__with__us>h3{font-size:38px}.why__work__with__us>hr{width:100px;margin:20px 0;border:1px solid #fa001e}.why__work__with__us>.company__info{width:100%;display:flex;justify-content:space-evenly;margin:40px 0}.why__work__with__us>.company__info>div>h1{font-size:70px;color:#fa001e}.why__work__with__us>.company__info>div>p{font-size:25px;font-weight:700;margin-top:10px}.services__we__offer{align-items:center;width:90%;margin:0 auto;display:flex;flex-direction:column;margin-bottom:40px}.services__we__offer>.services__header{display:flex;align-items:center;justify-content:space-around}.services__we__offer>.services__header h2{font-size:33px}.services__we__offer>.services__header h4{width:50%;font-weight:400;font-size:14px;line-height:24px;border-left:2px solid #fa001e;padding-left:25px}.services__we__offer>.service{width:90%;margin:0 auto;padding:50px 0;display:flex;align-items:center}.services__we__offer>.service img{width:45%;margin:0}.services__we__offer>.service>.service__content{padding:0 30px}.services__we__offer>.service>.service__content h2{font-size:30px}.services__we__offer>.service>.service__content p{font-size:14px;line-height:28px;padding:15px 0}.services__we__offer>.service>.service__content>a{background:#fa001e;color:white;padding:15px 25px;font-size:15px;display:inline-block;margin-top:10px}.testomonials{display:flex;flex-direction:column;align-items:center;justify-content:center;margin:70px 0;position:relative}.testomonials .red__box{height:450px;width:450px;bottom:10%;background:#fa001e;position:absolute;left:-60px;z-index:-1}.testomonials .testomonials__header>h1{font-size:38px}.testomonials .testomonials__header>hr{width:100px;margin:20px auto;border:1px solid #fa001e}.testomonials .all__testomonials{margin:30px 0;display:grid;grid-template-columns:repeat(2, 1fr);justify-content:center;grid-gap:30px}.testomonials .testomonial{max-width:550px;padding:40px 30px;background:white;box-shadow:0px 0px 40px rgba(0,0,0,0.055)}.testomonials .testomonial .user__data{display:flex;align-items:center}.testomonials .testomonial .user__data img{display:inline;width:8%;border-radius:50%;padding:0;border:2px solid #fa001e}.testomonials .testomonial .user__data>div{padding-left:10px}.testomonials .testomonial .user__data>div>h4{font-size:18px;font-weight:700}.testomonials .testomonial .user__data>div>p{font-size:10px;margin-top:3px}.testomonials .testomonial>span{display:inline-block;font-style:italic;line-height:32px;font-size:16px;padding-top:10px}.testomonials .testomonial>span>.large__font{font-size:25px;color:#fa001e;font-weight:600}.view__our__projects{width:80%;margin:50px auto;display:flex;flex-direction:column;justify-content:center}.view__our__projects .projects__header{text-align:left}.view__our__projects .projects__header h1{font-size:38px}.view__our__projects>.projects .project:nth-child(odd){flex-direction:row-reverse}.view__our__projects>.projects .project{display:flex;order:0;align-items:center}.view__our__projects>.projects .project>.image img{width:100%}.view__our__projects>.projects .project>.project__info{margin-left:40px;background:white;box-shadow:0px 0px 40px rgba(0,0,0,0.048);width:100%;padding:35px 35px}.view__our__projects>.projects .project>.project__info h1{font-size:30px;color:#080036}.view__our__projects>.projects .project>.project__info p{font-size:14px;width:90%;line-height:34px;padding:10px 0 15px 0}.view__our__projects>.projects .project>.project__info>.project__buttons{margin-top:5px;display:flex;font-size:14px;align-items:center}.view__our__projects>.projects .project>.project__info>.project__buttons .blue__link{font-weight:600;padding:15px 20px;color:#080036}.view__our__projects>.projects .project>.project__info>.project__buttons .red__button{padding:15px 20px;font-weight:600;color:white;font-size:12px;background:#fa001e}.who__are__we{width:80%;margin:50px auto;margin-top:100px;display:flex;flex-direction:column;justify-content:center;text-align:center;height:60vh}.who__are__we .who__are__we__header h1{font-size:38px}.who__are__we .who__are__we__header hr{width:100px;margin:20px auto;border:1px solid #fa001e}.who__are__we .who__are__we__content{display:grid;grid-template-columns:repeat(2, 1fr);align-items:center;height:30vh}.who__are__we .who__are__we__content .logo{width:60%;margin:0 auto;box-shadow:0px 0px 40px rgba(0,0,0,0.027)}.who__are__we .who__are__we__content .logo img{width:65%}.who__are__we .who__are__we__content .who__are__we__info>p{text-align:left;font-size:14px;line-height:28px}.what__more{height:40vh;display:flex;flex-direction:column;align-items:center;justify-content:center;margin-bottom:70px}.what__more h1{font-size:38px}.what__more p{padding:20px 0}.footer{background:#080036}.footer__content{padding-left:140px;padding-bottom:50px;display:grid;grid-template-columns:200px 200px;grid-column-gap:10%}.footer__logo{width:100%;height:135px}.footer__logo img{width:80%;transform:translateX(-24px);position:relative;z-index:0}.footer__link{font-weight:500;text-decoration:none;letter-spacing:-0.025em;color:#ffffff}.footer__link:hover{color:#fa001e}.footer__link:last-child{grid-column:1/3}.footer__contact-info{height:110px;width:200px;display:flex;flex-direction:column;justify-content:space-between;position:relative;z-index:1}.footer__extra-links{padding-top:60px}.footer__extra-links h2{font-size:23px;padding-bottom:50px;letter-spacing:-0.025em;color:#ffffff}.footer__extra-links div{display:grid;grid-template-columns:200px 200px;grid-template-rows:35px 35px 35px 35px;grid-column-gap:2%}.footer__copyright-section{color:#ffffff;border-top:1px solid #0d023d;display:flex;justify-content:space-between;align-items:center;padding:20px 130px}.footer__icons{display:flex;justify-content:space-between;width:100px}.services{display:flex;justify-content:center;margin-right:30px;margin-top:5%;font-size:1.2em}.firstp{text-align:inherit;width:10%;font-size:15px;font-size:15px;margin-left:410px;line-height:1.7rem;width:330%;height:400px;text-align:inherit}.secondp{text-align:inherit;font-size:15px;margin-left:700px;font-size:15px;margin-right:15px;line-height:1.7rem;height:400px;text-align:inherit;display:inline-block;position:relative;bottom:200px}.lux{display:flex;margin-right:100px;line-height:1em;font-size:20px;margin-top:-40px;font-size:3em}.squarepic{display:flex;align-items:flex-start;justify-content:flex-start;margin-top:-300px}.firstp2{padding:20px 40px 40px;max-width:640px;display:flex;font-size:15px;margin-left:590px;font-size:15px;margin-right:15px;line-height:1.7rem;float:left}.firstp2__image{margin:20px 30px 0 0;width:200px;object-fit:contain;align-self:flex-start}.firstp2__text{flex:1 1 auto}.twowords{margin-left:270px}.thridp{text-align:inherit;width:10%;font-size:15px;font-size:15px;line-height:2.7rem;width:90%;height:400px;text-align:inherit}.bookservice{margin-top:3%}.bookservice2{color:black}.squarepic{display:flex;align-items:flex-start;justify-content:flex-start}.firstp2{padding:20px 40px 40px;max-width:640px;display:flex}.firstp2__image{margin:20px 30px 0 0;width:200px;object-fit:contain;align-self:flex-start}.firstp2__text{flex:1 1 auto} 2 | -------------------------------------------------------------------------------- /styles/style.css.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "mappings": "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", 4 | "sources": [ 5 | "style.scss", 6 | "_normalize.scss", 7 | "_fonts.scss", 8 | "_utilities.scss", 9 | "_config.scss", 10 | "_buttons.scss", 11 | "_animation.scss", 12 | "_desktopMin.scss", 13 | "_tabletMax.scss", 14 | "_tabletMin.scss", 15 | "_mobileMax.scss", 16 | "_mobileMid.scss", 17 | "_mobileMin.scss", 18 | "_galaxy.scss" 19 | ], 20 | "names": [], 21 | "file": "style.css" 22 | } -------------------------------------------------------------------------------- /styles/style.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ 2 | /* Document 3 | ========================================================================== */ 4 | /** 5 | * 1. Correct the line height in all browsers. 6 | * 2. Prevent adjustments of font size after orientation changes in iOS. 7 | */ 8 | @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"); 9 | @import url("https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap"); 10 | html { 11 | line-height: 1.15; 12 | /* 1 */ 13 | -webkit-text-size-adjust: 100%; 14 | /* 2 */ 15 | } 16 | 17 | /* Sections 18 | ========================================================================== */ 19 | /** 20 | * Remove the margin in all browsers. 21 | */ 22 | body { 23 | margin: 0; 24 | } 25 | 26 | /** 27 | * Render the `main` element consistently in IE. 28 | */ 29 | main { 30 | display: block; 31 | } 32 | 33 | /* Grouping content 34 | ========================================================================== */ 35 | /** 36 | * 1. Add the correct box sizing in Firefox. 37 | * 2. Show the overflow in Edge and IE. 38 | */ 39 | hr { 40 | -webkit-box-sizing: content-box; 41 | box-sizing: content-box; 42 | /* 1 */ 43 | height: 0; 44 | /* 1 */ 45 | overflow: visible; 46 | /* 2 */ 47 | } 48 | 49 | /** 50 | * 1. Correct the inheritance and scaling of font size in all browsers. 51 | * 2. Correct the odd `em` font sizing in all browsers. 52 | */ 53 | pre { 54 | font-family: monospace, monospace; 55 | /* 1 */ 56 | font-size: 1em; 57 | /* 2 */ 58 | } 59 | 60 | /* Text-level semantics 61 | ========================================================================== */ 62 | /** 63 | * Remove the gray background on active links in IE 10. 64 | */ 65 | a { 66 | background-color: transparent; 67 | } 68 | 69 | /** 70 | * 1. Remove the bottom border in Chrome 57- 71 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 72 | */ 73 | abbr[title] { 74 | border-bottom: none; 75 | /* 1 */ 76 | text-decoration: underline; 77 | /* 2 */ 78 | -webkit-text-decoration: underline dotted; 79 | text-decoration: underline dotted; 80 | /* 2 */ 81 | } 82 | 83 | /** 84 | * Add the correct font weight in Chrome, Edge, and Safari. 85 | */ 86 | b, 87 | strong { 88 | font-weight: bolder; 89 | } 90 | 91 | /** 92 | * 1. Correct the inheritance and scaling of font size in all browsers. 93 | * 2. Correct the odd `em` font sizing in all browsers. 94 | */ 95 | code, 96 | kbd, 97 | samp { 98 | font-family: monospace, monospace; 99 | /* 1 */ 100 | font-size: 1em; 101 | /* 2 */ 102 | } 103 | 104 | /** 105 | * Add the correct font size in all browsers. 106 | */ 107 | small { 108 | font-size: 80%; 109 | } 110 | 111 | /** 112 | * Prevent `sub` and `sup` elements from affecting the line height in 113 | * all browsers. 114 | */ 115 | sub, 116 | sup { 117 | font-size: 75%; 118 | line-height: 0; 119 | position: relative; 120 | vertical-align: baseline; 121 | } 122 | 123 | sub { 124 | bottom: -0.25em; 125 | } 126 | 127 | sup { 128 | top: -0.5em; 129 | } 130 | 131 | /* Embedded content 132 | ========================================================================== */ 133 | /** 134 | * Remove the border on images inside links in IE 10. 135 | */ 136 | img { 137 | border-style: none; 138 | } 139 | 140 | /* Forms 141 | ========================================================================== */ 142 | /** 143 | * 1. Change the font styles in all browsers. 144 | * 2. Remove the margin in Firefox and Safari. 145 | */ 146 | button, 147 | input, 148 | optgroup, 149 | select, 150 | textarea { 151 | font-family: inherit; 152 | /* 1 */ 153 | font-size: 100%; 154 | /* 1 */ 155 | line-height: 1.15; 156 | /* 1 */ 157 | margin: 0; 158 | /* 2 */ 159 | } 160 | 161 | /** 162 | * Show the overflow in IE. 163 | * 1. Show the overflow in Edge. 164 | */ 165 | button, 166 | input { 167 | /* 1 */ 168 | overflow: visible; 169 | } 170 | 171 | /** 172 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 173 | * 1. Remove the inheritance of text transform in Firefox. 174 | */ 175 | button, 176 | select { 177 | /* 1 */ 178 | text-transform: none; 179 | } 180 | 181 | /** 182 | * Correct the inability to style clickable types in iOS and Safari. 183 | */ 184 | button, 185 | [type="button"], 186 | [type="reset"], 187 | [type="submit"] { 188 | -webkit-appearance: button; 189 | } 190 | 191 | /** 192 | * Remove the inner border and padding in Firefox. 193 | */ 194 | button::-moz-focus-inner, 195 | [type="button"]::-moz-focus-inner, 196 | [type="reset"]::-moz-focus-inner, 197 | [type="submit"]::-moz-focus-inner { 198 | border-style: none; 199 | padding: 0; 200 | } 201 | 202 | /** 203 | * Restore the focus styles unset by the previous rule. 204 | */ 205 | button:-moz-focusring, 206 | [type="button"]:-moz-focusring, 207 | [type="reset"]:-moz-focusring, 208 | [type="submit"]:-moz-focusring { 209 | outline: 1px dotted ButtonText; 210 | } 211 | 212 | /** 213 | * Correct the padding in Firefox. 214 | */ 215 | fieldset { 216 | padding: 0.35em 0.75em 0.625em; 217 | } 218 | 219 | /** 220 | * 1. Correct the text wrapping in Edge and IE. 221 | * 2. Correct the color inheritance from `fieldset` elements in IE. 222 | * 3. Remove the padding so developers are not caught out when they zero out 223 | * `fieldset` elements in all browsers. 224 | */ 225 | legend { 226 | -webkit-box-sizing: border-box; 227 | box-sizing: border-box; 228 | /* 1 */ 229 | color: inherit; 230 | /* 2 */ 231 | display: table; 232 | /* 1 */ 233 | max-width: 100%; 234 | /* 1 */ 235 | padding: 0; 236 | /* 3 */ 237 | white-space: normal; 238 | /* 1 */ 239 | } 240 | 241 | /** 242 | * Add the correct vertical alignment in Chrome, Firefox, and Opera. 243 | */ 244 | progress { 245 | vertical-align: baseline; 246 | } 247 | 248 | /** 249 | * Remove the default vertical scrollbar in IE 10+. 250 | */ 251 | textarea { 252 | overflow: auto; 253 | } 254 | 255 | /** 256 | * 1. Add the correct box sizing in IE 10. 257 | * 2. Remove the padding in IE 10. 258 | */ 259 | [type="checkbox"], 260 | [type="radio"] { 261 | -webkit-box-sizing: border-box; 262 | box-sizing: border-box; 263 | /* 1 */ 264 | padding: 0; 265 | /* 2 */ 266 | } 267 | 268 | /** 269 | * Correct the cursor style of increment and decrement buttons in Chrome. 270 | */ 271 | [type="number"]::-webkit-inner-spin-button, 272 | [type="number"]::-webkit-outer-spin-button { 273 | height: auto; 274 | } 275 | 276 | /** 277 | * 1. Correct the odd appearance in Chrome and Safari. 278 | * 2. Correct the outline style in Safari. 279 | */ 280 | [type="search"] { 281 | -webkit-appearance: textfield; 282 | /* 1 */ 283 | outline-offset: -2px; 284 | /* 2 */ 285 | } 286 | 287 | /** 288 | * Remove the inner padding in Chrome and Safari on macOS. 289 | */ 290 | [type="search"]::-webkit-search-decoration { 291 | -webkit-appearance: none; 292 | } 293 | 294 | /** 295 | * 1. Correct the inability to style clickable types in iOS and Safari. 296 | * 2. Change font properties to `inherit` in Safari. 297 | */ 298 | ::-webkit-file-upload-button { 299 | -webkit-appearance: button; 300 | /* 1 */ 301 | font: inherit; 302 | /* 2 */ 303 | } 304 | 305 | /* Interactive 306 | ========================================================================== */ 307 | /* 308 | * Add the correct display in Edge, IE 10+, and Firefox. 309 | */ 310 | details { 311 | display: block; 312 | } 313 | 314 | /* 315 | * Add the correct display in all browsers. 316 | */ 317 | summary { 318 | display: list-item; 319 | } 320 | 321 | /* Misc 322 | ========================================================================== */ 323 | /** 324 | * Add the correct display in IE 10+. 325 | */ 326 | template { 327 | display: none; 328 | } 329 | 330 | /** 331 | * Add the correct display in IE 10. 332 | */ 333 | [hidden] { 334 | display: none; 335 | } 336 | 337 | * { 338 | margin: 0; 339 | padding: 0; 340 | -webkit-box-sizing: border-box; 341 | box-sizing: border-box; 342 | font-family: "Inter"; 343 | } 344 | 345 | body { 346 | min-height: 100vh; 347 | } 348 | 349 | li { 350 | list-style-type: none; 351 | } 352 | 353 | a { 354 | text-decoration: none; 355 | } 356 | 357 | .container { 358 | width: 100%; 359 | margin: 0 auto; 360 | } 361 | 362 | .nav__container { 363 | background: white; 364 | -webkit-box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.048); 365 | box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.048); 366 | } 367 | 368 | .logo { 369 | width: 20%; 370 | } 371 | 372 | .navbar__announcment { 373 | width: 100%; 374 | display: -webkit-box; 375 | display: -ms-flexbox; 376 | display: flex; 377 | -webkit-box-align: center; 378 | -ms-flex-align: center; 379 | align-items: center; 380 | font-family: 'Inter'; 381 | background: #fa001e; 382 | color: white; 383 | padding: 12px 25px; 384 | font-size: 11px; 385 | font-weight: 500; 386 | cursor: pointer; 387 | } 388 | 389 | .announcment__arrow { 390 | font-size: 13px; 391 | font-weight: 700; 392 | margin-left: 5px; 393 | } 394 | 395 | .logo > img { 396 | width: 45%; 397 | } 398 | 399 | .navbar { 400 | font-family: 'Inter'; 401 | display: -webkit-box; 402 | display: -ms-flexbox; 403 | display: flex; 404 | -webkit-box-pack: justify; 405 | -ms-flex-pack: justify; 406 | justify-content: space-between; 407 | -webkit-box-align: center; 408 | -ms-flex-align: center; 409 | align-items: center; 410 | height: 12vh; 411 | width: 90%; 412 | margin: 0 auto; 413 | } 414 | 415 | .navbar__links { 416 | display: -webkit-box; 417 | display: -ms-flexbox; 418 | display: flex; 419 | width: 600px; 420 | -webkit-box-pack: justify; 421 | -ms-flex-pack: justify; 422 | justify-content: space-between; 423 | -webkit-box-align: center; 424 | -ms-flex-align: center; 425 | align-items: center; 426 | } 427 | 428 | .nav__link { 429 | color: black; 430 | font-weight: 600; 431 | font-size: 14px; 432 | } 433 | 434 | .button__red { 435 | background: #fa001e; 436 | color: white; 437 | padding: 15px 25px; 438 | font-size: 15px; 439 | } 440 | 441 | .header { 442 | font-family: "Inter"; 443 | height: 65vh; 444 | display: -webkit-box; 445 | display: -ms-flexbox; 446 | display: flex; 447 | -webkit-box-orient: vertical; 448 | -webkit-box-direction: normal; 449 | -ms-flex-direction: column; 450 | flex-direction: column; 451 | -webkit-box-align: center; 452 | -ms-flex-align: center; 453 | align-items: center; 454 | -webkit-box-pack: center; 455 | -ms-flex-pack: center; 456 | justify-content: center; 457 | background: url("/headerBg.png"); 458 | } 459 | 460 | .header__container { 461 | text-align: center; 462 | } 463 | 464 | .header__container > h1 { 465 | font-family: "Inter"; 466 | font-weight: 700; 467 | color: white; 468 | font-size: 70px; 469 | letter-spacing: -1px; 470 | width: 70%; 471 | margin: 0 auto; 472 | letter-spacing: -3px; 473 | } 474 | 475 | .header__container > div { 476 | padding-top: 50px; 477 | } 478 | 479 | .header__white__btn { 480 | background: white; 481 | padding: 20px 40px; 482 | color: black; 483 | font-weight: 600; 484 | border-radius: 3px; 485 | margin-right: 20px; 486 | -webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1); 487 | box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1); 488 | font-size: 15px; 489 | } 490 | 491 | .header__red__btn { 492 | background: #fa001e; 493 | padding: 20px 40px; 494 | color: white; 495 | font-weight: 600; 496 | border-radius: 3px; 497 | -webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1); 498 | box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1); 499 | font-size: 15px; 500 | } 501 | 502 | .contact { 503 | display: -webkit-box; 504 | display: -ms-flexbox; 505 | display: flex; 506 | -webkit-box-pack: space-evenly; 507 | -ms-flex-pack: space-evenly; 508 | justify-content: space-evenly; 509 | padding: 0px 33px; 510 | width: 90%; 511 | margin: 0 auto; 512 | } 513 | 514 | .contact__hero-section { 515 | width: 740px; 516 | } 517 | 518 | .contact__hero-section h1 { 519 | color: #080036; 520 | font-style: normal; 521 | font-weight: 600; 522 | font-size: 49px; 523 | padding: 22% 0 40px 0; 524 | line-height: 132.19%; 525 | /* or 65px */ 526 | letter-spacing: -0.025em; 527 | width: 90%; 528 | } 529 | 530 | .contact__hero-section p { 531 | font-family: Inter; 532 | font-size: 25px; 533 | font-style: normal; 534 | font-weight: 500; 535 | line-height: 53px; 536 | letter-spacing: 0em; 537 | text-align: left; 538 | } 539 | 540 | .contact__form-section { 541 | margin-top: 86px; 542 | margin-bottom: 10%; 543 | position: relative; 544 | width: 822px; 545 | -webkit-box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.048); 546 | box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.048); 547 | } 548 | 549 | .contact__form-section-container { 550 | padding: 0 53px; 551 | } 552 | 553 | .contact__form-section-header { 554 | padding-top: 30px; 555 | } 556 | 557 | .contact__form-section-header h2 { 558 | letter-spacing: -1px; 559 | font-style: normal; 560 | font-weight: 600; 561 | font-size: 45px; 562 | line-height: 211.69%; 563 | } 564 | 565 | .contact__form-section-header p { 566 | font-style: normal; 567 | font-weight: 500; 568 | font-size: 23px; 569 | line-height: 184.69%; 570 | /* or 42px */ 571 | color: #5f5f5f; 572 | } 573 | 574 | .contact__form { 575 | display: -webkit-box; 576 | display: -ms-flexbox; 577 | display: flex; 578 | -webkit-box-orient: vertical; 579 | -webkit-box-direction: normal; 580 | -ms-flex-direction: column; 581 | flex-direction: column; 582 | padding-top: 20px; 583 | } 584 | 585 | .contact__form input, 586 | .contact__form textarea, 587 | .contact__form button { 588 | padding: 20px; 589 | margin: 8px 0; 590 | border-radius: 5px; 591 | } 592 | 593 | .contact__form input::-webkit-input-placeholder, 594 | .contact__form textarea::-webkit-input-placeholder, 595 | .contact__form button::-webkit-input-placeholder { 596 | color: #c7c2c2; 597 | font-size: 23px; 598 | } 599 | 600 | .contact__form input:-moz-placeholder, 601 | .contact__form textarea:-moz-placeholder, 602 | .contact__form button:-moz-placeholder { 603 | color: #c7c2c2; 604 | font-size: 23px; 605 | } 606 | 607 | .contact__form input::-moz-placeholder, 608 | .contact__form textarea::-moz-placeholder, 609 | .contact__form button::-moz-placeholder { 610 | color: #c7c2c2; 611 | font-size: 23px; 612 | } 613 | 614 | .contact__form input:-ms-input-placeholder, 615 | .contact__form textarea:-ms-input-placeholder, 616 | .contact__form button:-ms-input-placeholder { 617 | color: #c7c2c2; 618 | font-size: 23px; 619 | } 620 | 621 | .contact__form input { 622 | width: 100%; 623 | height: 103px; 624 | border: 1px solid #e3e3e3; 625 | } 626 | 627 | .contact__form textarea { 628 | height: 150px; 629 | border: 1px solid #e3e3e3; 630 | } 631 | 632 | .contact__form button { 633 | background: #fa001e; 634 | height: 103px; 635 | color: #ffffff; 636 | font-size: 34px; 637 | letter-spacing: 0.025em; 638 | border: none; 639 | margin: 35px 0; 640 | } 641 | 642 | .faq { 643 | text-align: center; 644 | } 645 | 646 | .faq h1 { 647 | color: #080036; 648 | font-family: "Inter"; 649 | font-style: normal; 650 | font-weight: 600; 651 | font-size: 68px; 652 | letter-spacing: -0.025em; 653 | line-height: 211.69%; 654 | /* identical to box height, or 144px */ 655 | } 656 | 657 | .faq__container { 658 | display: -webkit-box; 659 | display: -ms-flexbox; 660 | display: flex; 661 | width: 1096px; 662 | margin: 0 auto; 663 | -webkit-box-orient: vertical; 664 | -webkit-box-direction: normal; 665 | -ms-flex-direction: column; 666 | flex-direction: column; 667 | -webkit-box-pack: justify; 668 | -ms-flex-pack: justify; 669 | justify-content: space-between; 670 | padding: 100px 0 200px 0; 671 | } 672 | 673 | .faq__questions-container { 674 | margin-bottom: 30px; 675 | } 676 | 677 | .faq__questions { 678 | height: 125px; 679 | padding: 0 40px; 680 | display: -webkit-box; 681 | display: -ms-flexbox; 682 | display: flex; 683 | -webkit-box-pack: justify; 684 | -ms-flex-pack: justify; 685 | justify-content: space-between; 686 | -webkit-box-align: center; 687 | -ms-flex-align: center; 688 | align-items: center; 689 | background: #ffffff; 690 | border: 1px solid #c7c7c7; 691 | -webkit-box-sizing: border-box; 692 | box-sizing: border-box; 693 | border-radius: 5px; 694 | } 695 | 696 | .faq__questions h1 { 697 | font-family: "Inter"; 698 | font-style: normal; 699 | font-weight: 500; 700 | font-size: 27px; 701 | line-height: 211.69%; 702 | /* or 57px */ 703 | color: #080036; 704 | } 705 | 706 | .faq__answers { 707 | font-family: "Inter"; 708 | font-style: normal; 709 | font-weight: normal; 710 | font-size: 26px; 711 | line-height: 211.69%; 712 | /* or 55px */ 713 | color: #919191; 714 | padding: 40px; 715 | background: #ffffff; 716 | border: 1px solid #c7c7c7; 717 | -webkit-box-sizing: border-box; 718 | box-sizing: border-box; 719 | border-radius: 5px; 720 | display: none; 721 | } 722 | 723 | .faq__answers:nth-child(2) { 724 | display: block; 725 | } 726 | 727 | .why__work__with__us { 728 | height: 60vh; 729 | display: -webkit-box; 730 | display: -ms-flexbox; 731 | display: flex; 732 | -webkit-box-orient: vertical; 733 | -webkit-box-direction: normal; 734 | -ms-flex-direction: column; 735 | flex-direction: column; 736 | -webkit-box-align: center; 737 | -ms-flex-align: center; 738 | align-items: center; 739 | -webkit-box-pack: center; 740 | -ms-flex-pack: center; 741 | justify-content: center; 742 | margin-bottom: 40px; 743 | margin: 70px 0; 744 | } 745 | 746 | .why__work__with__us > h3 { 747 | font-size: 38px; 748 | } 749 | 750 | .why__work__with__us > hr { 751 | width: 100px; 752 | margin: 20px 0; 753 | border: 1px solid #fa001e; 754 | } 755 | 756 | .why__work__with__us > .company__info { 757 | width: 100%; 758 | display: -webkit-box; 759 | display: -ms-flexbox; 760 | display: flex; 761 | -webkit-box-pack: space-evenly; 762 | -ms-flex-pack: space-evenly; 763 | justify-content: space-evenly; 764 | margin: 40px 0; 765 | } 766 | 767 | .why__work__with__us > .company__info > div > h1 { 768 | font-size: 70px; 769 | color: #fa001e; 770 | } 771 | 772 | .why__work__with__us > .company__info > div > p { 773 | font-size: 25px; 774 | font-weight: 700; 775 | margin-top: 10px; 776 | } 777 | 778 | .services__we__offer { 779 | -webkit-box-align: center; 780 | -ms-flex-align: center; 781 | align-items: center; 782 | width: 90%; 783 | margin: 0 auto; 784 | display: -webkit-box; 785 | display: -ms-flexbox; 786 | display: flex; 787 | -webkit-box-orient: vertical; 788 | -webkit-box-direction: normal; 789 | -ms-flex-direction: column; 790 | flex-direction: column; 791 | margin-bottom: 40px; 792 | } 793 | 794 | .services__we__offer > .services__header { 795 | display: -webkit-box; 796 | display: -ms-flexbox; 797 | display: flex; 798 | -webkit-box-align: center; 799 | -ms-flex-align: center; 800 | align-items: center; 801 | -ms-flex-pack: distribute; 802 | justify-content: space-around; 803 | } 804 | 805 | .services__we__offer > .services__header h2 { 806 | font-size: 33px; 807 | } 808 | 809 | .services__we__offer > .services__header h4 { 810 | width: 50%; 811 | font-weight: 400; 812 | font-size: 14px; 813 | line-height: 24px; 814 | border-left: 2px solid #fa001e; 815 | padding-left: 25px; 816 | } 817 | 818 | .services__we__offer > .service { 819 | width: 90%; 820 | margin: 0 auto; 821 | padding: 50px 0; 822 | display: -webkit-box; 823 | display: -ms-flexbox; 824 | display: flex; 825 | -webkit-box-align: center; 826 | -ms-flex-align: center; 827 | align-items: center; 828 | } 829 | 830 | .services__we__offer > .service img { 831 | width: 45%; 832 | margin: 0; 833 | } 834 | 835 | .services__we__offer > .service > .service__content { 836 | padding: 0 30px; 837 | } 838 | 839 | .services__we__offer > .service > .service__content h2 { 840 | font-size: 30px; 841 | } 842 | 843 | .services__we__offer > .service > .service__content p { 844 | font-size: 14px; 845 | line-height: 28px; 846 | padding: 15px 0; 847 | } 848 | 849 | .services__we__offer > .service > .service__content > a { 850 | background: #fa001e; 851 | color: white; 852 | padding: 15px 25px; 853 | font-size: 15px; 854 | display: inline-block; 855 | margin-top: 10px; 856 | } 857 | 858 | .testomonials { 859 | display: -webkit-box; 860 | display: -ms-flexbox; 861 | display: flex; 862 | -webkit-box-orient: vertical; 863 | -webkit-box-direction: normal; 864 | -ms-flex-direction: column; 865 | flex-direction: column; 866 | -webkit-box-align: center; 867 | -ms-flex-align: center; 868 | align-items: center; 869 | -webkit-box-pack: center; 870 | -ms-flex-pack: center; 871 | justify-content: center; 872 | margin: 70px 0; 873 | position: relative; 874 | } 875 | 876 | .testomonials .red__box { 877 | height: 450px; 878 | width: 450px; 879 | bottom: 10%; 880 | background: #fa001e; 881 | position: absolute; 882 | left: -60px; 883 | z-index: -1; 884 | } 885 | 886 | .testomonials .testomonials__header > h1 { 887 | font-size: 38px; 888 | } 889 | 890 | .testomonials .testomonials__header > hr { 891 | width: 100px; 892 | margin: 20px auto; 893 | border: 1px solid #fa001e; 894 | } 895 | 896 | .testomonials .all__testomonials { 897 | margin: 30px 0; 898 | display: -ms-grid; 899 | display: grid; 900 | -ms-grid-columns: (1fr)[2]; 901 | grid-template-columns: repeat(2, 1fr); 902 | -webkit-box-pack: center; 903 | -ms-flex-pack: center; 904 | justify-content: center; 905 | grid-gap: 30px; 906 | } 907 | 908 | .testomonials .testomonial { 909 | max-width: 550px; 910 | padding: 40px 30px; 911 | background: white; 912 | -webkit-box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.055); 913 | box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.055); 914 | } 915 | 916 | .testomonials .testomonial .user__data { 917 | display: -webkit-box; 918 | display: -ms-flexbox; 919 | display: flex; 920 | -webkit-box-align: center; 921 | -ms-flex-align: center; 922 | align-items: center; 923 | } 924 | 925 | .testomonials .testomonial .user__data img { 926 | display: inline; 927 | width: 8%; 928 | border-radius: 50%; 929 | padding: 0; 930 | border: 2px solid #fa001e; 931 | } 932 | 933 | .testomonials .testomonial .user__data > div { 934 | padding-left: 10px; 935 | } 936 | 937 | .testomonials .testomonial .user__data > div > h4 { 938 | font-size: 18px; 939 | font-weight: 700; 940 | } 941 | 942 | .testomonials .testomonial .user__data > div > p { 943 | font-size: 10px; 944 | margin-top: 3px; 945 | } 946 | 947 | .testomonials .testomonial > span { 948 | display: inline-block; 949 | font-style: italic; 950 | line-height: 32px; 951 | font-size: 16px; 952 | padding-top: 10px; 953 | } 954 | 955 | .testomonials .testomonial > span > .large__font { 956 | font-size: 25px; 957 | color: #fa001e; 958 | font-weight: 600; 959 | } 960 | 961 | .view__our__projects { 962 | width: 80%; 963 | margin: 50px auto; 964 | display: -webkit-box; 965 | display: -ms-flexbox; 966 | display: flex; 967 | -webkit-box-orient: vertical; 968 | -webkit-box-direction: normal; 969 | -ms-flex-direction: column; 970 | flex-direction: column; 971 | -webkit-box-pack: center; 972 | -ms-flex-pack: center; 973 | justify-content: center; 974 | } 975 | 976 | .view__our__projects .projects__header { 977 | text-align: left; 978 | } 979 | 980 | .view__our__projects .projects__header h1 { 981 | font-size: 38px; 982 | } 983 | 984 | .view__our__projects > .projects .project:nth-child(odd) { 985 | -webkit-box-orient: horizontal; 986 | -webkit-box-direction: reverse; 987 | -ms-flex-direction: row-reverse; 988 | flex-direction: row-reverse; 989 | } 990 | 991 | .view__our__projects > .projects .project { 992 | display: -webkit-box; 993 | display: -ms-flexbox; 994 | display: flex; 995 | -webkit-box-ordinal-group: 1; 996 | -ms-flex-order: 0; 997 | order: 0; 998 | -webkit-box-align: center; 999 | -ms-flex-align: center; 1000 | align-items: center; 1001 | } 1002 | 1003 | .view__our__projects > .projects .project > .image img { 1004 | width: 100%; 1005 | } 1006 | 1007 | .view__our__projects > .projects .project > .project__info { 1008 | margin-left: 40px; 1009 | background: white; 1010 | -webkit-box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.048); 1011 | box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.048); 1012 | width: 100%; 1013 | padding: 35px 35px; 1014 | } 1015 | 1016 | .view__our__projects > .projects .project > .project__info h1 { 1017 | font-size: 30px; 1018 | color: #080036; 1019 | } 1020 | 1021 | .view__our__projects > .projects .project > .project__info p { 1022 | font-size: 14px; 1023 | width: 90%; 1024 | line-height: 34px; 1025 | padding: 10px 0 15px 0; 1026 | } 1027 | 1028 | .view__our__projects > .projects .project > .project__info > .project__buttons { 1029 | margin-top: 5px; 1030 | display: -webkit-box; 1031 | display: -ms-flexbox; 1032 | display: flex; 1033 | font-size: 14px; 1034 | -webkit-box-align: center; 1035 | -ms-flex-align: center; 1036 | align-items: center; 1037 | } 1038 | 1039 | .view__our__projects > .projects .project > .project__info > .project__buttons .blue__link { 1040 | font-weight: 600; 1041 | padding: 15px 20px; 1042 | color: #080036; 1043 | } 1044 | 1045 | .view__our__projects > .projects .project > .project__info > .project__buttons .red__button { 1046 | padding: 15px 20px; 1047 | font-weight: 600; 1048 | color: white; 1049 | font-size: 12px; 1050 | background: #fa001e; 1051 | } 1052 | 1053 | .who__are__we { 1054 | width: 80%; 1055 | margin: 50px auto; 1056 | margin-top: 100px; 1057 | display: -webkit-box; 1058 | display: -ms-flexbox; 1059 | display: flex; 1060 | -webkit-box-orient: vertical; 1061 | -webkit-box-direction: normal; 1062 | -ms-flex-direction: column; 1063 | flex-direction: column; 1064 | -webkit-box-pack: center; 1065 | -ms-flex-pack: center; 1066 | justify-content: center; 1067 | text-align: center; 1068 | height: 60vh; 1069 | } 1070 | 1071 | .who__are__we .who__are__we__header h1 { 1072 | font-size: 38px; 1073 | } 1074 | 1075 | .who__are__we .who__are__we__header hr { 1076 | width: 100px; 1077 | margin: 20px auto; 1078 | border: 1px solid #fa001e; 1079 | } 1080 | 1081 | .who__are__we .who__are__we__content { 1082 | display: -ms-grid; 1083 | display: grid; 1084 | -ms-grid-columns: (1fr)[2]; 1085 | grid-template-columns: repeat(2, 1fr); 1086 | -webkit-box-align: center; 1087 | -ms-flex-align: center; 1088 | align-items: center; 1089 | height: 30vh; 1090 | } 1091 | 1092 | .who__are__we .who__are__we__content .logo { 1093 | width: 60%; 1094 | margin: 0 auto; 1095 | -webkit-box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.027); 1096 | box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.027); 1097 | } 1098 | 1099 | .who__are__we .who__are__we__content .logo img { 1100 | width: 65%; 1101 | } 1102 | 1103 | .who__are__we .who__are__we__content .who__are__we__info > p { 1104 | text-align: left; 1105 | font-size: 14px; 1106 | line-height: 28px; 1107 | } 1108 | 1109 | .what__more { 1110 | height: 40vh; 1111 | display: -webkit-box; 1112 | display: -ms-flexbox; 1113 | display: flex; 1114 | -webkit-box-orient: vertical; 1115 | -webkit-box-direction: normal; 1116 | -ms-flex-direction: column; 1117 | flex-direction: column; 1118 | -webkit-box-align: center; 1119 | -ms-flex-align: center; 1120 | align-items: center; 1121 | -webkit-box-pack: center; 1122 | -ms-flex-pack: center; 1123 | justify-content: center; 1124 | margin-bottom: 70px; 1125 | } 1126 | 1127 | .what__more h1 { 1128 | font-size: 38px; 1129 | } 1130 | 1131 | .what__more p { 1132 | padding: 20px 0; 1133 | } 1134 | 1135 | .footer { 1136 | background: #080036; 1137 | } 1138 | 1139 | .footer__content { 1140 | padding-left: 140px; 1141 | padding-bottom: 50px; 1142 | display: -ms-grid; 1143 | display: grid; 1144 | -ms-grid-columns: 200px 200px; 1145 | grid-template-columns: 200px 200px; 1146 | grid-column-gap: 10%; 1147 | } 1148 | 1149 | .footer__logo { 1150 | width: 100%; 1151 | height: 135px; 1152 | } 1153 | 1154 | .footer__logo img { 1155 | width: 80%; 1156 | -webkit-transform: translateX(-24px); 1157 | transform: translateX(-24px); 1158 | position: relative; 1159 | z-index: 0; 1160 | } 1161 | 1162 | .footer__link { 1163 | font-weight: 500; 1164 | text-decoration: none; 1165 | letter-spacing: -0.025em; 1166 | color: #ffffff; 1167 | } 1168 | 1169 | .footer__link:hover { 1170 | color: #fa001e; 1171 | } 1172 | 1173 | .footer__link:last-child { 1174 | -ms-grid-column: 1; 1175 | -ms-grid-column-span: 2; 1176 | grid-column: 1/3; 1177 | } 1178 | 1179 | .footer__contact-info { 1180 | height: 110px; 1181 | width: 200px; 1182 | display: -webkit-box; 1183 | display: -ms-flexbox; 1184 | display: flex; 1185 | -webkit-box-orient: vertical; 1186 | -webkit-box-direction: normal; 1187 | -ms-flex-direction: column; 1188 | flex-direction: column; 1189 | -webkit-box-pack: justify; 1190 | -ms-flex-pack: justify; 1191 | justify-content: space-between; 1192 | position: relative; 1193 | z-index: 1; 1194 | } 1195 | 1196 | .footer__extra-links { 1197 | padding-top: 60px; 1198 | } 1199 | 1200 | .footer__extra-links h2 { 1201 | font-size: 23px; 1202 | padding-bottom: 50px; 1203 | letter-spacing: -0.025em; 1204 | color: #ffffff; 1205 | } 1206 | 1207 | .footer__extra-links div { 1208 | display: -ms-grid; 1209 | display: grid; 1210 | -ms-grid-columns: 200px 200px; 1211 | grid-template-columns: 200px 200px; 1212 | -ms-grid-rows: 35px 35px 35px 35px; 1213 | grid-template-rows: 35px 35px 35px 35px; 1214 | grid-column-gap: 2%; 1215 | } 1216 | 1217 | .footer__copyright-section { 1218 | color: #ffffff; 1219 | border-top: 1px solid #0d023d; 1220 | display: -webkit-box; 1221 | display: -ms-flexbox; 1222 | display: flex; 1223 | -webkit-box-pack: justify; 1224 | -ms-flex-pack: justify; 1225 | justify-content: space-between; 1226 | -webkit-box-align: center; 1227 | -ms-flex-align: center; 1228 | align-items: center; 1229 | padding: 20px 130px; 1230 | } 1231 | 1232 | .footer__icons { 1233 | display: -webkit-box; 1234 | display: -ms-flexbox; 1235 | display: flex; 1236 | -webkit-box-pack: justify; 1237 | -ms-flex-pack: justify; 1238 | justify-content: space-between; 1239 | width: 100px; 1240 | } 1241 | 1242 | .services { 1243 | display: -webkit-box; 1244 | display: -ms-flexbox; 1245 | display: flex; 1246 | -webkit-box-pack: center; 1247 | -ms-flex-pack: center; 1248 | justify-content: center; 1249 | margin-right: 30px; 1250 | margin-top: 5%; 1251 | font-size: 1.2em; 1252 | } 1253 | 1254 | .firstp { 1255 | /*display: flex; 1256 | justify-content: center; 1257 | */ 1258 | text-align: inherit; 1259 | width: 10%; 1260 | font-size: 15px; 1261 | /*margin-left: 590px; */ 1262 | font-size: 15px; 1263 | margin-left: 410px; 1264 | line-height: 1.7rem; 1265 | width: 330%; 1266 | height: 400px; 1267 | text-align: inherit; 1268 | } 1269 | 1270 | .secondp { 1271 | text-align: inherit; 1272 | font-size: 15px; 1273 | margin-left: 700px; 1274 | font-size: 15px; 1275 | margin-right: 15px; 1276 | line-height: 1.7rem; 1277 | /*width: 90%; */ 1278 | height: 400px; 1279 | text-align: inherit; 1280 | display: inline-block; 1281 | position: relative; 1282 | bottom: 200px; 1283 | } 1284 | 1285 | .lux { 1286 | display: -webkit-box; 1287 | display: -ms-flexbox; 1288 | display: flex; 1289 | /*justify-content: center; */ 1290 | margin-right: 100px; 1291 | line-height: 1.0em; 1292 | font-size: 20px; 1293 | margin-top: -40px; 1294 | font-size: 3em; 1295 | } 1296 | 1297 | .squarepic { 1298 | /*display: flex; 1299 | align-items: flex-start; 1300 | justify-content: flex-start; 1301 | */ 1302 | display: -webkit-box; 1303 | display: -ms-flexbox; 1304 | display: flex; 1305 | -webkit-box-align: start; 1306 | -ms-flex-align: start; 1307 | align-items: flex-start; 1308 | -webkit-box-pack: start; 1309 | -ms-flex-pack: start; 1310 | justify-content: flex-start; 1311 | margin-top: -300px; 1312 | } 1313 | 1314 | .firstp2 { 1315 | padding: 20px 40px 40px; 1316 | max-width: 640px; 1317 | display: -webkit-box; 1318 | display: -ms-flexbox; 1319 | display: flex; 1320 | font-size: 15px; 1321 | margin-left: 590px; 1322 | font-size: 15px; 1323 | margin-right: 15px; 1324 | line-height: 1.7rem; 1325 | float: left; 1326 | } 1327 | 1328 | .firstp2__image { 1329 | margin: 20px 30px 0 0; 1330 | width: 200px; 1331 | -o-object-fit: contain; 1332 | object-fit: contain; 1333 | -ms-flex-item-align: start; 1334 | align-self: flex-start; 1335 | } 1336 | 1337 | .firstp2__text { 1338 | -webkit-box-flex: 1; 1339 | -ms-flex: 1 1 auto; 1340 | flex: 1 1 auto; 1341 | } 1342 | 1343 | .twowords { 1344 | margin-left: 270px; 1345 | } 1346 | 1347 | .thridp { 1348 | text-align: inherit; 1349 | width: 10%; 1350 | font-size: 15px; 1351 | /*margin-left: 590px; */ 1352 | font-size: 15px; 1353 | line-height: 2.7rem; 1354 | width: 90%; 1355 | height: 400px; 1356 | text-align: inherit; 1357 | margin-top: -330px; 1358 | margin-left: 80px; 1359 | } 1360 | 1361 | .bookservice { 1362 | margin-top: 3%; 1363 | } 1364 | 1365 | .bookservice2 { 1366 | color: black; 1367 | } 1368 | /*# sourceMappingURL=style.css.map */ --------------------------------------------------------------------------------