html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./styles/styles.css">
<title>Lab 14</title>
</head>
<body>
<div>
<h2>Sticky Note Board</h2>
<div class="sticky-board">
<div style="display: relative;">
<div class="sticky-note" id="first">
<div class="sticky-note-title">
Transforms
</div>
<div class="sticky-note-body">CSS transforms change the shape and position of the affected content without disrupting the normal document flow.</div>
</div>
</div>
<div class="sticky-note" id="second">
<div class="sticky-note-title">
Translate
</div>
<div class="sticky-note-body"><code>translate()</code> repositions an element in the horizontal and/or vertical directions.</div>
</div>
<div class="sticky-note" id="third">
<div class="sticky-note-title">
Scale
</div>
<div class="sticky-note-body"><code>scale()</code> defines a transformation that resizes an element on the 2D plane</div>
</div>
<div class="sticky-note" id="fourth">
<div class="sticky-note-title">
Rotate
</div>
<div class="sticky-note-body"><code>rotate()</code> defines a transformation that rotates an element around a fixed point on the 2D plane</div>
</div>
<div class="sticky-note" id="fifth">
<div class="sticky-note-title">
Skew
</div>
<div class="sticky-note-body"><code>skew()</code> defines a transformation that distorts an element on the 2D plane</div>
</div>
<div class="sticky-note" id="sixth">
<div class="sticky-note-title">
Matrix
</div>
<div class="sticky-note-body"><code>matrix()</code> defines a homogeneous 2D transformation matrix</div>
</div>
</div>
</div>
</body>
</html>
<style>
/* colors.css */
.sticky-note {
/* DON'T EDIT ME */
color: black;
background: #D29DE9;
}
.sticky-note-title {
/* DON'T EDIT ME */
color: inherit;
}
.sticky-note-body {
/* DON'T EDIT ME */
color: inherit;
}
#first {
/* Add styles here */
}
#second {
/* Add styles here */
}
#third {
/* Add styles here */
}
#fourth {
/* Add styles here */
}
#fifth {
/* Add styles here */
}
#sixth {
/* Add styles here */
}
/* formatting.css*/
.sticky-note-title {
/* DON'T EDIT ME */
padding: 1rem;
font-size: 2rem;
}
.sticky-note-body {
/* DON'T EDIT ME */
transform: rotate(0);
padding: 1rem;
font-size: 1.5rem;
}
.sticky-board {
/* DON'T EDIT ME */
margin-top: 2em;
display: flex;
padding: 3em;
flex-wrap: wrap;
gap: 1em;
justify-content: center;
}
.sticky-note {
flex-shrink: 0;
width: 20em;
height: 20em;
/* Add styles here */
}
#first {
/* Add styles here */
/* initial state */
}
#second {
/* Add styles here */
/* initial state */
}
#third {
/* Add styles here */
/* initial state */
}
#fourth {
/* Add styles here */
/* initial state */
}
#fifth {
/* Add styles here */
/* initial state */
}
#sixth {
/* Add styles here */
/* initial state */
}
/* animations-transitions.css*/
.sticky-note {
/* Add styles here */
/* transition properties here! */
/* global animation properties here! */
}
#first {
/* Add styles here */
/* unique animation properties here */
}
#second {
/* Add styles here */
/* unique animation properties here */
}
#third {
/* Add styles here */
/* unique animation properties here */
}
#fourth {
/* Add styles here */
/* unique animation properties here */
}
#fifth {
/* Add styles here */
/* unique animation properties here */
}
#sixth {
/* Add styles here */
/* unique animation properties here */
}
/* add hover selectors for the each id selector */
/* create a keyframe animation "fall" below */
</style>
Step by step
Solved in 2 steps
