├── .gitignore
├── .vscode
    └── settings.json
├── .DS_Store
├── images
    ├── BMW.png
    ├── audi.png
    ├── fire.jpg
    ├── lila.png
    ├── .DS_Store
    ├── 2maini.jpg
    ├── julia.png
    ├── kilnam.png
    ├── mobile.png
    ├── reagan.png
    ├── square.png
    ├── toyota.png
    ├── volvo.jpg
    ├── yochai.png
    ├── home page.png
    ├── sohyeong.png
    ├── Land Rover.png
    ├── about page.png
    ├── cruiser v8.jpg
    ├── x-background.png
    ├── Mercedes-Benz.png
    ├── girl engineer.jpeg
    ├── male engineer.jpeg
    ├── forest engineer.jpeg
    ├── Porsche-PNG-Image-1.png
    └── spectacles engineer.jpeg
├── .hintrc
├── .eslintrc.json
├── .stylelintrc.json
├── package.json
├── LICENSE
├── index.js
├── .github
    └── workflows
    │   └── linters.yml
├── README.md
├── about.html
├── index.html
└── styles.css


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |   "liveServer.settings.port": 5501
3 | }
4 | 


--------------------------------------------------------------------------------
/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tumainimaganiko/Vehicle-Company/HEAD/.DS_Store


--------------------------------------------------------------------------------
/images/BMW.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tumainimaganiko/Vehicle-Company/HEAD/images/BMW.png


--------------------------------------------------------------------------------
/images/audi.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tumainimaganiko/Vehicle-Company/HEAD/images/audi.png


--------------------------------------------------------------------------------
/images/fire.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tumainimaganiko/Vehicle-Company/HEAD/images/fire.jpg


--------------------------------------------------------------------------------
/images/lila.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tumainimaganiko/Vehicle-Company/HEAD/images/lila.png


--------------------------------------------------------------------------------
/images/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tumainimaganiko/Vehicle-Company/HEAD/images/.DS_Store


--------------------------------------------------------------------------------
/images/2maini.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tumainimaganiko/Vehicle-Company/HEAD/images/2maini.jpg


--------------------------------------------------------------------------------
/images/julia.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tumainimaganiko/Vehicle-Company/HEAD/images/julia.png


--------------------------------------------------------------------------------
/images/kilnam.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tumainimaganiko/Vehicle-Company/HEAD/images/kilnam.png


--------------------------------------------------------------------------------
/images/mobile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tumainimaganiko/Vehicle-Company/HEAD/images/mobile.png


--------------------------------------------------------------------------------
/images/reagan.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tumainimaganiko/Vehicle-Company/HEAD/images/reagan.png


--------------------------------------------------------------------------------
/images/square.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tumainimaganiko/Vehicle-Company/HEAD/images/square.png


--------------------------------------------------------------------------------
/images/toyota.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tumainimaganiko/Vehicle-Company/HEAD/images/toyota.png


--------------------------------------------------------------------------------
/images/volvo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tumainimaganiko/Vehicle-Company/HEAD/images/volvo.jpg


--------------------------------------------------------------------------------
/images/yochai.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tumainimaganiko/Vehicle-Company/HEAD/images/yochai.png


--------------------------------------------------------------------------------
/images/home page.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tumainimaganiko/Vehicle-Company/HEAD/images/home page.png


--------------------------------------------------------------------------------
/images/sohyeong.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tumainimaganiko/Vehicle-Company/HEAD/images/sohyeong.png


--------------------------------------------------------------------------------
/images/Land Rover.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tumainimaganiko/Vehicle-Company/HEAD/images/Land Rover.png


--------------------------------------------------------------------------------
/images/about page.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tumainimaganiko/Vehicle-Company/HEAD/images/about page.png


--------------------------------------------------------------------------------
/images/cruiser v8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tumainimaganiko/Vehicle-Company/HEAD/images/cruiser v8.jpg


--------------------------------------------------------------------------------
/images/x-background.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tumainimaganiko/Vehicle-Company/HEAD/images/x-background.png


--------------------------------------------------------------------------------
/images/Mercedes-Benz.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tumainimaganiko/Vehicle-Company/HEAD/images/Mercedes-Benz.png


--------------------------------------------------------------------------------
/images/girl engineer.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tumainimaganiko/Vehicle-Company/HEAD/images/girl engineer.jpeg


--------------------------------------------------------------------------------
/images/male engineer.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tumainimaganiko/Vehicle-Company/HEAD/images/male engineer.jpeg


--------------------------------------------------------------------------------
/images/forest engineer.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tumainimaganiko/Vehicle-Company/HEAD/images/forest engineer.jpeg


--------------------------------------------------------------------------------
/images/Porsche-PNG-Image-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tumainimaganiko/Vehicle-Company/HEAD/images/Porsche-PNG-Image-1.png


--------------------------------------------------------------------------------
/images/spectacles engineer.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tumainimaganiko/Vehicle-Company/HEAD/images/spectacles engineer.jpeg


--------------------------------------------------------------------------------
/.hintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "connector": {
 3 |     "name": "local",
 4 |     "options": {
 5 |       "pattern": ["**", "!.git/**", "!node_modules/**"]
 6 |     }
 7 |   },
 8 |   "extends": ["development"],
 9 |   "formatters": ["stylish"],
10 |   "hints": [
11 |     "button-type",
12 |     "disown-opener",
13 |     "html-checker",
14 |     "meta-charset-utf-8",
15 |     "meta-viewport",
16 |     "no-inline-styles:error"
17 |   ]
18 | }


--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "env": {
 3 |     "browser": true,
 4 |     "es6": true,
 5 |     "jest": true
 6 |   },
 7 |   "parser": "babel-eslint",
 8 |   "parserOptions": {
 9 |     "ecmaVersion": 2018,
10 |     "sourceType": "module"
11 |   },
12 |   "extends": ["airbnb-base"],
13 |   "rules": {
14 |     "no-shadow": "off",
15 |     "no-param-reassign": "off",
16 |     "eol-last": "off",
17 |     "import/extensions": [ 1, {
18 |       "js": "always", "json": "always"
19 |     }]
20 |   },
21 |   "ignorePatterns": [
22 |     "dist/",
23 |     "build/"
24 |   ]
25 | }
26 | 


--------------------------------------------------------------------------------
/.stylelintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": ["stylelint-config-standard"],
 3 |   "plugins": ["stylelint-scss", "stylelint-csstree-validator"],
 4 |   "rules": {
 5 |     "at-rule-no-unknown": [
 6 |       true,
 7 |       {
 8 |         "ignoreAtRules": ["tailwind", "apply", "variants", "responsive", "screen"]
 9 |       }
10 |     ],
11 |     "scss/at-rule-no-unknown":  [
12 |       true,
13 |       {
14 |         "ignoreAtRules": ["tailwind", "apply", "variants", "responsive", "screen"]
15 |       }
16 |     ],
17 |     "csstree/validator": true
18 |   },
19 |   "ignoreFiles": ["build/**", "dist/**", "**/reset*.css", "**/bootstrap*.css", "**/*.js", "**/*.jsx"]
20 | }
21 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vehicle-company",
 3 |   "version": "1.0.0",
 4 |   "description": "<a name=\"readme-top\"></a>",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "keywords": [],
10 |   "author": "",
11 |   "license": "ISC",
12 |   "devDependencies": {
13 |     "babel-eslint": "^10.1.0",
14 |     "eslint": "^7.32.0",
15 |     "eslint-config-airbnb-base": "^14.2.1",
16 |     "eslint-plugin-import": "^2.27.5",
17 |     "hint": "^7.1.8",
18 |     "stylelint": "^13.13.1",
19 |     "stylelint-config-standard": "^21.0.0",
20 |     "stylelint-csstree-validator": "^1.9.0",
21 |     "stylelint-scss": "^3.21.0"
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 Tumaini Maganiko
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | const xMark = document.querySelector('.x-mark');
 2 | const openMenu = document.querySelector('.hamburger');
 3 | 
 4 | // Event for closing Mobile menu
 5 | xMark.addEventListener('click', () => {
 6 |   const mobileMenu = document.querySelector('.mobile-menu');
 7 |   const head = document.querySelector('header');
 8 |   mobileMenu.style.display = 'none';
 9 |   head.style.display = 'block';
10 | });
11 | 
12 | // Event for opening Mobile menu
13 | openMenu.addEventListener('click', () => {
14 |   const mobileMenu = document.querySelector('.mobile-menu');
15 |   const head = document.querySelector('header');
16 |   mobileMenu.style.display = 'block';
17 |   head.style.display = 'none';
18 | });
19 | 
20 | // Array of Featured Partcipants Data
21 | const investors = [
22 |   {
23 |     img: 'images/reagan.png',
24 |     heading: 'Frank Paul',
25 |     info: 'Engineer in TESLA',
26 |     details:
27 |       'He supports us in importing and exporting Cars in any part of the world',
28 |   },
29 |   {
30 |     img: 'images/julia.png',
31 |     heading: 'Agnes Barnabas',
32 |     info: 'Designer at GOOGLE',
33 |     details:
34 |       'She supports us in importing and exporting Cars in any part of the world',
35 |   },
36 |   {
37 |     img: 'images/kilnam.png',
38 |     heading: 'Peter Paul',
39 |     info: 'Manager at BARCLAYS',
40 |     details:
41 |       'He supports us in importing and exporting Cars in any part of the world',
42 |   },
43 |   {
44 |     img: 'images/lila.png',
45 |     heading: 'Oyedepo Elia',
46 |     info: 'Engineer at TOYOTA',
47 |     details:
48 |       'He supports us in importing and exporting Cars in any part of the world',
49 |   },
50 |   {
51 |     img: 'images/yochai.png',
52 |     heading: 'Tumaini Maganiko',
53 |     info: 'Student at Microverse',
54 |     details:
55 |       'He supports us in importing and exporting Cars in any part of the world',
56 |   },
57 |   {
58 |     img: 'images/sohyeong.png',
59 |     heading: 'John Barnabas',
60 |     info: 'Engineer at TESLA',
61 |     details:
62 |       'He supports us in importing and exporting Cars in any part of the world',
63 |   },
64 | ];
65 | 
66 | // Looping through to display Array items
67 | const featured = document.querySelector('.partcipants');
68 | investors.forEach((value) => {
69 |   const div = document.createElement('div');
70 |   div.className = 'd-flex align-items-center';
71 |   div.innerHTML = `
72 |     <div class="x-shade">
73 |       <img src="${value.img}" alt="Investor">
74 |       <div class="inner-div"></div>
75 |     </div>
76 |     <div class="content">
77 |         <h3>${value.heading}</h3>
78 |         <p class="info">${value.info}</p>
79 |         <p>${value.details}</p>
80 |     </div>
81 |     `;
82 |   featured.appendChild(div);
83 | });
84 | 


--------------------------------------------------------------------------------
/.github/workflows/linters.yml:
--------------------------------------------------------------------------------
 1 | name: Linters
 2 | 
 3 | on: pull_request
 4 | 
 5 | env:
 6 |   FORCE_COLOR: 1
 7 | 
 8 | jobs:
 9 |   lighthouse:
10 |     name: Lighthouse
11 |     runs-on: ubuntu-22.04
12 |     steps:
13 |       - uses: actions/checkout@v3
14 |       - uses: actions/setup-node@v3
15 |         with:
16 |           node-version: "18.x"
17 |       - name: Setup Lighthouse
18 |         run: npm install -g @lhci/cli@0.11.x
19 |       - name: Lighthouse Report
20 |         run: lhci autorun --upload.target=temporary-public-storage --collect.staticDistDir=.
21 |   webhint:
22 |     name: Webhint
23 |     runs-on: ubuntu-22.04
24 |     steps:
25 |       - uses: actions/checkout@v3
26 |       - uses: actions/setup-node@v3
27 |         with:
28 |           node-version: "18.x"
29 |       - name: Setup Webhint
30 |         run: |
31 |           npm install --save-dev hint@7.x
32 |           [ -f .hintrc ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.hintrc
33 |       - name: Webhint Report
34 |         run: npx hint .
35 |   stylelint:
36 |     name: Stylelint
37 |     runs-on: ubuntu-22.04
38 |     steps:
39 |       - uses: actions/checkout@v3
40 |       - uses: actions/setup-node@v3
41 |         with:
42 |           node-version: "18.x"
43 |       - name: Setup Stylelint
44 |         run: |
45 |           npm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x
46 |           [ -f .stylelintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.stylelintrc.json
47 |       - name: Stylelint Report
48 |         run: npx stylelint "**/*.{css,scss}"
49 |   eslint:
50 |     name: ESLint
51 |     runs-on: ubuntu-22.04
52 |     steps:
53 |       - uses: actions/checkout@v3
54 |       - uses: actions/setup-node@v3
55 |         with:
56 |           node-version: "18.x"
57 |       - name: Setup ESLint
58 |         run: |
59 |           npm install --save-dev eslint@7.x eslint-config-airbnb-base@14.x eslint-plugin-import@2.x babel-eslint@10.x
60 |           [ -f .eslintrc.json ] || wget https://raw.githubusercontent.com/microverseinc/linters-config/master/html-css-js/.eslintrc.json
61 |       - name: ESLint Report
62 |         run: npx eslint .
63 |   nodechecker:
64 |     name: node_modules checker
65 |     runs-on: ubuntu-22.04
66 |     steps:
67 |       - uses: actions/checkout@v3
68 |       - name: Check node_modules existence
69 |         run: |
70 |           if [ -d "node_modules/" ]; then echo -e "\e[1;31mThe node_modules/ folder was pushed to the repo. Please remove it from the GitHub repository and try again."; echo -e "\e[1;32mYou can set up a .gitignore file with this folder included on it to prevent this from happening in the future." && exit 1; fi
71 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <a name="readme-top"></a>
  2 | 
  3 | 
  4 | <div align="center">
  5 |     
  6 |   <br/>
  7 | 
  8 |   <h3><b>TUMAINI BARNABAS MAGANIKO</b></h3>
  9 | 
 10 | </div>
 11 | 
 12 | <!-- TABLE OF CONTENTS -->
 13 | 
 14 | # 📗 Table of Contents
 15 | 
 16 | - [📗 Table of Contents](#-table-of-contents)
 17 | - [📖 TBM CAR Company ](#-tbm-car-company-)
 18 |   - [🛠 Screenshot](#-screenshot)
 19 |     - [Desktop Home Page](#desktop-home-page)
 20 |     - [Mobile Home page](#mobile-home-page)
 21 |     - [Desktop About Page](#desktop-about-page)
 22 |   - [🛠 Built With ](#-built-with-)
 23 |     - [Tech Stack ](#tech-stack-)
 24 |   - [🚀 Live Demo ](#-live-demo-)
 25 |   - [🚀 Video about the project ](#-video-about-the-project-)
 26 |   - [💻 Getting Started ](#-getting-started-)
 27 |     - [Prerequisites](#prerequisites)
 28 |     - [Setup](#setup)
 29 |     - [Usage](#usage)
 30 |     - [Run tests](#run-tests)
 31 |     - [Deployment](#deployment)
 32 |   - [👥 Author ](#-author-)
 33 |   - [🤝 Contributing ](#-contributing-)
 34 |   - [⭐️ Show your support ](#️-show-your-support-)
 35 |   - [🙏 Acknowledgments ](#-acknowledgments-)
 36 |   - [📝 License ](#-license-)
 37 | 
 38 | <!-- PROJECT DESCRIPTION -->
 39 | 
 40 | # 📖 TBM CAR Company <a name="about-project"></a>
 41 | 
 42 | >Welcome to TBM CAR COMPANY, The mission of this company is to provide high-quality vehicles to their valued customers while delivering exceptional customer service.
 43 | ## 🛠 Screenshot 
 44 | ### Desktop Home Page
 45 | ![Desktop Home Screen](images/home%20page.png)
 46 | 
 47 | ### Mobile Home page
 48 | ![Desktop Home Screen](images/mobile.png)
 49 | 
 50 | ### Desktop About Page
 51 | ![Desktop Home Screen](images/about%20page.png)
 52 | 
 53 | 
 54 | ## 🛠 Built With <a name="built-with"></a>
 55 | 1. HTML
 56 | 2. CSS
 57 | 3. JAVASCRIPT
 58 | 4. BOOTSTRAP
 59 | 
 60 | ### Tech Stack <a name="tech-stack"></a>
 61 | 
 62 | <details>
 63 |   <summary>Client</summary>
 64 |   <ul>
 65 |     <li><a href="/index.html">HTML</a></li>
 66 |     <li><a href="/styles.css">CSS</a></li>
 67 |     <li><a href="/index.js">JAVASCRIPT</a></li>
 68 |   </ul>
 69 | </details>
 70 | 
 71 | 
 72 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
 73 | 
 74 | <!-- LIVE DEMO -->
 75 | 
 76 | ## 🚀 Live Demo <a name="live-demo"></a>
 77 | 
 78 | - [Live Demo Link](https://tumainimaganiko.github.io/Vehicle-Company/)
 79 | 
 80 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
 81 | 
 82 | ## 🚀 Video about the project <a name="live-demo"></a>
 83 | - [Video Link](https://www.loom.com/share/66a96ad690c840eab382c862335c4156)
 84 | <!-- GETTING STARTED -->
 85 | 
 86 | ## 💻 Getting Started <a name="getting-started"></a>
 87 | 
 88 | 
 89 | To get a local copy up and running, follow these steps.
 90 | 
 91 | ### Prerequisites
 92 | 
 93 | 1. Web browser
 94 | 2. Code editor
 95 | 3. Git-smc
 96 | 
 97 | ### Setup
 98 | 
 99 | 
100 | To get a local copy up and running follow these simple example steps.
101 | 
102 | 
103 | - git clone https://github.com/tumainimaganiko/Vehicle-Company
104 | - cd To-Do-Lists
105 | - npm install
106 | 
107 | ### Usage
108 | 
109 | To run the project, execute the following command:
110 | 
111 | Open index.html using live server extension.
112 | 
113 | ### Run tests
114 | 
115 | Coming soon
116 | 
117 | ### Deployment
118 | 
119 | Coming soon
120 | 
121 | 
122 | 
123 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
124 | 
125 | <!-- AUTHORS -->
126 | 
127 | ## 👥 Author <a name="authors"></a>
128 | 
129 | 
130 | 👤 Tumaini Maganiko
131 | 
132 | - GitHub: [@githubhandle](https://github.com/tumainimaganiko)
133 | - Twitter: [@twitterhandle](https://twitter.com/Chief2maini)
134 | - LinkedIn: [LinkedIn](https://www.linkedin.com/in/tumaini-maganiko-991b30262/)
135 | 
136 | -Summarized video of my project: [loom](https://www.loom.com/share/1ea2df078c4940e39b408606dbbd1cbf)
137 | 
138 | 
139 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
140 | 
141 | 
142 | 
143 | <!-- CONTRIBUTING -->
144 | 
145 | ## 🤝 Contributing <a name="contributing"></a>
146 | 
147 | Contributions, issues, and feature requests are welcome!
148 | 1. Fork the Project
149 | 2. Create your Feature Branch (`git checkout -b 'branchname'`)
150 | 3. Commit your Changes (`git commit -m 'Add some branchname'`)
151 | 4. Push to the Branch (`git push origin branchname`)
152 | 5. Open a Pull Request
153 | 
154 | Feel free to check the [issues page](../../issues/).
155 | 
156 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
157 | 
158 | <!-- SUPPORT -->
159 | 
160 | ## ⭐️ Show your support <a name="support"></a>
161 | 
162 | 
163 | If you like this project rate me star 
164 | 
165 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
166 | 
167 | <!-- ACKNOWLEDGEMENTS -->
168 | 
169 | ## 🙏 Acknowledgments <a name="acknowledgements"></a>
170 | 1. Microverse
171 | 2. Cindy Shin - Original design by (Cindy Shin in Behance) [https://www.behance.net/gallery/29845175/CC-Global-Summit-2015].
172 | 
173 | 
174 | <p align="right">(<a href="#readme-top">back to top</a>)</p>
175 | 
176 | <!-- LICENSE -->
177 | 
178 | ## 📝 License <a name="license"></a>
179 | 
180 | This project is [MIT](./LICENSE) licensed.
181 | 
182 | <p align="right">(<a href="#readme-top">back to top</a>)</p>


--------------------------------------------------------------------------------
/about.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7 |     <link rel="stylesheet" href="styles.css" />
  8 |     <link
  9 |       href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
 10 |       rel="stylesheet"
 11 |       integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
 12 |       crossorigin="anonymous"
 13 |     />
 14 |     <link
 15 |       href="https://fonts.googleapis.com/css?family=Lato"
 16 |       rel="stylesheet"
 17 |     />
 18 |     <script
 19 |       src="https://kit.fontawesome.com/51f27b15da.js"
 20 |       crossorigin="anonymous"
 21 |     ></script>
 22 |     <title>TBM Company LTD</title>
 23 |   </head>
 24 |   <body>
 25 |     <header class="font">
 26 |       <i class="fa-sharp fa-solid fa-bars fa-xl hamburger"></i>
 27 |       <nav class="first-nav">
 28 |         <ul>
 29 |           <li>
 30 |             <a href="#"><i class="fa-brands fa-facebook-f"></i></a>
 31 |           </li>
 32 |           <li>
 33 |             <a href="#"><i class="fa-brands fa-twitter"></i></a>
 34 |           </li>
 35 |           <li><a href="#">English</a></li>
 36 |           <li><a href="#">My Page</a></li>
 37 |           <li><a href="#">Logout</a></li>
 38 |         </ul>
 39 |       </nav>
 40 |       <!-- Desktop About page Header -->
 41 |       <nav class="second-nav">
 42 |         <div>
 43 |           <a href="index.html"><h2>TBM LTD</h2></a>
 44 |         </div>
 45 |         <div>
 46 |           <ul>
 47 |             <li><a href="about.html">About</a></li>
 48 |             <li><a href="#">Vehicles</a></li>
 49 |             <li><a href="#">Stock</a></li>
 50 |             <li><a href="#">Upcoming</a></li>
 51 |             <li><a href="#">Launched</a></li>
 52 |             <li class="last-item"><a href="#">Company</a></li>
 53 |           </ul>
 54 |         </div>
 55 |       </nav>
 56 |     </header>
 57 |     <!-- Mobile menu -->
 58 |     <section class="mobile-menu font">
 59 |       <button class="x-mark">&times;</button>
 60 |       <ul id="menu-list">
 61 |         <li><a href="index.html">Home</a></li>
 62 |         <li><a href="about.html">About</a></li>
 63 |         <li><a href="#">Contact</a></li>
 64 |       </ul>
 65 |     </section>
 66 |     <!-- About page Introduction -->
 67 |     <main class="bg-gray font">
 68 |       <section class="introduction ab-intro bg-gray font">
 69 |         <h1>"This is where luxury meets affordability"</h1>
 70 |         <h2>TBM Car Company</h2>
 71 |         <div class="border-1 about-intro bg-gray">
 72 |           <p>
 73 |             At our company, we are constantly striving to provide you with the
 74 |             best possible products and services. We take great pride in the
 75 |             quality and reliability of our cars, and are committed to ensuring
 76 |             that your driving experience is safe, comfortable, and enjoyable.
 77 |           </p>
 78 |           <p class="none-mobile">
 79 |             We know that choosing a car is a big decision, and we're honored
 80 |             that you're considering TBM Car Company for your next purchase.
 81 |             Whether you're a speed enthusiast, a family driver, or simply
 82 |             someone who appreciates the finer things in life, we're confident
 83 |             that we have a car that will meet your needs and exceed your
 84 |             expectations. Thank you for considering TBM Car Company, and we look
 85 |             forward to taking you on the ride of a lifetime."
 86 |           </p>
 87 |         </div>
 88 |         <article id="contact">
 89 |           <p class="bg-gray">
 90 |             Please contact us per Email for any further questions about TBM
 91 |             Company Limited <br />
 92 |             <a href="#">tumaini@tbmcompany.com</a>
 93 |           </p>
 94 |         </article>
 95 |       </section>
 96 |       <section class="about-main">
 97 |         <h2>TBM Company Limited 2020</h2>
 98 |         <div class="dash">___</div>
 99 |         <p>
100 |           At TBM Company Limited, we understand that purchasing a car can be a
101 |           daunting task, which is why we have made it our mission to simplify
102 |           the process for you. Our knowledgeable sales team is here to guide you
103 |           through every step of the process, from finding the right car for your
104 |           needs to securing financing and completing the paperwork.
105 |         </p>
106 |       </section>
107 |       <!--About page Image Section -->
108 |       <section class="image-container">
109 |         <h2>Our Gallery of Dream Cars</h2>
110 |         <p>Discover the ultimate driving experience with our premium cars.</p>
111 |         <div class="image-section">
112 |           <div class="overlay">
113 |             <img
114 |               class="cruiser-v8"
115 |               src="images/cruiser v8.jpg"
116 |               alt="Land Cruiser"
117 |             />
118 |             <h3>2022</h3>
119 |             <p>Land Cruiser V8</p>
120 |           </div>
121 |           <div class="overlay">
122 |             <img src="images/volvo.jpg" alt="Volvo Truck" />
123 |             <h3>2023</h3>
124 |             <p>VOLVO</p>
125 |           </div>
126 |         </div>
127 |       </section>
128 |     </main>
129 |     <section class="last-section">
130 |       <h2>Partner</h2>
131 |       <div class="dash">____</div>
132 |       <div class="partner-div">
133 |         <div class="above-div">
134 |           <div id="barclays">BARCLAYS</div>
135 |           <div id="toyota">TOYOTA</div>
136 |           <div id="star">STAR</div>
137 |         </div>
138 |         <div class="lower-div">
139 |           <div id="oil">OIL</div>
140 |           <div id="google">GOOGLE</div>
141 |         </div>
142 |       </div>
143 |     </section>
144 |     <footer class="foot">
145 |       <h3>TBM</h3>
146 |       <p>We are here for you</p>
147 |     </footer>
148 |     <script src="index.js"></script>
149 |     <script
150 |       src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
151 |       integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
152 |       crossorigin="anonymous"
153 |     ></script>
154 |   </body>
155 | </html>
156 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8" />
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7 |     <link rel="stylesheet" href="styles.css" />
  8 |     <link
  9 |       href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
 10 |       rel="stylesheet"
 11 |       integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
 12 |       crossorigin="anonymous"
 13 |     />
 14 |     <link
 15 |       href="https://fonts.googleapis.com/css?family=Lato"
 16 |       rel="stylesheet"
 17 |     />
 18 |     <link rel="preconnect" href="https://fonts.googleapis.com" />
 19 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 20 |     <link
 21 |       href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap"
 22 |       rel="stylesheet"
 23 |     />
 24 |     <script
 25 |       src="https://kit.fontawesome.com/51f27b15da.js"
 26 |       crossorigin="anonymous"
 27 |     ></script>
 28 |     <title>TBM Company LTD</title>
 29 |   </head>
 30 |   <body>
 31 |     <header>
 32 |       <i class="fa-sharp fa-solid fa-bars fa-xl hamburger"></i>
 33 |       <nav class="first-nav">
 34 |         <ul>
 35 |           <li>
 36 |             <a href="#"><i class="fa-brands fa-facebook-f"></i></a>
 37 |           </li>
 38 |           <li>
 39 |             <a href="#"><i class="fa-brands fa-twitter"></i></a>
 40 |           </li>
 41 |           <li><a href="#">English</a></li>
 42 |           <li><a href="#">My Page</a></li>
 43 |           <li><a href="#">Logout</a></li>
 44 |         </ul>
 45 |       </nav>
 46 |       <!-- Desktop Home page Header -->
 47 |       <nav class="second-nav">
 48 |         <div>
 49 |           <a href="index.html"><h2>TBM LTD</h2></a>
 50 |         </div>
 51 |         <div>
 52 |           <ul>
 53 |             <li><a href="about.html">About</a></li>
 54 |             <li><a href="#">Vehicles</a></li>
 55 |             <li><a href="#">Stock</a></li>
 56 |             <li><a href="#">Upcoming</a></li>
 57 |             <li><a href="#">Launched</a></li>
 58 |             <li class="last-item"><a href="#">Company</a></li>
 59 |           </ul>
 60 |         </div>
 61 |       </nav>
 62 |     </header>
 63 |     <!-- Mobile Menu -->
 64 |     <section class="mobile-menu">
 65 |       <button type="button" class="x-mark">&times;</button>
 66 |       <ul id="menu-list">
 67 |         <li><a id="" href="index.html">Home</a></li>
 68 |         <li><a id="" href="about.html">About</a></li>
 69 |         <li><a id="" href="#">Contact</a></li>
 70 |       </ul>
 71 |     </section>
 72 |     <!-- Home page Intorduction -->
 73 |     <main class="bg-gray">
 74 |       <section class="introduction home-intro bg-gray font">
 75 |         <h1>"This is where luxury meets affordability"</h1>
 76 |         <h2>TBM Car Company</h2>
 77 |         <div class="p-2 border-1 bg-gray">
 78 |           <p class="p-1">
 79 |             Experience the thrill of the open road with our top-quality
 80 |             vehicles. Everyone in any part of the world deserves to get A
 81 |             quality car.
 82 |           </p>
 83 |         </div>
 84 |         <p class="tbm-header bg-gray">25<sup>th</sup> May 2023</p>
 85 |         <p class="nyerere">@J.K Nyerere Hall 25</p>
 86 |       </section>
 87 |       <!-- Home page Main Part -->
 88 |       <section class="main-part font">
 89 |         <h2>Top Vehicles Brand</h2>
 90 |         <div class="dash">_____</div>
 91 |         <div class="main-div">
 92 |           <div>
 93 |             <img src="images/toyota.png" alt="toyota Logo" />
 94 |             <h3>Toyota</h3>
 95 |             <p>Toyota Motor Corp (Toyota) is an automobile manufacturer</p>
 96 |           </div>
 97 |           <div>
 98 |             <img src="images/audi.png" alt="Audi Logo" />
 99 |             <h3>Audi</h3>
100 |             <p>
101 |               Audi AG (Audi) a subsidiary of Volkswagen AG,Most purchased car              
102 |             </p>
103 |           </div>
104 |           <div>
105 |             <img src="images/BMW.png" alt="BMW Logo" />
106 |             <h3>BMW</h3>
107 |             <p>
108 |               Bayerische Motoren Werke AG, abbreviated as BMW, is an automobile              
109 |             </p>
110 |           </div>
111 |           <div>
112 |             <img
113 |               class="bg-red"
114 |               src="images/Mercedes-Benz.png"
115 |               alt="Mercedes-Benz Logo"
116 |             />
117 |             <h3>Benz</h3>
118 |             <p>Mercedes-Benz is known for its automotive safety innovation.</p>
119 |           </div>
120 |           <div>
121 |             <img src="images/Land Rover.png" alt="Land Rover Logo" />
122 |             <h3>Land Rover</h3>
123 |             <p>
124 |               Land Rover is a British brand of predominantly four-wheel drive,              
125 |             </p>
126 |           </div>
127 |         </div>
128 |         <div class="last-main-div">
129 |           <h3 class="bg-red h3-one">Drive the brand you trust.</h3>
130 |         </div>
131 |         <h3>SEE OUR STOCK OF VEHICLES</h3>
132 |       </section>
133 |       <!-- Featured Partcipants -->
134 |       <section class="investors font">
135 |         <h2>Featured Investors</h2>
136 |         <div class="dash">_____</div>
137 |         <div class="partcipants"></div>
138 |         <button type="button" class="none">
139 |           MORE <i class="fa-solid fa-greater-than fa-rotate-90"></i>
140 |         </button>
141 |       </section>
142 |       <section  class="none-mobile last-section">
143 |         <h2>Partner</h2>
144 |         <div class="dash">____</div>
145 |         <div class="partner-div">
146 |           <div id="barclays">BARCLAYS</div>
147 |           <div id="toyota">TOYOTA</div>
148 |           <div id="star">STAR</div>
149 |           <div id="oil">OIL</div>
150 |           <div id="google">GOOGLE</div>
151 |         </div>
152 |       </section>
153 |     </main>
154 |     <footer class="home-footer">
155 |       <h3>TBM</h3>
156 |       <p>We are here for you</p>
157 |     </footer>
158 |     <script src="index.js"></script>
159 |     <script
160 |       src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
161 |       integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
162 |       crossorigin="anonymous"
163 |     ></script>
164 |   </body>
165 | </html>
166 | 


--------------------------------------------------------------------------------
/styles.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |   margin: 0;
  3 |   font-family: "Lato", sans-serif;
  4 | }
  5 | 
  6 | .bg-gray {
  7 |   background-color: #f3f3f3;
  8 | }
  9 | 
 10 | .bg-red {
 11 |   background-color: #ff4b39;
 12 | }
 13 | 
 14 | .font {
 15 |   font-family: "Lato", sans-serif;
 16 | }
 17 | 
 18 | header {
 19 |   padding: 25px;
 20 |   background-color: #f3f3f3;
 21 | }
 22 | 
 23 | .fa-xl {
 24 |   color: #545454;
 25 | }
 26 | 
 27 | nav {
 28 |   display: none;
 29 | }
 30 | 
 31 | .introduction {
 32 |   margin: 0 15px;
 33 |   background-image: url("images/Porsche-PNG-Image-1.png");
 34 |   background-repeat: no-repeat;
 35 |   background-size: cover;
 36 | }
 37 | 
 38 | .introduction h1 {
 39 |   color: red;
 40 | }
 41 | 
 42 | .introduction > h2 {
 43 |   background-image: url(images/fire.jpg);
 44 |   -webkit-background-clip: text; /* For Safari/Chrome */
 45 |   -webkit-text-fill-color: transparent;
 46 |   background-size: 125px;
 47 |   font-size: 52px !important;
 48 |   font-weight: 900 !important;
 49 | }
 50 | 
 51 | .introduction div {
 52 |   border: 2px solid white;
 53 |   outline: 3px solid white;
 54 |   font-family: "Lato", sans-serif;
 55 | }
 56 | 
 57 | .tbm-header {
 58 |   font-size: 32px;
 59 |   font-weight: 600;
 60 |   color: #5e5e5e;
 61 |   text-align-last: left;
 62 |   font-family: "Lato", sans-serif;
 63 |   padding-top: 7%;
 64 | }
 65 | 
 66 | .nyerere {
 67 |   color: #767676;
 68 | }
 69 | 
 70 | form {
 71 |   padding: 20px;
 72 |   background-color: #ececec;
 73 | }
 74 | 
 75 | input:not([type="submit"]) {
 76 |   border: none;
 77 |   min-width: 300px;
 78 |   width: 80%;
 79 | }
 80 | 
 81 | input[type="submit"] {
 82 |   display: block;
 83 |   margin: 20px auto 0;
 84 |   font-family: "Lato", sans-serif;
 85 |   font-weight: bolder;
 86 |   color: #ececec;
 87 |   border: none;
 88 | }
 89 | 
 90 | .main-part {
 91 |   background-image: url("images/x-background.png");
 92 |   background-size: 20px;
 93 |   background-color: #2d3037;
 94 | }
 95 | 
 96 | .main-part h2 {
 97 |   color: #fff;
 98 |   text-align: center;
 99 |   padding-top: 30px;
100 | }
101 | 
102 | .main-part img {
103 |   width: 80px;
104 |   height: 80px;
105 |   margin: 10px;
106 | }
107 | 
108 | .main-part p {
109 |   margin: 10px;
110 | }
111 | 
112 | .main-div {
113 |   margin: 20px;
114 | }
115 | 
116 | .main-div div {
117 |   display: flex;
118 |   justify-content: space-between;
119 |   align-content: center;
120 |   background-color: rgba(60, 63, 70, 0.5);
121 |   margin: 10px 5px;
122 | }
123 | 
124 | .main-div p {
125 |   text-align: justify;
126 |   color: #fff;
127 | }
128 | 
129 | footer h3 {
130 |   font-family: 'Lato', sans-serif;
131 |   font-weight: 800;
132 | }
133 | 
134 | .main-div h3 {
135 |   min-width: 70px;
136 |   color: #ff4b39;
137 |   margin: 10px;
138 |   font-weight: bolder;
139 | }
140 | 
141 | .last-main-div {
142 |   padding: 50px;
143 | }
144 | 
145 | .last-main-div h3 {
146 |   color: #fff;
147 |   padding: 30px;
148 |   margin: 0;
149 | }
150 | 
151 | .partcipants img {
152 |   min-width: 150px;
153 |   max-width: 150px;
154 |   height: 150px;
155 |   margin: 10px;
156 |   object-fit: cover;
157 |   z-index: 1000;
158 | }
159 | 
160 | .content {
161 |   margin: 10px;
162 | }
163 | 
164 | .info {
165 |   text-align: justify;
166 |   color: red;
167 | }
168 | 
169 | .investors button {
170 |   width: 80%;
171 |   margin: 10%;
172 |   padding: 20px;
173 |   border-color: #ececec;
174 |   background-color: white;
175 |   border: none;
176 | }
177 | 
178 | .about-intro {
179 |   background-color: white;
180 | }
181 | 
182 | .about-intro p {
183 |   text-align: justify;
184 |   text-align-last: center;
185 |   -moz-text-align-last: center;
186 |   padding: 3%;
187 | }
188 | 
189 | .about-main {
190 |   padding: 25px;
191 |   background-color: white;
192 | }
193 | 
194 | .about-main h2 {
195 |   text-align-last: center;
196 | }
197 | 
198 | .dash {
199 |   text-align: center;
200 |   color: red;
201 |   padding-bottom: 20px;
202 | }
203 | 
204 | .about-main p {
205 |   text-align: justify;
206 |   padding: 0 6%;
207 | }
208 | 
209 | .overlay {
210 |   position: relative;
211 |   margin: 20px;
212 |   background-color: rgb(245, 122, 89);
213 | }
214 | 
215 | .overlay img {
216 |   width: 100%;
217 |   opacity: 0.4;
218 | }
219 | 
220 | .overlay h3 {
221 |   position: absolute;
222 |   left: 50%;
223 |   top: 50%;
224 |   transform: translate(-50%, -50%);
225 |   color: white;
226 |   padding-bottom: 30px;
227 |   font-size: 42px;
228 |   font-weight: 600;
229 | }
230 | 
231 | .overlay p {
232 |   position: absolute;
233 |   top: 50%;
234 |   left: 50%;
235 |   transform: translate(-50%, -50%);
236 |   color: white;
237 |   text-align: center;
238 |   padding-top: 30px;
239 | }
240 | 
241 | .image-container {
242 |   padding-bottom: 7%;
243 | }
244 | 
245 | .image-container h2 {
246 |   text-align: center;
247 |   margin: 20px;
248 | }
249 | 
250 | .image-container > p {
251 |   margin: 15px;
252 |   text-align: justify;
253 |   text-align-last: center;
254 |   padding: 10px;
255 | }
256 | 
257 | .ab-intro {
258 |   margin: 0 auto;
259 | }
260 | 
261 | .ab-intro h2 {
262 |   text-align: center;
263 | }
264 | 
265 | .ab-intro h1 {
266 |   text-align: center;
267 | }
268 | 
269 | .above-div {
270 |   display: flex;
271 |   justify-content: space-around;
272 |   font-size: 24px;
273 | }
274 | 
275 | .lower-div {
276 |   display: flex;
277 |   justify-content: space-around;
278 |   font-size: 24px;
279 | }
280 | 
281 | #barclays {
282 |   color: #bebebe;
283 | }
284 | 
285 | #star {
286 |   color: #8f8f8f;
287 | }
288 | 
289 | #toyota {
290 |   color: #707070;
291 | }
292 | 
293 | #oil {
294 |   color: #9d9d9b;
295 | }
296 | 
297 | #google {
298 |   color: #767676;
299 | }
300 | 
301 | .main-part > h3 {
302 |   display: none;
303 | }
304 | 
305 | .none-mobile {
306 |   display: none;
307 | }
308 | 
309 | .mobile-menu {
310 |   height: 100%;
311 |   margin: 0;
312 |   background-color: rgba(233, 219, 217, 0.8);
313 |   display: none;
314 |   position: fixed;
315 |   width: 100%;
316 |   backdrop-filter: blur(3px);
317 |   z-index: 10;
318 | }
319 | 
320 | .x-mark {
321 |   display: flex;
322 |   justify-content: flex-end;
323 |   padding: 25px;
324 |   border: none;
325 |   cursor: pointer;
326 |   outline: none;
327 |   background: none;
328 |   font-size: 2rem;
329 | }
330 | 
331 | .mobile-menu ul {
332 |   list-style-type: none;
333 |   padding: 0;
334 |   width: 100%;
335 | }
336 | 
337 | .mobile-menu ul li {
338 |   margin: 0;
339 | }
340 | 
341 | .mobile-menu a {
342 |   padding: 10px 15px;
343 |   text-decoration: none;
344 |   background-color: #ff4b39;
345 |   margin: 15px;
346 |   display: block;
347 |   text-align: center;
348 |   color: white;
349 | }
350 | 
351 | #contact p a {
352 |   color: #2d3037;
353 |   font-weight: 400;
354 | }
355 | 
356 | #contact p {
357 |   padding: 20px;
358 |   text-align: justify;
359 |   text-align-last: center;
360 | }
361 | 
362 | .investors h2 {
363 |   text-align: center;
364 | }
365 | 
366 | .fa-rotate-90 {
367 |   color: #ff4b39;
368 | }
369 | 
370 | .fa-brands {
371 |   color: #fff;
372 | }
373 | 
374 | .last-section h2 {
375 |   text-align: center;
376 |   color: #fff;
377 |   padding-top: 30px;
378 | }
379 | 
380 | .last-section {
381 |   background-color: #414246;
382 |   font-family: "Lato", sans-serif;
383 |   padding-top: 30px;
384 |   padding-bottom: 40px;
385 | }
386 | 
387 | footer {
388 |   display: flex;
389 |   justify-content: space-around;
390 |   padding: 5% 0;
391 | }
392 | 
393 | .home-footer {
394 |   display: none;
395 | }
396 | 
397 | @media screen and (min-width: 768px) {
398 |   .fa-sharp.fa-solid.fa-bars.fa-xl {
399 |     display: none;
400 |   }
401 | 
402 |   header {
403 |     padding: 0;
404 |     background-color: #3e3e3e;
405 |   }
406 | 
407 |   .first-nav {
408 |     display: block;
409 |     padding-right: 8%;
410 |   }
411 | 
412 |   .second-nav {
413 |     background-color: #fff;
414 |     display: flex;
415 |     justify-content: space-between;
416 |     align-items: center;
417 |     padding: 0 5%;
418 |   }
419 | 
420 |   .second-nav h2 {
421 |     font-family: "Lato", sans-serif;
422 |     background-image: url(images/fire.jpg);
423 |     -webkit-background-clip: text; /* For Safari/Chrome */
424 |     -webkit-text-fill-color: transparent;
425 |     background-size: 125px;
426 |     font-size: 32px !important;
427 |     font-weight: 900;
428 |   }
429 | 
430 |   .second-nav ul {
431 |     list-style-type: none;
432 |     display: flex;
433 |     justify-content: space-around;
434 |     padding: 20px;
435 |   }
436 | 
437 |   .second-nav ul li {
438 |     padding: 10px 10px;
439 |   }
440 | 
441 |   .second-nav a {
442 |     text-decoration: none;
443 |     color: #545454;
444 |   }
445 | 
446 |   .last-item {
447 |     border: 4px solid #ff4b39;
448 |   }
449 | 
450 |   .last-item a {
451 |     color: #ff4b39;
452 |   }
453 | 
454 |   .first-nav ul a {
455 |     text-decoration: none;
456 |     display: block;
457 |     padding: 0 15px;
458 |     color: white;
459 |   }
460 | 
461 |   .second-nav a:hover {
462 |     color: #ff4b39;
463 |   }
464 | 
465 |   .home-intro {
466 |     padding: 5% 20% 5% 10%;
467 |   }
468 | 
469 |   .ab-intro {
470 |     padding: 5% 20%;
471 |   }
472 | 
473 |   .main-part h2 {
474 |     text-align: center;
475 |   }
476 | 
477 |   .first-nav ul {
478 |     display: flex;
479 |     justify-content: flex-end;
480 |     list-style-type: none;
481 |     margin: 0;
482 |   }
483 | 
484 |   .main-div div {
485 |     flex-direction: column;
486 |     border-left: 2px solid;
487 |     border-right: 2px solid;
488 |     justify-content: flex-start;
489 |     align-content: center;
490 |   }
491 | 
492 |   .main-div div img {
493 |     margin: 0 auto;
494 |   }
495 | 
496 |   .last-main-div {
497 |     display: none;
498 |   }
499 | 
500 |   .main-part > h3 {
501 |     display: block;
502 |     color: #ececec;
503 |     text-align: center;
504 |     text-decoration: underline;
505 |     padding: 5%;
506 |   }
507 | 
508 |   .main-div div h3 {
509 |     text-align: center;
510 |   }
511 | 
512 |   .partcipants {
513 |     display: grid;
514 |     grid-template-columns: auto auto;
515 |     padding: 20px 10% 5%;
516 |   }
517 | 
518 |   .none {
519 |     display: none;
520 |   }
521 | 
522 |   .none-mobile {
523 |     display: block;
524 |   }
525 | 
526 |   .none-mobile h2 {
527 |     padding-top: 0;
528 |   }
529 | 
530 |   .partner-div {
531 |     display: flex;
532 |     justify-content: center;
533 |   }
534 | 
535 |   .partner-div div {
536 |     margin: 0 3%;
537 |   }
538 | 
539 |   .main-div div:hover {
540 |     border: 2px solid white;
541 |   }
542 | 
543 |   .about-intro p {
544 |     margin: 0;
545 |     padding-top: 0;
546 |   }
547 | 
548 |   .main-div {
549 |     display: flex;
550 |     padding: 0 10%;
551 |   }
552 | 
553 |   .image-section {
554 |     display: grid;
555 |     grid-template-columns: auto auto;
556 |     padding: 0 15%;
557 |   }
558 | 
559 |   .cruiser-v8 {
560 |     height: 100%;
561 |   }
562 | 
563 |   .last-section {
564 |     display: none;
565 |   }
566 | 
567 |   .foot {
568 |     background-color: #3e3e3e;
569 |     color: white;
570 |   }
571 | 
572 |   .home-footer {
573 |     display: flex;
574 |   }
575 | }
576 | 


--------------------------------------------------------------------------------