Untitled

<!DOCTYPE html>
<html>
<head>
	<title>YouTube Videos</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
	<style>
		/* Style for the video list */
		.video-list {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			padding: 20px;
			background-color: #f9f9f9;
		}
		.video {
			width: 100%;
			background-color: #fff;
			border-radius: 10px;
			overflow: hidden;
			box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
			margin: 10px;
		}
		.video img {
			height: 100%;
			width: 100%;
			object-fit: cover;
		}
		.video p {
			font-family: 'Montserrat', sans-serif;
			font-weight: 700;
			font-size: 1.5rem;
			margin: 10px;
			color: #333;
			line-height: 1.4;
			text-align: center;
			text-decoration: none;
			border-bottom: none;
		}
		.video p:hover {
			color: #e91e63;
		}
	</style>
</head>
<body>
	<h1 style="text-align: center; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 2rem; margin-top: 20px;">YouTube Videos</h1>
	<div class="video-list">
		<!-- Video 1 -->
		<div class="video">
			<a href="https://www.youtube.com/watch?v=vwDyreXZICI" target="_blank">
				<img src="https://i.ytimg.com/vi/vwDyreXZICI/maxresdefault.jpg" alt="Video thumbnail">
				<p>NASA's Perseverance Rover Successfully Lands on Mars | Full Event</p>
			</a>
		</div>
		<!-- Video 2 -->
		<div class="video">
			<a href="https://www.youtube.com/watch?v=AULO0mbvWcU" target="_blank">
				<img src="https://i.ytimg.com/vi/AULO0mbvWcU/maxresdefault.jpg" alt="Video thumbnail">
				<p>Why Your New Year's Resolutions Fail</p>
			</a>
		</div>
		<!-- Video 3 -->
		<div class="video">
			<a href="https://www.youtube.com/watch?v=-fopYsgFdzc" target="_blank">
				<img src="https://i.ytimg.com/vi/-fopYsgFdzc/maxresdefault.jpg" alt="Video thumbnail">
				<p>Learning from Loss: Lessons in Innovation from Pixar</p>
			</a>
		</div>
	</div>
</body>
</html>
Editor is loading...