collabs / index.html
abeea's picture
Update index.html
e0c66ae verified
<!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 &rarr;</a>
</div>
</section>
</body>
</html>