-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
130 lines (116 loc) · 3.1 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Page title</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<!-- SECTION ONE -->
<!-- MENU -->
<div class="s1">
<div class="s1-header">
<div class="logo">
Header logo
</div>
<div class="links">
header link one
header link two
header link three
</div>
</div>
<!-- HERO MAIN TEXT -->
<div class="s1-mid">
<div class="s1-mid-left">
<h1>
This website is awesome
</h1>
<p>
This is the subtext that falls under the header.
it usually has less contrast.
Adding extra paragraphs will help it fill out the space and look
more legitimate.
</p>
<button>
Sign up
</button>
</div>
<div class="img-placeholder">
<img src="https://www.adorama.com/alc/wp-content/uploads/2018/11/landscape-photography-tips-yosemite-valley-feature.jpg" alt="mountain landscape">
</div>
</div>
</div>
<!-- SECTION TWO -->
<div class="s2">
<div class="s2-top">
<h2>
Some random information
</h2>
<div class="s2-top-gallery">
<div class="group-1">
<div class="box-1">
</div>
<p>
This is some subtext under an illustration or image
</p>
</div>
<div class="group-2">
<div class="box-2">
</div>
<p>
This is some subtext under an illustration or image
</p>
</div>
<div class="group-3">
<div class="box-3">
</div>
<p>
This is some subtext under an illustration or image
</p>
</div>
<div class="group-4">
<div class="box-4">
</div>
<p>
This is some subtext under an illustration or image
</p>
</div>
</div>
</div>
</div>
<!-- SECTION THREE -->
<div class="s3">
<p>
This is an inspiring quote meant
to be formatted in italics and
roughly one paragraph long.
</p>
<b>
- Moopy Moops
</b>
</div>
<!-- SECTION FOUR -->
<div class="s4">
<div class="cta">
<div>
<h3>
Call to action! It's time!
</h3>
<p>
Sign up to buy our product
using that button right
over there
</p>
</div>
<button>
Sign up
</button>
</div>
</div>
</div>
<!-- FOOTER -->
<div class="footer">
Copyright © The Odin Project 2021
</div>
</body>
</html>