Skip to content

Commit df6bcf4

Browse files
Sandro642Sandro642
authored
Create banner.html
1 parent e63104a commit df6bcf4

1 file changed

Lines changed: 332 additions & 0 deletions

File tree

‎banner.html‎

Lines changed: 332 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,332 @@
1+
# ConnectLib
2+
3+
<div align="center">
4+
5+
```html
6+
<!DOCTYPE html>
7+
<html lang="en">
8+
<head>
9+
<meta charset="UTF-8">
10+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
11+
<title>ConnectLib Banner</title>
12+
<style>
13+
body {
14+
margin: 0;
15+
padding: 20px;
16+
background: #0d1117;
17+
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
18+
display: flex;
19+
justify-content: center;
20+
align-items: center;
21+
min-height: 100vh;
22+
}
23+
24+
.banner {
25+
width: 100%;
26+
max-width: 1200px;
27+
height: 300px;
28+
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #667eea 100%);
29+
border-radius: 20px;
30+
position: relative;
31+
overflow: hidden;
32+
display: flex;
33+
align-items: center;
34+
justify-content: center;
35+
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
36+
}
37+
38+
.banner::before {
39+
content: '';
40+
position: absolute;
41+
top: 0;
42+
left: 0;
43+
right: 0;
44+
bottom: 0;
45+
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
46+
opacity: 0.3;
47+
}
48+
49+
.content {
50+
text-align: center;
51+
z-index: 2;
52+
position: relative;
53+
}
54+
55+
.title {
56+
font-size: 4rem;
57+
font-weight: 900;
58+
color: #ffffff;
59+
text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
60+
margin: 0;
61+
letter-spacing: -2px;
62+
animation: glow 2s ease-in-out infinite alternate;
63+
}
64+
65+
.subtitle {
66+
font-size: 1.3rem;
67+
color: #e1e8ff;
68+
margin: 10px 0 0 0;
69+
font-weight: 300;
70+
opacity: 0.9;
71+
}
72+
73+
.tagline {
74+
font-size: 1rem;
75+
color: #c9d1d9;
76+
margin: 15px 0 0 0;
77+
font-weight: 400;
78+
opacity: 0.8;
79+
}
80+
81+
.version-badge {
82+
position: absolute;
83+
top: 25px;
84+
right: 30px;
85+
background: rgba(255, 255, 255, 0.15);
86+
backdrop-filter: blur(10px);
87+
padding: 8px 16px;
88+
border-radius: 20px;
89+
font-size: 0.9rem;
90+
color: #ffffff;
91+
font-weight: 600;
92+
border: 1px solid rgba(255, 255, 255, 0.2);
93+
}
94+
95+
.tech-stack {
96+
position: absolute;
97+
bottom: 25px;
98+
left: 30px;
99+
display: flex;
100+
gap: 10px;
101+
}
102+
103+
.tech-badge {
104+
background: rgba(255, 255, 255, 0.1);
105+
backdrop-filter: blur(5px);
106+
padding: 6px 12px;
107+
border-radius: 15px;
108+
font-size: 0.8rem;
109+
color: #ffffff;
110+
font-weight: 500;
111+
border: 1px solid rgba(255, 255, 255, 0.15);
112+
}
113+
114+
.connection-dots {
115+
position: absolute;
116+
width: 100%;
117+
height: 100%;
118+
pointer-events: none;
119+
}
120+
121+
.dot {
122+
position: absolute;
123+
width: 8px;
124+
height: 8px;
125+
background: rgba(255, 255, 255, 0.4);
126+
border-radius: 50%;
127+
animation: pulse 3s ease-in-out infinite;
128+
}
129+
130+
.dot:nth-child(1) {
131+
top: 20%;
132+
left: 10%;
133+
animation-delay: 0s;
134+
}
135+
136+
.dot:nth-child(2) {
137+
top: 30%;
138+
right: 15%;
139+
animation-delay: 0.5s;
140+
}
141+
142+
.dot:nth-child(3) {
143+
bottom: 25%;
144+
left: 20%;
145+
animation-delay: 1s;
146+
}
147+
148+
.dot:nth-child(4) {
149+
bottom: 35%;
150+
right: 25%;
151+
animation-delay: 1.5s;
152+
}
153+
154+
.connection-line {
155+
position: absolute;
156+
height: 2px;
157+
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
158+
animation: flow 4s linear infinite;
159+
}
160+
161+
.line1 {
162+
top: 22%;
163+
left: 12%;
164+
width: 200px;
165+
transform: rotate(25deg);
166+
}
167+
168+
.line2 {
169+
bottom: 27%;
170+
right: 20%;
171+
width: 150px;
172+
transform: rotate(-30deg);
173+
animation-delay: 1s;
174+
}
175+
176+
.floating-elements {
177+
position: absolute;
178+
width: 100%;
179+
height: 100%;
180+
pointer-events: none;
181+
}
182+
183+
.floating-icon {
184+
position: absolute;
185+
font-size: 1.5rem;
186+
color: rgba(255, 255, 255, 0.2);
187+
animation: float 6s ease-in-out infinite;
188+
}
189+
190+
.floating-icon:nth-child(1) {
191+
top: 15%;
192+
left: 80%;
193+
animation-delay: 0s;
194+
}
195+
196+
.floating-icon:nth-child(2) {
197+
top: 60%;
198+
left: 5%;
199+
animation-delay: 2s;
200+
}
201+
202+
.floating-icon:nth-child(3) {
203+
bottom: 15%;
204+
right: 80%;
205+
animation-delay: 4s;
206+
}
207+
208+
@keyframes glow {
209+
from {
210+
text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
211+
}
212+
to {
213+
text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), 0 0 20px rgba(255, 255, 255, 0.3);
214+
}
215+
}
216+
217+
@keyframes pulse {
218+
0%, 100% {
219+
opacity: 0.4;
220+
transform: scale(1);
221+
}
222+
50% {
223+
opacity: 1;
224+
transform: scale(1.2);
225+
}
226+
}
227+
228+
@keyframes flow {
229+
0% {
230+
transform: translateX(-100%);
231+
}
232+
100% {
233+
transform: translateX(100%);
234+
}
235+
}
236+
237+
@keyframes float {
238+
0%, 100% {
239+
transform: translateY(0px);
240+
}
241+
50% {
242+
transform: translateY(-20px);
243+
}
244+
}
245+
246+
.download-info {
247+
position: absolute;
248+
bottom: 30px;
249+
left: 50%;
250+
transform: translateX(-50%);
251+
background: rgba(0, 0, 0, 0.3);
252+
padding: 10px 20px;
253+
border-radius: 10px;
254+
font-size: 0.9rem;
255+
color: #ffffff;
256+
font-weight: 500;
257+
text-align: center;
258+
max-width: 80%;
259+
}
260+
</style>
261+
</head>
262+
<body>
263+
<div class="banner">
264+
265+
<div class="content">
266+
<h1 class="title">ConnectLib</h1>
267+
<p class="subtitle">The Universal Gateway to Connect, Automate & Orchestrate</p>
268+
<p class="tagline">Your Data Flows, Simplified</p>
269+
</div>
270+
271+
<div class="tech-stack">
272+
<div class="tech-badge">Java 23</div>
273+
<div class="tech-badge">Project Reactor</div>
274+
<div class="tech-badge">API Gateway</div>
275+
</div>
276+
277+
<div class="connection-dots">
278+
<div class="dot"></div>
279+
<div class="dot"></div>
280+
<div class="dot"></div>
281+
<div class="dot"></div>
282+
<div class="connection-line line1"></div>
283+
<div class="connection-line line2"></div>
284+
</div>
285+
286+
<div class="floating-elements">
287+
<div class="floating-icon">🔗</div>
288+
<div class="floating-icon">⚡</div>
289+
<div class="floating-icon">🚀</div>
290+
</div>
291+
</div>
292+
</body>
293+
</html>
294+
```
295+
296+
</div>
297+
298+
---
299+
300+
## À propos de ConnectLib
301+
302+
**ConnectLib** est une passerelle universelle conçue pour connecter, automatiser et orchestrer vos flux de données de manière simplifiée.
303+
304+
### Technologies utilisées
305+
- **Java 23** - Version moderne de Java
306+
- **Project Reactor** - Programmation réactive
307+
- **API Gateway** - Gestion des APIs
308+
309+
### Fonctionnalités principales
310+
- 🔗 **Connexion** - Intégration facile avec divers systèmes
311+
- ⚡ **Automatisation** - Traitement automatisé des données
312+
- 🚀 **Orchestration** - Gestion fluide des workflows
313+
314+
### Installation
315+
316+
Pour utiliser cette bannière dans votre projet :
317+
318+
1. Copiez le code HTML ci-dessus
319+
2. Sauvegardez-le dans un fichier `banner.html`
320+
3. Intégrez-le dans votre README.md ou votre documentation
321+
322+
### Rendu
323+
324+
La bannière s'affiche avec :
325+
- Un design moderne avec dégradé bleu
326+
- Des animations fluides (pulsation, flottement)
327+
- Des éléments visuels représentant la connectivité
328+
- Un style glassmorphism pour les badges
329+
330+
---
331+
332+
*Votre passerelle vers l'automatisation des données*

0 commit comments

Comments
 (0)