-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
115 lines (103 loc) · 3.28 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
<!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 Landing Page</title>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<!-- Start Navbar here -->
<nav class="navbar">
<div class="logo">
<h1>
<a href="index.html"> Header Logo </a>
</h1>
</div>
<ul id="menu">
<li><a href="#">Header link one</a></li>
<li><a href="#">Header link two</a></li>
<li><a href="#">Header link three</a></li>
</ul>
<div class="menuToggle">
<input type="checkbox" />
<span></span>
<span></span>
<span></span>
</div>
</nav>
<!-- Stop Navbar here -->
<!-- banner start here -->
<section class="banner">
<div class="content-1">
<h2>This website is awesome</h2>
<p>
This website has some subtext that goes here under the main title.
It's a smaller font and the color is lower contrast
</p>
<button>Sign up</button>
</div>
<div class="content-2">
<span>This is a place holder for an image</span>
</div>
</section>
<!-- end banner here -->
<!-- Start information here -->
<section class="information">
<h2>Some random information.</h2>
<ul class="info-content">
<li>
<div class="info-content-square"></div>
<p>this is some subtext under an illustration or image</p>
</li>
<li>
<div class="info-content-square"></div>
<p>this is some subtext under an illustration or image</p>
</li>
<li>
<div class="info-content-square"></div>
<p>this is some subtext under an illustration or image</p>
</li>
<li>
<div class="info-content-square"></div>
<p>this is some subtext under an illustration or image</p>
</li>
</ul>
</section>
<!-- End of information here -->
<!-- Start article here -->
<article>
<div class="article-content">
<p>
Impossible is just a big word thrown around by small men who find it
easier to live in the world they’ve been given than to explore the
power they have to change it. Impossible is not a fact. It’s an
opinion. Impossible is not a declaration. It’s a dare. Impossible is
potential. Impossible is temporary. Impossible is nothing.
</p>
<span class="article-background-quote">-Muhammad Ali</span>
</div>
</article>
<!-- End article here -->
<!-- Start action here -->
<section class="action">
<div class="action-content">
<div class="action-content-text">
<span>Call to action! It's time!</span>
<p>
Sign up for our product by clicking that button right over there!
</p>
</div>
<button>Sign up</button>
</div>
</section>
<!-- End action here -->
<!-- Start footer here -->
<footer>
<p>Copyright © The Odin Project 2022</p>
</footer>
<!-- End footer here -->
<script src="js/script.js"></script>
</body>
</html>