3. Apply a unique rotate transform to each sticky note below. Use values between -75deg and 75deg. Use the id selectors in formatting.css to apply these styles. 4. When a user hovers over a sticky note, the element should rotate back to an unrotated position. Moreover, the element should scale to 1.25x its original size. It should complete this transition in 500ms o create :hover selectors for each id selector in animations-transitions.css to complete this task

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
100%

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>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 {
    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 {
    /*     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>

3. Apply a unique rotate transform to each sticky note below. Use values between -75deg and 75deg
Use the id selectors in formatting.css to apply these styles.
4. When a user hovers over a sticky note, the element should rotate back to an unrotated position. Moreover, the element should scale to 1.25x its original size. It should complete this transition in 500ms
o create : hover selectors for each id selector in animations-transitions.css to complete this task
Transcribed Image Text:3. Apply a unique rotate transform to each sticky note below. Use values between -75deg and 75deg Use the id selectors in formatting.css to apply these styles. 4. When a user hovers over a sticky note, the element should rotate back to an unrotated position. Moreover, the element should scale to 1.25x its original size. It should complete this transition in 500ms o create : hover selectors for each id selector in animations-transitions.css to complete this task
Expert Solution
steps

Step by step

Solved in 4 steps with 4 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