tut33.html

<!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>Beore and After Pseudo Selectors</title>
    <link href="https://fonts.googleapis.com/css2?family=Azeret+Mono:wght@100&display=swap" rel="stylesheet">
    <style>
        body{
            margin: 0;
            padding: 0;
            background-color: black;
            color: white;
        }
        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.3;
        }
        .navigation{
            font-family: 'Azeret Mono', monospace;
            font-size: 20px;
            display: flex;
        }
        li{
            list-style: none;
            padding: 20px 23px;
        }
        section{
            height: 344px;
            margin: 3px 171px;
            /* padding: 31px 88px; */
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        h1{
            font-family: 'Azeret Mono', monospace;
            font-size: 3rem;
        }
        p{
            text-align: center;
        }
        /* section::after{
            content: "this is a content";
        } */
    </style>
</head>

<body>
    <header>
        <nav class="navbar">
            <ul class="navigation">
                <li class="item">Home</li>
                <li class="item">About Us</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. Mollitia commodi, asperiores necessitatibus ab vero, nisi molestiae aspernatur officiis consequatur enim, dolorum sit voluptates excepturi eos consectetur maiores deserunt cupiditate optio nemo quibusdam sint ea?</p>
        </section>
        <hr>
</body>

</html>