Add youtubeclone

Domains/Frontend/MiniProjects/YoutubeClone/README.md

@@ -0,0 +1,103 @@
+**Contributor:** khyati262
+
+
+# YouTube Clone
+
+A front-end clone of the YouTube homepage built using **HTML** and **CSS**.  
+This project focuses on mastering layout design, flexbox, grid systems, and responsive UI components without using JavaScript.
+
+---
+
+##  Project Structure
+YouTube-Clone/
+│
+├── youtube.html
+├── styles/
+│ ├── general.css
+│ ├── header.css
+│ └── video.css
+├── icons/
+│ ├── hamburger-menu.svg
+│ ├── youtube-logo.svg
+│ ├── upload.svg
+│ ├── youtube-apps.svg
+│ ├── notifications.svg
+│ ├── search.svg
+│ ├── voice-search-icon.svg
+│ ├── home.svg
+│ ├── explore.svg
+│ ├── subscriptions.svg
+│ ├── originals.svg
+│ ├── youtube-music.svg
+│ └── library.svg
+├── profile-pics/
+│ ├── my-profile-pic.jpg
+│ └── profile-pic1.jpg … profile-pic9.jpeg
+└── thumbnail/
+├── thumbnail-1.jpg … thumbnail-9.jpg
+
+
+
+---
+
+## 🚀 Features
+
+- Fully structured **YouTube homepage layout**
+- Clean **header**, **sidebar**, and **video grid** sections
+- Uses **CSS Grid** and **Flexbox** for layout design
+- Hover tooltips for buttons (Search, Create, Notifications)
+- Fully responsive visual layout (desktop optimized)
+
+---
+
+## 🧠 Learning Objectives
+
+- Understand front-end structure and semantics using HTML5
+- Implement complex layouts with pure CSS (no JS)
+- Learn positioning, flex, grid, and responsive scaling
+- Work with icon sets and reusable components
+
+---
+
+## ⚙️ How to Run
+
+1. Clone or download this repository.
+2. Open `youtube.html` in any web browser.
+3. Ensure all assets (`icons`, `styles`, `profile-pics`, and `thumbnail`) are in the correct folders.
+
+---
+
+## 🧩 Tech Stack
+
+- **HTML5** for structure  
+- **CSS3** for styling and layout  
+- **Google Fonts (Roboto)** for typography  
+
+---
+
+## 📸 Preview
+
+> Example UI inspired by the original YouTube layout — includes navigation bar, sidebar, and a grid of video thumbnails with metadata.
+
+---
+
+## 👤 Contributor
+
+**Contributor:** khyati262
+
+---
+
+## 💡 Future Enhancements
+
+- Add JavaScript functionality (search, click events, sidebar animation)
+- Make fully responsive for tablets and mobile screens
+- Integrate real video data using YouTube API
+
+---
+
+## 📜 License
+
+This project is for educational and personal learning purposes only.  
+Not affiliated with or endorsed by YouTube or Google.
+
+---

Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/styles/general copy.css

@@ -0,0 +1,30 @@
+p{
+    font-family: Roboto, Arial;
+    margin-top: 0;
+    margin-bottom: 0;
+}
+body{
+    margin: 0;
+    padding-top: 80px;
+    padding-left: 80px;
+}
+.sidebar
+{
+    position: fixed;
+    left:0;
+    bottom:0;
+    top:55px;
+    background-color:white;
+    width: 72px;
+}
+.sidebar-link
+{
+
+    height: 75px;
+    margin-bottom: 1px;
+}
+.sidebar-link:hover
+{
+    background-color: gray;
+}
+

Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/styles/general.css

@@ -0,0 +1,52 @@
+p{
+    font-family: Roboto, Arial;
+    margin-top: 0;
+    margin-bottom: 0;
+}
+body{
+    /* this style below will be inherited*/
+    font-family:Roboto, arial;
+    margin: 0;
+    padding-top: 80px;
+    padding-left: 96px;
+    padding-right: 24px;
+    background-color: light rgb(248, 248, 248);
+}
+.sidebar
+{
+    position: fixed;
+    left:0;
+    bottom:0;
+    top:55px;
+    background-color:white;
+    width: 72px;
+    z-index:200 ;
+    padding-top: 5px;
+}
+.sidebar-link
+{
+    height: 74px;
+    display: flex;
+    justify-content: center;
+    align-items:center;
+    flex-direction: column;
+    cursor: pointer;
+}
+.sidebar-link:hover
+{
+    background-color: gray;
+
+}
+
+.sidebar-link img
+{
+    height:25px;
+    margin-bottom: 4px;
+
+}
+.sidebar-link div
+{
+
+    font-size: 10px;
+
+}

Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/styles/header.css

@@ -0,0 +1,178 @@
+.search-bar
+{
+    display:block;
+}
+.header
+{
+    height:55px;
+    display: flex;
+    flex-direction:row;
+    justify-content: space-between;
+    position:fixed ;
+    top:0;
+    left:0;
+    right:0;
+    background-color: white; 
+    border-bottom-width:1px ;
+    border-bottom-style: solid;
+    border-bottom-color: rgb(228, 228, 228);
+    z-index: 100;
+}
+.hamburger-menu
+{
+    height: 24px;  
+    margin-left: 24px;
+    margin-right: 20px;
+}
+.youtube-logo
+{
+    height:20px;
+} 
+
+.left-section
+{
+    display:flex;
+    align-items: center;
+}
+.middle-section
+{ 
+    margin-left:70px;
+    flex:1;
+    margin-right:35px;
+    max-width: 500px;
+    display:flex;
+    align-items: center;
+}
+.right-section
+{
+    width:180px;
+    display:flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-right: 20px;
+    flex-shrink: 0;
+}
+.upload-icon
+{
+    height: 24px;
+}
+.youtube-apps-icon
+{
+    height: 24px;
+}
+.notifi-icon
+{
+    height:24px;
+}
+.notifi-icon-container
+{
+    position: relative;
+}
+.notifi-count
+{
+    position: absolute;
+    top:-2px;
+    right:-5px;
+    background-color: rgb(200, 0, 0);
+    color: white;
+    font-family: Roboto, arial;
+    font-size: 11px;
+    padding-left: 5px;
+    padding-right: 5px;
+    padding-top: 2px;
+    padding-bottom: 2px;
+    border-radius: 10px;
+}
+.current-user-pic
+{
+    height: 32px;
+    width: 32px;
+    border-radius: 16px;
+}
+.youtbe-apps-icon
+{
+    height: 24px;
+}
+
+.search-bar
+{
+    width: 0;
+    flex:1;
+    height:36px;
+    padding-left: 10px;
+    font-size:16px;
+    border-radius: 2px;
+    box-shadow: inset 1px 1px 3px rgba(0,0,0.03);
+    border:1px solid rgb(192, 192, 192);
+}
+.search-bar::placeholder
+{
+
+    font-size: 16px;
+
+}
+.search-button
+{
+    height:40px;
+    width:66px;
+    background-color: rgb(240, 239, 239);
+    border-width: 1px;
+    border-style: solid ;
+    border-color:rgb(192, 192, 192) ;
+    margin-left: -1px;
+    margin-right: 10px;
+    border-radius: 2px;
+
+}
+.search-button,
+.voice-search-button,
+.upload-icon-container
+{
+    display: flex;
+    justify-content: center;
+    align-items: center ;
+    position: relative;
+}
+.search-button .tooltip, 
+.voice-search-button .tooltip,
+.upload-icon-container .tooltip
+{
+    position: absolute;
+    background-color: gray;
+    font-size: 12px;
+    color: white;
+    padding-top: 4px;
+    padding-bottom: 4px;
+    padding-left: 8px;
+    padding-right: 8px;
+    border-radius: 2px;
+    bottom: -30px;
+    opacity:0;
+    transition: opacity 0.15s;
+    pointer-events: none;
+    white-space: nowrap;
+}
+.search-button:hover .tooltip, 
+.voice-search-button:hover .tooltip,
+.upload-icon-container:hover .tooltip
+{
+    opacity: 1;
+}
+.search-icon
+{
+    height: 25px;
+
+}
+.voice-search-button
+{
+    height: 40px;
+    width: 40px;
+    border-radius: 20px;
+    border: none;
+    background-color: rgb(245, 245, 245);
+} 
+.voice-search-icon
+{
+    height: 24px;  
+}
+