1 건의
토글 검색결과




[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()">&#9776;</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()">&#9747</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>