Hugging Face's logo

Spaces:
abeea
/
collabs
Running

App Files Community
collabs
File size: 3,746 Bytes
e0c66ae
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!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>