Minimalist Wordpress login

Developer
Alejandro Montañez
Size
3,993 Kb
Views
20,240
  1. Minimalist Wordpress login Previews
  2. Minimalist Wordpress login HTML Codes
  3. Minimalist Wordpress login CSS Codes
  4. Minimalist Wordpress login JS Codes

How do I make an minimalist wordpress login?

The title is descriptive enough.. What is a minimalist wordpress login? How do you make a minimalist wordpress login? This script and codes were developed by Alejandro Montañez on 13 October 2022, Thursday.

Minimalist Wordpress login Previews
IQ Test

Minimalist Wordpress login - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Minimalist Wordpress login</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="background"> <div id="color#{n+1}"></div> <div id="color#{n+1}"></div> <div id="color#{n+1}"></div> <div id="color#{n+1}"></div> <div id="color#{n+1}"></div>
</div>
<div id="grill"></div>
<div id="container"> <h1>w</h1> <input type="text" placeholder="user"/> <input type="password" placeholder="pass"/> <input type="submit" value="login"/>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Minimalist Wordpress login - Script Codes CSS Codes

@import 'http://weloveiconfonts.com/api/?family=zocial';
@import 'https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300';
html, #background, #grill, body { width: 100%; height: 100%; margin: 0; padding: 0;
}
body { overflow: hidden;
}
#background { background: #303030;
}
#background > div { width: 20%; height: 100%; position: relative; float: left; margin: 0; padding: 0; opacity: 0;
}
#color1 { background: #FFFAE2;
}
#color2 { background: #E8CBC2;
}
#color3 { background: #F7E2FF;
}
#color4 { background: #C2D7E8;
}
#color5 { background: #D5FFDC;
}
#grill { position: absolute; top: 0; left: 0; background: url(http://source.codeams.tk/img/rejilla.png) repeat;
}
#container { width: 350px; height: auto; position: absolute; top: calc(50% - 132px); left: calc(50% - 175px); margin: 0; padding: 0; opacity: 0; -webkit-transition: opacity 1200ms; transition: opacity 1200ms;
}
#container h1 { width: 100%; margin: 0 0 22px 0; padding: 0; font: 84px/1 "zocial", sans-serif; text-align: center; color: rgba(0, 0, 0, 0.7); -webkit-animation: rotate 1500ms linear infinite; animation: rotate 1500ms linear infinite;
}
#container input { box-sizing: border-box; width: 100%; margin: 0; padding: 5px 20px; border: none; outline: none; border-radius: 2px; font: 300 26px/1 "open sans condensed", sans-serif;
}
#container input[type='password'], #container input[type='text'] { margin-bottom: 15px; background: rgba(0, 0, 0, 0.5); color: #f0f0f0; -webkit-transition: background 300ms; transition: background 300ms;
}
#container input[type='password']:focus, #container input[type='text']:focus, #container input[type='submit']:hover, #container input[type='submit']:focus { background: rgba(0, 0, 0, 0.7);
}
#container input[type='submit'] { display: block; width: auto; float: right; background: rgba(0, 0, 0, 0.5); color: #f0f0f0; cursor: pointer;
}
#container input:active { position: relative; top: 2px;
}
.boing { top: 0; opacity: 1; -webkit-animation: boing 1200ms linear both; animation: boing 1200ms linear both;
}
#container.in { opacity: 1;
}
@-webkit-keyframes rotate { 25% { -webkit-transform: rotate(-3deg) translate3d(0, 0, 0); transform: rotate(-3deg) translate3d(0, 0, 0); } 75% { -webkit-transform: rotate(3deg) translate3d(0, 0, 0); transform: rotate(3deg) translate3d(0, 0, 0); } 100% { -webkit-transform: rotate(0deg) translate3d(0, 0, 0); transform: rotate(0deg) translate3d(0, 0, 0); }
}
@keyframes rotate { 25% { -webkit-transform: rotate(-3deg) translate3d(0, 0, 0); transform: rotate(-3deg) translate3d(0, 0, 0); } 75% { -webkit-transform: rotate(3deg) translate3d(0, 0, 0); transform: rotate(3deg) translate3d(0, 0, 0); } 100% { -webkit-transform: rotate(0deg) translate3d(0, 0, 0); transform: rotate(0deg) translate3d(0, 0, 0); }
}
@-webkit-keyframes boing { 0% { top: -650px; opacity: 0; } 40% { top: 0; opacity: 0.8; } 53% { top: -28px; opacity: 1; } 66% { top: 0; } 75% { top: -14px; } 86% { top: 0; } 94% { top: -5px; } 100% { top: 0; opacity: 1; }
}
@keyframes boing { 0% { top: -650px; opacity: 0; } 40% { top: 0; opacity: 0.8; } 53% { top: -28px; opacity: 1; } 66% { top: 0; } 75% { top: -14px; } 86% { top: 0; } 94% { top: -5px; } 100% { top: 0; opacity: 1; }
}
@media (max-height: 180px) { #grill { display: none; }
}

Minimalist Wordpress login - Script Codes JS Codes

$('#background > div').each(function(i, t){ setTimeout(function(){ $(t).addClass('boing'); if(i == 4) $('#container').addClass('in') }, i * 360)
});
$('input:text').focus();
Minimalist Wordpress login - Script Codes
Minimalist Wordpress login - Script Codes
Home Page Home
Developer Alejandro Montañez
Username codeams
Uploaded October 13, 2022
Rating 4
Size 3,993 Kb
Views 20,240
Do you need developer help for Minimalist Wordpress login?

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!

Alejandro Montañez (codeams) Script Codes
Name
My favorite palettes
Progressbar test
Loading animation
Loading
Such Spinners, Much Loading
Loading animation
Background entrance animation
My favorite palettes
Another loading animation
Background-attachment fixed
Create amazing sales emails 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!