-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathlayout-elements-lesson.html
72 lines (71 loc) · 4.02 KB
/
layout-elements-lesson.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Layout Elements Lesson</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/layout.css">
<link rel="stylesheet" href="css/layout-elements-lessons.css">
</head>
<body>
<div class="page-wrapper">
<header class="container justify-center">
<div class="row justify-space-between align-center">
<div class="column shrink">LOGO HERE</div>
<nav class="row justify-right">
<div class="column shrink">
<a href="#">Home</a>
</div>
<div class="column shrink">
<a href="#">About</a>
</div>
<div class="column shrink">
<a href="#">Contact</a>
</div>
</nav>
<div class="column shrink">
<button>Sign Up</button>
</div>
</div>
</header>
<section class="container hero-scene justify-center">
<div class="row">
<div class="column justify-center">
<div class="hero-text">
<h1>Welcome to our site!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut deleniti eos impedit labore odit, possimus quam velit vero? Asperiores consequatur dignissimos, ex explicabo ipsam iure magni quaerat rem sed ullam.</p>
</div>
</div>
<div class="column">
<img src="assets/img/kitten.jpeg" alt="kitten">
</div>
</div>
</section>
<section class="container features">
<div class="row">
<div class="column justify-center text-center">
<div class="feature-card">
<h2>Feature 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, autem, consequuntur cumque doloribus ea eaque eius enim eos esse est et eveniet excepturi fugiat id illum impedit ipsa iure laboriosam magnam maxime minima molestiae natus nemo neque nihil nobis non nostrum nulla obcaecati officia officiis omnis optio pariatur perferendis perspiciatis placeat praesentium quae quaerat quam quas qui quibusdam quidem quis quisquam quo quod recusandae repellat repudiandae rerum saepe sapiente sed sequi sint sit soluta suscipit tempora temporibus tenetur totam ullam unde ut vel veniam
veritatis vero voluptas voluptate voluptates voluptatibus voluptatum. Accusamus, adipisci, alias.</p>
</div>
</div>
<div class="column justify-center text-center">
<div class="feature-card">
<h2>Feature 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, autem, consequuntur cumque doloribus ea eaque eius enim eos esse est et eveniet excepturi fugiat id illum impedit ipsa iure laboriosam magnam maxime minima molestiae natus nemo neque nihil nobis non nostrum nulla obcaecati officia officiis omnis optio pariatur perferendis perspiciatis placeat praesentium quae quaerat quam quas qui quibusdam quidem quis quisquam quo quod recusandae repellat repudiandae rerum saepe sapiente sed sequi sint sit soluta suscipit tempora temporibus tenetur totam ullam unde ut vel veniam
veritatis vero voluptas voluptate voluptates voluptatibus voluptatum. Accusamus, adipisci, alias.</p>
</div>
</div>
<div class="column justify-center text-center">
<div class="feature-card">
<h2>Feature 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, autem, consequuntur cumque doloribus ea eaque eius enim eos esse est et eveniet excepturi fugiat id illum impedit ipsa iure laboriosam magnam maxime minima molestiae natus nemo neque nihil nobis non nostrum nulla obcaecati officia officiis omnis optio pariatur perferendis perspiciatis placeat praesentium quae quaerat quam quas qui quibusdam quidem quis quisquam quo quod recusandae repellat repudiandae rerum saepe sapiente sed sequi sint sit soluta suscipit tempora temporibus tenetur totam ullam unde ut vel veniam
veritatis vero voluptas voluptate voluptates voluptatibus voluptatum. Accusamus, adipisci, alias.</p>
</div>
</div>
</div>
</section>
</div>
</body>
</html>