Coming soon page for pixelbrain.io

Developer
Martin Grand
Size
4,794 Kb
Views
30,360
  1. Coming soon page for pixelbrain.io Previews
  2. Coming soon page for pixelbrain.io HTML Codes
  3. Coming soon page for pixelbrain.io CSS Codes
  4. Coming soon page for pixelbrain.io JS Codes

How do I make an coming soon page for pixelbrain.io?

What is a coming soon page for pixelbrain.io? How do you make a coming soon page for pixelbrain.io? This script and codes were developed by Martin Grand on 11 August 2022, Thursday.

Coming soon page for pixelbrain.io Previews
IQ Test

Coming soon page for pixelbrain.io - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Coming soon page for pixelbrain.io</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { background: #0cf0cf; animation: bg 180s infinite;
}
*, *::after, *::before { backface-visibility: hidden;
}
.loader { position: absolute; width: 14em; height: 5em; left: 50%; top: 50%; margin: -5.5em -7em; font-size: 9px; animation: float-top 6s infinite;
}
.loader__text { position: absolute; width: 320px; top: calc(100% + 2em); left: -98px; text-align: center; font-size: 2em; letter-spacing: -.075em; font-family: 'Cutive Mono';
}
.loader__text iframe { display: block; margin: 30px auto 0;
}
.loader::after { position: absolute; content: ''; width: 10em; height: 1em; top: 6em; left: 2em; -webkit-filter: blur(1em); background: rgba(0, 0, 0, 0.9); animation: float-bottom 6s infinite;
}
.loader svg { position: absolute; left: 0; top: 0; z-index: 1;
}
.loader .eye { position: absolute; width: 4em; height: 3em; top: 1em; background: #fff; overflow: hidden;
}
.loader .eye.eye--left { left: 2em;
}
.loader .eye.eye--right { left: 8em;
}
.loader .eye::after { display: block; position: absolute; content: ''; height: 2em; width: 3em; top: 0; left: 1em; background: rgba(255, 255, 255, 0.2);
}
.loader .eye__eyelid { background: #067868; position: absolute; left: 0; width: 4em; height: 2em;
}
.loader .eye__eyelid--top { top: -2em; animation: eyelid-top 4s infinite;
}
.loader .eye__eyelid--bottom { top: 3em; animation: eyelid-bottom 4s infinite;
}
.loader .eye__pupil { position: absolute; left: 0; top: 0; width: 3em; height: 3em; background: #0cf0cf; animation: eyemove 2.3s infinite;
}
.loader .eye__pupil::after { display: block; content: ''; position: absolute; left: 1em; top: 1em; width: 1em; height: 1em; opacity: 0.9; background: #000;
}
.loader .eye__pupil span { display: block; position: absolute; left: 0; top: 0; width: 1em; height: 1em; background: #fff;
}
.loader .eye__pupil span::before, .loader .eye__pupil span::after { display: block; position: absolute; content: ''; height: 1em; background: rgba(0, 0, 0, 0.2);
}
.loader .eye__pupil span::before { left: 1em; top: 0; width: 2em;
}
.loader .eye__pupil span::after { left: 0; top: 1em; width: 1em;
}
@keyframes eyemove { 0% { transform: translateX(2em); } 95% { transform: translateX(-1em); } 100% { transform: translateX(2em); }
}
@keyframes eyelid-top { 0% { transform: translateY(1.5em); } 10% { transform: translateY(0); } 50% { transform: translateY(0); } 55% { transform: translateY(1em); } 70% { transform: translateY(1em); } 90% { transform: translateY(0); } 100% { transform: translateY(1.5em); }
}
@keyframes eyelid-bottom { 0% { transform: translateY(-1.5em); } 10% { transform: translateY(0); } 50% { transform: translateY(0); } 55% { transform: translateY(-1em); } 70% { transform: translateY(-1em); } 90% { transform: translateY(0); } 100% { transform: translateY(-1.5em); }
}
@keyframes float-top { 0% { transform: translateY(0); } 50% { transform: translateY(-1em); } 100% { transform: translateY(0); }
}
@keyframes float-bottom { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <link href="https://fonts.googleapis.com/css?family=Cutive+Mono" rel="stylesheet" type="text/css" />
<div class="loader">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 140 50" style="enable-background:new 0 0 140 50;" xml:space="preserve">	<polygon fill="none" points="120,20 120,10 80,10 80,30 90,30 90,40 120,40 120,20"/>	<polygon fill="none" points="60,10 20,10 20,40 50,40 50,30 60,30 60,10"/>	<polygon points="20,20 20,10 60,10 60,0 0,0 0,20 10,20 10,40 20,40 20,20"/>	<polygon points="30,40 20,40 20,50 50,50 50,40 30,40"/>	<polygon points="50,40 60,40 60,30 50,30 50,40"/>	<polygon points="130,0 80,0 80,10 120,10 120,40 130,40 130,20 140,20 140,0 130,0"/>	<polygon points="100,40 90,40 90,50 120,50 120,40 100,40"/>	<polygon points="80,30 80,40 90,40 90,30 80,30"/>	<polygon points="80,10 60,10 60,30 80,30 80,10"/>
</svg> <div class="eye eye--left"> <span class="eye__pupil"><span></span></span> <span class="eye__eyelid eye__eyelid--top"></span> <span class="eye__eyelid eye__eyelid--bottom"></span> </div> <div class="eye eye--right"> <span class="eye__pupil"><span></span></span> <span class="eye__eyelid eye__eyelid--top"></span> <span class="eye__eyelid eye__eyelid--bottom"></span> </div> <span class="loader__text">Loading Pixelbrain...<br><b>It can take a few months!</b>
<iframe style="display:block;" src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fpixelbrain.io%2F&width=62&layout=button&action=like&size=large&show_faces=true&share=false&height=65&appId=834138093342986" width="62" height="65" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe> </span>
</div> <script src="js/index.js"></script>
</body>
</html>

Coming soon page for pixelbrain.io - Script Codes CSS Codes

body { background: #0cf0cf; animation: bg 180s infinite;
}
*, *::after, *::before { backface-visibility: hidden;
}
.loader { position: absolute; width: 14em; height: 5em; left: 50%; top: 50%; margin: -5.5em -7em; font-size: 9px; animation: float-top 6s infinite;
}
.loader__text { position: absolute; width: 320px; top: calc(100% + 2em); left: -98px; text-align: center; font-size: 2em; letter-spacing: -.075em; font-family: 'Cutive Mono';
}
.loader__text iframe { display: block; margin: 30px auto 0;
}
.loader::after { position: absolute; content: ''; width: 10em; height: 1em; top: 6em; left: 2em; -webkit-filter: blur(1em); background: rgba(0, 0, 0, 0.9); animation: float-bottom 6s infinite;
}
.loader svg { position: absolute; left: 0; top: 0; z-index: 1;
}
.loader .eye { position: absolute; width: 4em; height: 3em; top: 1em; background: #fff; overflow: hidden;
}
.loader .eye.eye--left { left: 2em;
}
.loader .eye.eye--right { left: 8em;
}
.loader .eye::after { display: block; position: absolute; content: ''; height: 2em; width: 3em; top: 0; left: 1em; background: rgba(255, 255, 255, 0.2);
}
.loader .eye__eyelid { background: #067868; position: absolute; left: 0; width: 4em; height: 2em;
}
.loader .eye__eyelid--top { top: -2em; animation: eyelid-top 4s infinite;
}
.loader .eye__eyelid--bottom { top: 3em; animation: eyelid-bottom 4s infinite;
}
.loader .eye__pupil { position: absolute; left: 0; top: 0; width: 3em; height: 3em; background: #0cf0cf; animation: eyemove 2.3s infinite;
}
.loader .eye__pupil::after { display: block; content: ''; position: absolute; left: 1em; top: 1em; width: 1em; height: 1em; opacity: 0.9; background: #000;
}
.loader .eye__pupil span { display: block; position: absolute; left: 0; top: 0; width: 1em; height: 1em; background: #fff;
}
.loader .eye__pupil span::before, .loader .eye__pupil span::after { display: block; position: absolute; content: ''; height: 1em; background: rgba(0, 0, 0, 0.2);
}
.loader .eye__pupil span::before { left: 1em; top: 0; width: 2em;
}
.loader .eye__pupil span::after { left: 0; top: 1em; width: 1em;
}
@keyframes eyemove { 0% { transform: translateX(2em); } 95% { transform: translateX(-1em); } 100% { transform: translateX(2em); }
}
@keyframes eyelid-top { 0% { transform: translateY(1.5em); } 10% { transform: translateY(0); } 50% { transform: translateY(0); } 55% { transform: translateY(1em); } 70% { transform: translateY(1em); } 90% { transform: translateY(0); } 100% { transform: translateY(1.5em); }
}
@keyframes eyelid-bottom { 0% { transform: translateY(-1.5em); } 10% { transform: translateY(0); } 50% { transform: translateY(0); } 55% { transform: translateY(-1em); } 70% { transform: translateY(-1em); } 90% { transform: translateY(0); } 100% { transform: translateY(-1.5em); }
}
@keyframes float-top { 0% { transform: translateY(0); } 50% { transform: translateY(-1em); } 100% { transform: translateY(0); }
}
@keyframes float-bottom { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; }
}

Coming soon page for pixelbrain.io - Script Codes JS Codes

// http://pixelbrain.io
Coming soon page for pixelbrain.io - Script Codes
Coming soon page for pixelbrain.io - Script Codes
Home Page Home
Developer Martin Grand
Username martingrand
Uploaded August 11, 2022
Rating 3
Size 4,794 Kb
Views 30,360
Do you need developer help for Coming soon page for pixelbrain.io?

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!

Martin Grand (martingrand) Script Codes
Name
Birthday Cake
Clock
A Pen by Martin Grand
3d mosaic, with any image from your computer
Animated captcha concept
Pure css rain
BEM class name preprocess
Pure css christmas tree
Switch
Glitch animation generator
Create amazing web content 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!