My Team - A three page responsive website

Overview
Author

Overview

This project is built with HTML5, CSS, Tailwind, React (ES6), and Next Js. The form data will be sent to the FormSpree API for collection.

The HTML

The HTML has:

Three pages:
- Home
  - Nav bar
  - Header
    - Find the best (h1)
    - Info text (p)
    - Two background images at desktop size
    - Only one background image at tablet and mobile size
  - Build and manage
    - Build and manage (h2)
    - Background Image
    - Benefits cards
      - Experienced Individuals (h3)
      - Easy to Implement (h3)
      - Enhanced Productivity (h3)
    - Delivering results (h2)
      - Two background Image
      - Success stories cards
        
        Quote
        
        Full name (h3)
        
        Position
        
        Avatar
        
        Background quote image
    - Ready to get started
    - Footer
- About
  - Header
    - About (h1)
    - Info text (p)
    - Background image
  - Meet the Directors (h2)
    - Two background images
    - director card
      - Avatar
      - Full name (h3)
      - Position (p)
      - Plus or minus btn that shows/hides
        
        Full name (h2)
        
        Quote
        
        Social icons
  - Clients
    - Background image
      - Some of our clients (h2)
      - list of clients (Image)
  - Ready to get started
  - Footer
- Contact
  - Nav
  - Header
    - Contact (h1)
    - Ask about (h2)
    - Benefits cards
      - Quality (h3)
      - Usage (h3)
      - Innovation (h3)
  - Form
    - Name
    - Email address
    - Company name
    - Title
    - Message
    - Submit btn
  - Footer
All pages will reuse the following components:
- Nav
  - Logo
  - Page links
  - Contact Btn
- Footer
  - Logo
  - Page links
  - Address
  - Social links
  - Copyright
Other components reused across pages:
- Ready to get started
  - Background image
  - Ready to get started (h2)
  - Contact Btn
- Benefits cards
  - Image
  - Heading (h3)
  - Info (p)

The CSS

The CSS has:

Modular style sheets
Mobile first development
Tailwind - only used for general styling like margin and padding
Prefers light or dark mode
Variables
The organization of the styles.css will be(in descending order):
- Variables
- Resets
- All typography
- Media query for typography
- General styles
- Media query for General styles

The JavaScript

The JavaScript has:

All forms will use FormSpree for data collection
GetWindowWidth function to dynamically render content
ToggleClass function to toggle a class for dynamic rendering and transitions
Logic for mobile nav bar

Expected Behavior

All Pages

When the "Contact us" call-to-action in the Nav bar is clicked, navigate to the Contact page

Users should be able to:

View the optimal layout for each page depending on their device's screen size
See hover states for all interactive elements throughout the site

Home

When the "Contact us" call-to-action in the Ready to get started component is clicked, navigate to the Contact page

About

When the "Contact us" call-to-action in the Ready to get started component is clicked, navigate to the Contact page
See the correct content for each team member when the + icon is clicked
Hide the extra content for each team member when the - icon is clicked

Contact

Receive an error message when the contact form is submitted if:
- The Name, Email Address or Message fields are empty should show "This field is required"
- The Email Address is not formatted correctly should show "Please use a valid email address"

Screenshot

Built with

Semantic HTML5 - HTML5 with clear and descriptive tags for better accessibility and search engine optimization
CSS - A utility-first CSS framework
Mobile-first workflow
Tailwind - A utility-first CSS framework
Mobile-first workflow
React - JS library
Next.js - React framework
FormSpree - Form API with endpoint for submitted form data to be sent to

Author

Frontend Mentor - @Eileenpk
LinkedIn - @Eileenpk

Eileenpk/My-Team