Everything is Better With Pizza Book Club is a site that hopes to connect people in Dublin, Ireland who are passionate about reading and love eating pizza. The book club runs on a montly basis. There is a book selected to each month and the meetings happen at a different pizza place every month.
This site is target at people who love reading and share another commom interest: pizza. 🍕
- As an user, I want to find all the information about the club.
- As an user, I want to know how I can join the club.
- As an user, I want to know how the meetings work.
- As an user, I want to see what books are selected for the year.
- As an user, I want to contact the club.
- As an user, I want to know the club social media.
- As an user, I want to join the club.
- As an user, I want to have an easy and clear view of the website on my mobile and desktop.
- As an user, I want to return to the website and see if there are any updates.
- HTML
- This project uses HTML to structure the website
- CSS
- This project uses CSS to style the website
- Google Fonts
- This projects uses Google Fonts
- Font Awesome
- This project uses Font Awesome for icons
- GitHub Pages
- This project uses GitHub pages to host the website
- Balsamiq
- This project uses Balsamiq to create wireframes
- Canva
- This project uses Canva to create the logo
- This project uses Canva Color Palette Generator to create the color scheme
- Pexels
- This project uses Pexels for images
- Favicon.io
- This project uses Favicon.io to transform the logo into a favicon
The Logo was created on Canva.
The palette was defined uploading the logo on the Canva Color Palette Generator
- #E2DCD8
- #344E55
- #ECC422
- #894E37
-
Navigation
- It's on the top of every page. On the left shows the book club logo which is a link to the home page.
- On the right side we have three other links: Home to the home page, 2023 Picks to the page that contains all the books chosen for 2023, and Join Us the page with the form to sign up for the group.
- The navigation is the same for every page. The only thing that changes is that the current page is underlined.
- When the mouse hover on the links, the font size increases and they become underlined.
-
Landing Page
- The landing page includes an image of a book and a pizza slice with a text on the right end corner with the name of the club and some short explanation of what the club is about.
-
About Us
- The about us section gives an explation about how the club works.
- It contains five boxes showing the 5 steps to be done to join the club.
-
Meetings
- The meetings sections explains how often meetings occur.
- It has three images that demonstrating examples of meetings.
-
Contact
- The contact section is divided in two.
- The first part contains the Contact Us information with phone and email.
- The second part is Follow Us which contains icons which are links for the club social media: Facebook, Twitter, Instagram and Youtube.
-
Footer
- The footer is the same for all pages and it is located on the end of all of them.
- It contains the copyright mark and the name of the club.
- After that we have information about the developer.
- In the end we have two icons as links for the developer's GitHub and LinkedIn profiles.
-
2023 Picks
- This page contains all the books that are going to be read in 2023 by the club.
- It contains 12 boxes, each representing a month.
- Every box contain the name of the month, a picture of the book, the name of the book, the author and a button with the link to buy the book on Amazon.
- The button contains the amazon logo and change colors when the mouse hover it.
-
Join Us
- The join us page has the form to join the group.
- The form has three inputs: first name, last name and email.
- The form also have a submit button.
-
Thank You
- The thank you page is showed after the form submission.
- It has a thank you message and informs the user that the club will contact them shortly and a link to return to the home page.
- It shows an image of a person eating pizza and reading a book at the same time.
-
404
- This page is showed when the user try to access a page that does not exist.
- It has a message informing that the page was not found and a link to return to the home page.
- The image below shows pizzas boxes with only one slice of pizza left.
-
This site was tested on the browsers: Firefox, Chrome and Safari on desktop and it worked.
- Chrome
- Home Page
- 2023 Picks
- Join Us
- Thank You
- 404
- Home Page
- Safari
- Home Page
- 2023 Picks
- Join Us
- Thank You
- 404
- Home Page
- Firefox
- Home Page
- 2023 Picks
- Join Us
- Thank You
- 404
- Home Page
- Chrome
-
I tested the responsiveness of this site on devtools and I can confirm it worked for all screen sizes.
-
iPhone SE - 375 x 667
- Home
- 2023 Picks
- Join Us
- Thank You
- 404
- Home
-
iPad Air - 820 x 1180
- Home
- 2023 Picks
- Join Us
- Thank You
- 404
- Home
-
-
I confirm that all the navigation links, icons with links and buttons are working.
-
I can confirm that the form works properly. All the inputs are required, the email is validated and the submit button works.
- HTML
- No errors were returned when passing the pages through the official W3C validator:
- CSS
- No errors were found when passing through the official (Jigsaw) validator
- Accessibility
- Using Lighthouse on devtools, I can confirm that the colors and fonts chosen are easy to read and accessible.
- Home
- 2023 Picks
- Join Us
- Thank You
- 404
- Home
- Using Lighthouse on devtools, I can confirm that the colors and fonts chosen are easy to read and accessible.
-
Homepage keeps with an extra margin on the right side.
- I had a margin of 2rem on the about-us section that was causing the issue. I commented section by section to see which one was causing the issue. I added a 0 on the margin for the sides.
-
Footer was not sticking to the bottom.
- I put bottom: 0, but it still was not working. Devtools showed that it would not be changed with a static position. So I changed the footer position to absolute and width to 100% because it change the width to smaller when I changed the position. Changing to absolute worked with pages with less content but not with larger content, so I changed to fixed and it worked. Fixed did not work with larger contents. I changed the body to min-height: 100vh; display: flex; flex-direction: column; and added flex-grow: 1 to the join-us section which was the only one that the content did not reach the end for the footer to stay in the bottom as suggested here https://stackoverflow.com/questions/34796085/how-to-stick-footer-to-bottom-not-fixed-even-with-scrolling
- The site was deployed to GitHub pages. The steps to deploy are as follows:
- In the GitHub repository, navigate to the Settings tab
- On the left side menu, on the section Code and automation, click on Pages.
- From the source section drop-down menu, select the Deploy from a branch.
- From the branch section drop-down menu, select main, right on the side select /root.
- Once the the branch menus have been selected, github will create the page. It might take a few minutes. Once it is done a link will show up on the top of the page.
The live link can be found here - Everything is Better with Pizza Book Club
- To fork this site go to its GitHub repository https://github.com/tanisecarvalho/pizza-book-club
- On the top right of the page there's a button with the option Fork, click on it.
- A new page "Create a new fork" will open. If you wish, you can edit the name.
- In the end of the page click on the button "Create fork".
- Now you have a copy of the project on your repositories.
- This site was developed using Gitpod. To edit your copy on Gitpod you will need to:
- On your browser of choice install the gitpod extension/add-on.
- On GitHub open the project repository you forked before.
- On the top of the page, over the files, there is a green button on the right side of the page saying "Gitpod". Click it.
- It will open the Gitpod website. On the first time, you will select to connect with your GitHub account and Authorize gitpod-io. After that you'll be creating an account.
- It might take a while after that because gitpod will be creating your workspace.
- After the workspace is loaded, you're able to edit it on Gitpod.
- The icons were taken from Font Awesome
- Change the cursor from pointer to hand on the buttons was following the instructions at MDN Web Docs.
-
Besides the books covers, all the images were taken from Pexels
- Home Page
- Landing Section Background
- Meetings: Left, Center, and Right
- Thank You Page
- 404 Page
- Home Page
-
Books Covers
The images from the book covers were taken from the following websites:
