0% found this document useful (0 votes)

38 views38 pages

Youtube Clone

The document describes HTML and CSS code for building a YouTube clone user interface. It includes the HTML code with different sections like header, sidebar, and videos. It also includes sample video content to populate the videos section.

Uploaded by

Gaurav Yadav

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

38 views38 pages

Youtube Clone

Uploaded by

Gaurav Yadav

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 38

Web page-05

AIM :Youtube clone using html and css

HTML CODE:
<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="styles.css" />

<title>Final - Youtube UI Clone</title>

</head>

<body>

<i id="menu" class="material-icons">menu</i>

<img

src="https://www.youtube.com/about/static/svgs/icons/brand-resources
/YouTube-logo-full_color_light.svg?cache=72a5d9c"

alt=""

</div>

<input type="text" placeholder="Search" />

<button><i class="material-icons">search</i></button>

</form>

</div>

<i class="material-icons display-this">search</i>

<i class="material-icons">videocam</i>

<i class="material-icons">notifications</i>

<i class="material-icons display-this">account_circle</i>

</div>

</div>

<i class="material-icons">local_fire_department</i>

<span>Trending</span>

</div>

<i class="material-icons">subscriptions</i>

<span>Subcriptions</span>

</div>

</div>
<hr />

<i class="material-icons">library_add_check</i>

<span>Library</span>

</div>

<i class="material-icons">history</i>

<span>History</span>

</div>

<i class="material-icons">play_arrow</i>

<span>Your Videos</span>

</div>

<i class="material-icons">watch_later</i>

<span>Watch Later</span>

</div>

<i class="material-icons">thumb_up</i>

<span>Liked Videos</span>

</div>
</div>

<hr />

</div>

<h1>Recommended</h1>

</div>

</div>

Top 5 Programming Languages to Learn in 2021 |

Best Programming Languages to Learn

</h3>

<a href="">FutureCoders</a>

<span>10M Views • 3 Months Ago</span>

</div>

</div>

</div>
<div class="title">

<h3>Build A Password Generator with React JS -

Beginners Tutorial</h3>

<a href="">FutureCoders</a>

<span>10M Views • 3 Months Ago</span>

</div>

</div>

<img

src="https://yt3.ggpht.com/ytc/AAUvwnh53ZRIGnyzC28QrfuggCINb3cfN
bNWo4Uc6qR9=s48-c-k-c0x00ffffff-no-rj"

alt=""

/>
</div>

<h3>Bella Ciao Full Song | La Casa De Papel | Money

Heist | Netflix India</h3>

<a href="">Netflix</a>

<span>10M Views • 11 Months Ago</span>

</div>

</div>

<img

src="https://yt3.ggpht.com/ytc/AAUvwnhESPVEatju_1yE-03-KLeSrnSLc5
yy0RcvhPd5Lg=s48-c-k-c0x00ffffff-no-rj"

alt=""

/>
</div>

<h3>DON'T EVER GIVE UP - Elon Musk (Motivational

Video)</h3>

<a href=""> Chispa Motivation</a>

<span>10M Views • 1 Month Ago</span>

</div>

</div>

<img

src="https://yt3.ggpht.com/ytc/AAUvwniaHN7MZyFEiNvdHuKMzIWnDF6
04Z2--O4GCMq-FA=s48-c-k-c0x00ffffff-no-rj"

alt=""

/>
</div>

<h3>Javascript Fundamentals</h3>

<a href="">Coding Addict</a>

<span>179K • 8 Months Ago</span>

</div>

</div>

<img

src="https://yt3.ggpht.com/ytc/AAUvwnifaQZvAunS0OFb2y_cieoVjLCVjq
QW8Exf3BC1gg=s48-c-k-c0x00ffffff-no-rj"

alt=""

/>
</div>

<h3>Build 15 JavaScript Projects - Vanilla JavaScript

Course</h3>

<a href=""> freeCodeCamp.org </a>

<span>470K Views • 8 Months Ago</span>

</div>

</div>

<img

src="https://yt3.ggpht.com/ytc/AAUvwnhIz_0Su6HhW6Ym50QCroJCAnF
10X9xnnMDboN2=s48-c-k-c0x00ffffff-no-rj"

alt=""

/>
</div>

<h3>Build Real Time Face Detection With

JavaScript</h3>

<a href=""> Web Dev Simplified </a>

<span>875K Views • 1 Year Ago</span>

</div>

</div>

<img

src="https://yt3.ggpht.com/ytc/AAUvwnifaQZvAunS0OFb2y_cieoVjLCVjq
QW8Exf3BC1gg=s48-c-k-c0x00ffffff-no-rj"

alt=""

/>
</div>

<h3>AWS Basics for Beginners - Full Course</h3>

<a href=""> freeCodeCamp.org </a>

<span>36K Views • 1 Day Ago</span>

</div>

</div>

</div>

<h3>

Top 5 Programming Languages to Learn in 2021 |

Best Programming Languages to Learn

</h3>

<a href="">FutureCoders</a>

<span>10M Views • 3 Months Ago</span>

</div>

</div>

</div>

<h3>Build A Password Generator with React JS -

Beginners Tutorial</h3>

<a href="">FutureCoders</a>
<span>10M Views • 3 Months Ago</span>

</div>

</div>

<img

src="https://yt3.ggpht.com/ytc/AAUvwnh53ZRIGnyzC28QrfuggCINb3cfN
bNWo4Uc6qR9=s48-c-k-c0x00ffffff-no-rj"

alt=""

</div>

<h3>Bella Ciao Full Song | La Casa De Papel | Money

Heist | Netflix India</h3>

<a href="">Netflix</a>
<span>10M Views • 11 Months Ago</span>

</div>

</div>

<img

src="https://yt3.ggpht.com/ytc/AAUvwnhESPVEatju_1yE-03-KLeSrnSLc5
yy0RcvhPd5Lg=s48-c-k-c0x00ffffff-no-rj"

alt=""

</div>

<h3>DON'T EVER GIVE UP - Elon Musk (Motivational

Video)</h3>

<a href=""> Chispa Motivation</a>

<span>10M Views • 1 Month Ago</span>

</div>

</div>

<img

src="https://yt3.ggpht.com/ytc/AAUvwniaHN7MZyFEiNvdHuKMzIWnDF6
04Z2--O4GCMq-FA=s48-c-k-c0x00ffffff-no-rj"

alt=""

</div>

<h3>Javascript Fundamentals</h3>

<a href="">Coding Addict</a>

<span>179K • 8 Months Ago</span>

</div>

</div>

<img

src="https://yt3.ggpht.com/ytc/AAUvwnifaQZvAunS0OFb2y_cieoVjLCVjq
QW8Exf3BC1gg=s48-c-k-c0x00ffffff-no-rj"

alt=""

</div>

<h3>Build 15 JavaScript Projects - Vanilla JavaScript

Course</h3>

<a href=""> freeCodeCamp.org </a>

<span>470K Views • 8 Months Ago</span>

</div>

</div>

<img

src="https://yt3.ggpht.com/ytc/AAUvwnhIz_0Su6HhW6Ym50QCroJCAnF
10X9xnnMDboN2=s48-c-k-c0x00ffffff-no-rj"

alt=""

</div>

<h3>Build Real Time Face Detection With

JavaScript</h3>

<a href=""> Web Dev Simplified </a>

<span>875K Views • 1 Year Ago</span>

</div>

</div>

<img

src="https://yt3.ggpht.com/ytc/AAUvwnifaQZvAunS0OFb2y_cieoVjLCVjq
QW8Exf3BC1gg=s48-c-k-c0x00ffffff-no-rj"

alt=""

</div>

<h3>AWS Basics for Beginners - Full Course</h3>

<a href=""> freeCodeCamp.org </a>

<span>36K Views • 1 Day Ago</span>

</div>

</div>

</div>

<h3>

Top 5 Programming Languages to Learn in 2021 |

Best Programming Languages to Learn

</h3>

<a href="">FutureCoders</a>

<span>10M Views • 3 Months Ago</span>

</div>

</div>

</div>

<h3>Build A Password Generator with React JS -

Beginners Tutorial</h3>

<a href="">FutureCoders</a>

<span>10M Views • 3 Months Ago</span>

</div>

</div>
<div class="video">

</div>

<img

src="https://yt3.ggpht.com/ytc/AAUvwnh53ZRIGnyzC28QrfuggCINb3cfN
bNWo4Uc6qR9=s48-c-k-c0x00ffffff-no-rj"

alt=""

</div>

<h3>Bella Ciao Full Song | La Casa De Papel | Money

Heist | Netflix India</h3>

<a href="">Netflix</a>

<span>10M Views • 11 Months Ago</span>

</div>

</div>
<div class="video">

</div>

<img

src="https://yt3.ggpht.com/ytc/AAUvwnhESPVEatju_1yE-03-KLeSrnSLc5
yy0RcvhPd5Lg=s48-c-k-c0x00ffffff-no-rj"

alt=""

</div>

<h3>DON'T EVER GIVE UP - Elon Musk (Motivational

Video)</h3>

<a href=""> Chispa Motivation</a>

<span>10M Views • 1 Month Ago</span>

</div>

</div>
<div class="video">

</div>

<img

src="https://yt3.ggpht.com/ytc/AAUvwniaHN7MZyFEiNvdHuKMzIWnDF6
04Z2--O4GCMq-FA=s48-c-k-c0x00ffffff-no-rj"

alt=""

</div>

<h3>Javascript Fundamentals</h3>

<a href="">Coding Addict</a>

<span>179K • 8 Months Ago</span>

</div>

</div>
<div class="video">

</div>

<img

src="https://yt3.ggpht.com/ytc/AAUvwnifaQZvAunS0OFb2y_cieoVjLCVjq
QW8Exf3BC1gg=s48-c-k-c0x00ffffff-no-rj"

alt=""

</div>

<h3>Build 15 JavaScript Projects - Vanilla JavaScript

Course</h3>

<a href=""> freeCodeCamp.org </a>

<span>470K Views • 8 Months Ago</span>

</div>

</div>
<div class="video">

</div>

<img

src="https://yt3.ggpht.com/ytc/AAUvwnhIz_0Su6HhW6Ym50QCroJCAnF
10X9xnnMDboN2=s48-c-k-c0x00ffffff-no-rj"

alt=""

</div>

<h3>Build Real Time Face Detection With

JavaScript</h3>

<a href=""> Web Dev Simplified </a>

<span>875K Views • 1 Year Ago</span>

</div>

</div>
<div class="video">

</div>

<img

src="https://yt3.ggpht.com/ytc/AAUvwnifaQZvAunS0OFb2y_cieoVjLCVjq
QW8Exf3BC1gg=s48-c-k-c0x00ffffff-no-rj"

alt=""

</div>

<h3>AWS Basics for Beginners - Full Course</h3>

<a href=""> freeCodeCamp.org </a>

<span>36K Views • 1 Day Ago</span>

</div>

</div>
</div>

</div>

</body>

</html>

CSS CODE:

@import
url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;70
0&display=swap');

margin: 0;

padding: 0;

box-sizing: border-box;

body {

font-family: 'Roboto', sans-serif;

/* header */
.material-icons {

color: rgb(96, 96, 96);

.header {

display: flex;

justify-content: space-between;

align-items: center;

height: 70px;

padding: 15px;

.header__left {

display: flex;

align-items: center;

.header__left img {

width: 100px;

margin-left: 15px;

}
.header i {

padding: 0 7px;

cursor: pointer;

.header__search form {

border: 1px solid #ddd;

height: 35px;

margin: 0;

padding: 0;

display: flex;

.header__search input {

width: 500px;

padding: 10px;

margin: 0;

border-radius: 0;

border: none;

height: 100%;

}
.header__search button {

padding: 0;

margin: 0;

height: 100%;

border: none;

border-radius: 0;

/* Sidebar */

.mainBody {

height: calc(100vh - 70px);

display: flex;

overflow: hidden;

.sidebar {

height: 100%;

width: 230px;

background-color: white;

overflow-y: scroll;

}
.sidebar__categories {

width: 100%;

display: flex;

flex-direction: column;

margin-bottom: 15px;

margin-top: 15px;

.sidebar__category {

display: flex;

align-items: center;

padding: 12px 25px;

.sidebar__category span {

margin-left: 15px;

.sidebar__category:hover {

background: #e5e5e5;

cursor: pointer;

}
.sidebar::-webkit-scrollbar {

display: none;

hr {

height: 1px;

background-color: #e5e5e5;

border: none;

/* videos */

.videos {

background-color: #f9f9f9;

width: 100%;

height: 100%;

padding: 15px 15px;

border-top: 1px solid #ddd;

overflow-y: scroll;

.videos__container {

display: flex;

flex-direction: row;

justify-content: space-around;

flex-wrap: wrap;
}

.video {

width: 310px;

margin-bottom: 30px;

.video__thumbnail {

width: 100%;

height: 170px;

.video__thumbnail img {

object-fit: cover;

height: 100%;

width: 100%;

.author img {

object-fit: cover;

border-radius: 50%;

height: 40px;

width: 40px;

margin-right: 10px;

.video__details {
display: flex;

margin-top: 10px;

.title {

display: flex;

flex-direction: column;

.title h3 {

color: rgb(3, 3, 3);

line-height: 18px;

font-size: 14px;

margin-bottom: 6px;

.title a,

span {

text-decoration: none;

color: rgb(96, 96, 96);

font-size: 14px;

h1 {

font-size: 20px;

margin-bottom: 10px;
color: rgb(3, 3, 3);

@media (max-width: 425px) {

.header__search {

display: none;

.header__icons .material-icons {

display: none;

.header__icons .display-this {

display: inline;

.sidebar {

display: none;

@media (max-width: 768px) {

.header__search {

display: none;

.sidebar {

display: none;
}

.show-sidebar {

display: inline;

position: fixed;

top: 4.4rem;

height: auto;

@media (max-width: 941px) {

.header__search input {

width: 300px;

Personal Portfolio Website
No ratings yet
Personal Portfolio Website
36 pages
Web Tech Project Report by 211193
No ratings yet
Web Tech Project Report by 211193
41 pages
HTML5 Programming Cookbook
100% (6)
HTML5 Programming Cookbook
67 pages
Web Development Free Resources
No ratings yet
Web Development Free Resources
2 pages
Pseudocode Pro Website
No ratings yet
Pseudocode Pro Website
25 pages
HML
No ratings yet
HML
9 pages
Bulma and Others
No ratings yet
Bulma and Others
5 pages
Dynamic Web Page Development
No ratings yet
Dynamic Web Page Development
39 pages
Assignment 3
No ratings yet
Assignment 3
18 pages
Index HTML
No ratings yet
Index HTML
23 pages
Web Design Record
No ratings yet
Web Design Record
88 pages
Web Dev Syllabus
No ratings yet
Web Dev Syllabus
11 pages
Web Dev Syllabus
No ratings yet
Web Dev Syllabus
5 pages
Website
No ratings yet
Website
29 pages
WT
No ratings yet
WT
33 pages
Free Ki Majduri
No ratings yet
Free Ki Majduri
39 pages
Assessment 2 Web
No ratings yet
Assessment 2 Web
30 pages
AIT Practical
No ratings yet
AIT Practical
86 pages
Blog Report1
No ratings yet
Blog Report1
24 pages
Web Dev Syllabus
No ratings yet
Web Dev Syllabus
5 pages
Documentation Bootstrap
No ratings yet
Documentation Bootstrap
19 pages
FRONTENDNOTES
No ratings yet
FRONTENDNOTES
27 pages
Web Programs
No ratings yet
Web Programs
14 pages
Creating An About Me Page 2. Adding CSS Stylesheet
No ratings yet
Creating An About Me Page 2. Adding CSS Stylesheet
14 pages
Web DLinks
No ratings yet
Web DLinks
22 pages
Web Tech File
No ratings yet
Web Tech File
19 pages
Sounak Portfolio Website
No ratings yet
Sounak Portfolio Website
16 pages
Cara Membuat Halaman Web
No ratings yet
Cara Membuat Halaman Web
9 pages
Web Development Lesson Eleven
No ratings yet
Web Development Lesson Eleven
13 pages
Abhi Index
No ratings yet
Abhi Index
23 pages
Notepad Code
No ratings yet
Notepad Code
18 pages
Build A Personal Portfolio Webpage
No ratings yet
Build A Personal Portfolio Webpage
10 pages
Lab 3
No ratings yet
Lab 3
10 pages
YouTube Tutorials Playlists & Videos
No ratings yet
YouTube Tutorials Playlists & Videos
12 pages
New Text Document
No ratings yet
New Text Document
14 pages
New Text Document
No ratings yet
New Text Document
16 pages
Web Development Content and Students Works
No ratings yet
Web Development Content and Students Works
5 pages
Batch-13 - Navinvarma A - Frontend - Main Task
No ratings yet
Batch-13 - Navinvarma A - Frontend - Main Task
11 pages
Job 6 (CW1)
No ratings yet
Job 6 (CW1)
9 pages
Web Dev Syllabus
No ratings yet
Web Dev Syllabus
5 pages
6 Great Coding YouTube Channels Medium Ref
No ratings yet
6 Great Coding YouTube Channels Medium Ref
7 pages
Learn Basic HTML, CSS: Learn Javascript (Front End)
No ratings yet
Learn Basic HTML, CSS: Learn Javascript (Front End)
5 pages
Computer Workshopjob
No ratings yet
Computer Workshopjob
8 pages
E-Commerce Lab HTML With Outputs
No ratings yet
E-Commerce Lab HTML With Outputs
4 pages
Transfer Dock - Text - 20240810093205
No ratings yet
Transfer Dock - Text - 20240810093205
7 pages
Live TV Code File by BSM
No ratings yet
Live TV Code File by BSM
6 pages
Web Dev Syllabus PDF
No ratings yet
Web Dev Syllabus PDF
5 pages
(A) Fundamentals of Website Building 1. HTML Basics HTML Structure
No ratings yet
(A) Fundamentals of Website Building 1. HTML Basics HTML Structure
7 pages
Music File
No ratings yet
Music File
3 pages
HTML - Layouts
No ratings yet
HTML - Layouts
5 pages
Build A Technical Documentation Page
No ratings yet
Build A Technical Documentation Page
3 pages
Frontend Eedc9135d9643f90ebb0
No ratings yet
Frontend Eedc9135d9643f90ebb0
2 pages
Answer
No ratings yet
Answer
4 pages
Tech YouTube Channels
No ratings yet
Tech YouTube Channels
3 pages
Build A Video Compilation Page
No ratings yet
Build A Video Compilation Page
1 page
Complete Transcript Translation To English
No ratings yet
Complete Transcript Translation To English
2 pages
Build A Technical Documentation Page
No ratings yet
Build A Technical Documentation Page
2 pages