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

New Perspectives on HTML5, CSS3, and JavaScript
6th Edition
ISBN:9781305503922
Author:Patrick M. Carey
Publisher:Patrick M. Carey
Chapter1: Getting Started With Html5: Creating A Website For A Food Vendor
Section: Chapter Questions
Problem 11CP1
icon
Related questions
Question

<!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

Expert Solution
steps

Step by step

Solved in 2 steps

Blurred answer
Knowledge Booster
Image Element
Learn more about
Need a deep-dive on the concept behind this application? Look no further. Learn more about this topic, computer-science and related others by exploring similar questions and additional content below.
Similar questions
  • SEE MORE QUESTIONS
Recommended textbooks for you
New Perspectives on HTML5, CSS3, and JavaScript
New Perspectives on HTML5, CSS3, and JavaScript
Computer Science
ISBN:
9781305503922
Author:
Patrick M. Carey
Publisher:
Cengage Learning