CSS-Selectors/Practice.html at master · AshuSheikhCode/CSS-Selectors · 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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!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 pseudo selectors</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@600&family=Ubuntu:wght@300&display=swap"
        rel="stylesheet">
    <style>
        body {
            margin: 0px;
            padding: 0px;
            background-color: black;
            color: white;

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

        .navigation {
            font-family: 'Ubuntu', sans-serif;
            font-size: 20px;
            font-weight: bold;
            display: flex;
            /* align-items: center; */
            justify-content: center;

        }

        li {
            list-style: none;
            padding: 20px 23px;
        }

        section {
            font-family: 'Baloo 2', cursive;
            height: 344px;
            margin: 3px 230px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        /* section::before{
        content: "This is content before";
       }
       section::after{
        content: "This is a content after";
       }
        */
        h1 {
            font-size: 4rem;
        }

        p {
            text-align: center;
        }
    </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>
    </header>
    <section>
        <h1>Welcome to Coding World</h1>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iste, corrupti? Sint, soluta enim at quia rem quae
            corrupti iure id delectus. Natus, earum. Lorem ipsum dolor sit amet consectetur adipisicing elit. Id numquam
            sed pariatur.</p>
        </section>

</body>

</html>