UI/templates/index.html
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width initial-scale=1.0"> <meta name="description" content="AutoMart is an online marketplace for automobiles of diverse makes, model or body type. With AutoMart, users can sell their cars or buy from trusted dealerships or private sellers."> <title>AutoMart</title> <link href="https://fonts.googleapis.com/css?family=Oxygen" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css"> <link href="../css/general.css" rel="stylesheet"> <link href="../css/index.css" rel="stylesheet"> <link rel="icon" type="image/x-icon" href="../images/favicon.ico"> </head> <body> <div class="container"> <header> <nav> <a href="./index.html"><img src="../images/automart-full-logo-250px.png" width="150"></a> <div class="menu-bar"> <span class="menu-btn"><i class="fa fa-bars"></i><i class="fa fa-times hide"></i></span> <ul class="menu-list"> <li><a href="./marketplace.html">Marketplace</a></li> <li><a href="https://auto-mart-adc.herokuapp.com/api/v1/api-doc" target="_blank">API Doc</a></li> <li><a href="./signin.html">Sign In</a></li> <li><a href="./signup.html">Sign Up</a></li> </ul> </div> </nav> </header> <main class="main-100"> <div class="headline"> <h1>Welcome to <span id="company-name">Auto<span>Mart</span></span></h1> <p>A swift, secure and reliable online marketplace where you can buy your dream car and sell both brand new and fairly used cars</p> </div> </main> <section id="services-section"> <h2>What You Can Do Here</h2> <p>AutoMart is an online platform where you can sell your new and used cars or buy from trusted dealerships or private sellers.</p> <div class="services-groug"> <div class="service"> <h3>Sell Your Car</h3> <div class="service-info"> <div class="service-image"> <img src="../images/sell-car.png"> </div> <div class="service-description"> <p>AutoMart is an Awesome online marketplace for transparent and hitch free car sales transactions where you meet real and enthusiastic buyers who are ready to buy.</p> </div> </div> <a href="./signin.html" class="btn">Login to Sell</a> </div> <div class="service"> <h3>Buy New/Used Car</h3> <div class="service-info"> <div class="service-image"> <img src="../images/buy-car.png"> </div> <div class="service-description"> <p>Still searching for your dream car? Search no more. Here on AutoMart you can buy both new and used cars of diverse make, model or body type from reliable and trusted dealers.</p> </div> </div> <a href="./signin.html" class="btn">Login to Buy</a> </div> </div> </section> <section id="marketplace"> <h2 class="mp-h2">Curious about what cars are available for sales?</h2> <a href="./marketplace.html" class="btn lg-btn">Enter Marketplace</a> </section> <section id="manufacturers-section"> <h2>Featured Manufacturers</h2> <div class="categories-group m-wrapper"> <div class="m-carousel"> <div class="m-category m-card card"> <img src="../images/car-makes/bmw-logo.png"> <div class="pull-up"> <a href="./marketplace.html" class="btn">View in Marketplace</a> </div> </div> <div class="m-category m-card card"> <img src="../images/car-makes/cadillac-logo.png"> <div class="pull-up"> <a href="./marketplace.html" class="btn">View in Marketplace</a> </div> </div> <div class="m-category m-card card"> <img src="../images/car-makes/ferrari-logo.png"> <div class="pull-up"> <a href="./marketplace.html" class="btn">View in Marketplace</a> </div> </div> <div class="m-category m-card card"> <img src="../images/car-makes/ford-logo.png"> <div class="pull-up"> <a href="./marketplace.html" class="btn">View in Marketplace</a> </div> </div> <div class="m-category m-card card"> <img src="../images/car-makes/jaguar-logo.png"> <div class="pull-up"> <a href="./marketplace.html" class="btn">View in Marketplace</a> </div> </div> <div class="m-category m-card card"> <img src="../images/car-makes/mercedes-logo.png"> <div class="pull-up"> <a href="./marketplace.html" class="btn">View in Marketplace</a> </div> </div> <div class="m-category m-card card"> <img src="../images/car-makes/nissan-logo.png"> <div class="pull-up"> <a href="./marketplace.html" class="btn">View in Marketplace</a> </div> </div> <div class="m-category m-card card"> <img src="../images/car-makes/toyota-logo.png"> <div class="pull-up"> <a href="./marketplace.html" class="btn">View in Marketplace</a> </div> </div> <div class="m-category m-card card"> <img src="../images/car-makes/volks-logo.png"> <div class="pull-up"> <a href="./marketplace.html" class="btn">View in Marketplace</a> </div> </div> <div class="m-category m-card card"> <img src="../images/car-makes/volvo-logo.png"> <div class="pull-up"> <a href="./marketplace.html" class="btn">View in Marketplace</a> </div> </div> </div> <div class="slide-nav-btns"> <label class="btn slide-btn m-slide-left"><i class="fas fa-less-than"></i></label> <label class="btn slide-btn m-slide-right"><i class="fas fa-greater-than"></i></label> </div> </div> </section> <section id="body-types-section"> <h2>Featured Body Types</h2> <div class="categories-group bt-wrapper"> <div class="bt-carousel"> <div class="bt-category bt-card card"> <img src="../images/car-body-types/bt-micro.png"> <div class="pull-up"> <a href="./marketplace.html" class="btn">View in Marketplace</a> </div> </div> <div class="bt-category bt-card card"> <img src="../images/car-body-types/bt-convertible.png"> <div class="pull-up"> <a href="./marketplace.html" class="btn">View in Marketplace</a> </div> </div> <div class="bt-category bt-card card"> <img src="../images/car-body-types/bt-coupe.png"> <div class="pull-up"> <a href="./marketplace.html" class="btn">View in Marketplace</a> </div> </div> <div class="bt-category bt-card card"> <img src="../images/car-body-types/bt-van-lg.png"> <div class="pull-up"> <a href="./marketplace.html" class="btn">View in Marketplace</a> </div> </div> <div class="bt-category bt-card card"> <img src="../images/car-body-types/bt-hatch.png"> <div class="pull-up"> <a href="./marketplace.html" class="btn">View in Marketplace</a> </div> </div> <div class="bt-category bt-card card"> <img src="../images/car-body-types/bt-mpv.png"> <div class="pull-up"> <a href="./marketplace.html" class="btn">View in Marketplace</a> </div> </div> <div class="bt-category bt-card card"> <img src="../images/car-body-types/bt-pick-up.png"> <div class="pull-up"> <a href="./marketplace.html" class="btn">View in Marketplace</a> </div> </div> <div class="bt-category bt-card card"> <img src="../images/car-body-types/bt-suv-lg.png"> <div class="pull-up"> <a href="./marketplace.html" class="btn">View in Marketplace</a> </div> </div> <div class="bt-category bt-card card"> <img src="../images/car-body-types/bt-saloon.png"> <div class="pull-up"> <a href="./marketplace.html" class="btn">View in Marketplace</a> </div> </div> <div class="bt-category bt-card card"> <img src="../images/car-body-types/bt-van-sm.png"> <div class="pull-up"> <a href="./marketplace.html" class="btn">View in Marketplace</a> </div> </div> <div class="bt-category bt-card card"> <img src="../images/car-body-types/bt-suv-sm.png"> <div class="pull-up"> <a href="./marketplace.html" class="btn">View in Marketplace</a> </div> </div> <div class="bt-category bt-card card"> <img src="../images/car-body-types/bt-truck-cab.png"> <div class="pull-up"> <a href="./marketplace.html" class="btn">View in Marketplace</a> </div> </div> </div> <div class="slide-nav-btns"> <label class="btn slide-btn bt-slide-left"><i class="fas fa-less-than"></i></label> <label class="btn slide-btn bt-slide-right"><i class="fas fa-greater-than"></i></label> </div> </div> </section> <footer> <div class="inner-div"> <p>© Auto-Mart 2019</p> <div class="footer-right"> <p>ADC Project by</p> <ul> <a href="https://twitter.com/Chuksjoe" target="_blank"><li><i class="fab fa-twitter" aria-hidden="true"></i></li></a> <a href="https://www.linkedin.com/in/chukwunonso-orjiakor" target="_blank"><li><i class="fab fa-linkedin-in" aria-hidden="true"></i></li></a> <a href="https://github.com/chuksjoe" target="_blank"><li><i class="fab fa-github" title="chuksjoe's DEV Profile"></i></li></a> <a href="https://codepen.io/chuksjoe" target="_blank"><li><i class="fab fa-codepen" title="chuksjoe's DEV Profile"></i></li></a> </ul> </div> </div> </footer> </div> <!-- scripts --> <script src="../js/general.js"></script> <script src="../js/index.js"></script> </body></html>