공태현 / healthcare-with-webcam

Go to a project
Toggle navigation Toggle navigation pinning
정지호
e8d0e720 1 parent 381096f7

Design main page

Inline Side-by-side
Showing 3 changed files with 134 additions and 24 deletions
1 +@import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap');
2 +@import url("https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap");
3 +@font-face {
4 + font-family: 'BMJUA';
5 + src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/BMJUA.woff') format('woff');
6 + font-weight: normal;
7 + font-style: normal;
8 +}
9 +
10 +@font-face {
11 + font-family: 'BMEULJIRO';
12 + src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.0/BMEULJIRO.woff') format('woff');
13 + font-weight: normal;
14 + font-style: normal;
15 +}
16 +
17 +.title {
18 + font-size : 40px;
19 + font-family: 'BMEULJIRO';
20 + color : aliceblue;
21 + margin-top: 10%;
22 + margin-bottom: 20px;
23 + text-align: center;
24 +}
25 +
26 +button {
27 + margin: 10px;
28 + margin-bottom: 30px;
29 +}
30 +
31 +input {
32 + margin-top: 0px;
33 + width: 300px;
34 + height: 50px;
35 + border: 1px solid aliceblue;
36 + border-radius: 10px;
37 + color: white;
38 + background-color: #353535;
39 + font-family: 'BMJUA';
40 + font-size: 20px;
41 + margin-block-end: 10px;
42 +}
43 +
44 +.w-btn {
45 + position: relative;
46 + border: none;
47 + display: inline-block;
48 + padding: 15px 30px;
49 + border-radius: 15px;
50 + font-family: "BMEULJIRO", sans-serif;
51 + box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
52 + text-decoration: none;
53 + font-weight: 600;
54 + transition: 0.25s;
55 + margin-bottom: 20px;
56 +}
57 +
58 +.w-btn-outline {
59 + position: relative;
60 + padding: 15px 30px;
61 + border-radius: 15px;
62 + font-family: "BMEULJIRO", sans-serif;
63 + box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
64 + text-decoration: none;
65 + font-weight: 600;
66 + transition: 0.25s;
67 +}
68 +
69 +.w-btn-indigo {
70 + background-color: aliceblue;
71 + color: #2e2f30;
72 +}
73 +
74 +.w-btn-indigo-outline {
75 + border: 3px solid aliceblue;
76 + color: #2e2f30;
77 +}
78 +
79 +.w-btn-indigo-outline:hover {
80 + color: #2e2f30;
81 + background: aliceblue;
82 +}
83 +
84 +.font {
85 + margin-right: 3px;
86 + font-size: 20px;
87 + color:aliceblue;
88 + font-family: "BMEULJIRO";
89 +}
90 +
91 +.login_sign {
92 + margin-top: 10px;
93 + font-family: "BMJUA";
94 + font-size: 20px;
95 + box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
96 + width: 310px;
97 + height: 50px;
98 + color:black;
99 + border-radius: 10px;
100 + background-color: wheat;
101 + border: none;
102 +}
103 +
104 +.flex-container{
105 + display:inline-flex;
106 +}
107 +
108 +.flex-item{
109 + width: 350px;
110 + height:400px;
111 + margin: 10px;
112 +
113 +}
...\ No newline at end of file ...\ No newline at end of file
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 -<html lang="en"> 2 +<html lang="ko">
3 <head> 3 <head>
4 <meta charset="UTF-8"> 4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Main Page</title> 7 <title>Main Page</title>
8 - 8 + <link rel="stylesheet" href="main.css">
9 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 9 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
10 </head> 10 </head>
11 -<body> 11 +<body bgcolor= "#353535">
12 - Main Page 12 + <div class="title">
13 + 🏋️‍♂️방구석 헬스 트레이너🏋️‍♀️
14 + </div>
15 + <center>
13 <div> 16 <div>
14 - <input type="button" value = "squart start" id = "moveSquart" onclick="moveSquartPage()"/> 17 + <input class="w-btn w-btn-indigo" type="button" value = "Squat Start" id = "moveSquart" onclick="moveSquartPage()"/>
15 </div> 18 </div>
16 19
17 <script type="text/javascript" src="./main.js"></script> 20 <script type="text/javascript" src="./main.js"></script>
18 - <div> 21 + <div class="flex-container">
19 - <input id = "name" type = "text" placeholder="이름"> 22 + <div class="flex-item">
20 - <input id = "password" type = "text" placeholder="비밀번호"> 23 + <div><input class="input" id = "name" value="👨‍🦲" type = "text"></div>
21 - <button type="submit" id = "button"> 24 + <div><input class="input" id = "password" value="🔑" type = "text"></div>
22 - 로그인 25 + <div><button class="login_sign" type="submit" id = "button">로그인</button></div>
23 - </button> 26 + </div>
27 + <div class="flex-item">
28 + <div><input class="input" id = "register_name" value="👨‍🦲" type = "text"></div>
29 + <div><input class="input" id = "register_password" value="🔑" type = "text"></div>
30 + <div><button class="login_sign" type="submit" id = "register_button">회원가입</button></div>
24 </div> 31 </div>
25 - <div>
26 - <input id = "register_name" type = "text" placeholder="이름">
27 - <input id = "register_password" type = "text" placeholder = "비밀번호">
28 - <button type = "submit" id = "register_button">
29 - 회원가입
30 - </button>
31 </div> 32 </div>
33 + </center>
32 </body> 34 </body>
33 </html> 35 </html>
...\ No newline at end of file ...\ No newline at end of file
......
1 - 1 +function moveSquatPage()
2 -
3 -function moveSquartPage()
4 { 2 {
5 - location.href = "/squart"; 3 + location.href = "/squat";
6 } 4 }
7 5
8 -
9 -
10 -
11 $(document).ready(function(){ 6 $(document).ready(function(){
12 $('#button').click(function(){ 7 $('#button').click(function(){
13 let sendName = $('#name').val(); 8 let sendName = $('#name').val();
......