Merge pull request #193 from mrkc2303/youtube

Youtube UI Clone

Author: harshita2216

Index.md

@@ -62,6 +62,10 @@
 | [Double Vertical Slider](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Double-Vertical-Slider)                           | This App helps to Slide the two different parts of the webpage content at the same time . |
 | [Basic Contact Form](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Basic-Contact-Form)                                |  A basic contact form having send and reset button.   |       
 | [Compound Interest Calculator](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Compound%20Interest%20Calculator)                 |  A basic gradient Background Generator which allows you to create a background by selecting your required colors. This will make up a gradient mix and provide you the code line so that you can use it in your Website  | 
+
+| [Youtube UI Clone](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Youtube-Clone)                 |  A project which aims to clone YouTube UI with responsiveness by using HTML & CSS.  | 
+
 | [Blog Application](https://github.com/khushi-purwar/Web-dev-mini-projects/tree/main/Blog%20Application)                 |  Blog Application is an application where user can add a new blog, edit it, delete it as well as view other blogs and make changes in them.  | 
 | [Typing Speed Test Website](https://github.com/khushi-purwar/Web-dev-mini-projects/tree/main/Typing%20Speed%20Test%20Website)                 |  This website is used to check the typing speed of the user. It will the give the information of how many seconds require for typing the particular sentence.  | 
 | [Breaking Bad Characters](https://github.com/khushi-purwar/Web-dev-mini-projects/tree/main/breaking-bad-characters)                 |  A single page web application that uses the breaking bad API to display and filter characters from the show | 
+

Youtube-Clone/README.md

@@ -0,0 +1,39 @@
+<h1 id="youtube-ui-clone">Youtube UI Clone using HTML and CSS</h1>
+
+<p>A project which aims to clone YouTube UI with responsiveness by using HTML & CSS. </p>
+<br>
+
+<h2 id="tech-stack-used">Tech Stack Used</h2>
+<br>
+
+<p><img src="https://img.shields.io/badge/html5%20-%23E34F26.svg?&style=for-the-badge&logo=html5&logoColor=white" alt="HTML">
+<img src="https://img.shields.io/badge/css3%20-%231572B6.svg?&style=for-the-badge&logo=css3&logoColor=white" alt="CSS">
+
+<h2 id="how-to-use">How to use:</h2>
+<br>
+
+<ul>
+  <li>Download or clone the repository</li>
+<pre><code>
+  git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git
+</code></pre>
+  
+  <li>Go to the directory</li>
+  <li>Run the index.html file in your browser</li>
+  <li>Start Playing around the page<br></li>
+</ul>
+
+<h2 id="use-of-the-project">Use of the Project</h2>
+
+<p>
+By making this project, your skills will be enhanced and specially for CSS. This single project uses Flexbox, CSS Grid, Media Queries, etc. These are consider one of the most important concepts of CSS and these skills will be better after making this mini project.
+
+P.S. JavaScript will be added to this in Future updates!!
+</p>
+<br><br>
+
+<p>
+	<img src="https://user-images.githubusercontent.com/67221487/125255480-1ae78480-e319-11eb-8b96-5cf57bd1e929.PNG" alt="image">
+	<br><br>
+	<img src="https://user-images.githubusercontent.com/67221487/125257286-e4ab0480-e31a-11eb-8fda-b468eea097ae.PNG" alt="image">
+</p>