Skip to content

Commit

Permalink
[Feat] 마이페이지
Browse files Browse the repository at this point in the history 
같은 사진 반복을 JS 구현하려다가.. 실패했습니다..
  • Loading branch information
@dudrhy12
dudrhy12 committed Apr 12, 2023
1 parent fcff37a commit 6f4e9af
Showing 1 changed file with 153 additions and 0 deletions.
153 changes: 153 additions & 0 deletions MyPage.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,153 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>MyPage</title>
<style>
.display {
box-sizing: border-box;
width: 390px;
height: 844px;
background-color: #FBEDDD;
}

.info {
position: absolute;
width: 321px;
height: 78px;
left: 38px;
top: 132px;
background: #FFFFFF;
border-radius: 10px;
}

.challenge {
box-sizing: border-box;
position: absolute;
width: 320px;
height: 285px;
left: 35px;
top: 306px;
background: rgba(255, 255, 255, 0.7);
border: 2px solid #FF9900;
border-radius: 10px;
}

.today {
float: left;
position: absolute;
width: 321px;
height: 55px;
left: 34px;
top: 610px;
background: #FFFFFF;
border-radius: 10px;
}

.bottom_menu {
position: absolute;
width: 390px;
height: 90.5px;
top: 761px;
background-color: white
}

.bottom_menu>div {
float: left;
width: 20%;
height: 100%;
text-align: center;
padding-top: 20px;
}
</style>
</head>

<body>
<div class="display"></div>
<h1
style="position: absolute; width: 146px; height: 40px; left: 122px; top: 50px; font-weight: 400; font-size: 28px; line-height: 38px; text-align: center; color: #000000;">
마이페이지</h1>
<div class="info">
<h1
style="float: left; position: relative; left: 15px; top: 5px; font-family: 'Inter'; font-style: normal; font-weight: 600; font-size: 16px; line-height: 19px; color: #000000; transform: rotate(0.37deg);">
내가 모은 포인트</h1>
<h1
style="position: relative; left: 130px; top: 5px; font-family: 'Inter'; font-style: normal; font-weight: 400; font-size: 16px; line-height: 19px; color: #000000; transform: rotate(0.37deg);">
1050P</h1>
<h1
style="float: left; position: relative; left: 15px; top: -7px; font-family: 'Inter'; font-style: normal; font-weight: 600; font-size: 16px; line-height: 19px; color: #000000; transform: rotate(0.37deg);">
연속 출석 일수</h1>
<h1
style="position: relative; left: 160px; top: 5px; font-family: 'Inter'; font-style: normal; font-weight: 400; font-size: 16px; line-height: 19px; color: #000000; transform: rotate(0.37deg);;">
3일</h1>
</div>
<h1
style="float: left; position:absolute; width: 105.5px; height: 12.59px; left: 56.15px; top: 210px; font-family: 'Inter'; font-style: normal; font-weight: 600; font-size: 16px; line-height: 19px; color: #000000; transform: rotate(0.37deg);">
요즘 나는</h1>
<h1
style="position: absolute; width: 109.98px; height: 22.59px; left: 240px; top: 210px; font-family: 'Inter'; font-style: normal; font-weight: 400; font-size: 16px; line-height: 19px; color: #000000; transform: rotate(0.37deg);">
걱정이 많아요</h1>
<h1
style="position: absolute; width: 63.93px; height: 22.59px; left: 40.15px; top: 270px; font-family: 'Inter'; font-style: normal; font-weight: 600; font-size: 16px; line-height: 19px; color: #000000; transform: rotate(0.37deg);">
챌린지</h1>
<div class="challenge">
<table style="border:1px; margin-left:auto; margin-right:auto;">
<tr>
<td><img src="C:\git_hub\Comma\img\Stamp_1.png" /></td>
<td><img src="C:\git_hub\Comma\img\Stamp_2.png" /></td>
<td><img src="C:\git_hub\Comma\img\Stamp_3.png" /></td>
<td><img src="C:\git_hub\Comma\img\Stamp_empty.png" /></td>
<tr>
</table>
<table style="border:1px; margin-left:auto; margin-right:auto;">
<tr>
<td><img src="C:\git_hub\Comma\img\Stamp_empty.png" /></td>
<td><img src="C:\git_hub\Comma\img\Stamp_empty.png" /></td>
<td><img src="C:\git_hub\Comma\img\Stamp_empty.png" /></td>
<td><img src="C:\git_hub\Comma\img\Stamp_empty.png" /></td>
<tr>
</table>
<table style="border:1px; margin-left:auto; margin-right:auto;">
<tr>
<td><img src="C:\git_hub\Comma\img\Stamp_empty.png" /></td>
<td><img src="C:\git_hub\Comma\img\Stamp_empty.png" /></td>
<td><img src="C:\git_hub\Comma\img\Stamp_empty.png" /></td>
<td><img src="C:\git_hub\Comma\img\Stamp_empty.png" /></td>
<tr>
</table>
<table style="border:1px; margin-left:auto; margin-right:auto;">
<tr>
<td><img src="C:\git_hub\Comma\img\Stamp_empty.png" /></td>
<td><img src="C:\git_hub\Comma\img\Stamp_empty.png" /></td>
<td><img src="C:\git_hub\Comma\img\Stamp_empty.png" /></td>
<td><img src="C:\git_hub\Comma\img\Stamp_empty.png" /></td>
<tr>
</table>
</div>
<div class="today">
<h1
style="float: left; position: relative; width: 228px; height: 23px; left: 15px; top: 7px; font-family: 'Inter'; font-style: normal; font-weight: 500; font-size: 16px; line-height: 19px; color: #000000;">
3월 넷째 주 기록 분석 보러가기</h1>
<img style="float: left; position: relative; width: 11px; height: 17px; left: 60px; top: 20px;"
src="C:\git_hub\Comma\img\Chevron.png" />
</div>
<div class="bottom_menu">
<div>
<img style="float: left" src="C:\git_hub\Comma\img\menu_write.png">
</div>
<div>
<img style="float: left" src="C:\git_hub\Comma\img\menu_book.png">
</div>
<div>
<img style="float: left" src="C:\git_hub\Comma\img\menu_home.png">
</div>
<div>
<img style="float: left" src="C:\git_hub\Comma\img\menu_mypage.png">
</div>
<div>
<img style="float: left" src="C:\git_hub\Comma\img\menu_setting.png">
</div>
</body>

</html>

0 comments on commit 6f4e9af

Please sign in to comment.