https://github.com/dracula27/freecodecamp_responsivewebdesign_tributepage
This is one of the required projects to earn your certification. For this project you will build a tribute page for a subject of your choosing, fictional or real.
https://github.com/dracula27/freecodecamp_responsivewebdesign_tributepage
css css-flexbox css3 freecodecamp freecodecamp-curriculum freecodecamp-front freecodecamp-frontend freecodecamp-project html html-css html-table html5 html5-css3
Last synced: 12 months ago
JSON representation
This is one of the required projects to earn your certification. For this project you will build a tribute page for a subject of your choosing, fictional or real.
- Host: GitHub
- URL: https://github.com/dracula27/freecodecamp_responsivewebdesign_tributepage
- Owner: DrAcula27
- Created: 2024-04-15T19:02:36.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-04-17T01:03:49.000Z (almost 2 years ago)
- Last Synced: 2025-01-18T05:28:37.304Z (about 1 year ago)
- Topics: css, css-flexbox, css3, freecodecamp, freecodecamp-curriculum, freecodecamp-front, freecodecamp-frontend, freecodecamp-project, html, html-css, html-table, html5, html5-css3
- Language: CSS
- Homepage: https://dracula27.github.io/freeCodeCamp_responsiveWebDesign_tributePage/
- Size: 3.91 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# freeCodeCamp_responsiveWebDesign_tributePage
## Live Demo
[Tribute Page](https://dracula27.github.io/freeCodeCamp_responsiveWebDesign_tributePage/)
## Project Information
The second of five(5) certification projects in freeCodeCamp's [Responsive Web Design course](https://www.freecodecamp.org/learn/2022/responsive-web-design/).
The course/project description from their website is as follows:
> This is one of the required projects to earn your certification. For this project you will build a tribute page for a subject of your choosing, fictional or real.
## Project Requirements
**Objective**:
Build an app that is functionally similar to https://tribute-page.freecodecamp.rocks. Do not copy this demo project.
**User Stories**:
- [x] Your tribute page should have a main element with a corresponding id of main, which contains all other elements
- [x] You should see an element with an id of title, which contains a string (i.e. text), that describes the subject of the tribute page (e.g. "Dr. Norman Borlaug")
- [x] You should see either a figure or a div element with an id of img-div
- [x] Within the #img-div element, you should see an img element with a corresponding id="image"
- [x] Within the #img-div element, you should see an element with a corresponding id="img-caption" that contains textual content describing the image shown in #img-div
- [x] You should see an element with a corresponding id="tribute-info", which contains textual content describing the subject of the tribute page
- [x] You should see an a element with a corresponding id="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 of target and set it to \_blank in order for your link to open in a new tab
- [x] Your #image should use max-width and height properties to resize responsively, relative to the width of its parent element, without exceeding its original size
- [x] Your img element should be centered within its parent element
- [x] Fulfill the user stories and pass all the tests below to complete this project. Give it your own personal style. Happy Coding!
_Note: Be sure to add `` in your HTML to link your stylesheet and apply your CSS_