diff --git a/README.md b/README.md
index 598dc30f..c6a05a42 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
 # 👀 자신이 원하는 사이트 레이아웃 클론
 
 원하는 사이트(페이지)를 자유롭게 선택하고 레이아웃을 클론 코딩하세요.  
-평소에 도전해 보고 싶었거나 혹은 자신의 수준에 맞는 사이트(페이지)를 선택하세요.   
+평소에 도전해 보고 싶었거나 혹은 자신의 수준에 맞는 사이트(페이지)를 선택하세요.  
 과제 수행 및 리뷰 기간은 별도 공지를 참고하세요!
 
 ## 과제 수행 및 제출 방법
@@ -19,20 +19,25 @@
 
 ## 필수 요구사항
 
-- [ ] 과제에 대한 설명을 포함한 `README.md` 파일을 제공하세요!
-- [ ] 과제 결과와 비교할 수 있는 실제 사이트(페이지)의 주소를 명시하세요!
-- [ ] 과정에서 사용한 프로젝트 폴더/파일이 모두 포함돼야 합니다, 일부 파일만 제출하지 마세요! 
-- [ ] 실제 서비스로 배포하고 접근 가능한 링크를 추가해야 합니다.
+- [o] 과제에 대한 설명을 포함한 `README.md` 파일을 제공하세요!
+- [o] 과제 결과와 비교할 수 있는 실제 사이트(페이지)의 주소를 명시하세요!
+- [o] 과정에서 사용한 프로젝트 폴더/파일이 모두 포함돼야 합니다, 일부 파일만 제출하지 마세요!
+- [o] 실제 서비스로 배포하고 접근 가능한 링크를 추가해야 합니다.
 
 ## 선택 요구사항
 
-- [ ] `<header>`, `<section>` 등 시멘틱 태그를 최대한 활용해보세요.
-- [ ] 실제 사이트의 레거시 코드 활용보단 최신의 CSS Flex 혹은 Grid 등을 활용해보세요.
-- [ ] 부분적으로 BEM 방법론을 도입해보세요.
-- [ ] JS가 필요한 부분은 되도록 생략하되 이유를 명시해보세요.(CSS로 대체 가능한지 피드백이 있을 수 있겠죠?!)
-- [ ] JS가 필요한 부분 중 구현할 부분이 있다면 자유롭게 구현해보세요.(JS 과제가 아니니까 가볍게 구현하시길 추천해요)
-- [ ] SCSS 등의 CSS 전처리도구를 도입해보세요.
-- [ ] SCSS 컴파일에 Webpack이나 Parcel 같은 번들러를 활용해보세요.
+- [o] `<header>`, `<section>` 등 시멘틱 태그를 최대한 활용해보세요.
+- [o] 실제 사이트의 레거시 코드 활용보단 최신의 CSS Flex 혹은 Grid 등을 활용해보세요.
+- [o] 부분적으로 BEM 방법론을 도입해보세요.
+- [o] JS가 필요한 부분은 되도록 생략하되 이유를 명시해보세요.(CSS로 대체 가능한지 피드백이 있을 수 있겠죠?!)
+- [x] JS가 필요한 부분 중 구현할 부분이 있다면 자유롭게 구현해보세요.(JS 과제가 아니니까 가볍게 구현하시길 추천해요)
+- [x] SCSS 등의 CSS 전처리도구를 도입해보세요.
+- [x] SCSS 컴파일에 Webpack이나 Parcel 같은 번들러를 활용해보세요.
+
+YouTube 웹사이트를 클론 코딩하였습니다.
+선택 요구사항을 지키기위해 css grid를 이용하여 작성하였고 grid를 사용하였고 BEM방법을 도입하였습니다. 또한 자바스크립트를 사용하지 않고 만들었습니다. root를 이용해 css의 폰트와 색상의 수정에 유용하게 만들어보도록 하였습니다.
+아쉬운점은 scss를 사용하지않고 만들었고 자바스크립트는 일부로 사용하지않았으나 자바스크립트를 사용하지않는 과정에서 구현에 대한 어려움을 많이 느꼈습니다. 또한 grid사용에 미숙하여 오랜 시간이 걸렸습니다.
+초기에는 사이드버튼의 유튜브링크 및 유튜브의 퍼가기 기능을 통해 iframe으로 영상을 넣어 구현하였으나 저작권 관련 문제 소지가 있을거 같아 전부 뺐습니다.
 
 ## 손쉬운 이미지 추출 방법
 
diff --git a/images/.DS_Store b/images/.DS_Store
new file mode 100644
index 00000000..90818794
Binary files /dev/null and b/images/.DS_Store differ
diff --git a/images/bulb.svg b/images/bulb.svg
new file mode 100644
index 00000000..149b9f31
--- /dev/null
+++ b/images/bulb.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 96 960 960" width="24"><path d="M480 927.5q-25.5 0-44.75-16.75T411 868.5h138q-5 25.5-24.25 42.25T480 927.5Zm-132-140V762h264v25.5H348Zm-.5-106.5q-52.15-35.631-81.825-87.692Q236 541.246 236 477.126q0-102.386 70.765-173.256 70.764-70.87 173-70.87Q582 233 653 303.852q71 70.851 71 173.211 0 63.937-29.675 116.093Q664.65 645.313 612.5 681h-265Z"/></svg>
\ No newline at end of file
diff --git a/images/channel.svg b/images/channel.svg
new file mode 100644
index 00000000..750bce06
--- /dev/null
+++ b/images/channel.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 96 960 960" width="24"><path d="M467.5 747.5H493V589h158.5v-25.5H493v-159h-25.5v159h-159V589h159v158.5ZM480.238 919q-71.145 0-133.868-27.023t-109.12-73.348q-46.398-46.325-73.324-108.826Q137 647.301 137 576.238q0-71.145 27.023-133.868t73.348-109.12q46.325-46.398 108.826-73.324Q408.699 233 479.762 233q71.145 0 133.868 27.023t109.12 73.348q46.398 46.325 73.324 108.826Q823 504.699 823 575.762q0 71.144-27.023 133.868-27.023 62.723-73.348 109.12-46.325 46.398-108.826 73.324Q551.301 919 480.238 919Z"/></svg>
\ No newline at end of file
diff --git a/images/fire.svg b/images/fire.svg
new file mode 100644
index 00000000..ddb51b3f
--- /dev/null
+++ b/images/fire.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 96 960 960" width="24"><path d="M213.5 656q0-59 19.25-110.75T283 450q31-43.5 69-78.5t75-60.5v37q0 61.5 41.25 97.25T561 481q20 0 38.25-6T635 457.5l16.5-10q44 38 69.75 92.25T747 656q0 93.5-55.75 164.25T549.5 914.5q23.5-17 36.75-42.25T599.5 818q0-22.5-9-44t-25-38.5l-85.5-83-84 83q-17 17-26.25 38T360.5 818q0 29 13.25 54.25t36.75 42.25Q325 891 269.25 820.25T213.5 656ZM480 688l67 66q13 13 20 29t7 35q0 38-27.5 65T480 910q-39 0-66.5-27T386 818q0-18 6.75-34T413 754l67-66Z"/></svg>
\ No newline at end of file
diff --git a/images/first.jpg b/images/first.jpg
new file mode 100644
index 00000000..eca85194
Binary files /dev/null and b/images/first.jpg differ
diff --git a/images/flag.svg b/images/flag.svg
new file mode 100644
index 00000000..84e5be31
--- /dev/null
+++ b/images/flag.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 96 960 960" width="24"><path d="M256 906.5v-594h260l16.133 79.5H744v289H563.5l-16-79.5h-266v305H256Z"/></svg>
\ No newline at end of file
diff --git a/images/flash.png b/images/flash.png
new file mode 100644
index 00000000..157e2d78
Binary files /dev/null and b/images/flash.png differ
diff --git a/images/game.svg b/images/game.svg
new file mode 100644
index 00000000..f87cc194
--- /dev/null
+++ b/images/game.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 96 960 960" width="24"><path d="M189 868.5q-50 0-84.75-34.75T69.5 748.586q0-7.586.5-14.503.5-6.916 2.5-15.083l84-336q11.742-44.074 47.264-72.037Q239.286 283 285 283h390q45.661 0 81.142 27.99Q791.623 338.979 804 383l84 336q2 8 3 15.42 1 7.419 1 15.166 0 50.414-35.25 84.664t-85.682 34.25q-34.568 0-63.318-18.25T663.5 801.5l-29-59q-8-16.5-24.5-25.25t-35-8.75H385q-18.242 0-34.871 8.5T326 742.5l-28.804 59Q282 833 252.566 850.75 223.132 868.5 189 868.5Zm351-346q10.5 0 18.75-8T567 496q0-10.5-8.25-18.75T540 469q-10.5 0-18.5 8.25t-8 18.75q0 10.5 8 18.5t18.5 8Zm80-80q10.5 0 18.75-8T647 416q0-10.5-8.25-18.75T620 389q-10.5 0-18.5 8.25t-8 18.75q0 10.5 8 18.5t18.5 8Zm0 160q10.5 0 18.75-8T647 576q0-10.5-8.25-18.75T620 549q-10.5 0-18.5 8.25t-8 18.75q0 10.5 8 18.5t18.5 8Zm80-80q10.5 0 18.75-8T727 496q0-10.5-8.25-18.75T700 469q-10.5 0-18.5 8.25t-8 18.75q0 10.5 8 18.5t18.5 8ZM339.907 579q5.5 0 9.546-3.717 4.047-3.716 4.047-9.283v-57H410q5.5 0 9.5-3.703 4-3.704 4-9.204t-4-9.546q-4-4.047-9.5-4.047h-56.5V426q0-5.5-4-9.5t-9.5-4q-5.5 0-9.25 4T327 426v56.5h-57q-5.567 0-9.283 4-3.717 4-3.717 9.5t3.717 9.25Q264.433 509 270 509h57v57q0 5.567 3.703 9.283 3.704 3.717 9.204 3.717Z"/></svg>
\ No newline at end of file
diff --git a/images/help.svg b/images/help.svg
new file mode 100644
index 00000000..bdf2e35c
--- /dev/null
+++ b/images/help.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 96 960 960" width="24"><path d="M482.465 772.5q10.275 0 17.405-7.095 7.13-7.095 7.13-17.37 0-10.275-7.095-17.405-7.095-7.13-17.37-7.13-10.275 0-17.405 7.095-7.13 7.095-7.13 17.37 0 10.275 7.095 17.405 7.095 7.13 17.37 7.13ZM467 649h26q2-23.5 10.75-38.75t30.75-37.75q27-26.5 39-47.096 12-20.595 12-45.906 0-44.05-29.884-71.024-29.885-26.974-71.419-26.974-38.319 0-66.176 20.838Q390.165 423.176 376 449.5l26.606 11q10.894-23 28.898-38 18.003-15 50.496-15 41 0 59.5 22.5t18.5 49.5q0 21.143-10.893 36.768T520.5 549q-31 29.5-42.25 52.5T467 649Zm13.238 270q-71.145 0-133.868-27.023t-109.12-73.348q-46.398-46.325-73.324-108.826Q137 647.301 137 576.238q0-71.145 27.023-133.868t73.348-109.12q46.325-46.398 108.826-73.324Q408.699 233 479.762 233q71.145 0 133.868 27.023t109.12 73.348q46.398 46.325 73.324 108.826Q823 504.699 823 575.762q0 71.144-27.023 133.868-27.023 62.723-73.348 109.12-46.325 46.398-108.826 73.324Q551.301 919 480.238 919Z"/></svg>
\ No newline at end of file
diff --git a/images/home.svg b/images/home.svg
new file mode 100644
index 00000000..598a10d9
--- /dev/null
+++ b/images/home.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 96 960 960" width="24"><path d="M216.5 879.5v-396L480 284l263.5 199.833V879.5h-192v-246H409v246H216.5Z"/></svg>
\ No newline at end of file
diff --git a/images/live.svg b/images/live.svg
new file mode 100644
index 00000000..d4b21f19
--- /dev/null
+++ b/images/live.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 32 32" width="24px" height="24px"><path d="M 6.1015625 6.1015625 C 3.5675625 8.6345625 2 12.134 2 16 C 2 19.866 3.5675625 23.365437 6.1015625 25.898438 L 7.5195312 24.480469 C 5.3465312 22.307469 4 19.308 4 16 C 4 12.692 5.3465312 9.6925313 7.5195312 7.5195312 L 6.1015625 6.1015625 z M 25.898438 6.1015625 L 24.480469 7.5195312 C 26.653469 9.6925312 28 12.692 28 16 C 28 19.308 26.653469 22.307469 24.480469 24.480469 L 25.898438 25.898438 C 28.432437 23.365437 30 19.866 30 16 C 30 12.134 28.432437 8.6345625 25.898438 6.1015625 z M 9.6367188 9.6367188 C 8.0077188 11.265719 7 13.515 7 16 C 7 18.485 8.0077187 20.734281 9.6367188 22.363281 L 11.052734 20.947266 C 9.7847344 19.680266 9 17.93 9 16 C 9 14.07 9.7847344 12.319734 11.052734 11.052734 L 9.6367188 9.6367188 z M 22.363281 9.6367188 L 20.947266 11.052734 C 22.215266 12.319734 23 14.07 23 16 C 23 17.93 22.215266 19.680266 20.947266 20.947266 L 22.363281 22.363281 C 23.992281 20.734281 25 18.485 25 16 C 25 13.515 23.992281 11.265719 22.363281 9.6367188 z M 16 12 A 4 4 0 0 0 16 20 A 4 4 0 0 0 16 12 z"/></svg>
\ No newline at end of file
diff --git a/images/menu.svg b/images/menu.svg
new file mode 100644
index 00000000..5461b8db
--- /dev/null
+++ b/images/menu.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="40" viewBox="0 96 960 960" width="40"><path d="M147.333 777v-23.167h665.5V777h-665.5Zm0-189.5v-23.167h665.5V587.5h-665.5Zm0-189.333V375h665.5v23.167h-665.5Z"/></svg>
\ No newline at end of file
diff --git a/images/mic.svg b/images/mic.svg
new file mode 100644
index 00000000..2e23d4bc
--- /dev/null
+++ b/images/mic.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 96 960 960" width="24"><path d="M480 601.5q-27.75 0-46.375-18.979T415 536V298q0-27.75 18.625-46.375T480 233q27.75 0 46.375 18.625T545 298v238q0 27.542-18.625 46.521T480 601.5ZM467.5 906V760Q378 754 317 689.702 256 625.405 256 536h25.5q0 82.622 58.036 140.561Q397.572 734.5 479.913 734.5q82.342 0 140.465-58.061Q678.5 618.378 678.5 536H704q0 89.5-61 153.75t-150 70.301V906h-25.5Z"/></svg>
\ No newline at end of file
diff --git a/images/movie.svg b/images/movie.svg
new file mode 100644
index 00000000..df164992
--- /dev/null
+++ b/images/movie.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 96 960 960" width="24"><path d="M194.5 799.5q-24.5 0-41-16.5T137 742V330q0-25.5 16.75-41.5t41.75-16l52.5 105h119l-52.5-105H394l52.5 105h119l-52.5-105h79.5l52.5 105h119l-52.5-105h54q24.5 0 41 16.5t16.5 41v146.5h-25.5V403h-635v339q0 14 9 23t23 9h317v25.5h-317Zm386 38.5v-36.5l166-165 36 36.5-166 165h-36Zm220-184L765 617.5l33.5-33.5q8.5-8 20-8.5t19 6.5l-1.5-2q7.5 8 7 20t-9 20.5L800.5 654Z"/></svg>
\ No newline at end of file
diff --git a/images/music.svg b/images/music.svg
new file mode 100644
index 00000000..43a698ef
--- /dev/null
+++ b/images/music.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 96 960 960" width="24"><path d="M403.814 869q-43.864 0-74.339-30.606Q299 807.787 299 764q0-43.787 30.475-74.394Q359.95 659 404 659q22.5 0 43.5 9t35.814 27.5V283H661.5v80H509v401q0 43.787-30.661 74.394Q447.678 869 403.814 869Z"/></svg>
\ No newline at end of file
diff --git a/images/past.svg b/images/past.svg
new file mode 100644
index 00000000..3b8dadac
--- /dev/null
+++ b/images/past.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 96 960 960" width="24"><path d="M477.89 879.5q-115.2 0-200.795-74.75Q191.5 730 177.5 615.5H203Q219.5 718 296.482 786t181.29 68Q594 854 675 772.987q81-81.013 81-196.982t-81.063-196.987Q593.873 298 477.5 298q-59.27 0-111.635 24T272.5 388.147H367V413.5H228.5V275H254v95.5q44.5-46 101.959-72t121.457-26q63.084 0 118.291 23.852 55.207 23.853 96.5 65Q733.5 402.5 757.5 457.684q24 55.184 24 118.25t-24 118.316q-24 55.25-65.25 96.5t-96.536 65Q540.427 879.5 477.89 879.5Zm132.61-156L469 581.565V378.5h25.5v192L629 705l-18.5 18.5Z"/></svg>
\ No newline at end of file
diff --git a/images/premium.svg b/images/premium.svg
new file mode 100644
index 00000000..a1373364
--- /dev/null
+++ b/images/premium.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="24px" height="24px"><path fill="#FF3D00" d="M43.2,33.9c-0.4,2.1-2.1,3.7-4.2,4c-3.3,0.5-8.8,1.1-15,1.1c-6.1,0-11.6-0.6-15-1.1c-2.1-0.3-3.8-1.9-4.2-4C4.4,31.6,4,28.2,4,24c0-4.2,0.4-7.6,0.8-9.9c0.4-2.1,2.1-3.7,4.2-4C12.3,9.6,17.8,9,24,9c6.2,0,11.6,0.6,15,1.1c2.1,0.3,3.8,1.9,4.2,4c0.4,2.3,0.9,5.7,0.9,9.9C44,28.2,43.6,31.6,43.2,33.9z"/><path fill="#FFF" d="M20 31L20 17 32 24z"/></svg>
\ No newline at end of file
diff --git a/images/report.svg b/images/report.svg
new file mode 100644
index 00000000..522c9ddf
--- /dev/null
+++ b/images/report.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 96 960 960" width="24"><path d="M479.895 743q8.605 0 13.855-5.145 5.25-5.144 5.25-13.75 0-8.605-5.145-13.855-5.144-5.25-13.75-5.25-8.605 0-13.855 5.145-5.25 5.144-5.25 13.75 0 8.605 5.145 13.855 5.144 5.25 13.75 5.25ZM467.5 640H493V398h-25.5v242ZM354 879.5 176.5 702.294V450l177.206-177.5H606l177.5 177.206V702L606.294 879.5H354Z"/></svg>
\ No newline at end of file
diff --git a/images/search.svg b/images/search.svg
new file mode 100644
index 00000000..0870f816
--- /dev/null
+++ b/images/search.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 96 960 960" width="24"><path d="m775.5 887.5-247.766-248Q498 665.5 459 679.25 420 693 383.158 693q-91.362 0-154.01-62.814-62.648-62.815-62.648-153.5Q166.5 386 229.041 323q62.542-63 153.5-63 90.959 0 153.959 62.891t63 153.688q0 40.421-15 79.421-15 39-38.5 65.713L794 869l-18.5 18.5ZM383 667.5q80.5 0 135.75-55.059t55.25-136q0-80.941-55.25-135.941t-136-55Q302 285.5 247 340.559t-55 136q0 80.941 55.042 135.941 55.041 55 135.958 55Z"/></svg>
\ No newline at end of file
diff --git a/images/second.jpg b/images/second.jpg
new file mode 100644
index 00000000..2260da6f
Binary files /dev/null and b/images/second.jpg differ
diff --git a/images/setting.svg b/images/setting.svg
new file mode 100644
index 00000000..ef0b3861
--- /dev/null
+++ b/images/setting.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 96 960 960" width="24"><path d="m419 919-14-110.5q-16-4-42-18T314 758l-101 43-61.5-108 88-66q-2.5-12-3.75-24.5T234.5 577q0-10.5 1.5-23.25l3.5-29.75-88-66L213 352.5 314 395q19.5-16.5 43-30.25t47-21.25l15-111h122.5l14 111.5q26 9 45.75 20.75T642 395l105.5-42.5L809 458l-93.5 70q3.5 14 4.25 25t.75 23q0 10.5-1 22t-4 28l91 67L745 801l-103-44.5q-20.5 18-41 30.5t-45.5 20.5l-14 111.5H419Zm58-257.5q36 0 60.75-24.75T562.5 576q0-36-24.75-60.75T477 490.5q-36 0-60.75 24.75T391.5 576q0 36 24.75 60.75T477 661.5Z"/></svg>
\ No newline at end of file
diff --git a/images/shopping.svg b/images/shopping.svg
new file mode 100644
index 00000000..800a7fe8
--- /dev/null
+++ b/images/shopping.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 96 960 960" width="24"><path d="M274 922.5q-24.969 0-41.234-16.266Q216.5 889.969 216.5 865V452.257q0-24.195 16.266-40.726Q249.031 395 274 395h73.5v-26q0-55 38.584-93.75t94-38.75q55.416 0 94.166 38.869Q613 314.237 613 369v26h73.708q24.23 0 40.761 16.531Q744 428.062 744 452.257V865q0 24.969-16.531 41.234-16.531 16.266-40.726 16.266H274Zm86-382q5.5 0 9.25-3.5t3.75-9V420.5h-25.5V528q0 5.5 3.5 9t9 3.5ZM373 395h214.5v-26q0-45-30.916-76t-76.5-31q-45.584 0-76.334 31.088Q373 324.175 373 369v26Zm227 145.5q5.5 0 9.25-3.5t3.75-9V420.5h-25.5V528q0 5.5 3.5 9t9 3.5Z"/></svg>
\ No newline at end of file
diff --git a/images/shorts.svg b/images/shorts.svg
new file mode 100644
index 00000000..9c1aa812
--- /dev/null
+++ b/images/shorts.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 96 960 960" width="24"><path d="m318 920 161-272-302-34.5 435.5-382H644l-165.5 273 305 33.5-436 382H318Z"/></svg>
\ No newline at end of file
diff --git a/images/sport.svg b/images/sport.svg
new file mode 100644
index 00000000..2d8a3f1c
--- /dev/null
+++ b/images/sport.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 96 960 960" width="24"><path d="M299 882.5q-68.377 0-116.938-48.562Q133.5 785.377 133.5 717q0-69.704 49.25-118.352Q232 550 301 551q10 0 20 1.5t20 3.5L218 309h161.5L480 510.5 581 309h161L620 553q9-2 18.5-3t19.5-1q70.5-1 119.75 48.058T827 716.196q0 69.259-48.709 117.781Q729.582 882.5 660 882.5q-12 0-24.5-1.5t-23.5-5.5q42.5-18.5 58.75-64.091Q687 765.819 687 716q0-86.5-60.25-146.75T480 509q-86.5 0-146.5 60.25T273.5 716q0 50.315 14 98.407 14 48.093 61 61.093-12 4-24.25 5.5T299 882.5ZM480.088 897q-75.588 0-128.338-52.809T299 715.941q0-75.441 52.809-128.441t128.25-53q75.441 0 128.441 52.912 53 52.911 53 128.5 0 75.588-52.912 128.338Q555.677 897 480.088 897ZM480 816l31-69 69-31-69-31-31-69-31 69-69 31 69 31 31 69Z"/></svg>
\ No newline at end of file
diff --git a/images/subscribe.svg b/images/subscribe.svg
new file mode 100644
index 00000000..eada79ca
--- /dev/null
+++ b/images/subscribe.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 96 960 960" width="24"><path d="M194.28 917.5q-24.218 0-40.749-16.531Q137 884.438 137 860.217V526.783q0-24.221 16.531-40.752Q170.062 469.5 194.28 469.5h571.44q24.218 0 40.749 16.531Q823 502.562 823 526.783v333.434q0 24.221-16.531 40.752Q789.938 917.5 765.72 917.5H194.28Zm233.22-115 163.5-109-163.5-109v218Zm-238-414V363h581v25.5h-581Zm119-106.5v-25.5h343V282h-343Z"/></svg>
\ No newline at end of file
diff --git a/images/user.png b/images/user.png
new file mode 100644
index 00000000..cf550ecc
Binary files /dev/null and b/images/user.png differ
diff --git a/images/vert.svg b/images/vert.svg
new file mode 100644
index 00000000..6cb65f6b
--- /dev/null
+++ b/images/vert.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 96 960 960" width="24"><path d="M480 866.767q-24.749 0-42.374-17.624-17.625-17.625-17.625-42.374 0-24.75 17.625-42.374Q455.251 746.77 480 746.77q24.749 0 42.374 17.625 17.625 17.624 17.625 42.374 0 24.749-17.625 42.374-17.625 17.624-42.374 17.624Zm0-230.768q-24.749 0-42.374-17.625-17.625-17.625-17.625-42.374 0-24.749 17.625-42.374 17.625-17.625 42.374-17.625 24.749 0 42.374 17.625 17.625 17.625 17.625 42.374 0 24.749-17.625 42.374-17.625 17.625-42.374 17.625Zm0-230.769q-24.749 0-42.374-17.625-17.625-17.624-17.625-42.374 0-24.749 17.625-42.374 17.625-17.624 42.374-17.624 24.749 0 42.374 17.624 17.625 17.625 17.625 42.374 0 24.75-17.625 42.374Q504.749 405.23 480 405.23Z"/></svg>
\ No newline at end of file
diff --git a/images/videolibrary.svg b/images/videolibrary.svg
new file mode 100644
index 00000000..c61d7f11
--- /dev/null
+++ b/images/videolibrary.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 96 960 960" width="24"><path d="m457 627 201.5-129L457 369v258ZM323.5 764q-24.438 0-40.969-16.531Q266 730.938 266 706.5v-416q0-24.438 16.531-40.969Q299.062 233 323.5 233h416q24.438 0 40.969 16.531Q797 266.062 797 290.5v416q0 24.438-16.531 40.969Q763.938 764 739.5 764h-416Zm-103 103q-24.438 0-40.969-16.531Q163 833.938 163 809.5V368h25.5v441.5q0 12 10 22t22 10H662V867H220.5Z"/></svg>
\ No newline at end of file
diff --git a/images/youtube.svg b/images/youtube.svg
new file mode 100644
index 00000000..0904e608
--- /dev/null
+++ b/images/youtube.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="120" height="60"><g transform="matrix(.223746 0 0 .223746 4.958506 17.693975)"><path d="M154.3 17.5c-1.8-6.7-7.1-12-13.8-13.8C128.4.4 79.7.4 79.7.4S31 .5 18.9 3.8c-6.7 1.8-12 7.1-13.8 13.8C1.9 29.7 1.9 55 1.9 55s0 25.3 3.3 37.5c1.8 6.7 7.1 12 13.8 13.8 12.1 3.3 60.8 3.3 60.8 3.3s48.7 0 60.8-3.3c6.7-1.8 12-7.1 13.8-13.8 3.3-12.1 3.3-37.5 3.3-37.5s-.1-25.3-3.4-37.5z" fill="red"/><path d="M104.6 55L64.2 31.6v46.8z" fill="#fff"/><g fill="#282828"><path d="M227.9 99.7c-3.1-2.1-5.3-5.3-6.6-9.7s-1.9-10.2-1.9-17.5v-9.9c0-7.3.7-13.3 2.2-17.7 1.5-4.5 3.8-7.7 7-9.7s7.3-3.1 12.4-3.1c5 0 9.1 1 12.1 3.1s5.3 5.3 6.7 9.7 2.1 10.3 2.1 17.6v9.9c0 7.3-.7 13.1-2.1 17.5s-3.6 7.6-6.7 9.7c-3.1 2-7.3 3.1-12.5 3.1-5.4.1-9.6-1-12.7-3zM245.2 89c.9-2.2 1.3-5.9 1.3-10.9V56.8c0-4.9-.4-8.5-1.3-10.7-.9-2.3-2.4-3.4-4.5-3.4s-3.5 1.1-4.4 3.4-1.3 5.8-1.3 10.7v21.3c0 5 .4 8.7 1.2 10.9s2.3 3.3 4.5 3.3c2.1 0 3.6-1.1 4.5-3.3zm219.2-16.3v3.5l.4 9.9c.3 2.2.8 3.8 1.6 4.8s2.1 1.5 3.8 1.5c2.3 0 3.9-.9 4.7-2.7.9-1.8 1.3-4.8 1.4-8.9l13.3.8c.1.6.1 1.4.1 2.4 0 6.3-1.7 11-5.2 14.1s-8.3 4.7-14.6 4.7c-7.6 0-12.9-2.4-15.9-7.1s-4.6-12.1-4.6-22V61.6c0-10.2 1.6-17.7 4.7-22.4 3.2-4.7 8.6-7.1 16.2-7.1 5.3 0 9.3 1 12.1 2.9s4.8 4.9 6 9 1.7 9.7 1.7 16.9v11.7h-25.7zm2-28.8c-.8 1-1.3 2.5-1.6 4.7s-.4 5.5-.4 10v4.9h11.2v-4.9c0-4.4-.1-7.7-.4-10s-.8-3.9-1.6-4.8-2-1.4-3.6-1.4c-1.7.1-2.9.6-3.6 1.5zM190.5 71.4L173 8.2h15.3l6.1 28.6c1.6 7.1 2.7 13.1 3.5 18h.4c.5-3.6 1.7-9.5 3.5-17.9l6.3-28.7h15.3l-17.7 63.1v30.3h-15.1V71.4z"/><use xlink:href="#B"/><use xlink:href="#B" x="78.9"/><path d="M353.3 20.6H338v81.1h-15V20.6h-15.3V8.2h45.5v12.4zm87.9 23.7c-.9-4.3-2.4-7.4-4.5-9.4-2.1-1.9-4.9-2.9-8.6-2.9-2.8 0-5.5.8-7.9 2.4-2.5 1.6-4.3 3.7-5.7 6.3h-.1v-36h-14.8v96.9h12.7l1.6-6.5h.3c1.2 2.3 3 4.1 5.3 5.5a16.26 16.26 0 0 0 7.9 2c5.2 0 9-2.4 11.5-7.2 2.4-4.8 3.7-12.3 3.7-22.4V62.2c0-7.6-.5-13.6-1.4-17.9zm-14.1 27.9c0 5-.2 8.9-.6 11.7s-1.1 4.8-2.1 6-2.3 1.8-3.9 1.8c-1.3 0-2.4-.3-3.5-.9s-1.9-1.5-2.6-2.7V49.3c.5-1.9 1.4-3.4 2.7-4.6s2.6-1.8 4.1-1.8c1.6 0 2.8.6 3.6 1.8.9 1.2 1.4 3.3 1.8 6.2.3 2.9.5 7 .5 12.4z"/></g></g><defs ><path id="B" d="M311.5 33.4v68.3h-12l-1.3-8.4h-.3c-3.3 6.3-8.2 9.5-14.7 9.5-4.5 0-7.9-1.5-10-4.5-2.2-3-3.2-7.6-3.2-13.9v-51h15.4v50.1c0 3 .3 5.2 1 6.5s1.8 1.9 3.3 1.9c1.3 0 2.6-.4 3.8-1.2s2.1-1.9 2.7-3.1V33.4z"/></defs></svg>
\ No newline at end of file
diff --git a/images/youtubekids.svg b/images/youtubekids.svg
new file mode 100644
index 00000000..3be7e695
--- /dev/null
+++ b/images/youtubekids.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 100 100" width="24px" height="24px"><path fill="#e85654" d="M87.574,32.465c-0.77-4.477-4.399-7.902-8.922-8.325C71.569,23.479,62.224,23,50,23	s-21.569,0.479-28.651,1.141c-4.523,0.422-8.153,3.848-8.922,8.325C11.59,37.333,11,43.181,11,50s0.59,12.667,1.426,17.535	c0.77,4.477,4.399,7.902,8.922,8.325C28.431,76.521,37.776,77,50,77s21.569-0.479,28.651-1.141c4.523-0.422,8.153-3.848,8.922-8.325	C88.41,62.667,89,56.819,89,50S88.41,37.333,87.574,32.465z"/><path fill="#fefdef" d="M42.5,61.5l20-11.5l-20-11.5V61.5z"/><path fill="#1f212b" d="M50,78c-10.941,0-20.612-0.385-28.745-1.145c-4.931-0.46-8.967-4.223-9.814-9.15	C10.485,62.141,10,56.184,10,50s0.485-12.141,1.441-17.705c0.847-4.927,4.883-8.69,9.815-9.15C29.388,22.385,39.059,22,50,22	s20.612,0.385,28.745,1.145c4.931,0.46,8.967,4.224,9.814,9.15l0,0C89.515,37.856,90,43.813,90,50s-0.485,12.144-1.441,17.705	c-0.847,4.927-4.883,8.69-9.815,9.15C70.612,77.615,60.941,78,50,78z M50,24c-10.879,0-20.488,0.382-28.559,1.136	c-4.033,0.377-7.335,3.46-8.03,7.498C12.475,38.086,12,43.929,12,50s0.475,11.914,1.412,17.366c0.695,4.038,3.997,7.121,8.03,7.498	C29.512,75.618,39.121,76,50,76s20.488-0.382,28.559-1.136c4.034-0.377,7.335-3.46,8.03-7.498C87.525,61.917,88,56.074,88,50	s-0.475-11.917-1.412-17.366l0,0c-0.694-4.038-3.996-7.121-8.03-7.498C70.488,24.382,60.879,24,50,24z"/><path fill="#1f212b" d="M42.5,62c-0.086,0-0.173-0.022-0.25-0.067C42.095,61.843,42,61.679,42,61.5v-23	c0-0.179,0.095-0.343,0.25-0.433c0.155-0.089,0.345-0.09,0.5-0.001l20,11.5C62.904,49.656,63,49.821,63,50s-0.096,0.344-0.251,0.434	l-20,11.5C42.672,61.978,42.586,62,42.5,62z M43,39.364v21.271L61.497,50L43,39.364z"/><path fill="#1f212b" d="M22.5,29.058c-0.256,0-0.474-0.195-0.498-0.456c-0.024-0.275,0.178-0.518,0.454-0.542	C30.307,27.356,39.574,27,50,27c5.443,0,10.665,0.101,15.521,0.301c0.276,0.011,0.49,0.244,0.479,0.52	c-0.011,0.275-0.261,0.496-0.52,0.479C60.638,28.101,55.43,28,50,28c-10.396,0-19.634,0.355-27.456,1.056	C22.529,29.058,22.514,29.058,22.5,29.058z"/><path fill="#1f212b" d="M77.5,29.058c-0.015,0-0.03,0-0.045-0.002l-0.997-0.082c-0.275-0.023-0.479-0.265-0.456-0.54	c0.023-0.275,0.271-0.483,0.54-0.456l1.003,0.082c0.275,0.025,0.478,0.268,0.453,0.543C77.975,28.863,77.756,29.058,77.5,29.058z"/><path fill="#1f212b" d="M73.5,28.743c-0.012,0-0.024,0-0.036-0.001c-1.614-0.114-3.272-0.218-4.99-0.305	c-0.276-0.014-0.488-0.249-0.474-0.525c0.014-0.276,0.247-0.493,0.525-0.474c1.725,0.088,3.39,0.192,5.01,0.307	c0.276,0.02,0.483,0.258,0.463,0.534C73.98,28.542,73.761,28.743,73.5,28.743z"/></svg>
\ No newline at end of file
diff --git a/images/youtubemusic.svg b/images/youtubemusic.svg
new file mode 100644
index 00000000..fc60e13d
--- /dev/null
+++ b/images/youtubemusic.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="24px" height="24px"><circle cx="24" cy="24" r="20" fill="#f44336"/><polygon fill="#fff" points="21,29 29,24 21,19"/><path fill="none" stroke="#fff" stroke-miterlimit="10" d="M24,14c5.5,0,10,4.476,10,10s-4.476,10-10,10	s-10-4.476-10-10S18.5,14,24,14"/></svg>
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 00000000..ff850839
--- /dev/null
+++ b/index.html
@@ -0,0 +1,298 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <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>YouTube</title>
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css
+    "
+    />
+    <link defer rel="stylesheet" href="main.css" />
+    <script
+      src="https://kit.fontawesome.com/7d8dea29c6.js"
+      crossorigin="anonymous"
+    ></script>
+  </head>
+  <body>
+    <div class="container">
+      <!-- Header -->
+
+      <div class="header">
+        <div class="header-start">
+          <i class="fa-solid fa-bars"></i>
+          <a href="#" class="logo"
+            ><img src="images/youtube.svg" alt="youtube"
+          /></a>
+        </div>
+
+        <div class="header-middle">
+          <div class="search">
+            <div class="add">
+              <div class="search__space">
+                <i class="fa-solid fa-magnifying-glass"></i>
+              </div>
+              <input type="text" placeholder="검색" />
+            </div>
+            <button><i class="fa-solid fa-magnifying-glass"></i></button>
+          </div>
+          <a href="" class="mic"><img src="images/mic.svg" alt="마이크" /> </a>
+        </div>
+
+        <div class="header-end">
+          <div class="icon">
+            <i class="fa-solid fa-ellipsis-vertical"></i>
+            <button class="login">
+              <i class="fa-regular fa-circle-user"></i>로그인
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- side button -->
+
+      <nav class="sidebutton">
+        <a href="#" class="links active"
+          ><img src="images/home.svg" alt="홈" />홈</a
+        >
+        <a href="#" class="links"
+          ><img src="images/flash.png" alt="쇼츠" />shorts</a
+        >
+        <a href="#" class="links"
+          ><img src="images/subscribe.svg" alt="구독" />구독</a
+        >
+
+        <hr class="seperate" />
+
+        <a href="#" class="links"
+          ><img src="images/videolibrary.svg" alt="보관함" />보관함</a
+        >
+        <a href="#" class="links"
+          ><img src="images/past.svg" alt="시청기록" />시청기록</a
+        >
+
+        <hr class="seperate" />
+
+        <span class="login-info">
+          로그인하면 동영상에 좋아요를 표시하고 댓글을 달거나 구독할 수
+          있습니다.
+        </span>
+        <button class="login">
+          <i class="fa-regular fa-circle-user"></i>로그인
+        </button>
+
+        <hr class="seperate" />
+
+        <span class="sidebutton__search">탐색</span>
+
+        <a href="#" class="links"
+          ><img src="images/fire.svg" alt="인기 급상승" />인기 급상승</a
+        >
+        <a href="#" class="links"
+          ><img src="images/shopping.svg" alt="쇼핑" />쇼핑</a
+        >
+        <a href="#" class="links"
+          ><img src="images/music.svg" alt="음악" />음악</a
+        >
+        <a href="#" class="links"
+          ><img src="images/movie.svg" alt="영화" />영화</a
+        >
+        <a href="#" class="links"
+          ><img src="images/live.svg" alt="실시간" />실시간</a
+        >
+        <a href="#" class="links"
+          ><img src="images/game.svg" alt="게임" />게임</a
+        >
+        <a href="#" class="links"
+          ><img src="images/sport.svg" alt="스포츠" />스포츠</a
+        >
+        <a href="#" class="links"
+          ><img src="images/bulb.svg" alt="학습" />학습</a
+        >
+
+        <hr class="seperate" />
+
+        <a href="#" class="links"
+          ><img src="images/channel.svg" alt="채널 탐색" />채널 탐색</a
+        >
+
+        <hr class="seperate" />
+
+        <span class="sidebutton__search">YouTube 더보기</span>
+
+        <a href="#" class="links"
+          ><img src="images/premium.svg" alt="유튜브 프리미엄" />YouTube
+          Premium</a
+        >
+
+        <a href="#" class="links"
+          ><img src="images/youtubemusic.svg" alt="유튜브 뮤직" />YouTube
+          Music</a
+        >
+
+        <a href="#" class="links"
+          ><img src="images/youtubekids.svg" alt="유튜브 키즈" />YouYube Kids</a
+        >
+
+        <hr class="seperate" />
+
+        <a href="#" class="links"
+          ><img src="images/setting.svg" alt="설정" />설정</a
+        >
+        <a href="#" class="links"
+          ><img src="images/flag.svg" alt="신고기록" />신고기록</a
+        >
+        <a href="#" class="links"
+          ><img src="images/help.svg" alt="고객센터" />고객센터</a
+        >
+        <a href="#" class="links"
+          ><img src="images/report.svg" alt="의견보내기" />의견보내기</a
+        >
+        <hr class="seperate" />
+
+        <div class="rule">
+          <p>정보 보도자료 저작권 문의하기 크리에이터 광고 개발자</p>
+          <br />
+          <p>
+            약관 개인정보처리방침 정책 및 안전 YouTube 작동의 원리 새로운 기능
+            테스트하기
+          </p>
+          <br />
+          © 2023 Google LLC, Sundar Pichai, 1600 Amphitheatre Parkway, Mountain
+          View CA 94043, USA, 0807-882-594 (무료),
+          yt-support-solutions-kr@google.com, 호스팅: Google LLC, 사업자정보,
+          불법촬영물 신고 크리에이터들이 유튜브 상에 게시, 태그 또는 추천한
+          상품들은 판매자들의 약관에 따라 판매됩니다. 유튜브는 이러한 제품들을
+          판매하지 않으며, 그에 대한 책임을 지지 않습니다.
+        </div>
+
+        <hr class="seperate" />
+      </nav>
+
+      <!-- categori -->
+      <div class="categori">
+        <button class="categori__filter active">전체</button>
+        <button class="categori__filter">게임</button>
+        <button class="categori__filter">음악</button>
+        <button class="categori__filter">믹스</button>
+        <button class="categori__filter">뉴스</button>
+        <button class="categori__filter">실시간</button>
+        <button class="categori__filter">축구</button>
+        <button class="categori__filter">요리</button>
+        <button class="categori__filter">랩</button>
+        <button class="categori__filter">최근에 업로드 된 동영상</button>
+      </div>
+
+      <!-- Video -->
+
+      <div class="video">
+        <section class="video__section">
+          <article class="content__main">
+            <div class="content">
+              <img src="images/first.jpg" alt="동영상" />
+              <h3 class="content__title">첫번쨰 동영상</h3>
+              <div class="content__name">hi</div>
+              <span class="content__views">조회수 62만회 · 2일전</span>
+            </div>
+            <div class="content">
+              <img src="images/second.jpg" alt="동영상" />
+              <h3 class="content__title">두번째 동영상</h3>
+              <div class="content__name">hello</div>
+              <span class="content__views">조회수 132만회 · 2일전</span>
+            </div>
+            <div class="content">
+              <img src="images/first.jpg" alt="동영상" />
+              <h3 class="content__title">안녕하세요</h3>
+              <div class="content__name">hi</div>
+              <span class="content__views">조회수 82만회 · 2일전</span>
+            </div>
+            <div class="content">
+              <img src="images/second.jpg" alt="동영상" />
+              <h3 class="content__title">동영상</h3>
+              <div class="content__name">hello</div>
+              <span class="content__views">조회수 92만회 · 12일전</span>
+            </div>
+
+            <div class="content">
+              <img src="images/first.jpg" alt="동영상" />
+              <h3 class="content__title">아무거나 넣은 동영상</h3>
+              <div class="content__name">hi</div>
+              <span class="content__views">조회수 125만회 · 9일전</span>
+            </div>
+            <div class="content">
+              <img src="images/second.jpg" alt="동영상" />
+              <h3 class="content__title">일반 동영상</h3>
+              <div class="content__name">hello</div>
+              <span class="content__views">조회수 92만회 · 5일전</span>
+            </div>
+            <div class="content">
+              <img src="images/first.jpg" alt="동영상" />
+              <h3 class="content__title">설산</h3>
+              <div class="content__name">hi</div>
+              <span class="content__views">조회수 70만회 · 9알전</span>
+            </div>
+            <div class="content">
+              <img src="images/second.jpg" alt="동영상" />
+              <h3 class="content__title">국밥</h3>
+              <div class="content__name">hello</div>
+              <span class="content__views">조회수 120만회 · 11일전</span>
+            </div>
+          </article>
+
+          <article class="content__main">
+            <div class="content">
+              <img src="images/first.jpg" alt="동영상" />
+              <h3 class="content__title">snow</h3>
+              <div class="content__name">hi</div>
+              <span class="content__views">조회수 122만회 · 15일전</span>
+            </div>
+            <div class="content">
+              <img src="images/second.jpg" alt="동영상" />
+              <h3 class="content__title">속보</h3>
+              <div class="content__name">hello</div>
+              <span class="content__views">조회수 61만회 · 1개월전</span>
+            </div>
+            <div class="content">
+              <img src="images/first.jpg" alt="동영상" />
+              <h3 class="content__title">치킨</h3>
+              <div class="content__name">hi</div>
+              <span class="content__views">조회수 64만회 · 4주전</span>
+            </div>
+            <div class="content">
+              <img src="images/second.jpg" alt="동영상" />
+              <h3 class="content__title">피자</h3>
+              <div class="content__name">hello</div>
+              <span class="content__views">조회수 210만회 · 8개월전</span>
+            </div>
+            <div class="content">
+              <img src="images/first.jpg" alt="동영상" />
+              <h3 class="content__title">햄버거</h3>
+              <div class="content__name">hi</div>
+              <span class="content__views">조회수 65만회 · 1개월전</span>
+            </div>
+            <div class="content">
+              <img src="images/second.jpg" alt="동영상" />
+              <h3 class="content__title">고구마와 파인애플 피자</h3>
+              <div class="content__name">hello</div>
+              <span class="content__views">조회수 78만회 · 1개월전</span>
+            </div>
+            <div class="content">
+              <img src="images/first.jpg" alt="동영상" />
+              <h3 class="content__title">축구</h3>
+              <div class="content__name">hi</div>
+              <span class="content__views">조회수 70만회 · 1개월전</span>
+            </div>
+            <div class="content">
+              <img src="images/second.jpg" alt="동영상" />
+              <h3 class="content__title">아구</h3>
+              <div class="content__name">hello</div>
+              <span class="content__views">조회수 150만회 · 2개월일전</span>
+            </div>
+          </article>
+        </section>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/main.css b/main.css
new file mode 100644
index 00000000..07fe07cd
--- /dev/null
+++ b/main.css
@@ -0,0 +1,359 @@
+:root {
+  /* Color */
+
+  --white-color: #fff;
+  --black-color: #140a00;
+  --blue-color: #045fd4;
+  --grey-dark-color: #909090;
+  --grey-light-color: #e0e0e0;
+
+  /* Font Size */
+
+  --font-large: 25px;
+  --font-medium: 16px;
+  --font-small: 14px;
+  --font-micro: 12px;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+a {
+  text-decoration: none;
+}
+
+body {
+  font-family: "roboto", "sans-serif";
+}
+
+.container {
+  margin: auto;
+  display: grid;
+  grid-template-columns: 220px 1fr;
+  grid-template-rows: 80px 80px 1fr;
+  grid-template-areas:
+    "header header"
+    "sidebar cg"
+    "sidebar main";
+}
+
+/* header */
+
+.header {
+  background-color: var(--white-color);
+  grid-area: header;
+  display: flex;
+  width: 100%;
+  padding: 0 16px;
+  z-index: 10;
+  justify-content: space-between;
+  position: sticky;
+  top: 0;
+  white-space: nowrap;
+}
+
+.header .header-start {
+  align-items: center;
+  display: flex;
+}
+
+.header .header-start .logo {
+  font-size: var(--font-large);
+  font-weight: bold;
+  color: var(--black-color);
+  margin-top: 5px;
+}
+
+.header-start .fa-bars {
+  font-size: var(--font-large);
+  margin: 0 8px;
+  color: var(--black-color);
+  cursor: pointer;
+}
+
+.header-start .fa-bars:hover {
+  background-color: var(--grey-dark-color);
+  border-radius: 50%;
+}
+
+/* header middle */
+
+.header .header-middle {
+  display: flex;
+  align-items: center;
+}
+
+.header-middle .search {
+  width: 600px;
+  display: flex;
+  align-items: center;
+}
+.header-middle .search .add {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: end;
+  align-items: center;
+}
+
+.header-middle .search .add .search__space {
+  width: 30px;
+  height: 40px;
+  background-color: var(--white-color);
+  border: 1px solid var(--grey-light-color);
+  border-right: none;
+  border-radius: 20px 0 0 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.header-middle .search .add .search__space .fa-magnifying-glass {
+  font-size: var(--font-medium);
+  display: none;
+}
+.header-middle .search .add input {
+  width: 90%;
+  height: 40px;
+  border: 1px solid var(--grey-light-color);
+  border-left: none;
+  color: var(--grey-dark-color);
+  font-size: var(--font-medium);
+}
+
+.header-middle .search .add .input:focus {
+  border-color: var(--blue-color);
+}
+
+.header-middle .add:focus-within .search__space .fa-magnifying-glass {
+  display: inline-block;
+  text-align: center;
+}
+
+.header-middle .add:focus-within .search__space {
+  background-color: var(--white-color);
+  border-color: var(--blue-color);
+  width: 40px;
+}
+
+.header-middle .search button {
+  width: 60px;
+  height: 40px;
+  border: 1px solid var(--grey-light-color);
+  border-left: var(--white-color);
+  background-color: var(--grey-light-color);
+  border-radius: 0 20px 20px 0;
+}
+.header-middle .search button .fa-magnifying-glass {
+  font-size: 20px;
+}
+
+.header-middle .search button:hover {
+  background-color: var(--grey-dark-color);
+}
+
+/* header end */
+
+.header-end {
+  display: flex;
+  align-items: center;
+}
+
+.header-end .login {
+  background-color: var(--white-color);
+  font-size: var(--font-medium);
+  border-radius: 12px;
+  border: 1px solid var(--grey-light-color);
+  color: var(--blue-color);
+  padding: 7px;
+  cursor: pointer;
+}
+
+/* side button */
+
+.sidebutton {
+  background-color: var(--white-color);
+  grid-area: sidebar;
+  height: 95vh;
+  overflow-y: scroll;
+  position: sticky;
+  overscroll-behavior: contain;
+  top: 80px;
+  z-index: 5;
+}
+
+.sidebutton .links {
+  padding: 10px 20px;
+  display: flex;
+  align-items: center;
+  color: var(--black-color);
+  font-size: var(--font-small);
+  font-weight: 400;
+  text-decoration: none;
+  border-radius: 10px;
+}
+
+.sidebutton .links img {
+  height: 25px;
+  margin-right: 20px;
+}
+
+.sidebutton .links:hover,
+.sidebutton .links.active {
+  background: var(--grey-light-color);
+}
+
+.sidebutton .login {
+  background-color: var(--white-color);
+  font-size: var(--font-medium);
+  border-radius: 12px;
+  border: 1px solid var(--grey-light-color);
+  color: var(--blue-color);
+  margin-left: 20px;
+  padding: 7px;
+  cursor: pointer;
+}
+
+.sidebutton .login-info {
+  padding: 5px 25px;
+  display: flex;
+  font-size: var(--font-small);
+}
+
+.sidebutton .sidebutton__search {
+  padding: 20px;
+  font-size: var(--font-medium);
+  font-weight: 400;
+}
+
+.sidebutton .rule {
+  padding: 15px;
+  font-size: var(--font-micro);
+  font-weight: 100;
+}
+
+.sidebutton .rule > p {
+  font-size: var(--font-small);
+  font-weight: 400;
+}
+
+.sidebutton .seperate {
+  border: none;
+  border-bottom: 1px solid var(--grey-light-color);
+  margin: 10px 0;
+}
+
+/* categori */
+
+.categori {
+  grid-area: cg;
+  height: 45px;
+  background: var(--white-color);
+  padding: 0 30px;
+  display: flex;
+  align-items: center;
+  position: sticky;
+  top: 80px;
+  z-index: 10;
+  white-space: nowrap;
+}
+
+.categori .categori__filter {
+  padding: 8px;
+  border-radius: 8px;
+  background: var(--grey-light-color);
+  border: 1px solid var(--grey-dark-color);
+  margin-right: 15px;
+  color: var(--black-color);
+  font-size: var(--font-small);
+  cursor: pointer;
+}
+
+.categori .categori__filter:hover {
+  background-color: var(--grey-dark-color);
+}
+
+.categori .categori__filter.active {
+  background-color: var(--black-color);
+  color: var(--white-color);
+}
+
+/* video */
+
+.video {
+  grid-area: main;
+  display: flex;
+  flex-wrap: wrap;
+  align-content: flex-start;
+  height: 100%;
+  margin: 0 20px;
+}
+
+.video__section {
+  max-width: 1440px;
+  background-color: var(--white-color);
+}
+
+.video .content {
+  width: 350px;
+}
+
+.content__main {
+  padding: 25px 0;
+  display: flex;
+  flex-wrap: wrap;
+  border-bottom: 2px solid var(--grey-light-color);
+}
+
+.video .content img {
+  width: 95%;
+  height: 75%;
+  padding: 5px 2px;
+  border-radius: 20px;
+}
+
+.content__title {
+  font-size: var(--font-medium);
+  color: var(--black-color);
+  padding: 10px 8px 0 0;
+  font-weight: bold;
+  flex-wrap: wrap;
+}
+
+.content__name {
+  font-size: var(--font-small);
+  font-weight: 400;
+  color: var(--grey-dark-color);
+  padding: 10px 8px 0 0;
+}
+
+.content__views {
+  display: inline-block;
+  font-size: var(--font-small);
+  font-weight: 500;
+  color: var(--grey-dark-color);
+  margin-bottom: 100px;
+}
+
+@media (max-width: 768px) {
+  .add {
+    display: none;
+  }
+  .container {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      "header"
+      "main";
+  }
+  .search {
+    align-items: center;
+  }
+  .categori {
+    display: none;
+  }
+  .sidebutton {
+    display: none;
+  }
+}