Complete-Web-Development-BootCamp/tut13.htm at master · SakshamAgg1709/Complete-Web-Development-BootCamp · GitHub

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
80
81
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Before and After pseudo selectors</title>
    <style>
        body{
            margin: 0;
            padding: 0;
            background:;
            color: white;
         }
        .navigation{
            font-size: 20px;
            display: flex;
        }

        li{
            list-style: none;
            padding: 20px 23px;
        }
section{
    height: 344px;
     display: flex;
     flex-direction: column;
     margin: 3px 190px;
     align-items: center;

     justify-content: center;

}
h1{
    font-size: 4rem;
}

p{
    text-align: center;
}
section::after{
    content: "This is a content";
}
/* section::before{
    content: "This is a content";
} */

header::before{
    content: "";
    background: url('https://source.unsplash.com/WLUHO9A_xik/1600x900') no-repeat center center/cover;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    top: 0;
    left: 0;
    opacity: 0.7;
    }

    </style>
</head>
<body>
    <header>
        <nav class="navbar">
            <ul class="navigation">
                <li class="class">Home </li>

                <li class="class">About</li>
                <li class="class">Services</li>
                <li class="class">Contact us</li>


        </ul>
        </nav>
    </header>
    <section>
       <h1> Welcome to coding world</h1>
       <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, ad perferendis dolore consectetur consequatur neque repellat temporibus totam eum possimus nulla voluptate non asperiores itaque enim obcaecati provident? Quos reprehenderit in autem odio? Reprehenderit adipisci cupiditate nemo saepe tenetur odio.</p>
    </section>
    <hr width="10px">
</body>
</html>