Untitled

avatar
unknown
plain_text
a year ago
3.2 kB
11
Indexable
body {
	height: 100vh;
	display: flex;
	align-items: center;
	background-color: #F2F2F2;
	margin: 0;
}
h1, p {
	margin: 0;
}
.login-content {
	width: 1443px;
	height: 718px;
	display: flex;
	margin: auto;
	background-color: #fff;
	border-radius: 10px;
	box-shadow: 5px 5px 5px 5px rgb(206, 206, 206);
}
.login-content .img{
	width: 752px;
	height: 718px;
	background: url('../img/main.png') no-repeat center;
	border-radius: 10px 0 0 10px;
}
h1{
	color: black;
	font-size: 36px;
	letter-spacing: -0.2px;
}
.login-wrap {
	display: flex;
	flex-direction: column;
	margin-left: 77px;
	justify-content: center;
}
.login-wrap .sub-title {
	color: #46515C;
	font-size: 20px;
}
.login-wrap button {
	width: 404px;
	height: 48px;
	margin-top: 42px;
	background: #F24976;
	border-radius: 5px;
	border: 0px;
	color: #fff;
	font-weight: bold;
	font-size: 20px;
	cursor: pointer;
}
.login-wrap .link-group {
	display: flex;
	gap: 8px;
}
.login-wrap .link-group p {
	color: #46515C;
	font-weight: 500;
	font-size: 16px;
}
.login-wrap .link-group a {
	color: #F24976;
	font-weight: 600;
	font-size: 16px;
	text-decoration: none;
}
.login-wrap input {
	height: 40px;
	font-size: 16px;
	border: 1px solid #949494;
	border-radius: 4px;
}
------------
$(function() {
	// login page js
});

-----
<!-- <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>LG사이언스파크</title>
<link rel="stylesheet" href="css/index.css">
<script src="lib/js/jquery-3.4.1.js"></script>
<script src="js/index.js"></script>
</head>
<body>
	<div class="login-content">
		<div class="img"></div>
		<div class="login-wrap">
			<h1>Login</h1>
			<p class="sub-title">Please login to your account.</p>
			<!-- login page Html source -->
<div class="link-group">
	<p>New User?</p><a href="#">Registration</a>
</div>
</div>
</div>
</body>

</html> -->

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>LG Science Park</title>
	<link rel="stylesheet" href="css/index.css">
	<script src="lib/js/jquery-3.4.1.js"></script>
	<script src="js/index.js"></script>
</head>

<body>
	<div class="login-content">
		<div class="img">
			<!-- Image Section -->
			<img src="img/main.png" alt="LG Science Park Building">
		</div>
		<div class="login-wrap">
			<h1>Login</h1>
			<p class="sub-title">Please login to your account.</p>
			<form id="login-form">
				<div>
					<label for="login-id">ID</label>
					<input type="text" id="login-id" placeholder="Please enter login ID." required>
				</div>
				<div>
					<label for="login-password">Password</label>
					<input type="password" id="login-password" placeholder="Please enter login password." required>
				</div>
				<button type="submit" id="login-button">Login</button>
				<div class="link-group">
					<p>New User?</p>
					<a href="#">Registration</a>
				</div>
			</form>
			<div id="error-message" style="display:none;">
				The login ID / password format is not valid.
			</div>
		</div>
	</div>
</body>

</html>
Editor is loading...
Leave a Comment