home page.html

<!DOCTYPE html>
<html>
    <head>

        <style>
            *{
    margin: 0;
    padding: 0;
}

.home{
    width: 1170px;
    margin: auto;
}
header{
    background:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url(hacker-2300772.jpg);
    height:100vh;
    background-size: cover;
    background-position: center center;
    position: relative;
}
.navbar{
    float:right;
    list-style: none;
    margin-top: 30px;
}
.navbar li{
    display:inline-flex;
}
.navbar li a{
    color:#fff;
    text-decoration: none;
    padding:5px 20px;
    font-size: 25px;
}
.navbar li a:hover{
    background: #fff;
    color:#333;
}
.logo img{
    width: 100px;
    float: left;
    height: auto;
}
#word{
    
    color: snow;
    font-weight: 550;
    position: absolute;
    font-size: 10em;
    overflow: hidden;
    top:250px;
    left:50px;
            }
#word1{
    left: -100%;
    position: relative;
    animation: anim 2s forwards 3s;
            }
            @keyframes anim{
                from{
                    left: -100%;
                }
                to{
                    left: 0%;
                }
            }
            
            
marquee{
    padding-top: 32%;
    color:beige;
    font-size: 40px;
}
    
    
        </style>
    </head>
    <body>
        <header>
        <div class="home">
            <div class="logo">
             <img src="hacker-1811568.png" height="150" width="150" style="border-radius: 100%" >
            </div>
            <ul class="navbar">
           <li><a href="#">HOME</a></li>
           <li><a href="threats.html">THREATS</a></li>
           <li><a href="prevention.html">PREVENTION</a></li>
            <li><a href="#">SCAMS</a></li>

            </ul>
            </div>
            <div id="word">
                <div id="word1">
                   CYBER SECURITY
                </div>
            </div>
            <marquee>MADE BY : BHOOPESH KHADA</marquee>
        </header>
   
        
      

    </body>
    
    </html>
     