devsource-for-humanity/run.html at main · MaximeGuinard/devsource-for-humanity · GitHub

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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>RUN - Nos initiatives solidaires - Devsource for Humanity</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <nav class="navbar" style="position: relative; background: var(--primary-dark); border-bottom: 2px solid var(--cta-yellow);">
    <div class="container">
      <a href="index.html" class="logo-link">
        <img src="https://devsource.fr/wp-content/uploads/2025/07/DS_logo_petit_cercle_noeffect.png" alt="Devsource Logo" class="nav-logo" />
        <span class="nav-brand">Devsource</span>
      </a>
      <button class="nav-toggle" aria-label="Toggle navigation" onclick="document.querySelector('.nav-menu').classList.toggle('active')">
        <span></span>
        <span></span>
        <span></span>
      </button>
      <ul class="nav-menu">
        <li><a href="index.html#accueil">Accueil</a></li>
        <li><a href="index.html#engagements">Nos engagements</a></li>
        <li><a href="run.html" class="active">RUN</a></li>
        <li><a href="index.html#blog">Blog</a></li>
        <li><a href="index.html#contribuer" class="nav-cta">Contribuer</a></li>
      </ul>
    </div>
  </nav>

  <section class="run-hero" style="padding-top: 80px;">
    <div class="container">
      <h1 class="run-hero-title">RUN</h1>
      <p class="run-hero-subtitle">Nos initiatives solidaires concrètes</p>
      <p class="run-hero-desc" style="margin-bottom: 60px;">Chaque RUN est une initiative solidaire majeure où nous mobilisons nos compétences tech pour créer un impact réel et mesurable.</p>
    </div>
  </section>

  <section class="run-grid-section" style="padding-top: 40px;">
    <div class="container">
      <div class="run-grid">

        <a href="run/run-1.html" class="run-card run-card-active">
          <div class="run-card-header">
            <span class="run-number">RUN 1</span>
            <span class="run-status run-status-live">LIVE</span>
          </div>
          <div class="run-card-image">
            <img src="https://media.devsource.fr/wp-content/uploads/2025/10/845d6fd1435a9cd94db5b8efae3a6839.png" alt="RUN 1 - Gaza Initiative">
          </div>
          <div class="run-card-content">
            <h3>DevSource × Gaza</h3>
            <p>Mobilisation des compétences numériques pour soutenir les associations engagées dans la cause palestinienne.</p>
            <div class="run-card-stats">
              <div class="run-stat">
                <span class="run-stat-number">6</span>
                <span class="run-stat-label">Actions</span>
              </div>
              <div class="run-stat">
                <span class="run-stat-number">20+</span>
                <span class="run-stat-label">Partenaires</span>
              </div>
            </div>
          </div>
          <div class="run-card-footer">
            <span class="run-card-link">Découvrir le RUN 1 →</span>
          </div>
        </a>

        <div class="run-card run-card-soon">
          <div class="run-card-header">
            <span class="run-number">RUN 2</span>
            <span class="run-status run-status-soon">SOON</span>
          </div>
          <div class="run-card-overlay">
            <div class="run-soon-badge">
              <svg width="80" height="80" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="12" cy="12" r="10" stroke="#f1fd0d" stroke-width="2"/>
                <path d="M12 6v6l4 2" stroke="#f1fd0d" stroke-width="2" stroke-linecap="round"/>
              </svg>
              <span>BIENTÔT</span>
            </div>
          </div>
          <div class="run-card-content">
            <h3>Initiative à venir</h3>
            <p>Une nouvelle initiative solidaire est en préparation. Restez connectés pour la découvrir prochainement.</p>
          </div>
        </div>

      </div>
    </div>
  </section>

  <div style="background: #12272B; padding: 60px 0;"></div>

  <section class="run-cta-section" style="padding-top: 80px;">
    <div class="container">
      <div class="run-cta-box">
        <h2>Vous avez une idée de RUN ?</h2>
        <p>Proposez-nous une initiative solidaire qui pourrait devenir le prochain RUN</p>
        <a href="mailto:hello@devsource.fr" class="btn-primary">Proposer une initiative</a>
      </div>
    </div>
  </section>

  <div style="padding: 60px 0; background: #1A3638;"></div>

  <footer class="footer">
    <div class="container">
      <div class="footer-grid">
        <div class="footer-col">
          <img src="https://devsource.fr/wp-content/uploads/2025/07/DS_logo_petit_cercle_noeffect.png" alt="Devsource Logo" class="footer-logo" />
          <p class="footer-tagline">La technologie au service de l'humain</p>
        </div>

        <div class="footer-col">
          <h4>Contact</h4>
          <ul>
            <li><a href="mailto:hello@devsource.fr">hello@devsource.fr</a></li>
            <li><a href="mailto:maxime.guinard.pro@gmail.com">maxime.guinard.pro@gmail.com</a></li>
          </ul>
        </div>

        <div class="footer-col">
          <h4>Navigation</h4>
          <ul>
            <li><a href="index.html#accueil">Accueil</a></li>
            <li><a href="index.html#engagements">Nos engagements</a></li>
            <li><a href="run.html">RUN</a></li>
            <li><a href="index.html#contribuer">Contribuer</a></li>
            <li><a href="https://devsource.fr/for-humanity/plan-de-site.html" target="_blank" rel="noopener">Plan de site</a></li>
          </ul>
        </div>

        <div class="footer-col">
          <h4>Suivez-nous</h4>
          <div class="social-links">
            <a href="https://www.facebook.com/people/Devsource/61578670987754/" target="_blank" rel="noopener">Facebook</a>
            <a href="https://x.com/MaximeGUIN9744" target="_blank" rel="noopener">X/Twitter</a>
            <a href="https://www.linkedin.com/company/developmentsource/" target="_blank" rel="noopener">LinkedIn</a>
          </div>
        </div>
      </div>

      <div class="footer-bottom">
        <p>&copy; 2025 Devsource For Humanity. Tous droits réservés.</p>
        <p style="margin-top: 10px;">
          <a href="https://devsource.fr/politique-de-confidentialite/" target="_blank" rel="noopener" style="color: var(--text-gray); text-decoration: none; margin: 0 10px;">Politique de confidentialité</a>
          <span style="color: var(--text-gray);">|</span>
          <a href="https://devsource.fr/mentions-legales/" target="_blank" rel="noopener" style="color: var(--text-gray); text-decoration: none; margin: 0 10px;">Mentions légales</a>
        </p>
      </div>
    </div>
  </footer>
</body>
</html>