Overlapping signup/login

Developer
Jarad Light
Size
3,986 Kb
Views
24,288
  1. Overlapping signup/login Previews
  2. Overlapping signup/login HTML Codes
  3. Overlapping signup/login CSS Codes
  4. Overlapping signup/login JS Codes

How do I make an overlapping signup/login?

Login screen for personal project. Working title.Click "sign up".. What is a overlapping signup/login? How do you make a overlapping signup/login? This script and codes were developed by Jarad Light on 30 September 2022, Friday.

Overlapping signup/login Previews
IQ Test

Overlapping signup/login - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>overlapping signup/login</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<div class="landing">
<section class="topslot">	<div class="wrapper">	<div class="brief">	<h1>slate</h1> <p><span id="verb">continue</span> your adventure</p>	</div>	</div>
</section>
<section>	<div class="main"> <form method="POST" action="" accept-charset="UTF-8"> <input placeholder="username" name="username" type="text" /> <input placeholder="password" name="password" type="password" value="" /> <div class="signup-fields"> <input id="email" placeholder="email" name="email" type="email" value="" /> </div> <input id="submit" type="submit" value="log in" /> </form> <div class="extras"> <a id="signup" href="#">sign up</a> </div>	</div>
</section>
</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>

Overlapping signup/login - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700);
body { font-family: "Open Sans"; background: #27AE60; height: 100vh;
}
input:focus,
select:focus,
textarea:focus,
button:focus { outline: none;
}
.topslot { background-image: url("https://i.imgur.com/UkKDCJy.jpg"); background-color: #229955; background-position: center; background-size: cover; padding: 1rem 0rem 6rem 0rem; box-shadow: 0em -4em 8em -4em rgba(0, 0, 0, 0.5) inset; border-bottom: 0.3rem solid #1e8449;
}
.brief { display: block; color: #fff; font-size: 4rem; font-weight: 400; text-align: center; margin: 2rem 0rem 0rem;
}
.brief h1 { font-size: 5rem; margin: 0rem;
}
.brief p { margin: 0rem; font-style: italic; font-weight: 300; font-size: 1.09rem;
}
form { padding: 1rem; background: #fff; border-radius: 0.25rem; box-shadow: 0rem 0.3rem 1rem 0.1rem rgba(0, 0, 0, 0.35);
}
input { margin-bottom: 1rem; display: block; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
input:not([type=submit]) { text-align: center; padding: 0.25rem 0.5rem; border-radius: 0.15rem; border: 2px solid #2cc36b; box-shadow: 0rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.15) inset; font-size: 1.5rem; font-weight: 300; width: 100%;
}
input:not([type=submit]):focus { border-left-width: 0.5rem;
}
input[type=submit] { border: 0rem; width: 100%; background-color: #27AE60; color: white; margin-bottom: 0rem; font-size: 1.4rem; padding: 0.3rem 0rem; -moz-transition: background 0.5s ease; -o-transition: background 0.5s ease; -webkit-transition: background 0.5s ease; transition: background 0.5s ease;
}
input[type=submit]:hover { cursor: pointer; background-color: #36d278;
}
input[type=submit]:active { -webkit-transition-duration: 0s; background-color: #229955;
}
#signup.is-on { color: #fff;
}
.signup-fields { height: 0; opacity: 0;
}
.signup-fields.is-on { opacity: 1; height: 60px;
}
.main { margin: -2.5rem auto 0rem; width: 16rem;
}
.main .extras { text-align: center; font-size: 0.8rem; margin-top: 1rem;
}
.main .extras a { text-decoration: none; font-weight: 300; color: #75e0a2;
}
.main .extras a:hover { color: #fff; text-decoration: underline;
}

Overlapping signup/login - Script Codes JS Codes

$('#signup').click(function(){ if($(this).hasClass("is-on")) { // $(".signup-fields").slideUp(); $(this).removeClass('is-on').html("sign up"); $('.signup-fields').removeClass('is-on'); $('#submit').attr('value','log in'); $('#verb').html('continue'); } else { // $(".signup-fields").slideDown(); $(this).addClass('is-on').html("nevermind, log in"); $('.signup-fields').addClass('is-on'); $('#submit').attr('value','sign up'); $('#verb').html('begin'); }
});
Overlapping signup/login - Script Codes
Overlapping signup/login - Script Codes
Home Page Home
Developer Jarad Light
Username jaradlight
Uploaded September 30, 2022
Rating 4.5
Size 3,986 Kb
Views 24,288
Do you need developer help for Overlapping signup/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!

Jarad Light (jaradlight) Script Codes
Name
Dropdown styles
Simple Menu
Sass Placeholder Stuff
Map Location Hover demo
Loading Bar
Input File behaviours
Animated Checkboxes
RPG Tool
A Pen by Jarad Light
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!