Quick-visual

Developer
Kenny Chen
Size
3,263 Kb
Views
6,072
  1. Quick-visual Previews
  2. Quick-visual HTML Codes
  3. Quick-visual CSS Codes
  4. Quick-visual JS Codes

How do I make an quick-visual?

What is a quick-visual? How do you make a quick-visual? This script and codes were developed by Kenny Chen on 31 October 2022, Monday.

Quick-visual Previews
IQ Test

Quick-visual - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>quick-visual</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"></div>
<div class="logo"> <div class="icon animate"><img src="https://i.imgur.com/anoANgd.png" width="120" height="150"/></div> <div class="pipe">|</div> <div class="name">Quick-Visual</div> <div class="btn">Enter</div>
</div>
<div class="page2">
<div class="body"></div>
<div class="grad"></div>
<div class="header"> <div>Quick<span>Visaul</span></div>
</div><br/>
<div class="login"> <input type="text" placeholder="username" name="user"/><br/> <input type="password" placeholder="password" name="password"/><br/> <input type="button" onclick="location.href='index2.html'" value="Login"/> <input class="regist" type="button" value="Regist"/>
</div>
<div class="regist_form"> <input type="text" placeholder="username" name="user"/><br/> <input type="password" placeholder="password" name="password"/><br/> <input type="password" placeholder="password-confirm" name="password_2"/><br/> <input type="text" placeholder="Birthday" name="Birthday"/><br/> <input type="text" placeholder="E-mail" name="E-mail"/><br/> <input class="confirm" type="button" value="Regist"/>
</div>	</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Quick-visual - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Exo:100,200,400);
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:700,400,300);
body, html { width: 100%; height: 100%; padding: 0px; margin: 0px; overflow: hidden;	display: flex;	justify-content: center;	align-items: center;
}
.container { position: absolute;	background-image: url( 'https://i.imgur.com/42EsfxP.jpg' );	background-repeat: no-repeat;	background-size: 2000px 1200px;	opacity: 0.4;	width: 100%;	height: 100%;
}
.logo { width: 450px; position: relative; top: 160px;
}
.logo .animate { animation: logo 1s 1;
}
.logo .icon { display: inline-block;
}
.logo .icon img { display: inline-block; vertical-align: middle;
}
.logo .pipe { display: inline-block; vertical-align: middle; font: 100 100px "Roboto"; margin-top: -10px; color: rgba(0, 0, 0, 0.7); animation: openPipe 1s 1;
}
.logo .name { display: inline-block; vertical-align: middle; color: rgba(0, 0, 0, 0.7); font: 100 50px "Roboto"; animation: slideName 2s 1;
}
.logo .btn { width: 100px; font-size: 20px; background-color: grey; color: white; letter-spacing: 1px; margin: 30% auto; text-align: center; font-weight: bold; border-radius: 10px;
}
.logo .btn:hover { background: #707070; cursor: pointer; color: white;
}
.page2{	display: none;
}
.body { position: absolute; top: -20px; left: -20px; right: -40px; bottom: -40px; width: auto; height: auto; background-image: url(https://i.imgur.com/42EsfxP.jpg); background-size: cover; opacity: 0.4; z-index: 0;
}
.grad { position: absolute; top: -20px; left: -20px; right: -40px; bottom: -40px; width: auto; height: auto; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, transparent), color-stop(100%, rgba(0, 0, 0, 0.7))); z-index: 1; opacity: 0.7;
}
.header { position: absolute; top: calc(50% - 35px); left: calc(50% - 255px); z-index: 2;
}
.header div { float: left; color: #fff; font-family: "Exo", sans-serif; font-size: 35px; font-weight: 200;
}
.header div span { color: #5379fa !important;
}
.login, .regist_form { position: absolute; top: calc(50% - 75px); left: calc(50% - 50px); height: 150px; width: 350px; padding: 10px; z-index: 2;
}
.login input[type=text], .regist_form input[type=text] { width: 250px; height: 30px; background: transparent; border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 2px; color: #fff; font-family: "Exo", sans-serif; font-size: 16px; font-weight: 400; padding: 4px;
}
.login input[type=password], .regist_form input[type=password] { width: 250px; height: 30px; background: transparent; border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 2px; color: #fff; font-family: "Exo", sans-serif; font-size: 16px; font-weight: 400; padding: 4px; margin-top: 10px;
}
.login input[type=button], .regist_form input[type=button] { width: 260px; height: 35px; background: #fff; border: 1px solid #fff; cursor: pointer; border-radius: 2px; color: grey; font-family: "Exo", sans-serif; font-size: 16px; font-weight: 400; padding: 6px; margin-top: 10px;
}
.login input[type=button]:hover, .regist_form input[type=button]:hover { opacity: 0.8;
}
.login input[type=button]:active, .regist_form input[type=button]:active { opacity: 0.6;
}
.login input[type=text]:focus, .login input[type=password]:focus, .regist_form input[type=text]:focus, .regist_form input[type=password]:focus { outline: none; border: 1px solid rgba(255, 255, 255, 0.9);
}
.login input[type=button]:focus, .regist_form input[type=button]:focus { outline: none;
}
::-webkit-input-placeholder { color: white;
}
:-moz-placeholder { /* Firefox 18- */ color: #ccc;
}
::-moz-placeholder { /* Firefox 19+ */ color: #ccc;
}
:-ms-input-placeholder { color: #ccc;
}
.regist_form { position: absolute; top: calc(50% - 75px); left: calc(50% - 50px); height: 150px; width: 350px; padding: 10px; display: none;
}
.regist_form * { margin-top: 10px;
}
@media screen and (max-width: 1600px) { .regist_form { top: calc(30% - 0px); left: calc(50% - 60px); }
}
@media screen and (max-width: 800px) { .header { top: calc(10% - 5px); left: calc(50% - 80px); } .login { top: calc(30% - 0px); left: calc(50% - 100px); }
}
@media screen and (max-width: 400px) { .login,.regist_form { top: calc(30% - 0px); left: calc(50% - 130px); }
}
@keyframes logo { 0% { transform: scale(0); } 100% { transform: scale(1); }
}
@keyframes openPipe { 0%,50% { transform: scale(0); } 100% { transform: scale(1); }
}
@keyframes slideName { 0%, 40% { transform: scale(0); opacity: 0; margin-left: -100%; } 55% { opacity: 0; } 100% { margin-left: 0%; transform: scale(1); opacity: 1; }
}

Quick-visual - Script Codes JS Codes

$(".btn").click(	function(){	$(".page2").fadeIn(500);	$(".container").fadeOut(500);	$(".logo").fadeOut(500);
});
$('.regist').click(function(){	$('.login').fadeOut(500);	$('.regist_form').fadeIn(1000);
})
$('.confirm').click(function(){	$('.regist_form').fadeOut(1000);	$('.login').fadeIn(500);
})
Quick-visual - Script Codes
Quick-visual - Script Codes
Home Page Home
Developer Kenny Chen
Username kennyname
Uploaded October 31, 2022
Rating 3
Size 3,263 Kb
Views 6,072
Do you need developer help for Quick-visual?

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!

Kenny Chen (kennyname) Script Codes
Name
Twitch vanilla
Twitch complete
A Pen by kenny chen
Js-30-5
Piano
Cake
Img responsive
Paris
Create amazing love letters 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!