diff --git a/README.md b/README.md
new file mode 100644
index 0000000..494065c
--- /dev/null
+++ b/README.md
@@ -0,0 +1,39 @@
+<h1 align="center">Sushi Restaurant Website 🍣</h1>
+
+<p align="center">
+  <em>A fictional website for a sushi restaurant, offering a delightful experience!</em>
+</p>
+
+![Homepage Image](https://imgur.com/54dxJKP.jpg)
+
+## 🍱 Overview
+
+This is a hypothetical website developed for a sushi restaurant, showcasing popular dishes, the option to place orders, and information about events. It was built using HTML, CSS, and JavaScript.
+
+## 📂 Content
+
+- **Homepage:** Showcases popular dishes and provides a button for placing orders.
+- **Newsletter Section:** Allows users to subscribe to receive updates.
+- **Footer:** Includes contact details, address, and links to important sections.
+
+## 🚀 How to Use
+
+1. Clone this repository:
+
+```bash
+https://github.com/pamyszz/Pamy-s-Sushi.git
+```
+2. Open the `index.html` file in your browser to view the site.
+
+## 🛠 Technologies Used
+- HTML
+- CSS
+- JavaScript
+
+## 🤝 Contributions
+Contributions are welcome! Feel free to open an issue or submit a pull request for code improvements, bug fixes, or new features.
+
+## 📜 License
+The ScrollReveal v4.0.9 JS code used in this project is licensed under the GNU General Public License 3.0 (GPL-3.0) for compatible open-source projects and non-commercial use.
+
+<p align="center">Created with ❤️ by Pamy.</p>
\ No newline at end of file
diff --git a/assets/css/styles.css b/assets/css/styles.css
new file mode 100644
index 0000000..2dea8e4
--- /dev/null
+++ b/assets/css/styles.css
@@ -0,0 +1,1149 @@
+/*=============== GOOGLE FONTS ===============*/
+@import url("https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600&family=Lora:wght@500;600&family=Poppins:wght@400;500&display=swap");
+
+/*=============== VARIABLES CSS ===============*/
+:root {
+  --header-height: 3.5rem;
+
+  /*========== Colors ==========*/
+  /*Color mode HSL(hue, saturation, lightness)*/
+  --first-color: hsl(19, 64%, 54%);
+  --first-color-alt: hsl(19, 64%, 52%);
+  --title-color: hsl(19, 16%, 15%);
+  --text-color: hsl(19, 16%, 35%);
+  --text-color-light: hsl(19, 8%, 55%);
+  --body-color: hsl(19, 100%, 96%);
+  --container-color: hsl(19, 100%, 97%);
+
+  /*========== Font and typography ==========*/
+  /*.5rem = 8px | 1rem = 16px ...*/
+  --body-font: "Poppins", sans-serif;
+  --title-font: "Lora", serif;
+  --subtitle-font: "Dancing Script", cursive;
+  --biggest-font-size: 2.25rem;
+  --h1-font-size: 1.5rem;
+  --h2-font-size: 1.25rem;
+  --h3-font-size: 1rem;
+  --normal-font-size: .938rem;
+  --small-font-size: .813rem;
+  --smaller-font-size: .75rem;
+
+  /*========== Font weight ==========*/
+  --font-medium: 500;
+  --font-semi-bold: 600;
+
+  /*========== z index ==========*/
+  --z-tooltip: 10;
+  --z-fixed: 100;
+}
+@media screen and (min-width: 1024px) {
+  :root {
+    --biggest-font-size: 4rem;
+    --h1-font-size: 2.25rem;
+    --h2-font-size: 1.5rem;
+    --h3-font-size: 1.25rem;
+    --normal-font-size: 1rem;
+    --small-font-size: .875rem;
+    --smaller-font-size: .813rem;
+  }
+}
+
+/*=============== BASE ===============*/
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: var(--body-font);
+  font-size: var(--normal-font-size);
+  background-color: var(--body-color);
+  color: var(--text-color);
+  transition: background 0.5s; /* for dark mode animation */
+}
+
+h1, h2, h3 {
+  color: var(--title-color);
+  font-weight: var(--font-medium);
+}
+
+ul {
+  list-style: none;
+}
+
+a {
+  text-decoration: none;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+/*=============== THEME ===============*/
+.nav__buttons{
+  display: flex;
+  align-items: center;
+  column-gap: 1rem;
+}
+.change-theme{
+  font-size: 1.25rem;
+  color: var(--title-color);
+  cursor: pointer;
+  transition: color .3s;
+}
+
+/*========== Variables Dark theme ==========*/
+body.dark-theme{
+  --first-color: hsl(19, 64%, 58%);
+  --first-color-alt: hsl(19, 64%, 54%);
+  --title-color: hsl(19, 24%, 85%);
+  --text-color: hsl(19, 16%, 65%);
+  --body-color: hsl(19, 12%, 8%);
+  --container-color: hsl(19, 10%, 10%);
+}
+
+/*========== 
+    Color changes in some parts of 
+    the website, in light theme
+==========*/
+.dark-theme .bg-header,
+.dark-theme .nav__menu,
+.dark-theme .scrollup{
+  box-shadow: 0 2px 8px hsla(19, 64%, 4%, .5);
+}
+
+.dark-theme .popular__card{
+  box-shadow: 0 8px 20px hsla(a9, 64%, 4%, .2);
+}
+.dark-theme .newsletter__content{
+  background-color: var(--container-color);
+}
+
+.dark-theme .newsletter__form,
+.dark-theme .newsletter__input{
+  background-color: var(--body-color);
+}
+
+.dark-theme::-webkit-scrollbar{
+  background-color:  hsl(19, 8%, 15%);
+}
+.dark-theme::-webkit-scrollbar-thumb{
+  background-color:  hsl(19, 8%, 25%);
+}
+.dark-theme::-webkit-scrollbar-thumb:hover{
+  background-color:  hsl(19, 8%, 37%);
+}
+/*=============== REUSABLE CSS CLASSES ===============*/
+.container {
+  max-width: 1024px;
+  margin-inline: 1.5rem;
+}
+
+.grid {
+  display: grid;
+  gap: 1.5rem;
+}
+
+.section {
+  padding-block: 5rem 1rem;
+}
+
+.section__title {
+  font-size: var(--h1-font-size);
+  font-family: var(--title-font);
+  margin-bottom: 1.5rem;
+}
+
+.section__subtitle {
+  display: block;
+  font-size: var(--h2-font-size);
+  font-family: var(--subtitle-font);
+  color: var(--first-color);
+  margin-bottom: 0.5rem;
+}
+
+.section__title, 
+.section__subtitle {
+  text-align: center;
+}
+
+.main {
+  overflow: hidden; /* For animation ScrollReveal */
+}
+
+/*=============== HEADER & NAV ===============*/
+.header{
+  position: fixed;
+  width: 100%;
+  background-color: var(--body-color);
+  top: 0;
+  left: 0;
+  z-index: var(--z-fixed);
+  transition: box-shadow .3s, background .4s;
+}
+
+
+.nav{
+  position: relative;
+  height: var(--header-height);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+}
+
+.nav__logo,
+.nav__toggle,
+.nav__close{
+  display: flex;
+  color: var(--title-color);
+}
+
+.nav__logo{
+  align-items: center;
+  column-gap: .5rem;
+  font-family: var(--title-font);
+  font-size: var(--h3-font-size);
+  font-weight: var(--font-semi-bold);
+  transition: color .3s;
+}
+
+.nav__logo img{
+  width: 26px;
+
+}
+
+.nav__logo:hover{
+  color: var(--first-color);
+}
+
+.nav__toggle{
+  font-size: 1.25rem;
+  cursor:pointer;
+
+}
+
+@media screen and (max-width: 767px){
+  .nav__menu{
+    position: fixed;
+    top: -100%;
+    left: 0;
+    background-color: var(--body-color);
+    width: 100%;
+    box-shadow: 0 8px 20px hsla(19, 64%, 24%, .1);
+    padding-block: 3.5rem;
+    transition: top .4s;
+
+  }
+}
+
+.nav__list{
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  row-gap: 2rem;
+}
+
+.nav__link{
+  color: var(--title-color);
+  font-weight: var(--font-medium);
+  transition: color .4s;
+}
+
+.nav__link:hover{
+  color: var(--first-color);
+}
+
+.nav__close{
+  position: absolute;
+  top: 1rem;
+  right: 1.5rem;
+  font-size: 1.5rem;
+  cursor: pointer;
+}
+
+.nav__img-1,
+.nav__img-2{
+  position: absolute;
+  opacity: .2;
+}
+.nav__img-1{
+  width: 100px;
+  top: .75rem;
+  left: -2rem;
+  transform: rotate(165deg);
+}
+
+.nav__img-2{
+  width: 50px;
+  right: -1rem;
+  bottom: 0;
+  transform: rotate(-30deg)
+}
+/* Show menu */
+.show-menu{
+  top: 0;
+}
+
+/* Change background header */
+.bg-header{
+  box-shadow: 0 2px 8px hsla(19, 64%, 24%, .1);
+}
+
+/* Active link */
+.active-link{
+  color: var(--first-color);
+}
+
+
+/*=============== HOME ===============*/
+.home{
+  position: relative;
+}
+
+.home__container{
+  row-gap: 3rem;
+  padding-top: 2rem;
+}
+
+.home__img{
+  width: 300px;
+  justify-self: center;
+}
+
+.home__data{
+  text-align: center;
+}
+.home__title{
+  font-size: var(--biggest-font-size);
+  font-family: var(--title-font);
+  margin-bottom: 1rem;
+}
+
+.home__title img{
+  width: 40px;
+
+}
+.home__title div{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  column-gap: .5rem;
+}
+
+.home__description{
+  padding: 0 1rem;
+  margin-bottom: 2.5rem;
+}
+
+.home__leaf-1,
+.home__leaf-2{
+  position: absolute;
+  opacity: .2;
+}
+
+.home__leaf-1{
+  width: 80px;
+  top: 8rem;
+  left: -1rem;
+  transform: rotate(90deg);
+}
+
+.home__leaf-2{
+  width: 100px;
+  right: -2rem;
+  bottom: 1rem;
+  transform: rotate(-15deg);
+}
+/*=============== BUTTON ===============*/
+.button{
+  display: inline-flex;
+  align-items: center;
+  column-gap: .5rem;
+  background-color: var(--first-color);
+  padding: 1rem 1.5rem;
+  border-radius: 4rem;
+  color: #fff;
+  font-weight: var(--font-medium);
+  transition: background .3s;
+
+}
+
+.button i{
+  font-size: 1.5rem;
+  transition: transform .3s;
+
+}
+
+.button:hover{
+  background-color: var(--first-color-alt);
+}
+.button:hover i{
+  transform: translateX(.25rem);
+}
+/*=============== ABOUT ===============*/
+.about{
+  position: relative;
+}
+
+.about__container{
+  row-gap: 3rem;
+}
+
+.about__data{
+  text-align: center;
+}
+
+.about__title img{
+  width: 30px;
+}
+
+.about__title div{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  column-gap: .5rem;
+}
+
+.about__img{
+  width: 300px;
+  justify-self: center;
+
+}
+
+.about__leaf{
+  width: 100px;
+  opacity: .2;
+  position: absolute;
+  right: -1.5rem;
+  bottom: 11rem;
+  transform: rotate(-15deg);
+}
+/*=============== POPULAR ===============*/
+.popular__container{
+  padding-top: 4rem;
+  grid-template-columns: 250px;
+  justify-content: center;
+  row-gap: 5.5rem;
+}
+
+.popular__card{
+  position: relative;
+  background-color: var(--container-color);
+  padding: 7rem 2rem 1.5rem;
+  box-shadow: 0 8px 20px hsla(19, 64%, 48%, .08);
+  border-radius: 1rem;
+  text-align:  center;
+  transition: background 0.5s; /* for dark mode animation */
+}
+
+.popular__img{
+  width: 220px;
+  position: absolute;
+  inset: 0;
+  top: -2.5rem;
+  margin: 0 auto;
+  transition: transform .4s;
+}
+
+.popular__name{
+  font-size: var(--h3-font-size);
+  font-family: var(--title-font);
+  margin-bottom: .25rem;
+}
+
+.popular__description{
+  display: block;
+  font-size: var(--smaller-font-size);
+  margin-bottom: 1rem;
+
+}
+
+.popular__price{
+  font-size: var(--h3-font-size);
+  font-weight: var(--font-medium);
+  color: var(--first-color);
+
+}
+
+.popular__button{
+  display: flex;
+  background-color: var(--first-color);
+  padding: 6px;
+  border-radius: 50%;
+  border: none;
+  outline: none;
+  color: aliceblue;
+  font-size: 1.25rem;
+  box-shadow: 0 4px 20px hsla(19, 64%, 20% ,.2);
+  position: absolute;
+  bottom: 1.25rem;
+  right: 1.25rem;
+  cursor: pointer;
+  transition: background .3s;
+}
+
+.popular__button:hover{
+  background-color: var(--first-color-alt);
+
+}
+.popular__card:hover .popular__img{
+  transform: translateY(-.25rem);
+}
+
+/*=============== RECENTLY ===============*/
+.recently{
+  position: relative;
+}
+
+.recently__container{
+  row-gap: 4rem;
+}
+.recently__data{
+  position: relative;
+  text-align: center;
+}
+
+.recently__description{
+  margin-bottom: 2rem;
+}
+
+.recently__data-img{
+  width: 25px;
+  position: absolute;
+  top: 3.5rem;
+  right: 1.5rem;
+  transform: rotate(30deg);
+}
+
+.recently__img{
+  width: 300px;
+  justify-self: center;
+
+}
+
+.recently__leaf-1, 
+.recently__leaf-2{
+  position: absolute;
+  opacity: .2;
+}
+
+.recently__leaf-1{
+  width: 80px;
+  top: 17rem;
+  left: -1rem;
+  transform: rotate(15deg);
+}
+
+.recently__leaf-2{
+  width: 40px;
+  right: -1rem;
+  bottom: 12rem;
+  transform: rotate(30deg);
+}
+/*=============== NEWSLETTER ===============*/
+.newsletter__container{
+  position: relative;
+
+}
+
+.newsletter__content{
+  position: relative;
+  background-color: hsl(19, 24%, 15%);
+  border-radius: 2.5rem;
+  padding: 5rem 1rem 3rem;
+  text-align: center;
+  overflow: hidden;
+  margin-bottom: 2rem;
+}
+
+.newsletter__img{
+  width: 250px;
+  position: absolute;
+  top: -4.5rem;
+  left: -8rem;
+}
+
+.newsletter__data .section__title{
+  color: #fff;
+  margin-bottom: 2rem;
+
+}
+
+.newsletter__form{
+  background-color: #fff;
+  padding: 5px 5px 5px 16px;
+  border-radius: 4rem;
+  display: flex;
+  column-gap: .5rem;
+}
+
+.newletter__input,
+.newsletter__button{
+  font-family: var(--body-font);
+  border: none;
+  outline: none;
+}
+
+.newsletter__input{
+  width: 90%;
+  color: var(--text-color);
+  outline: none;
+  border: none;
+}
+
+.newsletter__button{
+  cursor: pointer;
+}
+
+.newsletter__spinach{
+  width: 30px;
+  position: absolute;
+  right: 2rem;
+  bottom: -2rem;
+  transform: rotate(55deg);
+}
+
+.newsletter__container,
+.newsletter__form,
+.newsletter__input{
+  transition: background 0.5s; /* for dark mode animation */
+}
+/*=============== FOOTER ===============*/
+.footer{
+  position: relative;
+  padding-block: 3rem 2rem;
+  overflow: hidden;
+}
+
+.footer__container{
+  row-gap: 3rem;
+}
+
+.footer__logo{
+  display: inline-flex;
+  align-items: center;
+  column-gap: .5rem;
+  color: var(--title-color);
+  font-family: var(--title-font);
+  font-size: var(--h3-font-size);
+  font-weight: var(--font-semi-bold);
+  margin-bottom: 1rem;
+  transition: color .3s;
+}
+
+.footer__logo img{
+  width: 25px;
+}
+
+.footer__logo:hover{
+  color: var(--first-color);
+}
+
+.footer__description,
+.footer__link, .footer__information{
+font-size: var(--small-font-size);
+
+}
+.footer__content,
+.footer__links{
+  display: grid;
+}
+
+.footer__content{
+  grid-template-columns: repeat(2, max-content);
+  gap: 2.5rem;
+}
+
+.footer__title{
+  font-size: var(--h3-font-size);
+  margin-bottom: 1.5rem;
+}
+
+.footer__links{
+  row-gap: .5rem;
+}
+.footer__link{
+  color: var(--text-color);
+  transition: color .3s;
+}
+
+.footer__link:hover{
+  color: var(--first-color);
+}
+
+.footer__social{
+  display: flex;
+  column-gap: 1.25rem;
+}
+
+.footer__social-link{
+  color: var(--first-color);
+  font-size: 1.25rem;
+  transition: color .3s, transform .3s;
+}
+
+.footer__social-link:hover{
+  color: var(--first-color-alt);
+  transform: translateY(-2px);
+}
+
+.footer__onion,
+.footer__spinach{
+  width: 30px;
+  position: absolute;
+}
+
+
+
+.footer__onion{
+  top: 7.5rem;
+  right: 5rem;
+  transform: rotate(-45deg);
+}
+.footer__onion-1{
+  top: 9.5rem;
+  right: 5rem;
+  display: flex;
+  width: 30px;
+  justify-self: center;
+  left: 3rem;
+  transform: rotate(-45deg);
+}
+
+
+.footer__spinach{
+  bottom: 8rem;
+  left: 3rem;
+  transform: rotate(30deg);
+}
+.footer__spinach-1{
+  display: flex;
+  width: 30px;
+  justify-self: end;
+  top: 5%;
+  left: 3rem;
+  transform: rotate(-45deg);
+}
+.footer__leaf{
+  width: 100px;
+  opacity: .2;
+  position: absolute;
+  bottom: 6rem;
+  right: -2rem;
+  transform: rotate(-15deg);
+}
+
+.footer__info,
+.footer__card{
+  display: flex;
+
+}
+
+.footer__info{
+  margin-top: 6.5rem;
+  flex-direction: column;
+  row-gap: 1.5rem
+}
+
+.footer__card{
+  column-gap: 1rem;
+  justify-content: center;
+}
+
+.footer__card img{
+  width: 35px;
+}
+
+.footer__copy{
+  text-align: center;
+  font-size: var(--smaller-font-size);
+  color: var(--text-color-light);
+}
+/*=============== SCROLL BAR ===============*/
+::-webkit-scrollbar{
+  width: .6rem;
+  border-radius: .5rem;
+  background-color: hsl(19, 8%, 75%);
+}
+
+::-webkit-scrollbar-thumb{
+  border-radius: .5rem;
+  background-color: hsl(19, 8%, 65%)
+}
+
+::-webkit-scrollbar-thumb:hover{
+  background-color: hsl(19, 8%, 55%)
+}
+/*=============== SCROLL UP ===============*/
+.scrollup{
+  position: fixed;
+  right: 1rem;
+  bottom: 3rem;
+  background-color: var(--container-color);
+  box-shadow: 0 4px 12px hsla(19, 64%, 24%, .1);
+  display: inline-flex;
+  padding: .35rem;
+  border-radius: .25rem;
+  font-size: 1.1rem;
+  color: var(--first-color);
+  z-index: var(--z-tooltip);
+  transition: bottom .3s, transform .3s, background .4s;
+
+}
+
+.scrollup:hover{
+  transform: translateY(-.25rem);
+}
+/* Show Scroll Up*/
+.show-scroll{
+  bottom: 3rem;
+}
+
+/*=============== BREAKPOINTS ===============*/
+/* For small devices */
+@media screen and (max-width: 340px){
+  .container{
+    margin-inline: 1rem;
+  }
+
+  .section{
+    padding-block: 4rem 1;
+  }
+
+  .home__title{
+    font-size: 2rem;
+  }
+  .home__leaf-1{
+    top: 5rem;
+  }
+  .home__leaf-2{
+    bottom: 0;
+  }
+
+  .about__leaf{
+    bottom: 8rem;
+
+  }
+
+  .recently__data-img{
+    right: .5rem;
+
+  }
+
+  .newsletter__content{
+    padding: 6rem 1rem 2rem;
+  }
+  .newsletter__form{
+    flex-direction: column;
+    background: none;
+    row-gap: 1rem;
+  }
+  .newsletter__input{
+    width: initial;
+    padding: 1rem;
+    border-radius: 4rem;
+  }
+  .newsletter__button{
+    justify-content: center;
+  }
+
+  .footer__content{
+    gap: 1.5rem;
+  }
+}
+
+/* For medium devices */
+@media screen and (min-width: 576px){
+  .home__container,
+  .about__container,
+  .recently__container,
+  .newsletter__content
+  {
+    grid-template-columns: .7fr;
+    justify-content: center;
+  }
+
+  .footer__content{
+    grid-template-columns: repeat(3, max-content);
+  }
+}
+
+@media screen and (min-width: 767px) {
+  .nav{
+    column-gap: 3rem;
+  }
+
+  .nav__toggle,
+  .nav__close,
+  .nav__img-1,
+  .nav__img-2{
+    display: none;
+  }
+
+  .nav__list{
+    flex-direction: row;
+    column-gap: 3rem;
+
+  }
+
+  .nav__menu{
+    margin-left: auto;
+  }
+  
+  .dark-theme .nav__menu{
+    box-shadow: none;
+  }
+  .popular__container{
+    grid-template-columns: repeat(2, 240px);
+  }
+
+  .footer__content{
+    grid-template-columns: repeat(4, max-content);
+  }
+}
+
+/* For large devices */
+@media screen and (min-width: 1024px){
+  .section{
+    padding-block: 7rem 1.5rem;
+  }
+
+  .section__subtitle{
+    margin-bottom: .75rem;
+  }
+
+  .nav{
+    height: calc(var(--header-height) + 1.5rem);
+  }
+  .home__container{
+    position: relative;
+    grid-template-columns: 480px 500px;
+    padding-block: 7rem 3rem;
+  }
+  .home__data{
+    text-align: initial;
+    order: -1;
+  }
+  .home__title img{
+    width: 60px;
+  }
+
+  .home__title div{
+    justify-content: initial;
+    column-gap: 1rem;
+  }
+  .home__description{
+    padding-inline: 0 10rem;
+
+  }
+
+  .home__img{
+    width: 600px;
+    position: absolute;
+    top: 5rem;
+    right:-2rem;
+  }
+  .about__container{
+    grid-template-columns: 450px 360px;
+    align-items: center;
+    column-gap: 7rem;
+  }
+  .about__data{
+    order: 1;
+
+  }
+
+  .about__data,
+  .about .section__subtitle,
+  .about .section__title{
+    text-align: initial;
+  }
+  .about__title div{
+    column-gap: 1rem;
+    justify-content: initial;
+  }
+  .about__title img{
+    width: 50px;
+  }
+  .about__img{
+    width: 450px;
+  }
+  .popular__container{
+    grid-template-columns: repeat(3, 262px);
+    column-gap: 3.5rem;
+    padding-block: 6rem 4rem;
+  }
+  .popular__card{
+    padding: 7.5rem 2rem 2rem;
+    border-radius: 1.5rem;
+  }
+  .popular__img{
+    width: 230px;
+  }
+  .popular__button{
+    bottom: 2rem;
+
+  }
+  .recently__container{
+    grid-template-columns: 350px 480px;
+    align-items: center;
+    column-gap: 7rem;
+    padding-bottom: 2rem;
+  }
+
+  .recently__data,
+  .recently .section__subtitle,
+  .recently .section__title{
+    text-align: initial;
+
+  }
+  .recently__data-img{
+    width: 30px;
+    top: 5.5rem;
+    right: 2.5rem;
+  }
+
+  .recently__img{
+    width: 480px;
+
+  }
+
+  .newsletter__content{
+    grid-template-columns: 350px 360px;
+    align-items: center;
+    column-gap: 6rem;
+    padding: 2.5rem;  
+    border-radius: 4.5rem;
+  }
+  .newsleter__img{
+    position: initial;
+    width: 350px;
+  }
+
+  .newsletter .section__subtitle,
+  .newsletter .section__title{
+    text-align: initial;
+  }
+  .newsletter .section__title{
+    margin-bottom: 2.5rem;
+  }
+  .newsletter__form{
+    padding: 8px 8px 8px 24px;
+
+  }
+  .newsletter__button{
+    font-size: var(--normal-font-size);
+  }
+  .newsletter__spinach{
+    width: 40px;
+    right: 5rem;
+    bottom: -2.5rem;
+
+  }
+
+  .footer{
+    padding-block: 8rem 3rem;
+  }
+  .footer__container{
+    position: relative;
+    grid-template-columns: repeat(2, max-content);
+    justify-content: space-between;
+  }
+
+  .footer__content{
+    column-gap: 4rem;
+
+  }
+
+  .footer__title,
+  .footer__description,
+  .footer__link,
+  .footer__information{
+    font-size: var(--normal-font-size);
+
+  }
+  .footer__social-link{
+    font-size: 1.5rem;
+  }
+  .footer__info{
+    flex-direction: row;
+    justify-content: space-between;
+    margin-top: 8.5rem;
+  }
+  .footer__copy{
+    order: -1;
+  }
+  .footer__spinach{
+    bottom: -3rem;
+    left: 6rem;
+  }
+  .footer__onion,
+  .footer__onion-1{
+    right: 1rem;
+  }
+
+  .scrollup{
+    right: 3rem;
+  }
+}
+
+@media screen and (min-width: 1064px){
+  .container{
+    margin-inline: auto;
+  }
+}
+
+@media screen and (min-width: 1280px){
+  .home__leaf-1{
+    width: 150px;
+    top: 5rem;
+  }
+
+  .home__leaf-2{
+    width: 180px;
+    right: -4rem;
+
+  }
+
+  .about__leaf{
+    width: 200px;
+    bottom: 3rem;
+  }
+
+  .recently__leaf-1{
+    width: 150px;
+    top: 19rem;
+  }
+
+  .recently__leaf-2{
+    width: 100px;
+    bottom: 15rem;
+  }
+
+  .footer__leaf{
+    right: 0;
+    left: 0;
+    bottom: -15rem;
+    margin: 0 auto;
+    width: 150px;
+  }
+  .newsletter__img{
+    width: 250px;
+    position: relative;
+    left: -8rem;
+  }
+  .newsletter__content {
+    grid-template-columns: 198px 390px;
+    align-items: center;
+    /* column-gap: 6rem; */
+    padding: 2.5rem;
+    border-radius: 4.5rem;
+  }
+}
\ No newline at end of file
diff --git a/assets/img/about-sushi-title.png b/assets/img/about-sushi-title.png
new file mode 100644
index 0000000..fa6c57b
Binary files /dev/null and b/assets/img/about-sushi-title.png differ
diff --git a/assets/img/about-sushi.png b/assets/img/about-sushi.png
new file mode 100644
index 0000000..2ed53c2
Binary files /dev/null and b/assets/img/about-sushi.png differ
diff --git a/assets/img/favicon.png b/assets/img/favicon.png
new file mode 100644
index 0000000..854ee65
Binary files /dev/null and b/assets/img/favicon.png differ
diff --git a/assets/img/footer-card-1.png b/assets/img/footer-card-1.png
new file mode 100644
index 0000000..460a5b6
Binary files /dev/null and b/assets/img/footer-card-1.png differ
diff --git a/assets/img/footer-card-2.png b/assets/img/footer-card-2.png
new file mode 100644
index 0000000..a35dc73
Binary files /dev/null and b/assets/img/footer-card-2.png differ
diff --git a/assets/img/footer-card-3.png b/assets/img/footer-card-3.png
new file mode 100644
index 0000000..0ec7759
Binary files /dev/null and b/assets/img/footer-card-3.png differ
diff --git a/assets/img/footer-card-4.png b/assets/img/footer-card-4.png
new file mode 100644
index 0000000..e488256
Binary files /dev/null and b/assets/img/footer-card-4.png differ
diff --git a/assets/img/home-sushi-rolls.png b/assets/img/home-sushi-rolls.png
new file mode 100644
index 0000000..f79acf0
Binary files /dev/null and b/assets/img/home-sushi-rolls.png differ
diff --git a/assets/img/home-sushi-title.png b/assets/img/home-sushi-title.png
new file mode 100644
index 0000000..b562be5
Binary files /dev/null and b/assets/img/home-sushi-title.png differ
diff --git a/assets/img/leaf-branch-1.png b/assets/img/leaf-branch-1.png
new file mode 100644
index 0000000..0e201bf
Binary files /dev/null and b/assets/img/leaf-branch-1.png differ
diff --git a/assets/img/leaf-branch-2.png b/assets/img/leaf-branch-2.png
new file mode 100644
index 0000000..1073b5c
Binary files /dev/null and b/assets/img/leaf-branch-2.png differ
diff --git a/assets/img/leaf-branch-3.png b/assets/img/leaf-branch-3.png
new file mode 100644
index 0000000..64546a6
Binary files /dev/null and b/assets/img/leaf-branch-3.png differ
diff --git a/assets/img/leaf-branch-4.png b/assets/img/leaf-branch-4.png
new file mode 100644
index 0000000..be38601
Binary files /dev/null and b/assets/img/leaf-branch-4.png differ
diff --git a/assets/img/logo.png b/assets/img/logo.png
new file mode 100644
index 0000000..391a36e
Binary files /dev/null and b/assets/img/logo.png differ
diff --git a/assets/img/newsletter-sushi.png b/assets/img/newsletter-sushi.png
new file mode 100644
index 0000000..090e78b
Binary files /dev/null and b/assets/img/newsletter-sushi.png differ
diff --git a/assets/img/popular-onigiri.png b/assets/img/popular-onigiri.png
new file mode 100644
index 0000000..f2e46a2
Binary files /dev/null and b/assets/img/popular-onigiri.png differ
diff --git a/assets/img/popular-spring-rols.png b/assets/img/popular-spring-rols.png
new file mode 100644
index 0000000..d216661
Binary files /dev/null and b/assets/img/popular-spring-rols.png differ
diff --git a/assets/img/popular-sushi-rolls.png b/assets/img/popular-sushi-rolls.png
new file mode 100644
index 0000000..dd30833
Binary files /dev/null and b/assets/img/popular-sushi-rolls.png differ
diff --git a/assets/img/recently-salmon-sushi.png b/assets/img/recently-salmon-sushi.png
new file mode 100644
index 0000000..985ecef
Binary files /dev/null and b/assets/img/recently-salmon-sushi.png differ
diff --git a/assets/img/spinach-leaf.png b/assets/img/spinach-leaf.png
new file mode 100644
index 0000000..3e30a8d
Binary files /dev/null and b/assets/img/spinach-leaf.png differ
diff --git a/assets/img/spring-onion.png b/assets/img/spring-onion.png
new file mode 100644
index 0000000..dc10529
Binary files /dev/null and b/assets/img/spring-onion.png differ
diff --git a/assets/js/main.js b/assets/js/main.js
new file mode 100644
index 0000000..f0e3409
--- /dev/null
+++ b/assets/js/main.js
@@ -0,0 +1,115 @@
+/*=============== SHOW MENU ===============*/
+const navMenu = document.getElementById('nav-menu'),
+      navToggle = document.getElementById('nav-toggle'),
+      navClose = document.getElementById('nav-close')
+
+/*===== MENU SHOW =====*/
+/* Validate if constant exists */
+if(navToggle){
+    navToggle.addEventListener('click', () =>{
+        navMenu.classList.add('show-menu')
+    })
+}
+
+/*===== MENU HIDDEN =====*/
+/* Validate if constant exists */
+if(navClose){
+    navClose.addEventListener('click', () =>{
+        navMenu.classList.remove('show-menu')
+    })
+}
+
+/*=============== REMOVE MENU MOBILE ===============*/
+const navLink = document.querySelectorAll('.nav__link')
+
+const linkAction = () =>{
+    const navMenu = document.getElementById('nav-menu')
+    // When we click on each nav__link, we remove the show-menu class
+    navMenu.classList.remove('show-menu')
+}
+navLink.forEach(n => n.addEventListener('click', linkAction))
+
+/*=============== CHANGE BACKGROUND HEADER ===============*/
+const scrollHeader = () =>{
+    const header = document.getElementById('header')
+    // When the scroll is greater than 50 viewport height, add the scroll-header class to the header tag
+    this.scrollY >= 50 ? header.classList.add('bg-header') 
+                       : header.classList.remove('bg-header')
+}
+window.addEventListener('scroll', scrollHeader)
+
+/*=============== SHOW SCROLL UP ===============*/ 
+const scrollUp = () =>{
+	const scrollUp = document.getElementById('scroll-up')
+    // When the scroll is higher than 350 viewport height, add the show-scroll class to the a tag with the scrollup class
+	this.scrollY >= 350 ? scrollUp.classList.add('show-scroll')
+						: scrollUp.classList.remove('show-scroll')
+}
+window.addEventListener('scroll', scrollUp)
+
+
+/*=============== SCROLL SECTIONS ACTIVE LINK ===============*/
+
+const sections = document.querySelectorAll('section[id]')
+    
+const scrollActive = () =>{
+  	const scrollY = window.pageYOffset
+
+	sections.forEach(current =>{
+		const sectionHeight = current.offsetHeight,
+			  sectionTop = current.offsetTop - 58,
+			  sectionId = current.getAttribute('id'),
+			  sectionsClass = document.querySelector('.nav__menu a[href*=' + sectionId + ']')
+
+		if(scrollY > sectionTop && scrollY <= sectionTop + sectionHeight){
+			sectionsClass.classList.add('active-link')
+		}else{
+			sectionsClass.classList.remove('active-link')
+		}                                                    
+	})
+}
+window.addEventListener('scroll', scrollActive)
+
+/*=============== DARK LIGHT THEME ===============*/ 
+const themeButton = document.getElementById('theme-button')
+const darkTheme = 'dark-theme'
+const iconTheme = 'ri-sun-line'
+
+// Previously selected topic (if user selected)
+const selectedTheme = localStorage.getItem('selected-theme')
+const selectedIcon = localStorage.getItem('selected-icon')
+
+// We obtain the current theme that the interface has by validating the dark-theme class
+const getCurrentTheme = () => document.body.classList.contains(darkTheme) ? 'dark' : 'light'
+const getCurrentIcon = () => themeButton.classList.contains(iconTheme) ? 'ri-moon-line' : 'ri-sun-line'
+
+// We validate if the user previously chose a topic
+if (selectedTheme) {
+  // If the validation is fulfilled, we ask what the issue was to know if we activated or deactivated the dark
+  document.body.classList[selectedTheme === 'dark' ? 'add' : 'remove'](darkTheme)
+  themeButton.classList[selectedIcon === 'ri-moon-line' ? 'add' : 'remove'](iconTheme)
+}
+
+// Activate / deactivate the theme manually with the button
+themeButton.addEventListener('click', () => {
+    // Add or remove the dark / icon theme
+    document.body.classList.toggle(darkTheme)
+    themeButton.classList.toggle(iconTheme)
+    // We save the theme and the current icon that the user chose
+    localStorage.setItem('selected-theme', getCurrentTheme())
+    localStorage.setItem('selected-icon', getCurrentIcon())
+})
+
+/*=============== SCROLL REVEAL ANIMATION ===============*/
+const sr = ScrollReveal({
+    origin: 'top',
+    distance: '60px',
+    duration: 2500,
+    delay: 400,
+})
+
+sr.reveal(`.home__img, .newsletter__container, .footer__logo, .footer__description, .footer__content, footer__info`)
+sr.reveal(`.home__data`, {origin: 'bottom'})
+sr.reveal(`.about__data, recently__data`, {origin: 'left'})
+sr.reveal(`.about__img, recently__img`, {origin: 'right'})
+sr.reveal(`.popular__card`, {interval: 115})
\ No newline at end of file
diff --git a/assets/js/scrollreveal.min.js b/assets/js/scrollreveal.min.js
new file mode 100644
index 0000000..6d8acac
--- /dev/null
+++ b/assets/js/scrollreveal.min.js
@@ -0,0 +1,12 @@
+/*! @license ScrollReveal v4.0.9
+
+	Copyright 2021 Fisssion LLC.
+
+	Licensed under the GNU General Public License 3.0 for
+	compatible open source projects and non-commercial use.
+
+	For commercial sites, themes, projects, and applications,
+	keep your source code private/proprietary by purchasing
+	a commercial license from https://scrollrevealjs.org/
+*/
+var ScrollReveal=function(){"use strict";var r={delay:0,distance:"0",duration:600,easing:"cubic-bezier(0.5, 0, 0, 1)",interval:0,opacity:0,origin:"bottom",rotate:{x:0,y:0,z:0},scale:1,cleanup:!1,container:document.documentElement,desktop:!0,mobile:!0,reset:!1,useDelay:"always",viewFactor:0,viewOffset:{top:0,right:0,bottom:0,left:0},afterReset:function(){},afterReveal:function(){},beforeReset:function(){},beforeReveal:function(){}};var n={success:function(){document.documentElement.classList.add("sr"),document.body?document.body.style.height="100%":document.addEventListener("DOMContentLoaded",function(){document.body.style.height="100%"})},failure:function(){return document.documentElement.classList.remove("sr"),{clean:function(){},destroy:function(){},reveal:function(){},sync:function(){},get noop(){return!0}}}};function o(e){return"object"==typeof window.Node?e instanceof window.Node:null!==e&&"object"==typeof e&&"number"==typeof e.nodeType&&"string"==typeof e.nodeName}function u(e,t){if(void 0===t&&(t=document),e instanceof Array)return e.filter(o);if(o(e))return[e];if(n=e,i=Object.prototype.toString.call(n),"object"==typeof window.NodeList?n instanceof window.NodeList:null!==n&&"object"==typeof n&&"number"==typeof n.length&&/^\[object (HTMLCollection|NodeList|Object)\]$/.test(i)&&(0===n.length||o(n[0])))return Array.prototype.slice.call(e);var n,i;if("string"==typeof e)try{var r=t.querySelectorAll(e);return Array.prototype.slice.call(r)}catch(e){return[]}return[]}function s(e){return null!==e&&e instanceof Object&&(e.constructor===Object||"[object Object]"===Object.prototype.toString.call(e))}function f(n,i){if(s(n))return Object.keys(n).forEach(function(e){return i(n[e],e,n)});if(n instanceof Array)return n.forEach(function(e,t){return i(e,t,n)});throw new TypeError("Expected either an array or object literal.")}function h(e){for(var t=[],n=arguments.length-1;0<n--;)t[n]=arguments[n+1];if(this.constructor.debug&&console){var i="%cScrollReveal: "+e;t.forEach(function(e){return i+="\n — "+e}),console.log(i,"color: #ea654b;")}}function t(){var n=this,i={active:[],stale:[]},t={active:[],stale:[]},r={active:[],stale:[]};try{f(u("[data-sr-id]"),function(e){var t=parseInt(e.getAttribute("data-sr-id"));i.active.push(t)})}catch(e){throw e}f(this.store.elements,function(e){-1===i.active.indexOf(e.id)&&i.stale.push(e.id)}),f(i.stale,function(e){return delete n.store.elements[e]}),f(this.store.elements,function(e){-1===r.active.indexOf(e.containerId)&&r.active.push(e.containerId),e.hasOwnProperty("sequence")&&-1===t.active.indexOf(e.sequence.id)&&t.active.push(e.sequence.id)}),f(this.store.containers,function(e){-1===r.active.indexOf(e.id)&&r.stale.push(e.id)}),f(r.stale,function(e){var t=n.store.containers[e].node;t.removeEventListener("scroll",n.delegate),t.removeEventListener("resize",n.delegate),delete n.store.containers[e]}),f(this.store.sequences,function(e){-1===t.active.indexOf(e.id)&&t.stale.push(e.id)}),f(t.stale,function(e){return delete n.store.sequences[e]})}function N(e){if(e.constructor!==Array)throw new TypeError("Expected array.");if(16===e.length)return e;if(6!==e.length)throw new RangeError("Expected array with either 6 or 16 values.");var t=z();return t[0]=e[0],t[1]=e[1],t[4]=e[2],t[5]=e[3],t[12]=e[4],t[13]=e[5],t}function z(){for(var e=[],t=0;t<16;t++)t%5==0?e.push(1):e.push(0);return e}function F(e,t){for(var n=N(e),i=N(t),r=[],o=0;o<4;o++)for(var s=[n[o],n[o+4],n[o+8],n[o+12]],a=0;a<4;a++){var c=4*a,l=[i[c],i[c+1],i[c+2],i[c+3]],d=s[0]*l[0]+s[1]*l[1]+s[2]*l[2]+s[3]*l[3];r[o+c]=d}return r}function D(e,t){var n=z();return n[0]=e,n[5]="number"==typeof t?t:e,n}var S=function(){var n={},i=document.documentElement.style;function e(e,t){if(void 0===t&&(t=i),e&&"string"==typeof e){if(n[e])return n[e];if("string"==typeof t[e])return n[e]=e;if("string"==typeof t["-webkit-"+e])return n[e]="-webkit-"+e;throw new RangeError('Unable to find "'+e+'" style property.')}throw new TypeError("Expected a string.")}return e.clearCache=function(){return n={}},e}();function p(e){var t=window.getComputedStyle(e.node),n=t.position,i=e.config,r={},o=(e.node.getAttribute("style")||"").match(/[\w-]+\s*:\s*[^;]+\s*/gi)||[];r.computed=o?o.map(function(e){return e.trim()}).join("; ")+";":"",r.generated=o.some(function(e){return e.match(/visibility\s?:\s?visible/i)})?r.computed:o.concat(["visibility: visible"]).map(function(e){return e.trim()}).join("; ")+";";var s,a,c,l,d,u,f,h,p,m,y,v,g,b=parseFloat(t.opacity),w=isNaN(parseFloat(i.opacity))?parseFloat(t.opacity):parseFloat(i.opacity),E={computed:b!==w?"opacity: "+b+";":"",generated:b!==w?"opacity: "+w+";":""},j=[];if(parseFloat(i.distance)){var T="top"===i.origin||"bottom"===i.origin?"Y":"X",k=i.distance;"top"!==i.origin&&"left"!==i.origin||(k=/^-/.test(k)?k.substr(1):"-"+k);var O=k.match(/(^-?\d+\.?\d?)|(em$|px$|%$)/g),x=O[0];switch(O[1]){case"em":k=parseInt(t.fontSize)*x;break;case"px":k=x;break;case"%":k="Y"===T?e.node.getBoundingClientRect().height*x/100:e.node.getBoundingClientRect().width*x/100;break;default:throw new RangeError("Unrecognized or missing distance unit.")}"Y"===T?j.push((c=k,(l=z())[13]=c,l)):j.push((s=k,(a=z())[12]=s,a))}i.rotate.x&&j.push((d=i.rotate.x,u=Math.PI/180*d,(f=z())[5]=f[10]=Math.cos(u),f[6]=f[9]=Math.sin(u),f[9]*=-1,f)),i.rotate.y&&j.push((h=i.rotate.y,p=Math.PI/180*h,(m=z())[0]=m[10]=Math.cos(p),m[2]=m[8]=Math.sin(p),m[2]*=-1,m)),i.rotate.z&&j.push((y=i.rotate.z,v=Math.PI/180*y,(g=z())[0]=g[5]=Math.cos(v),g[1]=g[4]=Math.sin(v),g[4]*=-1,g)),1!==i.scale&&(0===i.scale?j.push(D(2e-4)):j.push(D(i.scale)));var R={};if(j.length){R.property=S("transform"),R.computed={raw:t[R.property],matrix:function(e){if("string"==typeof e){var t=e.match(/matrix(3d)?\(([^)]+)\)/);if(t)return N(t[2].split(", ").map(parseFloat))}return z()}(t[R.property])},j.unshift(R.computed.matrix);var q=j.reduce(F);R.generated={initial:R.property+": matrix3d("+q.join(", ")+");",final:R.property+": matrix3d("+R.computed.matrix.join(", ")+");"}}else R.generated={initial:"",final:""};var A={};if(E.generated||R.generated.initial){A.property=S("transition"),A.computed=t[A.property],A.fragments=[];var P=i.delay,L=i.duration,M=i.easing;E.generated&&A.fragments.push({delayed:"opacity "+L/1e3+"s "+M+" "+P/1e3+"s",instant:"opacity "+L/1e3+"s "+M+" 0s"}),R.generated.initial&&A.fragments.push({delayed:R.property+" "+L/1e3+"s "+M+" "+P/1e3+"s",instant:R.property+" "+L/1e3+"s "+M+" 0s"}),A.computed&&!A.computed.match(/all 0s|none 0s/)&&A.fragments.unshift({delayed:A.computed,instant:A.computed});var I=A.fragments.reduce(function(e,t,n){return e.delayed+=0===n?t.delayed:", "+t.delayed,e.instant+=0===n?t.instant:", "+t.instant,e},{delayed:"",instant:""});A.generated={delayed:A.property+": "+I.delayed+";",instant:A.property+": "+I.instant+";"}}else A.generated={delayed:"",instant:""};return{inline:r,opacity:E,position:n,transform:R,transition:A}}function m(r,e){e.split(";").forEach(function(e){var t=e.split(":"),n=t[0],i=t.slice(1);n&&i&&(r.style[n.trim()]=i.join(":"))})}function y(e){var i,r=this;try{f(u(e),function(e){var t=e.getAttribute("data-sr-id");if(null!==t){i=!0;var n=r.store.elements[t];n.callbackTimer&&window.clearTimeout(n.callbackTimer.clock),m(n.node,n.styles.inline.generated),e.removeAttribute("data-sr-id"),delete r.store.elements[t]}})}catch(e){return h.call(this,"Clean failed.",e.message)}if(i)try{t.call(this)}catch(e){return h.call(this,"Clean failed.",e.message)}}function v(n){for(var e=[],t=arguments.length-1;0<t--;)e[t]=arguments[t+1];if(s(n))return f(e,function(e){f(e,function(e,t){s(e)?(n[t]&&s(n[t])||(n[t]={}),v(n[t],e)):n[t]=e})}),n;throw new TypeError("Target must be an object literal.")}function g(e){return void 0===e&&(e=navigator.userAgent),/Android|iPhone|iPad|iPod/i.test(e)}var e,b=(e=0,function(){return e++});function w(){var n=this;t.call(this),f(this.store.elements,function(e){var t=[e.styles.inline.generated];e.visible?(t.push(e.styles.opacity.computed),t.push(e.styles.transform.generated.final),e.revealed=!0):(t.push(e.styles.opacity.generated),t.push(e.styles.transform.generated.initial),e.revealed=!1),m(e.node,t.filter(function(e){return""!==e}).join(" "))}),f(this.store.containers,function(e){var t=e.node===document.documentElement?window:e.node;t.addEventListener("scroll",n.delegate),t.addEventListener("resize",n.delegate)}),this.delegate(),this.initTimeout=null}function c(e,t){void 0===t&&(t={});var n=t.pristine||this.pristine,i="always"===e.config.useDelay||"onload"===e.config.useDelay&&n||"once"===e.config.useDelay&&!e.seen,r=e.visible&&!e.revealed,o=!e.visible&&e.revealed&&e.config.reset;return t.reveal||r?function(e,t){var n=[e.styles.inline.generated,e.styles.opacity.computed,e.styles.transform.generated.final];t?n.push(e.styles.transition.generated.delayed):n.push(e.styles.transition.generated.instant);e.revealed=e.seen=!0,m(e.node,n.filter(function(e){return""!==e}).join(" ")),a.call(this,e,t)}.call(this,e,i):t.reset||o?function(e){var t=[e.styles.inline.generated,e.styles.opacity.generated,e.styles.transform.generated.initial,e.styles.transition.generated.instant];e.revealed=!1,m(e.node,t.filter(function(e){return""!==e}).join(" ")),a.call(this,e)}.call(this,e):void 0}function a(e,t){var n=this,i=t?e.config.duration+e.config.delay:e.config.duration,r=e.revealed?e.config.beforeReveal:e.config.beforeReset,o=e.revealed?e.config.afterReveal:e.config.afterReset,s=0;e.callbackTimer&&(s=Date.now()-e.callbackTimer.start,window.clearTimeout(e.callbackTimer.clock)),r(e.node),e.callbackTimer={start:Date.now(),clock:window.setTimeout(function(){o(e.node),e.callbackTimer=null,e.revealed&&!e.config.reset&&e.config.cleanup&&y.call(n,e.node)},i-s)}}function l(e,t){if(void 0===t&&(t=this.pristine),!e.visible&&e.revealed&&e.config.reset)return c.call(this,e,{reset:!0});var n=this.store.sequences[e.sequence.id],i=e.sequence.index;if(n){var r=new d(n,"visible",this.store),o=new d(n,"revealed",this.store);if(n.models={visible:r,revealed:o},!o.body.length){var s=n.members[r.body[0]],a=this.store.elements[s];if(a)return j.call(this,n,r.body[0],-1,t),j.call(this,n,r.body[0],1,t),c.call(this,a,{reveal:!0,pristine:t})}if(!n.blocked.head&&i===[].concat(o.head).pop()&&i>=[].concat(r.body).shift())return j.call(this,n,i,-1,t),c.call(this,e,{reveal:!0,pristine:t});if(!n.blocked.foot&&i===[].concat(o.foot).shift()&&i<=[].concat(r.body).pop())return j.call(this,n,i,1,t),c.call(this,e,{reveal:!0,pristine:t})}}function E(e){var t=Math.abs(e);if(isNaN(t))throw new RangeError("Invalid sequence interval.");this.id=b(),this.interval=Math.max(t,16),this.members=[],this.models={},this.blocked={head:!1,foot:!1}}function d(e,i,r){var o=this;this.head=[],this.body=[],this.foot=[],f(e.members,function(e,t){var n=r.elements[e];n&&n[i]&&o.body.push(t)}),this.body.length&&f(e.members,function(e,t){var n=r.elements[e];n&&!n[i]&&(t<o.body[0]?o.head.push(t):o.foot.push(t))})}function j(e,t,n,i){var r=this,o=["head",null,"foot"][1+n],s=e.members[t+n],a=this.store.elements[s];e.blocked[o]=!0,setTimeout(function(){e.blocked[o]=!1,a&&l.call(r,a,i)},e.interval)}function i(e,a,t){var c=this;void 0===a&&(a={}),void 0===t&&(t=!1);var l,d=[],n=a.interval||r.interval;try{n&&(l=new E(n));var i=u(e);if(!i.length)throw new Error("Invalid reveal target.");f(i.reduce(function(e,t){var n={},i=t.getAttribute("data-sr-id");i?(v(n,c.store.elements[i]),m(n.node,n.styles.inline.computed)):(n.id=b(),n.node=t,n.seen=!1,n.revealed=!1,n.visible=!1);var r=v({},n.config||c.defaults,a);if(!r.mobile&&g()||!r.desktop&&!g())return i&&y.call(c,n),e;var o,s=u(r.container)[0];if(!s)throw new Error("Invalid container.");return s.contains(t)&&(null===(o=function(t){var e=[],n=arguments.length-1;for(;0<n--;)e[n]=arguments[n+1];var i=null;return f(e,function(e){f(e,function(e){null===i&&e.node===t&&(i=e.id)})}),i}(s,d,c.store.containers))&&(o=b(),d.push({id:o,node:s})),n.config=r,n.containerId=o,n.styles=p(n),l&&(n.sequence={id:l.id,index:l.members.length},l.members.push(n.id)),e.push(n)),e},[]),function(e){(c.store.elements[e.id]=e).node.setAttribute("data-sr-id",e.id)})}catch(e){return h.call(this,"Reveal failed.",e.message)}f(d,function(e){c.store.containers[e.id]={id:e.id,node:e.node}}),l&&(this.store.sequences[l.id]=l),!0!==t&&(this.store.history.push({target:e,options:a}),this.initTimeout&&window.clearTimeout(this.initTimeout),this.initTimeout=window.setTimeout(w.bind(this),0))}var T,k=Math.sign||function(e){return(0<e)-(e<0)||+e},O=(T=Date.now(),function(e){var t=Date.now();16<t-T?e(T=t):setTimeout(function(){return O(e)},0)}),x=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||O;function R(e,t){for(var n=t?e.node.clientHeight:e.node.offsetHeight,i=t?e.node.clientWidth:e.node.offsetWidth,r=0,o=0,s=e.node;isNaN(s.offsetTop)||(r+=s.offsetTop),isNaN(s.offsetLeft)||(o+=s.offsetLeft),s=s.offsetParent;);return{bounds:{top:r,right:o+i,bottom:r+n,left:o},height:n,width:i}}function q(e,t){var i=this;void 0===e&&(e={type:"init"}),void 0===t&&(t=this.store.elements),x(function(){var n="init"===e.type||"resize"===e.type;f(i.store.containers,function(e){n&&(e.geometry=R.call(i,e,!0));var t=function(e){var t,n;return n=e.node===document.documentElement?(t=window.pageYOffset,window.pageXOffset):(t=e.node.scrollTop,e.node.scrollLeft),{top:t,left:n}}.call(i,e);e.scroll&&(e.direction={x:k(t.left-e.scroll.left),y:k(t.top-e.scroll.top)}),e.scroll=t}),f(t,function(e){(n||void 0===e.geometry)&&(e.geometry=R.call(i,e)),e.visible=function(e){void 0===e&&(e={});var t=this.store.containers[e.containerId];if(t){var n=Math.max(0,Math.min(1,e.config.viewFactor)),i=e.config.viewOffset,r=e.geometry.bounds.top+e.geometry.height*n,o=e.geometry.bounds.right-e.geometry.width*n,s=e.geometry.bounds.bottom-e.geometry.height*n,a=e.geometry.bounds.left+e.geometry.width*n,c=t.geometry.bounds.top+t.scroll.top+i.top,l=t.geometry.bounds.right+t.scroll.left-i.right,d=t.geometry.bounds.bottom+t.scroll.top-i.bottom,u=t.geometry.bounds.left+t.scroll.left+i.left;return r<d&&u<o&&c<s&&a<l||"fixed"===e.styles.position}}.call(i,e)}),f(t,function(e){e.sequence?l.call(i,e):c.call(i,e)}),i.pristine=!1})}var A,P,L,M,I,C,W,Y,$="4.0.9";function H(e){var t;if(void 0===e&&(e={}),void 0===this||Object.getPrototypeOf(this)!==H.prototype)return new H(e);if(!H.isSupported())return h.call(this,"Instantiation failed.","This browser is not supported."),n.failure();try{t=v({},C||r,e)}catch(e){return h.call(this,"Invalid configuration.",e.message),n.failure()}try{if(!u(t.container)[0])throw new Error("Invalid container.")}catch(e){return h.call(this,e.message),n.failure()}return!(C=t).mobile&&g()||!C.desktop&&!g()?(h.call(this,"This device is disabled.","desktop: "+C.desktop,"mobile: "+C.mobile),n.failure()):(n.success(),this.store={containers:{},elements:{},history:[],sequences:{}},this.pristine=!0,A=A||q.bind(this),P=P||function(){var n=this;f(this.store.elements,function(e){m(e.node,e.styles.inline.generated),e.node.removeAttribute("data-sr-id")}),f(this.store.containers,function(e){var t=e.node===document.documentElement?window:e.node;t.removeEventListener("scroll",n.delegate),t.removeEventListener("resize",n.delegate)}),this.store={containers:{},elements:{},history:[],sequences:{}}}.bind(this),L=L||i.bind(this),M=M||y.bind(this),I=I||function(){var t=this;f(this.store.history,function(e){i.call(t,e.target,e.options,!0)}),w.call(this)}.bind(this),Object.defineProperty(this,"delegate",{get:function(){return A}}),Object.defineProperty(this,"destroy",{get:function(){return P}}),Object.defineProperty(this,"reveal",{get:function(){return L}}),Object.defineProperty(this,"clean",{get:function(){return M}}),Object.defineProperty(this,"sync",{get:function(){return I}}),Object.defineProperty(this,"defaults",{get:function(){return C}}),Object.defineProperty(this,"version",{get:function(){return $}}),Object.defineProperty(this,"noop",{get:function(){return!1}}),Y||(Y=this))}return H.isSupported=function(){return("transform"in(t=document.documentElement.style)||"WebkitTransform"in t)&&("transition"in(e=document.documentElement.style)||"WebkitTransition"in e);var e,t},Object.defineProperty(H,"debug",{get:function(){return W||!1},set:function(e){return W="boolean"==typeof e?e:W}}),H(),H}();
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..a348b30
--- /dev/null
+++ b/index.html
@@ -0,0 +1,356 @@
+<!DOCTYPE html>
+    <html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+        <!--=============== FAVICON ===============-->
+        <link rel="shortcut icon" href="assets/img/favicon.png" type="image/x-icon">
+
+        <!--=============== REMIXICONS ===============-->
+        <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
+
+        <!--=============== CSS ===============-->
+        <link rel="stylesheet" href="assets/css/styles.css">
+
+        <title> Pamy's Sushi</title>
+    </head>
+    <body>
+        <!--==================== HEADER ====================-->
+        <header class="header" id="header">
+            <nav class="nav container">
+                <a href="" class="nav__logo">
+                    <img src="assets/img/logo.png" alt="logo image">
+                    Pamy's Sushi
+                </a>
+                <div class="nav__menu" id="nav-menu">
+                    <ul class="nav__list">
+                        <li class="nav__item">
+                            <a href="#home" class="nav__link active-link">Home</a>
+                        </li>
+
+                        <li class="nav__item">
+                            <a href="#about" class="nav__link">Sobre</a>
+                        </li>
+
+                        <li class="nav__item">
+                            <a href="#popular" class="nav__link">Populares</a>
+                        </li>
+
+                        <li class="nav__item">
+                            <a href="#recently" class="nav__link">Novidade</a>
+                        </li>
+                    </ul>
+
+                    <!-- Close Button -->
+                    <div class="nav__close" id="nav-close">
+                        <i class="ri-close-line"></i>
+                    </div>
+
+                    <img src="assets/img/leaf-branch-4.png" alt="nav image" class="nav__img-1">
+                    <img src="assets/img/leaf-branch-3.png" alt="nav image" class="nav__img-2">
+
+                </div>
+
+                <div class="nav__buttons">
+                    <!-- Theme Change Button -->
+                    <i class="ri-moon-line change-theme" id="theme-button"></i>
+
+                    <!-- Toggle button -->
+                    <div class="nav__toggle" id="nav-toggle">
+                        <i class="ri-apps-2-line"></i>
+                    </div>
+                </div>
+            </nav>
+        </header>
+
+        <!--==================== MAIN ====================-->
+        <main class="main">
+            <!--==================== HOME ====================-->
+            <section class="home section" id="home">
+                <div class="home__container container grid">
+                    <img src="assets/img/home-sushi-rolls.png" alt="home image" class="home__img">
+
+                    <div class="home__data">
+                        <h1 class="home__title">
+                            Pamy Sushi's
+
+                            <div>
+                                <img src="assets/img/home-sushi-title.png" alt="home image">
+                                O melhor
+                            </div>
+                        </h1>
+
+                        <p class="home__description">
+                            Aproveite um bom jantar com os melhores pratos no restaurante e melhore seu dia.
+                        </p>
+
+                        <a href="#" class="button">
+                            Faça seu pedido agora! <i class="ri-arrow-right-line"></i>
+                        </a>
+                    </div>
+                </div>
+
+                <img src="assets/img/leaf-branch-2.png" alt="home leaf" class="home__leaf-1">
+                <img src="assets/img/leaf-branch-4.png" alt="home leaf" class="home__leaf-2">
+
+            </section>
+
+            <!--==================== ABOUT ====================-->
+            <section class="about section" id="about">
+                <div class="about__container container grid">
+                    <div class="about__data">
+                        <span class="section__subtitle">
+                            Sobre nós
+                        </span>
+                        <h2 class="section__title about__title">
+                            <div>
+                                Nós fornecemos.
+                                <img src="assets/img/about-sushi-title.png" alt="about image">
+                            </div>
+                            Comida saudável
+                        </h2>
+
+                        <p class="about__description">
+                            A comida nos chega dos nossos parentes, quer tenham asas ou raízes. É assim que consideramos a comida, ela também possui uma cultura. Tem uma história que passa de geração em geração.
+                        </p>
+                    </div>
+
+                    <img src="assets/img/about-sushi.png" alt="about image" class="about__img">
+                </div>
+
+                <img src="assets/img/leaf-branch-1.png" alt="about image" class="about__leaf">
+            </section>
+
+            <!--==================== POPULAR ====================-->
+            <section class="popular section" id="popular">
+                <span class="section__subtitle">
+                    Os melhores pratos
+                </span>
+                <h2 class="section__title">
+                    Pratos populares
+                </h2>
+
+                <div class="popular__container container grid">
+                    <article class="popular__card">
+                        <img src="assets/img/popular-onigiri.png" alt="popular image" class="popular__img">
+
+                        <h3 class="popular name">Onigiri</h3>
+                            <span class="popular__description">
+                                Combo com cinco Onigiris
+                            </span>
+
+                            <span class="popular__price">R$60,00</span>
+                                <button class="popular__button">
+                                    <i class="ri-shopping-bag-line"></i>
+                                </button>
+                    </article>
+
+                    <article class="popular__card">
+                        <img src="assets/img/popular-spring-rols.png" alt="popular image" class="popular__img">
+
+                        <h3 class="popular name"> Rolinho Primavera</h3>
+                            <span class="popular__description">
+                                28 unidades
+                            </span>
+
+                            <span class="popular__price"> R$ 40,00</span>
+                                <button class="popular__button">
+                                    <i class="ri-shopping-bag-line"></i>
+                                </button>
+                    </article>
+
+                    <article class="popular__card">
+                        <img src="assets/img/popular-sushi-rolls.png" alt="popular image" class="popular__img">
+
+                        <h3 class="popular name">Rolos de Sushi's</h3>
+                            <span class="popular__description">
+                                3 Sushis salmão, 8 Rot hot-rolls, salada acompanha
+                            </span>
+
+                            <span class="popular__price"> R$ 50,00</span>
+                                <button class="popular__button">
+                                    <i class="ri-shopping-bag-line"></i>
+                                </button>
+                    </article>
+                </div>
+            </section>
+
+            <!--==================== RECENTLY ====================-->
+            <section class="recently section" id="recently">
+                <div class="recently__container container grid">
+                    <div class="recently__data">
+                        <span class="section__subtitle">
+                            Recente Adicionado
+                        </span>
+                        <h2 class="section__title">
+                            Sushi Samurai <br>
+                            Queijo e Salmão
+                        </h2>
+
+                        <p class="recently__description">
+                            Dê uma olhada no que há de novo. E não se prive de uma boa refeição, aproveite e seja feliz.
+                        </p>
+
+                        <a href="#" class="button">
+                            Faça seu Pedido <i class="ri-arrow-right-line"></i>
+                        </a>
+
+                        <img src="assets/img/spinach-leaf.png" alt="recently image" class="recently__data-img">
+                    </div>
+
+                    <img src="assets/img/recently-salmon-sushi.png" alt="recently image" class="recently__img">
+                </div>
+
+                <!-- <img src="assets/img/leaf-branch-2.png" alt="recently image" class="recently__leaf-1">
+                <img src="assets/img/leaf-branch-3.png" alt="recently image" class="recently__leaf-2"> -->
+
+            </section>
+
+            <!--==================== NEWSLETTER ====================-->
+            <section class="newsletter section">
+                <div class="newsletter__container container">
+                    <div class="newsletter__content grid">
+                        <img src="assets/img/newsletter-sushi.png" alt="newsletter image" class="newsletter__img">
+
+                        <div class="newsletter__data">
+                            <span class="section__subtitle"> Newsletter</span>
+                            <h2 class="section__title">
+                                Inscreva-se para <br>
+                                receber as novidades.
+                            </h2>
+
+                            <form action="" class="newsletter__form">
+                                <input type="email" placeholder="Digite seu e-mail" class="newsletter__input">
+
+                                <button class="button newsletter__button">
+                                     <i class="ri-send-plane-line"></i>
+                                </button>
+                            </form>
+                        </div>
+                    </div>
+
+                    <img src="assets/img/spinach-leaf.png" alt="newsletter__img" class="newsletter__spinach">
+                </div>
+                
+            </section>
+        </main>
+
+        <!--==================== FOOTER ====================-->
+        <footer class="footer">
+            <div class="footer__container container grid">
+                <div>
+                    <a href="#" class="footer__logo">
+                        <img src="assets/img/logo.png" alt="imagem do logo">
+                        Sushi
+                    </a>
+        
+                    <p class="footer__description">
+                        Comida para o corpo não é suficiente. Deve haver comida para a alma.
+                    </p>
+                </div>
+        
+                <div class="footer__content">
+                    <div>
+                        <h3 class="footer__title">Menu Principal</h3>
+                        <ul class="footer__links">
+                            <li>
+                                <a href="#" class="footer__link">Sobre</a>
+                            </li>
+                            <li>
+                                <a href="#" class="footer__link">Cardápios</a>
+                            </li>
+                            <li>
+                                <a href="#" class="footer__link">Ofertas</a>
+                            </li>
+                            <li>
+                                <a href="#" class="footer__link">Eventos</a>
+                            </li>
+                        </ul>
+                    </div>
+        
+                    <div>
+                        <h3 class="footer__title">Informações</h3>
+                        <ul class="footer__links">
+                            <li>
+                                <a href="#" class="footer__link">Contato</a>
+                            </li>
+                            <li>
+                                <a href="#" class="footer__link">Pedidos & Devoluções</a>
+                            </li>
+                            <li>
+                                <a href="#" class="footer__link">Vídeos</a>
+                            </li>
+                            <li>
+                                <a href="#" class="footer__link">Reservas</a>
+                            </li>
+                        </ul>
+                    </div>
+        
+                    <div>
+                        <h3 class="footer__title">Endereço</h3>
+                        <ul class="footer__links">
+                            <li class="footer__information">
+                                Av. Pamy 1234 <br>
+                               sei que la.&nbsp; Brazil.
+                            </li>
+                            <li class="footer__information">
+                                9h - 23h
+                            </li>
+                           
+                        </ul>
+                    </div>
+
+                    <div>
+                        <h3 class="footer__title">Social Media</h3>
+                        <ul class="footer__social">
+                           <a href="https://www.facebook.com/" target="_blank" class="footer__social-link">
+                            <i class="ri-facebook-box-fill"></i>
+                           </a> 
+
+                           <a href="https://www.instagram.com/" target="_blank" class="footer__social-link">
+                            <i class="ri-instagram-fill"></i>
+                           </a> 
+
+                           <a href="https://twitter.com/" target="_blank" class="footer__social-link">
+                            <i class="ri-twitter-fill"></i>
+                           </a> 
+
+                        </ul>
+                    </div>
+                </div>
+
+                <img src="assets/img/spring-onion.png" alt="footer image" class="footer__onion">
+                <img src="assets/img/spring-onion.png" alt="footer image" class="footer__onion-1">
+                <img src="assets/img/spinach-leaf.png" alt="footer image" class="footer__spinach">
+                <img src="assets/img/spinach-leaf.png" alt="footer image" class="footer__spinach-1">
+                <img src="assets/img/leaf-branch-4.png" alt="footer image" class="footer__leaf">
+
+            </div>
+
+            <div class="footer__info container">
+                <div class="footer__card">
+                    <img src="assets/img/footer-card-1.png" alt="footer image">
+                    <img src="assets/img/footer-card-2.png" alt="footer image">
+                    <img src="assets/img/footer-card-3.png" alt="footer image">
+                    <img src="assets/img/footer-card-4.png" alt="footer image">
+                </div>
+
+                <span class="footer__copy">
+                    &#169; Direitos Autorais da Pamy. Todos os direitos reservados
+                </span>
+            </div>
+        </footer>
+
+        <!--========== SCROLL UP ==========-->
+        <a href="#" class="scrollup" id="scroll-up">
+           <i class="ri-arrow-up-line"></i>
+        </a>
+
+        <!--=============== SCROLLREVEAL ===============-->
+        <script src="assets/js/scrollreveal.min.js"></script>
+
+        <!--=============== MAIN JS ===============-->
+        <script src="assets/js/main.js"></script>
+    </body>
+</html>
\ No newline at end of file