Merhaba değerli Türk Hack Team üyeleri, Ben WATNEA
Youtube Arayüzünü
HTM+CSS
kullanarak yapmaya çalışacağız amaç pratiğimizi geliştirmek
Web Programlamanın en güzel yanı yazdığın kodları direkt görebilmektir.
Yazarken hangi komutun nerde neden kullanıldığını anlarsınız.
Bazı kısımları atladım pratiğin fazla karışmaması için
seri şeklinde devam edicem daha gelişmiş konularda gelecek.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Pratik</title>
<link rel="stylesheet" href="style.css" class="css">
<!-- Boostrap CDN-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
</head>
<body>
<header>
<div class="header-left">
<i class="bi bi-list-stars"></i>
<h3 class="logo">Youtube</h3>
</div>
<div class="header-center">
<div class="header-search">
<input type="text" placeholder="Ara">
<i class="bi bi-search"></i>
<i class="bi bi-mic"></i>
</div>
</div>
<div class="header-right">
<i class="bi bi-camera-video"></i>
<i class="bi bi-bell"></i>
<div class="avatar">
<img src="profile6.jpg" alt="avatar">
</div>
</div>
</header>
<div class="content">
<div class="sidebar">
<ul class="sidebar-buttons">
<li class="sidebar-items">
<a href="#">
<i class="bi bi-house"></i>
<span>Ana Sayfa</span>
</a>
</li>
<li class="sidebar-items">
<a href="#">
<i class="bi bi-house"></i>
<span>Short</span>
</a>
</li>
<li class="sidebar-items">
<a href="#">
<i class="bi bi-house"></i>
<span>Abonelikler</span>
</a>
</li>
<li class="sidebar-items">
<a href="#">
<i class="bi bi-house"></i>
<span>Kitaplığım</span>
</a>
</li>
</ul>
</div>
<div class="videos">
<ul class="video">
<li class="video-item">
<div class="video-img">
<img src="https://i.ytimg.com/vi/l3WZSmSC6zM/hqdefault.jpg?sqp=-oaymwEcCNACELwBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLDl86-BU_nXaWvPOH69Z2Fub_TxtQ" alt="Thumbnail">
<span>16:18</span>
</div>
<div class="video-txt">
<a href="#">Csrf Xsrf Açığı Sömürme Ve Fixleme İşlemleri</a>
<span>242 görüntüleme • 4 ay önce</span>
</div>
</li>
<li class="video-item">
<div class="video-img">
<img src="https://i.ytimg.com/vi/zI6ZQf_tpHw/hqdefault.jpg?sqp=-oaymwEcCNACELwBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLCazGdKh-65AxDpMN_iukRQI9pKoA" alt="Thumbnail">
<span>12:05</span>
</div>
<div class="video-txt">
<a href="#">OpenVPN Sunucu Kurulumu</a>
<span>1,3 B görüntüleme • 4 ay önce</span>
</div>
</li>
<li class="video-item">
<div class="video-img">
<img src="https://i.ytimg.com/vi/5yK921jtLJs/hqdefault.jpg?sqp=-oaymwEcCNACELwBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLAJpz3bwOabWTyu7oRdNFl7qLg0kA" alt="Thumbnail">
<span>44:13</span>
</div>
<div class="video-txt">
<a href="#">Siber Güvenlik Uzmanı Vahap Eren'den Metaverse ile ilgili Önemli Açıklamalar</a>
<span>4,9 B görüntüleme • 1 yıl önce</span>
</div>
</li>
<li class="video-item">
<div class="video-img">
<img src="https://i.ytimg.com/vi/kpUatGHVhS4/hqdefault.jpg?sqp=-oaymwEcCPYBEIoBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLDh34UBrhK38G3zWGGnzf4icpSQsw" alt="Thumbnail">
<span>12:03</span>
</div>
<div class="video-txt">
<a href="#">Hava Kuvvetleri İstihbarat Dairesi E. Başkanı Albay Gürsel Tokmakoğlu'dan Gayri Nizami Harp Doktrini</a>
<span>624 görüntüleme • 1 yıl önce</span>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
CSS:
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
* {
margin: 0;
padding: 0;
}
body{
background-color: #0F0F0F;
font-family: 'Poppins', sans-serif;
}
/* HEADER */
header{
border-bottom: 1px solid red;
height: 60px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 36px;
}
header i {
font-size: 20px;
color: white;
}
.header-left{
display: flex;
align-items: center;
}
.header-left h3 {
font-size: 26px;
color: #FF0000;
margin-left: 12px;
}
.header-center {
display: flex;
align-items: center;
}
.header-search{
border:1px solid #717171;
padding: 2px;
display: flex;
align-items: center;
border-radius: 30px;
}
.header-search .bi-search {
font-size: 20px;
margin-right: 5px;
cursor: pointer;
}
.header-search .bi-mic {
font-size: 20px;
margin-right: 5px;
cursor: pointer;
}
.header-center .bi-mic {
background-color: #342a28;
padding: 5px;
border-radius: 20px;
}
.header-search input {
background-color: #0f0f0f;
border: none;
outline: none;
}
.header-right {
display: flex;
align-items: center;
column-gap: 5px;
}
.header-right .avatar img {
width: 33px;
height: 33px;
}
.header-right .avatar img {
width: 100%;
border-radius: 100%;
}
/* Content */
.content {
display: flex;
}
/* SİDEBAR */
.sidebar{
height: 100vh;
border-right: 1px solid #717171;
width: 100px;
padding-top: 25px;
}
.sidebar-items {
margin-top: 15px;
}
.sidebar-items a{
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none;
color: white;
transition: 1s ease color;
}
.sidebar-items a:hover {
color: #FF0000;
}
.sidebar i{
font-size: 20px;
}
.sidebar-items span{
font-size: 10px;
margin-top: 10px;
}
/* VİDEO */
.videos {
margin: 20px;
flex: 1;
}
.video {
color: white;
list-style: none;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.video-img{
position: relative;
display: flex;
}
.video-img img{
width: 100%;
}
.video-img span{
position: absolute;
bottom: 4px;
right: 4px;
padding: 4px;
background-color: #0f0f0f;
font-size: 15px;
}
.video-txt{
display: flex;
row-gap: 3px;
flex-direction: column;
margin-top: 2px;
}
.video-txt a {
color: white;
text-decoration: none;
}
.video-txt span {
font-size: 12px;
}
Son düzenleme:
