Testimonials Slider

In promotion and advertising, a testimonial or show consists of a person's written or spoken statement extolling the virtue of a product. This project made with HTML, CSS/Sass and JavaScript.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • Useful resources
• Front End Style
• Colors
• Typography

Overview

The challenge

Users should be able to:

• View the optimal layout for the component depending on their device's screen size
• Navigate the slider using either their mouse/trackpad or keyboard

Screenshot

Links

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

My process

Built with

• Semantic HTML5 markup
• CSS, Sass
• Flexbox
• Desktop-first workflow
• JavaScript
• If statement
• Increment and Decrement
• JavaScript Callbacks
• KeyboardEvent key Property

Useful resources

• Reviews Tutorial by Coding Addict
• Javascript Tutorial and Projects Course by John Smilga

Front-end Style Guide

Layout

The designs were created to the following widths:

• Mobile: 375px
• Desktop: 1440px

Colors

Primary

• Dark Blue: hsl(240, 38%, 20%)
• Grayish Blue: hsl(240, 18%, 77%)

Typography

Body Copy

• Font size: 32px

Font

• Family: Inter
• Weights: 300, 500, 700