Spaces:

abeea
/

collabs

Running

App Files Files Community

collabs / index.html

abeea

Update index.html

e0c66ae verified 5 months ago

raw

history blame contribute delete

3.75 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Collaborators Marquee</title>
	<style>
	/* General Page Styling */
	body {
	font-family: 'Helvetica', 'Arial', sans-serif;
	margin: 0;
	padding: 50px;
	background-color: #fff;
	}

	.collaborators-section {
	max-width: 1200px;
	margin: 0 auto;
	overflow: hidden; /* Hides the scrollbar if text goes off screen */
	}

	/* 1. The Label Styling */
	.section-label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 2px;
	color: #e0e0e0;
	text-transform: uppercase;
	margin-bottom: 30px;
	}

	/* 2. The Marquee Container */
	.marquee-window {
	width: 100%;
	overflow: hidden; /* Creates the "mask" for the slider */
	margin-bottom: 30px;
	white-space: nowrap; /* Forces text to stay on one line */
	position: relative;
	}

	/* The moving track */
	.marquee-track {
	display: inline-block;
	animation: scroll 20s linear infinite; /* Adjust '20s' to make it faster/slower */
	}

	/* Pause animation when user hovers over names */
	.marquee-track:hover {
	animation-play-state: paused;
	}

	/* The Individual Items */
	.collab-item {
	font-size: 24px;
	font-weight: 800;
	color: #bfbfbf;
	text-decoration: none;
	margin-right: 80px; /* Space between names */
	display: inline-block;
	transition: color 0.3s ease;
	}

	.collab-item:hover {
	color: #555;
	}

	/* 3. The Animation Keyframes */
	@keyframes scroll {
	0% {
	transform: translateX(0);
	}
	100% {
	transform: translateX(-50%); /* Moves exactly half way, creating the loop illusion */
	}
	}

	/* 4. Bottom Right Button */
	.button-container {
	display: flex;
	justify-content: flex-end; /* Aligns button to the right */
	width: 100%;
	padding-right: 10px;
	}

	.view-all-btn {
	padding: 10px 20px;
	background-color: transparent;
	border: 2px solid #e0e0e0;
	color: #888;
	font-weight: 600;
	text-decoration: none;
	border-radius: 4px;
	font-size: 13px;
	transition: all 0.3s ease;
	}

	.view-all-btn:hover {
	border-color: #333;
	color: #333;
	}
	</style>
	</head>
	<body>

	<section class="collaborators-section">
	<!-- Top Label -->
	<div class="section-label">Trusted by Collaborators</div>

	<!-- Marquee Window -->
	<div class="marquee-window">
	<!-- The Track moves inside the window -->
	<div class="marquee-track">
	<!-- SET 1: Original Content -->
	<a href="#" class="collab-item">English with Komal</a>
	<a href="#" class="collab-item">Date Tech Pakistan</a>
	<a href="#" class="collab-item">She's Beyond</a>
	<a href="#" class="collab-item">DevQuest PK</a>

	<!-- SET 2: DUPLICATE Content (Required for seamless loop) -->
	<a href="#" class="collab-item">English with Komal</a>
	<a href="#" class="collab-item">Date Tech Pakistan</a>
	<a href="#" class="collab-item">She's Beyond</a>
	<a href="#" class="collab-item">DevQuest PK</a>
	</div>
	</div>

	<!-- Bottom Right Button -->
	<div class="button-container">
	<a href="#" class="view-all-btn">View all Collaborators →</a>
	</div>
	</section>

	</body>
	</html>