-
Notifications
You must be signed in to change notification settings - Fork 0
/
home.html
110 lines (93 loc) · 4.72 KB
/
home.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!--
Author: Emil Soleymani
Last Modification: 2023-11-08
-->
<!DOCTYPE html>
<html>
<head>
<title>CarDex | Home</title>
<link rel="stylesheet" type="text/css" href="css/global.css">
<link rel="stylesheet" type="text/css" href="css/home.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="js/trending_models.js"></script>
<script type="text/javascript" src="js/gas.js"></script>
<div class="header-wrapper">
<img class="header-logo" src="imgs/header_logo.png" alt="CarDex Logo">
<div class="header-nav-wrapper">
<ul>
<li><a id="selected" href="home.html">Home</a></li>
<li><a href="manufacturers.html">Manufacturers</a></li>
<li><a href="about_us.html">About Us</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</div>
<div id="search-bar-wrapper">
<p class="search-bar-description">Search <span>over 1000</span> makes and models!</p>
<div class="search-bar">
<form action="search.html" method="get" autocomplete="off">
<input type="text" name="search" placeholder="Search for a car model...">
<input class="search-bar-btn" type="submit" value="→">
</form>
</div>
</div>
<div class="trending-models-wrapper">
<h1 class="trending-models-header">Trending Models</h1>
<div id="trending-models-list">
<!-- These will later be dynamically loaded from API calls -->
<!--
<div class="model-display-mini">
<div class="model-display-mini-name-wrapper">
<p class="model-display-mini-name">2004 Ford Taurus</p>
<div class="model-display-mini-underline"></div>
</div>
<img class="model-display-mini-img" src="imgs/ford_taurus.png" alt="2004 Ford Taurus">
<p class="model-display-mini-specs">3.0L V6 | 200 hp @ 5650 rpm</p>
</div>
<div class="model-display-mini">
<div class="model-display-mini-name-wrapper">
<p class="model-display-mini-name">2005 Hyundai Tucson</p>
<div class="model-display-mini-underline"></div>
</div>
<img class="model-display-mini-img" src="imgs/hyundai_tucson.png" alt="2004 Ford Taurus">
<p class="model-display-mini-specs">2.0L L4 | 140 hp @ 6000 rpm</p>
</div>
<div class="model-display-mini">
<div class="model-display-mini-name-wrapper">
<p class="model-display-mini-name">2007 Chrysler PT Cruiser</p>
<div class="model-display-mini-underline"></div>
</div>
<img class="model-display-mini-img" src="imgs/pt_cruiser.png" alt="2004 Ford Taurus">
<p class="model-display-mini-specs">2.4L L4 Turbo | 230 hp @ 5100 rpm</p>
</div>
-->
</div>
</div>
<div class="estimated-gas-wrapper">
<h1 id="estimated-gas-title">Estimated Gas Price</h1>
<div class="estimated-gas-content-wrapper">
<img src="imgs/icons/gas-station.png" alt="Gas Icon" class="estimated-gas-icon">
<p id="estimated-gas-amt">$1.56 USD/gal</p>
</div>
</div>
<div class="footer-space-global"></div>
<div class="footer-wrapper">
<p class="footer-copyright"><span>©</span> 2023 CarDex</p>
<div class="footer-links">
<div class="footer-links-left">
<a href="privacy.html">Privacy Policy</a>
<a href="terms-conditions.html">Terms and Conditions</a>
</div>
<div class="footer-social">
<!-- Let's imagine these are links to some official accounts -->
<a href="https://www.instagram.com"><img class="footer-social-img" src="imgs/icons/instagram.png" alt="Instagram"></a>
<a href="https://www.facebook.com"><img class="footer-social-img" src="imgs/icons/facebook.png" alt="Facebook"></a>
<a href="https://www.youtube.com"><img class="footer-social-img" src="imgs/icons/youtube.png" alt="Youtube"></a>
</div>
</div>
</div>
</body>
</html>