Giter VIP home page Giter VIP logo

book-club-amsterdam's Introduction

CI logo

Book Club Amsterdam

This website is designed for Book Club Amsterdam. It is a website designed to invite user to sign up for book club in Amsterdam. It has nice simple design with direct infomration. It is targeting audiance from all age groups, including elderly, so design is big and clean.

You can go to the website via direct link here: https://gokralj.github.io/book-club-amsterdam/

responsive

Features

Navigation bar

  • Navigation bar consist of links to Home, Gallery, Locations and Sign up form.
  • This bar will allow user to jump between pages easily
  • Nav bar is applied to all pages

responsive

Main

  • Main section contains inviting image of a group with books
  • Main provides necessary information on what the page is
  • Main also provides user with pricing for monthly fee and what is included
  • Later in the page locations will feature which library are listed

responsive

Aside

  • Aside is structured into 3 boxes
  • Each box provides user with information on time and location for book club meetings
  • Background image features one of those libraries

responsive

Footer

  • Footer features links to socail media
  • This invites user to seek more information according to prefered platform
  • Links are shown as logos of each social media
  • Footer is consistant troughout the website

responsive

Gallery

  • Gallery provides user with beatifuly selected images of different readers
  • Gallery also features photographs of libraries mentioned
  • Gallery is design to be big and clear
  • Layout has been kept in 2 columns to accomandate size

responsive

Locations

  • Locations page aims to direct user to 3 main libraries also listed on home page
  • It is a clear design with heading followed by google map link window
  • Location on map is pinned for each location individually

responsive

Sign up

  • Sign up page features background of a book
  • Form is allocated to the left of the screen freeing the main image
  • Form requires name, last name and email address
  • It reatures button with text "Join!"

responsive

Testing

Validator Testing

  • HTML

  • No errors were returned when passing through the official W3C validator responsive

  • CSS

  • No errors were found when passing through the official (Jigsaw) validator resposnive

Lighthouse Testing

Home Page

Home

Gallery

Gallery

Locations

Locations

Sign up

SignUp

Unfixed Bugs

  • I would like to resolve responsivness on sign up form, image slows it down

Deployment

The site was deployed to GitHub pages. The steps to deploy are as follows:

  • In the GitHub repository, navigate to the Settings tab
  • From the source section drop-down menu, select the Main Branch
  • Once the Main branch has been selected, the page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment.
  • I then had to wait a few minutes until the site was fully deployed and it was ready.

The live link can be found here - Bookclub_Amsterdam

Content

  • Main text was written by developer
  • Icons for the nav bar and footer were taken from Font Awesome
  • Map links were taken from Google

Media

  • All the images on this page were provided by Pexels

Code

I used the below sites to help me design and style my site.

Disclaimer

  • This site is for educations purposes only!

book-club-amsterdam's People

Contributors

gokralj avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.