diff --git a/100_projects/99-landing-page-fashion/assets/css/styles.css b/100_projects/99-landing-page-fashion/assets/css/styles.css
new file mode 100644
index 0000000..90338bd
--- /dev/null
+++ b/100_projects/99-landing-page-fashion/assets/css/styles.css
@@ -0,0 +1,221 @@
+:root {
+ --first-color: #CCD5DC;
+ --second-color: #606874;
+ --white-color: #fff;
+ --h1-font-size: 2.3rem;
+ --h2-font-size: 2.3rem;
+ --normal-font-size: 0.93rem;
+ --big-font-size: 5rem;
+ --smaller-font-size: 0.75rem;
+ --z-fixed: 100;
+}
+@media screen and (min-width: 768px) {
+ :root {
+ --h1-font-size: 4.5rem;
+ --h2-font-size: 3.56rem;
+ --normal-font-size: 1rem;
+ --big-font-size: 10rem;
+ --smaller-font-size: 0.813rem;
+ }
+}
+*, ::before, ::after {
+ box-sizing: border-box;
+}
+body {
+ margin: 3.5rem 0 0 0;
+ font-weight: initial;
+ overflow: hidden;
+}
+h1, h2 {
+ margin: 0;
+ font-weight: initial;
+}
+ul {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+}
+a {
+ text-decoration: none;
+}
+img {
+ max-width: 100%;
+ height: auto;
+}
+p {
+ font-size: var(--normal-font-size);
+}
+.bd-grid {
+ max-width: 1200px;
+ margin-left: 1rem;
+ margin-right: 1rem;
+}
+.l-header {
+ width: 100%;
+ position: fixed;
+ top: 0;
+ left: 0;
+ background-color: var(--first-color);
+ color: var(--white-color);
+ z-index: var(--z-fixed);
+}
+.nav {
+ height: 3.5rem;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ font-weight: bold;
+}
+@media screen and (max-width: 768px) {
+ .nav__menu {
+ position: fixed;
+ top: 3.5rem;
+ left: -100%;
+ background-color: var(--second-color);
+ opacity: .6;
+ width: 80%;
+ height: 100vh;
+ margin: auto;
+ padding: 2rem;
+ z-index: var(--z-fixed);
+ transition: .5s;
+ }
+}
+.nav__list {
+ text-align: center;
+}
+.nav__item {
+ margin-bottom: 2rem;
+}
+.nav__link {
+ padding: .5rem;
+ color: var(--white-color);
+}
+.nav__logo {
+ color: var(--white-color);
+}
+.nav__toggle {
+ font-size: 2rem;
+ cursor: pointer;
+}
+.nav__icon-cart {
+ font-size: 1.3rem;
+ text-align: right;
+}
+.show {
+ left: 0;
+}
+.home {
+ position: relative;
+ display: grid;
+ grid-template-rows: 3fr 1fr;
+ height: calc(100vh - 3.5rem);
+}
+.home__primary {
+ width: 0;
+ background-color: var(--first-color);
+ display: flex;
+ justify-content: space-evenly;
+ align-items: center;
+ padding-left: 1rem;
+ padding-right: 1rem;
+}
+.home__title {
+ font-size: var(--h1-font-size);
+ writing-mode: vertical-rl;
+ transform: rotate(180deg);
+ color: var(--white-color);
+}
+.home__img {
+ width: 235px;
+ height: auto;
+}
+.home__secondary {
+ width: 0;
+ background-color: var(--second-color);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-weight: bold;
+}
+.home__scroll {
+ position: absolute;
+ left: 0;
+ bottom: 15%;
+ font-size: var(--smaller-font-size);
+ transform: rotate(270deg);
+ color: var(--first-color);
+}
+.home__scroll::after {
+ content: '';
+ position: absolute;
+ top: 45%;
+ left: -10%;
+ width: 38px;
+ height: 1px;
+ background-color: var(--first-color);
+ margin-left: -2.5rem;
+}
+.home__year {
+ font-size: var(--big-font-size);
+ -webkit-text-stroke: 2.3px var(--first-color);
+ color: transparent;
+}
+@media screen and (min-width: 768px) {
+ body {
+ margin: 0;
+ }
+ .l-header {
+ background-color: transparent;
+ }
+ .nav {
+ display: grid;
+ grid-template-columns: 3fr 4fr 1fr;
+ }
+ .nav__list {
+ display: flex;
+ }
+ .nav__item {
+ margin-right: 5rem;
+ margin-bottom: 0;
+ }
+ .nav__toggle {
+ display: none;
+ }
+ .home {
+ grid-template-columns: 4fr 3fr;
+ grid-template-rows: 1fr;
+ height: 100vh;
+ }
+ .home__primary {
+ justify-content: center;
+ }
+ .home__img img {
+ position: absolute;
+ width: 361px;
+ top: 5%;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ margin: auto;
+ }
+ .home__scroll {
+ color: var(--white-color);
+ }
+ .home__scroll::after {
+ background-color: var(--white-color);
+ }
+ .home__year {
+ writing-mode: vertical-rl;
+ margin-left: 5rem;
+ }
+}
+@media screen and (min-width: 1200px) {
+ .bd-grid {
+ margin-left: auto;
+ margin-right: auto;
+ }
+ .nav {
+ height: calc(3.5rem + 1.5rem);
+ }
+}
\ No newline at end of file
diff --git a/100_projects/99-landing-page-fashion/assets/img/alireza-dolati-OVS3rqXq9gg-unsplash.jpg b/100_projects/99-landing-page-fashion/assets/img/alireza-dolati-OVS3rqXq9gg-unsplash.jpg
new file mode 100644
index 0000000..3a494a6
Binary files /dev/null and b/100_projects/99-landing-page-fashion/assets/img/alireza-dolati-OVS3rqXq9gg-unsplash.jpg differ
diff --git a/100_projects/99-landing-page-fashion/assets/js/main.js b/100_projects/99-landing-page-fashion/assets/js/main.js
new file mode 100644
index 0000000..adda504
--- /dev/null
+++ b/100_projects/99-landing-page-fashion/assets/js/main.js
@@ -0,0 +1,27 @@
+/* MENU SHOW */
+const showMenu = (toggleId,navId) =>{
+ const toggle = document.getElementById(toggleId),
+ nav = document.getElementById(navId)
+ if(toggle && nav){
+ toggle.addEventListener('click', ()=>{
+ nav.classList.toggle('show')
+ })
+ }
+}
+showMenu('nav-toggle','nav-menu')
+
+/* GSAP ANIMATION */
+/*HOME PRIMARY*/
+TweenMax.to(".home__primary", 2, {
+ width: "100%",
+ ease: Expo.easeInOut
+})
+gsap.from('.home__title', {opacity: 0, duration: 2, delay: 1.5, y: 100})
+gsap.from('.home__img img', {opacity: 0, duration: 2, delay:1.5, y: -100})
+/*HOME SECONDARY*/
+TweenMax.to(".home__secondary", 2.5, {
+ width: "100%",
+ ease: Expo.easeInOut
+})
+gsap.from('.home__scroll', {opacity: 0, duration: 3, x: -100})
+gsap.from('.home__year', {opacity: -1, duration: 1.5, delay: 1.5, x: 100})
\ No newline at end of file
diff --git a/100_projects/99-landing-page-fashion/index.html b/100_projects/99-landing-page-fashion/index.html
new file mode 100644
index 0000000..33d54a1
--- /dev/null
+++ b/100_projects/99-landing-page-fashion/index.html
@@ -0,0 +1,51 @@
+
+
+
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
Fashion Online
Store
+
+
+
+
+
+