Frontend Mentor - Manage landing page solution

This is a solution to the Manage landing page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
• Author

Overview

The challenge

Users should be able to:

• View the optimal layout for the site depending on their device's screen size
• See hover states for all interactive elements on the page
• See all testimonials in a horizontal slider
• Receive an error message when the newsletter sign up form is submitted if:
  • The input field is empty
  • The email address is not formatted correctly

Screenshot

💻-Desktop-view

📱-Mobile-view

Links

• Solution URL: Click here
• Live Site URL: Click here

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• SASS/SCCS
• SCSS Modules
• Mobile-first workflow
• React - JS library

What I learned

I learned how to make carousel with the Swiper JS.

import "../../scss/components/_carousel.css"
import { Swiper, SwiperSlide } from 'swiper/react';
import { Pagination } from 'swiper';

// Import Swiper styles
import 'swiper/css';
import 'swiper/css/pagination';


export default () => {
  return (
    <section className="swiper-section" id="careers">
    <h1>What they’ve said</h1>
    <Swiper
      // install Swiper modules
      modules={[ Pagination]}
      slidesPerView={1}
      spaceBetween={5}
      loop={true}
      centeredSlides={true}
      pagination={{ clickable: true }}
      onSwiper={(swiper) => console.log()}
      onSlideChange={() => console.log()}
 
  	
      breakpoints={{
        640: {
          slidesPerView: 2,
          spaceBetween: 5,
        },
        768: {
          slidesPerView: 2.5,
          spaceBetween:5,
        },
        1023: {
          slidesPerView: 2.5,
          spaceBetween: 5,
        }
      
      }}
   
    >

Useful resources

• React Doc
• Swiper JS

Author

• Frontend Mentor - alpbrace