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 |
- 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.
- 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
- Content max-width::
50em
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.
Drop this folder into your Markbot application. Make sure to fix all the errors. And submit for grades using Markbot.