8/19/2019 HTML1 Card Flip

1/2

 

HTML1: Card Flip

Skills

● CSS Syntax

● CSS3

Resources

 A Beginner’s Guide to HTML & CSS - Shay Howe

WebPlatform: The Basics of HTML

MDN: Getting Started with CSS

CSS 2.1 Reference

W3 Schools: Opacity

W3 Schools: CSS3 Transitions

W3 Schools: CSS3 Transform

Background

You've been working hard and it's time to show off your work! Build yourself a slick

online portfolio to display your projects.

Requirements

Using the starter html, css, and images, do the following:

Copyright © 2014 RefactorU™ All Rights Reserved.

Page 1 of 2

http://www.google.com/url?q=http%3A%2F%2Fwww.w3schools.com%2Fcssref%2Fcss3_pr_transform.asp&sa=D&sntz=1&usg=AFQjCNHGw3-q9N0X8cPXwEe4RMESfViCOghttps://www.google.com/url?q=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FGuide%2FCSS%2FGetting_started%3Fredirectlocale%3Den-US%26redirectslug%3DCSS%252FGetting_Started&sa=D&sntz=1&usg=AFQjCNGksStjK631c1keomdYx_Hl9acL7Qhttp://www.google.com/url?q=http%3A%2F%2Fdocs.webplatform.org%2Fwiki%2Fguides%2Fthe_basics_of_html&sa=D&sntz=1&usg=AFQjCNHC2zo5jy9xaiVXxXTVq92_IkctIAhttps://www.google.com/url?q=https%3A%2F%2Fgithub.com%2FRefactorU%2Fexercise-starters%2Ftree%2Fmaster%2Fhtml%2Fcard-flip&sa=D&sntz=1&usg=AFQjCNFPgJFcJbOgssqOzyvXtnK-fqkzfAhttp://www.google.com/url?q=http%3A%2F%2Fwww.w3schools.com%2Fcssref%2Fcss3_pr_transform.asp&sa=D&sntz=1&usg=AFQjCNHGw3-q9N0X8cPXwEe4RMESfViCOghttp://www.google.com/url?q=http%3A%2F%2Fwww.w3schools.com%2Fcss3%2Fcss3_transitions.asp&sa=D&sntz=1&usg=AFQjCNFY8fk2Vwzf7L5ZkS_oLl9vm_hiOQhttp://www.google.com/url?q=http%3A%2F%2Fwww.w3schools.com%2Fcss%2Fcss_image_transparency.asp&sa=D&sntz=1&usg=AFQjCNHwll_wZiuGGBvbRra9hVJJlK1bzQhttp://www.google.com/url?q=http%3A%2F%2Fculturedcode.com%2Fcss%2Freference.html&sa=D&sntz=1&usg=AFQjCNHajPcQzRryf9AHWgp4o8ZGy5eYpAhttps://www.google.com/url?q=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FGuide%2FCSS%2FGetting_started%3Fredirectlocale%3Den-US%26redirectslug%3DCSS%252FGetting_Started&sa=D&sntz=1&usg=AFQjCNGksStjK631c1keomdYx_Hl9acL7Qhttp://www.google.com/url?q=http%3A%2F%2Fdocs.webplatform.org%2Fwiki%2Fguides%2Fthe_basics_of_html&sa=D&sntz=1&usg=AFQjCNHC2zo5jy9xaiVXxXTVq92_IkctIAhttp://www.google.com/url?q=http%3A%2F%2Flearn.shayhowe.com%2Fhtml-css%2F&sa=D&sntz=1&usg=AFQjCNEFxKIZYuI77Kkg61LjZ0_uPYGgWQ

8/19/2019 HTML1 Card Flip

2/2

 

1. Adjust the position of the .primary and .secondary  elements so that they are

right on top of each other

2. Using opacity, adjust the CSS so that only .primary  is visible

3. On hover, hide .primary and show .secondary

4. Set up a transition so that you have a smooth crossfade on hover

5. Switch your portfolio to use 3d rotations to produce a card-flip effect

Copyright © 2014 RefactorU™ All Rights Reserved.

Page 2 of 2