-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
89 lines (89 loc) · 3.91 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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- META -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- BIG SHOULDERS DIPLAY FONT LINK -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700&display=swap" rel="stylesheet">
<!-- LATO FONT LINK -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
<!-- LINK CSS -->
<link rel="stylesheet" href="style.css">
<!-- TITLE -->
<title>Product Landing Page</title>
</head>
<body>
<!-- HEADER -->
<header id="header">
<div class="full-logo">
<img src="images/logo.svg" alt="" id="header-img" width="90px">
<h2>Roady</h2>
</div>
<!-- NAV-BAR -->
<nav id="nav-bar">
<div class="nav-link">
<a href="#form">Features</a>
<a href="#works">How it works</a>
<a href="#pricing">Pricing</a>
</div>
</nav>
</header>
<!-- ARTICLE -->
<article>
<!-- FORM -->
<form action="https://www.freecodecamp.com/email-submit" id="form">
<input type="email" name="" id="email" placeholder="Enter your email address" required>
<input type="submit" value="Submit" id="submit">
</form>
<!-- FEATURES -->
<div id="features">
<!-- BMW -->
<div id="bmw">
<img src="images/bmw-logo.svg" alt="" width="100px">
<p>Bayerische Motoren Werke AG, commonly referred to as BMW , is a German multinational corporation which produces luxury vehicles and motorcycles.</p>
</div>
<!-- LAMBO -->
<div id="lambo">
<img src="images/lamborghini.svg" alt="" width="100px">
<p>Automobili Lamborghini S.p.A. is an Italian brand and manufacturer of luxury sports cars and SUVs based in Sant'Agata Bolognese, the company is owned by the Volkswagen Group through its subsidiary Audi.</p>
</div>
<!-- LEXUS -->
<div id="lexus">
<img src="images/lexus.svg" alt="" width="100px">
<p>Lexus is the luxury vehicle division of the Japanese automaker Toyota, the Lexus brand is marketed in more than 70 countries and territories worldwide and is Japan's largest-selling make of premium cars.</p>
</div>
</div>
<div id="works">
<!-- IFRAME -->
<iframe width="560" height="315" src="https://www.youtube.com/embed/io_cJUZREN4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<!-- VIDEO -->
<video src=""></video>
</div>
<!-- PRICING -->
<div id="pricing">
<div id="bmw-price">
<h4>BMW</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio, quis. </p>
<p id="dollar"><b>9000$</b></p>
<button id="bmw-button">Select</button>
</div>
<div id="lambo-price">
<h4>Lamborghini</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio, quis. </p>
<p id="dollar"><b>8000$</b></p>
<button id="lambo-button">Select</button>
</div>
<div id="lexus-price">
<h4>Lexus</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio, quis. </p>
<p id="dollar"><b>5000$</b></p>
<button id="lexus-button">Select</button>
</div>
</div>
</article>
</body>
</html>