Biking Club
A bike club culture for people who love cycling in the city of Berlin. As the city is on average ten times larger than Paris, Berlin offers a huge urban playground for the discovery of hidden sites and for lovers of the abundant surrounding nature. We are an association of volunteers who will work for a physical and social balance within a flexible and stress-free structure.
Features
-
Navigation
- Featured at the top of the page, the navigation shows the club in the left corner: BIKING CLUB that link to the top of the page.
- The other navigation links are to the right: About, Snip up and Contact which link the different sections of the same page.
- The navigation is in a subtil lato font and black color that contrasts with the background.
- The navigation is clear: It tells the user name of the club. The website information are intuitive and available.
-
The header
-
The About Us section
- The About Us section is a clear and detailed introduction unit where we give the main information about our community.
- included in a short description of our identity, place, intentions and goal.
- The user can have concise and precise informations about our activities.
- Illustratrive video displayed on the web page in order to perform some motion, dynamics and styled welcome page.( Trinity Animation Project | 3D Triathlon Bike Commercial - High Tech Animated Marketing Video)
-
The Sign Up form
- The sign up section collects first name, last name, email address
- Easy interface to sign up for the user as the black background color contrasts the orange fonts and whitesmoke form
-
The Meetup section
- An elaborate section where the meetup is displayed in a really intuitive, organized and informative way
- The model for this section is Love running project where the essentials are well done.
- Fontawesome helped to realise a designed section with visibility and illustrative background image of a dynamic biker.
-
The Contact section
- The contact section provides all the user needs in order to get in touch as street address, email address, phone number.
- This section includes the main social media links as facebook, Twitter, Youtube, Instagram. Very usefull.
Testing
- Page works in several browsers as Firefox, Safari, Chrome
- Devtools confirm : the project is responsive on variable screen sizes
- Navigation bar is functional and signup section required email address before "Let's Ride"
Bugs
- Google.de refused to open the long Google map link shortened on Bitly
Fixed Bugs
- Problem solved with the addition of a Google map at end of our web page
Validators Testing
- HTML: confirmed via validator
- CSS: confirmed via validator
- Accessibility: confirmed via Lighthouse
Deployment
- The site was deployed to Github pages :
- First: in the Github repository, navigates to the Settings Tab
- And, from the source section drop-down menu, select the master Branch
- Finally: once the master branch has been selected, the page provided the link to the completed website
Credits
Content
- Some codes (Meetup section) were taken from Love Runnning Project.
- Youtube tutorials
Media
- Fontawesome
- Pexels
- Google Fonts