Lab 14 Sticky Note Board Transforms CSS transforms change the shape and position of the affected content without disrupting the normal document flow. Translate translate() repositions an element in the horizontal and/or vertical directions. Scale scale() defines a transformation that resizes an element on the 2D plane Rotate rotate() defines a transformation that rotates an element around a fixed point on the 2D plane Skew skew() defines a transformation that distorts an element on the 2D plane Matrix matrix() defines a homogeneous 2D transformation matrix I'm new to coding and I need help doing this section for my homework down below! need help adding these color IDs from the image to each of the sticky notes from one to 6 I think I've put all the needed code for both files here 2. Using the colors below, apply a background-color to each div.sticky note Use the id selectors in colors.css to apply these styles. #D29DE9 #E6E921 #FA66BC #F6B744 #C3E129 #985784
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>
I'm new to coding and I need help doing this section for my homework down below! need help adding these color IDs from the image to each of the sticky notes from one to 6 I think I've put all the needed code for both files here
2. Using the colors below, apply a background-color to each div.sticky note Use the id selectors in colors.css to apply these styles. #D29DE9 #E6E921 #FA66BC #F6B744 #C3E129 #985784
Step by step
Solved in 2 steps
