https://github.com/yosephdev/love-running

A responsive, mobile-first website for a running club, featuring a dynamic layout, hero images, and interactive elements.
https://github.com/yosephdev/love-running

Last synced: 2 months ago
JSON representation

A responsive, mobile-first website for a running club, featuring a dynamic layout, hero images, and interactive elements.

• Host: GitHub
• URL: https://github.com/yosephdev/love-running
• Owner: yosephdev
• Created: 2023-11-24T05:10:12.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-11-26T19:58:50.000Z (over 2 years ago)
• Last Synced: 2025-06-11T06:05:01.726Z (12 months ago)
• Language: HTML
• Homepage: https://yosephdev.github.io/love-running/
• Size: 1.7 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Love Running Project

## Overview

Welcome to the Love Running project, an engaging and responsive website built from the ground up. This project is part of the Code Institute curriculum, designed to teach the fundamentals of web development with a focus on mobile-first design.

![Responsive Mockup](assets/images/preview.png)

### Key Features

- **Mobile-First Design**: Developed for optimal performance on mobile devices before scaling up to larger screens.

- **Responsive Navigation**: Features a burger icon toggle for navbar items on mobile, expanding to a full navbar on larger screens.

- **Hero Image**: A striking image of a runner enhances the visual appeal and sets the theme for the site.

- **Club Information**: Includes motivational reasons for joining, meeting times, and location details.

- **Social Media Integration**: Footer links to social media platforms provide additional engagement.

- **Gallery Page**: Showcases photos from past events, arranged responsively.

- **Signup Page**: Allows users to sign up for the club with form validation to ensure complete submissions.

- **Adaptive Layout**: Content layout changes gracefully from mobile to tablet and desktop views, utilizing the available screen space effectively.

### Technologies Used

- HTML5

- CSS3

### Setup

Clone this repository and open `index.html` in any modern browser to view the project.

---

This project is a walkthrough of the development process, demonstrating key concepts in responsive web design and front-end development.