Real Madrid Fan Blog

This project is a fan website dedicated to Real Madrid, designed to showcase club highlights, player stories, and recent updates. The site includes various sections for an engaging user experience.

Project Structure

The project is organized into different directories for easy navigation and separation of concerns:

Folders and Files

• aboutUs/

  • about.html: About Us page providing information about the blog's purpose.
  • about.css: Styles for the About Us page.

• assets/

  • img/: Contains images used throughout the website.
  • components.css: Styles for reusable components across pages.
  • layout.css: Styles for layout management across different sections.
  • responsive.css: Styles for making the website responsive across various screen sizes.
  • style.css: General styles used throughout the website.
  • typography.css: Font and text styling for a consistent look.
  • cards.css: Styles for the main card layout on the home page.
  • footer.css: Styles for the footer section.

• contact/

  • contact.html: Contact Us page allowing users to reach out.
  • contact.css: Styles for the Contact Us page.

• intro/

  • intro.html: Introduction page for new visitors.
  • intro.css: Styles for the Intro page.

• login/

  • login.html: Log In page for registered users.
  • login.css: Styles for the Log In page.

• posts/

  • post1.html, post2.html, post3.html, post4.html: Individual blog posts related to Real Madrid topics.
  • post.css: Styles for specific post layout and design.

• Root Files

  • index.html: The main homepage of the Real Madrid blog site.
  • main.html: A secondary main file that may serve as a template or another home view.

Features

• Home Page: Overview of Real Madrid with engaging visuals and recent highlights.
• About Us Page: Information about the blog’s mission and the creators.
• Contact Us Page: A form for visitors to contact the team.
• Intro Page: Welcomes new visitors and introduces the blog.
• Login Page: Allows registered users to access personalized content.
• Posts Section: Dedicated pages for in-depth articles on Real Madrid-related topics.

Technologies Used

• HTML: For structuring the website content.
• CSS: For styling, including specific CSS files for components, layout, typography, and responsive design.

Responsive Design

The website is designed to be fully responsive, ensuring that fans can enjoy a seamless experience on any device. The responsive.css file contains breakpoints and styles to adjust layouts for different screen sizes.

Setup Instructions

1. Clone the repository:

   git clone https://github.com/ReemaKusa/RealMadridBlog.git

"# Blog_website_design"