Crie uma página de tributo usando HTML e CSS
Uma página de homenagem é basicamente uma visão geral de alguém que admiramos em nossa vida. Neste artigo, estamos criando uma página de tributo ao Late APJ Abdul Kalam Sir usando HTML e CSS. Vamos adicionar uma imagem dele no centro (abaixo do título) e criar uma caixa abaixo dessa imagem. Dentro dessa caixa, escreveremos algumas de suas realizações e detalhes. Usaremos tag div e tag p para escrever os detalhes e a tag img para a imagem. Então, usando CSS, vamos alinhar e embelezar o design.
Abordagem:
- No elemento <body> , daremos o título da página usando a tag h1, depois adicionaremos uma imagem dele na tag img com alguma legenda. Vamos criar outra tag div e escrever todo o conteúdo (usando tags p ). Também fornecemos o ID para cada tag para que possamos embelezar o design usando o respectivo-ID no arquivo CSS.
- Na seção CSS, basicamente mantivemos um design central e usamos a sombra de caixa para criar o efeito de caixa em torno do conteúdo principal.
Exemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* Styling the body element
like body color and margin */
body {
background-color: #00FA9A;
margin: 20%;
}
/* Styling the Title and giving
shadow to the title */
#title {
text-align: center;
text-shadow: 5px 5px 10px white;
font-size: 7vh;
}
/* Setting width and display
type of image */
img {
display: inline-block;
width: 100%;
}
/* Setting font color and font
size of the image-caption */
#caption {
font-size: 17px;
font-family: Gill Sans;
color: black;
}
/* Styling the content of the page like-
padding, font-soze, font color etc.*/
div#tribute-data {
background-color: rgb(46, 139, 87, 0.25);
box-shadow: 20px 20px 20px #98FB98;
font-family: Georgia;
padding: 25px 25px;
margin: 11px;
margin-top: 50px;
}
/* Styling the title of the content */
h1.title-APJ {
font-size: 35px;
color: white;
text-align: center;
text-shadow: 5px 5px 10px black;
}
/* Styling the link provided at the end */
#tribute-link {
text-decoration: none;
color: black;
}
</style>
</head>
<body>
<main id="main">
<!-- Title of the page -->
<h1 id="title">
A. P. J. Abdul Kalam
</h1>
<div id="img">
<!--Image of the Tribute Person-->
<img src="APJ Kalam.png" id="image"
alt="Error Loading Image">
<small id="caption">
Great Indian scientist and
politician who played a leading
role in the development of India’s
missile and nuclear weapons
programs.
</small>
</div>
<div id="tribute-data">
<!--Achievements and other
details of the person-->
<h1 class="title-APJ">
About the Legend
</h1>
<p>
☛ A.P.J. Abdul Kalam, in full
Avul Pakir Jainulabdeen Abdul Kalam,
was born on October 15, 1931, in
Rameswaram, Tamil Nadu, India.<br><br>
☛ He served as the 11th President
of India from 2002 to 2007.<br><br>
☛ Kalam earned a degree in
aeronautical engineering from the
Madras Institute of Technology and in
1958 joined the Defence Research and
Development Organisation (DRDO).<br><br>
☛ In 1969, he moved to the Indian
Space Research Organisation, where he
was project director of the SLV-III, the
first satellite launch vehicle that was
both designed and produced in India.
<br><br> ☛ Rejoining DRDO in 1982,
Kalam planned the program that produced
a number of successful missiles, which
helped earn him the nickname <strong>
“Missile Man.”</strong>
<br><br> ☛ Among those successes
was Agni, India’s first intermediate-range
ballistic missile, which incorporated
aspects of the SLV-III and was launched
in 1989.
<br><br> ☛ He also played a
pivotal organisational, technical,
and political role in India's Pokhran-II
nuclear tests in 1998, the first since
the original nuclear test by India in 1974.
<br><br> ☛ From 1992 to 1997 Kalam
was scientific adviser to the defense
minister, and he later served as principal
scientific adviser (1999–2001) to the
government with the rank of cabinet minister.
<br><br> ☛ His prominent role in
the country’s 1998 nuclear weapons tests
solidified India as a nuclear power and
established Kalam as a national hero,
although the tests caused great concern
in the international community.
<br><br> ☛ In 1998 Kalam put
forward a countrywide plan called
Technology Vision 2020, which he described
as a road map for transforming India from
a less-developed to a developed society
in 20 years. The plan called for, among
other measures, increasing agricultural
productivity, emphasizing technology as
a vehicle for economic growth, and
widening access to health care and
education.
<br><br> ☛ Kalam received <b>7</b>
honorary doctorates from <b>40</b>
universities. The Government of India
honoured him with the <b>Padma Bhushan
in 1981</b> and the <b>Padma Vibhushan
in 1990</b> for his work with ISRO and
DRDO and his role as a scientific advisor
to the Government.
<br><br> ☛ In 1997, Kalam received
India's highest civilian honour, the
Bharat Ratna, for his contribution to
the scientific research and modernisation
of defence technology in India.
<br><br> ☛ In 2013, he was the
recipient of the Von Braun Award from
the National Space Society "to recognize
excellence in the management and leadership
of a space-related project".
<br><br> ☛ While delivering a
lecture at the Indian Institute of
Management Shillong, Kalam collapsed and
died from an apparent cardiac arrest on
<b>27 July 2015</b>, aged 83.
<br><br> ☛ Wheeler Island, a
national missile test site in Odisha, was
renamed <b>Kalam Island</b> in September
2015.
<br><br> ☛ A prominent road in
New Delhi was renamed from Aurangzeb
Road to <b>Dr APJ Abdul Kalam Road</b>
in August 2015.
<br><br> ☛ In February 2018,
scientists from the Botanical Survey
of India named a newly found plant
species as Drypetes kalamii, in his
honour.
<br><br><br>
</p>
</div>
<br>
For more information,
check out
<a id="tribute-link" href="#">
<b>A.P.J. Abdul Kalam</b> on Wikipedia. [
<small>Developed by @<a href="#">
Sushant Gaurav.</a></a>
</small>]
</main>
</body>
</html>
Saída:
Navegador compatível:
- Google Chrome
- Microsoft borda
- Raposa de fogo
- Ópera
- Safári
As postagens do blog Acervo Lima te ajudaram? Nos ajude a manter o blog no ar!
Faça uma doação para manter o blog funcionando.
70% das doações são no valor de R$ 5,00...
Diógenes Lima da Silva