I need help with making me auditioned needed in the image I have provided the code I have so far Below please help To continue to work on this code to help me I have added everything needed below you simply need to cut and paste it into an HTML/CSS Compiler             homework 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

Computer Networking: A Top-Down Approach (7th Edition)
7th Edition
ISBN:9780133594140
Author:James Kurose, Keith Ross
Publisher:James Kurose, Keith Ross
Chapter1: Computer Networks And The Internet
Section: Chapter Questions
Problem R1RQ: What is the difference between a host and an end system? List several different types of end...
icon
Related questions
Question

I need help with making me auditioned needed in the image I have provided the code I have so far Below please help

To continue to work on this code to help me I have added everything needed below you simply need to cut and paste it into an HTML/CSS Compiler

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>homework 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 {
    background-color:#9857B4;
}
#second {
    background-color:#D29DE9;
}
#third {
    background-color:#FA66BC;
}
#fourth {
    background-color:#F6B744;
}
#fifth {
    background-color:#C3E129;
}
#sixth {
    background-color:#E6E921;
}

 


/* 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 {
     transform: rotate(75deg);
     transition: transform 500ms;    
}
#second {
     transform: rotate(75deg);
     transition: transform 500ms;
    }

#third {
     transform: rotate(75deg);
     transition: transform 500ms;
}
#fourth {
     transform: rotate(75deg);
     transition: transform 500ms;
}
#fifth {
     transform: rotate(75deg);
      transition: transform 500ms;
}
#sixth {
     transform: rotate(75deg);
     transition: transform 500ms;
}

 


/* animations-transitions.css*/

.sticky-note {
    /*     Add styles here */
    /* transition properties here! */
    
    /* global animation properties here! */
}
#first:hover{
     transform: rotate(0deg);
     transform: scale(1.25);
}
#second:hover {
 
    transform: rotate(0deg);
    transform: scale(1.25);

}
#third:hover {

    transform: rotate(0deg);
    transform: scale(1.25);
}
#fourth:hover {

    transform: rotate(0deg);
    transform: scale(1.25);
}
#fifth:hover {
 
    transform: rotate(0deg);
    transform: scale(1.25);
}
#sixth:hover {
    transform: rotate(0deg);
    transform: scale(1.25);
}        

/*     add hover selectors for the each id selector */

/*     create a keyframe animation "fall" below */

</style>

5. Next, you need to apply a 500ms animation called fall
to each sticky note. fall should move each sticky note 500px down the screen. Stagger the animation-delay so each sticky note falls at a different time. Each sticky note should retain its final position after
the animation completes.
6. Animation Hints:
o create a single animation named fall
o you will need to change the position property of div.sticky-note
o review the offset properties left
top
right and bottom
- one of these will help you!
o animation-fill-mode: forwards; allows elements to retain the final state of an animation
o the following animation properties only need to be defined once
animation-name
animation-duration
animation-iteration-count
animation-fill-mode
Transcribed Image Text:5. Next, you need to apply a 500ms animation called fall to each sticky note. fall should move each sticky note 500px down the screen. Stagger the animation-delay so each sticky note falls at a different time. Each sticky note should retain its final position after the animation completes. 6. Animation Hints: o create a single animation named fall o you will need to change the position property of div.sticky-note o review the offset properties left top right and bottom - one of these will help you! o animation-fill-mode: forwards; allows elements to retain the final state of an animation o the following animation properties only need to be defined once animation-name animation-duration animation-iteration-count animation-fill-mode
5. Next, you need to apply a 500ms animation called fall
to each sticky note.
fall should move each sticky note 500px down the screen. Stagger the animation-delay so each sticky note falls at a different time. Each sticky note should retain its final position after
the animation completes.
Transcribed Image Text:5. Next, you need to apply a 500ms animation called fall to each sticky note. fall should move each sticky note 500px down the screen. Stagger the animation-delay so each sticky note falls at a different time. Each sticky note should retain its final position after the animation completes.
Expert Solution
steps

Step by step

Solved in 5 steps with 9 images

Blurred answer
Recommended textbooks for you
Computer Networking: A Top-Down Approach (7th Edi…
Computer Networking: A Top-Down Approach (7th Edi…
Computer Engineering
ISBN:
9780133594140
Author:
James Kurose, Keith Ross
Publisher:
PEARSON
Computer Organization and Design MIPS Edition, Fi…
Computer Organization and Design MIPS Edition, Fi…
Computer Engineering
ISBN:
9780124077263
Author:
David A. Patterson, John L. Hennessy
Publisher:
Elsevier Science
Network+ Guide to Networks (MindTap Course List)
Network+ Guide to Networks (MindTap Course List)
Computer Engineering
ISBN:
9781337569330
Author:
Jill West, Tamara Dean, Jean Andrews
Publisher:
Cengage Learning
Concepts of Database Management
Concepts of Database Management
Computer Engineering
ISBN:
9781337093422
Author:
Joy L. Starks, Philip J. Pratt, Mary Z. Last
Publisher:
Cengage Learning
Prelude to Programming
Prelude to Programming
Computer Engineering
ISBN:
9780133750423
Author:
VENIT, Stewart
Publisher:
Pearson Education
Sc Business Data Communications and Networking, T…
Sc Business Data Communications and Networking, T…
Computer Engineering
ISBN:
9781119368830
Author:
FITZGERALD
Publisher:
WILEY