This tribute website is dedicated to the life and work of the Dutch post-impressionist artist Vincent van Gogh. The page offers an informative overview of the artist's life, career, and most famous paintings. It was created as part of the freeCodeCamp curriculum for the Responsive Web Design Certification.
You can view the project live here.
The Van Gogh's website includes:
- Fully responsive design.
- A customized favicon.
- Uses semantic HTML to improve accesibility.
- Contains visual effects to the content, such as transitions and hover effects on links.
- It is visually appealing, informative, and designed to pay tribute to Vincent van Gogh and his contributions to the world of art.
To install the project, follow these steps:
- Fork the project from this repository.
- Clone the forked repository to your local machine using the command 'git clone'.
- Open the index.html file in your web browser to view the website.
In order for the project to be acepted, it had to fullfil the following user stories:
- The tribute page should have a main element with a corresponding id of main, which contains all other elements.
- It must include 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").
- It must include either a figure or a div element with an id of img-div.
- Within the #img-div element, include an img element with a corresponding id="image".
- Within the #img-div element, include an element with a corresponding id="img-caption" that contains textual content describing the image shown in #img-div.
- It must include an element with a corresponding id="tribute-info", which contains textual content describing the subject of the tribute page.
- It must include with a corresponding id="tribute-link", which links to an outside site, that contains additional information about the subject of the tribute page.
- The #image should use max-width and height properties to resize responsively, relative to the width of its parent element, without exceeding its original size.
- The img element should be centered within its parent element
IMPORTANT NOTE: After completing the project, I've decided to replace a few of the initial requirements of the project, as it improved the visual appeal of the page and matched with my personal design choices.
This project is licensed under the MIT License.
Thanks to freeCodeCamp for providing the curriculum and guidance for this project.