Skip to content

Commit 2a6b1b0

Browse files
NarendraKoya999NarendraKoya999
authored
Added HTML and CSS Files
Designed Tribute Page using HTML and CSS
1 parent 07428dd commit 2a6b1b0

2 files changed

Lines changed: 129 additions & 0 deletions

File tree

‎Build A Tribute Page/index.html‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Tribute Page - Dr. Norman Borlaug</title>
8+
<link rel="stylesheet" href="styles.css">
9+
</head>
10+
11+
<body>
12+
13+
<div class="container">
14+
<div class="content">
15+
16+
<h1 class="title">Dr. Norman Borlaug</h1>
17+
18+
<p class="subtitle">The man who saved a billion lives</p>
19+
20+
<figure>
21+
<img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute.jpg" alt="Dr. Norman Borlaug" class="img">
22+
<figcaption>Dr. Norman Borlaug, third from the left, trains biologists in Mexico on how to increase wheat yields - part of his life-long war on hunger.</figcaption>
23+
</figure>
24+
25+
<p class="quote">Here's a timeline of Dr. Borlaug's life:</p>
26+
27+
<ul>
28+
<li><strong>1914</strong> - Born in Cresco, Iowa</li>
29+
<li><strong>1933</strong> - Leaves his family's farm to attend the University of Minnesota, thanks to a Depression era program known as the "National Youth Administration"</li>
30+
<li><strong>1939</strong> - Receives a Ph.D. in Genetics from the University of Colorado</li>
31+
<li><strong>1940</strong> - Writes a book with his colleagues at the University of Minnesota and marries his wife of 69 years, Margret Gibson. They have three children</li>
32+
<li><strong>1941</strong> - Divorces his wife's homemaker and marries his second wife</li>
33+
<li><strong>1942</strong> - Realizes that he must have electoral votes and becomes a professor at Texas A&M University</li>
34+
<li><strong>1943</strong> - Leaves his family to become his true love's second marriage</li>
35+
<li><strong>1944</strong> - Realizes that he must have electoral votes and becomes a professor at the University of Texas at Austin</li>
36+
<li><strong>1945</strong> - Receives his Ph.D. in Medicine and dies at the age of 95</li>
37+
</ul>
38+
39+
<blockquote>
40+
"It is during our darkest moments that we must focus to see the light."
41+
</blockquote>
42+
43+
</div>
44+
</div>
45+
46+
<footer>
47+
If you have time, you should read more about this incredible human being on his <a id="tribute-link" href="https://en.wikipedia.org/wiki/Norman_Borlaug" target="_blank">Wikipedia entry</a>.
48+
</footer>
49+
</body>
50+
51+
</html>

‎Build A Tribute Page/styles.css‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
*{
2+
box-sizing: border-box;
3+
}
4+
5+
body {
6+
font-family: 'Roboto', sans-serif;
7+
margin: 0;
8+
padding: 0;
9+
background-color: #f8f8f8;
10+
}
11+
12+
.container {
13+
max-width: 800px;
14+
margin: 0 auto;
15+
padding: 20px;
16+
background-color: #fff;
17+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
18+
border-radius: 8px;
19+
}
20+
21+
.content {
22+
text-align: center;
23+
}
24+
25+
.title {
26+
color: #333;
27+
font-size: 2em;
28+
margin-bottom: 10px;
29+
}
30+
31+
.subtitle {
32+
color: #555;
33+
font-size: 1.2em;
34+
}
35+
36+
.img {
37+
max-width: 100%;
38+
height: auto;
39+
margin-top: 20px;
40+
border-radius: 8px;
41+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
42+
}
43+
44+
.quote {
45+
font-style: italic;
46+
margin-top: 20px;
47+
color: #777;
48+
}
49+
50+
ul {
51+
list-style-type: none;
52+
padding: 0;
53+
}
54+
55+
li {
56+
margin-bottom: 10px;
57+
}
58+
59+
blockquote {
60+
font-style: italic;
61+
margin-top: 20px;
62+
color: #555;
63+
}
64+
65+
footer {
66+
text-align: center;
67+
margin-top: 20px;
68+
padding: 10px;
69+
background-color: #333;
70+
color: #fff;
71+
border-radius: 0 0 8px 8px;
72+
}
73+
74+
#tribute-link {
75+
color: #ffd700;
76+
text-decoration: none;
77+
font-weight: bold;
78+
}

0 commit comments

Comments
 (0)