-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
130 lines (97 loc) · 4.4 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product Landing Page</title>
<link rel="stylesheet" href="./main/main.css">
<link href="https://fonts.googleapis.com/css2?family=Acme&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="./main/tabLogo.png" type="image/x-icon">
</head>
<body>
<header id="header">
<a href="https://www.porsche.com/"> <img src="./main/porschelogo.png" id="header-img" alt="logo"></a>
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#specification">SPECIFICATIONS</a></li>
<li><a class="nav-link" href="#videoSec">VIDEO</a></li>
<li><a class="nav-link" href="#interior">INTERIOR</a></li>
</ul>
</ul>
</nav>
</header>
<h1 id="mainHeading">PORSCHE 911</h1>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input name="email" id="email" type="email" placeholder="Enter Email Address" required />
<input id="submit" type="submit" value="BOOK NOW" class="btn" />
</form>
<section id=des>
<ul>
<li>Power athlete. Design icon. Everyday hero. The 911 combines the power of a sports car with great
interior comfort and the latest technology to make your everyday life easier.</li>
<li>A timeless design, a contemporary interpretation. The unmistakable silhouette of the 911 is
characterised by its iconic flyline. It has barely changed since 1963, and has shaped the DNA of all
Porsche models. Including, of course, the 911 Cabriolet and Targa models.</li>
<li>The heart of Porsche continues to beat in Zuffenhausen. This is where it all began. This is where the
series production of the first Porsche production model started. And this is where even today our Sports
Cars and all Porsche engines are built.</li>
</ul>
</section>
<section id=img2>
</section>
<h1 id="specification">SPECIFICATIONS</h1>
<section id="specs">
<div id="card1">
<p>The engine of the 911 models has a twin-turbo configuration. Its stand-out qualities: exceptional power
across the speed range, extraordinarily direct responsiveness and a wide torque plateau, even at low
speeds.</p>
</div>
<div id="card2">
<p> High-resolution displays, touch-sensitive buttons.Thanks to the intuitive Porsche Advanced Cockpit
control concept, the interior is clearer and more dynamic than ever.
</p>
</div>
<div id="card3">
<p>More – of everything. The chassis systems optimise the vehicle features of the 911 and make it even
faster, more agile and more comfortable.</p>
</div>
<div id="card4">
<p>
Additional apps and services, such as Real-time Traffic Information, online voice control, music
streaming – the 911 offers you a wealth of options for digital networking.</p>
</div>
</section>
<section id=img3>
</section>
<h1>INTERIOR</h1>
<div id=interior>
<div id=int1>
</div>
<div id=int2>
</div>
</div>
<div id="videoSec">
<iframe id="video" width="560" src="https://www.youtube.com/embed/92sXWVxRr0g" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
<h2> FEEL THE MAGIC</h1>
</div>
<section id=img1>
<div id="aud_play" onclick="pauseAudio()">
</div>
<div id="aud_pause" onclick="playAudio()">
</div>
</section>
<footer>
<ul>
<li><a href="#">Privacy</a></li>
<li><a href="#">Terms</a></li>
<li><a href="#">Contact</a></li>
</ul>
<span>All Images are used for projects purpose only.</span>
<span>Credits for Pics and Videos :<strong><a href="https://www.porsche.com/"> Porsche.com</a></strong></span>
</footer>
<script src="./main/main.js"></script>
</body>
</html>