Advance CSS by making use of SCSS & BEM principles

Assignment : Advance CSS by making use of SCSS & BEM principles

Result: Take a look at this project : https://advance-css-ba2f6f.netlify.app/

Description

This final assignment consists of 3 separate CSS challenges, which are getting more and more difficult.

• Use Sass and the BEM principle for each assignment.
• The site should not scroll horizontally unless your window is very narrow (think less than 400px)

Specification:

Level 1: Make a testimonial

Create a Testimonial card. The testimonial should look exactly the same as our example

• footer testimonial - purple / blue: # 686de0
• Background page - gray: # c3cfe2
• Text background color - white: #fff
• You can use a random portrait photo, of yourself or a stock photo.

Level 2: Portfolio Grid

We will place these cards in a grid. Pay attention to the requirements below Specifications:

• Background page gray: # c3cfe2
• A button will appear on hover. The picture disappears, smoothly. Mobile responsive
• Your grid is mobile responsive for 3 screens:
• Desktop: 3 columns
• Tablet: 2 columns
• Mobile: 1 column

Level 3 Social Media Buttons

• Create your own animated social media buttons sticky on the right