An open API service indexing awesome lists of open source software.

https://github.com/cihat-kose/maiden-tower-html-css-site

A beginner-friendly HTML5 and CSS3 project for building a responsive personal website. Includes sections like "About Me," "Education," "Contact," and features basic JavaScript integration for interactivity. Ideal for those learning front-end development.
https://github.com/cihat-kose/maiden-tower-html-css-site

css3 front-end html5 personal-website responsive-website web-development

Last synced: 7 months ago
JSON representation

A beginner-friendly HTML5 and CSS3 project for building a responsive personal website. Includes sections like "About Me," "Education," "Contact," and features basic JavaScript integration for interactivity. Ideal for those learning front-end development.

Awesome Lists containing this project

README

          

# Maiden's Tower Website

![HTML5](https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge&logo=html5&logoColor=white)
![CSS3](https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge&logo=css3&logoColor=white)
![Responsive](https://img.shields.io/badge/Responsive-6DB33F?style=for-the-badge&logo=responsive&logoColor=white)
![Web Development](https://img.shields.io/badge/Web_Dev-BB4B39?style=for-the-badge&logo=web&logoColor=white)
![VS Code](https://img.shields.io/badge/VSCode-0078d7?style=for-the-badge&logo=visual-studio-code&logoColor=white)

This project is a simple yet elegant website dedicated to the Maiden's Tower, an iconic landmark in Istanbul. Built using HTML5 and CSS3, this project highlights essential web development skills while providing valuable insights into the history and cultural significance of the Maiden's Tower.

## Table of Contents
- [Project Overview](#project-overview)
- [Features](#features)
- [How to Run](#how-to-run)
- [Dependencies](#dependencies)
- [Screenshots](#screenshots)
- [Future Work](#future-work)
- [Contributors](#contributors)
- [License](#license)
- [Contact](#contact)

## Project Overview
The **Maiden's Tower Website** covers essential web development topics through:
- **HTML Pages:**
- `index.html` – Homepage structure and navigation menu
- `ben-kimim.html` – "Who am I?" page
- `egitim.html` – Education and background
- `iletisim.html` – Contact information
- **CSS Styles:**
- `style.css` – Styling for the entire project
- **Images:**
- `Images/` – Contains project images and social media icons

## Features
- **Responsive Design**: Ensures the website looks great on all devices, including desktops, tablets, and smartphones.
- **Modern Technologies**: Built with HTML5 and CSS3 to follow current web standards.
- **Minimalist UI**: Clean and distraction-free interface that emphasizes content.
- **Simple Navigation**: Easy-to-use menu allowing users to smoothly transition between pages.

## Project Structure
```
/
│-- index.html # Homepage (Introduction to Maiden's Tower)
│-- ben-kimim.html # "Who am I?" page
│-- egitim.html # Education and background
│-- iletisim.html # Contact information
│-- style.css # CSS file for styling
│-- Images/ # Image assets used throughout the site
│ │-- business-man.png
│ │-- kiz-kulesi-gunes-batarken.jpg
│ │-- kız kulesi konum.png
│ └── 20-social-media-icons/ # Collection of social media icons
│-- README.md # Project description (This file)
└-- template.html # HTML template for reusability
```

## How to Run
To run the project:

1. Clone the repository:
```bash
git clone https://github.com/cihat-kose/maiden-tower-html-css-site.git
```

2. Navigate to the project directory:
```bash
cd maiden-tower-html-css-site
```

3. Open `index.html` directly in your browser **or** use Live Server for a better experience:
```bash
code . # Open in Visual Studio Code
```
- If you have Live Server installed, right-click `index.html` and select "Open with Live Server".
- Alternatively, drag `index.html` to a browser window to view the project.

## Dependencies
- A modern web browser (Chrome, Firefox, Edge, etc.)
- Text editor (Visual Studio Code, Sublime Text, Notepad++)

## Screenshots
Homepage:
![Homepage Screenshot](Images/kiz-kulesi-gunes-batarken.jpg)

## Future Work
- Add CSS for enhanced styling
- Implement JavaScript for interactivity
- Introduce responsive design for mobile compatibility

## Contributors
We welcome contributions to improve this project!
To contribute:
1. Fork the repository.
2. Create a new branch:
```bash
git checkout -b feature-branch
```
3. Make your changes and commit them:
```bash
git commit -m 'Add new feature'
```
4. Push to the branch:
```bash
git push origin feature-branch
```
5. Create a Pull Request, and we will review your changes.

## License
This project is licensed under the MIT License.
See the [LICENSE](LICENSE) file for details.

## Contact
For any questions, feedback, or contributions, please open an issue in this repository.
Alternatively, feel free to reach out via GitHub.