Unit09 Landscape & Lighting

Overview

In this module, you will build a page for a fictitious landscape company that features an image slider with overlay text and cards that have fancy bottom edges. You will also use clipping masks to alter the presentation shape of a square image.

Vocabulary

Image Slider

A slider is a design element used to display videos and images on a website. Like a slideshow, photos or video display one at a time. The content changes when users drag to see the next slide, or it changes automatically after a few seconds.

Objectives

At the end of this module, you should be able to...

• Build an image slider with overlay text
• Create responsive cards with PNG images as alternate bottom edges
• Create responsive cards with SVG images as alternate bottom edges

Tasks

• Access Swiper documentation and installation instructions
• Read about Clipping and Masking in CSS
• Use Clippy to make a clip-path

Watch

• Navigation Tutorials
• Download the Navigation Start File for the tutorials below.
• Watch 2610_nav_09a-Overview
• Watch 2610_nav_09b-Navigation Small
• Watch 2610_nav_09c-Navigation Large
• Page Content Tutorials
• Watch 2610_09a Landscape Overview
• Watch 2610_09b Image Slider Introduction
• Watch 2610_09c Build a Slider Using Swiper
• Watch 2610_09d Slider Responsive Images
• Watch 2610_09e Clip Path
• Watch 2610_09f Image Preperation with Photoshop
• Watch 2610_09g Overlaying Image Masks

Assignment Example

• View the small screen open navigation
• View the small screen layout
• View the medium screen layout
• View the large screen layout

Assignment Checklist

Unit09 Landscape & Lighting (10 pts)

Page Requirements

Your page needs to meet these requirements

• Page is responsive from 320px wide to 1600px wide with no horizontal scroll bar.
• Add a google font in the head tag appropiate to the target audience.
• Includes normalize, variables, small, medium, and large SCSS partial files.
• Media Queries are included in the styles.scss file.
• Implements a CSS Preprocessor.
• Demonstrate Contrast, Proximity, Alignment, Hierachy, Wayfinding, and Visual Tangent.
• Passes the HTML5 validation test.
• Passes the CSS3 validation test.
• Passes the WAVE web accessibility with no contrast errors.
• Initial page size is below 500k.

Header

The header of your page should contain the following:

• A 1x, 2x, 3x version of an appropiate Landscape & Lighting site logo with embedded text.
• Clickable phone number

Navigation

The two level deep navigation should feature:

• At least 4 main menu items
• One main menu item must have at least three sub menu items
• SMALL – Two level deep navigation with triangles ▼ for parent menus with children
• MEDIUM – drop down second level items
• LARGE – modified smaller anchors

Main

The main tag of your page should contain the following:

• Image slider with at least 3 similarly cropped photos
• Two card featuring fancy SVG bottom edges
• Two additional cards featuring fancy PNG bottom edges
• Two testimonials with clip-path applied to the photo

Footer

The footer tag of your page should contain the following:

• Use a copyright entity and bullet entity
• Display the year and your name
• Center align the text

Hosting this Assignment

• Create a new GitHub public repository
• Make your repository into a GitHub pages site
• Submit a link to the GitHub page

Page Requirements

Your page needs to meet these requirements

• Page is responsive from 320px wide to 1600px wide with no horizontal scroll bar.
• Add a google font in the head tag appropiate to the target audience.
• Includes normalize, variables, small, medium, and large SCSS partial files.
• Media Queries are included in the styles.scss file.
• Implements a CSS Preprocessor.
• Demonstrate Contrast, Proximity, Alignment, Hierachy, Wayfinding, and Visual Tangent.
• Passes the HTML5 validation test.
• Passes the CSS3 validation test.
• Passes the WAVE web accessibility with no contrast errors.
• Initial page size is below 500k.

Grade

In order to receive a grade for this assignment you must earn 90% of the points listed above.

• Pass
• Fail