MG Factory
How do I make an mg factory?
It's my Factory ! i'm steel working . . . ! ;). What is a mg factory? How do you make a mg factory? This script and codes were developed by Mghayour on 31 October 2022, Monday.
MG Factory - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>MG Factory</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>MG Factory</title>
</head>
<body> <div class="factory"> <button type="button" tabindex="0">Pause</button> <button type="button" tabindex="1">Play</button> <div>M</div> <div>G</div> <div>a</div> <div>y</div> <div>o</div> <div>u</div> <div>r</div> <div></div> <div>F</div> <div>a</div> <div>c</div> <div>t</div> <div>o</div> <div>r</div> <div>y</div> </div>
</body>
</html>
</body>
</html>
MG Factory - Script Codes CSS Codes
body{ background-color: #fff;
}
@-webkit-keyframes rotate_clockwise { from { -webkit-transform:rotate(0); } to { -webkit-transform:rotate(360deg); }
}
@-moz-keyframes rotate_clockwise { from { -moz-transform:rotate(0); } to { -moz-transform:rotate(360deg); }
}
@-ms-keyframes rotate_clockwise { from { -ms-transform:rotate(0); } to { -ms-transform:rotate(360deg); }
}
@-o-keyframes rotate_clockwise { from { -o-transform:rotate(0); } to { -o-transform:rotate(360deg); }
}
@keyframes rotate_clockwise { from { transform:rotate(0); } to { transform:rotate(360deg); }
}
@-webkit-keyframes rotate_unclockwise { from { -webkit-transform:rotate(0); } to { -webkit-transform:rotate(-360deg); }
}
@-moz-keyframes rotate_unclockwise { from { -moz-transform:rotate(0); } to { -moz-transform:rotate(-360deg); }
}
@-ms-keyframes rotate_unclockwise { from { -ms-transform:rotate(0); } to { -ms-transform:rotate(-360deg); }
}
@-o-keyframes rotate_unclockwise { from { -o-transform:rotate(0); } to { -o-transform:rotate(-360deg); }
}
@keyframes rotate_unclockwise { from { transform:rotate(0); } to { transform:rotate(-360deg); }
}
.factory { position: relative; top: -50px; left: 0;
}
.factory div { position: absolute; color: #fff; width: 100px; height: 100px; border-radius: 1000px; text-align: center; line-height: 100px; font-size: 72px; border: 10px dashed #fff; background-color: #706; margin:10px;
}
.factory button { position: absolute; width: 100px; height: 40px; line-height: 40px; font-size: 30px; border: 0px ; color: #fff; border-radius: 5px; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s;
}
.factory button:nth-child(1) { top: 140px; left: 600px; background-color: #d13674;
}
.factory button:nth-child(1):focus { background-color: #91d236;
}
.factory button:nth-child(1):focus + button { background-color: #d13674;
}
.factory button:nth-child(1):focus ~ div{ -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -o-animation-play-state: paused; -ms-animation-play-state: paused; animation-play-state: paused;
}
.factory button:nth-child(1) ~ div{ -webkit-animation-play-state: running; -moz-animation-play-state: running; -o-animation-play-state: running; -ms-animation-play-state: running; animation-play-state: running;
}
.factory button:nth-child(2) { top: 140px; left: 710px; background-color: #91d236;
}
.factory div:nth-child(odd) { -webkit-animation: rotate_clockwise 3s; -webkit-animation-timing-function:linear; -webkit-animation-iteration-count: infinite; -moz-animation: rotate_clockwise 3s; -moz-animation-timing-function:linear; -moz-animation-iteration-count: infinite; -ms-animation: rotate_clockwise 3s; -ms-animation-timing-function:linear; -ms-animation-iteration-count: infinite; -o-animation: rotate_clockwise 3s; -o-animation-timing-function:linear; -o-animation-iteration-count: infinite; animation: rotate_clockwise 3s; animation-timing-function:linear; animation-iteration-count: infinite;
}
.factory div:nth-child(even) { -webkit-animation: rotate_unclockwise 3s; -webkit-animation-timing-function:linear; -webkit-animation-iteration-count: infinite; -moz-animation: rotate_unclockwise 3s; -moz-animation-timing-function:linear; -moz-animation-iteration-count: infinite; -ms-animation: rotate_unclockwise 3s; -ms-animation-timing-function:linear; -ms-animation-iteration-count: infinite; -o-animation: rotate_unclockwise 3s; -o-animation-timing-function:linear; -o-animation-iteration-count: infinite; animation: rotate_unclockwise 3s; animation-timing-function:linear; animation-iteration-count: infinite;
}
.factory div:nth-child(3),
.factory div:nth-child(4),
.factory div:nth-child(11) { -webkit-animation-duration: 4.5s; -moz-animation-duration: 4.5s; -ms-animation-duration: 4.5s; -o-animation-duration: 4.5s; animation-duration: 4.5s;
}
.factory div:nth-child(3) { width: 200px; height: 200px; text-align: center; line-height: 200px; font-size: 128px; background-color: #2980b9; border: 15px dashed #fff; top: 100px; left: 200px;
}
.factory div:nth-child(4) { width: 200px; height: 200px; text-align: center; line-height: 200px; font-size: 128px; background-color: #c0392b; border: 15px dashed #fff; top: 200px; left: 390px;
}
.factory div:nth-child(5) { background-color: #16a085; top: 290px; left: 600px;
}
.factory div:nth-child(6) { background-color: #f39c12; top: 220px; left: 680px;
}
.factory div:nth-child(7) { background-color: #8e44ad; top: 260px; left: 780px;
}
.factory div:nth-child(8) { background-color: #27ae60; top: 165px; left: 840px;
}
.factory div:nth-child(9) { background-color: #2c3e50; top: 195px; left: 945px;
}
.factory div:nth-child(10) { display: none;
}
.factory div:nth-child(11) { width: 150px; height: 150px; text-align: center; line-height: 150px; font-size: 128px; background-color: #f1c40f; top: 350px; left: 275px;
}
.factory div:nth-child(12) { background-color: #9b59b6; top: 475px; left: 395px;
}
.factory div:nth-child(13) { background-color: #2ecc71; top: 443px; left: 500px;
}
.factory div:nth-child(14) { background-color: #e74c3c; top: 493px; left: 600px;
}
.factory div:nth-child(15) { background-color: #34495e; top: 470px; left: 710px;
}
.factory div:nth-child(16) { background-color: #3498db; top: 420px; left: 810px;
}
.factory div:nth-child(17) { background-color: #90d237; top: 495px; left: 890px;
}
Developer | Mghayour |
Username | mghayour |
Uploaded | October 31, 2022 |
Rating | 3 |
Size | 2,396 Kb |
Views | 20,240 |
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!
Name | Size |
An other linear loader | 1,694 Kb |
Wp tab | 2,294 Kb |
Cloudy Sky | 3,041 Kb |
IRan Flag | 4,485 Kb |
An other menu | 1,791 Kb |
An other layout | 2,569 Kb |
3D Star | 2,137 Kb |
Download Button | 2,374 Kb |
CSS Wave Play | 2,842 Kb |
Avn Slider | 2,751 Kb |
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!
Name | Username | Size |
Direction-icon | Alexandremasy | 3,323 Kb |
Hard-Stop Gradients | Mackdoyle | 2,288 Kb |
Twitch JSON API | Jvhti | 2,808 Kb |
Sticky menu on scroll | Senff | 2,869 Kb |
Click Based Rotation Demo | Zeaklous | 2,086 Kb |
Highbrow Basic HTML Lesson 7 | Kimlarocca | 1,662 Kb |
Horizontal Navigation with Floats | Gymratpacks | 5,403 Kb |
Pure CSS albums gallery | Renaudtertrais | 2,978 Kb |
Scarlett Johansson Tribute Page | Diomed | 3,233 Kb |
3D Text in Sass | Bookcasey | 2,766 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!