-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy path16_vh_vw.html
69 lines (61 loc) · 2 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
<!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>VH and VW</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
header {
background: #333 url("./images/nature3.jpeg") no-repeat center center/cover;
color: #fff;
height: 100vh;
/* width: 50vw; */
text-align: center;
padding: 2rem;
padding-top: 15rem;
}
header h1 {
font-size: 3rem;
}
header p {
margin: 1rem 0;
}
.btn {
display: inline-block;
text-decoration: none;
background: #f4f4f4;
color: #333;
padding: 0.75rem 2rem;
border-radius: 5px;
}
section {
padding: 2rem;
}
@media(max-height:450px) {
header {
padding-top: 5rem;
}
}
</style>
</head>
<body>
<header>
<h1>Welcome to our website</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magnam blanditiis eligendi assumenda maxime suscipit beatae possimus repudiandae aperiam dolore mollitia?</p>
<a href="#" class="btn">Find out more</a>
</header>
<section>
<h3>About Our Company</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A facilis eveniet obcaecati fugit. Itaque praesentium atque aliquam dicta ea cupiditate quasi quae vitae natus nihil pariatur molestiae ab enim commodi maxime odit laboriosam, expedita reiciendis officiis cum assumenda repellat quisquam ullam. Vel commodi repellat laudantium repellendus, voluptas nisi eos quisquam.</p>
</section>
</body>
</html>