Display Letter Head of your college on a web page

HTML CodeTry it

<!-- Display Letter Head of your college on a web page -->

<body>
   <div class="book">
      <div>
         <div class="page">
            <table class="table">
               <tr class="tel">
                  <td><span>Tel: - </span>01765-2541XX<br /><span>mail: - </span>pimt.help@pimt.in</td>
               </tr>
               <tr class="name">
                  <td>Punjab Institute of Prectical</td>
               </tr>
               <tr class="subtitle">
                  <td>Best IT College</td>
               </tr>
               <tr class="background">
                  <td>PIMT</td>
               </tr>
               <tr class="website">
                  <td>www.pimt.in</td>
               </tr>
               <tr class="add">
                  <td>Near GPS, Mandi Gobindgarh Punjab (INDIA)</td>
               </tr>
            </table>
         </div>
      </div>
   </div>
</body>

CSS CodeTry it

body{
   display: flex;
   background-color: rgb(200,200,200);
   justify-content: center;
   align-items: center;
}
.book{
   width: 700px;
   padding-left: 10px;
   margin-left: 10px;
   background-color:white;
}
.page{
   border-left-style: dotted;
   border-width: 15px;
   border-color:rgb(200,200,200);
   height:800px;
}
.table{
   width: 100%;
   height: 100%;
}
.tel{
   text-align: right;
   font-size: 18px;
   color: rgb(200, 200, 200);
   height: 50px;
}
.tel td{
   padding: 10px;
   border-bottom: 2px solid black;
   border-bottom-left-radius: 100%;
   background-color: rgb(41, 4, 4);
}
.tel td span{
   color: rgb(200, 200, 200);
   font-size: 20px;
   font-weight: bold;
}
.name{
   text-align: center;
   font-size: 30px;
   height: 50px;
}
.name td{
   padding: 20px;
}
.subtitle{
   text-align: center;
   height: 10px;
}
.subtitle td{
   border-bottom: 2px solid black;
}
.background{
   font-size: 150px;
   color: rgba(41, 4, 4, 0.1);
   text-align: center;
}
.add{
   text-align: center;
}
.website{
   text-align: center;
   font-size: 18px;
   color: blue;
}
.website td{
   border-top: 2px solid black;
}
.add td{
   border-top: 5px solid black;
   border-radius: 100%;
   font-size: 18px;
}

OutputTry it

Comments

Popular posts from this blog

PHP Code to print first 10 Fibonacci Numbers

Create a simple HTML page to demonstrate the use of different tags

Use Tables to provide layout to your web page.