In this project i can learn the new padding properties
padding : 0 10px 0 10px is used to sizing the particular path in the web page
Table creation
<thead> - Header of the table
<tr> - table row
<tbody> - table body
<th> - table heading
<td> - table data
code:
<table>
<thead>
<tr>
<th>Qualification</th>
<th>Board/University</th>
<th>School/Collage</th>
<th>Year Of passing</th>
<th>Marks</th>
</tr>
</thead>
<tbody>
<tr>
<td>CSE</td>
<td> ANNA UNIVERCITY</td>
<td> MUTHAYAMMAL ENGINEERING COLLEGE</td>
<td> 2023</td>
<td> 8.23%</td>
</tr>
<tr>
<td>12 th</td>
<td> STATE BOARD</td>
<td> SOWDABIKAA MATRICULATION HIGHER SECONDARY SCHOOL</td>
<td> 2019</td>
<td> 76.5%</td>
</tr>
<tr>
<td>10 th</td>
<td> STATE BOARD</td>
<td> SOWDABIKAA MATRICULATION HIGHER SECONDARY SCHOOL</td>
<td> 2017 </td>
<td> 95%</td>
</tr>
</tbody>
</table>
output:
Final project code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.layout {
border: 1px solid black;
height: 100vh;
width: 70%;
display: grid;
grid-template-columns: 1fr 2fr;
}
body {
display: flex;
justify-content: center;
background-color: rgb(150,40, 30);
}
.left {
border: 1px solid;
height: 100vh;
padding-left: 5px;
background-color: rgb(50, 60, 120);
color: white;
}
.right {
border: 1px solid;
height: 100vh;
padding: 0 10px 0 10px;
background-color: rgb(20, 90, 100);
box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}
.right h1{
text-align: center;
}
.right h2{
text-transform: uppercase;
}
img {
width: 100px;
height: 100px;
margin-top: 10px;
border-radius: 30px;
}
.profile {
display: flex;
justify-content: center;
}
table,th,td{
border: 1px solid;
border-collapse: collapse;
padding: 10px;
}
</style>
</head>
<body>
<div class="layout">
<div class="left">
<div class="profile">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ2MaW3ccWub_qE2K3QkO1BR8ZQG9ukgglkww&s"
alt="">
</div>
<h3> Contact</h3>
<hr>
<h4>India</h4>
<h4>New no 54 , old no 41/2 madaveli, chennai 600028</h4>
<h4>rselvakumar298@gmail.com</h4>
<h3>Skills</h3>
<hr>
<ul>
<li>Java </li>
<li>Blog Writer</li>
<li>Git</li>
<li>Gitlab</li>
<li>Html, CSS</li>
</ul>
<h3>Strenght</h3>
<hr>
<ul>
<li>Team builder</li>
<li>Motivational specker</li>
<li>Time Management</li>
</ul>
<h3>language</h3>
<hr>
<ul>
<li>English </li>
<li>Tamil</li>
</ul>
</div>
<div class="right">
<h1>SELVAKUMAR</h1>
<h2>Carrier Objectives</h2>
<hr>
<p>
A strong career objective for a fresher's resume should be concise, specific, and highlight both your skills and career aspirations.
It should clearly state the type of role you're seeking and how your skills can benefit the company.
</p>
<h2>Personal Details </h2>
<hr>
<ul>
<li>Marital Status : Single</li>
<li>Hobbies : Reading Book</li>
<li>Skill : Java , Git</li>
<ul>
<li>Father Name : Ramesh</li>
<li>Mother Name : Manjula</li>
<li>Sister Name : kalai Selvi</li>
</ul>
</ul>
`
<h2>Acadimic Qualification</h2>
<hr>
<table>
<thead>
<tr>
<th>Qualification</th>
<th>Board/University</th>
<th>School/Collage</th>
<th>Year Of passing</th>
<th>Marks</th>
</tr>
</thead>
<tbody>
<tr>
<td>CSE</td>
<td> ANNA UNIVERCITY</td>
<td> MUTHAYAMMAL ENGINEERING COLLEGE</td>
<td> 2023</td>
<td> 8.23%</td>
</tr>
<tr>
<td>12 th</td>
<td> STATE BOARD</td>
<td> SOWDABIKAA MATRICULATION HIGHER SECONDARY SCHOOL</td>
<td> 2019</td>
<td> 76.5%</td>
</tr>
<tr>
<td>10 th</td>
<td> STATE BOARD</td>
<td> SOWDABIKAA MATRICULATION HIGHER SECONDARY SCHOOL</td>
<td> 2017 </td>
<td> 95%</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
Output:
Top comments (0)