Wpd Html Microproject codes 2 sem msbte

Source- Unsplash


 I had created a video on how to create a micro-project for msbte Html( WPD) although I thought to give proper HTML so today I will be sharing Msbte WPD micro-project so let"s get started.

SO you want 3 images I will share link download from them here 

Download


So now let's move towards Source code 

HTML SOURCE CODE-


<!DOCTYPE html>
<html lang="en" style="background-color: cornsilk;">
<head>

    <link rel="icon" href="favicon.png" type="image/gif" sizes="16x16">
    <title>Brillant Academy</title>
    <style>
        .topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #ec886f;
  color: white;
}
.container {
  position: relative;
  text-align: center;
  color: white;
}
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.bottom-left {
  position: absolute;
  bottom: 8px;
  left: 16px;
}
.bottom-right {
  position: absolute;
  bottom: 8px;
  right: 16px;
}
  </style>
</head>
<body>
    <header><!-- start header-->
        <div style="width: 100%;">
            <div style="width: 30%;">
                <img src="logo.png" width="150px">
                <h5 style="color: #ec886f;padding-top: 10%;
                float: right;">WE PRESERVE YOUR FUTURE</h5>
            </div>
        </div>
        <div class="topnav" style="margin-bottom: -29px;">
            <a class="active" href="#home">Home</a>
            <a href="#contact">Admission Enquiry</a>
            <p style="float: right;color:whitesmoke"><marquee >
              <a href="admission.html">Admissions for 2021-2022 are open !</a><b:else/></b:if> 
              <sup style='background-color: #fcff01;'><span style='color: red; font-family: verdana;'>now!</span></sup></span></marquee> 
        </div>    
    </header><!-- end header -->
    <section>
        <div class="container">
            <img src="school.jpg" height="500px" width="100%">
            <div class="centered">
                <p style="font-size: 400%; color:snow;">Welcome to Brilliant Academy</p>
            </div>
            <div class="bottom-left">
              <p> <h1>Mission:</h1>
                We prepares students to understand, contribute to,<br> and succeed in a rapidly
                changing society thus, making the<br> world better and more just place.
              </p>
            </div>
            <div class="bottom-right">
              <p> <h1>Vision:</h1>
                We are and will be a school where designed and social research drive <br> 
                approaches to studing issue of our time such as democracy, economic <br>
                empowerment, urbanization, migration and globalization.
              </p> 
            </div>
        </div>        
    </section>

    <footer> 
      <table style="text-decoration: none;width: 100%;background-color: black;
      margin-top: -1%;padding-bottom: 10%;padding-top: 6%;">
        <th scope="col" style="width: 50%; color: snow;">We gaurantee brightest future for your pal.</th>
        <th scope="col" style="float: right; width: 50%;color: snow;">All rights reserved 2021&#169;.</th>
        <tr style="color: snow;">
          <td style="padding-left: 20%;" id="contact">Contact Us</td>
        </tr>
        <tr style="color: snow;">
          <td style="padding-left: 17%;">Mob Num: 9876736677<br>
              Email: brilliantaca@yahoo.com
          </td>

        </tr>
      </table>
    </footer>
</body>
</html>

Download code

The output of the code-



Comments

Post a Comment

If you have any query, please let us know