Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shadyashraf174/tribute-page-certification-project
For this project, you will build a tribute page.
https://github.com/shadyashraf174/tribute-page-certification-project
css freecodecamp freecodecamp-project html tribute-page
Last synced: 19 days ago
JSON representation
For this project, you will build a tribute page.
- Host: GitHub
- URL: https://github.com/shadyashraf174/tribute-page-certification-project
- Owner: shadyashraf174
- Created: 2024-11-21T15:43:10.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2024-11-21T15:53:54.000Z (about 2 months ago)
- Last Synced: 2024-11-21T16:43:48.315Z (about 2 months ago)
- Topics: css, freecodecamp, freecodecamp-project, html, tribute-page
- Language: HTML
- Homepage: https://www.freecodecamp.org/learn/2022/responsive-web-design/#build-a-tribute-page-project
- Size: 3.91 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Tribute Page for Dr. Magdi Yacoub
#### Inspired by [freeCodeCamp](https://www.freecodecamp.org/) || See it live at [CodePen](https://codepen.io/shady-ashraf/pen/XWvLQae)
###### Dr. Magdi Yacoub is an Egyptian-British heart surgeon and humanitarian who has transformed lives worldwide through his groundbreaking work and unwavering dedication. For this project, you will build a tribute page.
---
## Table of Contents
- [Overview](#overview)
- [Features](#features)
- [File Structure](#file-structure)
- [HTML Details](#html-details)
- [CSS Styling](#css-styling)
- [Deployment](#deployment)
- [Selectors Used in the Project](#selectors-used-in-the-project)
---
## Overview
The **Tribute Page for Dr. Magdi Yacoub** celebrates his incredible life and contributions to the medical field, particularly in cardiothoracic surgery.
**Technologies used:**
- HTML5
- CSS3
---
## Features
- Informative timeline summarizing Dr. Yacoub’s life achievements.
- Highlighted inspirational quote with a blockquote design.
- An image with a descriptive caption, optimized for responsiveness.
- Clear call-to-action link for learning more about Dr. Yacoub.
---
## File Structure
```
project/
├── index.html
└── styles.css
```
---
## HTML Details
The HTML file (`index.html`) contains:
- **Page Structure:**
- `` element to encapsulate the primary content.
- `
` as the main title of the page.
- **Figure and Image:**
- `` and `` to present the image with a caption.
- `![]()
` with `alt` text for accessibility.
- **Timeline:**
- An unordered list (``) to display a chronological list of events.
- **Inspirational Quote:**
- A `` element to feature Dr. Yacoub's inspiring words.
- **Link:**
- A `` element linking to Dr. Yacoub’s Wikipedia page.
---
## CSS Styling
The CSS file (`styles.css`) ensures a clean, readable, and responsive layout:
- **Page Theme:**
- Light background (`#eee`) and contrasting text color (`#333`).
- **Image and Caption:**
- Rounded corners for the image and its container.
- Centered alignment for visual balance.
- **Typography:**
- Modern and legible font (Arial, sans-serif).
- Scaled font sizes for headings and body text.
- **Interactive Elements:**
- Hover effects for the link.
- **Responsiveness:**
- Max-width constraints for images and content.
---
## Deployment
1. Clone the repository:
```bash
git clone https://github.com/shadyashraf174/Tribute-Page-Certification-Project.git
```
2. Open the `index.html` file in a web browser to view the project.
---
## Selectors Used in the Project
### **Selectors in HTML**
#### **Element Selectors**
- **``**: Encapsulates the main content.
- **`` and ``**: Display an image with a descriptive caption.
- **`
` and `- `**: Organize the timeline.
- **``**: Highlight an inspirational quote.
- **``**: Create a clickable link to Dr. Yacoub’s Wikipedia entry.
---
### **Selectors in CSS**
#### **Element Selectors**
- **`body`**: Sets default styles like font and background color.
- **`h1`**: Styles the main title.
- **`img`**: Defines image dimensions and layout.
- **`blockquote`**: Adds left border and padding for quotes.
#### **Class Selectors**
- **`.center`**: Centers elements within their containers.
- **`.italic`**: Applies italic styling to captions and quotes.
#### **Pseudo-Class Selectors**
- **`a:hover`**: Changes link color on hover.
---
---