About.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>About Us</title>
    
    <style>
      *{
        margin: 0;padding: 0;
        box-sizing: border-box;
      }
      body{
        background: #E8FBFFA6;
        text-decoration: none;
      }
      
       .menu{
         display:inline-flex;
         list-style: none;
        
         align-items: center;
        /* background:rgb(76,175,80);*/
         background:#FD0000;
         background-blend-mode: darken;
         border-bottom: 5px solid black;
         width:100vw;
         position: sticky;
         top: 0;
       }
       
       .menu a{
         text-decoration: none;
         -webkit-text-stroke-width: 2px;
         color: #333;
       }
       
       .menu img{
         width: 60px;
         height: 60px;
         border:5px solid white;
         border-radius: 25px;
       }
       
       .menu li{
         margin: 30px;
         font-size:40px;
         color: #333;
       }
      
     .diff{
        -webkit-text-fill-color: white !important;
        -webkit-text-stroke-color: white;
        -webkit-text-stroke-width: 2px;
      }
      
      /*------section--------*/
      
      
      section{
        display:block;
      }
      
      section div{
        -webkit-text-stroke-width: 2px;
        
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 10px;
        margin-bottom: 30px;
        font-size: 55px;
        color:#00CFFD;
      }
      
      .section img{
        width: 937px;
        height:1200px;
        border: 2px solid black;
      }
      
      section h5{
        border-bottom: 5px solid black;
        color: white;
        letter-spacing: 3px;
      }
      
      .sec1{
        background:#FD0000;
        min-height: 500px;
        max-height: 5000px;
        padding-left: 8px;
        border:5px solid black;
        text-decoration: none;
        list-style: none;
      }
      
      section li{
      border-top: 5px solid black;
      color: white;
      letter-spacing: 3px;
      }
      
      /*---footer----*/
      
    .foot{
      -webkit-text-stroke-width: 1px;
      background: #FD0000;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 35px;
      border-top: 5px solid black;
      position: sticky;
      bottom: 0;
    }
    </style>
    
</head>


<body>
  <nav class="menu">
    <li><a href="index.html"><img src="logo2.png"></a></li>
    <li class="diff">About Us</li>
    <li><a href="index.html">HOME</a></li>
    <li><a href="mailto:sujeetkgupta5263@gmail.com?subject=my problems&body=write your problems">CONTACT US</a></li>
  </nav>
  <section>
     <div class="section">
       <img src="logo.jpg">
     </div>
    <div class="sec1">
    <h5>ABOUT THE HEAD OF <abbr title="Modern & Advanced Fundamental Institution">MAFI</abbr></h5>
   Name : Sujeet Kr Gupta
   <br><hr>
   Qualification : B.Sc (Department of Zoology)
   <br><hr>
   Location : Patesar Chand Kaimur (Bhabua) Bihar
   <br><hr>
   Contact : 6207744806
   <br><hr>
   E-mail : sujeetkgupta5263@gmail.com
   <br><hr>
   <li>Aim : keep learning & keep growing</li>
  <!---- Teaching-Experence : ---->
  
    </div>
   
  </section>
  
  <footer class="foot">
   <center> copyright 2021 &copy;</center>
  </footer>

</body>

</html>