https://github.com/brunortech/broadway-landing-page
A simple landing page built with HTML and CSS, created using a Codecademy guide. Demonstrates layout styling using position and display properties.
https://github.com/brunortech/broadway-landing-page
codecademy css html landing-page responsive-design web-design
Last synced: about 1 month ago
JSON representation
A simple landing page built with HTML and CSS, created using a Codecademy guide. Demonstrates layout styling using position and display properties.
- Host: GitHub
- URL: https://github.com/brunortech/broadway-landing-page
- Owner: BrunoRTech
- Created: 2025-04-01T20:15:54.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2025-04-01T20:26:58.000Z (about 2 months ago)
- Last Synced: 2025-04-01T21:32:42.136Z (about 2 months ago)
- Topics: codecademy, css, html, landing-page, responsive-design, web-design
- Language: CSS
- Homepage:
- Size: 3.91 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Broadway Landing Page
This project is a simple landing page built with HTML and CSS, created using the guide provided by [Codecademy](https://www.codecademy.com/journeys/full-stack-engineer/paths/fscj-22-web-development-foundations/tracks/fscj-22-fundamentals-of-css/modules/wdcp-22-learn-css-display-and-positioning-fcf96efc-f6fb-4002-bdb4-f4f6b4b3d52c/projects/broadway-design). It serves as an example of how to use layout and positioning techniques to build a modern, responsive homepage for a fictional design firm called Broadway Design.
## Features
- **Fixed Header**: Navigation bar stays at the top of the screen while scrolling.
- **Inline Navigation**: List items are displayed side by side using `display: inline-block`.
- **Jumbotron Layout**: Large header section with background image and call-to-action button.
- **Supporting Sections**: “Design”, “Develop”, and “Deploy” blocks with text and icons.
- **Responsive Design**: Adjusts layout for smaller screens using media queries.
## File Structure
- `index.html`: Contains the main structure of the landing page.
- `style.css`: Defines all visual styling, layout, font, and responsive behavior.
## Usage
To view the project:
1. Download or clone the repository.
2. Open the `index.html` file in any web browser.
## Customization
If you’d like to modify this landing page:
- Edit the `index.html` to change headings, content, or sections.
- Adjust styles in `style.css` to customize fonts, colors, layout, or responsiveness.
- Replace background images or icons to match your branding.
## Acknowledgment
This project was built using the guide provided by Codecademy. The original project can be found [here](https://www.codecademy.com/journeys/full-stack-engineer/paths/fscj-22-web-development-foundations/tracks/fscj-22-fundamentals-of-css/modules/wdcp-22-learn-css-display-and-positioning-fcf96efc-f6fb-4002-bdb4-f4f6b4b3d52c/projects/broadway-design).