YouTube Homepage Clone

YouTube

Video Title 1

Channel Name - 1M views

Video Title 2

Channel Name - 500K views

Video Title 3

Channel Name - 1.5M views

Video Title 4

Channel Name - 300K views

YouTube

Video Title 1

Channel Name • 1M views • 3 days ago

10:30

Video Title 2

Channel Name • 500K views • 1 week ago

5:45

Video Title 3

Channel Name • 1.5M views • 2 days ago

12:00

Video Title 4

Channel Name • 300K views • 1 day ago

8:15

* { margin: 0; padding: 0; box-sizing: border-box; font-family: Arial, sans-serif; } body { background-color: #f9f9f9; } header { display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; background-color: #202020; color: white; } header .logo { display: flex; align-items: center; font-size: 1.5em; font-weight: bold; } header .logo img { width: 30px; margin-right: 10px; } header .search-bar { display: flex; align-items: center; width: 50%; } header .search-bar input { padding: 10px; width: 90%; border-radius: 20px; border: none; } header .search-bar button { padding: 10px; background-color: #ff0000; color: white; border: none; border-radius: 20px; cursor: pointer; } header .header-icons { display: flex; align-items: center; } header .header-icons .icon { width: 30px; height: 30px; margin-left: 20px; cursor: pointer; } header .profile-icon { border-radius: 50%; } .main-content { display: flex; padding: 20px; } .sidebar { width: 250px; background-color: #f1f1f1; padding: 20px; } .sidebar ul { list-style-type: none; } .sidebar ul li { margin: 15px 0; cursor: pointer; font-size: 1.1em; } .sidebar ul li:hover, .sidebar ul li.active { font-weight: bold; color: #ff0000; } .video-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; width: 100%; } .video-card { background-color: white; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .video-card img { width: 100%; height: auto; } .video-info { padding: 10px; } .video-info h4 { font-size: 1.1em; margin-bottom: 5px; } .video-info p { color: #555; font-size: 0.9em; } .video-info .duration { font-size: 0.8em; color: #888; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: Arial, sans-serif; } body { background-image: url('https://static.wikia.nocookie.net/smlwikiarg/images/7/74/Little_Sweaty_Meats.jpeg/revision/latest?cb=20240518200344'); background-size: cover; /* Ensure the image covers the whole screen */ background-position: center; /* Center the image */ background-attachment: fixed; /* Keep the background fixed when scrolling */ color: white; /* Ensure text color contrasts well with the background */ min-height: 100vh; /* Ensure the body takes up at least the full viewport height */ } header { display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; background-color: rgba(32, 32, 32, 0.8); /* Add transparency to header */ color: white; } header .logo { display: flex; align-items: center; font-size: 1.5em; font-weight: bold; } header .logo img { width: 30px; margin-right: 10px; } header .search-bar { display: flex; align-items: center; width: 50%; } header .search-bar input { padding: 10px; width: 90%; border-radius: 20px; border: none; } header .search-bar button { padding: 10px; background-color: #ff0000; color: white; border: none; border-radius: 20px; cursor: pointer; } header .header-icons { display: flex; align-items: center; } header .header-icons .icon { width: 30px; height: 30px; margin-left: 20px; cursor: pointer; } header .profile-icon { border-radius: 50%; } .main-content { display: flex; padding: 20px; } .sidebar { width: 250px; background-color: rgba(241, 241, 241, 0.9); /* Slight transparency to match the theme */ padding: 20px; } .sidebar ul { list-style-type: none; } .sidebar ul li { margin: 15px 0; cursor: pointer; font-size: 1.1em; } .sidebar ul li:hover, .sidebar ul li.active { font-weight: bold; color: #ff0000; } .video-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; width: 100%; } .video-card { background-color: white; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .video-card img { width: 100%; height: auto; } .video-info { padding: 10px; } .video-info h4 { font-size: 1.1em; margin-bottom: 5px; } .video-info p { color: #555; font-size: 0.9em; } .video-info .duration { font-size: 0.8em; color: #888; }