Giter VIP home page Giter VIP logo

moee21-portfolio-project-1's Introduction

Cut The Fat!

Cut The Fat! offers different group fitness class types with a good nutrition plan in Angered, Sweden. The site will target those looking to lose weight and burn fat to be fitter and healthier, And they will find all the information they need to know about Cut The Fat! starting from us, type of classes, and contact information.

Welcome! https://moee21.github.io/portfolio-project-1/

Features

The Header

The Header shows the name of the fitness classes, an excellent motivational quote, and a background image.

Navigation Bar

The full responsive Navigation bar shows the Home page at the top left center of the page, next to it: About us, Classes, and Contact us Form. All the sections allow the user to navigate from page to page across all devices.

About Us Section

About us shows the user the information they need and what they offer.

# Classes Section The Classes Section will provide the user with supporting images to see what the meet-ups look like.

# Contact Us The Contact us Form collects the user's first name, last name, email, and subject. The Subject field allows users to contact fitness classes and write their inquiries.

Testing

I confirm that the Header, Navigation, About us, Classes section, and Contact us are all readable and easy to understand. I have confirmed that the Contact Us Form works, entries require in every field, and the submit button works.

Validator Testing

HTML

No error through the official W3C validator.

CSS

passed the test through the official (Jigsaw) validator.

Accessibility

I confirm that the colors and fonts chosen are easy to read and accessible by running it through lighthouse in devtools.

Bugs

When I added the Header background image and checked it, I discovered that there was no image. I figured out that the image link was not correctly connecting to my CSS file, and that was because I forgot to use the double dot, which indicates the relative file path. background-image : url(../img/apple-or-donut.jpg);

Deployment

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 General Navigation bar, on the left-hand side, select pages and then source. From the Source section drop-down menue, select The main Branch. Once the master branch has been selected, the page provided the link to the completed website. The Live link can be found here: https://moee21.github.io/portfolio-project-1/

Credits

Content

The quotes on the Header's background is by Confucius. The text for the about us is from blogearns.com. Instructions on how to implement media query was from https://w3schools.com .

Media

All images and photos used on the Header's background and on classes section are from https://www.pexels.com/

moee21-portfolio-project-1's People

Contributors

moee21 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.