728x90
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>덕담 하나 주면 안 잡아먹지!</title>
<meta property="og:title" content="겸댕이우진님의 덕담 페이지"/> //->공유할때 글씨
<meta property="og:description" content="덕담 한마디 남겨주세요!"/> //->페이지 설명
<meta property="og:image" content="https://2022-01-newyear.s3.ap-northeast- 2.amazonaws.com/ogimage.png"/> //->공유할때 이미지링크
<style>
@font-face {
font-family: 'Cafe24Ssurround';
src: url('https://2022-01-newyear.s3.ap-northeast-2.amazonaws.com/Cafe24Ssurround.woff') format('woff');
}
*
font-family: 'Cafe24Ssurround';
}
.background{
width: 100vw;
height: 100vh;
max-width: 450px;
background-position: center;
background-size: cover;
margin: auto;
}
body, h1,p{
margin: 0;
}
.title{
color: #3f3732;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding-top: 5vh;
}
.title > h1{
font-size: 22px;
background-color: white;
padding: 8px 16px;
border-radius: 16px;
}
.title > p{
font-size: 18px;
}
.title > p > span{
font-size: 22px;
}
.btn {
background-color: #3f3732;
color: white;
width: 300px;
height: 50px;
border-radius: 10px;
font-size: 18px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
cursor: pointer;
position: fixed;
bottom: 16px;
left: calc(50% - 150px);
}
.box > img{
width:70px;
position: absolute;
bottom: 50%;
left:20%;
}
</style>
<script src="https://2022-01-newyear.s3.ap-northeast-2.amazonaws.com/free_newyear_2022.js"></script>
<script>
let mycode = 'b6b546b5bf9b295df41ae2777af5a13e';
//->덕담 기록하기
//->덕담 불러와서 ⇒ 아이콘 만들어 붙이기
</script>
</head>
<body>
<div class="background">
<div class="title">
<h1>덕담 하나 주면 안 잡아먹지!</h1>
<p>겸댕이우진님이 받은 덕담: <span>2개</span></p>
</div>
<div class="box">
</div>
</div>
<div class="btn">바구니에 덕담 남기기</div>
</body>
</html>
728x90
'• program > 스파르타코딩클럽' 카테고리의 다른 글
| [스파르타코딩클럽] 동기부여 화면 만들기 (0) | 2022.11.12 |
|---|---|
| 전체코드 (0) | 2022.01.30 |
| [CSS 기본내용] html:5 문법6 (덕담 아이콘넣기) (0) | 2022.01.29 |
| [CSS 기본내용] html:5 문법5 (떠다니는 버튼만들기) (0) | 2022.01.29 |
| [CSS 기본내용] html:5 문법5 (폰트바꾸기) (0) | 2022.01.29 |