[HTML + CSS + JAVASCRIPT]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로그인</title>
<style>
body, html {
width: 100%;
height: 100%;
}
body {
background: #EAEAEA;
display: flex;
}
.login-image {
margin-bottom : 15px;
height: 150px;
display: block;
margin-left: auto;
margin-right: 65px;
}
.login-container {
background: white;
width: 25rem;
height: 500px;
border: solid 3px #980000;
border-radius: 8px;
margin : 1em;
text-align: center;
}
form {
padding: 30px;
}
.btn-login {
width: 100%;
height: 55px;
border-radius: 10px;
border: 2px solid white;
background: #980000;
color: white;
font-size: 20px;
opacity: 0.8;
margin-top: 8px;
}
.btn-login:hover {
transition-duration: 0.5s;
border: 2px solid white;
background: #980000;
opacity: 1;
}
.input {
font-size: 20px;
width: 95%;
height: 50px;
outline: 0;
margin-top : 15px;
background: transparent;
border-color: #980000;
border-radius: 5px;
padding-left: 10px;
}
.input:hover {
border-color: #E04848;
}
.find-password {
font-size: 18px;
border-bottom:1px solid black;
justify-content: flex-end;
position: relative;
vertical-align: middle;
bottom: 1px;
}
.find-password:hover {
color: #0055FF;
}
.sidebar {
height: 550px;
width: 0px;
position: fixed;
background-color: #FFE400;
border-radius :10px;
margin-bottom : 10px;
overflow-x: hidden;
transition: 0.5s;
}
span {
margin-left: 15px;
}
input[type=checkbox] {
transform: scale(2);
}
label.checkbox-label input[type=checkbox]{
position: relative;
vertical-align: middle;
bottom: 1px;
position: relative;
justify-content: flex-start;
}
label.checkbox-label:hover{
color:#0055FF;
}
hr {
margin-top: 20px;
}
label.create-account {
color: #980000;
}
label.create-account:hover {
color:#0055FF
}
</style>
</head>
<body>
<span style="font-size: 40px; cursor: pointer" class="open-span" onclick="openBar()">☰</span>
<div class="sidebar" id="sidebar">
<section class="login-container">
<span style="margin-right:15px; float:right; font-size: 40px; cursor: pointer" class="close-span" onclick="closeBar()">☓</span>
<form action="index.html" >
<img class="login-image" src="https://image.flaticon.com/icons/svg/115/115586.svg" alt="login-image">
<input class="input" type="text" name="user-email" placeholder="EMAIL@DOMAIN.COM" autofocus required>
<input class="input" type="password" name="user-pwd" placeholder="PASSWORD" required>
<button class="btn-login" type="submit">로그인</button>
<!-- <input type="image" class="btn-google" src="image/google_normal.png" alt="sign in" style="width:351px; height:53px">-->
<label class ="checkbox-label" style = "font-size: 18px; float: left; margin: 1px 5px"><input type = "checkbox" > 자동 로그인</label>
<label class = "find-password" style = "float: right; margin-right: 3px;">비밀번호 찾기</label>
<hr style = "opacity: 0">
<hr>
<label style = "margin:1px auto; opacity: 0.7; color: gray; font-size: 16px">회원이 아니십니까?</label>
<label class="create-account" style = "margin:1px auto;font-size: 18px;">지금 가입하기!</label>
</form>
<label style = "font-size: 14px;">©**** Corp. All rights reserved</label>
</section>
</div>
<script type="text/javascript">
function openBar() {
document.getElementById("sidebar").style.width = "440px";
}
function closeBar() {
document.getElementById("sidebar").style.width = "0";
}
</script>
</body>
</html>
'PROGRAMMING > HTML & CSS' 카테고리의 다른 글
| 키보드 입력과 확인 + 로딩화면 (0) | 2018.05.20 |
|---|---|
| 폼(FORM)안에서 버튼 클릭시 자동으로 제출(SUBMIT)되는 문제 (0) | 2018.04.23 |
| 너비(width)에 패딩(padding)도 포함이 되나요? (0) | 2018.04.15 |
| HTML+CSS만으로 만든 카드형 레이아웃(card layout) (0) | 2018.04.09 |
| 이클립스에서 웹프로젝트 실행할 웹브라우저 설정하기 (0) | 2018.03.01 |