-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathPseudoSelectors.html
75 lines (73 loc) · 2.32 KB
/
PseudoSelectors.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
<!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>Pseudoselctors for before and after</title>
<style>
body{
margin:0;
padding:0;
background-color: black;
color:aliceblue;
}
header::before{
background: url('https://source.unsplash.com/collection/190727/1600x900') no-repeat center center/cover;
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:-1;
opacity:0.4;
}
.navigation{
font-size: 14px;
display: flex;
}
li{
list-style: none;
padding: 2px 34px;
}
section{
height:350px;
/* border: 2px solid aqua; */
margin:3px 23px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center; /* Vertically centres the content */
}
/* section::before{
content:'This content will come before the section'
} */
h3{
font-size: 4rem;
margin: 45px 4px;
}
p{
text-align: center;
}
</style>
</head>
<body>
<header>
<nav>
<ul class="navigation">
<li class="item">Home</li>
<li class="item">About</li>
<li class="item">Services</li>
<li class="item">Contact Us</li>
</ul>
</nav>
</header>
<section>
<h3>Welcome To My Website</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde recusandae nihil beatae ipsa fuga molestias facere
dolores, dignissimos, doloribus dolorem natus reprehenderit? Consequatur enim neque eum officia autem esse ut tempore
alias ipsum repudiandae! Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo minima labore exercitationem veritatis ipsum eum velit, suscipit impedit, maiores ut et a rerum iusto beatae doloremque? Culpa eveniet aperiam illo vitae sapiente quisquam quibusdam. </p>
</section>
</body>
</html>