Control Panel

Developer
Oliver Pope
Size
2,399 Kb
Views
12,144
  1. Control Panel Previews
  2. Control Panel HTML Codes
  3. Control Panel CSS Codes

How do I make an control panel?

A simple control panel for any webapp. What is a control panel? How do you make a control panel? This script and codes were developed by Oliver Pope on 22 November 2022, Tuesday.

Control Panel Previews
IQ Test

Control Panel - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Control Panel</title> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Oswald|Roboto'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="controlpanel"> <header> <h1>Control Panel</h1> </header> <div id="accountusernameandpassword" class="border"> <p><label for="username"></label><b>Username</b> <input type="text" name="username" placeholder="billisamazing"></p> <p><label for="password"><b>Password</b></label> <input type="password" name="password" placeholder="***************"> </div> <div id="email" class="border"> <p><label for="email"><b>Email</b></label> <input type="text" name="email" placeholder="[email protected]"></p> </div> <div id="subscribe" class="border"> <br /> <div> <input type="checkbox" id="switch1" name="switch1" class="switch" /> <label for="switch1">Suscribe to our Newsletter</label> </div> <br /> <div> <input type="checkbox" id="switch2" name="switch2" class="switch" checked="checked" /> <label for="switch2">Notify me when someone reads my post</label> </div> <br /> </div> <div id="submit"> <button>Save Changes</button> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Control Panel - Script Codes CSS Codes

html { margin: 0 20%; color: #111; font-family: "Roboto";
}
#controlpanel { width: 400px; border-top: 5px solid #111; border-bottom: 5px solid #111;
}
header { border-bottom: 1px solid #111;
}
header h1 { line-height: .1em; font-family: "Oswald"; text-transform: uppercase;
}
header p { font-size: 18px; line-height: 18px;
}
input[type=text] { border: 1px solid transparent; font-size: 18px;
}
input[type=password] { border: 1px solid transparent; font-size: 18px;
}
input { border-radius: 2px; font-family: "Roboto";
}
input:focus { border: 1px solid #111; outline: 0;
}
.border { border-bottom: 1px solid #111;
}
button { border: 1px solid #111; color: #111; background: white; border-radius: 4px; padding: .5em 1em; font-size: 18px; margin: .5em 0; transition: .5s all; font-family: "Roboto";
}
button:hover { background: #111; color: white;
}
input.switch:empty {	margin-left: -999px;
}
input.switch:empty ~ label {	position: relative;	float: left;	line-height: 1.6em;	text-indent: 4em;	margin: 0.2em 0;	cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
input.switch:empty ~ label:before,
input.switch:empty ~ label:after {	position: absolute;	display: block;	top: 0;	bottom: 0;	left: 0;	content: ' ';	width: 3.6em;	background-color: #FF4136;	border-radius: 10em;	-webkit-transition: all 100ms ease-in; transition: all 100ms ease-in;
}
input.switch:empty ~ label:after {	width: 1.4em;	top: 0.1em;	bottom: 0.1em;	margin-left: 0.1em;	background-color: #fff;	border-radius: 100%;
}
input.switch:checked ~ label:before {	background-color: #2ECC40;
}
input.switch:checked ~ label:after {	margin-left: 2.1em;
}
Control Panel - Script Codes
Control Panel - Script Codes
Home Page Home
Developer Oliver Pope
Username owebboy
Uploaded November 22, 2022
Rating 3.5
Size 2,399 Kb
Views 12,144
Do you need developer help for Control Panel?

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!

Oliver Pope (owebboy) Script Codes
Name
Document Template
Blog Article
Cool Site Landing Page
Countdown
Perspective
Navigation Bar
Animated 3D Text
Navigation Bar
Navigation Bar
On Hover Spinning Text
Create amazing Facebook ads 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!