Testimonial Section Recreation
I'll create the HTML and CSS to match the testimonial section in your screenshot. This is a clean, professional testimonial slider with navigation controls.
Testimonial Section
v1
index.html
Testimonial Section
v1
styles.css
Notes on Implementation
- Structure: I've created a testimonial section with a card that contains the quote, author information, and navigation controls.
Styling:
- Used a light teal background (
#c2f0e8) for the section - Added large quote marks in a teal color
- Included a circular profile image
- Created pagination dots with the first one active
- Added navigation buttons with the next button highlighted
- Used a light teal background (
- Responsive Design: The CSS includes media queries to ensure the testimonial looks good on smaller screens.
- Functionality: This is a static HTML/CSS implementation. To make the slider functional, you would need to add JavaScript to handle the navigation between testimonials.
295d ago
Testimonial Section with BEM and SCSS
I'll refactor the testimonial section using BEM naming convention and convert the CSS to SCSS.
HTML with BEM Classes
Testimonial Section BEM
v1
index.html
SCSS with BEM Structure
Testimonial Section BEM
v1
styles.scss
Key Changes Made
1. BEM Naming Convention Implementation
I've restructured all class names to follow the BEM methodology:
- Block:
testimonialas the main component - Elements: Using double underscores like
testimonial__title,testimonial__content, etc. - Modifiers: Using double dashes like
testimonial__quote--left,testimonial__dot--active
2. SCSS Features Used
- Variables: Defined colors, fonts, and other reusable values at the top
- Nesting: Used SCSS nesting to organize the code hierarchically
- Parent Selectors: Used the
&symbol to reference the parent selector - Modifiers: Nested modifiers within their elements
3. Organization
- Grouped related styles together
- Used comments to separate major sections
- Maintained the same visual appearance while improving code structure
To use this SCSS, you'll need to compile it to CSS using a Sass compiler. The compiled CSS will work exactly like the original CSS but with the improved BEM class naming convention.
295d ago