My Simple YouTube with HTML and CSS for 2024
My simple project using HTML and CSS
You will found all the resources use in creating this YouTube project here,I with the source codes here.
Copy and paste this code inside the body tag in HTML file
<body>
<div class="header">
<div class="left-side">
<img class="ham-img" src="img/ham.png">
<img class="you-img" src="img/you.png">
</div>
<div class="middle-side">
<input class="search-bar" type="search" placeholder="Search">
<button class="search-button"><img class="search-img" src="img/search.png"</button>
<button class="mic-button"><img class="mic-img" src="img/mic.png"</button>
</div>
<div class="right-side">
<img class="battery-img" src="img/battery.png">
<img class="app-img" src="img/app.png">
<div class="bell-container">
<img class="bell-img" src="img/bell.png">
<div class="bell-icon">3</div>
</div>
<img class="author1-img" src="preview/author.png">
</div>
</div>
<div class="sidebar">
<div class="sidebar-link">
<img src="img/home.png">
<div>Home</div>
</div>
<div class="sidebar-link">
<img src="img/explore.png">
<div>Explore</div>
</div>
<div class="sidebar-link">
<img src="img/subscription.png">
<div>Subscription</div>
</div>
<div class="sidebar-link">
<img src="img/original.png">
<div>Original</div>
</div>
<div class="sidebar-link">
<img src="img/youtube.png">
<div>Youtube Music</div>
</div>
<div class="sidebar-link">
<img src="img/library.png">
<div>Library</div>
</div>
</div>
<div class="grid-video-preview">
<div class="video-preview">
<div class="main-preview"><img class="video-img1" src="preview/1130.png">
<div class="video-time">14:20</div>
</div>
<div class="channel-grid">
<div class="channell-img"><img class="author-img" src="preview/author.png"></div>
<div class="video-para">
<p class="video-title">Download the Best of Ebuka, 2024 (I'm a Soldier).Mp4 </p>
<p class="video-author">Sholpay Omoshola</p>
<p class="video-info">1.2M Views · 6 Months ago</p>
</div>
</div>
</div>
<div class="video-preview">
<div class="main-preview"><img class="video-img1" src="preview/1089.png">
<div class="video-time">8:50</div>
</div>
<div class="channel-grid">
<div class="channell-img"><img class="author-img" src="preview/author2.png"></div>
<div class="video-para">
<p class="video-title">The Best of Joan Smitt,.I love you Lord 2023</p>
<p class="video-author">Sholpay Omoshola</p>
<p class="video-info">1.2M Views · 6 Months ago</p>
</div>
</div>
</div>
<div class="video-preview">
<div class="main-preview"><img class="video-img1" src="preview/1265.png">
<div class="video-time">12:05</div>
</div>
<div class="channel-grid">
<div class="channell-img"><img class="author-img" src="preview/author.png"></div>
<div class="video-para">
<p class="video-title">phil thomson lastest, 2024 (my Worship).Mp4 </p>
<p class="video-author">Johnson Livetv</p>
<p class="video-info">1.2M Views · 6 Months ago</p>
</div>
</div>
</div>
<div class="video-preview">
<div class="main-preview"><img class="video-img1" src="preview/1089.png">
<div class="video-time">7:50</div>
</div>
<div class="channel-grid">
<div class="channell-img"><img class="author-img" src="preview/author2.png"></div>
<div class="video-para">
<p class="video-title">The Best of Joan Smitt,.I love you Lord 2023</p>
<p class="video-author">Sholpay Omoshola</p>
<p class="video-info">1.2M Views · 6 Months ago</p>
</div>
</div>
</div>
<div class="video-preview">
<div class="main-preview"><img class="video-img1" src="preview/1130.png">
<div class="video-time">5:20</div>
</div>
<div class="channel-grid">
<div class="channell-img"><img class="author-img" src="preview/author.png"></div>
<div class="video-para">
<p class="video-title">Download the Best of Ebuka, 2024 (I'm a Soldier).Mp4 </p>
<p class="video-author">Sholpay Omoshola</p>
<p class="video-info">1.2M Views · 6 Months ago</p>
</div>
</div>
</div>
<div class="video-preview">
<div class="main-preview"><img class="video-img1" src="preview/football.png">
<div class="video-time">4:20</div>
</div>
<div class="channel-grid">
<div class="channell-img"><img class="author-img" src="preview/author3.png"></div>
<div class="video-para">
<p class="video-title">suka react as he receive an hit shot 2023</p>
<p class="video-author">Sholpay Omoshola</p>
<p class="video-info">1.2M Views · 6 Months ago</p>
</div>
</div>
</div>
</div>
</body>
Copy and paste this code inside CSS files
Sidebar properties
.sidebar {
position: fixed;
left: 0;
bottom: 0;
top: 55px;
background-color: white;
width: 70px;
z-index: 200;
}
.sidebar-link {
height: 74px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.sidebar-link:hover {
background-color: #EEEEEE;
}
.sidebar-link img {
height: 23px;
margin-bottom: 5px;
}
.sidebar-link div {
font-family: Roboto, Arial;
font-size: 9px;
}
Header properties
.header {
display: flex;
flex-direction: rows;
height: 55px;
justify-content: space-between;
position: fixed;
left: 0;
right: 0;
top: 0;
background-color: white;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #E0E0E0;
z-index: 100;
}
.left-side {
display: flex;
align-items: center;
}
.ham-img {
height: 24px;
margin-left: 24px;
margin-right: 20px;
}
.you-img {
height: 24px;
}
.middle-side {
display: flex;
align-items: center;
flex: 1;
margin-left: 60px;
margin-right: 30px;
max-width: 400px;
}
.search-bar {
flex: 1;
height: 30px;
font-family: Roboto, Arial;
font-size: 14px;
border-width: 1px;
border-style: solid;
border-color: #E0E0E0;
border-radius: 4px;
box-shadow: inset 1px 2xp 5xp rgba(0, 0, 0, 0.15);
width: 0;
}
.search-bar::placeholder {
padding-left: 10px;
font-family: Roboto, Arial;
font-size: 14px;
}
.search-img {
height: 13px;
}
.mic-img {
height: 15px;
}
.search-button {
height: 30px;
width: 55px;
background-color: #FAFAFA;
border-width: 1px;
border-color: #E0E0E0;
border-style: solid;
margin-left: -5px;
}
.mic-button {
margin-left: 8px;
background-color: #FAFAFA;
height: 28px;
width: 28px;
border-radius: 80px;
border: none;
}
.right-side {
display: flex;
align-items: center;
width: 160px;
justify-content: space-between;
margin-right: 20px;
flex-shrink: 0;
}
.bell-container {
position: relative;
}
.bell-icon {
position: absolute;
background-color: red;
color: white;
border-radius: 100px;
top: -4px;
right: -3px;
font-family: Roboto, Arial;
font-size: 8px;
padding-right: 4px;
padding-left: 4px;
padding-bottom: 2px;
padding-top: 2px;
}
.bell-img {
height: 18px;
}
.author1-img {
height: 24px;
border-radius: 30px;
}
.app-img {
height: 17px;
}
.battery-img {
height: 18px;
}
Body properties
body {
width: 800px;
padding-bottom: 2000px;
margin: 0px;
padding-top: 70px;
padding-left: 95px;
padding-right: 30px;
background-color: #EEEEEE;
}
p {
font-family: Roboto, Arial;
margin-bottom: 0px;
margin-top: 0px;
}
.search-bar {
display: block;
}
.video-img1 {
width: 100%;
}
.video-title {
font-family: Roboto, Arial;
line-height: 23px;
margin-top: 0;
font-weight: bold;
margin-bottom: 15px;
}
.video-author {
color: #9E9E9E;
font-size: 12px;
margin-bottom: 6px;
}
.video-info {
color: #9E9E9E;
font-size: 12px;
}
.author-img {
width: 35px;
border-radius: 50px;
}
.channel-grid {
display: grid;
grid-template-columns:50px 1fr;
}
.main-preview {
margin-bottom: 15px;
position: relative;
}
.video-time {
background-color: black;
color: white;
position: absolute;
right: 5px;
bottom: 8;
font-family: Roboto, Arial;
font-size: 11px;
padding: 7px;
font-weight: bold;
border-radius: 3px;
}
.grid-video-preview {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
column-gap: 15px;
row-gap: 40px;
}
You can download the YouTube icons here...icons
Comments
Post a Comment