Skip to content

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

Notifications You must be signed in to change notification settings

ltw-webdev-2/responsive-image-section

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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
  • Content max-width:: 50em

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 for grades using Markbot.

About

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

Resources

Stars

Watchers

Forks

Releases

No releases published

Sponsor this project

 

Packages

No packages published