diff --git a/Public/tesla clone/img/accessories.jpg b/Public/tesla clone/img/accessories.jpg
new file mode 100644
index 00000000..69743059
Binary files /dev/null and b/Public/tesla clone/img/accessories.jpg differ
diff --git a/Public/tesla clone/img/model-3.jpg b/Public/tesla clone/img/model-3.jpg
new file mode 100644
index 00000000..ca66525e
Binary files /dev/null and b/Public/tesla clone/img/model-3.jpg differ
diff --git a/Public/tesla clone/img/model-s.jpg b/Public/tesla clone/img/model-s.jpg
new file mode 100644
index 00000000..d4259575
Binary files /dev/null and b/Public/tesla clone/img/model-s.jpg differ
diff --git a/Public/tesla clone/img/model-x.jpg b/Public/tesla clone/img/model-x.jpg
new file mode 100644
index 00000000..42f4c4a6
Binary files /dev/null and b/Public/tesla clone/img/model-x.jpg differ
diff --git a/Public/tesla clone/img/model-y.jpg b/Public/tesla clone/img/model-y.jpg
new file mode 100644
index 00000000..cec742ea
Binary files /dev/null and b/Public/tesla clone/img/model-y.jpg differ
diff --git a/Public/tesla clone/img/roof.jpg b/Public/tesla clone/img/roof.jpg
new file mode 100644
index 00000000..3313a6cf
Binary files /dev/null and b/Public/tesla clone/img/roof.jpg differ
diff --git a/Public/tesla clone/img/solarpanels.jpg b/Public/tesla clone/img/solarpanels.jpg
new file mode 100644
index 00000000..b8194ca2
Binary files /dev/null and b/Public/tesla clone/img/solarpanels.jpg differ
diff --git a/Public/tesla clone/tesla.css b/Public/tesla clone/tesla.css
new file mode 100644
index 00000000..fd9525c9
--- /dev/null
+++ b/Public/tesla clone/tesla.css	
@@ -0,0 +1,157 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    scroll-behavior: smooth;
+}
+body {
+    font-family: 'poppins', sans-serif;
+    color: #171a20;
+
+}
+
+.desktop {
+    display: none;
+}
+
+@media (min-width: 1200px) {
+    .desktop {
+        display: initial;
+    }
+}
+
+header {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    padding: 5px 10px;
+    position: fixed;
+    top: 0;
+    z-index: 2;
+    width: 100%;
+    font-weight: 500;
+}
+
+a.logo {
+    height: 12px;
+    width: 100px;
+    color: inherit;
+}
+
+header a {
+    color: inherit;
+}
+
+header nav a {
+    text-decoration: none;
+    padding: 5px 10px;
+}
+
+header nav.center {
+    text-align: center;
+}
+
+header nav.right{
+    text-align: end;
+}
+
+section{
+    height: 100vh;
+    background-size: cover;
+    background-position: center center;
+}
+
+section .content{
+    width: 100%;
+    height: 100vh;
+    padding-top: 15vh;
+    padding-bottom: 15vh;
+    text-align: center;
+    display: grid;
+    grid-template-rows: min-content auto min-content;
+}
+
+section h1{
+    font-size: 3rem;
+}
+
+section a{
+    color: inherit;
+}
+
+section .buttons a{
+    display: block;
+    background-color: #eee;
+    color: inherit;
+    border-radius: 25px;
+    padding: 12px 50px;
+    text-transform: uppercase;
+    text-decoration: none;
+    font-size: 12px;
+    font-weight: 500;
+}
+
+section .buttons a:first-child{
+    background-color: #222;
+    color: #fff;
+}
+
+section .buttons{
+    display: grid;
+    row-gap: 20px;
+}
+@media (min-width: 768px) {
+    section .buttons{
+        max-width: 640px;
+        margin: 0 auto;
+        grid-template-columns: 1fr 1fr;
+        column-gap: 20px;
+    }
+}
+
+aside{
+    position: fixed;
+    transition: right .4s ease-in-out;
+    right: -320px;
+    width: 320px;
+    height: 100vh;
+    background-color: white;
+    padding: 80px 30px;
+    z-index: 4;
+    font-weight: 500;
+}
+
+aside.active{
+    right: 0;
+}
+
+aside a{
+    display: block;
+    color: inherit;
+    text-decoration: none;
+    padding: 8px 0;
+    font-size: 15px;
+}
+
+aside button.close{
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    border: none;
+    font-size: 30px;
+    padding: 10px;
+    background-color: transparent;
+    font-family: sans-serif;
+    cursor: pointer;
+}
+
+.backdrop{
+    display: none;
+    position: fixed;
+    inset: 0;
+    background-color: rgba(0, 0, 0, .35);
+    backdrop-filter: blur(5px);
+}
+
+.backdrop.active{
+    display: block;
+}
\ No newline at end of file
diff --git a/Public/tesla clone/tesla.html b/Public/tesla clone/tesla.html
new file mode 100644
index 00000000..8eacea84
--- /dev/null
+++ b/Public/tesla clone/tesla.html	
@@ -0,0 +1,138 @@
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="tesla.css">
+    <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@400;500&display=swap" rel="stylesheet">
+    <title>Electric Cars, Solar Clean Energy</title>
+    <link rel="shortcut icon" href="https://pngimg.com/uploads/tesla_logo/tesla_logo_PNG19.png" type="image/x-icon">
+</head>
+
+<body>
+    <header>
+        <a href="" class="logo">
+            <svg class="tds-icon tds-icon-logo-wordmark tds-site-logo-icon" viewBox="0 0 342 35"
+                xmlns="http://www.w3.org/2000/svg">
+                <path
+                    d="M0 .1a9.7 9.7 0 0 0 7 7h11l.5.1v27.6h6.8V7.3L26 7h11a9.8 9.8 0 0 0 7-7H0zm238.6 0h-6.8v34.8H263a9.7 9.7 0 0 0 6-6.8h-30.3V0zm-52.3 6.8c3.6-1 6.6-3.8 7.4-6.9l-38.1.1v20.6h31.1v7.2h-24.4a13.6 13.6 0 0 0-8.7 7h39.9v-21h-31.2v-7h24zm116.2 28h6.7v-14h24.6v14h6.7v-21h-38zM85.3 7h26a9.6 9.6 0 0 0 7.1-7H78.3a9.6 9.6 0 0 0 7 7zm0 13.8h26a9.6 9.6 0 0 0 7.1-7H78.3a9.6 9.6 0 0 0 7 7zm0 14.1h26a9.6 9.6 0 0 0 7.1-7H78.3a9.6 9.6 0 0 0 7 7zM308.5 7h26a9.6 9.6 0 0 0 7-7h-40a9.6 9.6 0 0 0 7 7z"
+                    fill="currentColor"></path>
+            </svg>
+        </a>
+        <nav class="center desktop">
+            <a href="im">Model S</a>
+            <a href="">Model 3</a>
+            <a href="">Model X</a>
+            <a href="">Model Y</a>
+            <a href="">Solar Roof</a>
+            <a href="">Solar Panels</a>
+        </nav>
+        <nav class="right">
+            <a href="" class="desktop">Shop</a>
+            <a href="" class="desktop">Account</a>
+            <a href="" id="menubtn">Menu</a>
+        </nav>
+    </header>
+    <div class="backdrop"></div>
+    <aside>
+        <button class="close">&times;</button>
+        <a href="">Model S</a>
+        <a href="">Model 3</a>
+        <a href="">Model X</a>
+        <a href="">Model Y</a>
+        <a href="">Solar Roof</a>
+        <a href="">Solar Panels</a>
+        <a href="">Powerwall</a>
+        <a href="">Existing Inventory</a>
+        <a href="">Used Inventory</a>
+        <a href="">Demo Drive</a>
+        <a href="">Fleet</a>
+        <a href="">Commercial Energy</a>
+        <a href="">Utilities</a>
+        <a href="">Charging</a>
+        <a href="">Careers</a>
+        <a href="">Find Us</a>
+        <a href="">Events</a>
+        <a href="">Investor Relations</a>
+        <a href="">Shop</a>
+        <a href="">Account</a>
+    </aside>
+
+    <section style="background-image: url(img/model-3.jpg);">
+        <div class="content">
+            <h1>Model 3</h1>
+            <p>Order online for <a href="">Touchless Delivery</a></p>
+            <div class="buttons">
+                <a href="">Custon order</a>
+                <a href="">Exisiting Inventory</a>
+            </div>
+        </div>
+    </section>
+    <section style="background-image: url(img/model-y.jpg);">
+        <div class="content">
+            <h1>Model 3</h1>
+            <p>Order online for <a href="">Touchless Delivery</a></p>
+            <div class="buttons">
+                <a href="">Custon order</a>
+                <a href="">Exisiting Inventory</a>
+            </div>
+        </div>
+    </section>
+    <section style="background-image: url(img/model-s.jpg);">
+        <div class="content">
+            <h1>Model 3</h1>
+            <p>Order online for <a href="">Touchless Delivery</a></p>
+            <div class="buttons">
+                <a href="">Custon order</a>
+                <a href="">Exisiting Inventory</a>
+            </div>
+        </div>
+    </section>
+    <section style="background-image: url(img/model-x.jpg);">
+        <div class="content">
+            <h1>Model 3</h1>
+            <p>Order online for <a href="">Touchless Delivery</a></p>
+            <div class="buttons">
+                <a href="">Custon order</a>
+                <a href="">Exisiting Inventory</a>
+            </div>
+        </div>
+    </section>
+    <section style="background-image: url(img/solarpanels.jpg);">
+        <div class="content">
+            <h1>Model 3</h1>
+            <p>Order online for <a href="">Touchless Delivery</a></p>
+            <div class="buttons">
+                <a href="">Custon order</a>
+                <a href="">Exisiting Inventory</a>
+            </div>
+        </div>
+    </section>
+    <section style="background-image: url(img/roof.jpg);">
+        <div class="content">
+            <h1>Model 3</h1>
+            <p>Order online for <a href="">Touchless Delivery</a></p>
+            <div class="buttons">
+                <a href="">Custon order</a>
+                <a href="">Exisiting Inventory</a>
+            </div>
+        </div>
+    </section>
+    <section style="background-image: url(img/accessories.jpg);">
+        <div class="content">
+            <h1>Model 3</h1>
+            <p>Order online for <a href="">Touchless Delivery</a></p>
+            <div class="buttons">
+                <a href="">Custon order</a>
+                <a href="">Exisiting Inventory</a>
+            </div>
+        </div>
+    </section>
+
+    <script src="tesla.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/Public/tesla clone/tesla.js b/Public/tesla clone/tesla.js
new file mode 100644
index 00000000..c6177a0d
--- /dev/null
+++ b/Public/tesla clone/tesla.js	
@@ -0,0 +1,22 @@
+const openMenu = () =>{
+    document.querySelector('.backdrop').className = 'backdrop active';
+    document.querySelector('aside').className = 'active';
+}
+const closeMenu = () =>{
+    document.querySelector('.backdrop').className = 'backdrop';
+    document.querySelector('aside').className = '';
+}
+
+document.getElementById('menubtn').onclick = e =>{
+    e.preventDefault();
+    openMenu();
+}
+
+document.querySelector('aside button.close').onclick = e => {
+    closeMenu();
+}
+
+document.querySelector('.backdrop').onclick = e => {
+    closeMenu();
+}
+
diff --git a/README.md b/README.md
index d092bd7e..5272a12d 100644
--- a/README.md
+++ b/README.md
@@ -266,6 +266,7 @@ git push -u origin <your_branch_name>
 | 172. | [Dynamic Picture Frame](https://zerooctave.github.io/ZeroOctave-Javascript-Projects/Public/picture-frame.html)| 173. | [FAQ Collapse](https://zerooctave.github.io/ZeroOctave-Javascript-Projects/Public/FAQcollapse.html)| 174. | [Multiplication Table Generator](https://zerooctave.github.io/ZeroOctave-Javascript-Projects/Public/multiplication-table-generator.html)
 | 175. | [Expense Tracker Calculator](https://zerooctave.github.io/ZeroOctave-Javascript-Projects/Public/trackerExpense/index.html)| 176. | [Check my IP](https://zerooctave.github.io/ZeroOctave-Javascript-Projects/Public/check-my-ip/check-my-ip.html) | 177. | [SocialTray](https://rococo-praline-28f4e4.netlify.app/)
 | 178. | [SimplyRecipes](https://zerooctave.github.io/ZeroOctave-Javascript-Projects/Public/SimplyRecipes/) | 179. | [Employee DataBase](https://zerooctave.github.io/ZeroOctave-Javascript-Projects/Public/employeeDatabase.html)
+| 180. | [Tesla Clone](https://zerooctave.github.io/ZeroOctave-Javascript-Projects/Public/tesla.html)
 <br>
 
 <div id="Maintainer"></div>
diff --git a/assets/Js/tesla.js b/assets/Js/tesla.js
new file mode 100644
index 00000000..c6177a0d
--- /dev/null
+++ b/assets/Js/tesla.js
@@ -0,0 +1,22 @@
+const openMenu = () =>{
+    document.querySelector('.backdrop').className = 'backdrop active';
+    document.querySelector('aside').className = 'active';
+}
+const closeMenu = () =>{
+    document.querySelector('.backdrop').className = 'backdrop';
+    document.querySelector('aside').className = '';
+}
+
+document.getElementById('menubtn').onclick = e =>{
+    e.preventDefault();
+    openMenu();
+}
+
+document.querySelector('aside button.close').onclick = e => {
+    closeMenu();
+}
+
+document.querySelector('.backdrop').onclick = e => {
+    closeMenu();
+}
+