Tweet
Share
Post
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/>
<title>YouTube</title>
<link
rel="icon"
type="image/x-icon"
href="https://cdn.zaferinci.com/ytfavicon_32x32.png"
/>
<link rel="stylesheet" href="./css/main.css" />
<link
rel="stylesheet"
href="https://zaferinci.com.tr/workspace/reset.css"
/>
<link
rel="stylesheet"
href="https://zaferinci.com.tr/workspace/warning.css"
/>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
</head>
<body>
<header>
<div class="sidebar">
<div class="hamburger">
<svg
viewBox="0 0 24 24"
preserveAspectRatio="xMidYMid meet"
focusable="false"
class="style-scope yt-icon"
>
<g class="style-scope yt-icon">
<path
d="M21,6H3V5h18V6z M21,11H3v1h18V11z M21,17H3v1h18V17z"
class="style-scope yt-icon"
></path>
</g>
</svg>
</div>
<a class="logo" href="#">
<svg
viewBox="0 0 97 20"
preserveAspectRatio="xMidYMid meet"
focusable="false"
class="style-scope yt-icon"
>
<g
viewBox="0 0 97 20"
preserveAspectRatio="xMidYMid meet"
class="style-scope yt-icon"
>
<g class="style-scope yt-icon">
<path
d="M27.9704 3.12324C27.6411 1.89323 26.6745 0.926623 25.4445 0.597366C23.2173 2.24288e-07 14.2827 0 14.2827 0C14.2827 0 5.34807 2.24288e-07 3.12088 0.597366C1.89323 0.926623 0.924271 1.89323 0.595014 3.12324C-2.8036e-07 5.35042 0 10 0 10C0 10 -1.57002e-06 14.6496 0.597364 16.8768C0.926621 18.1068 1.89323 19.0734 3.12324 19.4026C5.35042 20 14.285 20 14.285 20C14.285 20 23.2197 20 25.4468 19.4026C26.6769 19.0734 27.6435 18.1068 27.9727 16.8768C28.5701 14.6496 28.5701 10 28.5701 10C28.5701 10 28.5677 5.35042 27.9704 3.12324Z"
fill="#FF0000"
class="style-scope yt-icon"
></path>
<path
d="M11.4275 14.2854L18.8475 10.0004L11.4275 5.71533V14.2854Z"
fill="white"
class="style-scope yt-icon"
></path>
</g>
<g id="youtube-red-paths" class="style-scope yt-icon" fill="#fff">
<path
d="M40.0566 6.34524V7.03668C40.0566 10.4915 38.5255 12.5118 35.1742 12.5118H34.6638V18.5583H31.9263V1.42285H35.414C38.6078 1.42285 40.0566 2.7728 40.0566 6.34524ZM37.1779 6.59218C37.1779 4.09924 36.7287 3.50658 35.1765 3.50658H34.6662V10.4727H35.1365C36.6064 10.4727 37.1803 9.40968 37.1803 7.10253L37.1779 6.59218Z"
class="style-scope yt-icon"
></path>
<path
d="M46.5336 5.8345L46.3901 9.08238C45.2259 8.83779 44.264 9.02123 43.836 9.77382V18.5579H41.1196V6.0391H43.2857L43.5303 8.75312H43.6337C43.9183 6.77288 44.8379 5.771 46.0232 5.771C46.1949 5.7757 46.3666 5.79687 46.5336 5.8345Z"
class="style-scope yt-icon"
></path>
<path
d="M49.6567 13.2456V13.8782C49.6567 16.0842 49.779 16.8415 50.7198 16.8415C51.6182 16.8415 51.8228 16.1501 51.8439 14.7178L54.2734 14.8613C54.4568 17.5565 53.0481 18.763 50.6586 18.763C47.7588 18.763 46.9004 16.8627 46.9004 13.4126V11.223C46.9004 7.58707 47.8599 5.80908 50.7409 5.80908C53.6407 5.80908 54.3769 7.32131 54.3769 11.0984V13.2456H49.6567ZM49.6567 10.6703V11.5687H51.7193V10.675C51.7193 8.37258 51.5547 7.71172 50.6821 7.71172C49.8096 7.71172 49.6567 8.38669 49.6567 10.675V10.6703Z"
class="style-scope yt-icon"
></path>
<path
d="M68.4103 9.09902V18.5557H65.5928V9.30834C65.5928 8.28764 65.327 7.77729 64.7132 7.77729C64.2216 7.77729 63.7724 8.06186 63.4667 8.59338C63.4832 8.76271 63.4902 8.93439 63.4879 9.10373V18.5605H60.668V9.30834C60.668 8.28764 60.4022 7.77729 59.7884 7.77729C59.2969 7.77729 58.8665 8.06186 58.5631 8.57456V18.5628H55.7456V6.03929H57.9728L58.2221 7.63383H58.2621C58.8947 6.42969 59.9178 5.77588 61.1219 5.77588C62.3072 5.77588 62.9799 6.36854 63.288 7.43157C63.9418 6.34973 64.9225 5.77588 66.0443 5.77588C67.7564 5.77588 68.4103 7.00119 68.4103 9.09902Z"
class="style-scope yt-icon"
></path>
<path
d="M69.8191 2.8338C69.8191 1.4862 70.3106 1.09814 71.3501 1.09814C72.4132 1.09814 72.8812 1.54734 72.8812 2.8338C72.8812 4.22373 72.4108 4.57181 71.3501 4.57181C70.3106 4.56945 69.8191 4.22138 69.8191 2.8338ZM69.9837 6.03935H72.6789V18.5629H69.9837V6.03935Z"
class="style-scope yt-icon"
></path>
<path
d="M81.891 6.03955V18.5631H79.6849L79.4403 17.032H79.3792C78.7466 18.2573 77.827 18.7677 76.684 18.7677C75.0095 18.7677 74.2522 17.7046 74.2522 15.3975V6.0419H77.0697V15.2352C77.0697 16.3382 77.3002 16.7874 77.867 16.7874C78.3844 16.7663 78.8477 16.4582 79.0688 15.9902V6.0419H81.891V6.03955Z"
class="style-scope yt-icon"
></path>
<path
d="M96.1901 9.09893V18.5557H93.3726V9.30825C93.3726 8.28755 93.1068 7.7772 92.493 7.7772C92.0015 7.7772 91.5523 8.06177 91.2465 8.59329C91.263 8.76027 91.2701 8.9296 91.2677 9.09893V18.5557H88.4502V9.30825C88.4502 8.28755 88.1845 7.7772 87.5706 7.7772C87.0791 7.7772 86.6487 8.06177 86.3453 8.57447V18.5627H83.5278V6.0392H85.7527L85.9973 7.63139H86.0372C86.6699 6.42725 87.6929 5.77344 88.8971 5.77344C90.0824 5.77344 90.755 6.3661 91.0631 7.42913C91.7169 6.34729 92.6976 5.77344 93.8194 5.77344C95.541 5.77579 96.1901 7.0011 96.1901 9.09893Z"
class="style-scope yt-icon"
></path>
<path
d="M40.0566 6.34524V7.03668C40.0566 10.4915 38.5255 12.5118 35.1742 12.5118H34.6638V18.5583H31.9263V1.42285H35.414C38.6078 1.42285 40.0566 2.7728 40.0566 6.34524ZM37.1779 6.59218C37.1779 4.09924 36.7287 3.50658 35.1765 3.50658H34.6662V10.4727H35.1365C36.6064 10.4727 37.1803 9.40968 37.1803 7.10253L37.1779 6.59218Z"
class="style-scope yt-icon"
></path>
</g>
</g>
</svg>
</a>
</div>
<div class="search">
<div class="search-field">
<div class="icon" tabindex="0">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M20.87 20.17L15.28 14.58C16.35 13.35 17 11.75 17 10C17 6.13 13.87 3 10 3C6.13 3 3 6.13 3 10C3 13.87 6.13 17 10 17C11.75 17 13.35 16.35 14.58 15.29L20.17 20.88L20.87 20.17ZM10 16C6.69 16 4 13.31 4 10C4 6.69 6.69 4 10 4C13.31 4 16 6.69 16 10C16 13.31 13.31 16 10 16Z"
fill="white"
></path>
</svg>
</div>
<input type="text" placeholder="Search" />
</div>
<div class="actions">
<button>
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M20.87 20.17L15.28 14.58C16.35 13.35 17 11.75 17 10C17 6.13 13.87 3 10 3C6.13 3 3 6.13 3 10C3 13.87 6.13 17 10 17C11.75 17 13.35 16.35 14.58 15.29L20.17 20.88L20.87 20.17ZM10 16C6.69 16 4 13.31 4 10C4 6.69 6.69 4 10 4C13.31 4 16 6.69 16 10C16 13.31 13.31 16 10 16Z"
fill="white"
/>
</svg>
</button>
<div class="voice-icon">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 3C10.34 3 9 4.37 9 6.07V11.93C9 13.63 10.34 15 12 15C13.66 15 15 13.63 15 11.93V6.07C15 4.37 13.66 3 12 3ZM18.5 12H17.5C17.5 15.03 15.03 17.5 12 17.5C8.97 17.5 6.5 15.03 6.5 12H5.5C5.5 15.24 7.89 17.93 11 18.41V21H13V18.41C16.11 17.93 18.5 15.24 18.5 12Z"
fill="white"
/>
</svg>
</div>
</div>
</div>
<div class="right-side">
<ul>
<li>
<a href="#">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14 13H11V16H9V13H6V11H9V8H11V11H14V13ZM17 6H3V18H17V11.61L21 13.44V8.56L17 10.39V6ZM18 5V8.83L22 7V15L18 13.17V19H2V5H18Z"
fill="white"
/>
</svg>
</a>
</li>
<li>
<a href="#">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16 4V8H20V4H16ZM19 7H17V5H19V7ZM16 10V14H20V10H16ZM19 13H17V11H19V13ZM10 4V8H14V4H10ZM13 7H11V5H13V7ZM10 10V14H14V10H10ZM13 13H11V11H13V13ZM16 16V20H20V16H16ZM19 19H17V17H19V19ZM10 16V20H14V16H10ZM13 19H11V17H13V19ZM4 4V8H8V4H4ZM7 7H5V5H7V7ZM4 10V14H8V10H4ZM7 13H5V11H7V13ZM4 16V20H8V16H4ZM7 19H5V17H7V19Z"
fill="white"
/>
</svg>
</a>
</li>
<li>
<a href="#">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M10 20H14C14 21.1 13.1 22 12 22C10.9 22 10 21.1 10 20ZM20 17.35V19H4V17.35L6 15.47V10.32C6 7.39998 7.56 5.09998 10 4.33998V3.95998C10 2.53998 11.49 1.45998 12.99 2.19998C13.64 2.51998 14 3.22998 14 3.95998V4.34998C16.44 5.09998 18 7.40998 18 10.33V15.48L20 17.35ZM19 17.77L17 15.89V10.42C17 7.94998 15.81 6.05998 13.87 5.31998C12.61 4.78998 11.23 4.81998 10.03 5.34998C8.15 6.10998 7 7.98998 7 10.42V15.89L5 17.77V18H19V17.77Z"
fill="white"
/>
</svg>
</a>
</li>
<li>
<a href="#">
<img
src="https://yt3.ggpht.com/yti/APfAmoEztrfnXcI5B0glhI4MAMmkt2iBVxOYUjXsdkD57A=s88-c-k-c0x00ffffff-no-rj-mo"
alt=""
/>
</a>
</li>
</ul>
</div>
</header>
<div class="content">
<aside>
<ul>
<li>
<a class="active" href="#">
<div class="icon">
<svg
width="16"
height="18"
viewBox="0 0 16 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M0 7V18H6V12H10V18H16V7L8 0L0 7Z" fill="white" />
</svg>
</div>
<span>Home</span>
</a>
</li>
<li>
<a href="#">
<div class="icon">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.8 9.8L5.97 18.03L14.2 14.2L18.03 5.97L9.8 9.8ZM13.08 12.77C12.87 13.06 12.57 13.25 12.22 13.31C12.15 13.32 12.07 13.33 12 13.33C11.72 13.33 11.46 13.25 11.23 13.08C10.94 12.87 10.75 12.57 10.69 12.22C10.63 11.87 10.71 11.51 10.92 11.23C11.13 10.94 11.43 10.75 11.78 10.69C12.13 10.63 12.48 10.71 12.77 10.92C13.06 11.13 13.25 11.43 13.31 11.78C13.37 12.13 13.29 12.48 13.08 12.77ZM12 3C16.96 3 21 7.04 21 12C21 16.96 16.96 21 12 21C7.04 21 3 16.96 3 12C3 7.04 7.04 3 12 3ZM12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2Z"
fill="white"
/>
</svg>
</div>
<span>Explores</span>
</a>
</li>
<li>
<a href="#">
<div class="icon">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.99995 14.65V9.34999L15 12L9.99995 14.65ZM17.77 10.32C17 9.99999 16.57 9.81999 16.57 9.81999L18 9.05999C19.84 8.09999 20.53 5.82999 19.56 3.99999C18.59 2.16999 16.32 1.46999 14.49 2.43999L5.99995 6.93999C4.70995 7.61999 3.92995 8.97999 3.99995 10.43C4.06995 11.85 4.92995 13.1 6.21995 13.68C6.24995 13.69 7.41995 14.18 7.41995 14.18L5.99995 14.93C4.16995 15.9 3.46995 18.17 4.43995 20C5.40995 21.83 7.67995 22.53 9.50995 21.56L18.01 17.06C19.3 16.38 20.07 15.02 20 13.57C19.93 12.15 19.06 10.89 17.77 10.32ZM17.54 16.18L9.03995 20.68C7.69995 21.39 6.02995 20.88 5.31995 19.54C4.60995 18.2 5.11995 16.53 6.45995 15.82L8.49995 14.74V13.53L7.80995 13.25L6.69995 12.79C5.70995 12.38 5.04995 11.44 4.99995 10.38C4.94995 9.31999 5.51995 8.31999 6.45995 7.81999L14.96 3.31999C16.3 2.60999 17.97 3.11999 18.68 4.45999C19.39 5.79999 18.88 7.46999 17.54 8.17999L15.5 9.25999V10.47L17.3 11.21C18.29 11.62 18.95 12.56 19 13.62C19.05 14.68 18.48 15.68 17.54 16.18Z"
fill="white"
/>
</svg>
</div>
<span>Shorts</span>
</a>
</li>
<li>
<a href="#">
<div class="icon">
<svg
width="20"
height="18"
viewBox="0 0 20 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8 15V9L13 12L8 15ZM15 0H5V1H15V0ZM18 3H2V4H18V3ZM20 6H0V18H20V6ZM1 7H19V17H1V7Z"
fill="white"
/>
</svg>
</div>
<span>Subscriptions</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<div class="icon">
<svg
width="18"
height="18"
viewBox="0 0 18 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8 4L14 7.5L8 11V4ZM15 17H1V3H0V18H15V17ZM18 15H3V0H18V15ZM4 14H17V1H4V14Z"
fill="white"
/>
</svg>
</div>
<span>Library</span>
</a>
</li>
<li>
<a href="#">
<div class="icon">
<svg
width="21"
height="20"
viewBox="0 0 21 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M13.97 14.95L8.99996 11.87V5H11V10.76L15.03 13.25L13.97 14.95ZM21 10C21 15.51 16.51 20 11 20C5.48996 20 0.999961 15.51 0.999961 10H1.99996C1.99996 14.96 6.03996 19 11 19C15.96 19 20 14.96 20 10C20 5.04 15.96 1 11 1C7.80996 1 4.91996 2.64 3.27996 5.38C3.16996 5.56 3.05996 5.75 2.96996 5.94C2.95996 5.96 2.94996 5.98 2.93996 6H6.99996V7H0.959961V1H1.95996V5.74C1.99996 5.65 2.02996 5.57 2.06996 5.49C2.17996 5.27 2.29996 5.07 2.41996 4.86C4.21996 1.86 7.50996 0 11 0C16.51 0 21 4.49 21 10Z"
fill="white"
/>
</svg>
</div>
<span>History</span>
</a>
</li>
<li>
<a href="#">
<div class="icon">
<svg
width="18"
height="18"
viewBox="0 0 18 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7 5L13 9L7 13V5ZM18 0V18H0V0H18ZM17 1H1V17H17V1Z"
fill="white"
/>
</svg>
</div>
<span>Your Videos</span>
</a>
</li>
<li>
<a href="#">
<div class="icon">
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12.97 14.95L8 11.87V5H10V10.76L14.03 13.25L12.97 14.95ZM10 1C5.04 1 1 5.04 1 10C1 14.96 5.04 19 10 19C14.96 19 19 14.96 19 10C19 5.04 14.96 1 10 1ZM10 0C15.52 0 20 4.48 20 10C20 15.52 15.52 20 10 20C4.48 20 0 15.52 0 10C0 4.48 4.48 0 10 0Z"
fill="white"
/>
</svg>
</div>
<span>Watch Later</span>
</a>
</li>
<li>
<a href="#">
<div class="icon">
<svg
width="19"
height="17"
viewBox="0 0 19 17"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M15.77 7H11.54L13.06 2.06C13.38 1.03 12.54 0 11.38 0C10.8 0 10.24 0.24 9.86 0.65L4 7H0V17H4H5H14.43C15.49 17 16.41 16.33 16.62 15.39L17.96 9.39C18.23 8.15 17.18 7 15.77 7ZM4 16H1V8H4V16ZM16.98 9.17L15.64 15.17C15.54 15.65 15.03 16 14.43 16H5V7.39L10.6 1.33C10.79 1.12 11.08 1 11.38 1C11.64 1 11.88 1.11 12.01 1.3C12.08 1.4 12.16 1.56 12.1 1.77L10.58 6.71L10.18 8H11.53H15.76C16.17 8 16.56 8.17 16.79 8.46C16.92 8.61 17.05 8.86 16.98 9.17Z"
fill="white"
/>
</svg>
</div>
<span>Liked Videos</span>
</a>
</li>
<li>
<a href="#">
<div class="icon">
<svg
width="14"
height="8"
viewBox="0 0 14 8"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.99998 7.70001L0.599976 1.40001L1.29998 0.700012L6.89998 6.30001L12.5 0.700012L13.2 1.40001L6.99998 7.70001Z"
fill="white"
/>
</svg>
</div>
<span>Show More</span>
</a>
</li>
</ul>
<ul class="subs">
<h2>SUBSCRIPTIONS</h2>
<li>
<a href="#">
<img
src="https://cdn.zaferinci.com/ce5e0bb3-16b9-4d88-9bca-7d237fe725a8-cover.png"
/>
<span>Figma</span>
</a>
</li>
<li>
<a href="#">
<img src="https://cdn.zaferinci.com/channels4_profile.jpg" />
<span>World of Idiots</span>
</a>
</li>
<li>
<a class="ejx2" href="#">
<img src="https://cdn.zaferinci.com/MrBeastChannel.jpg" />
<span>MrBeast</span>
</a>
</li>
<li>
<a class="ejx2" href="#">
<img
src="https://cdn.zaferinci.com/AKedOLRuyzl5xTrxz6UvaNhrUPo8w5rkg0yb2XYTKQb64w.jpg"
/>
<span>Duman</span>
</a>
</li>
</ul>
</aside>
<div class="content-container">
<div class="tags">
<ul>
<li>
<a class="active" href="#">All</a>
</li>
<li>
<a href="#">Last Uploads</a>
</li>
<li>
<a href="#">UX</a>
</li>
<li>
<a href="#">Music</a>
</li>
<li>
<a href="#">Tour</a>
</li>
<li>
<a href="#">Iphone 13</a>
</li>
<li>
<a href="#">User Interface Design</a>
</li>
<li>
<a href="#">Mixs</a>
</li>
<li>
<a href="#">Figma</a>
</li>
</ul>
</div>
<ul class="videos">
<li>
<div class="video">
<div class="preview">
<img src="https://zaferinci.com.tr/img/yt1.png" />
<span>6:07</span>
</div>
<div class="bottom">
<div class="avatar">
<img src="https://zaferinci.com.tr/img/yt1-pp.png" />
</div>
<div class="details">
<h2>AKPnin Oskarlık Amigoları-1</h2>
<p>
Bold Medya
<svg
viewBox="0 0 24 24"
preserveAspectRatio="xMidYMid meet"
focusable="false"
class="style-scope yt-icon"
>
<g class="style-scope yt-icon">
<path
d="M12,2C6.5,2,2,6.5,2,12c0,5.5,4.5,10,10,10s10-4.5,10-10C22,6.5,17.5,2,12,2z M9.8,17.3l-4.2-4.1L7,11.8l2.8,2.7L17,7.4 l1.4,1.4L9.8,17.3z"
class="style-scope yt-icon"
></path>
</g>
</svg>
</p>
<span>130 B görüntüleme • 3 gün önce</span>
</div>
</div>
</div>
</li>
<li>
<div class="video">
<div class="preview">
<img src="https://zaferinci.com.tr/img/yt2.png" />
<span>2:31</span>
</div>
<div class="bottom">
<div class="avatar">
<img src="https://zaferinci.com.tr/img/yt2-pp.png" />
</div>
<div class="details">
<h2>Murda - 50Ms (prod. Rockywhereyoubeen & Vlado)</h2>
<p>
Murda
<svg
viewBox="0 0 24 24"
preserveAspectRatio="xMidYMid meet"
focusable="false"
class="style-scope yt-icon"
>
<g class="style-scope yt-icon">
<path
d="M12,2C6.5,2,2,6.5,2,12c0,5.5,4.5,10,10,10s10-4.5,10-10C22,6.5,17.5,2,12,2z M9.8,17.3l-4.2-4.1L7,11.8l2.8,2.7L17,7.4 l1.4,1.4L9.8,17.3z"
class="style-scope yt-icon"
></path>
</g>
</svg>
</p>
<span>2,8 Mn görüntüleme • 2 yıl önce</span>
</div>
</div>
</div>
</li>
<li>
<div class="video">
<div class="preview">
<img src="https://zaferinci.com.tr/img/yt3.png" />
<span>8:03</span>
</div>
<div class="bottom">
<div class="avatar">
<img src="https://zaferinci.com.tr/img/yt3-pp.png" />
</div>
<div class="details">
<h2>Idiots In Cars #09</h2>
<p>World of Idiots</p>
<span>3,3 Mn görüntüleme • 4 ay önce</span>
</div>
</div>
</div>
</li>
<li>
<div class="video">
<div class="preview">
<img src="https://zaferinci.com.tr/img/yt4.png" />
<span>8:15</span>
</div>
<div class="bottom">
<div class="avatar">
<img src="https://zaferinci.com.tr/img/yt4-pp.png" />
</div>
<div class="details">
<h2>Deep Humor Karma Röportaj Serisi (Vol16)</h2>
<p>
Deep Humor<svg
viewBox="0 0 24 24"
preserveAspectRatio="xMidYMid meet"
focusable="false"
class="style-scope yt-icon"
>
<g class="style-scope yt-icon">
<path
d="M12,2C6.5,2,2,6.5,2,12c0,5.5,4.5,10,10,10s10-4.5,10-10C22,6.5,17.5,2,12,2z M9.8,17.3l-4.2-4.1L7,11.8l2.8,2.7L17,7.4 l1.4,1.4L9.8,17.3z"
class="style-scope yt-icon"
></path>
</g>
</svg>
</p>
<span>1,7 Mn görüntüleme • 3 ay önce</span>
</div>
</div>
</div>
</li>
<li>
<div class="video">
<div class="preview">
<img src="https://zaferinci.com.tr/img/yt5.png" />
<span>13:18</span>
</div>
<div class="bottom">
<div class="avatar">
<img src="https://zaferinci.com.tr/img/yt5-pp.png" />
</div>
<div class="details">
<h2>
Türkiyede dilenci olmak | "Asgari ücreti 10 günde
kazanırım"
</h2>
<p>
+90
<svg
viewBox="0 0 24 24"
preserveAspectRatio="xMidYMid meet"
focusable="false"
class="style-scope yt-icon"
>
<g class="style-scope yt-icon">
<path
d="M12,2C6.5,2,2,6.5,2,12c0,5.5,4.5,10,10,10s10-4.5,10-10C22,6.5,17.5,2,12,2z M9.8,17.3l-4.2-4.1L7,11.8l2.8,2.7L17,7.4 l1.4,1.4L9.8,17.3z"
class="style-scope yt-icon"
></path>
</g>
</svg>
</p>
<span>543 B görüntüleme • 2 ay önce</span>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</body>
<script src="./js/index.js"></script>
</html>
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap");
* {
font-family: "Roboto", sans-serif;
}
@mixin flexcenter {
display: flex;
align-items: center;
justify-content: center;
}
html,
body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
color: #fff;
background: #181818;
}
header {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 56px;
padding: 0 32px;
background: #212121;
.sidebar {
display: flex;
align-items: center;
justify-content: center;
.logo {
@include flexcenter;
width: 97px;
height: 100%;
position: relative;
&::after {
content: "EN";
position: absolute;
top: -6px;
right: -15px;
font-size: 10px;
font-weight: 400;
color: #aaa;
}
}
.hamburger {
@include flexcenter;
margin-right: 24px;
margin-left: -8px;
cursor: pointer;
svg {
width: 24px;
height: 24px;
fill: #fff;
}
}
}
.search {
@include flexcenter;
height: 100%;
width: 478px;
padding: 8px 0;
position: relative;
.search-field {
@include flexcenter;
width: 478px;
height: calc(56px - 16px);
background: #121212;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
border: 1px solid #323232;
position: absolute;
left: 50%;
transform: translateX(-50%);
input {
padding: 10px 6px;
font-size: 16px;
font-weight: 400;
background: #121212;
color: #aaa;
width: 100%;
height: 70%;
}
.icon {
display: none;
position: absolute;
padding: 0 5px 0 10px;
background: #121212;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
border-left: 1px solid #1c62b9;
border-top: 1px solid #1c62b9;
border-bottom: 1px solid #1c62b9;
height: calc(100% + 2px);
left: -31px;
svg {
width: 18px;
height: 18px;
}
}
&:focus-within {
border: 1px solid #1c62b9;
}
&:focus-within .icon {
@include flexcenter;
}
}
.actions {
@include flexcenter();
position: absolute;
height: calc(56px - 16px);
right: -118px;
button {
border: 1px solid #323232;
background: #323232;
width: 65px;
height: 100%;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
cursor: pointer;
margin-right: 13px;
}
.voice-icon {
@include flexcenter;
border-radius: 50%;
height: 40px;
width: 40px;
background: #181818;
cursor: pointer;
}
}
}
.right-side {
ul {
display: flex;
align-items: center;
li {
margin-right: 10px;
a {
@include flexcenter;
width: 32px;
height: 32px;
border-radius: 50%;
img {
width: 100%;
height: 100%;
border-radius: 50%;
}
&:active {
background: #373737;
animation-name: outline;
animation-delay: 150ms;
animation-duration: 500ms;
transition: 50ms ease-out;
@keyframes outline {
from {
border: 1px solid #444444;
}
to {
border: 1px solid #444444;
}
}
}
}
&:nth-child(3) {
margin: 0;
}
&:last-child {
margin-left: 24px;
margin-right: 0;
a {
&:active {
animation: none;
outline: 1px solid #1c62b9;
}
}
}
}
}
}
}
.content {
flex: 1;
display: flex;
aside {
display: flex;
flex-direction: column;
background: #212121;
width: 220px;
height: 100%;
ul {
width: 100%;
margin-top: 15px;
li {
a {
display: flex;
align-items: center;
padding: 7px 20px;
&.active {
background: #383838;
}
&:hover {
background: rgba(#383838, 0.3);
}
&.active:hover {
background: #383838;
}
.icon {
@include flexcenter();
width: 24px;
height: 24px;
margin-right: 20px;
}
span {
color: #fff;
font-weight: 400;
font-size: 14px;
}
}
&:last-child {
a {
position: relative;
&::before {
content: "";
position: absolute;
width: 100%;
height: 1px;
top: 47px;
left: 0;
background: #383838;
}
}
}
}
}
.subs {
width: 100%;
h2 {
font-size: 14px;
font-weight: 600;
color: #aaa;
margin: 16px 0 8px 21px;
}
li {
a {
display: flex;
align-items: center;
padding: 7px 20px;
span {
color: #fff;
position: relative;
&::after {
content: "";
width: 4px;
height: 4px;
border-radius: 50%;
background: #3da6ff;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 120px;
}
}
img {
width: 26px;
height: 26px;
border-radius: 50%;
margin-right: 20px;
object-fit: cover;
}
&.ejx2 {
span {
&::after {
content: none;
}
}
}
}
}
}
}
.content-container {
flex: 1;
padding: 22px;
.tags {
padding: 22px 0;
width: 100%;
margin-top: -27px;
position: relative;
ul {
display: flex;
align-items: center;
justify-content: center;
overflow-x: auto;
&::-webkit-scrollbar {
display: none;
}
li {
margin: 0 6px;
flex-shrink: 0;
a {
@include flexcenter();
padding: 8px 12px;
border-radius: 25px;
font-size: 13px;
font-weight: 500;
border: 1px solid #474747;
color: #fff;
background: #383838;
&.active {
background: #fff;
color: #181818;
border: 0;
}
}
}
}
&::before,
&::after {
content: "";
position: absolute;
width: 100%;
height: 1px;
background: #383838;
}
&::before {
top: 15px;
left: 0;
}
&::after {
bottom: 15px;
left: 0;
}
}
.videos {
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
margin: -15px 0 -15px 75px;
li {
width: calc(100% / 4 - 50px);
margin: 15px 7px;
.video {
display: flex;
flex-direction: column;
cursor: pointer;
.preview {
width: 100%;
position: relative;
span {
position: absolute;
bottom: 10px;
right: 6px;
background: rgba(#000, 0.9);
font-size: 12px;
font-weight: 500;
border-radius: 4px;
padding: 2px 4px;
cursor: pointer;
}
img {
width: 100%;
object-fit: cover;
}
}
.bottom {
display: flex;
min-height: 100px;
margin-top: 10px;
.avatar {
@include flexcenter();
width: 36px;
height: 36px;
margin-right: 10px;
img {
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
}
}
.details {
h2 {
font-size: 16px;
font-weight: 500;
}
p {
margin-top: 5px;
display: flex;
align-items: center;
color: #aaa;
font-size: 13px;
svg {
margin-left: 2px;
width: 14px;
height: 14px;
fill: #aaa;
}
}
span {
display: block;
margin-top: 3px;
font-size: 13px;
color: #aaa;
}
}
}
}
}
}
@media (max-width: 1400px) {
.videos {
margin: -15px 0 -15px 0px;
li {
width: calc(100% / 3 - 15px);
}
}
}
}
}
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap");
* {
font-family: "Roboto", sans-serif;
}
html,
body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
color: #fff;
background: #181818;
}
header {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 56px;
padding: 0 32px;
background: #212121;
}
header .sidebar {
display: flex;
align-items: center;
justify-content: center;
}
header .sidebar .logo {
display: flex;
align-items: center;
justify-content: center;
width: 97px;
height: 100%;
position: relative;
}
header .sidebar .logo::after {
content: "EN";
position: absolute;
top: -6px;
right: -15px;
font-size: 10px;
font-weight: 400;
color: #aaa;
}
header .sidebar .hamburger {
display: flex;
align-items: center;
justify-content: center;
margin-right: 24px;
margin-left: -8px;
cursor: pointer;
}
header .sidebar .hamburger svg {
width: 24px;
height: 24px;
fill: #fff;
}
header .search {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 478px;
padding: 8px 0;
position: relative;
}
header .search .search-field {
display: flex;
align-items: center;
justify-content: center;
width: 478px;
height: calc(56px - 16px);
background: #121212;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
border: 1px solid #323232;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
header .search .search-field input {
padding: 10px 6px;
font-size: 16px;
font-weight: 400;
background: #121212;
color: #aaa;
width: 100%;
height: 70%;
}
header .search .search-field .icon {
display: none;
position: absolute;
padding: 0 5px 0 10px;
background: #121212;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
border-left: 1px solid #1c62b9;
border-top: 1px solid #1c62b9;
border-bottom: 1px solid #1c62b9;
height: calc(100% + 2px);
left: -31px;
}
header .search .search-field .icon svg {
width: 18px;
height: 18px;
}
header .search .search-field:focus-within {
border: 1px solid #1c62b9;
}
header .search .search-field:focus-within .icon {
display: flex;
align-items: center;
justify-content: center;
}
header .search .actions {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
height: calc(56px - 16px);
right: -118px;
}
header .search .actions button {
border: 1px solid #323232;
background: #323232;
width: 65px;
height: 100%;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
cursor: pointer;
margin-right: 13px;
}
header .search .actions .voice-icon {
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
height: 40px;
width: 40px;
background: #181818;
cursor: pointer;
}
header .right-side ul {
display: flex;
align-items: center;
}
header .right-side ul li {
margin-right: 10px;
}
header .right-side ul li a {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
}
header .right-side ul li a img {
width: 100%;
height: 100%;
border-radius: 50%;
}
header .right-side ul li a:active {
background: #373737;
animation-name: outline;
animation-delay: 150ms;
animation-duration: 500ms;
transition: 50ms ease-out;
}
@keyframes outline {
from {
border: 1px solid #444444;
}
to {
border: 1px solid #444444;
}
}
header .right-side ul li:nth-child(3) {
margin: 0;
}
header .right-side ul li:last-child {
margin-left: 24px;
margin-right: 0;
}
header .right-side ul li:last-child a:active {
animation: none;
outline: 1px solid #1c62b9;
}
.content {
flex: 1;
display: flex;
}
.content aside {
display: flex;
flex-direction: column;
background: #212121;
width: 220px;
height: 100%;
}
.content aside ul {
width: 100%;
margin-top: 15px;
}
.content aside ul li a {
display: flex;
align-items: center;
padding: 7px 20px;
}
.content aside ul li a.active {
background: #383838;
}
.content aside ul li a:hover {
background: rgba(56, 56, 56, 0.3);
}
.content aside ul li a.active:hover {
background: #383838;
}
.content aside ul li a .icon {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
margin-right: 20px;
}
.content aside ul li a span {
color: #fff;
font-weight: 400;
font-size: 14px;
}
.content aside ul li:last-child a {
position: relative;
}
.content aside ul li:last-child a::before {
content: "";
position: absolute;
width: 100%;
height: 1px;
top: 47px;
left: 0;
background: #383838;
}
.content aside .subs {
width: 100%;
}
.content aside .subs h2 {
font-size: 14px;
font-weight: 600;
color: #aaa;
margin: 16px 0 8px 21px;
}
.content aside .subs li a {
display: flex;
align-items: center;
padding: 7px 20px;
}
.content aside .subs li a span {
color: #fff;
position: relative;
}
.content aside .subs li a span::after {
content: "";
width: 4px;
height: 4px;
border-radius: 50%;
background: #3da6ff;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 120px;
}
.content aside .subs li a img {
width: 26px;
height: 26px;
border-radius: 50%;
margin-right: 20px;
object-fit: cover;
}
.content aside .subs li a.ejx2 span::after {
content: none;
}
.content .content-container {
flex: 1;
padding: 22px;
}
.content .content-container .tags {
padding: 22px 0;
width: 100%;
margin-top: -27px;
position: relative;
}
.content .content-container .tags ul {
display: flex;
align-items: center;
justify-content: center;
overflow-x: auto;
}
.content .content-container .tags ul::-webkit-scrollbar {
display: none;
}
.content .content-container .tags ul li {
margin: 0 6px;
flex-shrink: 0;
}
.content .content-container .tags ul li a {
display: flex;
align-items: center;
justify-content: center;
padding: 8px 12px;
border-radius: 25px;
font-size: 13px;
font-weight: 500;
border: 1px solid #474747;
color: #fff;
background: #383838;
}
.content .content-container .tags ul li a.active {
background: #fff;
color: #181818;
border: 0;
}
.content .content-container .tags::before,
.content .content-container .tags::after {
content: "";
position: absolute;
width: 100%;
height: 1px;
background: #383838;
}
.content .content-container .tags::before {
top: 15px;
left: 0;
}
.content .content-container .tags::after {
bottom: 15px;
left: 0;
}
.content .content-container .videos {
display: flex;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
margin: -15px 0 -15px 75px;
}
.content .content-container .videos li {
width: calc(100% / 4 - 50px);
margin: 15px 7px;
}
.content .content-container .videos li .video {
display: flex;
flex-direction: column;
cursor: pointer;
}
.content .content-container .videos li .video .preview {
width: 100%;
position: relative;
}
.content .content-container .videos li .video .preview span {
position: absolute;
bottom: 10px;
right: 6px;
background: rgba(0, 0, 0, 0.9);
font-size: 12px;
font-weight: 500;
border-radius: 4px;
padding: 2px 4px;
cursor: pointer;
}
.content .content-container .videos li .video .preview img {
width: 100%;
object-fit: cover;
}
.content .content-container .videos li .video .bottom {
display: flex;
min-height: 100px;
margin-top: 10px;
}
.content .content-container .videos li .video .bottom .avatar {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
margin-right: 10px;
}
.content .content-container .videos li .video .bottom .avatar img {
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
}
.content .content-container .videos li .video .bottom .details h2 {
font-size: 16px;
font-weight: 500;
}
.content .content-container .videos li .video .bottom .details p {
margin-top: 5px;
display: flex;
align-items: center;
color: #aaa;
font-size: 13px;
}
.content .content-container .videos li .video .bottom .details p svg {
margin-left: 2px;
width: 14px;
height: 14px;
fill: #aaa;
}
.content .content-container .videos li .video .bottom .details span {
display: block;
margin-top: 3px;
font-size: 13px;
color: #aaa;
}
@media (max-width: 1400px) {
.content .content-container .videos {
margin: -15px 0 -15px 0px;
}
.content .content-container .videos li {
width: calc(100% / 3 - 15px);
}
}