Related questions
I need help with adding the changes I have added everything I have so far below you simply need to cut and paste it into an HTML/CSS Compiler
<!DOCTYPE html>
<html lang="en">
<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;
}
/* 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>
<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>
Step by stepSolved in 2 steps with 1 images
- Provide an example of C language program that 1) reads an HTML file and 2) stores the contents of that file as a string and 3) prints it to the screen. Use the following as the html code. Thank you. <!DOCTYPE html><html><body><h1>My First Heading</h1><p>My first paragraph.</p></body></html>arrow_forwardAssignment LRU paging A program has the following page reference string 0123342453346256 If we allocate 3 page frames to the program, 1. Please draw a figure to show the page allocation/replacement.arrow_forwardJAVASCRIPT: Part I– For you “Login.html” page, we are going to do some Javascript validating. First validate that the user typed in something in both textboxes. If either textbox is empty, pop-up a message that tells the user that they must enter a Valid Customer ID and Password. Part II– Again for you “Login.html” page, validate that the Customer ID is a Number, not a string. Also all Customer IDs are numbers between 3000 and 3999. All 4 digit numbers. Validate that all Customer IDs are numbers between 3000 and 3999.arrow_forward
- Part 5: JavaScript - Displaying the Input The next step is to display the user input on the HTML page. The input data is stored in the array, so each element in the array will become a separate line of output on the web page. Eventually, we will ensure the output is all upper case, and that each line of text is a different, random color. Below is an example of the final output, assuming the user input a, b, c, and then finally nothing. To display the output, you will need to use another loop structure: for, while, or do...while. You choose. Before outputting to the browser, first, output to the console to ensure your looping works. >> Use an appropriate loop structure to loop through the input data array, and output each array item to the console. Now that you're working with the data, you might as well make adjustments to ensure each item is now displayed as upper case. >> Make coding changes to display the input data output to the console as all upper case content. Now…arrow_forwardDisplay Images Design a GUI Application Java program GUIarrow_forward<!DOCTYPE html><html lang="en"> below is box-styles.css <style> @import url('https://fonts.googleapis.com/css2?family=Rubik+Mono+One&display=swap'); body { font-size: 62.5%; margin: 0;} h1 {font-size:4em;text-align: center;font-family: 'Rubik Mono One', sans-serif;} h3 {font-size: 2em;} p {font-size: 1.5em;} h3, p { margin:0; } .title-padding { padding: 5% 10%; } .body-padding { padding-left: inherit; padding-right: inherit; padding-top: 7%; } .light-shadow { box-shadow: transparent; } .max-width { max-width: 50em;} /* .full-width { } */ .center-element { margin-top:8em; margin-left:inherit; margin-right: inherit; text-align: center; } .round-borders { border:1px solid black; border-radius: 0.25em; font-size: 2em; } .bb { box-sizing: content-box; width:100%; padding: inherit; margin: inherit; } .cb { box-sizing: content-box; } </style>above is the box-styles.css <head> <meta…arrow_forward
- The code is below and use the code to answer the 3 questions that is attached as an image: #include <stdio.h>#include <stdlib.h>#include <unistd.h>#include <errno.h>#include <signal.h> void sigint_handler(int sig){ (void)sig; // remove unused variable warning write(0, "Ahhh! SIGINT!\n", 14);} int main(void){ void sigint_handler(int sig); /* prototype */ char s[200]; struct sigaction sa; sa.sa_handler = sigint_handler; sa.sa_flags = 0; // or SA_RESTART; sigemptyset(&sa.sa_mask); // if (sigaction(SIGINT, &sa, NULL) == -1) {// perror("sigaction");// exit(1);// } printf("Enter a string:\n"); if (fgets(s, sizeof s, stdin) == NULL) perror("fgets"); else printf("You entered: %s\n", s); return 0;}arrow_forward3arrow_forwardjava 1 eclips pls fix code for don't know where i made the miskatearrow_forward
- .</tr> </table> </form></body></html>.arrow_forwarduse the given code to answer the following questions. <style> #wrapper { Display: flex; Flex- wrap: wrap; Justify-content: space-between ; } .box { Width: 500px; Border: solid 1px blue; Margin:5px; } </style> <div id “wrapper”> <div class “box”> Box 1</div> <div class “box”> Box 2</div> <div class “box”> Box 3</div> <div class “box”> Box 4</div> </div> How will the boxes be arranged if the viewpoints width is 600px? Two rows of two A single row of four A row of three with one below A single column of fourarrow_forward<!DOCTYPE html><html lang="en"> below is box-styles.css <style> @import url('https://fonts.googleapis.com/css2?family=Rubik+Mono+One&display=swap'); body { font-size: 62.5%; margin: 0;} h1 {font-size:4em;text-align: center;font-family: 'Rubik Mono One', sans-serif;} h3 {font-size: 2em;} p {font-size: 1.5em;} h3, p { margin:0; } .title-padding { padding: 5% 10%; } .body-padding { padding-left: inherit; padding-right: inherit; padding-top: 7%; } .light-shadow { box-shadow: transparent; } .max-width { max-width: 50em;} /* .full-width { } */ .center-element { margin-top:8em; margin-left:inherit; margin-right: inherit; text-align: center; } .round-borders { border:1px solid black; border-radius: 0.25em; font-size: 2em; } .bb { box-sizing: content-box; width:100%; padding: inherit; margin: inherit; } .cb { box-sizing: content-box; } </style>above is the box-styles.css <head> <meta…arrow_forward
- Computer Networking: A Top-Down Approach (7th Edi...Computer EngineeringISBN:9780133594140Author:James Kurose, Keith RossPublisher:PEARSON
Computer Organization and Design MIPS Edition, Fi...Computer EngineeringISBN:9780124077263Author:David A. Patterson, John L. HennessyPublisher:Elsevier Science
Network+ Guide to Networks (MindTap Course List)Computer EngineeringISBN:9781337569330Author:Jill West, Tamara Dean, Jean AndrewsPublisher:Cengage Learning 
Concepts of Database ManagementComputer EngineeringISBN:9781337093422Author:Joy L. Starks, Philip J. Pratt, Mary Z. LastPublisher:Cengage Learning
Prelude to ProgrammingComputer EngineeringISBN:9780133750423Author:VENIT, StewartPublisher:Pearson Education
Sc Business Data Communications and Networking, T...Computer EngineeringISBN:9781119368830Author:FITZGERALDPublisher:WILEY