diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 00000000..ed45aceb
Binary files /dev/null and b/.DS_Store differ
diff --git a/README.md b/README.md
index 598dc30f..84435a72 100644
--- a/README.md
+++ b/README.md
@@ -1,45 +1,22 @@
-# 👀 자신이 원하는 사이트 레이아웃 클론
-
-원하는 사이트(페이지)를 자유롭게 선택하고 레이아웃을 클론 코딩하세요.  
-평소에 도전해 보고 싶었거나 혹은 자신의 수준에 맞는 사이트(페이지)를 선택하세요.   
-과제 수행 및 리뷰 기간은 별도 공지를 참고하세요!
-
-## 과제 수행 및 제출 방법
-
-1. 현재 저장소를 로컬에 클론(Clone)합니다.
-1. 자신의 본명으로 브랜치를 생성합니다.(구분 가능하도록 본명을 꼭 파스칼케이스로 표시하세요, `git branch KDT0_ParkYoungWoong`)
-1. 자신의 본명 브랜치에서 과제를 수행합니다.
-1. 과제 수행이 완료되면, 자신의 본명 브랜치를 원격 저장소에 푸시(Push)합니다.(`main` 브랜치에 푸시하지 않도록 꼭 주의하세요, `git push origin KDT0_ParkYoungWoong`)
-1. 저장소에서 `main` 브랜치를 대상으로 Pull Request 생성하면, 과제 제출이 완료됩니다!(E.g, `main` <== `KDT0_ParkYoungWoong`)
-
-- `main` 혹은 다른 사람의 브랜치로 절대 병합하지 않도록 주의하세요!
-- Pull Request에서 보이는 설명을 다른 사람들이 이해하기 쉽도록 꼼꼼하게 작성하세요!
-- Pull Request에서 과제 제출 후 절대 병합(Merge)하지 않도록 주의하세요!
-- 과제 수행 및 제출 과정에서 문제가 발생한 경우, 바로 담당 멘토나 강사에서 얘기하세요!
-
-## 필수 요구사항
-
-- [ ] 과제에 대한 설명을 포함한 `README.md` 파일을 제공하세요!
-- [ ] 과제 결과와 비교할 수 있는 실제 사이트(페이지)의 주소를 명시하세요!
-- [ ] 과정에서 사용한 프로젝트 폴더/파일이 모두 포함돼야 합니다, 일부 파일만 제출하지 마세요! 
-- [ ] 실제 서비스로 배포하고 접근 가능한 링크를 추가해야 합니다.
-
-## 선택 요구사항
-
-- [ ] `<header>`, `<section>` 등 시멘틱 태그를 최대한 활용해보세요.
-- [ ] 실제 사이트의 레거시 코드 활용보단 최신의 CSS Flex 혹은 Grid 등을 활용해보세요.
-- [ ] 부분적으로 BEM 방법론을 도입해보세요.
-- [ ] JS가 필요한 부분은 되도록 생략하되 이유를 명시해보세요.(CSS로 대체 가능한지 피드백이 있을 수 있겠죠?!)
-- [ ] JS가 필요한 부분 중 구현할 부분이 있다면 자유롭게 구현해보세요.(JS 과제가 아니니까 가볍게 구현하시길 추천해요)
-- [ ] SCSS 등의 CSS 전처리도구를 도입해보세요.
-- [ ] SCSS 컴파일에 Webpack이나 Parcel 같은 번들러를 활용해보세요.
-
-## 손쉬운 이미지 추출 방법
-
-사이트 클론에 필요한 이미지를 좀 더 쉽게 추출하기 위해서 Chrome 확장 프로그램인 [Image Downloader](https://chrome.google.com/webstore/detail/image-downloader/cnpniohnfphhjihaiiggeabnkjhpaldj?hl=ko)를 사용하세요.
-
-1. 원하는 사이트 접속
-1. Image Downloader 확장 프로그램 실행
-1. 다운로드 원하는 이미지 선택
-1. 서브 폴더 이름(Save to subfolder) 명시
-1. 다운로드!
+## 사이트 레이아웃 클론 과제 
+### 실제 사이트
+🔗 https://twitter.com
+### 과제 결과
+🔗 https://remarkable-palmier-bf8451.netlify.app/
+## 리뷰
+### 사이트 선정 이유
+1. SNS 사이트에 관심이 있었고, 이 기회에 레이아웃을 분석해보고 싶다는 마음
+2. 독특한 구조의 트위터 레이아웃이 눈길을 끌었다.
+### 제작기간
+3월 28일 ~ 4월 6일
+### 언어
+- HTML
+- CSS
+### 설명
+- 배운 시멘틱 태그들을 활용해봤습니다. header, section, footer 등....
+- Flex를 최대한 활용해보려고 했습니다.
+  - 하지만 활용 지식이 부족해서 많은 부분에 어려움이 있었습니다! 더 공부해보겠습니다.
+- BEM 방법론을 도입해보려고 했으나 class name을 좋지 않은 방식으로 사용 한 것 같습니다.
+  - 앞으로는 HTML 구조를 처음부터 잘 짜고 나눠놓고 class name을 부여하려고 합니다.
+- footer 에만 링크를 걸어놓았습니다.
+- 반응형, JS를 적용하지 않았습니다.
\ No newline at end of file
diff --git a/css/main.css b/css/main.css
new file mode 100644
index 00000000..7fdfb6d6
--- /dev/null
+++ b/css/main.css
@@ -0,0 +1,444 @@
+/* COMMON */
+body {
+  font-family: 'Noto Sans KR', sans-serif;
+  height: 100vh;
+  background-color: #fff;
+  color: #0F1419;
+  font-weight: 400;
+  font-size: 15px;
+  line-height: 1.4;
+  display: flex;
+  justify-content: center;
+  box-sizing: border-box;
+}
+a {
+  text-decoration: none;
+  color: #0F1419;
+}
+input {
+  display: block;
+  box-sizing: border-box;
+  border: none;
+}
+input:focus {
+  outline: none;
+}
+.profile-image img {
+  height: 100%;
+  width: 100%;
+}
+.profile-image {
+  border-radius: 70%;
+  overflow: hidden;
+  width: 48px;
+  height: 48px;
+}
+.profile-image img {
+  width: 100%;
+  height: 100%;
+}
+.btn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #08a0e9;
+  border: none;
+  cursor: pointer;
+  border-radius: 30px;
+  height: 35px;
+  padding: 0 16px;
+}
+.select-shadow {
+  display: inline-flex;
+  align-items: center;
+  transition: .2s;
+}
+.line--horizonal {
+  width: 1px;
+  height: 100vh;
+  background-color: #efefef;
+}
+.line--vertical {
+  width: 100%;
+  height: 1px;
+  background-color: #efefef;
+}
+.name-card {
+  display: flex;
+  font-size: 15px;
+}
+.name-full {
+  font-weight: 700;
+}
+.name-id {
+  color: #536471;
+}
+.date{
+  color: #536471;
+}
+.card {
+  margin-left: 10px;
+}
+.small_text {
+  color: #536471;
+  font-size: 13px;
+}
+
+
+
+
+/* HEADER */
+header {
+  width: 259px;
+  padding: 0 8px;
+  height: 100%;
+}
+header .inner {
+  background-color: #fff;
+
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  position: fixed;
+  z-index: 1;
+}
+header .inner .menu-container {
+  width: 259px;
+  height: 50px;
+  padding: 4px 0;
+}
+header .inner .menu-container .select-shadow {
+  padding: 12px;
+  border-radius: 25px;
+}
+header .inner .menu-container:hover .select-shadow{
+  background-color: #ccc;
+}
+header .inner .logo .icon {
+  width: 28px;
+}
+header .inner .main-menu .menu-container .select-shadow h2 {
+  font-size: 20px;
+  margin-left: 20px;
+}
+.inner .inner-top .btn {
+  width: 80%;
+  height: 50px;
+  margin: 16px 0;
+  border-radius: 25px;
+}
+.inner .inner-top .btn:hover {
+  background-color: #087bb0;
+}
+.inner .btn > h5 {
+  font-weight: 700;
+  color: #fff;
+  font-size: 17px;
+}
+.inner .inner-bottom .menu-container {
+  height:65px;
+  margin: 12px 0;
+}
+.inner .inner-bottom .menu-container .select-shadow {
+  border-radius: 130px;
+}
+.inner .profile{
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  padding: 12px;
+}
+.inner .profile .profile-image {
+  width: 40px;
+  height: 40px;
+}
+.inner .profile .material-icons {
+  display: block;
+  align-items: right;
+}
+
+
+
+
+/* SECTION */
+section .inner{
+  width: 1000px;
+  display: flex;
+  justify-content: space-between;
+}
+section .inner .main-section {
+  width: 600px;
+  border: #efefef solid 1px ;
+  overflow: scroll;
+
+}
+section .inner .main-section .main-menu {
+  position: fixed;
+  background-color: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(10px);
+  z-index: 5;
+}
+section .inner .main-section .main-menu .menu .menu-box:hover {
+  background-color: rgba(0, 0, 0, 0.2);
+  color: #0F1419;
+  font-weight: 700;
+}
+section .inner .main-section .main-menu .menu-box {
+  height: 53px;
+  padding: 0 16px;
+  line-height: 53px;
+  width: 600px;
+  font-size: 15px;
+  box-sizing: border-box;
+}
+section .inner .main-section .main-menu .home {
+  font-size: 20px;
+  font-weight: 700;
+}
+section .inner .main-section .main-menu .menu {
+  display: flex;
+}
+section .inner .main-section .main-menu .menu .menu-box {
+  width: 50%;
+  text-align: center;
+  color: #536471;
+  transition: .2s;
+}
+
+section .inner .main-section .main-menu .menu .menu-box .menu-text {
+  display: inline-block;
+  height: 100%;
+  box-sizing: border-box;
+}
+section .inner .main-section .main-menu .menu .menu-box:hover .menu-text {
+  border-bottom: 4px solid #08a0e9;
+}
+
+section .inner .main-section .tweets-section .menu-back {
+  height: 106px;
+}
+section .inner .main-section .tweets-section .insert {
+  height: 100px;
+  display: flex;
+  padding: 8px 16px;
+  border-top: #efefef 1px solid;
+  border-bottom: #efefef 1px solid;
+
+}
+section .inner .main-section .tweets-section .insert .profile-image {
+  width: 50px;
+  height: 50px;
+  margin-right: 12px;
+}
+section .inner .main-section .tweets-section .insert .insert-menu {
+  width: 500px;
+}
+section .inner .main-section .tweets-section .insert .insert-menu input {
+  font-size: 20px;
+  width: 100%;
+  padding: 12px 0;
+}
+section .inner .main-section .tweets-section .insert .insert-menu .insert-menu__bottom {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 12px;
+}
+section .inner .main-section .tweets-section .insert .insert-menu .icons .select-shadow {
+  height: 34px;
+  width: 34px;
+  border-radius: 50%;
+  position: relative;
+  justify-content: center;
+}
+section .inner .main-section .tweets-section .insert .insert-menu .icons .select-shadow:hover {
+  background-color: #e5f2f8;
+}
+section .inner .main-section .tweets-section .insert .insert-menu .icons .material-icons {
+  font-size: 20px;
+  color: #08a0e9;
+}
+section .inner .main-section .tweets-section .insert .insert-menu .insert-menu__bottom .btn {
+  opacity: 0.5;
+}
+section .inner .main-section .tweets-section .tweets{
+  box-sizing: border-box;
+}
+section .inner .main-section .tweets-section .tweets .tweet {
+  padding: 12px 16px;
+  display: flex;
+  border-bottom: 1px solid #efefef;
+}
+
+section .inner .main-section .tweets-section .tweets .tweet .tweet_inside {
+  margin-left: 10px;
+  width: 500px;
+}
+section .inner .main-section .tweets-section .tweets .tweet .tweet_inside .name-card{
+  display: flex;
+  justify-content: space-between;
+}
+section .inner .main-section .tweets-section .tweets .tweet .tweet_inside .name-card .material-icons{
+  font-size: 15px;
+  font-weight: 400;
+  
+}
+section .inner .main-section .tweets-section .tweets .tweet .tweet_inside .name-card .card {
+  width: 100%;
+  display: inline-flex;
+  margin: 0;
+}
+section .inner .main-section .tweets-section .tweets .tweet .tweet_inside .name-card .card .info{
+  padding: 0 4px;
+  color: #536471;
+}
+section .inner .main-section .tweets-section .tweets .tweet .tweet_inside .name-card .card .name-full{
+  color: #0F1419;
+}
+section .inner .main-section .tweets-section .tweets .tweet .tweet_inside .pic_container {
+  width: 100%;
+  height: fit-content;
+  border-radius: 10px;
+  border: 1px solid #efefef;
+  overflow: hidden;
+  margin-top: 12px;
+}
+section .inner .main-section .tweets-section .tweets .tweet .tweet_inside .pic_container--four {
+  width: 100%;
+  height: 280px;
+  border-radius: 10px;
+  border: 1px solid #efefef;
+  overflow: hidden;
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 12px;
+}
+section .inner .main-section .tweets-section .tweets .tweet .tweet_inside .pic_container--four .pic_container__indiv--four {
+  width: 50%;
+  height: 50%;
+}
+section .inner .main-section .tweets-section .tweets .tweet .tweet_inside img {
+  width: 100%;
+}
+section .inner .main-section .tweets-section .tweets .tweet .tweet_inside .tweet__inside-icons {
+  display: flex;
+  justify-content: space-between;
+  width: 425px;
+  margin-top: 12px;
+}
+section .inner .main-section .tweets-section .tweets .tweet .tweet_inside .tweet__inside-icons .tweet__inside-icon {
+  display: flex;
+}
+section .inner .main-section .tweets-section .tweets .tweet .tweet_inside .tweet__inside-icons .tweet__inside-icon .number {
+padding: 0 12px;
+}
+section .inner .main-section .tweets-section .tweets .tweet .tweet_inside .tweet__inside-icons .tweet__inside-icon .material-icons {
+  font-size: 18px;
+}
+
+
+
+
+/* TRENDING */
+section .inner .trending {
+  height: 1315px;
+  width: 350px;
+  overflow: hidden;
+}
+section .inner .trending .searching-box {
+  background-color: #fff;
+  height: 53px;
+  width: 350px;
+  position: fixed;
+}
+section .inner .trending .searching {
+  height: 44px;
+  background-color: #efefef;
+  border-radius: 22px;
+  margin: 5px 0 16px 0;
+  display: flex;
+}
+section .inner .trending .searching .searching__icon {
+  padding: 0 12px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: right;
+}
+section .inner .trending .searching .searching__icon .material-icons {
+  color: #536471;
+  height: 16px;
+  width: 16px;
+}
+section .inner .trending .searching input {
+  padding: 12px;
+  font-size: 15px;
+  background-color: rgba(0, 0, 0, 0);
+}
+section .inner .trending .menu-back{
+  height: 63px;
+}
+section .inner .trending .trending_container {
+  background-color: #efefef;
+  border-radius: 20px;
+  margin-bottom: 16px;
+  overflow: hidden;
+}
+section .inner .trending .trending_container .trending-box{
+  padding: 12px 16px;
+  transition: 0.4s;
+}
+section .inner .trending .trending_container .trending-box:hover {
+  background-color: #d7d7d7;
+}
+section .inner .trending .trending_container .trending-box:first-child:hover {
+  background-color: none;
+}
+section .inner .trending .trending_container .trending-box__more{
+  font-size: 15px;
+  color: #08a0e9;
+}
+section .inner .trending .trending_container  h3 {
+  font-weight: 700;
+  font-size: 20px;
+}
+section .inner .trending .trending_container li h4 {
+  font-size: 15px;
+  font-weight: 700;
+}
+section .inner .trending .follow_reco {
+  display: flex;
+  justify-content: space-between;
+}
+section .inner .trending .follow_reco .btn {
+  background-color: #0F1419;
+  color: #fff;
+  font-size: 14px;
+  font-weight: 700;
+}
+
+
+
+/* FOOTER */
+section .inner .trending footer {
+  padding: 0 16px;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  line-height: 1;
+}
+section .inner .trending footer .footer_href {
+  margin: 2px 0;
+  padding-right: 12px;
+}
+section .inner .trending footer a{
+  box-sizing: border-box;
+}
+section .inner .trending footer a:hover {
+  border-bottom: 1px solid #536471;
+}
+section .inner .trending footer .material-icons {
+  color: #536471;
+  font-size: 13px;
+}
diff --git a/favicon.ico b/favicon.ico
new file mode 100644
index 00000000..0d0d4581
Binary files /dev/null and b/favicon.ico differ
diff --git a/favicon.png b/favicon.png
new file mode 100644
index 00000000..eb76313e
Binary files /dev/null and b/favicon.png differ
diff --git a/images/.DS_Store b/images/.DS_Store
new file mode 100644
index 00000000..d92bae90
Binary files /dev/null and b/images/.DS_Store differ
diff --git a/images/AESPA_profile.jpg b/images/AESPA_profile.jpg
new file mode 100644
index 00000000..5101d7c0
Binary files /dev/null and b/images/AESPA_profile.jpg differ
diff --git a/images/IVE_profile.jpg b/images/IVE_profile.jpg
new file mode 100644
index 00000000..e2547e38
Binary files /dev/null and b/images/IVE_profile.jpg differ
diff --git a/images/LESSERAFIM_profile.jpg b/images/LESSERAFIM_profile.jpg
new file mode 100644
index 00000000..db7970b5
Binary files /dev/null and b/images/LESSERAFIM_profile.jpg differ
diff --git a/images/NCT_profile.jpg b/images/NCT_profile.jpg
new file mode 100644
index 00000000..2bf4f4c8
Binary files /dev/null and b/images/NCT_profile.jpg differ
diff --git a/images/NJ_profile.jpg b/images/NJ_profile.jpg
new file mode 100644
index 00000000..26176d52
Binary files /dev/null and b/images/NJ_profile.jpg differ
diff --git a/images/SVT_profile.jpg b/images/SVT_profile.jpg
new file mode 100644
index 00000000..296196f6
Binary files /dev/null and b/images/SVT_profile.jpg differ
diff --git a/images/default_profile.png b/images/default_profile.png
new file mode 100644
index 00000000..7bf03a12
Binary files /dev/null and b/images/default_profile.png differ
diff --git a/images/tweets/.DS_Store b/images/tweets/.DS_Store
new file mode 100644
index 00000000..a0f28912
Binary files /dev/null and b/images/tweets/.DS_Store differ
diff --git a/images/tweets/NCT1.jpeg b/images/tweets/NCT1.jpeg
new file mode 100644
index 00000000..8b63aeb2
Binary files /dev/null and b/images/tweets/NCT1.jpeg differ
diff --git a/images/tweets/NJ1.jpeg b/images/tweets/NJ1.jpeg
new file mode 100644
index 00000000..817beecc
Binary files /dev/null and b/images/tweets/NJ1.jpeg differ
diff --git a/images/tweets/T1_P1.jpeg b/images/tweets/T1_P1.jpeg
new file mode 100644
index 00000000..e1c8f7f9
Binary files /dev/null and b/images/tweets/T1_P1.jpeg differ
diff --git a/images/tweets/T1_P2.jpeg b/images/tweets/T1_P2.jpeg
new file mode 100644
index 00000000..3993c55d
Binary files /dev/null and b/images/tweets/T1_P2.jpeg differ
diff --git a/images/tweets/T1_P3.jpeg b/images/tweets/T1_P3.jpeg
new file mode 100644
index 00000000..ca46988a
Binary files /dev/null and b/images/tweets/T1_P3.jpeg differ
diff --git a/images/tweets/T1_P4.jpeg b/images/tweets/T1_P4.jpeg
new file mode 100644
index 00000000..2c49ca20
Binary files /dev/null and b/images/tweets/T1_P4.jpeg differ
diff --git a/images/twitter_icon.png b/images/twitter_icon.png
new file mode 100644
index 00000000..eb76313e
Binary files /dev/null and b/images/twitter_icon.png differ
diff --git a/index.html b/index.html
new file mode 100644
index 00000000..7d89bd80
--- /dev/null
+++ b/index.html
@@ -0,0 +1,552 @@
+<!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>트위터</title>
+  <!-- 구글 머터리얼 아이콘 -->
+  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+  <!-- 구글 폰트  -->
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap" rel="stylesheet">
+  <!-- 리셋 css -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
+  <link rel="stylesheet" href="/css/main.css" />
+</head>
+
+<body>
+  <!-- 헤더 -->
+  <header>
+    <div class="inner">
+      <div class="inner-top">
+        <div class="logo">
+          <div class="menu-container">
+              <a href="/" class="select-shadow">
+                <img src="./images/twitter_icon.png" alt="TWITTER ICON" class="icon image"/>
+              </a>
+          </div>
+        </div>
+
+        <div class="main-menu">
+          <div class="menu-container">
+            <div class="select-shadow">
+              <div class="material-icons">home</div>
+              <h2>홈</h2>
+            </div>
+          </div>
+          <div class="menu-container">
+            <div class="select-shadow">
+              <div class="material-icons">tag</div>
+              <h2>탐색하기</h2>
+            </div>
+          </div>
+          <div class="menu-container">
+            <div class="select-shadow">
+              <div class="material-icons">notifications</div>
+              <h2>알림</h2>
+            </div>
+          </div>
+          <div class="menu-container">
+            <div class="select-shadow">
+              <div class="material-icons">mail</div>
+              <h2>쪽지</h2>
+            </div>
+          </div>
+          <div class="menu-container">
+            <div class="select-shadow">
+              <div class="material-icons">turned_in</div>
+              <h2>북마크</h2>
+            </div>
+          </div>
+          <div class="menu-container">
+            <div class="select-shadow">
+                <div class="material-icons">person</div>
+               <h2>프로필</h2>
+              </div>
+          </div>
+          <div class="menu-container">
+            <div class="select-shadow">
+              <div class="material-icons">more_horiz</div>
+              <h2>더보기</h2>
+            </div>
+          </div>
+        </div>
+        <a href="javascript:void(0)" class="btn">
+          <h5>트윗하기</h5>
+        </a>  
+        
+      </div>
+
+      <div class="inner-bottom">
+        <div class="menu-container">
+          <div class="profile select-shadow">
+            <div class="name-card">
+              <div class="profile-image">
+                <img src="/images/default_profile.png" alt="PROFILE" />
+              </div>
+              <div class="card">
+                <h5 class="name-full">
+                  임승이
+                </h5>
+                <h5 class="name-id">
+                  @idey
+                </h5>  
+              </div>
+            </div>
+            <div class="material-icons">more_horiz</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    </div>
+    
+  </header>
+
+
+
+  <section>
+    <!-- 섹션 -->
+    <div class="inner">
+
+      <div class="main-section">
+        <div class="main-menu">
+          <a href="/">
+            <div class="home menu-box">홈</div>
+          </a>
+          <div class="menu">
+            <div class="menu-box">
+              <div class="menu-text">추천</div>
+            </div>
+            <div class="menu-box">
+              <div class="menu-text">팔로우 중</div>
+            </div>
+          </div>
+        </div>
+
+        <div class="tweets-section">
+          <div class="menu-back"></div>
+          <div class="insert">
+            <div class="profile-image">
+              <img src="/images/default_profile.png" alt="PROFILE"/>
+            </div>
+            <div class="insert-menu">
+              <input type="text" placeholder="무슨 일이 일어나고 있나요?"/>
+              <div class="insert-menu__bottom">
+                <div class="icons">
+                  <div class="select-shadow">
+                    <span class="material-icons">image</span>
+                  </div>
+                  <div class="select-shadow">
+                    <span class="material-icons">gif_box</span>
+                  </div>
+                  <div class="select-shadow">
+                    <span class="material-icons">mood</span>
+                  </div>
+                  <div class="select-shadow">
+                    <span class="material-icons">date_range</span>
+                  </div>
+                  <div class="select-shadow">
+                    <span class="material-icons">place</span>
+                  </div>
+                </div>
+                <button class="btn">
+                  <h5>트윗하기</h5>
+                </button>
+              </div>
+            </div>
+          </div>
+          <div class="tweets">
+            <div class="tweet">
+              <div class="profile-image">
+                <img src="/images/NCT_profile.jpg" alt="Lesserafim PROFILE" />
+              </div>
+              <div class="tweet_inside">
+                <div class="name-card">
+                  <div class="card">
+                    <h5 class="name-full info">
+                      NCT DREAM 
+                    </h5>
+                    <h5 class="info">
+                      @@NCTsmtown_DREAM ·  
+                    </h5>
+                    <h5 class="info">
+                      4h
+                    </h5>
+                  </div>
+                  <span class="material-icons">more_horiz</span>
+                </div>
+                <div class="tweet__inside">
+                  <span>
+                    시즈니이이이 <br>
+                    오늘 미주에서 첫번째 공연 재밌게 잘 마무리했어요!!! <br>
+                    뉴어크 시즈니들의 많은 호응과 에너지로 재밌게 미주 첫 공연 잘 마무리 한거같아요!! 뉴어크 시즈니이이이!!! 고마워요💚<br>
+                    Fullsun<br>
+                    <br>
+                    #NCTDREAM #HAECHAN <br>
+                    #THEDREAMSHOW2 #NEWARK <br>
+                    #NCTDREAM_THEDREAMSHOW2_in_US <br>
+                  </span>
+                  <div class="pic_container_indiv">
+                    <div class="pic_container">
+                      <img src="./images/tweets/NCT1.jpeg" alt="nctdream_photo">
+                    </div>
+                  </div>
+                  <div class="tweet__inside-icons">
+                    <div class="tweet__inside-icon small_text">
+                      <span class="material-icons">sms</span>
+                      <span class="number">850</span>
+                    </div>
+                    <div class="tweet__inside-icon small_text">
+                      <span class="material-icons">repeat</span>
+                      <span class="number">22.6만</span>
+                    </div>
+                    <div class="tweet__inside-icon small_text">
+                      <span class="material-icons">favorite_border</span>
+                      <span class="number">51.3만</span>
+                    </div>
+                    <div class="tweet__inside-icon small_text">
+                      <span class="material-icons">signal_cellular_alt</span>
+                      <span class="number">596.3만</span>
+                    </div>
+                    <div class="tweet__inside-icon small_text">
+                      <span class="material-icons">ios_share</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="tweet">
+              <div class="profile-image">
+                <img src="/images/NJ_profile.jpg" alt="Lesserafim PROFILE" />
+              </div>
+              <div class="tweet_inside">
+                <div class="name-card">
+                  <div class="card">
+                    <h5 class="name-full info">
+                      NewJeans 
+                    </h5>
+                    <h5 class="info">
+                      @NewJeans_ADOR ·  
+                    </h5>
+                    <h5 class="info">
+                      23h
+                    </h5>
+                  </div>
+                  <span class="material-icons">more_horiz</span>
+                </div>
+                <div class="tweet__inside">
+                  <span>
+                    [Music🎵]<br>
+                    Hi Bunnies, you can now listen to 'Zero' on Girl Krush playlist <br>
+                    @Spotify<br>
+                    <br>
+                    <br>
+                   🔗https://open.spotify.com/playlist/37i9dQZF1DXbSWYCNwaARB?si=6df16644e2484107 <br>
+                    <br>
+                   #NewJeans #뉴진스
+                  </span>
+                  <div class="pic_container_indiv">
+                    <div class="pic_container">
+                      <img src="./images/tweets/NJ1.jpeg" alt="NewJeans Pic">
+                    </div>
+                  </div>
+                  <div class="tweet__inside-icons">
+                    <div class="tweet__inside-icon small_text">
+                      <span class="material-icons">sms</span>
+                      <span class="number">41</span>
+                    </div>
+                    <div class="tweet__inside-icon small_text">
+                      <span class="material-icons">repeat</span>
+                      <span class="number">1,954</span>
+                    </div>
+                    <div class="tweet__inside-icon small_text">
+                      <span class="material-icons">favorite_border</span>
+                      <span class="number">16.2만</span>
+                    </div>
+                    <div class="tweet__inside-icon small_text">
+                      <span class="material-icons">signal_cellular_alt</span>
+                      <span class="number">454만</span>
+                    </div>
+                    <div class="tweet__inside-icon small_text">
+                      <span class="material-icons">ios_share</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="tweet">
+              <div class="profile-image">
+                <img src="/images/LESSERAFIM_profile.jpg" alt="Lesserafim PROFILE" />
+              </div>
+              <div class="tweet_inside">
+                <div class="name-card">
+                  <div class="card">
+                    <h5 class="name-full info">
+                      르세라핌 
+                    </h5>
+                    <h5 class="info">
+                      @IM_LESSERAFIM ·  
+                    </h5>
+                    <h5 class="info">
+                      3월 25일
+                    </h5>
+                  </div>
+                  <span class="material-icons">more_horiz</span>
+                </div>
+                <div class="tweet__inside">
+                  <span>
+                    윤진언니랑 데이트😙 <br>
+                    어머! 우리잖아!! 👀 <br>
+                    매장에서도 사이좋게 마주보고 있네ㅋㅋㅋㅋㅋ <br>
+                    #LE_SSERAFIM #KAZUHA<br>
+                    #ルセラフィム #カズハ
+                  </span>
+                  <div class="pic_container--four">
+                    <div class="pic_container__indiv--four">
+                      <img src="./images/tweets/T1_P1.jpeg" alt="lesserafim_photo1">
+                    </div>
+                    <div class="pic_container__indiv--four">
+                      <img src="./images/tweets/T1_P2.jpeg" alt="lesserafim_photo2">
+                    </div>
+                    <div class="pic_container__indiv--four">
+                      <img src="./images/tweets/T1_P3.jpeg" alt="lesserafim_photo3">
+                    </div>
+                    <div class="pic_container__indiv--four">
+                      <img src="./images/tweets/T1_P4.jpeg" alt="lesserafim_photo4">
+                    </div>
+                  </div>
+                  <div class="tweet__inside-icons">
+                    <div class="tweet__inside-icon small_text">
+                      <span class="material-icons">sms</span>
+                      <span class="number">566</span>
+                    </div>
+                    <div class="tweet__inside-icon small_text">
+                      <span class="material-icons">repeat</span>
+                      <span class="number">1.5만</span>
+                    </div>
+                    <div class="tweet__inside-icon small_text">
+                      <span class="material-icons">favorite_border</span>
+                      <span class="number">5.4만</span>
+                    </div>
+                    <div class="tweet__inside-icon small_text">
+                      <span class="material-icons">signal_cellular_alt</span>
+                      <span class="number">125.4만</span>
+                    </div>
+                    <div class="tweet__inside-icon small_text">
+                      <span class="material-icons">ios_share</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      
+      <div class="trending">
+        <div class="searching-box">
+          <div class="searching">
+            <div class="searching__icon">
+              <div class="material-icons">search</div>
+            </div>
+            <input type="text" placeholder="트위터 검색" />
+          </div>  
+        </div>
+        <div class="menu-back"></div>
+        <div class="trending_container">
+          <div class="trending_container__head trending-box">
+            <h3>대한민국의 트렌드</h3>
+          </div>
+          <ul>
+            <li>
+              <a href="javascript:void(0)">
+                <div class="trending-box__trend trending-box">
+                  <p class="small_text">1 · K-POP · 실시간 트렌드</p>
+                  <h4>#LikeCrazyNo1Hot100</h4>
+                  <p class="small_text">779,468 트윗</p>
+                </div>
+              </a>
+            </li>
+            <li>
+              <a href="javascript:void(0)">
+                <div class="trending-box__trend trending-box">
+                  <p class="small_text">2 · K-POP · 실시간 트렌드</p>
+                  <h4>#JiminNo1Hot100</h4>
+                  <p class="small_text">531,503 트윗</p>
+                </div>
+              </a>
+            </li>
+            <li>
+              <a href="javascript:void(0)">
+                <div class="trending-box__trend trending-box">
+                  <p class="small_text">3 · 엔터테인먼트 · 실시간 트렌드</p>
+                  <h4>스파이더맨</h4>
+                  <p class="small_text">9,712 트윗</p>
+                </div>
+              </a>
+            </li>
+            <li>
+              <a href="javascript:void(0)">
+                <div class="trending-box__trend trending-box">
+                  <p class="small_text">4 · 엔터테인먼트 · 실시간 트렌드</p>
+                  <h4>슬램덩크</h4>
+                  <p class="small_text">1,400 트윗</p>
+                </div>
+              </a>
+            </li>
+            <li>
+              <a href="javascript:void(0)">
+                <div class="trending-box__trend trending-box">
+                  <p class="small_text">5 · 엔터테인먼트 · 실시간 트렌드</p>
+                  <h4>스뉴유</h4>
+                  <p class="small_text">2,314 트윗</p>
+                </div>
+              </a>
+            </li>
+            <li>
+              <a href="javascript:void(0)">
+                <div class="trending-box__trend trending-box">
+                  <p class="small_text">6 · 실시간 트렌드</p>
+                  <h4>패스트캠퍼스</h4>
+                  <p class="small_text">7,312 트윗</p>
+                </div>
+              </a>
+            </li>
+            <li>
+              <a href="javascript:void(0)">
+                <div class="trending-box__trend trending-box">
+                  <p class="small_text">7 · 실시간 트렌드</p>
+                  <h4>고양이</h4>
+                  <p class="small_text">13,864 트윗</p>
+                </div>
+              </a>
+            </li>
+            <li>
+              <a href="javascript:void(0)">
+                <div class="trending-box__trend trending-box">
+                  <p class="small_text">8 · K-POP · 실시간 트렌드</p>
+                  <h4>기리보이</h4>
+                  <p class="small_text">9,712 트윗</p>
+                </div>
+              </a>
+            </li>
+            <li>
+              <a href="javascript:void(0)">
+                <div class="trending-box__trend trending-box">
+                  <p class="small_text">9 · K-POP · 실시간 트렌드</p>
+                  <h4>#PLAVE_ASTERUM</h4>
+                  <p class="small_text">18,938 트윗</p>
+                </div>
+              </a>
+            </li>
+          </ul>
+          <a href="javascript:void(0)">
+            <div class="trending-box trending-box__more">더 보기</div>
+          </a>
+        </div>
+        <div class="follow trending_container">
+          <div class="trending-box">
+            <h3>팔로우 추천</h3>
+          </div>
+          <ul>
+            <li>
+              <a href="javascript:void(0)">
+                <div class="trending-box follow_reco">
+                  <div class="name-card">
+                    <div class="profile-image">
+                      <img src="/images/SVT_profile.jpg" alt="PROFILE" />
+                    </div>
+                    <div class="card">
+                      <h5 class="name-full">
+                        세븐틴(SEVENTEEN)
+                      </h5>
+                      <h5 class="name-id">
+                        @pledis_17
+                      </h5>  
+                    </div>
+                  </div>
+                  <button class="btn">팔로우</button>
+                </div>
+              </a>
+            </li>
+            <li>
+              <a href="javascript:void(0)">
+                <div class="trending-box follow_reco">
+                  <div class="name-card">
+                    <div class="profile-image">
+                      <img src="/images/IVE_profile.jpg" alt="PROFILE" />
+                    </div>
+                    <div class="card">
+                      <h5 class="name-full">
+                        IVE OFFICIAL
+                      </h5>
+                      <h5 class="name-id">
+                        @IVEstarship
+                      </h5>  
+                    </div>
+                  </div>
+                  <button class="btn">팔로우</button>
+                </div>
+              </a>
+            </li>
+            <li>
+              <a href="javascript:void(0)">
+                <div class="trending-box follow_reco">
+                  <div class="name-card">
+                    <div class="profile-image">
+                      <img src="/images/AESPA_profile.jpg" alt="PROFILE" />
+                    </div>
+                    <div class="card">
+                      <h5 class="name-full">
+                        aespa
+                      </h5>
+                      <h5 class="name-id">
+                        @aespa_official
+                      </h5>  
+                    </div>
+                  </div>
+                  <button class="btn">팔로우</button>
+                </div>
+              </a>
+            </li>
+          </ul>
+
+          <a href="javascript:void(0)">
+            <div class="trending-box trending-box__more">더 보기</div>
+          </a>
+        </div>
+
+
+        <footer>
+          <div class="footer_href">
+            <a href="https://twitter.com/ko/tos" class="small_text">이용약관</a>
+          </div>
+          <div class="footer_href">
+            <a href="https://twitter.com/ko/privacy" class="small_text">개인정보 처리방침</a>
+          </div>
+          <div class="footer_href">
+            <a href="https://help.twitter.com/ko/rules-and-policies/twitter-cookies" class="small_text">쿠키정책</a>
+          </div>
+          <div class="footer_href">
+            <a href="https://help.twitter.com/ko/resources/accessibility" class="small_text">접근성</a>
+          </div>
+          <div class="footer_href">
+            <a href="https://business.twitter.com/en/help/troubleshooting/how-twitter-ads-work.html?ref=web-twc-ao-gbl-adsinfo&utm_source=twc&utm_medium=web&utm_campaign=ao&utm_content=adsinfo" class="small_text">광고정보</a>
+          </div>
+          <div class="footer_href">
+            <a href="https://business.twitter.com/en/help/troubleshooting/how-twitter-ads-work.html?ref=web-twc-ao-gbl-adsinfo&utm_source=twc&utm_medium=web&utm_campaign=ao&utm_content=adsinfo" class="small_text">더보기</a>
+            <span class="material-icons">more_horiz</span>
+          </div>
+          <p class="small_text">© 2023 Twitter, Inc.</p>
+        </footer>
+
+      </div>
+      
+    </div>
+  </section>
+</body>
+</html>
\ No newline at end of file