Stylish Login Panel using SCSS

Developer
Kanha Sahu
Size
3,620 Kb
Views
34,408
  1. Stylish Login Panel using SCSS Previews
  2. Stylish Login Panel using SCSS HTML Codes
  3. Stylish Login Panel using SCSS CSS Codes
  4. Stylish Login Panel using SCSS JS Codes

How do I make an stylish login panel using scss?

Stylish Login Panel using SCSS. What is a stylish login panel using scss? How do you make a stylish login panel using scss? This script and codes were developed by Kanha Sahu on 27 August 2022, Saturday.

Stylish Login Panel using SCSS Previews
IQ Test

Stylish Login Panel using SCSS - Script Codes HTML Codes

<!DOCTYPE html>
<html class="<meta name="viewport" content="width=device-width, initial-scale=1">">
<head> <meta charset="UTF-8"> <title>Stylish Login Panel using SCSS</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
<div class="box"> <div class="box-header-logo"><img src="http://kaslab.in/cdn/brands/kaslab-edisp.png" /></div>	<h3>&nbsp;</h3>	<form>	<div class="input-group">	<input type="text" id="username" autocomplete="off" onblur="checkInput(this)" />	<label for="username">Username</label>	</div>	<div class="input-group">	<input type="password" id="password" onblur="checkInput(this)" />	<label for="password">Password</label>	</div>	<input type="submit" value="Enter" />	</form>
</div> <script src="js/index.js"></script>
</body>
</html>

Stylish Login Panel using SCSS - Script Codes CSS Codes

*,
*:before,
*:after { margin: 0; padding: 0; box-sizing: border-box;
}
body { color: white; display: flex; padding: 20px; min-height: 100vh; position: relative; flex-direction: column; justify-content: center; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; background: url("http://cdn.kaslab.in/assests/textures/1024542010/denim.png");
}
.box { width: 100%; margin: auto; padding: 10px 20px; max-width: 400px; border-radius: 2px; background: url("http://cdn.kaslab.in/assests/textures/1024542010/light_alu.png"); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
.box .box-header-logo { width: 100px; height: 100px; margin: 0 auto; margin-top: -80px; text-align: center; border-radius: 1000em; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); overflow: hidden;
}
.box .box-header-logo img { text-align: center; max-height: 115px; margin: 0 auto; border-radius: 1000em;
}
h1 { font-weight: 100; letter-spacing: 1px; margin: 10px 0 20px 10px;
}
.input-group { font-size: 22px; padding: 5px 10px; padding-top: 30px; position: relative; border-radius: 2px; margin-bottom: 10px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); background-color: rgba(0, 0, 0, 0.3);
}
.input-group input { width: 100%; border: none; outline: none; display: block; font-weight: 300; letter-spacing: 1px; background-color: transparent;
}
.input-group input:focus + label, .input-group input.active + label { top: 5px; left: 5px; font-size: 16px;
}
.input-group label { top: 26px; left: 10px; opacity: 0.7; font-weight: 100; position: absolute; letter-spacing: 2px; pointer-events: none; transition: all 0.2s ease-in;
}
input[type="submit"] { border: none; float: right; outline: none; padding: 10px; font-weight: 300; border-radius: 2px; letter-spacing: 1px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); background-color: rgba(255, 255, 255, 0.2); text-transform: uppercase; transition: all 0.2s ease-in;
}
input[type="submit"]:hover, input[type="submit"]:focus { box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
/*
input[type="text"]:focus,
input[type="password"]:focus { background-color: rgba(255, 255, 255, 0.6); padding:3px 5px;
}
*/

Stylish Login Panel using SCSS - Script Codes JS Codes

function checkInput(input) {	if (input.value.length > 0) {	input.className = 'active bg-white';	} else {	input.className = '';	}
}
Stylish Login Panel using SCSS - Script Codes
Stylish Login Panel using SCSS - Script Codes
Home Page Home
Developer Kanha Sahu
Username kaslab
Uploaded August 27, 2022
Rating 3
Size 3,620 Kb
Views 34,408
Do you need developer help for Stylish Login Panel using SCSS?

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!

Kanha Sahu (kaslab) Script Codes
Name
Dynamic HTML control add and remove
Jquery Models for login, signin, forgot password
Bootstrap Glyphicon Inside Input Box
KASLAB Admin Panel login
Rainbow hr
Dynamicdrive marquee II
Material design tab style
Responsive jquery Menu
Button jquery onclick change text and effect
Bootstrap tree
Create amazing blog posts 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!