- Approx. completion time: 1 hour
- Deliverables: 1 HTML file, 1 CSS file, images
Use media queries and float to make a responsive section on a website with three columns.
- Fork this repository.
- Duplicate the layout shown in the screenshots using media queries and float.
- Text can be found inside the
content.txt
file. - Run it through Markbot and make sure it passes all the checks.
- Typefaces:
Noto Sans
- Text sizes:
1.5rem
- Colours:
#e5c30a
- Expected class names:
.img-flex
,.wrapper
,.section-letter
,.section-icon
,.section-body
- 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
Visually match the images in the “screenshots” folder and create the interaction shown in the linked video.
Drop this folder into your Markbot application. Make sure to fix all the errors. And submit to Canvas using Markbot.
These challenges are here if you’d like to try a little more work—they are for extra experience and learning. They are completely optional and not graded. Show them to me if you’d like—I’d love to see them.
- Use flexbox and complete the layout using
display: flex
instead offloat