Bamdoliro · E-jiwoo · Jul 17, 2023 · Jul 17, 2023 · Jul 18, 2023 · Jul 18, 2023
diff --git a/img/arrow_forward.svg b/img/arrow_forward.svg
diff --git a/img/bssm.png b/img/bssm.png
diff --git a/img/logo.svg b/img/logo.svg
diff --git a/index.html b/index.html
@@ -4,12 +4,54 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link href="./styles/reset.css" rel="stylesheet" type="text/css" />
+    <link href="./styles/reset.css" rel="stylesheet">
+    <link href="./styles/style.css" rel="stylesheet">
+    <link href="./styles/header.css" rel="stylesheet">
+    <link href="./styles/button.css" rel="stylesheet">
+    <link href="./styles/text.css" rel="stylesheet">
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css" />
     <title>밤돌이로</title>
 </head>
 <body>
     <main>
-        <!-- 코드를 작성해주세요. -->
+        <div class="container">
+            <nav>
+                <div class="top">
+                    <img class="logo" src="img/logo.svg" alt="logo">
+                    <div id="top_font">
+                        <ul>
+                            <li>로그인</li>
+                            <li><button id="join">회원가입</button></li>
+                        </ul>
+                    </div>
+                </div>
+                <div id="menu">
+                    <div id="menu_font">
+                        <ul>
+                            <li>홈</li>
+                            <li>원서접수</li>
+                            <li>공지사항</li>
+                            <li>자주 묻는 질문</li>
+                        </ul>
+                    </div>
+                </div>
+            </nav>
+            <div id="main">
+                <div class="text_box">
+                    <div class="text_font">
+                        <p class="text">꿈을 향한 도전,</p>
+                        <p class="text">미래를 여는 학교</p>
+                    </div>
+                </div>
+                <div class="text_box2">
+                    <div class="text2_font">
+                        <p class="text2">부산소마고는 소프트웨어에 관심있는 학생들의 </p>
+                        <p class="text2">꿈을 향한 도전을 아낌없이 지원합니다.</p>
+                    </div>
+                </div>
+                <button id="str_btn">원서 접수 시작하기<img class="arrow" src="img/arrow_forward.svg" alt="arrow"></button>
+            </div>
+        </div>
     </main>
 </body>
 </html>
diff --git a/styles/button.css b/styles/button.css
@@ -0,0 +1,64 @@
+.top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-right: 90px;
+}
+.top ul {
+  margin: 0;
+  padding: 0;
+  display: flex;
+}
+#top_font{
+  font-family: Pretendard, 'Noto Sans KR', sans-serif;
+  font-weight: 500;
+  font-size: 16px;
+  color: white;
+}
+.top ul li {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px 12px;
+}
+#join{
+  width: 88px;
+  height: 40px;
+  font-family: Pretendard,'Noto Sans KR', sans-serif;
+  border-radius: 6px;
+  background-color: #257CFF;
+  border: none;
+  color: white;
+  font-size: 16px;
+  font-weight: 500;
+}
+#join:hover{
+  background-color: #186EEE;
+}
+.btn2{
+  padding-top: 70px;
+  padding-right: 150px;
+}
+#str_btn{
+  position: relative;
+  width: 205px;
+  height: 54px;
+  margin-top: 50px;
+  border-radius: 6px;
+  background-color: #257CFF;
+  border: none;
+  color: white;
+  font-family: Pretendard,'Noto Sans KR', sans-serif;
+  font-size: 18px;
+  font-weight: 600;
+  padding-right: 35px;
+  margin-right: 130px;
+}
+#str_btn:hover{
+  background-color: #186EEE;
+}
+.arrow{
+  position: absolute;
+  padding-top: 3px;
+  padding-left: 8px;
+}
diff --git a/styles/header.css b/styles/header.css
@@ -0,0 +1,37 @@
+#top{
+    position: absolute;
+    top: 0px;
+    right: 12px;
+    width: 1440px;
+    height: 64px;
+    padding-left: 100px;
+}
+.logo{
+    padding-top: 16px;
+    padding-left: 110px;
+}
+#menu {
+    position: absolute;
+    top: 64px;
+    width: 1240px;
+    height: 54px;
+    padding-left: 100px;
+}
+#menu ul{
+    margin: 0;
+    padding: 0;
+    display: flex;
+}
+#menu_font{
+    font-weight: 600;
+    font-size: 18px;
+    line-height: 23.4px;
+}
+#menu ul li{
+    display: flex;
+    align-items: center;
+    justify-content: space-between; 
+    height: 50px; 
+    color: white;
+    padding: 10px 12px;
+}
diff --git a/styles/reset.css b/styles/reset.css
@@ -40,4 +40,4 @@ q:before, q:after {
 table {
 	border-collapse: collapse;
 	border-spacing: 0;
-}
+}
diff --git a/styles/style.css b/styles/style.css
@@ -0,0 +1,17 @@
+html{
+  height: 100vh;
+  background: url("../img/bssm.png") center no-repeat;
+}
+.container {
+  position: relative;
+  text-align: center;
+  padding-left: 100px;
+  font-family: Pretendard,'Noto Sans KR', sans-serif;
+}
+#main{
+  position: absolute;
+  top: 195px;
+  left: 550px;
+  width: 600px;
+  height: 396px;
+}
diff --git a/styles/text.css b/styles/text.css
@@ -0,0 +1,26 @@
+.text_box{
+    width: 457px;
+    height: 188px;
+}
+.text_font{
+    line-height: 93.6px;
+    font-weight: 700;
+    font-size: 72px;
+    letter-spacing: -1.5px;
+    color: #fff;
+}
+.text_box2{
+    height: 82px;
+    padding-top: 25px;
+    margin-right: 130px;
+}
+.text2_font{
+    font-weight: 400;
+    font-size: 18px;
+    line-height: 28.8px;
+    letter-spacing: -0.15px;
+}
+.text2{
+    vertical-align: bottom;
+    color: #BBBCC2;
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -40,4 +40,4 @@ q:before, q:after { @@
     table {
     	border-collapse: collapse;
     	border-spacing: 0;
-    }
+    }