From 4b3fbc495777eeec5206fe09a88bcb84d7d9f045 Mon Sep 17 00:00:00 2001 From: Yoan Guerin Date: Fri, 5 Dec 2025 01:30:11 +0100 Subject: [PATCH] =?UTF-8?q?avanc=C3=A9=20front=20site=20inclusion=20du=20j?= =?UTF-8?q?son?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- html/index.html | 4 +- html/outils.html | 285 ++++++++++++++++++++++++++++++++++++++++++ html/partenaires.html | 2 + html/pokemon.html | 2 + html/qcm.html | 2 + pinguin.gif | Bin 0 -> 11370 bytes style.css | 171 +++++++++++++++++++++---- 7 files changed, 439 insertions(+), 27 deletions(-) create mode 100644 html/outils.html create mode 100644 pinguin.gif diff --git a/html/index.html b/html/index.html index d0e2613..89394da 100644 --- a/html/index.html +++ b/html/index.html @@ -10,13 +10,15 @@
-

Introduction aux Logiciels Libres

+ Mascotte animée +

Logiciels Libres

diff --git a/html/outils.html b/html/outils.html new file mode 100644 index 0000000..392137b --- /dev/null +++ b/html/outils.html @@ -0,0 +1,285 @@ + + + + + + + Outils Open Source vs Propriétaires + + +
+ Mascotte animée +

Outils et OS

+ +
+

Outils Open Source vs Propriétaires

+ +
+ + + + diff --git a/html/partenaires.html b/html/partenaires.html index 1309d01..824d3d4 100644 --- a/html/partenaires.html +++ b/html/partenaires.html @@ -9,6 +9,7 @@
+ Mascotte animée

Partenaires

diff --git a/html/pokemon.html b/html/pokemon.html index d9a2f14..f28e030 100644 --- a/html/pokemon.html +++ b/html/pokemon.html @@ -9,6 +9,7 @@
+ Mascotte animée

Jeu Pokémon

diff --git a/html/qcm.html b/html/qcm.html index a80a2f3..428db86 100644 --- a/html/qcm.html +++ b/html/qcm.html @@ -9,6 +9,7 @@
+ Mascotte animée

QCM

diff --git a/pinguin.gif b/pinguin.gif new file mode 100644 index 0000000000000000000000000000000000000000..095fe3158f11f7f39e36abf2c0379f3090e53e0e GIT binary patch literal 11370 zcmeI1X;72b9*46L0u8hZh^&&!j(`-yHY^1~A|`}Y6aiUA)?g73a0Hhqs~}r|ViZ{v z352qU2?ioGY)VuLD4~FYAd3oO@uCFky>Q<^r_=V%w9MRZm-l>m=lyt|Ip;V3=XVYq zB$!(SszKBsLI`Ai9Re)j`}dZ!4rcik?GMaE|KI`%Y!3pM^)H<9hdgk0u6ScZBRCY; zHD(ndfdanzA_Ago0zoZ7peSX>hO+h~l#Dc*XGHBt6H_84qug%dGb9b1yV8xQ5GdU0 zd~8o%U{?;zq0%bsX#nn$9vr<};X^PPW&kzP=jDg~m}-8IqG4MQ)OX7!4#~UhG2wm_ zUy8&h$m$#_cPihNMPyS2x25k8#uQ^2ef0tDdYUzC%%eQ?-4MAN6DG0X@ci0+ig3Y) zg+J-nI&T*IqTR5x#o&s3Rc}|Of|+!2UU|?D(Wl}y(DxRndW)qJwT@b_f_lryIa=o$ zLZ=_==KSM(ib4~FiL7oje8IMDuj5WGYYqF{`cT)Er}Q!%YZl2+ys%U}mapDH{cjFw zzlFtnA($7U(*dq+MF6$(_c=h#QMHRf@QiL!p$OPlUxhaWk&0kA$=tWO6NKwfNnTJ` zS!mx4bllLOS6LXj)bRrC2_G9Wz_80gI%cpYJ#ILk@)PJ5GNCoTD$*%T_6c0+&fAjR zik|a=)IC$)aXv$D4_6z{5XM?$^u{^V(5BkVrEkZ1m&PQ|t;*jSFO#w)#wv3baGU}t zu8y8te!Qr<2N!C`&mAcSmkyS zW`O1}dy{rak!*ZFPCnQ8BNd?6W+NG_YWWJ-AB7wOwicFq;&5;GXjtS&Zk% zRfgibjOUAkH^eU7jr5gzCQ=HkwW@T2F`^$-~SJ$l*%Y&NeXS_|R-X5Po58 z2*Ua28-mdLN_9gJ5Q%$DB4xtgPd+x=`Pzc3eIOYM1(VG&R^I-ngQHy2bah=$i-~nyX!|%9Cp5H;;yjpY&D8#; z?L%1PYa^4j<#YXSdXoNPA^>6lcw_)y7`EY6*ydYCEpNdMpl}!!&EEm(OjpNWiVa&7 zm4=?F2wmz-N9sNaUXa&jY1laESf)b)O2cdDGLO(FH(iqyrE+D%aaGP_)9#kSP(ck@ zMLO#dD*`AD8Io~&Z2h5B^&`kQpLqSBs*OE}GcEgp(lENcDeKK)od8|{V^;Q>Fv`1F z+(0$nSBQDRPp5ah8}>2`zFusZ_U^s~c9wrz-QT8Go@K{EA7waX^ixiZc=~G}vu>vJ zU1~cs|LGW2Ejp{`oYIl(v&Y@X`i@f&YoFB?Xh=8=l!I-4@WJi>nZTARLnzEj615ox zxXNFn0MA75V*)#i5CO)(J0in5)#9k=9WfYqM7`B;6+XU9+vq~+xpP(h5 z=~*eAVt?!rJJ98_dy;7uahcLtpkCXgxi`M%5Pk2hNP)yBLtl>n2;qd%$Dd!;yGJ9t zBX%!r3Ns{4)yhA0z-0011EuKms5E PkN`*kBmfflKO^uTqde=S literal 0 HcmV?d00001 diff --git a/style.css b/style.css index d6fa0f1..643e89d 100644 --- a/style.css +++ b/style.css @@ -1,56 +1,81 @@ /* Style simple et épuré pour le site d'introduction aux logiciels libres */ body { - margin: 0; - padding: 0; - font-family: system-ui, sans-serif; - line-height: 1.6; - background: #f5f5f5; - color: #222; + background: #000; + color: #00ff88; + font-family: "Courier New", monospace; + margin: 2rem; + line-height: 1.5; } - + header { - background: #2c7a7b; - color: white; - padding: 1.5rem; + display: grid; + grid-template-columns: auto 1fr auto; + align-items: center; + gap: 1rem; + background: #001a0f; + border-bottom: 2px solid #00ff88; + padding: 1rem; +} + +header h1 { + margin: 0; + line-height: 40px; + font-size: 1.8rem; + color: #00ffcc; text-align: center; } + +.header-gif { + width: 40px; + height: 40px; + image-rendering: pixelated; +} + +section { + border: 1px solid #00ff88; + box-shadow: 0 0 10px #00ff88; + background: rgba(0, 0, 0, 0.3); + padding : 2rem; +} + main { max-width: 800px; margin: 2rem auto; padding: 1rem; } -section { - background: white; - padding: 1.2rem 1.5rem; - margin-bottom: 1.5rem; - border-radius: 8px; - box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); -} - h1, h2 { margin-top: 0; + /* augmenter la taille et améliorer contraste */ + color: #00ffcc; /* couleur plus claire que #2c7a7b */ +} + +h1 { + text-align: center; + margin-top: 1rem; + margin-bottom: 2rem; + font-size: 2.2rem; } h2 { - color: #2c7a7b; + font-size: 1.6rem; } -/* Barre du menu séparée du titre */ nav { - background: #256f70; /* Une nuance légèrement plus sombre */ - padding: 0.6rem 0; /* Espacement vertical */ - margin-top: 1rem; /* Séparation avec le titre */ - border-radius: 6px; /* Légère forme arrondie */ + background: #256f70; + padding: 0.6rem 0; + margin-top: 1rem; + border-radius: 6px; } -/* Menu horizontal */ .menu { list-style: none; padding: 0; margin: 0; + margin-left: 1rem; + margin-right: 1rem; display: flex; gap: 1.5rem; justify-content: center; @@ -61,10 +86,104 @@ nav { text-decoration: none; font-weight: bold; transition: opacity 0.2s; + font-size: 1.1rem; + outline-offset: 2px; /* pour focus */ +} + +/* Focus visible pour clavier */ +.menu a:focus { + outline: 3px solid #00ff88; + outline-offset: 2px; } .menu a:hover { - opacity: 0.65; + opacity: 0.8; /* plus visible au hover */ } +.menu li { + border: 2px smooth #00ff88; /* bordure verte */ + padding: 0.5rem 1rem; /* espace intérieur */ + border-radius: 6px; /* coins arrondis */ + background-color: rgba(0, 255, 136, 0.1); /* fond semi-transparent */ +} +.menu li:hover { + background-color: #00ff88; /* fond vert clair au hover */ +} + +.menu li a { + color: #000; /* texte noir pour contraste sur fond clair */ + text-decoration: none; + font-weight: bold; + display: block; /* pour que le lien prenne toute la "case" */ +} + +/* Styles pour la page "Outils Open Source vs Propriétaires" */ + +.tool-container { + display: flex; + flex-wrap: wrap; + gap: 1.5rem; + justify-content: center; +} + +.tool-card { + background: rgba(0, 255, 136, 0.1); + border: 1px solid #00ff88; + border-radius: 8px; + width: 320px; + padding: 1rem; + display: flex; + flex-direction: column; + gap: 1rem; + box-shadow: 0 0 8px #00ff88; + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +/* Respecter la préférence "réduire le mouvement" */ +@media (prefers-reduced-motion: reduce) { + .tool-card { + transition: none; + } +} + +.tool-card:hover { + transform: scale(1.05); + box-shadow: 0 0 20px #00ff88; +} + +.tool-row { + display: flex; + align-items: center; + gap: 1rem; +} + +.tool-row img { + width: 48px; + height: 48px; + object-fit: contain; + border-radius: 8px; + background: #000; + box-shadow: 0 0 8px #00ff88; +} + +.tool-name { + font-weight: bold; + font-size: 1.3rem; /* un peu plus grand */ + color: #00ffcc; /* couleur plus claire */ +} + +.description { + font-size: 1rem; /* plus lisible */ + color: #00ff88; + min-height: 60px; + line-height: 1.4; /* interligne */ +} + +.vs { + text-align: center; + font-weight: bold; + color: #00ff88; + margin: 0.5rem 0; + user-select: none; +}