codeit-bootcamp-frontend · y5037 · Oct 26, 2024 · Oct 26, 2024
diff --git a/.DS_Store b/.DS_Store
diff --git a/css/reset.css b/css/reset.css
@@ -0,0 +1,112 @@
+@charset "utf-8";
+
+/* 폰트 */
+/* rokaf */
+@font-face{
+  src: url('../fonts/rokaf/ROKAF\ Sans\ Medium.ttf') format('truetype');
+  font-family: "Rokaf";
+  font-weight:500;
+}
+@font-face{
+  src: url('../fonts/rokaf/ROKAF\ Sans\ Bold.ttf') format('truetype');
+  font-family: "Rokaf";
+  font-weight:700
+}
+/* pretendard */
+@font-face {
+  src: url('../fonts/pretendard/Pretendard-Medium.woff') format("woff");
+  font-family: "pretendard";
+  font-weight:400
+}
+@font-face {
+  src: url('../fonts/pretendard/Pretendard-Regular.woff') format("woff");
+  font-family: "pretendard";
+  font-weight:500
+}
+@font-face {
+  src: url('../fonts/pretendard/Pretendard-SemiBold.woff') format("woff");
+  font-family: "pretendard";
+  font-weight:600
+}
+@font-face {
+  src: url('../fonts/pretendard/Pretendard-Bold.woff') format("woff");
+  font-family: "pretendard";
+  font-weight:700
+}
+
+/*공통 Reset*/
+*{
+  box-sizing:border-box;
+}
+html,
+body,h1,h2,h3,h4,h5 {
+  letter-spacing: -0.4px;
+}
+html, body, div, span, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+abbr, address, cite, code,
+del, dfn, em, img, ins, kbd, q, samp,
+small, strong, sub, sup, var,
+b, i, button,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section, summary,
+time, mark, audio, video {
+  margin:0;
+  padding:0;
+  border:0;
+  outline:0;
+  font-size:100%;
+  vertical-align:baseline;
+  background:transparent;
+}
+article,aside,details,figcaption,figure,
+footer,header,hgroup,menu,nav,section {
+  display:block;
+}
+ul {
+  list-style:none;
+}
+blockquote, q {
+  quotes:none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content:''; content:none;
+}
+a {
+  display:block;
+  margin:0;
+  padding:0;
+  font-size:100%;
+  background:transparent;
+  text-decoration:none;
+  color:inherit;
+}
+img,iframe,video{
+  max-width:100%;
+}
+section, header, footer{
+  position:relative;
+  overflow:hidden;
+}
+img {
+  display:block;
+  image-rendering:-moz-auto;
+  image-rendering:-o-auto;
+  image-rendering:auto;
+  image-rendering:-webkit-optimize-contrast;
+  -ms-interpolation-mode:nearest-neighbor;
+}
+body{
+  width:100%;
+  max-width:100%;
+  overflow-x: visible;
+  overflow-y: auto;
+  font-weight:normal;
+  font-size: 10px;
+  color:#000;
+  font-family: 'pretendard';
+}
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,246 @@
+@charset "utf-8";
+
+.headerWrap,
+section,
+.footerWrap {
+    padding:0 200px
+}
+header{
+    position:fixed;
+    top:0;
+    left:0;
+    right:0;
+    z-index:1;
+    height:70px;
+    border-bottom:1px solid #DFDFDF;
+    background:#fff;
+}
+.headerWrap{
+    -webkit-display:flex;
+    display:flex;
+    -webkit-flex-direction:row;
+    flex-direction:row;
+    align-items: center;
+    justify-content: space-between;
+    height:100%;
+}
+.logoWrap > a{
+    -webkit-display:flex;
+    display:flex;
+    -webkit-flex-direction:row;
+    flex-direction:row;
+    align-items: center;
+}
+.logoWrap > a .txt{
+    margin-left:8px;
+    font-family: 'Rokaf';
+    font-size:2.563em;
+    font-weight:700;
+    color:#3692FF
+}
+.btnLogin{
+    width:128px;
+    height:48px;
+    line-height:48px;
+    text-align:center;
+    border-radius:8px;
+    transition:.3s;
+    font-size:1.6em;
+    font-weight:600;
+    background:#3692FF;
+    color:#F9FAFB;
+}
+.btnLogin:hover{
+    background:#1967D6
+}
+.section1{
+    margin-top:70px;
+}
+section.type1{
+    min-height:540px;
+    background:#CFE5FF
+}
+section .contentsWrap{
+    -webkit-display:flex;
+    display:flex;
+    -webkit-flex-direction:row;
+    flex-direction:row;
+    justify-content: center;
+    align-items: center;
+    min-height:inherit;
+}
+.type1 .contentsWrap{
+    align-items:end;
+}
+.type1 .contentsWrap .txtBox{
+    min-width:fit-content;
+    margin:0 8px 100px 0;
+}
+section .title{
+    line-height:1.4
+}
+.type1 .title{
+    margin-bottom:32px;
+    font-size:4em;
+    color:#374151;
+}
+.type1 .btnMain{
+    min-width:357px;
+    height:56px;
+    line-height:56px;
+    text-align:center;
+    border-radius:40px;
+    transition:.3s;
+    background:#3692FF;
+    color:#F9FAFB;
+    font-size:2em;
+    font-weight:600;
+}
+.type1 .btnMain:hover{
+    background:#1967D6
+}
+.type2 .contentsWrap{
+    max-width:988px;
+    margin:138px auto;
+    justify-content: space-between;
+    border-radius:12px;
+    overflow:hidden;
+    background:#FCFCFC
+}
+.type2 .txtBox{
+    flex:1;
+    padding-left:65px;
+}
+.section3.type2 .txtBox{
+    text-align:right;
+    padding-left:0;
+    padding-right:65px;
+}
+.type2 .keyword{
+    font-size:1.8em;
+    font-weight:700;
+    color:#3692FF
+}
+.type2 .title{
+    margin:15px 0 25px;
+    font-size:4em
+}
+.type2 .description{
+    font-size:2.4em;
+    font-weight:400;
+    line-height:32px;
+    color:#374151;
+}
+footer{
+    padding:32px 0 108px;
+    background:#111827;
+    color:#E5E7EB
+}
+.footerWrap{
+    -webkit-display:flex;
+    display:flex;
+    -webkit-flex-direction:row;
+    flex-direction:row;
+    justify-content: space-between;
+    align-items: center;
+}
+.footerWrap .copyright{
+    color:#9CA3AF
+}
+.footerWrap .btnLink{
+    -webkit-display:flex;
+    display:flex;
+    -webkit-flex-direction:row;
+    flex-direction:row;
+    align-items: center;
+}
+.footerWrap .btnLink > a{
+    margin-right:30px;
+}
+.footerWrap .btnLink > a:last-child{
+    margin-right:0;
+}
+.footerWrap .socialBox{
+    -webkit-display:flex;
+    display:flex;
+    -webkit-flex-direction:row;
+    flex-direction:row;
+    align-items: center;
+}
+.footerWrap .socialBox li{
+    margin-right:10px;
+    cursor: pointer;
+}
+.footerWrap .socialBox li:last-child{
+    margin-right:0
+}
+
+@media (max-width: 1500px) {
+    .type1 .title,
+    .type2 .title{
+        font-size:3.7em;
+    }
+    .type1 .btnMain{
+        min-width:300px;
+    }
+    .type2 .description{
+        font-size: 2.2em;
+    }
+}
+
+@media (max-width: 1350px) {
+    .type1 .title,
+    .type2 .title{
+        font-size:3.3em;
+    }
+    .type1 .btnMain{
+        min-width:250px;
+    }
+    .type2 .description{
+        font-size: 2em;
+    }
+    .type2 .imgBox{
+        flex:1.5
+    }
+}
+
+@media (max-width: 1250px){
+    section.type1{
+        min-height:500px;
+    }
+    .type1 .title,
+    .type2 .title{
+        font-size:2.7em;
+    }
+    .type1 .btnMain{
+        min-width:230px;
+    }
+    .type2 .contentsWrap{
+        margin:120px auto;
+    }
+    .type2 .description{
+        font-size: 1.5em;
+        line-height: 24px;
+    }
+    .type2 .txtBox{
+        padding:0 30px;
+    }
+    .section3.type2 .txtBox{
+        padding:0 30px;
+    }
+}
+
+@media (max-width: 1050px){
+    section.type1 {
+        min-height: 400px;
+    }
+    .type1 .title, .type2 .title {
+        font-size: 2.3em;
+    }
+    .type1 .btnMain {
+        min-width: 200px;
+    }
+    .type2 .contentsWrap {
+        margin: 100px auto;
+    }
+}
diff --git a/fonts/.DS_Store b/fonts/.DS_Store
diff --git a/fonts/pretendard/.DS_Store b/fonts/pretendard/.DS_Store
diff --git a/fonts/pretendard/Pretendard-Black.woff b/fonts/pretendard/Pretendard-Black.woff
diff --git a/fonts/pretendard/Pretendard-Bold.woff b/fonts/pretendard/Pretendard-Bold.woff
diff --git a/fonts/pretendard/Pretendard-ExtraBold.woff b/fonts/pretendard/Pretendard-ExtraBold.woff
diff --git a/fonts/pretendard/Pretendard-ExtraLight.woff b/fonts/pretendard/Pretendard-ExtraLight.woff
diff --git a/fonts/pretendard/Pretendard-Light.woff b/fonts/pretendard/Pretendard-Light.woff
diff --git a/fonts/pretendard/Pretendard-Medium.woff b/fonts/pretendard/Pretendard-Medium.woff
diff --git a/fonts/pretendard/Pretendard-Regular.woff b/fonts/pretendard/Pretendard-Regular.woff
diff --git a/fonts/pretendard/Pretendard-SemiBold.woff b/fonts/pretendard/Pretendard-SemiBold.woff
diff --git a/fonts/pretendard/Pretendard-Thin.woff b/fonts/pretendard/Pretendard-Thin.woff
diff --git a/fonts/rokaf/.DS_Store b/fonts/rokaf/.DS_Store
diff --git a/fonts/rokaf/ROKAF Sans Bold.ttf b/fonts/rokaf/ROKAF Sans Bold.ttf
diff --git a/fonts/rokaf/ROKAF Sans Medium.ttf b/fonts/rokaf/ROKAF Sans Medium.ttf
diff --git a/img/.DS_Store b/img/.DS_Store
diff --git a/img/Img_home_01.png b/img/Img_home_01.png
diff --git a/img/Img_home_02.png b/img/Img_home_02.png
diff --git a/img/Img_home_03.png b/img/Img_home_03.png
diff --git a/img/Img_home_bottom.png b/img/Img_home_bottom.png
diff --git a/img/Img_home_top.png b/img/Img_home_top.png
diff --git a/img/favicon.ico b/img/favicon.ico
diff --git a/img/ic_facebook.svg b/img/ic_facebook.svg
diff --git a/img/ic_instagram.svg b/img/ic_instagram.svg
diff --git a/img/ic_twitter.svg b/img/ic_twitter.svg
diff --git a/img/ic_youtube.svg b/img/ic_youtube.svg
diff --git a/img/logo.png b/img/logo.png