diff --git a/CSS3/Tribute Page/index.html b/CSS3/Tribute Page/index.html index d842c87..7c2308d 100644 --- a/CSS3/Tribute Page/index.html +++ b/CSS3/Tribute Page/index.html @@ -4,121 +4,66 @@ - Tribute Page - + Tribute Page + + + + + - - +

Dr. Norman Borlaug

-

The man who saved a billion lives

+

The man who saved a billion lives

-
- +
+ Dr. Norman Borlaug standing in a Mexican wheat field with biologists
- Dr. Norman Borlaug, third from the left, trains biologists in Mexico on ow to increase wheat yields - part of his life-long war on hunger + Dr. Norman Borlaug (third from left) training scientists in Mexico to increase wheat yields.
-

Here's a time line of Dr. Borlaug's life:

-
    -
  • 1914 - Born in Cresco, Iowa
    • -
  • - 1933 - Leaves his family's farm to attend the - University of Minnesota, thanks to a Depression era program known as the - "National Youth Administration" -
    • -
  • - 1935 - Has to stop school and save up more money. Works - in the Civilian Conservation Corps, helping starving Americans. "I saw - how food changed them", he said. "All of this left scars on me." -
    • -
  • - 1937 - Finishes university and takes a job in the US - Forestry Service -
    • -
  • - 1938 - Marries wife of 69 years Margret Gibson. Gets - laid off due to budget cuts. Inspired by Elvin Charles Stakman, he - returns to school study under Stakman, who teaches him about breeding - pest-resistent plants. -
    • -
  • - 1941 - Tries to enroll in the military after the Pearl - Harbor attack, but is rejected. Instead, the military asked his lab to - work on waterproof glue, DDT to control malaria, disinfectants, and - other applied science. -
    • -
  • - 1942 - Receives a Ph.D. in Genetics and Plant Pathology -
    • -
  • - 1944 - Rejects a 100% salary increase from Dupont, - leaves behind his pregnant wife, and flies to Mexico to head a new plant - pathology program. Over the next 16 years, his team breeds 6,000 - different strains of disease resistent wheat - including different - varieties for each major climate on Earth. -
    • -
  • - 1945 - Discovers a way to grown wheat twice each - season, doubling wheat yields -
    • -
  • - 1953 - crosses a short, sturdy dwarf breed of wheat - with a high-yeidling American breed, creating a strain that responds - well to fertilizer. It goes on to provide 95% of Mexico's wheat. -
    • -
  • - 1962 - Visits Delhi and brings his high-yielding - strains of wheat to the Indian subcontinent in time to help mitigate - mass starvation due to a rapidly expanding population -
    • -
  • 1970 - receives the Nobel Peace Prize
    • -
  • - 1983 - helps seven African countries dramatically - increase their maize and sorghum yields -
    • -
  • - 1984 - becomes a distinguished professor at Texas A&M - University -
    • -
  • - 2005 - states "we will have to double the world food - supply by 2050." Argues that genetically modified crops are the only way - we can meet the demand, as we run out of arable land. Says that GM crops - are not inherently dangerous because "we've been genetically modifying - plants and animals for a long time. Long before we called it science, - people were selecting the best breeds." -
    • -
  • 2009 - dies at the age of 95.
    • -
- +

📜 Timeline of Dr. Borlaug's Life

+
    +
  • 1914 – Born in Cresco, Iowa
    • +
  • 1933 – Attends University of Minnesota
    • +
  • 1935 – Works in Civilian Conservation Corps
    • +
  • 1937 – Joins U.S. Forestry Service
    • +
  • 1938 – Marries Margret Gibson
    • +
  • 1942 – Earns Ph.D. in Genetics
    • +
  • 1944 – Moves to Mexico to fight hunger
    • +
  • 1945 – Doubles wheat yields
    • +
  • 1962 – Helps prevent famine in India
    • +
  • 1970 – Wins Nobel Peace Prize
    • +
  • 2009 – Passes away at age 95
    • +
-
- -

"Borlaug's life and achievement are testimony to the far-reaching contribution that one man's towering intellect, - persistence and scientific vision can make to human peace and progress." +

+ "Borlaug's life and achievement are testimony to the far-reaching contribution + that one man's scientific vision can make to humanity."

- - -- Indian Prime Minister Manmohan Singh - + — Manmohan Singh, Former Prime Minister of India
-

- If you have time, you should read more about this incredible human being - on his + +

+ Learn more on his Wikipedia entry - . + target="_blank">Wikipedia page

+ diff --git a/CSS3/Tribute Page/style.css b/CSS3/Tribute Page/style.css index 7336804..dd69a56 100644 --- a/CSS3/Tribute Page/style.css +++ b/CSS3/Tribute Page/style.css @@ -1,108 +1,143 @@ -/****************************************************************** -Setting a base font size of 10px give us easier rem calculations -Info: 1rem === 10px, 1.5rem === 15px, 2rem === 20px and so forth -********************************************************************/ - -html { - /* Setting a base font size of 10px give us easier rem calculations - Info: 1rem === 10px, 1.5rem === 15px, 2rem === 20px and so forth - */ - font-size: 10px; - } - - body { - /* Native font stack https://getbootstrap.com/docs/4.2/content/reboot/#native-font-stack */ - - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; - font-size: 1.6rem; - color: #333; - text-align: center; - line-height: 1.5; - margin 0; - width: 100%; - } - - #main { - margin: 30px 8px; - padding: 15px; - border-radius: 10px; - background: #eee; - } - - h1 { - font-size: 4rem; - margin-bottom: 0; - } - - #img-div { - background: white; - padding: 10px; - margin: 0; +/* RESET */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* BACKGROUND */ +body { + font-family: 'Poppins', sans-serif; + background: linear-gradient(135deg, #667eea, #764ba2); + color: #333; + line-height: 1.7; + padding: 20px; +} + +/* MAIN CARD */ +#main { + max-width: 900px; + margin: auto; + background: rgba(255, 255, 255, 0.95); + border-radius: 16px; + padding: 30px; + box-shadow: 0 20px 40px rgba(0,0,0,0.15); + animation: fadeIn 1s ease; +} + +/* TITLE */ +#title { + font-size: 4rem; + font-weight: 700; + color: #2d2d2d; +} + +.subtitle { + font-size: 1.6rem; + color: #666; + margin-bottom: 25px; +} + +/* IMAGE CARD */ +#img-div { + background: #fff; + padding: 15px; + border-radius: 14px; + box-shadow: 0 12px 25px rgba(0,0,0,0.1); + margin-bottom: 40px; +} + +#image { + width: 100%; + border-radius: 12px; + transition: transform 0.4s ease; +} + +#image:hover { + transform: scale(1.03); +} + +#img-caption { + margin-top: 12px; + font-size: 1.4rem; + color: #555; +} + +/* TIMELINE */ +#headline { + font-size: 2.4rem; + margin-bottom: 25px; +} + +ul { + max-width: 650px; + margin: auto; + text-align: left; +} + +li { + margin: 15px 0; + padding-left: 15px; + border-left: 4px solid #667eea; +} + +/* BLOCKQUOTE */ +blockquote { + margin: 40px auto; + padding: 20px; + background: #f4f6ff; + border-left: 5px solid #667eea; + font-style: italic; + border-radius: 8px; +} + +blockquote cite { + display: block; + margin-top: 10px; + font-weight: 600; + color: #555; +} + +/* LINKS */ +a { + color: #667eea; + text-decoration: none; + font-weight: 600; +} + +a:hover { + text-decoration: underline; +} + +/* FOOTER */ +.footer-text { + margin-top: 30px; + font-size: 1.8rem; +} + +/* ANIMATION */ +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(20px); } - - #image { - max-width: 100%; - display: block; - height: auto; - margin: 0 auto; - + to { + opacity: 1; + transform: translateY(0); } - - #img-caption { - margin : 1.5rem 0 0.5rem 0; +} + +/* RESPONSIVE */ +@media (max-width: 768px) { + #title { + font-size: 3rem; } - + #headline { - margin: 50px 0; - text-align: center; - } - - ul { - max-width: 550px; - margin: 0 auto 50px auto; - text-align: left; - line-height: 1.6; - } - - li { - margin: 1.6rem 0; - } - - blockquote { - font-style: italic; - max-width: 545px; - margin: 0 auto 50px auto; - text-align: left; - } - h3 { font-size: 2rem; } - - a { - color: #477ca7; - } - - a:visited { - color: green; - } - - - - /* responsive */ - - @media (max-width: 768px) { - h1 { - font-size: 3.5rem; - line-height: 1.2; - } - #img-caption { - font-size: 1.5rem; - } - h3{ - font-size: 1.5rem; - } - blockquote { - text-align: center; - } + + .footer-text { + font-size: 1.5rem; } - \ No newline at end of file +}