michaelarob / responsive-image-section

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

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.

• Final screenshots in the “screenshots” folder.
• Watch this video to see how it interacts.

---

Hand in

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