A tribute page website (HTML & CSS only) of Muhammad Ali Jinnah
HTML"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Quaid-e-Azam</title>
<link rel="stylesheet" href="CSS\styles.css">
</head>
<body>
<div class="main">
<div class="intro">
<h1 class="main-heading mh">Quaid-e-Azam</h1>
<h2 class="dates mh">1876-1948</h2>
<img class="photo"
src="data:image/jpeg;base64,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"
alt="Quaid e azam image">
<div class="introduction rm lri">
<h3 class="short-intro">Short Introduction</h3>
<p>Quaid e Azam is the founder of Pakistan. He worked for years and years for the betterment of Muslims.
He didn't care of any thing. He just wnted a seprate nation for muslims to live their lives
according to their own religion. They wanted a country where every has the freedom of doing
anything. And finally, Pakistan came into place on 14 August, 1947.</p>
</div>
</div>
<h3 class="history-heading">Here is the history of our great leader.</h3>
<div class="history">
<ul>
<li><b>1876</b> He born in Karachi</li>
<li><b>1906</b> He joined the politics officially</li>
<li><b>1913</b> He joined muslim league which wah the only party of Muslims at that time</li>
<li><b>1916</b> He did an agrement known as "Hindu-Muslim agrement"</li>
<li><b>1927</b> Jawahar lal nehro put a report</li>
<li><b>1928</b> Quaid-e-Azam replied and rejected nehru report</li>
<li><b>1937</b> He addressed all the muslims to be united for any challenge.</li>
<li><b>1940</b> He was the main head of Muslim conference at 23 March 1940</li>
<li><b>1945</b> He leaded the muslim league for elections</li>
<li><b>1946</b> He won the one sided elections</li>
<li><b>1947</b> He gave us the present of Pakistan</li>
<li><b>1947</b> He became the first gover general of Pakistan</li>
<li><b>1948</b> He went toward god in 1948</li>
</ul>
</div>
<p class="read-more rm lri">Read more about our Quaid by clicking <a class="lri"
href="https://en.wikipedia.org/wiki/Muhammad_Ali_Jinnah">Here</a></p>
</div>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
}
.main {
margin: 50px 100px;
background-color: #f5f3f0;
padding: 50px;
box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
}
.intro {
text-align: center;
}
.main-heading {
margin-bottom: 30px;
font-size: 100px;
color: #f5f3f0;
background-color: rgb(112, 112, 112);
}
.mh {
margin-bottom: 30px;
}
.dates {
font-size: 50px;
color: gray;
}
.photo {
border: solid black;
border-radius: 300px;
width: 300px;
height: 300px;
margin-bottom: 30px;
}
.short-intro {
margin-bottom: 10px;
}
.introduction {
padding: 30px;
}
.rm {
background-color: rgb(163, 163, 163);
}
.history {
padding-left: 100px;
margin: 20px 30px;
margin: 20px;
color: rgb(117, 116, 116);
}
.history-heading {
margin: 20px 30px;
font-size: 30px;
color: #707070;
}
.read-more {
text-align: center;
padding: 10px 30px;
font-size: 20px;
}
.lri {
color: white;
}

Comments
Post a Comment