Skip to content

Commit 362a696

Browse files
AshuAsadAshuAsad
committed
Complete
0 parents  commit 362a696

1 file changed

Lines changed: 95 additions & 0 deletions

File tree

‎Practice.html‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Before and after pseudo selectors</title>
9+
<link rel="preconnect" href="https://fonts.googleapis.com">
10+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11+
<link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@600&family=Ubuntu:wght@300&display=swap"
12+
rel="stylesheet">
13+
<style>
14+
body {
15+
margin: 0px;
16+
padding: 0px;
17+
background-color: black;
18+
color: white;
19+
20+
}
21+
header::before{
22+
background: url('https://source.unsplash.com/collection/190727/1600x900') no-repeat center center/cover;
23+
opacity: 0.2;
24+
content: "";
25+
position: absolute;
26+
top: 0;
27+
left: 0;
28+
width: 100%;
29+
height: 100%;
30+
z-index: -1;
31+
}
32+
33+
.navigation {
34+
font-family: 'Ubuntu', sans-serif;
35+
font-size: 20px;
36+
font-weight: bold;
37+
display: flex;
38+
/* align-items: center; */
39+
justify-content: center;
40+
41+
}
42+
43+
li {
44+
list-style: none;
45+
padding: 20px 23px;
46+
}
47+
48+
section {
49+
font-family: 'Baloo 2', cursive;
50+
height: 344px;
51+
margin: 3px 230px;
52+
display: flex;
53+
flex-direction: column;
54+
align-items: center;
55+
justify-content: center;
56+
}
57+
58+
/* section::before{
59+
content: "This is content before";
60+
}
61+
section::after{
62+
content: "This is a content after";
63+
}
64+
*/
65+
h1 {
66+
font-size: 4rem;
67+
}
68+
69+
p {
70+
text-align: center;
71+
}
72+
</style>
73+
</head>
74+
75+
<body>
76+
<header>
77+
<nav class="navbar">
78+
<ul class="navigation">
79+
<li class="item">Home</li>
80+
<li class="item">About</li>
81+
<li class="item">Services</li>
82+
<li class="item">Contact Us</li>
83+
</ul>
84+
</nav>
85+
</header>
86+
<section>
87+
<h1>Welcome to Coding World</h1>
88+
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iste, corrupti? Sint, soluta enim at quia rem quae
89+
corrupti iure id delectus. Natus, earum. Lorem ipsum dolor sit amet consectetur adipisicing elit. Id numquam
90+
sed pariatur.</p>
91+
</section>
92+
93+
</body>
94+
95+
</html>

0 commit comments

Comments
 (0)