├── img
    ├── logo.png
    ├── logo1.png
    ├── images.jpg
    ├── about-bcg.jpeg
    ├── header-car.jpg
    ├── project-1.jpeg
    ├── project-2.jpeg
    ├── project-3.jpeg
    ├── project-4.jpg
    ├── project-5.jpeg
    ├── project-6.jpeg
    ├── eagle images.png
    ├── filler-bcg.jpeg
    ├── filler-bcg2.jpg
    └── services-bcg.jpeg
├── script.js
├── README.md
├── index.html
└── main.css


/img/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EbukaPeter55/Car-frontend/HEAD/img/logo.png


--------------------------------------------------------------------------------
/img/logo1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EbukaPeter55/Car-frontend/HEAD/img/logo1.png


--------------------------------------------------------------------------------
/img/images.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EbukaPeter55/Car-frontend/HEAD/img/images.jpg


--------------------------------------------------------------------------------
/img/about-bcg.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EbukaPeter55/Car-frontend/HEAD/img/about-bcg.jpeg


--------------------------------------------------------------------------------
/img/header-car.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EbukaPeter55/Car-frontend/HEAD/img/header-car.jpg


--------------------------------------------------------------------------------
/img/project-1.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EbukaPeter55/Car-frontend/HEAD/img/project-1.jpeg


--------------------------------------------------------------------------------
/img/project-2.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EbukaPeter55/Car-frontend/HEAD/img/project-2.jpeg


--------------------------------------------------------------------------------
/img/project-3.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EbukaPeter55/Car-frontend/HEAD/img/project-3.jpeg


--------------------------------------------------------------------------------
/img/project-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EbukaPeter55/Car-frontend/HEAD/img/project-4.jpg


--------------------------------------------------------------------------------
/img/project-5.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EbukaPeter55/Car-frontend/HEAD/img/project-5.jpeg


--------------------------------------------------------------------------------
/img/project-6.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EbukaPeter55/Car-frontend/HEAD/img/project-6.jpeg


--------------------------------------------------------------------------------
/img/eagle images.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EbukaPeter55/Car-frontend/HEAD/img/eagle images.png


--------------------------------------------------------------------------------
/img/filler-bcg.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EbukaPeter55/Car-frontend/HEAD/img/filler-bcg.jpeg


--------------------------------------------------------------------------------
/img/filler-bcg2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EbukaPeter55/Car-frontend/HEAD/img/filler-bcg2.jpg


--------------------------------------------------------------------------------
/img/services-bcg.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EbukaPeter55/Car-frontend/HEAD/img/services-bcg.jpeg


--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | $(document).ready(function(){
2 |   $(".btn").click(function(){
3 |       $("nav ul").slideToggle(3000);
4 |   })  
5 | })


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Car-frontend
2 | This is the front end design of a car dealer website.
3 | Technology used: HTML, CSS, Font awesome and Jquery.
4 | 
5 | 
6 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="utf-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 |     <title>Car Company</title>
  7 |     <!--main.css-->
  8 |     <link rel="stylesheet" href="main.css">
  9 |     <!--google fonts-->
 10 |     <link href="https://fonts.googleapis.com/css?family=Mukta+Mahee" rel="stylesheet">
 11 |     <!--font awesome--> 
 12 |     <script src="all.js"></script>
 13 | </head>
 14 | 
 15 | <body>
 16 | <!-- header -->
 17 | <header>
 18 | <nav>
 19 |     <div class="nav-container">
 20 |         <img src="img/logo.png" alt="img">
 21 |         <div class="btn">
 22 |          <div class="bar"></div>
 23 |          <div class="bar"></div>   
 24 |          <div class="bar"></div>   
 25 |            
 26 |         </div>
 27 |     </div>
 28 |     <ul>
 29 |         <li><a href="#">home</a></li>
 30 |         <li><a href="#">services</a></li>
 31 |         <li><a href="#">projects</a></li>
 32 |         <li><a href="#">about us</a></li>
 33 |         <li><a href="#">contact</a></li>
 34 |         <li><a href="#">book online</a></li>
 35 |     </ul>
 36 | </nav>
 37 | <!--A flex-box parent-->
 38 | <div class="banner">
 39 |  <div class="banner-center">
 40 |      <img src="img/logo.png" alt="img">
 41 |      <h1>Company<span class="and"> &amp;
 42 |      </span>co</h1>
 43 |      <h3>car shop for fanatics</h3>
 44 |      <div class="banner-icons">
 45 |          <a href=""><i class="fab fa-facebook-f"></i>
 46 |          </a>
 47 |          <a href=""><i class="fab fa-instagram"></i>
 48 |          </a> 
 49 |          <a href=""><i class="fab fa-pinterest-p"></i>
 50 |          </a>
 51 |      </div>
 52 |     </div>
 53 | 
 54 | </div>
 55 | </header>
 56 | 
 57 | 
 58 | <!--end of header-->
 59 | <!--services-->
 60 | <section class="services">
 61 |  <div class="services-center">
 62 |      <article class="service">
 63 |          <div class="service-icon">
 64 |              <i class="fas fa-wrench"></i>
 65 |          </div>
 66 |          <div class="service-text">
 67 |              <h3>excellent repair</h3>
 68 |              <p>Lorem ipsum dolor sit amet, consectetur
 69 |             adispiscing elit. Repellat, ad?</p>
 70 |          </div>
 71 |      </article>
 72 |      <article class="service">
 73 |         <div class="service-icon">
 74 |             <i class="fas fa-car"></i>
 75 |         </div>
 76 |         <div class="service-text">
 77 |             <h3>Newest cars</h3>
 78 |             <p>Lorem ipsum dolor sit amet, consectetur
 79 |            adispiscing elit. Repellat, ad?</p>
 80 |         </div>
 81 |     </article>
 82 |     <article class="service">
 83 |         <div class="service-icon">
 84 |             <i class="fas fa-space-shuttle"></i>
 85 |         </div>
 86 |         <div class="service-text">
 87 |             <h3>Striving for more</h3>
 88 |             <p>Lorem ipsum dolor sit amet, consectetur
 89 |            adispiscing elit. Repellat, ad?</p>
 90 |         </div>
 91 |     </article>
 92 |  </div>
 93 | 
 94 | </section>
 95 | 
 96 | 
 97 | 
 98 | 
 99 | 
100 | <!--end of services-->
101 | <!--Projects-->
102 | <section class="projects">
103 | <!--title-->
104 | <div class="title">
105 |     <h2>Projects</h2>
106 |     <div class="title-underline"></div>
107 | </div>
108 | <!--end of title-->
109 | <div class="projects-center">
110 |     <article class="project">
111 |         <img src="img/project-1.jpeg" alt="car">
112 |     </article>
113 |     <article class="project">
114 |         <img src="img/project-2.jpeg" alt="car">
115 |     </article>
116 |     <article class="project">
117 |         <img src="img/project-3.jpeg" alt="car">
118 |     </article>
119 |     <article class="project">
120 |         <img src="img/project-4.jpg" alt="car">
121 |     </article>
122 |     <article class="project">
123 |         <img src="img/project-5.jpeg" alt="car">
124 |     </article>
125 |     <article class="project">
126 |         <img src="img/project-6.jpeg" alt="car">
127 |     </article>
128 | 
129 | </div>
130 | 
131 | </section>
132 | <!--end of projects-->
133 | 
134 | <!--about section-->
135 | <section class="about">
136 |     <article class="about-card">
137 |         <h3>about us</h3>
138 |         <i class="fas fa-car"></i>
139 |         <p>lorem ipsum dolor sit amet, consectetur
140 |             adispiscing elit. Repellat, ad?ipsum dolor sit amet, consectetur
141 |             adispiscing elit. Repellat, ad?ipsum dolor sit amet, consectetur
142 |             adispiscing elit. Repellat, ad?ipsum dolor sit amet, consectetur
143 |             adispiscing elit. Repellat, ad?ipsum dolor sit amet, consectetur
144 |             adispiscing elit. Repellat, ad?ipsum dolor sit amet, consectetur
145 |             adispiscing elit. Repellat, ad?</p>
146 |     </article>
147 | </section>
148 | <!--end of about section-->
149 | <!--filler section-->
150 | <section class="filler"></section>
151 | <!--end of filler section-->
152 | <!--contact-->
153 | <section class="contact">
154 | <article class="contact-card">
155 |     <form>
156 |         <h3>contact us</h3>
157 |         <input type="text" id="name" placeholder="Your name">
158 |         <input type="text" id="email" placeholder="Your email">
159 |     <textarea name="comment" id="" cols="30" rows="10" placeholder="Leave a comment">
160 |     </textarea>
161 |     <button type="submit" class="form-btn">Submit</button>
162 |     </form>
163 | </article>
164 | </section>
165 | <!--end of contact-->
166 | <!--footer-->
167 | <footer>
168 |     <div class="footer-icons">
169 |         <a href=""><i class="fab fa-facebook-f"></i>
170 |         </a>
171 |         <a href=""><i class="fab fa-instagram"></i>
172 |         </a> 
173 |         <a href=""><i class="fab fa-pinterest-p"></i>
174 |         </a>
175 |     </div>
176 |     <p>Copyright&copy;FastAndFaster.All rights</p>
177 | </footer>
178 | 
179 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
180 | <!-- end of header-->
181 |     <script src="script.js"></script>
182 | </body>
183 | </html> 


--------------------------------------------------------------------------------
/main.css:
--------------------------------------------------------------------------------
  1 | *{
  2 |     margin: 0;
  3 |     padding: 0;
  4 | }
  5 | 
  6 | 
  7 | body{
  8 |     font-family: 'Mukta Mahee', sans-serif;
  9 | }
 10 | 
 11 | /*###########Styling the navigation bar links##########*/
 12 | nav ul{
 13 |     list-style-type: none;
 14 |     display: none;
 15 | }
 16 | 
 17 | nav ul a{
 18 |     display: block;
 19 |     background: #0d1317;
 20 |     padding: 20px;
 21 |     font-size: 17px;
 22 |     text-decoration: none;
 23 |     text-transform: uppercase;
 24 |     color:#ad343e;
 25 |     transition: color 2s ease,background 2s 
 26 |     ease,padding 2s ease;
 27 | }
 28 | 
 29 | nav ul a:hover{
 30 |     background: #474747;
 31 |     color: #e0e0ce;
 32 |     padding-left: 30px;
 33 |     
 34 | }
 35 | 
 36 | .nav-container img{
 37 |     width: 100px;
 38 |     align-self: center;
 39 | }
 40 | 
 41 | .nav-container{
 42 |     padding: 0 20px;
 43 |     background: #474747;
 44 |     border-bottom: 3px solid #ad343e;
 45 |     display: flex;
 46 |     justify-content: space-between;
 47 | }
 48 | 
 49 | .bar{
 50 |     width: 30px;
 51 |     height: 3px;
 52 |     margin: 7px;
 53 |     background: #ad343e;
 54 | }
 55 | .btn{
 56 |     padding: 2px;
 57 |     display: inline-block;
 58 |     border: 2px solid #ad343e;
 59 |     align-self: center;
 60 | }
 61 | 
 62 | header{
 63 |     min-height: 100vh;
 64 |     background: linear-gradient(rgba(255,255,255,0.3),rgba(255,255,255,0.3)),
 65 |     url(img/header-car.jpg)center/cover fixed no-repeat;
 66 |     display: flex;
 67 |     flex-direction: column;
 68 |    
 69 | }
 70 | 
 71 | nav{
 72 |     flex: 0 0 auto;
 73 | }
 74 | 
 75 | .banner{
 76 |     flex: 1 0 auto;
 77 |     display: flex;
 78 |     justify-content: center;
 79 |     align-content: center;
 80 |     text-align: center;
 81 | }
 82 | 
 83 | .banner h1{
 84 |     font-size: 50px;
 85 |     text-transform: uppercase;
 86 |     color: #ad343e;
 87 | }
 88 | 
 89 | .banner h3{
 90 |     text-transform: capitalize;
 91 |     font-size: 30px;
 92 |     color: #0d1317;
 93 | }
 94 | .and{
 95 |     color: #f5f3f5;
 96 | }
 97 | 
 98 | .banner-icons{
 99 |     padding: 20px;
100 | }
101 | 
102 | .banner-icons a{
103 |     display: inline-block;
104 |     font-size: 30px;
105 |     background: #474747;
106 |     padding: 5px 10px;
107 |     margin: 0 18px;
108 |     border-radius: 50%;
109 |     color: #f5f5f5;
110 |     transition: color 1s ease, transform 1s ease;
111 | }
112 |  .banner-icons a:hover{
113 |      color: #ad343e;
114 |      transform: translateY(-10px)
115 |  }
116 | 
117 |  nav{
118 |      position: fixed;
119 |      width: 100%;
120 |      z-index: 10;
121 |  }
122 | 
123 |  @media screen and (min-width:776px){
124 |     .nav-container{
125 |         display: none;
126 |     }
127 |     nav ul {
128 |         display: flex!important;
129 |         flex-wrap: wrap;
130 |         justify-content: center;
131 |         background: rgba(13,19,23,0.8);
132 |         }
133 |     nav ul a {
134 |         background: transparent;
135 |     }
136 |     nav ul a:hover {
137 |         background: transparent;
138 |         padding-left: 20px;
139 |     }
140 | }
141 | /*#############services###############*/
142 | .services{
143 |     min-height: 80vh;
144 |     background: url(img/services-bcg.jpeg)center/cover 
145 |     fixed no-repeat;
146 |     display: flex;
147 |     align-items: center;
148 | }
149 | 
150 | .service{
151 |     color: #f5f3f5;
152 |     display: flex;
153 |     margin: 40px;
154 | }
155 | 
156 | .service-icon{
157 |     align-self: center;
158 |     font-size: 60px;
159 |     margin-right: 20px;
160 |     padding: 20px;
161 |     border: 3px solid #f5f3f5;
162 |     border-radius: 50px;
163 | 
164 | }
165 | 
166 | .service-text h3{
167 |     text-transform: uppercase;
168 |     line-height: 2;
169 | }
170 | 
171 | .service-text p{
172 | margin-top: 5px;
173 | }
174 | 
175 | @media screen and (min-height:576px){
176 |     .services-center{
177 |         width: 70%;
178 |     }
179 | }
180 | 
181 | @media screen and (min-height:776px){
182 |     .services-center{
183 |         width: 50%;
184 |     }
185 |     .service-text p{
186 |         width: 90%; 
187 |     }
188 | }
189 | 
190 | 
191 | /*######################projects##################*/
192 | .projects{
193 |     padding: 0 0 100px;
194 |     background: #f5f3f5;
195 | }
196 | 
197 | .title h2{
198 |     font-size: 40px;
199 |     text-align: center;
200 |     text-transform: uppercase;
201 |     color: #474747;
202 | }
203 | 
204 | .title-underline{
205 |     background: #ad343e;
206 |     width: 100px;
207 |     height: 4px;
208 |     margin: 10px auto
209 | }
210 | 
211 | .title{
212 |     padding: 50px 0;
213 | }
214 | 
215 | .project{
216 |     background: linear-gradient(rgba(0,0,0,0.9),rgba(0,0,0,0.9));
217 |     overflow: hidden;
218 | }
219 | .projects img{
220 |     width: 100%;
221 |     display: block;
222 |     transition: opacity 2s ease,transform 2s ease;
223 | }
224 | 
225 | .projects img:hover{
226 |     opacity: 0.3;
227 |     cursor: pointer;
228 |     transform:scale(1.3)
229 | }
230 | 
231 | /*@media screen and (min-width:576px){
232 |     .projects-center{
233 |         display: flex;
234 |         flex-wrap: wrap;
235 |     }
236 |     .project {
237 |         flex: 0 0 calc(50%);
238 |     }
239 | }
240 | @media screen and (min-width:992px){
241 |     .project {
242 |         flex: 0 0 calc(33.3333%);
243 |     }
244 | }
245 | */
246 | @media screen and (min-width:576px){
247 |     .projects-center{
248 |         display: grid;
249 |         grid-template-columns: 1fr 1fr;
250 |     }
251 | }
252 | @media screen and (min-width:992px){
253 |     .projects-center{
254 |         grid-template-columns: repeat(3, 1fr);
255 |     }
256 | }
257 | /*################about###############*/
258 | 
259 | .about{
260 |     min-height: 100vh;
261 |     padding: 100px 0;
262 |     background: url(img/about-bcg.jpeg)center/cover
263 |     fixed no-repeat;
264 |     display: flex;
265 |     justify-content: center;
266 |     align-items: center;
267 | }
268 | 
269 | .about-card{
270 |     background: rgba(255,255,255,0.6);
271 |     text-align: center;
272 |     padding: 60px 40px;
273 | }
274 | 
275 | .about-card h3{
276 |  font-size: 40px;
277 |  text-transform: capitalize;
278 | }
279 | 
280 | .about-card .fa-car{
281 |     font-size: 60px;
282 |     color: #ad343e;
283 |     margin: 20px 0;
284 | }
285 | 
286 | .about-card p{
287 |     line-height: 2;
288 | }
289 | 
290 | @media screen and (min-width: 776px){
291 |     .about-card{
292 |         max-width: 50%;
293 |         border-radius: 30px;
294 |     }
295 |     .about-card{
296 |         max-width: 70%;
297 |         margin: 0 auto;
298 |     }
299 | }
300 | /*#############filler#################*/
301 | .filler{
302 |     min-height: 60vh;
303 |     background: url(img/filler-bcg.jpeg)center/cover
304 |     fixed no-repeat;
305 | }
306 | 
307 | /*############contact##################*/
308 | /*#Parent container#*/
309 | .contact{
310 |     min-height: 80vh;
311 |     background: url(img/about-bcg.jpeg)center/cover
312 |     fixed no-repeat;    
313 |     display: flex;
314 |     justify-content: center;
315 |     align-items: center;
316 | }
317 | /*#Child container#*/
318 | .contact-card{
319 |     flex:0 0 80%;
320 |     padding: 40px 0;
321 |     background: rgba(0,0,0,0.6);
322 |     display: flex;
323 |     justify-content: center;
324 |     align-items: center;
325 | }
326 | form{
327 |     flex: 0 0 60%;
328 |     display: flex;
329 |     flex-direction: column;
330 | }
331 | 
332 | form input{
333 |     margin: 10px 0;
334 | }
335 | form h3{
336 |     text-align: center;
337 |     text-transform: uppercase;
338 |     color: #ad343e;
339 | }
340 | 
341 | form input,
342 | form textarea{
343 |     padding: 5px;
344 |     border: 3px solid #ad343e;
345 | }
346 | 
347 | input::placeholder,
348 | textarea::placeholder{
349 |     text-transform: uppercase;
350 |     color: #0d1317;
351 | }
352 | 
353 | .form-btn{
354 |     margin: 20px;
355 |     font-size: 20px;
356 |     border-radius: 40px;
357 |     padding: 5px;
358 |     background: #ad343e;
359 |     color: #f5f3f5;
360 |     transition: color 1s ease-in-out,background 1s
361 |     ease-in-out
362 | }
363 | .form-btn:hover{
364 |     color: #ad343e;
365 |     background: #f5f3f5;
366 | }
367 | 
368 | /*#############footer##################*/
369 | footer{
370 |     background: #0d1317;
371 |     padding: 60px 0;
372 |     text-align: center;
373 | }
374 | .footer-icons a{
375 | display: inline-block;
376 | font-size: 30px;
377 | margin: 0 10px 20px 10px;
378 | padding: 2px 5px;
379 | border-radius: 5px;
380 | background: #f5f3f5;
381 | color: #0d1317;
382 | }
383 | 
384 | footer p{
385 | color: #f5f3f5;
386 | font-size: 20px;
387 | }


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