<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Sign up form</title>
<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap'><link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<body>
<div class="container">
<div class="page">
<h1>Hello Friend!</h1>
<p>Suspendisse porttitor mi id magna mollis, eget hendrerit justo volutpat. Vivamus nec arcu sed mauris posuere aliquam.</p>
<div class="shape1" id="shape"></div>
<div class="shape2" id="shape"></div>
</div>
<div class="form">
<h2>Create an account</h2>
<div class="sns">
<div class="circle1"><img src="https://www.flaticon.com/svg/static/icons/svg/1384/1384053.svg" width="30"/></div>
<div class="circle1 tw"><img src="https://www.flaticon.com/svg/static/icons/svg/733/733579.svg" width="30"/></div>
<div class="circle1 goo"><img src="https://www.flaticon.com/svg/static/icons/svg/2875/2875404.svg" width="30"/></div>
</div>
<p>or use your email for registration</p>
<input class="searchTerm" type="text" placeholder="Name"/>
<input class="searchTerm" type="text" placeholder="E-mail"/>
<input class="searchTerm" type="text" placeholder="Password"/>
<div class="button"><a href="#">sign up</a></div>
</div>
</div>
</body>
<!-- partial -->
</body>
</html>
* {
border: solid 0px black;
font-family: "Open Sans", sans-serif;
}
html, body {
padding: 0;
margin: 0;
width: 100%;
background-color: #f6f5f5;
}
.container {
width: 50em;
height: 25em;
display: block;
margin: auto;
margin-top: 8em;
margin-bottom: 5em;
border-radius: 12px;
border: solid 1px rgba(20, 83, 116, 0.2);
overflow: hidden;
background-color: #f6f5f5;
box-shadow: 2px 2px 15px rgba(20, 83, 116, 0.2);
}
.page {
display: block;
width: 50%;
height: 25em;
margin: 0;
float: left;
background-color: #00334e;
text-align: center;
}
.page h1 {
font-size: 3em;
font-weight: 400;
margin-top: 2em;
margin-bottom: 0.2em;
color: #ee6f57;
}
.page p {
font-size: 0.6em;
width: 60%;
margin: auto;
color: #f6f5f5;
}
.page .shape1 {
position: relative;
width: 8em;
height: 8em;
background-color: #145374;
border-radius: 10px;
left: -10px;
bottom: -80px;
transform: rotate(45deg);
transition: all 0.3s ease-in-out;
}
.page .shape2 {
position: reltive;
display: flex;
width: 9em;
height: 9em;
background-color: #ee6f57;
border-radius: 10px;
left: -20px;
bottom: -40px;
transform: rotate(30deg);
transition: all 0.3s ease-in-out;
z-index: 1;
}
.page .shape2:hover {
transform: rotate(35deg);
transition: all 0.3s ease-in-out;
}
.page .shape1:hover {
transform: rotate(50deg);
transition: all 0.3s ease-in-out;
}
.form {
display: inline-block;
width: 50%;
height: 25em;
margin: 0;
background-color: #f6f5f5;
text-align: center;
}
.form input {
display: block;
margin: auto;
margin-bottom: 1em;
width: 15em;
height: 2.2em;
border: solid 1px rgba(20, 83, 116, 0.1);
transition: all 0.1s;
}
.form input:hover {
border: solid 1px #145374;
}
.form input:focus {
color: #145374;
font-weight: 600;
border: solid 1px #145374;
}
.form .searchTerm:focus {
outline: none;
letter-spacing: 1px;
}
.form h2 {
color: #145374;
margin-top: 1.5em;
margin-bottom: 0.5em;
}
.form .sns {
border: solid 0px;
display: block;
text-align: center;
margin: 0;
}
.form .circle1 {
width: 50px;
height: 50px;
display: inline-block;
border: solid 2px rgba(20, 83, 116, 0.2);
border-radius: 50%;
margin: 8px;
text-align: center;
vertical-align: middle;
}
.form .circle1:hover {
cursor: pointer;
border: solid 2px #145374;
}
.form img {
position: relative;
left: 50%;
top: 50%;
transform: translate(-85%, -50%);
}
.form p {
font-size: 0.8em;
color: #00334e;
margin-top: 0;
}
.form .button {
display: block;
margin: auto;
margin-top: 1.2em;
width: 8em;
height: 2.5em;
}
.form .button a {
display: block;
width: inherit;
height: inherit;
border: solid 1.5px #145374;
border-radius: 20px;
line-height: 2.4em;
font-weight: 400;
text-decoration: none;
text-transform: uppercase;
color: #145374;
margin: 0;
}
.form .button a:hover {
border: solid 2px #ee6f57;
color: #ee6f57;
font-weight: 600;
}