-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
201 lines (201 loc) · 10 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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Landing Page</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@900&family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/css/variables.css">
<link rel="stylesheet" href="assets/css/elements.css">
<link rel="stylesheet" href="assets/css/classes.css">
<link rel="stylesheet" href="assets/css/menu.css">
<link rel="stylesheet" href="assets/css/styles.css">
</head>
<body class="main-bg">
<input class="close-menu" type="checkbox" id="close-menu" aria-label="Close menu" role="button">
<label class="close-menu-label" for="close-menu" title="Close menu"></label>
<aside class="menu white-bg">
<div class="main-content menu-content">
<h1>
<a href="">LOGO</a>
</h1>
<nav>
<ul onclick="document.getElementById('close-menu').checked = false;">
<li><a href="#intro">Intro</a></li>
<li><a href="#about">About</a></li>
<li><a href="#top-3">Top 3</a></li>
<li><a href="#gallery">Gallery</a></li>
<li><a href="#work">Work</a></li>
<li><a href="#pricing">Pricing</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
</aside>
<div class="menu-spacing"></div>
<section id="intro" class="main-bg section">
<div class="main-content intro-content">
<div class="intro-text-content">
<h2>Welcome to the site</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sapiente accusamus animi distinctio nam error, excepturi quasi, corrupti dolorum iste magni consectetur doloribus a eligendi perferendis, minus architecto placeat sed accusantium!</p>
</div>
<div class="intro-img">
<img src="assets/img/drink-coffee.svg" alt="A illustration of a man drinking coffee.">
</div>
</div>
</section>
<section id="about" class="white-bg section">
<div class="main-content about-content">
<h2>About</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsa, reprehenderit vitae assumenda laudantium a voluptate quisquam pariatur fugit quibusdam! Non repudiandae reprehenderit consequatur vero minima rerum quae quisquam necessitatibus. Modi?</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Incidunt dolor doloremque odio. Delectus error, expedita quis unde excepturi quod aliquid doloremque corrupti cupiditate odio, perspiciatis, iusto est facere cumque similique.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolore, molestiae explicabo totam exercitationem distinctio dolorum et, officia iste consectetur asperiores ea. Error reprehenderit tenetur possimus facere neque id quod necessitatibus.</p>
</div>
</section>
<section id="top-3" class="main-bg section">
<div class="main-content top-3-content">
<h2>Top 3 Jobs</h2>
<p>Lorem ipsum dolor sit amet.</p>
<div class="grid">
<article>
<h3>Job 1</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis exercitationem dolorum sunt, ex aperiam veniam repellendus, dolores odio repellat modi vel provident sint reiciendis accusamus hic omnis ut quo animi.</p>
</article>
<article>
<h3>Job 2</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur itaque odit distinctio. Culpa saepe animi enim velit. Corrupti fugiat nihil aperiam vel. Praesentium, similique inventore iure maxime officiis quas eveniet.</p>
</article>
<article>
<h3>Job 3</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor illo voluptate enim ullam accusantium harum amet reprehenderit corporis, blanditiis saepe ducimus nihil consequuntur aut molestiae sit quo doloremque voluptatem! Porro!</p>
</article>
</div>
</div>
</section>
<section id="gallery" class="white-bg section">
<div class="main-content gallery-content">
<h2>Gallery</h2>
<p>Lorem ipsum dolor sit amet.</p>
<div class="grid">
<div class="gallery-img">
<img src="http://source.unsplash.com/random/360x360?r=1" alt="Random image from Unsplash.">
</div>
<div class="gallery-img">
<img src="http://source.unsplash.com/random/360x360?r=2" alt="Random image from Unsplash.">
</div>
<div class="gallery-img">
<img src="http://source.unsplash.com/random/360x360?r=3" alt="Random image from Unsplash.">
</div>
<div class="gallery-img">
<img src="http://source.unsplash.com/random/360x360?r=4" alt="Random image from Unsplash.">
</div>
<div class="gallery-img">
<img src="http://source.unsplash.com/random/360x360?r=5" alt="Random image from Unsplash.">
</div>
<div class="gallery-img">
<img src="http://source.unsplash.com/random/360x360?r=6" alt="Random image from Unsplash.">
</div>
</div>
</div>
</section>
<section id="work" class="main-bg section">
<div class="main-content work-content">
<h2>Work</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo illum vero necessitatibus ab tenetur eius dolore, a numquam sequi natus assumenda, totam enim ipsa itaque fugit. Praesentium ipsam sit iste!</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Molestiae, fugit culpa quisquam repellendus temporibus perspiciatis iusto! Praesentium libero velit perspiciatis delectus eum! Fugiat, illo! Cumque ducimus quos excepturi numquam maiores.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo saepe hic corrupti sit velit fuga veritatis eum voluptatem, facilis vel adipisci ullam dolor magni optio, corporis voluptatum quia dolorum vitae.</p>
</div>
</section>
<section id="pricing" class="white-bg section">
<div class="main-content pricing-content">
<h2>Pricing</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eos aperiam excepturi quod omnis alias fuga culpa blanditiis eligendi? Beatae amet dolorum voluptate quis veniam placeat vero repellat, cum a nihil.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore consequatur sequi, voluptates similique explicabo odit possimus ipsa ducimus! Odit possimus necessitatibus aperiam officia recusandae alias reiciendis molestias nostrum minus! Pariatur?</p>
<div class="responsive-table">
<table>
<caption>Pricing Table</caption>
<thead>
<tr>
<th>Title 1</th>
<th>Title 2</th>
<th>Title 3</th>
<th>Title 4</th>
<th>Title 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content 1.1</td>
<td>Content 2.1</td>
<td>Content 3.1</td>
<td>Content 4.1</td>
<td>Content 5.1</td>
</tr>
<tr>
<td>Content 1.2</td>
<td>Content 2.2</td>
<td>Content 3.2</td>
<td>Content 4.2</td>
<td>Content 5.2</td>
</tr>
<tr>
<td>Content 1.3</td>
<td>Content 2.3</td>
<td>Content 3.3</td>
<td>Content 4.3</td>
<td>Content 5.3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5">Foot</td>
</tr>
</tfoot>
</table>
</div>
</div>
</section>
<section id="contact" class="main-bg section">
<div class="main-content contact-content">
<div class="contact-text-content">
<h2>Contact Us</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Soluta nam commodi quis exercitationem recusandae! Odit libero perferendis excepturi, aut, illo deserunt, facilis ullam laudantium harum quibusdam qui. Officiis, nesciunt reiciendis!</p>
</div>
<div class="contact-img">
<img src="assets/img/contact-us.svg" alt="A illustration of a man drinking coffee.">
</div>
<div class="contact-form">
<fieldset class="form-grid">
<div class="form-group">
<label for="first-name">First Name</label>
<input autocomplete="off" placeholder="Your First Name" type="text" name="first-name" id="first-name">
</div>
<div class="form-group">
<label for="last-name">Last Name</label>
<input autocomplete="off" placeholder="Your Last Name" type="text" name="last-name" id="last-name">
</div>
<div class="form-group">
<label for="email">E-mail</label>
<input autocomplete="off" placeholder="Your E-mail" type="email" name="email" id="email">
</div>
<div class="form-group full-width">
<label for="message">Message</label>
<textarea autocomplete="off" placeholder="Your Message" name="message" id="message" cols="30" rows="10"></textarea>
</div>
<div class="form-group full-width">
<button type="submit">Send Message</button>
</div>
</fieldset>
</div>
</div>
</section>
<footer class="footer white-bg">
<p>
<a target="_blank" href="https://github.com/sergiodantasz/simple-landing-page">Developed by Sérgio Dantas. Click here to see the source code.</a>
</p>
</footer>
<a class="back-to-top" href="#intro">❯</a>
</body>
</html>