A Pen by HARUN PEHLİVAN on CodePen.
Created
June 6, 2021 21:47
-
-
Save harunpehlivan/c9f766d4b9ffa13237d634e213959cdb to your computer and use it in GitHub Desktop.
Double slider Sign in/up Form - Desktop Only
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<section> | |
<div class="container"> | |
<div class="form sign-in-form"> | |
<div class="wrapper"> | |
<form action="#"> | |
<h1>Sign In</h1> | |
<p>use your email and password to sign in</p> | |
<input type="email" placeholder="Email"> | |
<input type="password" placeholder="password"> | |
<button>Sign In</button> | |
</form> | |
</div> | |
</div> | |
<div class="form sign-up-form active"> | |
<div class="wrapper"> | |
<form action="#"> | |
<h1>Sign up</h1> | |
<p>Please, provide all the correct info to create an account</p> | |
<input type="text" placeholder="Full Name"> | |
<input type="email" placeholder="Email"> | |
<input type="password" placeholder="password"> | |
<button>Sign Up</button> | |
</form> | |
</div> | |
</div> | |
<div class="overlay-container"> | |
<div class="overlay"> | |
<div class="overlay-left"> | |
<h1>Create Account</h1> | |
<p>or</p> | |
<button id="signInButton">Log In</button> | |
</div> | |
<div class="overlay-right"> | |
<h1>Please, Log In</h1> | |
<p>or</p> | |
<button id="signUpButton">Create Account</button> | |
</div> | |
</div> | |
</div> | |
</div> | |
</section> | |
<!-- ******************* --> | |
<!-- This Code is for only the floating card in right bottom corner --> | |
<!-- ******************** --> | |
<div id="webCifar-sidebox"> | |
<div id="webCifar"> | |
<h2 class="logo">HP IT GROUP (TEBIM TEBITAGEM) TTGRT</h2> | |
<p class="author">Coded By <span>HARUN PEHLİVAN </span> </p> | |
<div class="items"> | |
<a href="https://www.youtube.com/user/harunpehlivan1" target="_blank" class="item youtubeLink"> | |
<svg title="watch how we made this" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"> | |
<path d="M10 12a2 2 0 100-4 2 2 0 000 4z" /> | |
<path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd" /> | |
</svg> | |
<p>Watch how we made this. | |
</p> | |
</a> | |
<a href="https://harunpehlivanitcoderdesignerfounderceo.glitch.me/" target="_blank" class="item"> | |
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" /> | |
</svg> | |
<p>CODER,DESIGNER</p> | |
</a> | |
</div> | |
<div class="close"> | |
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"> | |
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" /> | |
</svg> | |
</div> | |
</div> | |
<div id="webCifar-icon"> | |
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> | |
</svg> | |
<p>Info About the pen</p> | |
</div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const signIn = document.querySelector("#signInButton"); | |
const signUp = document.querySelector("#signUpButton"); | |
const signInForm = document.querySelector(".container .sign-in-form"); | |
const signUpForm = document.querySelector(".container .sign-up-form"); | |
const overlay_container = document.querySelector( | |
".container .overlay-container" | |
); | |
const overlay = document.querySelector( | |
".container .overlay-container .overlay" | |
); | |
signIn.addEventListener("click", () => { | |
overlay_container.style.transform = "translateX(100%)"; | |
overlay.style.transform = "translateX(-50%)"; | |
signInForm.classList.add("active"); | |
signUpForm.classList.remove("active"); | |
}); | |
signUp.addEventListener("click", () => { | |
overlay_container.style.transform = "translateX(0)"; | |
overlay.style.transform = "translateX(0)"; | |
signUpForm.classList.add("active"); | |
signInForm.classList.remove("active"); | |
}); | |
// ********************* | |
// This Code is for only the floating card in right bottom corner | |
// ********************** | |
const WebCifarIcon = document.querySelector("#webCifar-icon"); | |
const WebCifarEl = document.querySelector("#webCifar"); | |
const close = WebCifarEl.querySelector(".close"); | |
const youtubeLink = document.querySelector(".youtubeLink"); | |
WebCifarIcon.addEventListener("click", () => { | |
WebCifarEl.classList.add("active"); | |
}); | |
close.addEventListener("click", () => { | |
WebCifarEl.classList.remove("active"); | |
}); | |
youtubeLink.setAttribute("href", "https://www.youtube.com/user/harunpehlivan1"); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400&family=Roboto:wght@300;500&display=swap"); | |
* { | |
padding: 0; | |
margin: 0; | |
box-sizing: border-box; | |
} | |
section { | |
min-height: 95vh; | |
width: 100%; | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
} | |
.container { | |
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.199); | |
padding: 50px 30px; | |
border-radius: 10px; | |
min-width: 800px; | |
max-width: 1000px; | |
min-height: 500px; | |
margin: 0 20px; | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
background-color: #f6f5f7; | |
position: relative; | |
overflow: hidden; | |
} | |
.container .form { | |
position: absolute; | |
top: 0; | |
text-align: center; | |
padding: 0 20px; | |
width: 50%; | |
height: 100%; | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
background-color: #f6f5f7; | |
transition: 0.7s ease-in-out transform; | |
overflow: hidden; | |
} | |
.container .form.sign-in-form { | |
left: 0; | |
} | |
.container .form.sign-up-form { | |
right: 0; | |
} | |
.container .form .wrapper { | |
position: absolute; | |
top: 0; | |
left: 0; | |
height: 100%; | |
width: 100%; | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
transition: 0.7s ease-in-out transform; | |
} | |
.container .form.sign-in-form .wrapper { | |
transform: translateX(100%); | |
} | |
.container .sign-in-form.active .wrapper { | |
transform: translateX(0); | |
} | |
.container .form.sign-up-form .wrapper { | |
transform: translateX(-100%); | |
} | |
.container .sign-up-form.active .wrapper { | |
transform: translateX(0); | |
} | |
.container .form h1 { | |
font-family: "Montserrat"; | |
font-size: 40px; | |
font-weight: 300; | |
text-transform: capitalize; | |
margin-bottom: 10px; | |
} | |
.container .form p { | |
font-family: "Roboto"; | |
font-weight: 500; | |
font-size: 14px; | |
text-transform: capitalize; | |
line-height: 25px; | |
margin-bottom: 30px; | |
} | |
.container .form input { | |
display: block; | |
width: 300px; | |
margin: 0 auto; | |
margin-bottom: 15px; | |
height: 35px; | |
font-family: "Montserrat"; | |
font-size: 14px; | |
padding-left: 15px; | |
border: none; | |
background-color: rgba(199, 197, 197, 0.425); | |
outline: none; | |
} | |
.container .form input::placeholder { | |
color: rgba(0, 0, 0, 0.658); | |
} | |
.overlay-container .overlay button, | |
.container .form button { | |
padding: 10px 50px; | |
border: none; | |
outline: none; | |
font-family: "Montserrat"; | |
font-size: 18px; | |
background-color: rgba(220, 20, 60, 0.568); | |
cursor: pointer; | |
color: #f6f5f7; | |
} | |
.container .overlay-container { | |
position: absolute; | |
background-color: crimson; | |
left: 0; | |
top: 0; | |
width: 50%; | |
height: 100%; | |
overflow: hidden; | |
transition: 0.7s ease-in-out transform; | |
} | |
.container .overlay-container .overlay { | |
background-image: url(https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1604403639/responsivecomingsoon_zzcqkv.png); | |
background-size: cover; | |
background-position: center center; | |
position: absolute; | |
left: 0%; | |
/* background-color: rebeccapurple; */ | |
width: 200%; | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
height: 100%; | |
transition: 0.7s ease-in-out transform; | |
z-index: 1; | |
} | |
.container .overlay::after { | |
content: ""; | |
position: absolute; | |
height: 100%; | |
width: 100%; | |
left: 0; | |
top: 0; | |
background-color: crimson; | |
z-index: -1; | |
opacity: 0.9; | |
} | |
.overlay-container .overlay .overlay-left, | |
.overlay-container .overlay .overlay-right { | |
flex-basis: 50%; | |
text-align: center; | |
} | |
.overlay-container .overlay .overlay-left { | |
} | |
.overlay-container .overlay h1 { | |
font-family: "Montserrat"; | |
font-size: 40px; | |
font-weight: 300; | |
color: white; | |
} | |
.overlay-container .overlay p { | |
color: white; | |
font-family: "Roboto"; | |
font-size: 25px; | |
font-weight: 300; | |
} | |
.overlay-container .overlay button { | |
background-color: white; | |
color: crimson; | |
margin-top: 20px; | |
} | |
/* ********************* */ | |
/* This Code is for only the floating card in right bottom corner */ | |
/* ********************** */ | |
@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap"); | |
* { | |
padding: 0; | |
margin: 0; | |
-webkit-box-sizing: border-box; | |
box-sizing: border-box; | |
} | |
a { | |
color: var(--color-4); | |
text-decoration: none; | |
} | |
#webCifar-sidebox { | |
position: absolute; | |
right: 0px; | |
bottom: 0px; | |
overflow-x: clip; | |
width: 300px; | |
} | |
#webCifar { | |
--color-1: #17bcb4; | |
--color-2: #24252a; | |
--color-3: #244044; | |
--color-4: #f3f8f7; | |
background: var(--color-2); | |
display: inline-block; | |
color: var(--color-4); | |
padding: 10px 17px; | |
border-radius: 6px; | |
font-family: "Roboto Mono", monospace; | |
text-align: center; | |
position: absolute; | |
right: 5px; | |
bottom: 5px; | |
-webkit-transform: translateX(calc(100% + 5px)); | |
transform: translateX(calc(100% + 5px)); | |
-webkit-transition: 0.5s ease-out transform; | |
transition: 0.5s ease-out transform; | |
z-index: 4; | |
} | |
#webCifar.active { | |
-webkit-transform: translateX(0); | |
transform: translateX(0); | |
} | |
#webCifar .logo { | |
font-size: 25px; | |
} | |
#webCifar .author { | |
margin-top: 10px; | |
margin-bottom: 20px; | |
} | |
#webCifar .author span { | |
background-color: var(--color-3); | |
padding: 3px; | |
border-radius: 4px; | |
} | |
#webCifar .items { | |
display: -webkit-box; | |
display: -ms-flexbox; | |
display: flex; | |
-webkit-box-align: start; | |
-ms-flex-align: start; | |
align-items: start; | |
-webkit-box-pack: center; | |
-ms-flex-pack: center; | |
justify-content: center; | |
-webkit-box-orient: vertical; | |
-webkit-box-direction: normal; | |
-ms-flex-direction: column; | |
flex-direction: column; | |
} | |
#webCifar .item { | |
display: -webkit-box; | |
display: -ms-flexbox; | |
display: flex; | |
-webkit-box-align: center; | |
-ms-flex-align: center; | |
align-items: center; | |
-webkit-box-pack: center; | |
-ms-flex-pack: center; | |
justify-content: center; | |
gap: 10px; | |
padding: 5px; | |
border-radius: 4px; | |
text-align: left; | |
} | |
#webCifar .item:hover { | |
background-color: var(--color-3); | |
} | |
#webCifar svg { | |
max-width: 20px; | |
} | |
#webCifar .close { | |
position: absolute; | |
display: inline-block; | |
height: 30px; | |
width: 30px; | |
right: 5px; | |
top: 5px; | |
padding: 5px; | |
background-color: var(--color-3); | |
border-radius: 50%; | |
font-size: 20px; | |
cursor: pointer; | |
} | |
#webCifar-icon { | |
--color-2: #24252a; | |
--color-3: #244044; | |
font-family: "Roboto Mono", monospace; | |
text-align: left; | |
display: -webkit-box; | |
display: -ms-flexbox; | |
display: flex; | |
-webkit-box-align: center; | |
-ms-flex-align: center; | |
align-items: center; | |
-webkit-box-pack: center; | |
-ms-flex-pack: center; | |
justify-content: center; | |
background-color: var(--color-2); | |
color: white; | |
width: -webkit-fit-content; | |
width: -moz-fit-content; | |
width: fit-content; | |
padding: 5px; | |
border-radius: 4px; | |
gap: 5px; | |
margin: 5px; | |
cursor: pointer; | |
z-index: 1; | |
position: relative; | |
right: -27%; | |
} | |
#webCifar-icon svg { | |
max-width: 20px; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment