about.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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=DM+Serif+Display&family=Ubuntu:wght@300&display=swap" rel="stylesheet">
  
    
    <title>About Myself</title>
    <style>
        body{
            
            background-image: url("aboutbg.jpg");
            background-size: cover;
        }
        h1{
            font-family: 'Ubuntu', sans-serif;
            color: aliceblue;
            font-size: 4em;
            font-weight: bold;

        }
        p{
            font-family: 'Ubuntu', sans-serif;
            color: rgb(157, 204, 245);
            font-size: 1.5em;
            line-height: 22px;
            

        }
        .write{
            display: block;
            width: 60%;
            background-color: rgb(92, 92, 221);
            border-radius: 5%;
            border-width: 3px;
            border-color: rgb(129, 203, 240);
            padding: 20px;
            text-align: center;
            position: relative;
            left: 210px;
            
        }
        .about{
            text-align: center;
        }
        .btn{
            font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
            font-weight: bold;
            padding: 4px;
            display: block;
            width:8%;
            height: 6%;
            text-align: center;
            position: relative;
            top:150px;
            left:20px;
            background-color: rgb(117, 121, 134);
            border: 1px;
            border-color: black;
            border-radius: 10%;
        }
        a{
            font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
            font-weight: bold;
            text-decoration: none;
            color: black;
        }
        .btn:hover{
            background-color: rgb(140, 162, 235);
        }
    </style>
</head>
<body>
    <div class="left">
         <div class="about">
        <h1>About Myself</h1>
        </div>
        <div class="write">
        <p>
         I am from Pune, Maharashtra.
         <br>I am currently a part of atheletics club as well as dance club.<br>
         <br> I also like to read books and watch anime.(my fav is jjk).<br>
         <br> I have learnt a bit of cpp in class 11th and 12th.<br>
         <br> I am right now trying to learn html and css.<br>
         
         
         
        </p>
    </div>
    <div class="pic"></div>
    </div>
    <div class="btn"><a href="main.html">HOME</a></div>
</body>
</html>