Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/victoriamcn/taylor-swift-tribute-page
Tribute Page Project with freeCodeCamp
https://github.com/victoriamcn/taylor-swift-tribute-page
css3 freecodecamp-project html5
Last synced: about 10 hours ago
JSON representation
Tribute Page Project with freeCodeCamp
- Host: GitHub
- URL: https://github.com/victoriamcn/taylor-swift-tribute-page
- Owner: victoriamcn
- License: apache-2.0
- Created: 2023-09-11T13:01:21.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-06-07T15:27:37.000Z (5 months ago)
- Last Synced: 2024-06-07T16:59:56.363Z (5 months ago)
- Topics: css3, freecodecamp-project, html5
- Language: CSS
- Homepage:
- Size: 120 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Note from Victoria
In December 2022, I was curious about software and started [freeCodeCamp's](https://www.freecodecamp.org/) Responsive Web Design course. This project, along with the [Penguin-Animation project](https://github.com/victoriamcn/Penguin-Animation), are apart of that course. Long story short, these projects are what started my tech journey. While I don't update them and they are static one page sites written in vanilla HTML and CSS, I keep them here as a testament to how far I've come.
---
# Taylor Swift Tribute Page
## Preview
## Description
Apart of the Responsive Web Design certification, this was the second major project I worked on while working with freeCodeCamp. It's a static web page to pay tribute to the subject of my choosing. I choose Taylor Swift at the time because she had just released her 'Midnights' album and annouced her Eras Tour. The significant dates in her career listed on the site color coordinate with each era of her albums. The image used on the site is from [Billboard.com](https://www.billboard.com/wp-content/uploads/2021/11/Taylor-Swift-2021-grammy-billboard-1548.jpg?w=942&h=623&crop=1&resize=942%2C623).
## Objective
Build an app that is functionally similar to [this example](https://tribute-page.freecodecamp.rocks/).
## User Stories
**Fulfill the user stories and pass all the tests below to complete this project. Give it your own personal style. Happy Coding!**
1. Your tribute page should have a `main` element with a corresponding `id` of `main`, which contains all other elements.
2. 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").
3. You should see either a `figure` or a `div` element with an `id` of `img-div`.
4. Within the `#img-div` element, you should see an `img` element with a corresponding `id="image"`.
5. 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`.
6. You should see an element with a corresponding `id="tribute-info"`, which contains textual content describing the subject of the tribute page.
7. 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*
9. 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.
10. Your `img` element should be centered within its parent element
**Note:** Be sure to add `` in your `HTML` to link your stylesheet and apply your `CSS`
## Badges
## Listen to My Favorite Taylor Swift Songs on Spotify
[](https://open.spotify.com/playlist/2v77Dq8whATnd2gQJO4pIf?si=8dab51f992944935)