오지민 / HomePurchaseAgePrediction

Go to a project
Toggle navigation Toggle navigation pinning
서연진
540eb37a 1 parent a746654a

main page 구현, css 추가

Inline Side-by-side
Showing 2 changed files with 105 additions and 3 deletions
...@@ -6,9 +6,43 @@ ...@@ -6,9 +6,43 @@
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>HomePurchaseAgePrediction</title> 7 <title>HomePurchaseAgePrediction</title>
8 <link rel="stylesheet" href="style.css" /> 8 <link rel="stylesheet" href="style.css" />
9 + <link rel="preconnect" href="https://fonts.gstatic.com" />
10 + <link
11 + href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;500;900&display=swap"
12 + rel="stylesheet"
13 + />
9 </head> 14 </head>
10 15
11 <body> 16 <body>
12 - <center>집구매시기예측서비스</center> 17 + <main>
18 + <h1>Home Purchase Age Prediction</h1>
19 + <h4>
20 + 사용자의 위치기반으로 집 구매 시기를 예측해드립니다 (사용자 위치 근처의
21 + 집을 찾아드립니다)
22 + </h4>
23 + <form action="result" method="POST">
24 + <div>
25 + 연봉(단위:만 원)
26 + <input
27 + type="text"
28 + id="salary"
29 + name="salary"
30 + placeholder="월소득을 숫자로 입력해주세요."
31 + />
32 + </div>
33 + <div>
34 + 지출(단위:만 원)
35 + <input
36 + type="text"
37 + id="expenditure"
38 + name="expenditure"
39 + placeholder="지출을 숫자로 입력해주세요."
40 + />
41 + </div>
42 + <div>
43 + <input class="btn" type="submit" value="SUBMIT" />
44 + </div>
45 + </form>
46 + </main>
13 </body> 47 </body>
14 </html> 48 </html>
......
1 :root { 1 :root {
2 --main-bg-color: #6e87cf; 2 --main-bg-color: #6e87cf;
3 - --text-color: #ffffff; 3 + --point-color: #44090d;
4 +}
5 +
6 +h1 {
7 + color: #e9dacc;
8 + font-size: 4.5em;
9 + font-weight: 900;
10 + /* text-shadow: 2px 2px #191766;*/
11 + text-shadow: #44090d 1px 1px, #44090d 0px 0px, #44090d 1px 1px,
12 + #44090d 2px 2px, #44090d 3px 3px, #44090d 4px 4px, #44090d 5px 5px,
13 + #44090d 6px 6px, #44090d 7px 7px, #44090d 8px 8px, #44090d 9px 9px,
14 + #44090d 10px 10px, #44090d 11px 11px, #44090d 12px 12px, #44090d 13px 13px,
15 + #44090d 14px 14px, #44090d 15px 15px, #44090d 16px 16px, #44090d 17px 17px,
16 + #44090d 18px 18px, #44090d 19px 19px;
17 +}
18 +
19 +h4 {
20 + font-weight: 300;
21 +}
22 +
23 +* {
24 + font-family: "Noto Sans KR", sans-serif;
4 } 25 }
5 26
6 body { 27 body {
7 background-color: var(--main-bg-color); 28 background-color: var(--main-bg-color);
8 background: no-repeat fixed 50% 50% url("./src/background.jpg"); 29 background: no-repeat fixed 50% 50% url("./src/background.jpg");
9 - color: var(--text-color); 30 + color: var(--point-color);
31 +}
32 +
33 +main {
34 + display: flex;
35 + flex-direction: column;
36 + justify-content: center;
37 + align-items: center;
38 + position: absolute;
39 + top: 10%;
40 + left: 10%;
41 + /* background-color: rgb(250, 250, 250, 0.5);
42 + border-radius: 0.8rem;
43 + box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; */
44 + width: 80%;
45 + height: 80%;
46 + color: var(--point-color);
47 +}
48 +
49 +main > form {
50 + display: flex;
51 + align-items: flex-end;
52 + font-weight: 500;
53 +}
54 +
55 +main > form > div {
56 + display: flex;
57 + flex-direction: column;
58 + padding: 10px;
59 +}
60 +
61 +input {
62 + margin: 10px 0px;
63 + padding: 5px 10px;
64 + border: 0;
65 + border-radius: 0.4em;
66 +}
67 +
68 +.btn:hover {
69 + background-color: var(--point-color);
70 + color: #fff;
71 + cursor: pointer;
72 +}
73 +
74 +.btn:active {
75 + position: relative;
76 + top: 1px;
77 + left: 1px;
10 } 78 }
......