오지민 / 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 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HomePurchaseAgePrediction</title>
<link rel="stylesheet" href="style.css" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;500;900&display=swap"
rel="stylesheet"
/>
</head>
<body>
<center>집구매시기예측서비스</center>
<main>
<h1>Home Purchase Age Prediction</h1>
<h4>
사용자의 위치기반으로 집 구매 시기를 예측해드립니다 (사용자 위치 근처의
집을 찾아드립니다)
</h4>
<form action="result" method="POST">
<div>
연봉(단위:만 원)
<input
type="text"
id="salary"
name="salary"
placeholder="월소득을 숫자로 입력해주세요."
/>
</div>
<div>
지출(단위:만 원)
<input
type="text"
id="expenditure"
name="expenditure"
placeholder="지출을 숫자로 입력해주세요."
/>
</div>
<div>
<input class="btn" type="submit" value="SUBMIT" />
</div>
</form>
</main>
</body>
</html>
......
:root {
--main-bg-color: #6e87cf;
--text-color: #ffffff;
--point-color: #44090d;
}
h1 {
color: #e9dacc;
font-size: 4.5em;
font-weight: 900;
/* text-shadow: 2px 2px #191766;*/
text-shadow: #44090d 1px 1px, #44090d 0px 0px, #44090d 1px 1px,
#44090d 2px 2px, #44090d 3px 3px, #44090d 4px 4px, #44090d 5px 5px,
#44090d 6px 6px, #44090d 7px 7px, #44090d 8px 8px, #44090d 9px 9px,
#44090d 10px 10px, #44090d 11px 11px, #44090d 12px 12px, #44090d 13px 13px,
#44090d 14px 14px, #44090d 15px 15px, #44090d 16px 16px, #44090d 17px 17px,
#44090d 18px 18px, #44090d 19px 19px;
}
h4 {
font-weight: 300;
}
* {
font-family: "Noto Sans KR", sans-serif;
}
body {
background-color: var(--main-bg-color);
background: no-repeat fixed 50% 50% url("./src/background.jpg");
color: var(--text-color);
color: var(--point-color);
}
main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: absolute;
top: 10%;
left: 10%;
/* background-color: rgb(250, 250, 250, 0.5);
border-radius: 0.8rem;
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; */
width: 80%;
height: 80%;
color: var(--point-color);
}
main > form {
display: flex;
align-items: flex-end;
font-weight: 500;
}
main > form > div {
display: flex;
flex-direction: column;
padding: 10px;
}
input {
margin: 10px 0px;
padding: 5px 10px;
border: 0;
border-radius: 0.4em;
}
.btn:hover {
background-color: var(--point-color);
color: #fff;
cursor: pointer;
}
.btn:active {
position: relative;
top: 1px;
left: 1px;
}
......