-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
131 lines (131 loc) · 6.5 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">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product Landing Page</title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/77c4e13a1c.js" crossorigin="anonymous"></script>
</head>
<body>
<div id="page-wrapper">
<header id="header">
<nav id="nav-bar">
<div class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<ul class="nav-Links">
<li class="headerImage"><a class="nav-link" href="#"><img id="header-img" src="dscs.png" alt="Company logo"></a></li>
<li><a class="nav-link" href="#features">Features</a></li>
<li><a class="nav-link" href="#video">How it Works</a></li>
<li><a class="nav-link" href="#pricing">Pricing</a></li>
</ul>
</nav>
</header>
<div class="content">
<div class="container"></div>
<section id="section1">
<h1>AUTOMOTIVE PERFECTION PASSIONATES</h1>
<img id="shiftImg" src="shifting.jpg" alt="Car shifting gear">
<form id="form" action="https://www.freecodecamp.com/email-submit">
<input id="email" name="email" type="email" placeholder="Enter your email address" required><br>
<input class="btn" id="submit" type="submit" value="GET STARTED">
</form>
</section>
<div class="container">
<section id="features">
<div class="grid">
<div class="icon"><i class="fas fa-shield-alt fa-5x"></i></div>
<div class="desc">
<h2>Longtime Protection</h2>
<p>From 3 and up to 5 years of total paint protection.</p>
</div>
</div>
<div class="grid">
<div class="icon"><i class="fas fa-money-bill-alt fa-5x"></i></div>
<div class="desc">
<h2>Saves Money</h2>
<p>Adds multiple layers of paint protection to avoid expensive paint fixes.</p>
</div>
</div>
<div class="grid">
<div class="icon"><i class="fas fa-cloud-sun fa-5x"></i></div>
<div class="desc">
<h2>Fights Any Weather</h2>
<p>Full protection against sun, rain, cold or any other weather condition.</p>
</div>
</div>
<div class="grid">
<div class="icon"><i class="fas fa-hand-sparkles fa-5x"></i></div>
<div class="desc">
<h2>Remains Clean</h2>
<p>Hydrophobic properties prevent dirt to stick the paint, keeping your car clean during long journeys.</p>
</div>
</div>
<div class="grid">
<div class="icon"><i class="fas fa-car fa-5x"></i></div>
<div class="desc">
<h2>Your Vehicle</h2>
<p>The MOST important for any automotive passionate, keep it stunning, shiny, and like brand new always.</p>
</div>
</div>
</section>
</div>
<section id="video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/YTd25YC_dNE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</section>
<section id="pricing">
<div class="product" id="exterior">
<div class="productTitle">EXTERIOR COATING</div>
<img class="productImage" src="Exterior.jpg" alt="Exterior car coating image">
<h2>$700</h2>
<ol>
<li>General 3 Year coating.</li>
<li>Windows.</li>
<li>Rims.</li>
<li>Complete exterior detailing with black parts.</li><br>
</ol>
<button class="btn">Schedule</button>
</div>
<div class="product" id="interiorEngine">
<div class="productTitle">FULL 3 YEAR DETAILING</div>
<img class="productImage" src="Interior2.jpg" alt="Exterior car coating image">
<h2>$850</h2>
<ol>
<li>Complete Vehicle 3 Year coating.</li>
<li>Full Exterior Coating. </li>
<li>Interior detailing with coating protection.</li>
<li>Engine like new and protected.</li><br>
</ol>
<button class="btn">Schedule</button>
</div>
<div class="product" id="exterior">
<div class="productTitle">FULL 5 YEAR DETAILING</div>
<img class="productImage" src="engine.jpg" alt="Exterior car coating image">
<h2>$1.100</h2>
<ol>
<li>Multiple protection layers applied to the entire Vehicle.</li>
<li>Exterior included.</li>
<li>Engine and Interior included.</li>
<li>1 Maintenience product application included</li>
</ol>
<button class="btn">Schedule</button>
</div>
</section>
<footer>
<ul>
<li><a href="#">Contact</a></li>
<li><a href="#">Privacy</a></li>
<li><a href="#">Terms</a></li>
</ul>
<span>Copyright 2021, Daniel Cubides Car detailing</span>
</footer>
</div>
</div>
</body>
<script src="app.js"></script>
</html>