-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
159 lines (156 loc) · 5.7 KB
/
index.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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Main Styles -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Recursive:wght@300;400;500;600;700&display=swap"
rel="stylesheet">
<!-- Font Awesome Icons -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Google Maps API -->
<script defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCl7F3URup7S4Of3R3cJQLk535vNnUQRzg&callback=initMap"></script>
<title>ElectroHub | World's Best Market</title>
</head>
<body>
<header class="header">
<div class="container">
<nav class="navbar">
<div class="logo">
<img src="images/logo.png" style="height:60px;" alt="logo-image">
</div>
<ul id="menu-items">
<li><a href="">Home</a></li>
<li><a href="index2.html">Products</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="register.html">Account</a></li>
</ul>
<img src="images/cart.png" alt="cart" width="30px" height="30px" class="cart-img">
<img src="images/menu.png" alt="menu" width="30px" height="30px" class="menu-icon" onclick="menutoggle()">
</nav>
<div class="row">
<div class="col-md-6">
<h1 class="text-white">Great deals happening <br> Right Now!</h1>
<p>Enjoy a safe, convenient shopping experience</p>
<p>Shop stress-free from home. We’re ready to help, online or by phone.</p>
<a href="" class="btn btn-main">Explore Now →</a>
</div>
<div class="col-md-6">
<img src="images/laptop-banner.png" alt="banner-image" class="center">
</div>
</div>
</div>
</header>
<!-- Featured products -->
<section class="small-container mt-5">
<h2 class="title">Featured Products</h2>
<div class="row horizontal-scroll-wrapper squares">
<!-- Product Boxes -->
</div>
</section>
<!-- Latest products -->
<section class="small-container mt-5">
<h2 class="title">Latest Products</h2>
<div class="row">
<!-- Product Boxes -->
</div>
</section>
<!-- Offer -->
<section class="offer">
<div class="small-container">
<div class="row">
<div class="col-6">
<img src="images/asus-banner.png" class="offer-img">
</div>
<div class="col-6 text-data text-white">
<p>Top Products you should take advantage of</p>
<h1>Best Product limited offer!</h1>
<a href="" class="btn">Buy Now →</a>
</div>
</div>
</div>
</section>
<!-- Location -->
<section class="locate">
<div class="small-container">
<div class="row">
<div class="col-2">
<h3>My Google Maps Demo</h3>
<div id="map"></div>
</div>
<div class="col-2"></div>
</div>
</div>
</section>
<!-- Brands -->
<section class="brands">
<div class="small-container">
<div class="row">
<div class="col-3">
<img src="images/amazon_PNG24.png" alt="Amazon Logo">
</div>
<div class="col-3">
<img src="images/apple_logo_PNG19675.png" alt="Apple Logo">
</div>
<div class="col-3">
<img src="images/samsung_logo_PNG2.png" alt="Samsung Logo">
</div>
<div class="col-3">
<img src="images/mastercard_PNG7.png" alt="Mastercard Logo">
</div>
<div class="col-3">
<img src="images/paypal_PNG19.png" alt="PayPal Logo">
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="row">
<div class="footer-col-1">
<h3>Download our app</h3>
<p>Top G5 Enabled Products with good support</p>
<div class="app-logo">
<img src="images/playstore.png" alt="Play Store">
<img src="images/appstore.png" alt="App Store">
</div>
</div>
<div class="footer-col-2">
<img src="images" alt="">
<p>Best technology-enabled product?</p>
</div>
<div class="footer-col-3">
<h3>Useful Links</h3>
<ul>
<li>Coupons</li>
<li>Blog Post</li>
<li>Return Policy</li>
<li>Join Affiliate</li>
</ul>
</div>
<div class="footer-col-4">
<h3>Follow Us</h3>
<ul>
<li>Facebook</li>
<li>Twitter</li>
<li>Instagram</li>
<li>YouTube</li>
</ul>
</div>
</div>
<hr>
<p class="copyright">Copyright 2024 bayramtturgutt</p>
</div>
</footer>
<script src="main.js"></script>
<!-- Load the API from the specified URL
* The async attribute allows the browser to render the page while the API loads
* The key parameter will contain your own API key (which is not needed for this tutorial)
* The callback parameter executes the initMap() function -->
</body>
</html>