KDT1-FE · JeongMin83 · Jul 28, 2023 · Jul 28, 2023 · Jul 28, 2023 · Jul 28, 2023
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+.DS_Store
diff --git a/README.md b/README.md
@@ -43,3 +43,40 @@
 3. 다운로드 원하는 이미지 선택
 4. 서브 폴더 이름(Save to subfolder) 명시
 5. 다운로드!
+
+
+# KDT0_JinJeongMin
+
+## DEMO 및 사이트 링크
+
+[제작한 클론 Apple 사이트 링크]()
+
+[실제 패스트캠퍼스 공식 사이트 링크](https://fastcampus.co.kr/)
+
+> 
+
+## 프로젝트 Info
+
+### 프로젝트 목표
+
+HTML,CSS를 활용한 패스트캠퍼스 메인 페이지 클론 코딩
+
+### 프로젝트 기간
+
+2023년 07월 24일 ~ 2022년 07월 28일
+
+### 과제 필수 요구사항 체크 리스트
+
+- 
+
+### 실제 페이지와 다른(혹은 다를 수 있는) 점
+
+1. 
+
+## Section별 구현사항
+
+---
+
+### 리뷰 요청사항
+
+- 
diff --git a/assets/category/category-ai01.jpeg b/assets/category/category-ai01.jpeg
diff --git a/assets/category/category-ai02.png b/assets/category/category-ai02.png
diff --git a/assets/category/category-ai03.jpeg b/assets/category/category-ai03.jpeg
diff --git a/assets/category/category-ai04.jpeg b/assets/category/category-ai04.jpeg
diff --git a/assets/category/category-business01.png b/assets/category/category-business01.png
diff --git a/assets/category/category-business02.jpeg b/assets/category/category-business02.jpeg
diff --git a/assets/category/category-business03.webp b/assets/category/category-business03.webp
diff --git a/assets/category/category-business04.png b/assets/category/category-business04.png
diff --git a/assets/category/category-data01.png b/assets/category/category-data01.png
diff --git a/assets/category/category-data02.png b/assets/category/category-data02.png
diff --git a/assets/category/category-data03.png b/assets/category/category-data03.png
diff --git a/assets/category/category-data04.webp b/assets/category/category-data04.webp
diff --git a/assets/category/category-design01.png b/assets/category/category-design01.png
diff --git a/assets/category/category-design02.png b/assets/category/category-design02.png
diff --git a/assets/category/category-design03.png b/assets/category/category-design03.png
diff --git a/assets/category/category-design04.png b/assets/category/category-design04.png
diff --git a/assets/category/category-finance01.png b/assets/category/category-finance01.png
diff --git a/assets/category/category-finance02.png b/assets/category/category-finance02.png
diff --git a/assets/category/category-finance03.png b/assets/category/category-finance03.png
diff --git a/assets/category/category-finance04.webp b/assets/category/category-finance04.webp
diff --git a/assets/category/category-illust01.png b/assets/category/category-illust01.png
diff --git a/assets/category/category-illust02.png b/assets/category/category-illust02.png
diff --git a/assets/category/category-illust03.png b/assets/category/category-illust03.png
diff --git a/assets/category/category-illust04.png b/assets/category/category-illust04.png
diff --git a/assets/category/category-marketing01.jpeg b/assets/category/category-marketing01.jpeg
diff --git a/assets/category/category-marketing02.png b/assets/category/category-marketing02.png
diff --git a/assets/category/category-marketing03.png b/assets/category/category-marketing03.png
diff --git a/assets/category/category-marketing04.jpeg b/assets/category/category-marketing04.jpeg
diff --git a/assets/category/category-programing01.png b/assets/category/category-programing01.png
diff --git a/assets/category/category-programing02.png b/assets/category/category-programing02.png
diff --git a/assets/category/category-programing03.png b/assets/category/category-programing03.png
diff --git a/assets/category/category-programing04.jpeg b/assets/category/category-programing04.jpeg
diff --git a/assets/category/category-video01.webp b/assets/category/category-video01.webp
diff --git a/assets/category/category-video02.jpeg b/assets/category/category-video02.jpeg
diff --git a/assets/category/category-video03.png b/assets/category/category-video03.png
diff --git a/assets/category/category-video04.png b/assets/category/category-video04.png
diff --git a/assets/category/category-work01.png b/assets/category/category-work01.png
diff --git a/assets/category/category-work02.jpg b/assets/category/category-work02.jpg
diff --git a/assets/category/category-work03.jpeg b/assets/category/category-work03.jpeg
diff --git a/assets/category/category-work04.png b/assets/category/category-work04.png
diff --git a/assets/favicon.ico b/assets/favicon.ico
diff --git a/assets/footer/footer-emblem01.png b/assets/footer/footer-emblem01.png
diff --git a/assets/footer/footer-emblem02.png b/assets/footer/footer-emblem02.png
diff --git a/assets/header-title.png b/assets/header-title.png
diff --git a/assets/product-guide/product-guide01.png b/assets/product-guide/product-guide01.png
diff --git a/assets/product-guide/product-guide02.html b/assets/product-guide/product-guide02.html
diff --git a/assets/product-guide/product-guide02.png b/assets/product-guide/product-guide02.png
diff --git a/assets/product-guide/product-guide03.png b/assets/product-guide/product-guide03.png
diff --git a/assets/product-guide/product-guide04.png b/assets/product-guide/product-guide04.png
diff --git a/assets/product-guide/product-guide05.png b/assets/product-guide/product-guide05.png
diff --git a/assets/product-guide/product-guide06.png b/assets/product-guide/product-guide06.png
diff --git a/assets/product-guide/product-guide07.png b/assets/product-guide/product-guide07.png
diff --git a/assets/product-guide/product-guide08.png b/assets/product-guide/product-guide08.png
diff --git a/assets/product-guide/product-guide09.png b/assets/product-guide/product-guide09.png
diff --git a/assets/product-guide/product-guide10.png b/assets/product-guide/product-guide10.png
diff --git a/assets/product-guide/product-guide11.png b/assets/product-guide/product-guide11.png
diff --git a/assets/product-guide/product-guide12.png b/assets/product-guide/product-guide12.png
diff --git a/assets/product-hot/product-hot01.png b/assets/product-hot/product-hot01.png
diff --git a/assets/product-hot/product-hot02.png b/assets/product-hot/product-hot02.png
diff --git a/assets/product-hot/product-hot03.png b/assets/product-hot/product-hot03.png
diff --git a/assets/product-hot/product-hot04.png b/assets/product-hot/product-hot04.png
diff --git a/assets/product-hot/product-hot05.png b/assets/product-hot/product-hot05.png
diff --git a/assets/product-hot/product-hot06.png b/assets/product-hot/product-hot06.png
diff --git a/assets/product-hot/product-hot07.png b/assets/product-hot/product-hot07.png
diff --git a/assets/product-hot/product-hot08.png b/assets/product-hot/product-hot08.png
diff --git a/assets/product-hot/product-hot09.png b/assets/product-hot/product-hot09.png
diff --git a/assets/product-hot/product-hot10.png b/assets/product-hot/product-hot10.png
diff --git a/assets/product-hot/product-hot11.png b/assets/product-hot/product-hot11.png
diff --git a/assets/product-hot/product-hot12.png b/assets/product-hot/product-hot12.png
diff --git a/assets/product-media/product-media01.webp b/assets/product-media/product-media01.webp
diff --git a/assets/product-media/product-media02.png b/assets/product-media/product-media02.png
diff --git a/assets/product-media/product-media03.webp b/assets/product-media/product-media03.webp
diff --git a/assets/product-new/product-new01.webp b/assets/product-new/product-new01.webp
diff --git a/assets/product-new/product-new02.png b/assets/product-new/product-new02.png
diff --git a/assets/product-new/product-new03.webp b/assets/product-new/product-new03.webp
diff --git a/assets/product-new/product-new04.png b/assets/product-new/product-new04.png
diff --git a/assets/product-new/product-new05.jpeg b/assets/product-new/product-new05.jpeg
diff --git a/assets/product-new/product-new06.webp b/assets/product-new/product-new06.webp
diff --git a/assets/product-new/product-new07.webp b/assets/product-new/product-new07.webp
diff --git a/assets/product-new/product-new08.jpeg b/assets/product-new/product-new08.jpeg
diff --git a/assets/product-promotion/product-promotion01.png b/assets/product-promotion/product-promotion01.png
diff --git a/assets/product-rising/product-rising01.png b/assets/product-rising/product-rising01.png
diff --git a/assets/product-rising/product-rising03.png b/assets/product-rising/product-rising03.png
diff --git a/assets/product-rising/product-rising04.png b/assets/product-rising/product-rising04.png
diff --git a/assets/product-rising/product-rising05.jpeg b/assets/product-rising/product-rising05.jpeg
diff --git a/assets/product-rising/product-rising06.png b/assets/product-rising/product-rising06.png
diff --git a/assets/product-rising/product-rising07.png b/assets/product-rising/product-rising07.png
diff --git a/assets/product-rising/product-rising08.png b/assets/product-rising/product-rising08.png
diff --git a/assets/product-rising/product-rising09.png b/assets/product-rising/product-rising09.png
diff --git a/assets/product-rising/product-rising10.png b/assets/product-rising/product-rising10.png
diff --git a/assets/product-rising/product-rising11.png b/assets/product-rising/product-rising11.png
diff --git a/assets/slider/main-banner01.webp b/assets/slider/main-banner01.webp
diff --git a/assets/slider/main-banner02.webp b/assets/slider/main-banner02.webp
diff --git a/assets/slider/main-banner03.png b/assets/slider/main-banner03.png
diff --git a/assets/slider/main-banner04.png b/assets/slider/main-banner04.png
diff --git a/assets/slider/main-banner05.webp b/assets/slider/main-banner05.webp
diff --git a/assets/slider/main-banner06.webp b/assets/slider/main-banner06.webp
diff --git a/assets/slider/main-banner07.webp b/assets/slider/main-banner07.webp
diff --git a/assets/slider/main-banner08.webp b/assets/slider/main-banner08.webp
diff --git a/assets/slider/main-banner09.webp b/assets/slider/main-banner09.webp
diff --git a/assets/slider/main-banner10.webp b/assets/slider/main-banner10.webp
diff --git a/assets/slider/main-banner11.png b/assets/slider/main-banner11.png
diff --git a/assets/slider/main-banner12.png b/assets/slider/main-banner12.png
diff --git a/assets/slider/main-banner13.png b/assets/slider/main-banner13.png
diff --git a/assets/top-banner/top-banner.webp b/assets/top-banner/top-banner.webp
diff --git a/index.html b/index.html
diff --git a/styles/category.css b/styles/category.css
@@ -0,0 +1,184 @@
+/* category */
+
+.category-main-app{
+    margin-top: 70px;
+    padding: 40px 12px;
+    border: 1px solid #d6d6d6;
+    position: relative;
+}
+
+.category-main-title{
+    position: absolute;
+    top:-10px;
+    left: -1px;
+    background-color: #fff;
+    padding-bottom: 25px;
+    padding-right: 20px;
+}
+
+.category-menu__list{
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+
+.category-menu__icon{
+    width: 48px;
+    height: 48px;
+    background-size: cover;
+    transition: transform 0.2s;
+}
+
+.category-menu__list-item a{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.category-menu__list-item a:hover{
+    color: #ed234b;
+}
+
+.category-menu__list-item a:hover .category-menu__icon{
+    transform: translateY(-15%);
+}
+
+.ategory-menu__text{
+    font-size: 12px;
+    line-height: 24px;
+    color: #171717;
+}
+
+/* category product */
+
+.category-product__container{
+    margin-top: 70px;
+    position: relative;
+}
+
+.category-product__text{
+    display: flex;
+    justify-content: space-between;
+}
+
+.category-product__container input[type=radio]{
+    display: none;
+}
+
+.category-slide-btn-wrapper{
+    position: absolute;
+    top:135px;
+}
+
+.category-slide-btn{
+    width: 980px;
+}
+
+.category-slide-btn label{
+    width: 32px;
+    height: 32px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.category-slide-btn label:hover{
+    background-color: #f2f2f2;
+}
+
+.category-left-label{
+    position: absolute;
+    left:-50px;
+}
+
+.category-right-label{
+    position: absolute;
+    right: -50px;
+}
+
+.category-left-label::before{
+    content: "";
+    display: block;
+    width: 8px;
+    height: 8px;
+    border-width: 1px;
+    border-color: rgb(110, 110, 115);
+    border-top-style: solid;
+    border-right-style: solid;
+    transform:translate3d(0, -50%, 0) rotate(-135deg);
+    left: 50%;
+    margin-top: 8px;
+}
+
+.category-right-label::before{
+    content: "";
+    display: block;
+    width: 8px;
+    height: 8px;
+    border-width: 1px;
+    border-color: rgb(110, 110, 115);
+    border-top-style: solid;
+    border-right-style: solid;
+    transform:translate3d(0, -50%, 0) rotate(45deg);
+    right: 50%;
+    margin-top: 8px;
+}
+
+.category-title{
+    font-weight: 700;
+    font-size: 20px;
+    line-height: 30px;
+    color: #171717;
+}
+
+.category-link-all{
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 26px;
+    color: #757575;
+    text-decoration: underline;
+}
+
+.category-product__contents{
+    margin-top: 10px;
+}
+
+.category-product-contents-container{
+    width: 1960px;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    transition: transform 1s;
+    transform: translateX(-0%);
+}
+
+.category-product__container [id="programingSlide01"]:checked ~ .category-product__contents .product-compose__contents .category-product-contents-container{transform: translateX(0%);}
+.category-product__container [id="programingSlide02"]:checked ~ .category-product__contents .product-compose__contents .category-product-contents-container{transform: translateX(-50%);}
+
+.category-product__container [id="dataSlide01"]:checked ~ .category-product__contents .product-compose__contents .category-product-contents-container{transform: translateX(0%);}
+.category-product__container [id="dataSlide02"]:checked ~ .category-product__contents .product-compose__contents .category-product-contents-container{transform: translateX(-50%);}
+
+.category-product__container [id="aiSlide01"]:checked ~ .category-product__contents .product-compose__contents .category-product-contents-container{transform: translateX(0%);}
+.category-product__container [id="aiSlide02"]:checked ~ .category-product__contents .product-compose__contents .category-product-contents-container{transform: translateX(-50%);}
+
+.category-product__container [id="designSlide01"]:checked ~ .category-product__contents .product-compose__contents .category-product-contents-container{transform: translateX(0%);}
+.category-product__container [id="designSlide02"]:checked ~ .category-product__contents .product-compose__contents .category-product-contents-container{transform: translateX(-50%);}
+
+.category-product__container [id="videoSlide01"]:checked ~ .category-product__contents .product-compose__contents .category-product-contents-container{transform: translateX(0%);}
+.category-product__container [id="videoSlide02"]:checked ~ .category-product__contents .product-compose__contents .category-product-contents-container{transform: translateX(-50%);}
+
+.category-product__container [id="illustSlide01"]:checked ~ .category-product__contents .product-compose__contents .category-product-contents-container{transform: translateX(0%);}
+.category-product__container [id="illustSlide02"]:checked ~ .category-product__contents .product-compose__contents .category-product-contents-container{transform: translateX(-50%);}
+
+.category-product__container [id="financeSlide01"]:checked ~ .category-product__contents .product-compose__contents .category-product-contents-container{transform: translateX(0%);}
+.category-product__container [id="financeSlide02"]:checked ~ .category-product__contents .product-compose__contents .category-product-contents-container{transform: translateX(-50%);}
+
+.category-product__container [id="marketingSlide01"]:checked ~ .category-product__contents .product-compose__contents .category-product-contents-container{transform: translateX(0%);}
+.category-product__container [id="marketingSlide02"]:checked ~ .category-product__contents .product-compose__contents .category-product-contents-container{transform: translateX(-50%);}
+
+.category-product__container [id="workSlide01"]:checked ~ .category-product__contents .product-compose__contents .category-product-contents-container{transform: translateX(0%);}
+.category-product__container [id="workSlide02"]:checked ~ .category-product__contents .product-compose__contents .category-product-contents-container{transform: translateX(-50%);}
+
+.category-product__container [id="businessSlide01"]:checked ~ .category-product__contents .product-compose__contents .category-product-contents-container{transform: translateX(0%);}
+.category-product__container [id="businessSlide02"]:checked ~ .category-product__contents .product-compose__contents .category-product-contents-container{transform: translateX(-50%);}
+
diff --git a/styles/common.css b/styles/common.css
@@ -0,0 +1,21 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+body{
+    margin: 0;
+    font-size: 1em;
+    line-height: 1.5;
+    font-family: "Pretendard Variable", pretendard, -apple-system, blinkmacsystemfont, system-ui, roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;;
+    color: #171717;
+}
+
+a{
+    color: inherit;
+    text-decoration: none;
+}
+
+ul{
+    list-style: none;
+    padding: 0;
+}