Marco, the angry rectangle

Developer
Keyon
Size
2,672 Kb
Views
8,096
  1. Marco, the angry rectangle Previews
  2. Marco, the angry rectangle HTML Codes
  3. Marco, the angry rectangle CSS Codes
  4. Marco, the angry rectangle JS Codes

How do I make an marco, the angry rectangle?

What is a marco, the angry rectangle? How do you make a marco, the angry rectangle? This script and codes were developed by Keyon on 10 January 2023, Tuesday.

Marco, the angry rectangle Previews
IQ Test

Marco, the angry rectangle - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Marco, the angry rectangle</title> <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <p Class="Title">Marco, the angry rectangle</p>
<div id="TDR" class="TD"> <p id="FP">(:</p>
</div>
<p id="SP1">Hi, my name is Marco</p>
<p id="SP">Try to go over me with the mouse cursor</p>
<div class="Subtitle"> <p>Keyon - <a style="color:#00897B; text-decoration:none;" href="http://www.uplabs.com/KeyonLulu" target="_Blank">UpLabs</a></p>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Marco, the angry rectangle - Script Codes CSS Codes

html { background: -webkit-linear-gradient(#FAFAFA, #90A4AE); width:100vw; height:100vh;
}
body { margin: 0px;
}
.TD { width: 170px; height: 70px; border-radius: 5px; background: -webkit-linear-gradient(left top, #80CBC4, #90CAF9); background: -moz-linear-gradient(left top, #80CBC4, #90CAF9); position: absolute; margin-left: auto; margin-right: auto; left: 0; right: 0; top: calc(50% - 50px); color:#009688; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
.TD:hover { -webkit-animation: example 1s infinite, bgcolor 2s infinite; -moz-animation: example 1s infinite, bgcolormz 2s infinite; color:#fff;
}
/*@-webkit-keyframes example { 0% { -webkit-transform: rotate(0deg); } 25% { -webkit-transform: rotate(-7deg); } 50% { -webkit-transform: rotate(7deg); } 75% { -webkit-transform: rotate(-7deg); } 100% { -webkit-transform: rotate(0deg); }
}*/
@-webkit-keyframes example { 0% { -webkit-transform: rotate(-7deg) scale(1.0); } 25% { transform: scale(1.3); } 50% { -webkit-transform: rotate(7deg) scale(1.0); } 75% { transform: scale(1.3) } 100% { -webkit-transform: rotate(-7deg) scale(1.0); }
}
@-moz-keyframes example { 0% { -moz-transform: rotate(-7deg) scale(1.0); } 25% { transform: scale(1.3) } 50% { -moz-transform: rotate(7deg) scale(1.0); } 75% { transform: scale(1.3) } 100% { -moz-transform: rotate(-7deg) scale(1.0); }
}
@-webkit-keyframes bgcolor { 0% { background: #D32F2F; } 30% { background: #D32F2F; } 50% { background: #F4511E; } 70% { background: #D32F2F; } 100% { background: #D32F2F; }
}
@-moz-keyframes bgcolormz { 0% { background: #D32F2F; } 30% { background: #D32F2F; } 50% { background: #F4511E; } 70% { background: #D32F2F; } 100% { background: #D32F2F; }
}
#FP { text-align:center; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); font-family:Open Sans; font-size:35px; margin:13px 0px 0px -5px; cursor:default;
}
#SP1 { position:absolute; text-align:center; width:300px; left:calc(50% - 150px); top:calc(55% - 5px); font-family:Open Sans; color:#607D8B;
}
#SP { position:absolute; text-align:center; width:320px; left:calc(50% - 160px); top:calc(55% + 20px); font-family:Open Sans; color:#607D8B;
}
.Subtitle { position: absolute; text-align: center; bottom: 5px; left: 0; right: 0; margin-left: auto; margin-right: auto; color: #607D8B; z-index: 999; font-family: Roboto; font-size: 19px;
}
.Title { position:absolute; width:350px; color:#607D8B; font-size:27px; font-family:Open Sans; text-align:center; left:30px; top:0px;
}

Marco, the angry rectangle - Script Codes JS Codes

$(document).ready(function(){ $("#TDR").mouseover(function(){ $("#FP").text("D:<"); $("#SP").text("And I hate you!"); $("html").css("background","-webkit-linear-gradient(#FAFAFA, #EF9A9A)"); }); $("#TDR").mouseout(function(){ $("#FP").text("(:"); $("#SP").text("Try to go over me with the mouse cursor"); $("html").css("background","-webkit-linear-gradient(#FAFAFA, #90A4AE)"); });
});
Marco, the angry rectangle - Script Codes
Marco, the angry rectangle - Script Codes
Home Page Home
Developer Keyon
Username Keyon
Uploaded January 10, 2023
Rating 3
Size 2,672 Kb
Views 8,096
Do you need developer help for Marco, the angry rectangle?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Keyon (Keyon) Script Codes
Name
Materoid
Gooey mouse follow
Zelda Breath of the Wild Cartridge
Notepad Project Neon
Presentation - Material Design and Parallax
Cloud OS
Switch Logo
Heart Beat
Simple Login
Material Vintage - Modal
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!