Using just HTML and CSS, you can create a visually appealing and responsive design to honor someone special. This project is perfect for beginners looking to enhance their coding skills.
Key Features:
Key Features:
Header: A centered title that grabs attention.
Main Section: Includes text and images to tell the story.
Footer: Additional information or credits.
Why This Project?
Main Section: Includes text and images to tell the story.
Footer: Additional information or credits.
Why This Project?
Learn Basic HTML Structure: Understand the fundamental tags and elements.
CSS Styling: Apply styles to make your page stand out.
Responsive Design: Ensure your page looks great on all devices.
CSS Styling: Apply styles to make your page stand out.
Responsive Design: Ensure your page looks great on all devices.
HTML CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Tribute website</title>
<link rel="stylesheet" href="style.css"
</head>
<body>
<!--Background me Bluish type colour and border-->
<div class="container">
<div class="content">
<section class="topsection">
<div class="image_container">
<img src="./Images/apj.jpg" alt="Tribute"/>
</div>
<div>
<h1>A . P. J Abdul Kalam</h1>
<h4>1931-2015</h4>
</div>
</section>
<section class="about_section">
<h2>Missile Man of India</h2>
<p><b>Dr. A P J Abdul Kalam</b> was born to a poor Tamil Muslim family. He lived with his family in the temple city of Tamilnadu, Rameswaram, where his father, Jainulabdeen, had a boat and was an imam of a local mosque. At the same time, his mother, Ashiamma, was a housewife. Kalam had four brothers and one sister in his family, from which he was the youngest. Kalam's ancestors were wealthy traders and landowners and had vast land and property tracts. But with time, their business of ferrying pilgrims and trading groceries suffered huge losses due to the Pamban Bridge's opening. As a result, Kalam's family had become inadequate and struggled hard to make a living. At a tender age, Kalam had to sell newspapers to supplement his family income.
Although Kalam had average grades in school, he was very hard working and had an immense desire to learn. He spent a lot of time studying and had developed a particular interest in mathematics. Kalam left Schwartz higher secondary school after completing his early education and went to Saint Joseph's College, Tiruchirapalli. From Saint Joseph's College, he graduated in physics in 1954. He moved to Madras in 1955 to study aerospace engineering at Madras Institute of Technology.
</p>
</section>
<section class="biography_section">
<h3>Biographies</h3>
<ul>
<li>Dr. APJ Abdul Kalam was an Indian aerospace scientist who served as the 11th President of India from 2002 to 2007.</li>
<li>He was born on October 15, 1931, raised in Rameswaram, Tamil Nadu, and studied Physics and aerospace engineering.</li>
<li> APJ Abdul Kalam was elected as the 11th President of India in 2002 with the support of both the ruling Bharatiya Janata Party and the then opposition Indian National Congress party. </li>
<li>Also referred to as ‘People’s President’, APJ Abdul Kalam returned to his civilian life of education, writing, and public service after serving only one term.</li>
</ul>
</section>
<footer>
<p>Read more about APJ Abdul Kalam on <a href="https://en.wikipedia.org/wiki/A._P._J._Abdul_Kalam">Wikipedia</a></a></p>
</footer>
</div>
</div>
</body>
</html>
CSS CODE
/*Removing browser automatic margin*/
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
/*Adding Background Colour & Border*/
.container{
background-color: skyblue ;
min-height: 100vh;
border: 5px solid black;
}
/*Adding styling to content*/
.content{
max-width: 900px; /*It is maximum width*/
margin: 0 auto;
}
.topsection{
margin-top: 80px;
display:flex;
justify-content: space-between;
align-items: flex-end ;
}
.topsection h1 {
font-size: 30px;
font-weight: bold;
color: darkorange;
text-transform:uppercase
}
.topsection h4 {
text-align: end;
font-size: 20px;
}
.image_container{
border-radius: 50%;
overflow: hidden;
}
.image_container,img{
width:300px;
height:300px;
}
.about_section{
margin-top: 70px;
}
.about_section h2 {
font-size: 70px;
font-weight: 400;
margin-bottom:20px;
}
.about_section p {
font-size: 18px;
line-height: 40px;
letter-spacing: 1.5px;
text-align: justify;
}
.biography_section{
margin-bottom: 50px;
}
.biography_section h3{
margin-top:50px;
margin-bottom:30px;
}
.biography_section ul{
margin-left: 50px;
}
.biography_section li{
font-size: 18px;
margin-bottom: 20px;
}
footer{
margin:50px;
}
footer p{
text-align:end;
}
Comments
Post a Comment