인덱스

카테고리 없음

인덱스

호기심_지옥 2022. 5. 3. 08:12

<!DOCTYPE html>
<html xmlns:th ="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inconsolata">
<title>Index</title>
<style>
body{
background: url("https://i.pinimg.com/originals/56/f3/5d/56f35d7c3eebf97e034ed35482bc748e.jpg") 50% fixed;
background-size: cover;
}

.button-64 {
align-items: center;
position:absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-image: linear-gradient(144deg,#AF40FF, #5B42F3 50%,#00DDEB);
border: 0;
border-radius: 8px;
box-shadow: rgba(151, 65, 252, 0.2) 0 15px 30px -5px;
box-sizing: border-box;
color: #FFFFFF;
display: flex;
font-family: Phantomsans, sans-serif;
font-size: 20px;
justify-content: center;
line-height: 1em;
max-width: 100%;
min-width: 140px;
padding: 3px;
text-decoration: none;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
white-space: nowrap;
cursor: pointer;
}

.button-64:active,
.button-64:hover {
outline: 0;
}

.button-64 span {
background-color: rgb(5, 6, 45);
padding: 16px 24px;
border-radius: 6px;
width: 100%;
height: 100%;
transition: 300ms;
}

.button-64:hover span {
background: none;
}

@media (min-width: 768px) {
.button-64 {
font-size: 24px;
min-width: 196px;
}
}

.btn1:hover, .btn2:hover, .btn3:hover {
background: #f2f4f5;
text-decoration: none;
}
.btn1 {
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 20px;
-webkit-box-shadow: 0px 1px 3px #666666;
-moz-box-shadow: 0px 1px 3px #666666;
box-shadow: 0px 1px 3px #666666;
font-family: Arial;
color: #ffffff;
font-size: 15px;
background: #8296a3;
padding: 10px 20px 10px 20px;
text-decoration: none;
position:absolute;
left:30%;
top: 70%;
transform: translate(-50%, -50%);
}
.btn2 {
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 20px;
-webkit-box-shadow: 0px 1px 3px #666666;
-moz-box-shadow: 0px 1px 3px #666666;
box-shadow: 0px 1px 3px #666666;
font-family: Arial;
color: #ffffff;
font-size: 15px;
background: #8296a3;
padding: 10px 20px 10px 20px;
text-decoration: none;
position:absolute;
left:50%;
top: 70%;
transform: translate(-50%, -50%);
}

.btn3 {
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 20px;
-webkit-box-shadow: 0px 1px 3px #666666;
-moz-box-shadow: 0px 1px 3px #666666;
box-shadow: 0px 1px 3px #666666;
font-family: Arial;
color: #ffffff;
font-size: 15px;
background: #8296a3;
padding: 10px 20px 10px 20px;
text-decoration: none;
position:absolute;
left:70%;
top: 70%;
transform: translate(-50%, -50%);
}

</style>
</head>
<body>
<div class="container">
<div class="w3-top">
<div class="w3-row w3-padding w3-black">



<div class="w3-col s3" sec:authorize="! isAuthenticated()">
<a href="#" class="w3-button w3-block w3-black" th:href="@{/account/loginForm}">로그인</a>
</div>
<div class="w3-col s3" sec:authorize="! isAuthenticated()">
<a href="#" class="w3-button w3-block w3-black" th:href="@{/account/register}">회원가입</a>
</div>
<div sec:authorize="isAuthenticated()">
<span sec:authentication="name">(사용자 정보)</span>
<span sec:authentication="principal.authorities">(권한)</span>
<a href="#" th:href="@{/logout}">로그아웃</a>
</div>
<div class="w3-col s3">
<a class="w3-button w3-block w3-black" href="#" th:href="@{/board/boardList}">게시판</a>
<a class="w3-button w3-block w3-black" href="#" th:href="@{/movie/movieList}">영화게시판</a>
</div>
</div>
</div>
<button class="button-64" role="button" th:href="@{/movie/movieList}">
<a href="#" th:href="@{/movie/movieList}"></a>
<span class="text">Movie review</span>
</button>

<div>
<a class="btn1" href="https://www.cgv.co.kr/" target="_blank">CGV</a>
<a class="btn2" href=" https://www.lottecinema.co.kr/" target="_blank">롯데시네마</a>
<a class="btn3" href="https://www.megabox.co.kr/" target="_blank">메가박스</a>
</div>
</div>
</body>
</html>