Schedule

Re-create this image of a webpage in HTML and CSS. Use this photo and this Wikipedia link. Use these hints:

• Include a custom web font from Google with a <link> tag and h1 { font-family: PlayFair Display, serif; }
• Change the paragraph font to Georgia with p { font-family: Georgia, serif; }
• Float an image with img { float: left; }
• The top color of the background gradient is #1AD6FD
• Center a block-level element by setting a valid width and declaring margin-left: auto; and margin-right: auto;

Note: Redisplaying the assignment image will result in a score of 0.

Create ten squares of the same size with ten different colors. Three colors should be hex, three colors should be RGB, and four colors should be gradients using hex or RGB. Apply each effect to a different square, specifically:

• Rotate a square 89deg and scale it by 1.7.
• Translate a square -15px horizontally and 5% vertically.
• Add a perspective of 200px, skew a square 10deg vertically, rotate 45deg along X axis, and change transform origin to bottom right.
• Add a perspective of 148px, and rotate a square along the Y axis by 64deg.
• Add a perspective of 204px, rotate a square on the X axis by 23deg, scale by 1.64, and scale on the Z axis by 1.99.
• Add the word “square” to a box and flip the text as if it were to appear in a mirror.
• Create a transition that changes the background color to #aaa over .5s with a linear transition
• Create a transition that changes the background color to #57890a over .5s with a linear timing function, the border radius to 50% over 1.3s with an ease-in-out timing function
• Create an animation on a stage that moves the square in a square path that is a 200px wide and 200px high, changes the square to a circle and fades to #678fa3 halfway through, then changes the circle back to a square at the end and fades back to original color, all with an ease-in timing function
• Create an animation on a stage that moves the square from the left edge of the browser to the right edge of the browser, over 1s, with an ease-out timing function, that rotates 720deg on the right and back to 0deg on the left, and includes a pause with an :active pseudo-class.