<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<style>
/* body{display:flex;justify-content:center;margin-top:300px;background-color:#212121;} */
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400|Lora");
body {
background: #CBC0D3;
}
.container {
margin: 100px auto 0;
width: 650px;
height: 550px;
position: relative;
}
.welcome {
background: #f6f6f6;
width: 650px;
height: 415px;
position: absolute;
top: 25%;
border-radius: 5px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
}
.pinkbox {
position: absolute;
top: -10%;
left: 5%;
background: #EAC7CC;
width: 320px;
height: 500px;
border-radius: 5px;
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
transition: all .5s ease-in-out;
z-index: 2;
}
.nodisplay {
display: none;
transition: all .5s ease;
}
.leftbox, .rightbox {
position: absolute;
width: 50%;
transition: 1s all ease;
}
.leftbox {
left: -2%;
}
.rightbox {
right: -2%;
}
h1 {
font-family: "Open Sans", sans-serif;
text-align: center;
margin-top: 95px;
text-transform: uppercase;
color: #f6f6f6;
font-size: 2em;
letter-spacing: 8px;
}
.title {
font-family: "Lora", serif;
color: #8E9AAF;
font-size: 1.8em;
line-height: 1.1em;
letter-spacing: 3px;
text-align: center;
font-weight: 300;
margin-top: 20%;
}
.desc {
margin-top: -8px;
}
.account {
margin-top: 45%;
font-size: 10px;
}
p {
font-family: "Open Sans", sans-serif;
font-size: .7em;
letter-spacing: 2px;
color: #8E9AAF;
text-align: center;
}
span {
color: #EAC7CC;
}
.flower {
position: absolute;
width: 120px;
height: 120px;
top: 46%;
left: 29%;
opacity: .7;
}
.smaller {
width: 90px;
height: 100px;
top: 48%;
left: 38%;
opacity: .9;
}
button {
padding: 12px;
font-family: "Open Sans", sans-serif;
text-transform: uppercase;
letter-spacing: 3px;
font-size: 11px;
border-radius: 10px;
margin: auto;
outline: none;
display: block;
}
button:hover {
background: #EAC7CC;
color: #f6f6f6;
transition: background-color 1s ease-out;
}
.button {
margin-top: 3%;
background: #f6f6f6;
color: #ce7d88;
border: solid 1px #EAC7CC;
}
form {
display: flex;
align-items: center;
flex-direction: column;
padding-top: 7px;
}
.more-padding {
padding-top: 35px;
}
.more-padding input {
padding: 12px;
}
.more-padding .submit {
margin-top: 45px;
}
.submit {
margin-top: 25px;
padding: 12px;
border-color: #ce7d88;
}
.submit:hover {
background: #CBC0D3;
border-color: #bfb1c9;
}
input {
background: #EAC7CC;
width: 65%;
color: #ce7d88;
border: none;
border-bottom: 1px solid rgba(246, 246, 246, 0.5);
padding: 9px;
margin: 7px;
}
input::placeholder {
color: #f6f6f6;
letter-spacing: 2px;
font-size: 1.3em;
font-weight: 100;
}
input:focus {
color: #ce7d88;
outline: none;
border-bottom: 1.2px solid rgba(206, 125, 136, 0.7);
font-size: 1em;
transition: .8s all ease;
}
input:focus::placeholder {
opacity: 0;
}
label {
font-family: "Open Sans", sans-serif;
color: #ce7d88;
font-size: 0.8em;
letter-spacing: 1px;
}
.checkbox {
display: inline;
white-space: nowrap;
position: relative;
left: -62px;
top: 5px;
}
input[type=checkbox] {
width: 7px;
background: #ce7d88;
}
.checkbox input[type="checkbox"]:checked + label {
color: #ce7d88;
transition: .5s all ease;
}
</style>
<body>
<div class="container">
<div class="welcome">
<div class="pinkbox">
<div class="signup nodisplay">
<h1>register</h1>
<form autocomplete="off">
<input type="text" placeholder="username">
<input type="email" placeholder="email">
<input type="password" placeholder="password">
<input type="password" placeholder="confirm password">
<button class="button submit">create account </button>
</form>
</div>
<div class="signin">
<h1>sign in</h1>
<form class="more-padding" autocomplete="off">
<input type="text" placeholder="username">
<input type="password" placeholder="password">
<div class="checkbox">
<input type="checkbox" id="remember" /><label for="remember">remember me</label>
</div>
<button class="button submit">login</button>
</form>
</div>
</div>
<div class="leftbox">
<h2 class="title"><span>BLOOM</span>&<br>BOUQUET</h2>
<p class="desc">pick your perfect <span>bouquet</span></p>
<img class="flower smaller" src="https://image.ibb.co/d5X6pn/1357d638624297b.jpg" alt="1357d638624297b" border="0">
<p class="account">have an account?</p>
<button class="button" id="signin">login</button>
</div>
<div class="rightbox">
<h2 class="title"><span>BLOOM</span>&<br>BOUQUET</h2>
<p class="desc"> pick your perfect <span>bouquet</span></p>
<img class="flower" src="https://preview.ibb.co/jvu2Un/0057c1c1bab51a0.jpg"/>
<p class="account">don't have an account?</p>
<button class="button" id="signup">sign up</button>
</div>
</div>
</div>
</div>
</body>
<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.5.1/jquery.min.js" type="application/javascript"></script>
<script>
$('#signup').click(function() {
$('.pinkbox').css('transform', 'translateX(80%)');
$('.signin').addClass('nodisplay');
$('.signup').removeClass('nodisplay');
});
$('#signin').click(function() {
$('.pinkbox').css('transform', 'translateX(0%)');
$('.signup').addClass('nodisplay');
$('.signin').removeClass('nodisplay');
});
</script>
</html>
優網科技，優秀企業首選的互聯網供應服務商
優網科技秉承"專業團隊、品質服務" 的經營理念，誠信務實的服務了近萬家客戶，成為眾多世界500強、集團和上市公司的長期合作伙伴！
優網科技成立于2001年，擅長網站建設、網站與各類業務系統深度整合，致力于提供完善的企業互聯網解決方案。優網科技提供PC端網站建設（品牌展示型、官方門戶型、營銷商務型、電子商務型、信息門戶型、微信小程序定制開發、移動端應用（手機站、APP開發）、微信定制開發（微信官網、微信商城、企業微信）等一系列互聯網應用服務。
公安局備案號：
專屬顧問
