AlexandraPhilip / responsive-image-section

Create a responsive section that has an image on it's left half.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

summary time deliverables
Create a responsive section that has an image on it’s left half.
2 hours
1 HTML file, 1 CSS file, images

Responsive image section

Overview

  • Fork this repository.
  • Create the responsive layout shown in the included screenshots.
  • Check the video to see how the button hover state looks.
  • Text can be found inside the content.txt file.
  • Run it through Markbot and make sure it passes all the checks.

Details

  • Typefaces: sans-serif
  • Colours: #e2e2e2, #000, #555
  • Paddings: 1rem, 2rem
  • Button padding: 0.5em 0.75em
  • Button rounded corners: 4px
  • Expected tags: section, h1, p, a, img, div
  • Expected class names: .img-flex
  • Standard media query widths: 25em, 38em, 60em, 90em
  • Standard text sizes & line heights: 100%/1.3, 110%/1.4, 120%/1.5, 130%/1.5

Goal

Visually match the images in the “screenshots” folder and create the interaction shown in the linked video.


Hand in

Drop this folder into your Markbot application. Make sure to fix all the errors. And submit to Canvas using Markbot.

About

Create a responsive section that has an image on it's left half.


Languages

Language:CSS 70.0%Language:HTML 30.0%