-
Notifications
You must be signed in to change notification settings - Fork 0
/
16_vh_vw.html
74 lines (66 loc) · 2.01 KB
/
16_vh_vw.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 name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vh & Vw Units</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
header {
background: #4f4f4f url('/images/miss-with-book.jpeg') no-repeat center center/cover;
color: #fff;
height: 100vh;
text-align: center;
padding: 2rem;
padding-top: 15rem;
}
header h1 {
font-size: 3rem;
}
header p {
margin: 1rem 0;
}
.btn {
display: inline-block;
text-align: center;
text-decoration: none;
color: #333333;
background: #f4f4f4;
padding: 0.75rem 2rem;
margin-top: 2rem;
}
section {
padding: 2rem;
}
@media(max-height: 450) {
header {
padding-top: 5rem;
}
}
</style>
</head>
<body>
<header>
<h1>Welcome to my website</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia excepturi velit assumenda
voluptates quos ipsam amet dolores doloribus vitae nobis totam animi voluptatum quidem odit
possimus accusantium reprehenderit, nihil quis.
</p>
<a href="" class="btn">see more</a>
</header>
<section>
<h3>About my person</h3>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolores, placeat. Libero soluta saepe explicabo eaque vel nulla eveniet, perferendis dolores voluptatum vitae a dolorum mollitia. Nulla sint eveniet blanditiis inventore officiis, perferendis quaerat quod enim. Autem architecto nihil delectus porro illo quis harum voluptatum atque quibusdam corrupti dicta vel molestiae nam nesciunt nulla inventore odio alias quam, placeat consequatur obcaecati!
</p>
</section>
</body>
</html>