Front-End/Web
그룹 선택 html
by Jyeoni
2022. 8. 9.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="select_group.css" rel="stylesheet" type="text/css" />
</head>
<body>
<link href="select_group.css" rel="stylesheet" type="text/css" />
<div class="container">
<div class="thumbex">
<div class="thumbnail"><a href="javascript:void(0)"> <img src="img/group.png" /><span>그룹 생성하기</span></a>
</div>
</div>
<div class="thumbex">
<div class="thumbnail"><a href="javascript:void(0)"><img src="img/invite.png" /><span>그룹 참여하기</span></a>
</div>
</div>
</div>
</body>
</html>
@font-face {
font-family: 'GangwonEdu_OTFBoldA';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/GangwonEdu_OTFBoldA.woff') format('woff');
font-weight: normal;
font-style: normal;
}
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
background-color: #363062;
}
.container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
padding: 0 30px;
}
.container .thumbex {
margin: 10px 20px 30px;
width: 100%;
min-width: 250px;
max-width: 450px;
height: 400px;
-webkit-flex: 1;
-ms-flex: 1;
flex: 2;
position: relative;
top: 230px;
overflow: hidden;
outline: 3px solid #511e75;
outline-offset: -15px;
background-color: #ffffff;
box-shadow: 5px 10px 40px 5px rgba(43, 35, 35, 0.5);
}
.container .thumbex .thumbnail {
overflow: hidden;
min-width: 250px;
height: 320px;
position: relative;
top: 40px;
opacity: 0.88;
backface-visibility: hidden;
transition: all 0.4s ease-out;
}
.container .thumbex .thumbnail img {
position: absolute;
z-index: 1;
left: 50%;
top: 50%;
height: 115%;
width: auto;
transform: translate(-50%, -50%);
backface-visibility: hidden;
}
.container .thumbex .thumbnail span {
position: absolute;
z-index: 2;
top: calc(150px - 20px);
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
padding: 10px 50px;
margin: 0 45px;
text-align: center;
font-size: 24px;
color: white;
font-weight: 300;
font-family: 'GangwonEdu_OTFBoldA';
letter-spacing: 0.2px;
transition: all 0.3s ease-out;
}
.container .thumbex .thumbnail:hover {
backface-visibility: hidden;
transform: scale(1.15, 1.15);
opacity: 1;
}
.container .thumbex .thumbnail:hover span {
opacity: 0;
}
