Added SpaceX Website Clone

Front-end-Projects/Basic/SpaceX-Website-Clone/README.md

@@ -0,0 +1,76 @@
+<h1 align='center'><b>💥SpaceX Website Clone 💥</b></h1>
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+<h3 align='center'>Tech Stack Used 🎮</h3>
+<!-- enlist all the technologies used to create this project from them (Remove comment using 'ctrl+z' or 'command+z') -->
+
+<div align='center'>
+
+  ![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white)
+  ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white)
+  <!-- ![Bootstrap](https://img.shields.io/badge/bootstrap-%238511FA.svg?style=for-the-badge&logo=bootstrap&logoColor=white) -->
+  <!-- ![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E) -->
+  <!-- ![jQuery](https://img.shields.io/badge/jquery-%230769AD.svg?style=for-the-badge&logo=jquery&logoColor=white) -->
+  <!-- ![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB) -->
+  <!-- ![Redux](https://img.shields.io/badge/redux-%23593d88.svg?style=for-the-badge&logo=redux&logoColor=white) -->
+  <!-- ![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white) -->
+  <!-- ![Web3.js](https://img.shields.io/badge/web3.js-F16822?style=for-the-badge&logo=web3.js&logoColor=white) -->
+  <!-- ![Express.js](https://img.shields.io/badge/express.js-%23404d59.svg?style=for-the-badge&logo=express&logoColor=%2361DAFB) -->
+  <!-- ![Angular.js](https://img.shields.io/badge/angular.js-%23E23237.svg?style=for-the-badge&logo=angularjs&logoColor=white) -->
+  <!-- ![Next JS](https://img.shields.io/badge/Next-black?style=for-the-badge&logo=next.js&logoColor=white) -->
+  <!-- ![NodeJS](https://img.shields.io/badge/node.js-6DA55F?style=for-the-badge&logo=node.js&logoColor=white) -->
+  <!-- ![Vue.js](https://img.shields.io/badge/vuejs-%2335495e.svg?style=for-the-badge&logo=vuedotjs&logoColor=%234FC08D) -->
+  <!-- ![MongoDB](https://img.shields.io/badge/MongoDB-%234ea94b.svg?style=for-the-badge&logo=mongodb&logoColor=white) -->
+</div>
+
+
+![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847)
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: Description 📃
+
+<div>
+  <!-- <p>Add Description of the project</p> -->
+    <p>SpaceX website clone is the best project to practice and dive deep about CSS Animations,Media Queries.</p>
+</div>
+
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: How to run it? 🕹️
+
+<!-- Add steps how to run this project -->
+
+- Clone the project
+- Navigate to the folder
+- Run `index.html`
+
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+## :zap: Screenshots 📸
+<!-- add the screenshot of the project (Mandatory) -->
+
+![Img](./img/screenshot.webp)
+
+
+
+![Line](https://github.com/Avdhesh-Varshney/WebMasterLog/assets/114330097/4b78510f-a941-45f8-a9d5-80ed0705e847)
+
+<!-- -------------------------------------------------------------------------------------------------------------- -->
+
+<h4 align='center'>Developed By <b><i>Amruta Jayanti</i></b> 👦</h4>
+<p align='center'>
+  <a href='https://www.linkedin.com/in/amruta-jayanti-064523254?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=android_app'>
+    <img src='https://img.shields.io/badge/linkedin-%230077B5.svg?style=for-the-badge&logo=linkedin&logoColor=white' />
+  </a>
+  <a href='https://github.com/AmrutaJayanti'>
+    <img src='https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white' />
+  </a>
+</p>
+
+<h4 align='center'>Happy Coding 🧑‍💻</h4>
+
+<h3 align="center">Show some &nbsp;❤️&nbsp; by &nbsp;🌟&nbsp; this repository!</h3>

Front-end-Projects/Basic/SpaceX-Website-Clone/index.html

@@ -0,0 +1,168 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SpaceX</title>
+    <link rel="stylesheet" href="./style.css" />
+</head>
+<body>
+    <header class="main-header">
+        <div class="logo">
+            <a href="index.html">
+                <img src="./img/logo.png" alt="SpaceX"/>
+            </a>
+        </div>
+        <nav class="desktop-main-menu">
+            <ul>
+                <li><a href="index.html">Falcon 9</a></li>
+                <li><a href="index.html">Falcon Heavy</a></li>
+                <li><a href="index.html">Dragon</a></li>
+                <li><a href="index.html">Starship</a></li>
+                <li><a href="index.html">Human Spaceflight</a></li>
+                <li><a href="index.html">Rideshare</a></li>
+                <li><a href="index.html">Shop</a></li>
+            </ul>
+        </nav>
+    </header>
+
+    <button id="menu-btn" class="hamburger" type="button">
+        <span class="hamburger-top"></span>
+        <span class="hamburger-middle"></span>
+        <span class="hamburger-bottom"></span>
+    </button>
+
+    <!--A-->
+    <section class="section-a">
+        <div class="section-inner">
+          <h4>Upcoming Launch</h4>
+          <h2>CRS-25 Mission</h2>
+          <a href="#" class="btn">
+            <div class="hover"></div>
+            <span>Rewatch</span>
+          </a>
+        </div>
+        <div class="scroll-arrow">
+            <svg width="30px" height="20px">
+              <path
+                stroke="#ffffff"
+                fill="none"
+                stroke-width="2px"
+                d="M2.000,5.000 L15.000,18.000 L28.000,5.000 "
+              ></path>
+            </svg>
+          </div>
+        </section>
+
+        <!--B-->
+        <section class="section-b">
+            <div class="section-inner">
+              <h4>Recent Launch</h4>
+              <h2>Starlink Mission</h2>
+              <a href="#" class="btn">
+                <div class="hover"></div>
+                <span>Rewatch</span>
+              </a>
+            </div>
+
+            <div class="scroll-arrow">
+              <svg width="30px" height="20px">
+                <path
+                  stroke="#ffffff"
+                  fill="none"
+                  stroke-width="2px"
+                  d="M2.000,5.000 L15.000,18.000 L28.000,5.000 "
+                ></path>
+              </svg>
+            </div>
+          </section>
+       <!--C-->
+       <section class="section-c">
+        <div class="section-inner">
+          <h4>Recent Mission</h4>
+          <h2>SES-22 Mission</h2>
+          <a href="#" class="btn">
+            <div class="hover"></div>
+            <span>Rewatch</span>
+          </a>
+        </div>
+
+        <div class="scroll-arrow">
+          <svg width="30px" height="20px">
+            <path
+              stroke="#ffffff"
+              fill="none"
+              stroke-width="2px"
+              d="M2.000,5.000 L15.000,18.000 L28.000,5.000 "
+            ></path>
+          </svg>
+        </div>
+      </section>
+   <!--D-->
+   <section class="section-d">
+    <div class="section-inner">
+      <h4>Recent Launch</h4>
+      <h2>Globalstar FM15 Mission</h2>
+      <a href="#" class="btn">
+        <div class="hover"></div>
+        <span>Rewatch</span>
+      </a>
+    </div>
+
+    <div class="scroll-arrow">
+      <svg width="30px" height="20px">
+        <path
+          stroke="#ffffff"
+          fill="none"
+          stroke-width="2px"
+          d="M2.000,5.000 L15.000,18.000 L28.000,5.000 "
+        ></path>
+      </svg>
+    </div>
+  </section>
+    <!--E-->
+    <section class="section-e">
+        <div class="section-inner">
+          <h2>Starship Update</h2>
+          <a href="#" class="btn">
+            <div class="hover"></div>
+            <span>Rewatch</span>
+          </a>
+        </div>
+
+        <div class="scroll-arrow">
+          <svg width="30px" height="20px">
+            <path
+              stroke="#ffffff"
+              fill="none"
+              stroke-width="2px"
+              d="M2.000,5.000 L15.000,18.000 L28.000,5.000 "
+            ></path>
+          </svg>
+        </div>
+      </section>
+        <!--F-->
+        <section class="section-f">
+            <div class="section-inner">
+              <h2>Starship to add NASA astronauts on the moon</h2>
+              <a href="#" class="btn">
+                <div class="hover"></div>
+                <span>Rewatch</span>
+              </a>
+            </div>
+          </section>
+      <footer>
+        <ul>
+            <li>SpaceX &copy; 2022</li>
+            <li><a href="#">Twitter</a></li>
+            <li><a href="#">Youtube</a></li>
+            <li><a href="#">Instagram</a></li>
+            <li><a href="#">Flickr</a></li>
+            <li><a href="#">LinkedIn</a></li>
+            <li><a href="#">Privacy</a></li>
+            <li><a href="#">Suppliers</a></li>         
+
+        </ul>
+      </footer>
+</body>
+</html>