How to create "Our Team" page in HTML&CSS for website


<!DOCTYPE html>
<html>
<head>
<title>Our Team</title>
<style>
table
{
width: 1000px;
border:10px solid grey;
text-align: center;
margin: 0 auto;
margin-top:10px;
padding: 10px;
}
h1
{
color: #f5f5f5;
letter-spacing: 3px;
padding: 5px;
}
th
{
background: springgreen;
font-size: 16px;
color: #f0f;
letter-spacing: 2px;
padding: 5px; 
text-align: center;
}
td
{
text-align: center;
border: 1px solid black;
letter-spacing: 2px;
color: orangered;

}
tr:hover 
{
background-color:lightgrey;
}
</style>
</head>
<body>
<div style="overflow-x:auto;">
<table>
    <tr> 
    <td style ="background:blue;" colspan="6"><h1>MEET THE TEAM</h1><br><p style="color:red;"><em>Name of organisation</em></p></td>
</tr>
 <tr>
 <th>Sr No.</th>
 <th>Name</th>
 <th>Designation</th>
 <th>Qualification</th>
 <th>Contact No.</th>
    <th>Photo</th>
</tr>
<tr>
<td>1</td>
<td>Jasveer Singh</td>
<td>Lecturer Com.</td>
    <td>M.Com.,&nbsp;M Phil,&nbsp;MBA</td>
    <td>9418457523</td>
<td style= "width: 125px; height: 100px; display: block; margin: 0 auto;"><img src="foldername/filename.jpg"></td>
</tr>
<tr>
    <td>2</td>
<td>.........</td>
<td>.........</td>
    <td>..............</td>
    <td>.............</td>
    <td style= "width: 125px; height: 100px; display: block; margin: 0 auto;"><img src="/foldername/filename.jpg"></td>

</tr>

     

No comments:

Post a Comment