Homework 6 - Responsive images

[electrovladyslav]

Deadline

• Create pull request until 30 Nov, 21:00.
• Mistakes and comments should be resolved until 3 Dec, 20:00.

First of all

1. Get the latest updates from Academy's repo by instruction;

2. To your homework folder add a folder named 6-adaptive

3. Add your files into this folder:

homeworks/elon.musk_spacex2021/6-adaptive

Task description:

You have to create a landing page by this template - https://www.figma.com/file/qitjntv3APKTCHdg0eGUmQ/bonik-delivery-landing-page

Task points

• On the width of the template (1440px) your landing should look like a template (not pixel perfect but common sense).

• On the widths higher or less than 1440px, your markup should not be broken.

• You should use BEM methodology in the class naming.

• You should not use any frameworks or libraries (React, Vue, Bootstrap,...)

• You should make variants for display with high pixels density(retina) for all content bitmap(raster) images: a guy on the bike, laptops, and mobile from the "Company news" block. Insert them to the page through the picture tag.
  

• All buttons and links should have hover styles (design up to your UX) and should not redirect to any address.

The task with an asterisk (optional):

• You should add a mobile(320px)/tablet(768px) version. On it layout should change:
  • guy on the bike should disappear, remaining content should be centered;
    
  • blocks should take column way: on tablet version: two block in a row, on mobile - one
    
  • logotypes in block "Our clients" should take column way: on tablet version: three logo in a row, on mobile - one