-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
131 lines (129 loc) · 5.61 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
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Venny's Cars</title>
<link href="main.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@300&display=swap" rel="stylesheet">
</head>
<body>
<!--Below is the logo and title for the website-->
<header class="header">
<section class="car-fronts">
<img src="Images/front-divo.jpg" alt="Bugatti Divo Front End" class="logo">
<img src="Images/front-veneno.jpg" alt="Lamborghini Veneno Front End" class="logo">
<img src="Images/front-mclaren.jpg" alt="McLaren Front End" class="logo">
<img src="Images/front-porsche.jpg" alt="Prosche Front End" class="logo">
</section>
<section class="under-logo">
<img src="Images/lambo-logo-reverse.png" alt="outline of car" class="lambo-logo">
<h1 class="title">Venny's Cars</h1>
<img src="Images/lambo-logo.png" alt="reverse outline" class="lambo-logo">
</section>
</header>
<!--Below is the Navigation Bar-->
<nav class="navbar">
<button class="view-mode">Show Minimal View</button>
<!-- <button class="view full">Full View</button> -->
</nav>
<!--Here is the signup form-->
<main>
<!-- <form class="signup-form" action="#" method="POST">
<h1 class="signup-title">Sign Up for our Newsletter!</h1>
<fieldset class="name-email-input">
<div>
<label for="firstname">First Name:</label>
<input type="text" id="firstname" name="firstname" placeholder="John" required>
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="[email protected]" required>
</div>
Signup Button
<div class="button">
<button class="signup" type="submit" id="button">Sign Up!</button>
</div>
</fieldset>
</form> -->
<!--Below is our section for the cars-->
<section class="cars">
<!--Porsche 911 GT2 RS-->
<div class="car-display">
<h1 class="car-name">Porsche 911 GT2 RS</h1>
<img src="Images/gt2rs.jpg" class="car gt2rs" alt="Porshe 911 GT2 RS">
<ul><h2 class="car-stats">Car Stats</h2>
<li>Engine: 3.8-liter Twin-Turbo Flat 6</li>
<li>HP: 690hp @ 7000rpm</li>
<li>Torque: 553 lb-ft @ 2500rpm</li>
<li>Price: $293,200</li>
</ul>
<iframe width="256" height="144" src="https://www.youtube.com/embed/PwAhAFyMwk8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<!--Koenigsegg One:1-->
<div class="car-display">
<h1 class="car-name">Koenigsegg One:1</h1>
<img src="Images/k1.jpg" class="car k1" alt="Koenigsegg One:1">
<ul><h2 class="car-stats">Car Stats</h2>
<li>Engine: 5.0-liter Twin-Turbo V8</li>
<li>HP: 1341hp @ 7500rpm</li>
<li>Torque: 1010 lb-ft @ 6000rpm</li>
<li>Price: ~$2,850,000</li>
</ul>
<iframe width="256" height="144" src="https://www.youtube.com/embed/7X1z-1xwquk" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<!--Porsche 918 Spyder-->
<div class="car-display">
<h1 class="car-name">Porsche 918 Spyder</h1>
<img src="Images/918.jpg" class="car 918" alt="Porshe 918 Spyder">
<ul><h2 class="car-stats">Car Stats</h2>
<li>Engine: 4.6-liter V8 Hybrid</li>
<li>HP: 887hp @ 8600rpm</li>
<li>Torque: 944 lb-ft @ 5000rpm</li>
<li>Price: ~$1,400,000</li>
</ul>
<iframe width="256" height="144" src="https://www.youtube.com/embed/nSqzp3kdAm4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<!--Ferrari F50-->
<div class="car-display">
<h1 class="car-name">Ferrari F50</h1>
<img src="Images/f50.jpg" class="car f50" alt="Ferrari F50">
<ul><h2 class="car-stats">Car Stats</h2>
<li>Engine: 4.7-liter V12</li>
<li>HP: 512hp @ 8500rpm</li>
<li>Torque: 347 lb-ft @ 6500rpm</li>
<li>Price: ~$3,600,000</li>
</ul>
<iframe width="256" height="144" src="https://www.youtube.com/embed/m0qp_tXTIi0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<!--Pagani Huayra-->
<div class="car-display">
<h1 class="car-name">Pagani Huayra</h1>
<img src="Images/huayra.jpg" class="car huayra" alt="Pagani Huayra">
<ul><h2 class="car-stats">Car Stats</h2>
<li>Engine: 6.0-liter Twin-Turbo V12</li>
<li>HP: 720hp @ 5800rpm</li>
<li>Torque: 738 lb-ft @ 4500rpm</li>
<li>Price: ~$3,400,000</li>
</ul>
<iframe width="256" height="144" src="https://www.youtube.com/embed/-_bakHYcD9o" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</section>
</main>
<!--Below is the footer-->
<footer>
<h2 class="footer-text">Follow me for new additions!</h2>
<!-- <div class="social-icons">
<a href="#" target="_blank"><img class="icons" src="Images/facebook.png" alt="facebook"></a>
<a href="#" target="_blank"><img clas="icons" src="Images/insta.png" alt="insta"></a>
</div> -->
</footer>
<!--Link to Javascript-->
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"></script>
<script src="action.js"></script>
</body>
</html>