Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yashi-singh-1/city-skyline
City Skyline is a sleek web project featuring a minimalist cityscape created using HTML and CSS. It offers a simple yet visually striking depiction of buildings and windows against a radiant sky. With its responsive design and customizable color options, City Skyline is an ideal choice for adding a touch of urban charm to web pages and projects.
https://github.com/yashi-singh-1/city-skyline
cityscape cityscapes css css3 freecodecamp freecodecamp-project front-end front-end-development frontend html html5 minimalist minimalistic responsive-design responsive-web-design urban visual-design web-design web-development
Last synced: 3 days ago
JSON representation
City Skyline is a sleek web project featuring a minimalist cityscape created using HTML and CSS. It offers a simple yet visually striking depiction of buildings and windows against a radiant sky. With its responsive design and customizable color options, City Skyline is an ideal choice for adding a touch of urban charm to web pages and projects.
- Host: GitHub
- URL: https://github.com/yashi-singh-1/city-skyline
- Owner: Yashi-Singh-1
- Created: 2024-06-07T20:05:44.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-06-08T06:08:00.000Z (5 months ago)
- Last Synced: 2024-06-08T21:27:26.026Z (5 months ago)
- Topics: cityscape, cityscapes, css, css3, freecodecamp, freecodecamp-project, front-end, front-end-development, frontend, html, html5, minimalist, minimalistic, responsive-design, responsive-web-design, urban, visual-design, web-design, web-development
- Language: CSS
- Homepage:
- Size: 490 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# City Skyline
City Skyline is a simple web project created using HTML and CSS. It renders a basic skyline scene with buildings and windows, offering a visually appealing view reminiscent of a cityscape.
## Table of Contents
- [Features](#features)
- [Demo](#demo)
- [Installation](#installation)
- [Usage](#usage)
- [Customization](#customization)
- [Contributing](#contributing)## Features
- **Responsive Design:** The skyline adapts to different screen sizes, providing a consistent experience across devices.
- **Dynamic Styling:** Customizable colors for buildings and windows, allowing for easy theme adjustments.
- **Simple Structure:** Built using straightforward HTML and CSS, making it easy to understand and modify.## Demo
![City Skyline Demo](Skyline-Preview.png)
![City Skyline Demo](City-Skyline-Preview.png)
## Installation
- Clone this repository using Git:
git clone https://github.com/Yashi-Singh-1/City-Skyline.git
Alternatively, download the ZIP file from the GitHub repository and extract it to your project directory.
## Usage
To use City Skyline in your project, follow these steps:
1. Include the styles.css file in your HTML.
2. Copy the HTML structure from index.html into your own HTML file.
3. Customize the colors and dimensions as needed.
4. Preview your page in a web browser to see the skyline rendered.
## Customization
City Skyline offers easy customization options through CSS variables. You can adjust the following variables in your CSS file to customize the appearance:
- --building-color1, --building-color2, --building-color3, --building-color4: Colors of the buildings.
- --window-color1, --window-color2, --window-color3, --window-color4: Colors of the windows.
For example, to change the color of the buildings, you can override the --building-color1 variable like this:
:root {
--building-color1: #ff0000; /* Red */
}
## Contributing
Contributions are welcome! If you find any issues or have suggestions for improvements, feel free to open an issue or create a pull request. Make sure to follow the.