-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdeep25.html
80 lines (73 loc) · 2.32 KB
/
deep25.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
<!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>Before and after pesudo selector</title>
<style>
body{
/* background-color: rgb(21, 21, 21); */
/* color:rgb(6, 46, 53); */
padding:0px;
margin:0px;
display: flex;
color:blueviolet;
}
header::before{
position:absolute;
background:url('https://source.unsplash.com/collection/190727/1600x900')no-repeat center center/cover;
content: "";
width:100%;
height:100%;
z-index:-1;
top:0px;
left:0px;
opacity:0.9;
}
section{
display: flex;
flex-direction: column;
margin:3px 23px;
align-items: center;
/* border: 2px solid red; */
justify-content: center;
}
/* section::before{
content:"This is content before section";
}*/
.navigation{
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
display: flex;
flex-direction:row;
font-size: 22px;
}
li{
list-style: none;
padding:34px 23px;
}
</style>
</head>
<body>
<header>
<nav class="navbar">
<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>
<hr>
<section>
<h1>Welcome to CSS before and after Selectors page<hr></h1>
<h3>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptate aliquid commodi earum quibusdam nostrum odit modi, totam at quia dolorem. Dolore laudantium sit ad earum quisquam officia consequatur voluptates accusantium esse. Saepe, maiores corrupti. ipsum dolor sit amet, consectetur adipisicing elit. Dolores, id quidem quas corporis eum temporibus illum nesciunt? Dolore dolorem natus vitae ex assumenda obcaecati, accusantium, molestiae delectus voluptate odit magni.
</p>
</h3>
</section>
</header>
<hr>
</body>
</html>