-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
75 lines (74 loc) · 3.67 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
<!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>Odin Project Landing Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav>
<img class="logo_icon" src="./images/logo.png" alt="main logo for this page">
<ul class="nav_bar">
<li><a href="#product-container">Product Information</a></li>
<li><a href="#quote-container">Testimonials</a></li>
<li><a href="#buy-container">Purchase</a></li>
</ul>
</nav>
<div class="content">
<div class="hero-container">
<div class="media-box">
<div class="information">
<h1>Welcome</h1>
<p class="message">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce aliquet interdum libero nec volutpat. Suspendisse ut ante vel velit commodo pharetra. Pellentesque efficitur sodales hendrerit. Proin ac sem massa. Suspendisse vitae augue sed tellus laoreet tincidunt id in nisl. Morbi consequat, leo ut tincidunt posuere, libero eros sollicitudin lorem.
</p>
<button class="info_button">Find Out More</button>
</div>
<img class="main_img" src="./images/salesman.png" alt="image of a snake oil salesman"/>
</div>
</div>
<div id="product-container">
<h2>Here is our collection of products</h2>
<div class="product-info">
<div class="product">
<img class="product_icon" src="./images/product_1.png" alt="Product 1">
<p class="product-text">Elixir Of Life</p>
</div>
<div class="product">
<img class="product_icon" src="./images/product_2.jpeg" alt="Product 2">
<p class="product-text">Sky Juice</p>
</div>
<div class="product">
<img class="product_icon" src="./images/product_3.jpeg" alt="Product 3">
<p class="product-text">Suggondeese</p>
</div>
<div class="product">
<img class="product_icon" src="./images/product_4.png" alt="Product 4">
<p class="product-text">Bofa Deese</p>
</div>
</div>
</div>
<div id="quote-container">
<h2>Quotes from our satisfied customers</h2>
<q>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce aliquet interdum libero nec volutpat. Suspendisse ut ante vel velit commodo pharetra. Pellentesque efficitur sodales hendrerit. Proin ac sem massa. Suspendisse vitae augue sed tellus laoreet tincidunt id in nisl. Morbi consequat, leo ut tincidunt posuere, libero eros sollicitudin lorem, ac dignissim urna neque vitae diam. Vestibulum lobortis massa vitae purus consectetur, quis sollicitudin elit sollicitudin.</q>
<p>--Lorem Ipsum</p>
</div>
<div id="buy-container">
<div class="buy-box">
<div class="buy-text">
<h2>Time to purchase some snake oil</h2>
<p>Click the button to order some snake oil</p>
</div>
<button class="purchase_button">Buy Some</button>
</div>
</div>
</div>
<footer>
<p>Copyright © <a href="https://github.com/bertrainn">Bertranne Lee</a>.
<br/>
In conjunction with <a href="https://www.theodinproject.com/">The Odin Project</a>.
</p>
</footer>
</body>
</html>