#1 YeonhoCho | html upload

html upload
knupi-project · Dec 18, 2022 · 5f105ee · 5f105ee
1 parent b02a891
commit 5f105ee
Show file tree

Hide file tree

Showing 17 changed files with 460 additions and 0 deletions.
diff --git a/web page/css/components/upper.css b/web page/css/components/upper.css
@@ -0,0 +1,70 @@
+.nav {
+  background-color: white;
+  position: fixed;
+  width: 100%;
+  height: 140px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.nav__column {
+  width: 33%;
+}
+
+.nav__column:first-child a {
+  margin: 0px 20px;
+}
+
+.nav__column:first-child a:first-child {
+  margin-left: 60px;
+}
+
+.nav__column:nth-child(2) {
+  font-family: "Noto Serif", serif;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.nav_logo-big {
+  font-size: 50px;
+  font-weight: 600;
+  letter-spacing: 4px;
+  font-display: center;
+}
+
+.nav_logo-small {
+  margin-top: 10px;
+  font-size: 25px;
+  font-weight: 400;
+  letter-spacing: 4px;
+  font-display: center;
+}
+
+.nav__column:last-child {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.nav__column:last-child a:last-child {
+  margin-right: 60px;
+}
+
+.nav__sign {
+  margin-left: 30px;
+}
+
+.login_btn {
+  height: 40px;
+}
+
+.nav__link {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  font-size: 20px;
+  font-weight: 300;
+  color: #7c7c7c;
+}
diff --git a/web page/css/reset.css b/web page/css/reset.css
@@ -0,0 +1,137 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol,
+ul {
+  list-style: none;
+}
+blockquote,
+q {
+  quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: '';
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+input:focus {
+  outline: none;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
diff --git a/web page/css/screens/main_page.css b/web page/css/screens/main_page.css
@@ -0,0 +1,80 @@
+body {
+  width: 1920px;
+  font-family: "Noto Serif", serif;
+}
+
+.home__main {
+  text-align: center;
+}
+
+.home__main__text {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.home__main_title {
+  font-size: 60px;
+  font-weight: 600;
+  letter-spacing: 4px;
+  font-display: center;
+  margin-bottom: 30px;
+}
+
+.home__main_subtitle {
+  font-size: 35px;
+  font-weight: 600;
+  font-display: center;
+  margin-bottom: 30px;
+}
+
+.home__main_btn {
+  height: 60px;
+  width: 190px;
+  border: 1px solid black;
+  border-radius: 5px;
+  background-color: #000000bb;
+  font-size: 20px;
+  color: wheat;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: all 0.4s ease-in-out;
+}
+
+.home__main_btn:hover {
+  background-color: #00000000;
+  color: black;
+}
+
+footer {
+  font-family: "Noto Sans KR";
+  text-align: center;
+  font-size: 19px;
+  color: rgba(0, 0, 0, 0.678);
+}
+
+footer p {
+  margin-top: 44px;
+  margin-bottom: 50px;
+}
+
+footer div:first-child p {
+  font-size: 30px;
+}
+
+.footer_info {
+  display: flex;
+  justify-content: center;
+  margin: 30px 30px;
+  margin-top: 0px;
+}
+
+.footer_info_title {
+  border-top: 1px solid black;
+}
diff --git a/web page/css/screens/reservation_main.css b/web page/css/screens/reservation_main.css
@@ -0,0 +1,28 @@
+.reservation_mid-text {
+  position: absolute;
+  top: 40%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.reservation_mid-text span {
+  text-align: center;
+}
+
+.reservation_mid-title {
+  font-size: 50px;
+  font-weight: 500;
+  padding: 25px;
+  border-bottom: 1px solid black;
+  font-family: Helvetica Neue;
+}
+
+.reservation_mid-subtitle {
+  margin-top: 30px;
+  font-size: 25px;
+  font-family: "Noto Sans KR", sans-serif;
+  color: #000000;
+}
diff --git a/web page/css/style.css b/web page/css/style.css
@@ -0,0 +1,8 @@
+@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600;700&family=Noto+Serif:wght@400;700&display=swap");
+@import "reset.css";
+/* Components */
+@import "components/upper.css";
+
+/* Screens */
+@import "screens/main_page.css";
+@import "screens/reservation_main.css";
diff --git a/web page/home_after.html b/web page/home_after.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="kr">
+<head>
+    <link rel="stylesheet" href="css/style.css">
+    <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>KNUPI PIANO CLUB</title>
+</head>
+<body>
+    <div class="nav"> 
+        <div class="nav__column">
+            <a href="#" class="nav__link">Home</a>
+            <a href="#" class="nav__link">About</a>
+            <a href="#" class="nav__link">Contact</a>
+        </div>
+        <div class="nav__column">
+            <span class="nav_logo-big">KNUPI</span>
+            <span class="nav_logo-small">KNU</span>
+        </div>
+        <div class="nav__column">
+            <a href="#" class="nav__link">Reservation</a>
+            <a href="#" class="nav__sign"><img class="login_btn" src="img/after_login.png" /></a>
+        </div>
+    </div>
+
+    <div class="home__main">
+        <div class="home__main__img">
+            <img src="img/Main 1.png" /></div>
+        <div class="home__main__text">
+            <p class="home__main_title">KNUPI</p>
+            <p class="home__main_subtitle">KNU PIANO CLUB</p>
+            <a href="#"><div class="home__main_btn">RESERVATION</div></a>
+        </div>
+    </div>
+</body>
+<footer>
+    <div><p>Contacts</p></div>
+    <div class="footer_info">
+        <div class="footer_info"><img src="img/message.png" /></div>
+        <div class="footer_info"><img src="img/call.png" /></div>
+        <div class="footer_info"><img src="img/insta.png" /></div>
+    </div>
+    <div class="footer_info_title"><p>&copy KNUPI.2022. 경북대학교 중앙동아리 크누피</p></div>
+</footer>
+</html>