diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 00000000..0db901cd Binary files /dev/null and b/.DS_Store differ diff --git a/Domains/.DS_Store b/Domains/.DS_Store new file mode 100644 index 00000000..6ebbed34 Binary files /dev/null and b/Domains/.DS_Store differ diff --git a/Domains/Frontend/.DS_Store b/Domains/Frontend/.DS_Store new file mode 100644 index 00000000..c921126d Binary files /dev/null and b/Domains/Frontend/.DS_Store differ diff --git a/Domains/Frontend/MiniProjects/.DS_Store b/Domains/Frontend/MiniProjects/.DS_Store new file mode 100644 index 00000000..9f7d7eaa Binary files /dev/null and b/Domains/Frontend/MiniProjects/.DS_Store differ diff --git a/Domains/Frontend/MiniProjects/YoutubeClone/.DS_Store b/Domains/Frontend/MiniProjects/YoutubeClone/.DS_Store new file mode 100644 index 00000000..92c09bb7 Binary files /dev/null and b/Domains/Frontend/MiniProjects/YoutubeClone/.DS_Store differ diff --git a/Domains/Frontend/MiniProjects/YoutubeClone/README.md b/Domains/Frontend/MiniProjects/YoutubeClone/README.md new file mode 100644 index 00000000..a04046d7 --- /dev/null +++ b/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. + +--- diff --git a/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/.DS_Store b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/.DS_Store new file mode 100644 index 00000000..d86c0a85 Binary files /dev/null and b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/.DS_Store differ diff --git a/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/icons/.DS_Store b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/icons/.DS_Store new file mode 100644 index 00000000..1d576049 Binary files /dev/null and b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/icons/.DS_Store differ diff --git a/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/icons/explore.svg b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/icons/explore.svg new file mode 100644 index 00000000..47526fc2 --- /dev/null +++ b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/icons/explore.svg @@ -0,0 +1 @@ + diff --git a/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/icons/hamburger-menu.svg b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/icons/hamburger-menu.svg new file mode 100644 index 00000000..155e2386 --- /dev/null +++ b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/icons/hamburger-menu.svg @@ -0,0 +1 @@ + diff --git a/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/icons/home.svg b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/icons/home.svg new file mode 100644 index 00000000..4c12dbbd --- /dev/null +++ b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/icons/home.svg @@ -0,0 +1 @@ + diff --git a/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/icons/library.svg b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/icons/library.svg new file mode 100644 index 00000000..9a21da43 --- /dev/null +++ b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/icons/library.svg @@ -0,0 +1 @@ + diff --git a/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/icons/notifications.svg b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/icons/notifications.svg new file mode 100644 index 00000000..1e176c3f --- /dev/null +++ b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/icons/notifications.svg @@ -0,0 +1 @@ + diff --git a/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/icons/originals.svg b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/icons/originals.svg new file mode 100644 index 00000000..405a1e86 --- /dev/null +++ b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/icons/originals.svg @@ -0,0 +1 @@ + diff --git a/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/icons/search.svg b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/icons/search.svg new file mode 100644 index 00000000..64a0860e --- /dev/null +++ b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/icons/search.svg @@ -0,0 +1 @@ + diff --git a/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/icons/subscriptions.svg b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/icons/subscriptions.svg new file mode 100644 index 00000000..590e44a6 --- /dev/null +++ b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/icons/subscriptions.svg @@ -0,0 +1 @@ + diff --git a/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/icons/upload.svg b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/icons/upload.svg new file mode 100644 index 00000000..b72b4983 --- /dev/null +++ b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/icons/upload.svg @@ -0,0 +1 @@ + diff --git a/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/icons/voice-search-icon.svg b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/icons/voice-search-icon.svg new file mode 100644 index 00000000..4aa17ea0 --- /dev/null +++ b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/icons/voice-search-icon.svg @@ -0,0 +1 @@ + diff --git a/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/icons/youtube-apps.svg b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/icons/youtube-apps.svg new file mode 100644 index 00000000..f2a57831 --- /dev/null +++ b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/icons/youtube-apps.svg @@ -0,0 +1 @@ + diff --git a/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/icons/youtube-logo.svg b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/icons/youtube-logo.svg new file mode 100644 index 00000000..728f4ffc --- /dev/null +++ b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/icons/youtube-logo.svg @@ -0,0 +1 @@ + diff --git a/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/icons/youtube-music.svg b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/icons/youtube-music.svg new file mode 100644 index 00000000..22c5bc02 --- /dev/null +++ b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/icons/youtube-music.svg @@ -0,0 +1 @@ + diff --git a/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/profile-pics/.DS_Store b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/profile-pics/.DS_Store new file mode 100644 index 00000000..5f322370 Binary files /dev/null and b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/profile-pics/.DS_Store differ diff --git a/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/profile-pics/my-profile-pic.jpg b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/profile-pics/my-profile-pic.jpg new file mode 100644 index 00000000..c425c54a Binary files /dev/null and b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/profile-pics/my-profile-pic.jpg differ diff --git a/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/profile-pics/profile-pic1.jpg b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/profile-pics/profile-pic1.jpg new file mode 100644 index 00000000..e9b11b60 Binary files /dev/null and b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/profile-pics/profile-pic1.jpg differ diff --git a/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/profile-pics/profile-pic2.jpg b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/profile-pics/profile-pic2.jpg new file mode 100644 index 00000000..ce0356fc Binary files /dev/null and b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/profile-pics/profile-pic2.jpg differ diff --git a/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/profile-pics/profile-pic3.jpg b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/profile-pics/profile-pic3.jpg new file mode 100644 index 00000000..7efa5fec Binary files /dev/null and b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/profile-pics/profile-pic3.jpg differ diff --git a/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/profile-pics/profile-pic4.jpg b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/profile-pics/profile-pic4.jpg new file mode 100644 index 00000000..5c396e7e Binary files /dev/null and b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/profile-pics/profile-pic4.jpg differ diff --git a/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/profile-pics/profile-pic5.jpg b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/profile-pics/profile-pic5.jpg new file mode 100644 index 00000000..24a239c2 Binary files /dev/null and b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/profile-pics/profile-pic5.jpg differ diff --git a/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/profile-pics/profile-pic6.jpg b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/profile-pics/profile-pic6.jpg new file mode 100644 index 00000000..2f8ae629 Binary files /dev/null and b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/profile-pics/profile-pic6.jpg differ diff --git a/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/profile-pics/profile-pic7.jpeg b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/profile-pics/profile-pic7.jpeg new file mode 100644 index 00000000..67670235 Binary files /dev/null and b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/profile-pics/profile-pic7.jpeg differ diff --git a/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/profile-pics/profile-pic8.jpeg b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/profile-pics/profile-pic8.jpeg new file mode 100644 index 00000000..f2d45e9d Binary files /dev/null and b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/profile-pics/profile-pic8.jpeg differ diff --git a/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/profile-pics/profile-pic9.jpeg b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/profile-pics/profile-pic9.jpeg new file mode 100644 index 00000000..54f146b9 Binary files /dev/null and b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/profile-pics/profile-pic9.jpeg differ diff --git a/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/styles/.DS_Store b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/styles/.DS_Store new file mode 100644 index 00000000..a06a76c3 Binary files /dev/null and b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/styles/.DS_Store differ diff --git a/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/styles/general copy.css b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/styles/general copy.css new file mode 100644 index 00000000..fc90ab3d --- /dev/null +++ b/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; +} + diff --git a/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/styles/general.css b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/styles/general.css new file mode 100644 index 00000000..9610bc25 --- /dev/null +++ b/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; + +} \ No newline at end of file diff --git a/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/styles/hamburger-menu.svg b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/styles/hamburger-menu.svg new file mode 100644 index 00000000..155e2386 --- /dev/null +++ b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/styles/hamburger-menu.svg @@ -0,0 +1 @@ + diff --git a/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/styles/header.css b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/styles/header.css new file mode 100644 index 00000000..84fe59b3 --- /dev/null +++ b/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; +} + diff --git a/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/styles/video-preview.css b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/styles/video-preview.css new file mode 100644 index 00000000..e69de29b diff --git a/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/styles/video.css b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/styles/video.css new file mode 100644 index 00000000..33fcd9b4 --- /dev/null +++ b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/styles/video.css @@ -0,0 +1,90 @@ + +.thumbnail +{ + width:100%; + +} + +.video-title +{ + margin-top: 0; + font-size: 14px; + font-weight:500; + margin-bottom: 10px; + line-height: 20px; +} +.video-author,.video-stats +{ + + font-size: 12px; + color:rgb(96,96,96) ; + +} +.video-author{ + margin-bottom: 4px; +} +.video-info-grid +{ + display: grid; + grid-template-columns: 50px 1fr ; + +} + + +.profile-pic +{ + width: 36px; + height:40px; + border-radius: 50px; + +} +.thumbnail-row +{ + margin-bottom: 8px; + position: relative; + +} + .video-grid + { + display: grid; + grid-template-columns: 1fr 1fr 1fr ; + column-gap: 16px; + row-gap: 40px; + + } +@media(max-width:750px) +{ + .video-grid + { + grid-template-columns: 1fr 1fr; + } +} +@media(min-width:751px) and (max-width:999px) +{ + .video-grid + { + grid-template-columns: 1fr 1fr 1fr; + } +} +@media(min-width:1000px) +{ + .video-grid + { + grid-template-columns: 1fr 1fr 1fr 1fr; + } +} + +.video-time +{ + background-color: black; + color: white; + position:absolute; + bottom: 8px; + right: 5px; + + font-size: 12px; + font-weight: 500; + padding:4px ; + border-radius: 2px; + +} \ No newline at end of file diff --git a/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/thumbnail/.DS_Store b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/thumbnail/.DS_Store new file mode 100644 index 00000000..9346cff7 Binary files /dev/null and b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/thumbnail/.DS_Store differ diff --git a/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/thumbnail/thumbnail-1.jpg b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/thumbnail/thumbnail-1.jpg new file mode 100644 index 00000000..573e22e8 Binary files /dev/null and b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/thumbnail/thumbnail-1.jpg differ diff --git a/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/thumbnail/thumbnail-10.jpg b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/thumbnail/thumbnail-10.jpg new file mode 100644 index 00000000..f4b59447 Binary files /dev/null and b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/thumbnail/thumbnail-10.jpg differ diff --git a/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/thumbnail/thumbnail-2.jpg b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/thumbnail/thumbnail-2.jpg new file mode 100644 index 00000000..0ed6a1ed Binary files /dev/null and b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/thumbnail/thumbnail-2.jpg differ diff --git a/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/thumbnail/thumbnail-3.jpg b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/thumbnail/thumbnail-3.jpg new file mode 100644 index 00000000..b300435e Binary files /dev/null and b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/thumbnail/thumbnail-3.jpg differ diff --git a/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/thumbnail/thumbnail-4.jpg b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/thumbnail/thumbnail-4.jpg new file mode 100644 index 00000000..2d8320bf Binary files /dev/null and b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/thumbnail/thumbnail-4.jpg differ diff --git a/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/thumbnail/thumbnail-5.jpg b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/thumbnail/thumbnail-5.jpg new file mode 100644 index 00000000..56432adb Binary files /dev/null and b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/thumbnail/thumbnail-5.jpg differ diff --git a/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/thumbnail/thumbnail-6.jpg b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/thumbnail/thumbnail-6.jpg new file mode 100644 index 00000000..2d75284c Binary files /dev/null and b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/thumbnail/thumbnail-6.jpg differ diff --git a/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/thumbnail/thumbnail-7.jpg b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/thumbnail/thumbnail-7.jpg new file mode 100644 index 00000000..61d5fccc Binary files /dev/null and b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/thumbnail/thumbnail-7.jpg differ diff --git a/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/thumbnail/thumbnail-8.jpg b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/thumbnail/thumbnail-8.jpg new file mode 100644 index 00000000..1e69f65b Binary files /dev/null and b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/thumbnail/thumbnail-8.jpg differ diff --git a/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/thumbnail/thumbnail-9.jpg b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/thumbnail/thumbnail-9.jpg new file mode 100644 index 00000000..03e87452 Binary files /dev/null and b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/thumbnail/thumbnail-9.jpg differ diff --git a/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/youtube.html b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/youtube.html new file mode 100644 index 00000000..873094e8 --- /dev/null +++ b/Domains/Frontend/MiniProjects/YoutubeClone/youtube-clone/youtube.html @@ -0,0 +1,308 @@ + + + + Youtube clone + + + + + + + + + +
+ +
+
+ + +
+
+ + + + +
+
+
+ +
Create
+
+ + +
+ +
+ 3 +
+
+ + +
+
+ + +
+
+
+
+
+
+ +
14:20
+
+ +
+
+ +
+
+

+ Talking Tech and AI with Google CEO Sundar Pichai! +

+

+ Steven Conklin +

+

+ 3.4 Million views · 6 months ago +

+
+
+
+ + +
+
+ +
5:00
+
+
+
+ +
+
+

+ Try not to laugh challenge #9 +

+

+ Horid Henry +

+

+ 9 Million views · 4 years ago +

+
+
+
+ +
+
+ +
1:30:00
+
+ +
+
+ +
+
+

+ The day I confessed my love to my brother's fiance aka my ex-girlfriend +

+

+ Conrad Fisher +

+

+ 30 Million views · 2 years ago +

+
+
+
+ + +
+
+ +
2:50
+
+
+
+ +
+
+

+ How to pass exams without studying +

+

+ Arisu +

+

+ 123k views · 2 years ago +

+
+
+
+ + + +
+
+ +
20:40
+
+ +
+
+ +
+
+

+ Daily Vlog part-01. +

+

+ Lara Jean Covey +

+

+ 3 Million views · 8 months ago +

+
+
+
+ + +
+
+ +
1:34:50
+
+
+
+ +
+
+

+ How not to fall in love with two brothers at the same time!!! +

+

+ Isabel Conklin +

+

+ 10 Million views · 5 years ago +

+
+
+
+ + +
+
+ +
15:20
+
+ +
+
+ +
+
+

+ Tokyo vlog pt-1 +

+

+ Rain Spencer +

+

+ 5 Million views · 10 months ago +

+
+
+
+ + + +
+
+ +
54:00
+
+ +
+
+ +
+
+

+ Learn stocks from the OG tech bro! +

+

+ Denice +

+

+ 10 Million views · 4 years ago +

+
+
+
+ + + +
+
+ +
3:19
+
+ +
+
+ +
+
+

+ The best of netflix rewind. +

+

+ Chillguy09 +

+

+ 6 Million views · 6 months ago +

+
+
+
+
+
+ + + + \ No newline at end of file