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 header shows the name of the club included in a short description of our identity: place, intention and goal.

  • The hero image is above and it shows our urban community biking while exploring the city

  • The black and white picture gives a clear and esthetic view in term of illustration.

    

• 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