forked from NaughtyLittleGays/CarHomePage
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
141 lines (105 loc) · 6.09 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
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BMW</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--nevigation-->
<header>
<div class="navbar">
<div class="logo">
<img src="./image/Logo.png" alt="logo" width="75px" height="40px">
</div>
<ul>
<li class="hidenav active"><a href="index.html">Home</a></li>
<li class="hidenav"><a href="search.html">Search</a></li>
<li class="hidenav"><a href="#">Model & Pricing</a></li>
<li class="hidenav"><a href="#">Contact Us</a></li>
</ul>
<button onclick="openSignInPage()" class="hidenav btn-signin">Sign In</button>
<span onclick="opensidebar()" ><svg xmlns="http://www.w3.org/2000/svg" height="28px" viewBox="0 -960 960 960" width="28px" fill="#e8eaed"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/></svg></span>
</div>
<ul class="sidebar">
<span onclick="closesidebar()" class="cross"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg></span>
<li><a href="#">Home</a></li>
<li><a href="#">Search</a></li>
<li><a href="#">Model & Pricing</a></li>
<li><a href="#">Contact Us</a></li>
<button onclick="openSignInPage()" class="btn-signin">Sign In</button>
</ul>
</header>
<!--nevigation-->
<!---body-->
<main>
<!---LoginForm-->
<div id="form-container" onclick="closeSignInPage()">
<div class="page front-login animate">
<form action="">
<h1>Login</h1>
<div class="input-box">
<input type="text" placeholder="Username" required>
<i class='bx bx-user'></i>
</div>
<div class="input-box">
<input type="password" placeholder="password" required>
<i class='bx bxs-lock'></i>
</div>
<div class="remember-link">
<label><input type="checkbox">Remember me</label>
<a href="#">Forget password</a>
</div>
<button type="submit" class="btn-login">Login</button>
<div class="register">
<span>Don't have an account?</span>
<a onclick="openTab()">Register Here</a>
</div>
</form>
</div>
</div>
<!---LoginForm end-->
<section class="cover">
<div class="cover-display-container">
<img class="coverpic" style="display: block;" src="./image/cover.jpg" style="width:100%">
<img class="coverpic" src="./image/cover2.jpg" style="width:100%">
<img class="coverpic" src="./image/cover3.jpg" style="width:100%">
<img class="coverpic" src="./image/cover4.jpg" style="width:100%">
<button class="previous" onclick="plusDivs(-1)">❮</button>
<button class="next" onclick="plusDivs(1)">❯</button>
</div>
<div class="top-left">DESTINED FOR GREATNESS</div>
<div class="top-left-small">Introducing the best car ever.</div>
<div class="bottom-center">Nobody is perfect. But if you drive a BMW, you're pretty close.</div>
</section>
<div class="detail">
<div class="first">
<video src="./image/interior.mp4" autoplay muted loop></video>
<div class="text">
<h1>BMW X6M Competition</h1>
<p>The X6M Competition includes 617 horsepower, Extended Shadowline Trim, and M Sport Exhaust System. The latest 48V mild-hybrid technology and improved M xDrive make acceleration and control the dynamic duo you need for extreme performance.</p>
<p>Lock into crucial stats with the BMW Curved Display, featuring a 12.3" Digital Instrument Cluster and a 14.9" Central Information Display with the BMW Operating System 8.5.</p>
<p>Your mission: to stand out. Your vehicle: the 2025 BMW X6 M Competition SUV. Aggressive design enhancements and refined engineering technology work together to put you a cut above the rest.</p>
</div>
</div>
<div class="second">
<div class="text2">
<h1>BMW 8 Series Coupe</h1>
<p>The large, luxurious BMW 8 Series Gran Coupe is a unique vehicle in the BMW lineup. Its exterior design combines the sporty styling of a coupe with the spacious four-door size of a sedan. Highly comfortable seats, the finest leather upholstery, premium sound systems, and much more place the 2025 BMW 8 Gran Coupe in a luxury league of its own.</p>
<p>The 2025 BMW 8 Series Gran Coupe is available with a 3.0-liter inline 6-cylinder BMW TwinPower Turbo gasoline engine (840i and 840i xDrive models) a 4.4-liter V-8 BMW M TwinPower Turbo gasoline engine (M850i xDrive and M8 Competition Gran Coupes), or a hand-tuned 4.4-liter Bi-Turbo V-8 gasoline engine (ALPINA B8 Gran Coupe).</p>
</div>
<video src="./image/BMW_Ad.mp4" autoplay loop muted alt="AD">
</div>
</div>
</main>
<!--body end-->
<!--footer-->
<footer>
<p>BMW AG 2024</p>
</footer>
<!--footer end-->
<!--login form close when click on out side the form-->
<script src="app.js"></script>
<!--login form close when click on out side the form-->
</body>
</html>