Flock Login
How do I make an flock login?
Pure css. What is a flock login? How do you make a flock login? This script and codes were developed by Mojtaba Seyedi on 27 July 2022, Wednesday.
Flock Login Previews
Flock Login - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flock Login</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <form action=""> <h1>Flock</h1> <input class="user" type="text" placeholder="username" /> <input class="pass" type="password" placeholder="password" /> <input class="btn" type="submit" value="SIGN IN" /> <hr style="background-color : #bebebe;"/> <hr style="background-color : #FFF; "/> <h5>Forgot your password? <a href="">click here</a></h5>
<div class="setting"> <a class="icon-cog" href="#"></a> <h6 class="set">settings</h6> <div class="middle" style="left : 6px;"></div> <div class="middle" style="left : 18px;"></div> <div class="middle" style="left : 30px;"></div> <div class="middle" style="left : 42px;"></div> <div class="side left"></div> <div class="side right"></div> </div>
</form> <script src="js/index.js"></script>
</body>
</html>Flock Login - Script Codes CSS Codes
@import url("http://fonts.googleapis.com/css?family=Berkshire+Swash");
@import url("http://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css");
* { padding : 0; margin : 0; border : 0; outline : 0; font-family: Arial;
}
body { background-color : #917975; padding-top : 50px;
}
form { position : relative; width : 340px; height : 380px; border-radius : 5px; margin : 0 auto; background-color: #e3e3e3; border-top : 1px solid #f1f1f1; box-shadow : 0 0 0 1px #626262 , 0 0 0 6px rgba(150,150,150,.5) , 0 0 0 7px #cbbdbc , 0 0 0 8px #78495b; text-align : center;
}
h1 { margin : 10px 0 20px 0; font-size : 75px; color : #b8b8b8; font-family: 'Berkshire Swash', cursive; text-shadow: 1px 1px 0 #888 , 2px 2px 0 #ccc;
}
input { display : block; height : 48px; margin : 0 auto 17px; text-align : center; width : 266px; border-radius : 5px;
}
.user , .pass { font-size : 20px; background: -moz-linear-gradient(top, rgba(213,213,213,1) 0%, rgba(213,213,213,1) 13%, rgba(215,215,215,1) 30%, rgba(222,222,222,1) 71%, rgba(221,221,221,1) 100%); background: -webkit-linear-gradient(top, rgba(213,213,213,1) 0%,rgba(213,213,213,1) 13%,rgba(215,215,215,1) 30%,rgba(222,222,222,1) 71%,rgba(221,221,221,1) 100%); box-shadow: inset 0 0 3px 1px #ccc; border-top : 1px solid #aaa; border-bottom : 1px solid #eee; color : #555;
}
.btn { margin-bottom : 30px; color : #fefefe; text-shadow : 0 1px 0 #777; border : 1px solid #b6733c; box-shadow : inset 0 0 1px 1px #ffcb9c; text-transform : uppercase; background: -moz-linear-gradient(top, rgba(249,159,107,1) 0%, rgba(238,148,96,1) 57%, rgba(236,146,94,1) 89%, rgba(232,144,94,1) 94%, rgba(234,146,96,1) 96%, rgba(244,161,111,1) 100%); background: -webkit-linear-gradient(top, rgba(249,159,107,1) 0%,rgba(238,148,96,1) 57%,rgba(236,146,94,1) 89%,rgba(232,144,94,1) 94%,rgba(234,146,96,1) 96%,rgba(244,161,111,1) 100%); font-size : 17px;
}
.btn:hover { cursor : pointer; background: -moz-linear-gradient(top, rgba(244,161,111,1) 0%, rgba(234,146,96,1) 4%, rgba(232,144,94,1) 6%, rgba(236,146,94,1) 12%, rgba(238,148,96,1) 43%, rgba(249,159,107,1) 100%); background: -webkit-linear-gradient(top, rgba(244,161,111,1) 0%,rgba(234,146,96,1) 4%,rgba(232,144,94,1) 6%,rgba(236,146,94,1) 12%,rgba(238,148,96,1) 43%,rgba(249,159,107,1) 100%);
}
.user:focus , .pass:focus { box-shadow : inset 0 0 1px 1px #ffcb9c; border : 1px solid #b6733c; transition : all .2s ease-in;
}
hr { height : 1px; width : 270px; margin : auto;
}
h5 { margin-top : 10px; color : #7d7d7d;
}
a { text-transform : capitalize; text-decoration : none; color : #4e4e4e;
}
::-webkit-input-placeholder { color : #929292; font-size : 17px; text-transform : uppercase;
}
:-moz-placeholder { color : #929292; font-size : 17px; text-transform : uppercase;
}
/* setting */
.setting { background: -moz-linear-gradient(top, rgba(238,134,135,1) 0%, rgba(235,129,131,1) 2%, rgba(223,107,107,1) 7%, rgba(223,101,98,1) 11%, rgba(225,100,96,1) 13%, rgba(229,102,96,1) 14%, rgba(227,105,100,1) 27%, rgba(225,102,97,1) 29%, rgba(225,102,97,1) 41%, rgba(223,100,95,1) 43%, rgba(225,102,97,1) 48%, rgba(223,100,95,1) 55%, rgba(225,102,97,1) 57%, rgba(225,102,97,1) 70%, rgba(223,100,95,1) 71%, rgba(225,102,97,1) 98%, rgba(223,100,95,1) 100%); background: -webkit-linear-gradient(top, rgba(238,134,135,1) 0%,rgba(235,129,131,1) 2%,rgba(223,107,107,1) 7%,rgba(223,101,98,1) 11%,rgba(225,100,96,1) 13%,rgba(229,102,96,1) 14%,rgba(227,105,100,1) 27%,rgba(225,102,97,1) 29%,rgba(225,102,97,1) 41%,rgba(223,100,95,1) 43%,rgba(225,102,97,1) 48%,rgba(223,100,95,1) 55%,rgba(225,102,97,1) 57%,rgba(225,102,97,1) 70%,rgba(223,100,95,1) 71%,rgba(225,102,97,1) 98%,rgba(223,100,95,1) 100%); background : #e06560; position : absolute; top : -2px; left : 10px; width : 60px; height : 5px; border-top : 1px solid #9d5958; transition : height .7s;
}
form:hover .setting { height : 70px; transition : height .7s;
}
form:hover h6.set { font-size : 0.67em; transition : font-size .7s;
}
form:hover .icon-cog { transition : font-size .7s; font-size : 42px;
}
.setting > div { position : absolute;
}
.setting .middle { border-style : solid; border-width : 12px 6px 0 6px; border-color : transparent; border-top-color : #e06560; top : 100%;
}
.setting .side { border-style : solid; top : 100%;
}
.icon-cog { position : relative; display : block; font-size : 0; color : #bb4140; transition : font-size .7s;
}
h6.set { position : relative; color : #bb4140; text-transform : uppercase; font-size : 0; transition : font-size .7s;
}
.side.left { border-width : 12px 6px 0 0; border-color : #e06560 transparent transparent transparent; left : 0;
}
.side.right { border-width : 12px 0 0 6px; border-color : #e06560 transparent transparent transparent; right : 0;
}Flock Login - Script Codes JS Codes
/************************************* Designed by Cat Smith ,Flock Login http://drbl.in/gkPG
*************************************/
| Developer | Mojtaba Seyedi |
| Username | seyedi |
| Uploaded | July 27, 2022 |
| Rating | 4 |
| Size | 3,145 Kb |
| Views | 46,552 |
Do you need developer help for Flock 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!
Mojtaba Seyedi (seyedi) Script Codes
| Name | Size |
| Animated Cover | 3,576 Kb |
| Animated Covers | 5,083 Kb |
| A Pen by Mojtaba Seyedi | 3,285 Kb |
| Navigation | 3,699 Kb |
| Single element cloud | 2,316 Kb |
| Hidden navigation | 4,330 Kb |
| Button | 3,688 Kb |
| FUN | 3,508 Kb |
| Shader Menu | 2,784 Kb |
| Bell alert | 1,980 Kb |
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!
Similar Scripts & Codes
| Name | Username | Size |
| A Pen by Alex Bergin | Abergin | 3,347 Kb |
| CSS3 Diamond | Rendro | 1,960 Kb |
| Android Play Store With Slick Carousel | -J0hn- | 4,982 Kb |
| Weather App | OmranAbazid | 2,596 Kb |
| Border-radius animation | Yukulele | 2,480 Kb |
| Greyscale image with filter in CSS3 | NickyCDK | 1,562 Kb |
| Animated SVG stroke-dasharray | Netsi1964 | 3,179 Kb |
| Draggables in pure angular | Rlo206 | 5,167 Kb |
| Heatmap Color Scales | Stevepepple | 2,331 Kb |
| Angular Sandbox | Alexgurrola | 1,616 Kb |
Do you want hide your ip address?
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!