"Shooting for the moon"
A tribute page to Katherine Johnson
Project made for freeCodeCamp
"Responsive Web Design" certification
The project
What this project does
Project original Users stories:
- My tribute page should have an element with a corresponding
id="main", which contains all other elements - I should see an element with a corresponding
id="title", which contains a string (i.e. text) that describes the subject of the tribute page (e.g. "Dr. Norman Borlaug") - I should see a
divelement with a correspondingid="img-div" - Within the
img-divelement, I should see an img element with a correspondingid="image" - Within the
img-divelement, I should see an element with a correspondingid="img-caption"that contains textual content describing the image shown inimg-div - I should see an element with a corresponding
id="tribute-info", which contains textual content describing the subject of the tribute page - I should see an
aelement with a correspondingid="tribute-link", which links to an outside site that contains additional information about the subject of the tribute page. HINT: You must give your element an attribute oftargetand set it to_blankin order for your link to open in a new tab (i.e.target="_blank") - The
imgelement should responsively resize, relative to the width of its parent element, without exceeding its original size - The
imgelement should be centered within its parent element
See project original description here
Additionnal Users stories:
- Sticky navbar & footer
- Embedded video
- Full responsive
How the project works
Built with:
- HTML
- CSS
- Flexbox
- jQuery
- JavaScript
- Google fonts for "East Sea Dokdo" & "Noto Sans KR"
- Font Awesome for all icons
Click here to see the project live
General informations, Disclaimers & Ackowledgements
Author
Open-source & contributions
This is not an open-source project - No contribution expected
Licence
No licence - Please contact me before re-using part of this code
Academic Honesty Disclaimer
If you're a freeCodeCamp or a code student, please use this project as an inspiration and write your own code.
It's what makes us all better developers 😉
Intellectual property and copyrights Disclaimer
I wrote the code and share below the credits and copyrights of the contents I've used in the website and that DO NOT belong to me
If you encounter mistakes in the attribution of these rights, please be sure to let me know (best contact is on Twitter) so that I can update the information
- Moon top picture (also used for the favicon) - Credit: photo by Matthew N on Unsplash
- Hidden figures book and book cover - Copywritgh owners: Margot Lee Shetterly & HarperCollins Publishers
- "Hidden figures" movie, movie poster & trailer - Copyright owner: Twentieth Century Fox
- "Katherine G. Johnson" documentary - Copyright owners: Makers
- Reaching for the moon, children book about Katherine Johnson - Author: Katherine Johnson - Publisher: Atheneum Books for Young Readers
- Counting on Katherine, children book about Katherine Johnson - Author: Helaine Becker, Illustrator: Tiemdow Phumiruk, Publisher: Henry Holt and Co.
- Katherine Johnson - You should meet, children book about Katherine Johnson - Author: Thea Feldman, Illustrator: Alyssa Petersen, Publisher: Simon Spotlight
- Barbie® & Inspiring Women™ - Copyright owner: Mattel
- Katherine Johnson "at her desk" picture from NASA here - Image Credit: NASA Langley Research Center
- Apollo 11 picture from NASA here - Image Credit: NASA
Acknowledgements & Resources
A big thank you to my husband who offered me the DVD of the movie that made me discover the fascinating story of Katherine Johnson and her friends, and eventually led me to dig further and to create this website as a code-training project
Blink effect
Glitch effect - Not used
Texts animations
Fade in effect