diff --git a/README.md b/README.md
index cc6a3b23..da4e89b4 100644
--- a/README.md
+++ b/README.md
@@ -1,45 +1,12 @@
-[참고 내용]
-
-👀 자신이 원하는 사이트 레이아웃 클론
-원하는 사이트(페이지)를 자유롭게 선택하고 레이아웃을 클론 코딩하세요.
-평소에 도전해 보고 싶었거나 혹은 자신의 수준에 맞는 사이트(페이지)를 선택하세요.
-과제 수행 및 리뷰 기간은 별도 공지를 참고하세요!
-
-과제 수행 및 제출 방법
-
-1. 현재 저장소를 로컬에 클론(Clone)합니다.
-2. 자신의 본명으로 브랜치를 생성합니다.(구분 가능하도록 본명을 꼭 파스칼케이스로 표시하세요, git branch KDT0_이름)
-3. 자신의 본명 브랜치에서 과제를 수행합니다.
-4. 과제 수행이 완료되면, 자신의 본명 브랜치를 원격 저장소에 푸시(Push)합니다.(main 브랜치에 푸시하지 않도록 꼭 주의하세요, git push origin KDT0_이름)
-5. 저장소에서 main 브랜치를 대상으로 Pull Request 생성하면, 과제 제출이 완료됩니다!(E.g, main <== KDT0_이름)
-
-
-- main 혹은 다른 사람의 브랜치로 절대 병합하지 않도록 주의하세요!
-- Pull Request에서 보이는 설명을 다른 사람들이 이해하기 쉽도록 꼼꼼하게 작성하세요!
-- Pull Request에서 과제 제출 후 절대 병합(Merge)하지 않도록 주의하세요!
-- 과제 수행 및 제출 과정에서 문제가 발생한 경우, 바로 담당 멘토나 강사에서 얘기하세요!
-
-필수 요구사항
-
-- 과제에 대한 설명을 포함한 README.md 파일을 제공하세요!
-- 과제 결과와 비교할 수 있는 실제 사이트(페이지)의 주소를 명시하세요!
-- 과정에서 사용한 프로젝트 폴더/파일이 모두 포함돼야 합니다, 일부 파일만 제출하지 마세요!
-- 실제 서비스로 배포하고 접근 가능한 링크를 추가해야 합니다.
-
-선택 요구사항
-
-- < header >, < section > 등 시멘틱 태그를 최대한 활용해보세요.
-- 실제 사이트의 레거시 코드 활용보단 최신의 CSS Flex 혹은 Grid 등을 활용해보세요.
-- 부분적으로 BEM 방법론을 도입해보세요.
-- JS가 필요한 부분은 되도록 생략하되 이유를 명시해보세요.(CSS로 대체 가능한지 피드백이 있을 수 있겠죠?!)
-- JS가 필요한 부분 중 구현할 부분이 있다면 자유롭게 구현해보세요.(JS 과제가 아니니까 가볍게 구현하시길 추천해요)
-
-손쉬운 이미지 추출 방법
-
-사이트 클론에 필요한 이미지를 좀 더 쉽게 추출하기 위해서 Chrome 확장 프로그램인 Image Downloader를 사용하세요.
-
-1. 원하는 사이트 접속
-2. Image Downloader 확장 프로그램 실행
-3. 다운로드 원하는 이미지 선택
-4. 서브 폴더 이름(Save to subfolder) 명시
-5. 다운로드!
+1. 클론한 사이트
+    - https://www.ubereats.com/
+2. 데모 링크
+    - https://ubereats-clone-coding.netlify.app/
+3. 구현한 내용
+    - 자리는 고정되었지만 스크롤을 내리면 배경색이 바뀌는 Nav bar. mouse를 hover하면 색이 바뀌는 버튼과 input이 detect되면 밑에 줄이 생기는 input field. 누르면 dropdown menu가 생기는 버튼(다른 곳을 클릭하면 사라짐). Multicol을 사용해 여러 column으로 나뉘는 리스트.
+4. 사용한 라이브러리 및 스택
+    - 이미지는 Image Downloader를 사용했고 스크랩 되지 않은 이미지는 구글링이나 스크린샷으로 대체했다. 아이콘은 fontawesome이라는 사이트를 통해 가져왔다.
+5. 아쉬운 점, 느낀점
+    - 시간이 촉박해 맵을 라이브러리로 구현하지 못하고 이미지 파일로 써서 아쉽다. 또한 input field도 상세하게 구현을 하지 못해서 아쉽다. 프로젝트 경험이 거의 없어 초반에 감을 잡는데 시간이 좀 걸렸는데 어느 정도 익숙해진 후에는 작업 속도가 급속도로 빨라진 것을 보아 시간 조절만 잘 했다면 훨씬 더 완성도 높은 사이트를 구현 할수 있었을텐데 아쉽다. 앞으로는 더욱 속도를 내서 과제 및 프로젝트를 진행하고 질문을 하는 것을 두려워 하지 않는 자세를 가져야겠다.
+6. 오류 해결법
+    - Flexbox 디버깅을 위해 구글링을 많이 했는데 새로운 방식에 대한 모색은 Stack Overflow, 단순 에러 디버깅은 시행착오를 통해 직접 알아내거나 ChatGPT의 도움을 받았다. 또한 조원들과도 상의해서 모르는 것은 물어보고 답변도 해주며 함께 공부 해나갔다.
\ No newline at end of file
diff --git a/UberEats/UberEatsImages01.png b/UberEats/UberEatsImages01.png
new file mode 100644
index 00000000..65f4e014
Binary files /dev/null and b/UberEats/UberEatsImages01.png differ
diff --git a/UberEats/UberEatsImages02.png b/UberEats/UberEatsImages02.png
new file mode 100644
index 00000000..d19554bc
Binary files /dev/null and b/UberEats/UberEatsImages02.png differ
diff --git a/UberEats/UberEatsImages03.svg b/UberEats/UberEatsImages03.svg
new file mode 100644
index 00000000..27af29e9
--- /dev/null
+++ b/UberEats/UberEatsImages03.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160.37 160.37"><g id="Layer_2" data-name="Layer 2"><g id="Squircles"><rect width="160.37" height="160.37" rx="31.59" style="fill:#142328"/><path d="M76.86 107.45a8.33 8.33 0 1 0-8.33 8.23 8.22 8.22 0 0 0 8.33-8.23M83.66 94v27h-6.93v-2.43a13.66 13.66 0 0 1-8.73 3.04 14.17 14.17 0 1 1 0-28.33 13.72 13.72 0 0 1 8.77 3.12V94Zm23 20.84h-5.21c-1.59 0-2.61-.69-2.61-2.12v-12.64h7.82V94h-7.79v-7.7h-7V94h-5.26v6.11h5.27v14.35c0 3.62 2.61 6.49 7.31 6.49h7.5Zm15.79 6.8c8 0 12.52-3.74 12.52-8.92 0-3.68-2.67-6.43-8.26-7.61l-5.91-1.19c-3.43-.62-4.51-1.25-4.51-2.49 0-1.63 1.65-2.63 4.7-2.63 3.3 0 5.72.88 6.42 3.87h6.93c-.39-5.61-4.52-9.36-12.91-9.36-7.24 0-12.33 2.94-12.33 8.61 0 3.93 2.8 6.49 8.84 7.74l6.61 1.5c2.6.5 3.3 1.18 3.3 2.24 0 1.69-2 2.75-5.15 2.75-4 0-6.29-.87-7.18-3.87h-7c1 5.62 5.28 9.36 13.92 9.36M25.38 84.43h26.13v6.23H32.44v8.93H51v6H32.44v9h19.07v6.24H25.38Z" style="fill:#06c167"/><path d="M134.37 52.81v-4.9h-1.86A7.28 7.28 0 0 0 126 51.4v-3.28h-5.31v26.59h5.36V59.59c0-4.12 2.55-6.78 6.06-6.78ZM95.81 59a8.42 8.42 0 0 1 16.52 0Zm8.39-11.4a13.8 13.8 0 0 0-13.92 13.81c0 7.93 6.27 13.87 14.4 13.87a14.26 14.26 0 0 0 11.68-5.68l-3.88-2.82a9.36 9.36 0 0 1-7.8 3.92 9 9 0 0 1-9-7.56h22v-1.73c0-7.92-5.73-13.81-13.54-13.81M73.56 70.7a9.23 9.23 0 1 1 9.29-9.23 9.25 9.25 0 0 1-9.29 9.23M59 74.71h5.31v-3.34a13.66 13.66 0 0 0 9.67 4 13.9 13.9 0 1 0 0-27.79 13.55 13.55 0 0 0-9.62 4V38.21H59Zm-18.9-4.28c5.15 0 9.13-3.91 9.13-9.69V38.21h5.58v36.5h-5.53v-3.39a13.54 13.54 0 0 1-9.82 4c-8 0-14.08-5.69-14.08-14.29V38.21H31v22.53c0 5.89 3.93 9.69 9.14 9.69" style="fill:#f6f0ea"/></g></g></svg>
\ No newline at end of file
diff --git a/UberEats/UberEatsImages04.svg b/UberEats/UberEatsImages04.svg
new file mode 100644
index 00000000..1eef5f0d
--- /dev/null
+++ b/UberEats/UberEatsImages04.svg
@@ -0,0 +1 @@
+<svg width="134" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_227_7066)" fill="#000"><path d="M70.629.334H85.72V3.98H74.705v5.215h10.722v3.537H74.705v5.288H85.72v3.647H70.629V.334Zm56.101 21.734c4.627 0 7.234-2.188 7.234-5.215 0-2.151-1.543-3.756-4.774-4.449l-3.415-.693c-1.983-.364-2.607-.729-2.607-1.458 0-.948.955-1.532 2.718-1.532 1.909 0 3.305.51 3.709 2.26h4.002c-.22-3.281-2.607-5.47-7.454-5.47-4.186 0-7.124 1.715-7.124 5.033 0 2.298 1.616 3.793 5.104 4.522l3.819.875c1.505.292 1.909.693 1.909 1.313 0 .985-1.138 1.605-2.974 1.605-2.313 0-3.635-.51-4.149-2.261h-4.04c.588 3.282 3.048 5.47 8.042 5.47Zm-9.124-3.975h-3.011c-.918 0-1.506-.401-1.506-1.24V9.487h4.517V5.913h-4.517V1.428h-4.039v4.485h-3.048v3.574h3.048v8.387c0 2.115 1.505 3.792 4.223 3.792h4.333v-3.573Zm-13.309-12.18v15.754h-4.002v-1.422a7.84 7.84 0 0 1-5.068 1.823c-4.737 0-8.445-3.683-8.445-8.278 0-4.595 3.709-8.278 8.445-8.278a7.84 7.84 0 0 1 5.068 1.824V5.914h4.002Zm-3.929 7.877a4.771 4.771 0 0 0-4.81-4.814 4.795 4.795 0 0 0-4.81 4.814 4.795 4.795 0 0 0 4.81 4.813c2.68 0 4.81-2.115 4.81-4.813ZM8.982 19.167c2.976 0 5.277-2.286 5.277-5.669V.333h3.223v21.332H14.29v-1.98c-1.442 1.492-3.437 2.346-5.677 2.346-4.602 0-8.132-3.322-8.132-8.35V.334h3.223v13.165c0 3.443 2.27 5.668 5.278 5.668Zm10.893 2.498h3.069v-1.95a7.836 7.836 0 0 0 5.584 2.317c4.603 0 8.224-3.627 8.224-8.107 0-4.51-3.62-8.136-8.224-8.136a7.764 7.764 0 0 0-5.554 2.316V.334h-3.1v21.332Zm8.439-2.346a5.377 5.377 0 0 1-5.401-5.394 5.377 5.377 0 0 1 5.4-5.394 5.37 5.37 0 0 1 5.37 5.394c0 2.987-2.423 5.394-5.37 5.394Zm17.705-13.5c-4.572 0-8.04 3.687-8.04 8.075 0 4.632 3.622 8.107 8.316 8.107 2.854 0 5.186-1.25 6.751-3.322l-2.24-1.646c-1.166 1.554-2.7 2.286-4.51 2.286-2.64 0-4.757-1.89-5.187-4.419h12.735v-1.006c0-4.632-3.314-8.075-7.825-8.075Zm-4.848 6.643c.553-2.377 2.486-3.961 4.787-3.961 2.302 0 4.235 1.584 4.757 3.961H41.17ZM63.45 8.866V6.002h-1.074c-1.718 0-2.976.792-3.743 2.042v-1.92h-3.069v15.542h3.1v-8.838c0-2.407 1.472-3.962 3.497-3.962h1.289Z"/></g><defs><clipPath id="clip0_227_7066"><path fill="#fff" transform="translate(.481 .333)" d="M0 0h133.494v27.429H0z"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/UberEats/UberEatsImages05.png b/UberEats/UberEatsImages05.png
new file mode 100644
index 00000000..020a9aa8
Binary files /dev/null and b/UberEats/UberEatsImages05.png differ
diff --git a/UberEats/UberEatsImages06.webp b/UberEats/UberEatsImages06.webp
new file mode 100644
index 00000000..41a5d67a
Binary files /dev/null and b/UberEats/UberEatsImages06.webp differ
diff --git a/UberEats/UberEatsImages07.webp b/UberEats/UberEatsImages07.webp
new file mode 100644
index 00000000..bf22eb10
Binary files /dev/null and b/UberEats/UberEatsImages07.webp differ
diff --git a/UberEats/UberEatsImages08.webp b/UberEats/UberEatsImages08.webp
new file mode 100644
index 00000000..4f474085
Binary files /dev/null and b/UberEats/UberEatsImages08.webp differ
diff --git a/UberEats/UberEatsImages09.svg b/UberEats/UberEatsImages09.svg
new file mode 100644
index 00000000..ee7541b8
--- /dev/null
+++ b/UberEats/UberEatsImages09.svg
@@ -0,0 +1 @@
+<svg version="1.1" id="US_UK_Download_on_the" xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="135" height="40" xml:space="preserve"><path fill="#A6A6A6" d="M130.197 40H4.729A4.74 4.74 0 0 1 0 35.267V4.726A4.733 4.733 0 0 1 4.729 0h125.468C132.803 0 135 2.12 135 4.726v30.541c0 2.605-2.197 4.733-4.803 4.733z"/><path d="M134.032 35.268a3.83 3.83 0 0 1-3.834 3.83H4.729a3.835 3.835 0 0 1-3.839-3.83V4.725A3.84 3.84 0 0 1 4.729.89h125.468a3.834 3.834 0 0 1 3.834 3.835l.001 30.543z"/><path d="M30.128 19.784c-.029-3.223 2.639-4.791 2.761-4.864-1.511-2.203-3.853-2.504-4.676-2.528-1.967-.207-3.875 1.177-4.877 1.177-1.022 0-2.565-1.157-4.228-1.123-2.14.033-4.142 1.272-5.24 3.196-2.266 3.923-.576 9.688 1.595 12.859 1.086 1.553 2.355 3.287 4.016 3.226 1.625-.067 2.232-1.036 4.193-1.036 1.943 0 2.513 1.036 4.207.997 1.744-.028 2.842-1.56 3.89-3.127 1.255-1.78 1.759-3.533 1.779-3.623-.041-.014-3.387-1.291-3.42-5.154zm-3.2-9.478c.874-1.093 1.472-2.58 1.306-4.089-1.265.056-2.847.875-3.758 1.944-.806.942-1.526 2.486-1.34 3.938 1.421.106 2.88-.717 3.792-1.793zm26.717 21.198h-2.271l-1.244-3.909h-4.324l-1.185 3.909H42.41l4.284-13.308h2.646l4.305 13.308zm-3.89-5.549L48.63 22.48c-.119-.355-.342-1.191-.671-2.507h-.04a96.75 96.75 0 0 1-.632 2.507l-1.105 3.475h3.573zm14.907.633c0 1.632-.441 2.922-1.323 3.869-.79.843-1.771 1.264-2.942 1.264-1.264 0-2.172-.454-2.725-1.362h-.04v5.055H55.5V25.067c0-1.026-.027-2.079-.079-3.159h1.875l.119 1.521h.04c.711-1.146 1.79-1.718 3.238-1.718 1.132 0 2.077.447 2.833 1.342.758.896 1.136 2.074 1.136 3.535zm-2.172.078c0-.934-.21-1.704-.632-2.31-.461-.632-1.08-.948-1.856-.948-.526 0-1.004.176-1.431.523-.428.35-.708.807-.839 1.373-.066.264-.099.48-.099.65v1.6c0 .698.214 1.287.642 1.768s.984.721 1.668.721c.803 0 1.428-.31 1.875-.928.448-.619.672-1.435.672-2.449zm13.209-.078c0 1.632-.441 2.922-1.324 3.869-.789.843-1.77 1.264-2.941 1.264-1.264 0-2.172-.454-2.724-1.362h-.04v5.055h-2.132V25.067c0-1.026-.027-2.079-.079-3.159h1.875l.119 1.521h.04c.71-1.146 1.789-1.718 3.238-1.718 1.131 0 2.076.447 2.834 1.342.755.896 1.134 2.074 1.134 3.535zm-2.172.078c0-.934-.211-1.704-.633-2.31-.461-.632-1.078-.948-1.855-.948a2.22 2.22 0 0 0-1.432.523c-.428.35-.707.807-.838 1.373-.065.264-.099.48-.099.65v1.6c0 .698.214 1.287.64 1.768.428.48.984.721 1.67.721.803 0 1.428-.31 1.875-.928.448-.619.672-1.435.672-2.449zm14.512 1.106c0 1.132-.393 2.053-1.182 2.764-.867.777-2.074 1.165-3.625 1.165-1.432 0-2.58-.276-3.449-.829l.494-1.777c.936.566 1.963.85 3.082.85.803 0 1.428-.182 1.877-.544.447-.362.67-.848.67-1.454 0-.54-.184-.995-.553-1.364-.367-.369-.98-.712-1.836-1.029-2.33-.869-3.494-2.142-3.494-3.816 0-1.094.408-1.991 1.225-2.689.814-.699 1.9-1.048 3.258-1.048 1.211 0 2.217.211 3.02.632l-.533 1.738c-.75-.408-1.598-.612-2.547-.612-.75 0-1.336.185-1.756.553a1.58 1.58 0 0 0-.533 1.205c0 .526.203.961.611 1.303.355.316 1 .658 1.936 1.027 1.145.461 1.986 1 2.527 1.618.539.616.808 1.387.808 2.307zm7.049-4.264h-2.35v4.659c0 1.185.414 1.777 1.244 1.777.381 0 .697-.033.947-.099l.059 1.619c-.42.157-.973.236-1.658.236-.842 0-1.5-.257-1.975-.77-.473-.514-.711-1.376-.711-2.587v-4.837h-1.4v-1.6h1.4v-1.757l2.094-.632v2.389h2.35v1.602zm10.603 3.119c0 1.475-.422 2.686-1.264 3.633-.883.975-2.055 1.461-3.516 1.461-1.408 0-2.529-.467-3.365-1.401s-1.254-2.113-1.254-3.534c0-1.487.43-2.705 1.293-3.652.861-.948 2.023-1.422 3.484-1.422 1.408 0 2.541.467 3.396 1.402.818.907 1.226 2.078 1.226 3.513zm-2.212.069c0-.885-.189-1.644-.572-2.277-.447-.766-1.086-1.148-1.914-1.148-.857 0-1.508.383-1.955 1.148-.383.634-.572 1.405-.572 2.317 0 .885.189 1.644.572 2.276.461.766 1.105 1.148 1.936 1.148.814 0 1.453-.39 1.914-1.168.393-.645.591-1.412.591-2.296zm9.142-2.913a3.702 3.702 0 0 0-.672-.059c-.75 0-1.33.283-1.738.85-.355.5-.533 1.132-.533 1.895v5.035h-2.131l.02-6.574c0-1.106-.027-2.113-.08-3.021h1.857l.078 1.836h.059c.225-.631.58-1.139 1.066-1.52a2.578 2.578 0 0 1 1.541-.514c.197 0 .375.014.533.039v2.033zm9.535 2.469a5 5 0 0 1-.078.967h-6.396c.025.948.334 1.673.928 2.173.539.447 1.236.671 2.092.671.947 0 1.811-.151 2.588-.454l.334 1.48c-.908.396-1.98.593-3.217.593-1.488 0-2.656-.438-3.506-1.313-.848-.875-1.273-2.05-1.273-3.524 0-1.447.395-2.652 1.186-3.613.828-1.026 1.947-1.539 3.355-1.539 1.383 0 2.43.513 3.141 1.539.563.815.846 1.823.846 3.02zm-2.033-.553c.014-.632-.125-1.178-.414-1.639-.369-.593-.936-.889-1.699-.889-.697 0-1.264.289-1.697.869-.355.461-.566 1.014-.631 1.658h4.441zM49.05 10.009c0 1.177-.353 2.063-1.058 2.658-.653.549-1.581.824-2.783.824-.596 0-1.106-.026-1.533-.078V6.982c.557-.09 1.157-.136 1.805-.136 1.145 0 2.008.249 2.59.747.652.563.979 1.368.979 2.416zm-1.105.029c0-.763-.202-1.348-.606-1.756-.404-.407-.994-.611-1.771-.611-.33 0-.611.022-.844.068v4.889c.129.02.365.029.708.029.802 0 1.421-.223 1.857-.669s.656-1.096.656-1.95zm6.964.999c0 .725-.207 1.319-.621 1.785-.434.479-1.009.718-1.727.718-.692 0-1.243-.229-1.654-.689-.41-.459-.615-1.038-.615-1.736 0-.73.211-1.329.635-1.794s.994-.698 1.712-.698c.692 0 1.248.229 1.669.688.4.446.601 1.022.601 1.726zm-1.087.034c0-.435-.094-.808-.281-1.119-.22-.376-.533-.564-.94-.564-.421 0-.741.188-.961.564-.188.311-.281.69-.281 1.138 0 .435.094.808.281 1.119.227.376.543.564.951.564.4 0 .714-.191.94-.574.194-.317.291-.693.291-1.128zm8.943-2.352-1.475 4.714h-.96l-.611-2.047a15.32 15.32 0 0 1-.379-1.523h-.019a11.15 11.15 0 0 1-.379 1.523l-.649 2.047h-.971l-1.387-4.714h1.077l.533 2.241c.129.53.235 1.035.32 1.513h.019c.078-.394.207-.896.389-1.503l.669-2.25h.854l.641 2.202c.155.537.281 1.054.378 1.552h.029c.071-.485.178-1.002.32-1.552l.572-2.202h1.029zm5.433 4.714H67.15v-2.7c0-.832-.316-1.248-.95-1.248a.946.946 0 0 0-.757.343 1.217 1.217 0 0 0-.291.808v2.796h-1.048v-3.366c0-.414-.013-.863-.038-1.349h.921l.049.737h.029c.122-.229.304-.418.543-.569.284-.176.602-.265.95-.265.44 0 .806.142 1.097.427.362.349.543.87.543 1.562v2.824zm2.89 0h-1.047V6.556h1.047v6.877zm6.17-2.396c0 .725-.207 1.319-.621 1.785-.434.479-1.01.718-1.727.718-.693 0-1.244-.229-1.654-.689-.41-.459-.615-1.038-.615-1.736 0-.73.211-1.329.635-1.794s.994-.698 1.711-.698c.693 0 1.248.229 1.67.688.4.446.601 1.022.601 1.726zm-1.088.034c0-.435-.094-.808-.281-1.119-.219-.376-.533-.564-.939-.564-.422 0-.742.188-.961.564-.188.311-.281.69-.281 1.138 0 .435.094.808.281 1.119.227.376.543.564.951.564.4 0 .713-.191.939-.574.195-.317.291-.693.291-1.128zm6.16 2.362h-.941l-.078-.543h-.029c-.322.433-.781.65-1.377.65-.445 0-.805-.143-1.076-.427a1.339 1.339 0 0 1-.369-.96c0-.576.24-1.015.723-1.319.482-.304 1.16-.453 2.033-.446V10.3c0-.621-.326-.931-.979-.931-.465 0-.875.117-1.229.349l-.213-.688c.438-.271.979-.407 1.617-.407 1.232 0 1.85.65 1.85 1.95v1.736c0 .471.023.846.068 1.124zm-1.088-1.62v-.727c-1.156-.02-1.734.297-1.734.95 0 .246.066.43.201.553a.733.733 0 0 0 .512.184c.23 0 .445-.073.641-.218a.893.893 0 0 0 .38-.742zm7.043 1.62h-.93l-.049-.757h-.029c-.297.576-.803.864-1.514.864-.568 0-1.041-.223-1.416-.669s-.562-1.025-.562-1.736c0-.763.203-1.381.611-1.853.395-.44.879-.66 1.455-.66.633 0 1.076.213 1.328.64h.02V6.556h1.049v5.607c0 .459.012.882.037 1.27zm-1.086-1.988v-.786a1.194 1.194 0 0 0-.408-.965 1.03 1.03 0 0 0-.701-.257c-.391 0-.697.155-.922.466-.223.311-.336.708-.336 1.193 0 .466.107.844.322 1.135.227.31.533.465.916.465.344 0 .619-.129.828-.388.202-.239.301-.527.301-.863zm10.049-.408c0 .725-.207 1.319-.621 1.785-.434.479-1.008.718-1.727.718-.691 0-1.242-.229-1.654-.689-.41-.459-.615-1.038-.615-1.736 0-.73.211-1.329.635-1.794s.994-.698 1.713-.698c.691 0 1.248.229 1.668.688.4.446.601 1.022.601 1.726zm-1.086.034c0-.435-.094-.808-.281-1.119-.221-.376-.533-.564-.941-.564-.42 0-.74.188-.961.564-.188.311-.281.69-.281 1.138 0 .435.094.808.281 1.119.227.376.543.564.951.564.4 0 .715-.191.941-.574.193-.317.291-.693.291-1.128zm6.721 2.362h-1.047v-2.7c0-.832-.316-1.248-.951-1.248-.311 0-.562.114-.756.343s-.291.499-.291.808v2.796h-1.049v-3.366c0-.414-.012-.863-.037-1.349h.92l.049.737h.029a1.53 1.53 0 0 1 .543-.569c.285-.176.602-.265.951-.265.439 0 .805.142 1.096.427.363.349.543.87.543 1.562v2.824zm7.053-3.929h-1.154v2.29c0 .582.205.873.611.873.188 0 .344-.016.467-.049l.027.795c-.207.078-.479.117-.814.117-.414 0-.736-.126-.969-.378-.234-.252-.35-.676-.35-1.271V9.504h-.689v-.785h.689v-.864l1.027-.31v1.173h1.154v.786zm5.548 3.929h-1.049v-2.68c0-.845-.316-1.268-.949-1.268-.486 0-.818.245-1 .735a1.317 1.317 0 0 0-.049.377v2.835h-1.047V6.556h1.047v2.841h.02c.33-.517.803-.775 1.416-.775.434 0 .793.142 1.078.427.355.355.533.883.533 1.581v2.803zm5.723-2.58c0 .188-.014.346-.039.475h-3.143c.014.466.164.821.455 1.067.266.22.609.33 1.029.33.465 0 .889-.074 1.271-.223l.164.728c-.447.194-.973.291-1.582.291-.73 0-1.305-.215-1.721-.645-.418-.43-.625-1.007-.625-1.731 0-.711.193-1.303.582-1.775.406-.504.955-.756 1.648-.756.678 0 1.193.252 1.541.756.281.4.42.895.42 1.483zm-1-.271a1.411 1.411 0 0 0-.203-.805c-.182-.291-.459-.437-.834-.437a.995.995 0 0 0-.834.427 1.586 1.586 0 0 0-.311.815h2.182z" fill="#FFF"/></svg>
\ No newline at end of file
diff --git a/UberEats/UberEatsImages10.png b/UberEats/UberEatsImages10.png
new file mode 100644
index 00000000..ac9b5b1a
Binary files /dev/null and b/UberEats/UberEatsImages10.png differ
diff --git a/UberEats/UberFonts/UberMoveBold.otf b/UberEats/UberFonts/UberMoveBold.otf
new file mode 100644
index 00000000..b1a878da
Binary files /dev/null and b/UberEats/UberFonts/UberMoveBold.otf differ
diff --git a/UberEats/UberFonts/UberMoveMedium.otf b/UberEats/UberFonts/UberMoveMedium.otf
new file mode 100644
index 00000000..689e0600
Binary files /dev/null and b/UberEats/UberFonts/UberMoveMedium.otf differ
diff --git a/UberEats/UberFonts2/.Rhistory b/UberEats/UberFonts2/.Rhistory
new file mode 100644
index 00000000..e69de29b
diff --git a/UberEats/UberFonts2/UberMove-Regular.ttf b/UberEats/UberFonts2/UberMove-Regular.ttf
new file mode 100644
index 00000000..e074026d
Binary files /dev/null and b/UberEats/UberFonts2/UberMove-Regular.ttf differ
diff --git a/UberEats/UberFonts2/UberMove-Regular.woff b/UberEats/UberFonts2/UberMove-Regular.woff
new file mode 100644
index 00000000..2833c220
Binary files /dev/null and b/UberEats/UberFonts2/UberMove-Regular.woff differ
diff --git a/UberEats/UberFonts2/UberMove-Regular.woff2 b/UberEats/UberFonts2/UberMove-Regular.woff2
new file mode 100644
index 00000000..1f0938fb
Binary files /dev/null and b/UberEats/UberFonts2/UberMove-Regular.woff2 differ
diff --git a/UberEats/UberFonts2/style.css b/UberEats/UberFonts2/style.css
new file mode 100644
index 00000000..aa2c004c
--- /dev/null
+++ b/UberEats/UberFonts2/style.css
@@ -0,0 +1,9 @@
+@font-face {
+    font-family: 'Uber Move';
+    src: local('Uber Move Regular'), local('Uber-Move-Regular'),
+        url('UberMove-Regular.woff2') format('woff2'),
+        url('UberMove-Regular.woff') format('woff'),
+        url('UberMove-Regular.ttf') format('truetype');
+    font-weight: 400;
+    font-style: normal;
+  }
\ No newline at end of file
diff --git a/UberEats/delievernow.png b/UberEats/delievernow.png
new file mode 100644
index 00000000..b710be7b
Binary files /dev/null and b/UberEats/delievernow.png differ
diff --git a/UberEats/delivernow_dropdown.png b/UberEats/delivernow_dropdown.png
new file mode 100644
index 00000000..c5c42c11
Binary files /dev/null and b/UberEats/delivernow_dropdown.png differ
diff --git a/UberEats/hover_delivernow.png b/UberEats/hover_delivernow.png
new file mode 100644
index 00000000..b2fab2dc
Binary files /dev/null and b/UberEats/hover_delivernow.png differ
diff --git a/UberEats/login_icon.png b/UberEats/login_icon.png
new file mode 100644
index 00000000..12078bbd
Binary files /dev/null and b/UberEats/login_icon.png differ
diff --git a/UberEats/map.png b/UberEats/map.png
new file mode 100644
index 00000000..39ea773e
Binary files /dev/null and b/UberEats/map.png differ
diff --git a/index.html b/index.html
new file mode 100644
index 00000000..b4011b8f
--- /dev/null
+++ b/index.html
@@ -0,0 +1,251 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script defer src = "script.js"></script>
+    <link rel = "stylesheet" type ="text/css" href="styles.css">
+    <title>Document</title>
+    <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=Poppins:wght@600&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,600;1,200&display=swap" rel="stylesheet">
+    <script src="https://kit.fontawesome.com/20d70f3e0b.js" crossorigin="anonymous"></script>
+</head>
+<body>
+    <div class = "header">
+        <div class="left">
+            <i class="fa-solid fa-bars" id ="threebars"></i>
+            <img src="UberEats/UberEatsImages04.svg">
+        </div>
+        <div class="right">
+            <button class="login" ><i class="fa-solid fa-user"></i> Log in</button>
+            <button class="signup" >Sign up</button>
+        </div>
+    </div>
+    
+    <div class = "section1">
+        <img src = "UberEats/UberEatsImages05.png" width=100% height=auto class="yellow-background">
+        <div class = "top-left">Order food to your door
+            <style>
+                .dropbtn {
+                  color: white;
+                  font-size: 16px;
+                  border: none;
+                  cursor: pointer;
+                }
+                
+                .dropbtn:hover, .dropbtn:focus {
+                  background-color: white;
+                }
+                
+                .dropdown {
+                  float: right;
+                  position: relative;
+                  display: inline-block;
+                }
+                
+                .dropdown-content {
+                  display: none;
+                  position: absolute;
+                  background-color: white;
+                  min-width: 160px;
+                  overflow: auto;
+                  right: 0;
+                  z-index: 1;
+                }
+                
+                .dropdown-content a {
+                  color: black;
+                  padding: 12px 16px;
+                  text-decoration: none;
+                  display: block;
+                }
+                
+                .dropdown a:hover .hover_img{display: inline /*background: "UberEats/UberEatsImages01.png"*/}
+                
+                .show {display: block;}
+            </style>
+    
+            <div class="dropdown" style="position:relative; padding-right: 500px;">
+                <button onclick="myFunction()" class="dropbtn">
+                    <img width=100% height=100% class = "dropbtn" src="UberEats/delievernow.png">
+                </button>
+                <div id="myDropdown" class="dropdown-content">
+                  <a href="#home"><img src = "UberEats/delievernow.png" width=100% height=auto></a>
+                  <a href="#about">Schedule for later</a>
+                </div>
+            </div>
+              
+              <script>
+              /* When the user clicks on the button, 
+              toggle between hiding and showing the dropdown content */
+              function myFunction() {
+                document.getElementById("myDropdown").classList.toggle("show");
+              }
+              
+              // Close the dropdown if the user clicks outside of it
+              window.onclick = function(event) {
+                if (!event.target.matches('.dropbtn')) {
+                  var dropdowns = document.getElementsByClassName("dropdown-content");
+                  var i;
+                  for (i = 0; i < dropdowns.length; i++) {
+                    var openDropdown = dropdowns[i];
+                    if (openDropdown.classList.contains('show')) {
+                      openDropdown.classList.remove('show');
+                    }
+                  }
+                }
+              }
+            </script>
+    
+            <style>
+                .button {
+                  display: inline-block;
+                  padding: 17px 17px;
+                  font-size: 20px;
+                  cursor: pointer;
+                  text-align: center;
+                  text-decoration: none;
+                  outline: none;
+                  color: #fff;
+                  background-color: black;
+                  border: none;
+                  border-radius: 8px;
+                }
+                
+                .button:hover {background-color: rgb(51, 49, 49)}
+                
+            </style>
+            <div class="below-top-left">
+                <form>
+                    <input type ="text" id = "deliv_address" placeholder="Enter delivery address" size="75">
+                </form>
+                <button class="button" id = "findfood">Find Food</button>
+                <div class = "sub-top-left"><u>Sign In</u> for your recent addresses</div>
+            </div>
+        </div>
+        
+        <img src = "UberEats/UberEatsImages04.svg" width=100% height=auto class="hover_img">
+
+
+
+    </div>
+
+    <div class="section2">  
+        <div class="section2-1" id = "section2-items"><img src = "UberEats/UberEatsImages06.webp" width=90% height=auto>
+            <p class="section2-1" style="font-size: 30px; font-weight: bold;" id = "section2-items">Feed your employees</p>
+            <p class="section2-1" style="font-size: 15px; font-family: 'Poppins', sans-serif;" id = "section2-items"><u>Create a business account</u></p>
+        </div>    
+        <div class="section2-1" id = "section2-items"><img src = "UberEats/UberEatsImages07.webp" width=90% height=auto>
+            <p class="section2-1" style="font-size: 30px; font-weight: bold;" id = "section2-items">Your restaurant, delivered</p>
+            <p class="section2-1" style="font-size: 15px; font-family: 'Poppins', sans-serif;" id = "section2-items"><u>Add your restaurant</u></p>
+        </div> 
+        <div class="section2-1" id = "section2-items"><img src = "UberEats/UberEatsImages08.webp" width=90% height=auto>
+            <p class="section2-1" style="font-size: 30px; font-weight: bold;" id = "section2-items">Deliver with Uber Eats</p>
+            <p class="section2-1" style="font-size: 15px; font-family: 'Poppins', sans-serif;" id = "section2-items"><u>Sign up to deliver</u></p>
+        </div>     
+    </div>
+
+    <div class="section3">
+        <div class = "section3-header" style="font-size: 40px; font-weight: bold;">Cities near me</div>
+        <div class = "section3-header" style="font-size: 20px;"><u>View all 500+ cities</u></div>
+    </div>
+    <img src = "UberEats/map.png" width=95% style="display: block; padding-left: 50px; padding-top: 15px; padding-right: 50px;">
+    <div class ="section3-list">
+        <ul class="city-list">
+            <li>Akron</li>
+            <li>Albuquerque</li>
+            <li>Bridgeport</li>
+            <li>Concord</li>
+            <li>Dayton</li>
+            <li>El Paso</li>
+            <li>Hartford</li>
+            <li>Houston</li>
+            <li>Indianapolis</li>
+            <li>McAllen</li>
+            <li>Mesa</li>
+            <li>Milwaukee</li>
+            <li>Nashville</li>
+            <li>New Orleans</li>
+            <li>Oklahoma City</li>
+            <li>Omaha</li>
+            <li>Orlando</li>
+            <li>Palm Bay</li>
+            <li>Providence</li>
+            <li>Queens</li>
+            <li>San Antonio</li>
+            <li>Stony Brook</li>
+            <li>Tucson</li>
+            <li>West Hollywood</li>
+        </ul>
+    </div>
+
+    <div class="section3">
+        <div class = "section3-header" style="font-size: 40px; font-weight: bold;">Countries with Uber Eats</div>
+        <div class = "section3-header" style="font-size: 20px;"><u>View all countries</u></div>
+    </div>
+    <div class ="section3-list">
+        <ul class="country-list">
+            <li>Australia</li>
+            <li>Belgium</li>
+            <li>Canada</li>
+            <li>Chile</li>
+            <li>Costa Rica</li>
+            <li>Dominican Republic</li>
+            <li>Ecuador</li>
+            <li>El Salvador</li>
+            <li>France</li>
+            <li>Germany</li>
+            <li>Guatemala</li>
+            <li>Ireland</li>
+            <li>Italy</li>
+            <li>Japan</li>
+            <li>Kenya</li>
+            <li>Mexico</li>
+            <li>Netherlands</li>
+            <li>New Zealand</li>
+            <li>Panama</li>
+            <li>Poland</li>
+            <li>Portugal</li>
+            <li>South Africa</li>
+            <li>Spain</li>            
+            <li>Sri Lanka</li>
+            <li>Sweden</li>
+            <li>Switzerland</li>
+            <li>Taiwan (ROC)</li>            
+            <li>United Kingdom</li>
+            <li>United States</li>
+        </ul>
+    </div>
+
+    <hr>
+
+    <div class="section5">
+        <div class="section5-left">
+            <img src="UberEats/UberEatsImages04.svg" id ="UberEats-logo">
+            <img src = "UberEats/UberEatsImages09.svg" width=25% height=auto id="app-store">
+            <img src = "UberEats/UberEatsImages10.png" width=25% height=auto id="google-play">
+        </div>
+        <div class="section5-right">
+            <ul class="section5-list">
+                <li>Get Help</li>
+                <li>Buy gift cards</li>
+                <li>Add your restaurant</li>
+                <li>Sign up to deliver</li>
+                <li>Create a business account</li>
+                <li>Promotions</li>
+                <li>Restaurants near me</li>
+                <li>View all cities</li>
+                <li>View all countries</li>
+                <li>Pickup near me</li>            
+                <li>About Uber Eats</li>
+                <li>English</li>
+            </ul>
+        </div>
+    </div>
+
+    <hr>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 00000000..10ff1f4d
--- /dev/null
+++ b/script.js
@@ -0,0 +1,9 @@
+const headerE1 = document.querySelector('.header')
+
+window.addEventListener('scroll', () => {
+    if (window.scrollY > 50) {
+        headerE1.classList.add('header-scrolled');
+    } else if (window.scrollY <= 50) {
+        headerE1.classList.remove('header-scrolled')
+    }
+});
\ No newline at end of file
diff --git a/styles.css b/styles.css
new file mode 100644
index 00000000..439d10f4
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,254 @@
+.yellow-background{
+    position: relative;
+}
+
+.header{
+    position: fixed;
+    top: 0px;
+    width: 100%;
+    height: 100px;
+    background-color: rgba(0,0,0,0);
+    z-index: 1;
+    transition: all 0.5s;
+    display: grid;
+    flex-direction: row;
+    align-items: center;
+
+}
+
+.header ul{
+    text-align: center;
+} 
+
+.header ul li {
+    list-style: none;
+    display: inline-block;
+}
+
+.header-scrolled {
+    background-color: white;
+}
+
+#threebars{
+    width: 20px;
+}
+
+.login {
+    display: inline-block;
+    padding: 15px 15px;
+    font-size: 16px;
+    font-weight: bold;
+    cursor: pointer;
+    text-align: center;
+    text-decoration: none;
+    outline: none;
+    color: black;
+    background-color: #fff;
+    border: none;
+    border-radius: 40px;
+  }
+  
+.login:hover {background-color: rgb(184, 177, 177)}
+
+.left {
+    padding-left: 30px;
+    padding-top: 20px;
+}
+
+.right {
+    padding-top: 0px;
+    display: flex;
+    justify-content: flex-end;
+}
+
+.signup {
+    display: inline-block;
+    padding: 15px 15px;
+    font-size: 16px;
+    cursor: pointer;
+    text-align: center;
+    text-decoration: none;
+    outline: none;
+    color: #fff;
+    background-color: black;
+    border: none;
+    border-radius: 40px;
+  }
+  
+.signup:hover {background-color: rgb(51, 49, 49)}
+
+.top-left {
+    position: absolute;
+    top: 300px;
+    left: 60px;
+    font-size: 60px;
+    font-family: 'Poppins', sans-serif;
+}
+
+.below-top-left{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+}
+
+.sub-top-left{
+    position: absolute;
+    top: 150px;
+    left: 16px;
+    font-size: 15px;
+    font-family: 'Poppins', sans-serif;
+}
+#deliv_address {
+    position: absolute;
+    top: 90px;
+    left: 10px;
+}
+
+#deliv_address:hover {
+    border: none;
+    border-bottom: 2px solid black;
+}
+
+#deliv_address:not(:placeholder-shown) {
+    border-color: red;
+}
+
+#delivernow {
+
+}
+
+#findfood {
+    position: relative;
+    top: 0px;
+    left: 800px;
+}
+
+.hover_img {
+    position: absolute;
+    display: none;
+}
+
+.dropbtn {
+}
+
+#myDropdown{
+    position: absolute;
+}
+
+.section2 {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    padding-left: 50px;
+    padding-top: 40px;
+}
+
+.section2-1 {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    align-items: flex-start;
+    font-family: 'Poppins', sans-serif;
+    margin: 0;
+}
+
+.section3 {
+    padding-top: 50px;
+    padding-left: 50px;
+    padding-right: 50px;
+    padding-bottom: 50px;
+    font-family: 'Poppins', sans-serif;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: flex-end;
+}
+
+.section3-list-items {
+    font-family: 'Poppins', sans-serif;
+    display: flex;
+    flex-direction: column;
+}
+
+
+li {
+    margin: 30px 0;
+}
+
+.city-list {
+    -moz-column-count: 6;
+    -moz-column-gap: 20px;
+    -webkit-column-count: 4;
+    -webkit-column-gap: 20px;
+    column-count: 4;
+    column-gap: 20px;
+    list-style: none;
+    font-family: 'Poppins', sans-serif;
+    height: 100%;
+    flex-direction: column;
+    padding-left: 50px;
+    justify-content: flex-start;
+}
+
+.country-list {
+    -moz-column-count: 8;
+    -moz-column-gap: 20px;
+    -webkit-column-count: 4;
+    -webkit-column-gap: 20px;
+    column-count: 4;
+    column-gap: 20px;
+    list-style: none;
+    font-family: 'Poppins', sans-serif;
+    height: 100%;
+    padding-bottom: 50px;
+
+}
+
+.section5{
+    display:flex;
+    flex-direction: row;
+}
+
+#UberEats-logo{
+    position: relative;
+    top:40px;
+    left: 50px;
+}
+
+#app-store{
+    position: relative;
+    top:270px;
+    left: 50px;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+}
+#google-play{
+    position: relative;
+    top:228px;
+    left: 210px;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+}
+
+.section5-list {
+    -moz-column-count: 2;
+    -moz-column-gap: 20px;
+    -webkit-column-count: 2;
+    -webkit-column-gap: 20px;
+    column-count: 2;
+    column-gap: 20px;
+    list-style: none;
+    font-family: 'Poppins', sans-serif;
+    height: 100%;
+    padding-left: 200px;
+}
+
+.section5-right{
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: flex-start;
+}
\ No newline at end of file