Skip to content

Changes

Page history
Mise à jour de _test_home authored by COUILLARD Eric's avatar COUILLARD Eric
Show whitespace changes
Inline Side-by-side
test.md
View page @ c36acb72
--- ---
title: _test_home title: _test_home
--- ---
<main class="wiki-home">
<style> <style>
.tiles-section { /* Styles spécifiques à cette page */
display: flex; .wiki-home .grid-container {
flex-wrap: wrap; display: grid;
gap: 1.5rem; gap: 20px;
justify-content: center; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
margin: 2rem auto;
max-width: 1200px;
} }
.tile { .wiki-home .tile {
background-color: white; border: 1px solid #ddd;
border-radius: 8px; border-radius: 8px;
overflow: hidden; overflow: hidden;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); transition: all 0.3s ease;
text-decoration: none;
color: inherit;
flex: 1 1 calc(50% - 1.5rem);
max-width: calc(50% - 1.5rem);
transition: transform 0.2s, filter 0.2s;
} }
.tile:hover { .wiki-home .tile:hover {
transform: translateY(-5px); transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
filter: grayscale(50%);
} }
.tile:hover img { .wiki-home .tile img {
filter: grayscale(60%);
}
.tile img {
width: 100%; width: 100%;
height: auto; height: 150px;
object-fit: initial; object-fit: cover;
display: block;
} }
.tile-content { .wiki-home .tile-content {
padding: 1rem; padding: 15px;
text-align: center;
} }
.tile-title { .wiki-home .tile h2 {
font-weight: bold; margin-top: 0;
font-size: 1.1rem;
margin: 0.5rem 0;
} }
.tile-separator { /* Responsive design */
height: 1px; @media (min-width: 768px) {
background-color: #ddd; .wiki-home .grid-container {
width: 60%; grid-template-columns: repeat(2, 1fr);
margin: 0.5rem auto;
} }
.tile-text {
font-size: 0.95rem;
color: #444;
} }
@media (max-width: 768px) { @media (min-width: 1024px) {
.tile { .wiki-home .grid-container {
flex: 1 1 100%; grid-template-columns: repeat(3, 1fr);
max-width: 100%;
} }
} }
</style> </style>
<main> <div class="grid-container">
<h1>Bienvenue sur le portail des ressources numériques</h1> <!-- Tuile 1 -->
<p>Une plateforme pour découvrir de nouveaux usages numériques</p></br> <div class="tile">
<section class="tiles-section"> <img src="../uploads/89b50da136422046f40d9b6fdfde5f8b/grist.jpg" alt="Grist">
<div class="tile-content">
<h2>Grist</h2>
<p>Découvrez les fonctionnalités essentielles de GRIST et apprenez à le maîtriser.</p>
</div>
</div>
<a href="../Portail" class="tile"> <!-- Tuile 2 -->
<img src="../uploads/6933d6e1370d2ca95b3d362b4a7cced2/club.svg" alt="Grist" /> <div class="tile">
<img src="../uploads/89b50da136422046f40d9b6fdfde5f8b/grist.jpg" alt="Ressource 2">
<div class="tile-content"> <div class="tile-content">
<div class="tile-title">GRIST</div> <h2>Ressource 2</h2>
<div class="tile-separator"></div> <p>Description de la ressource 2.</p>
<div class="tile-text">
Découvrez les fonctionnalités essentielles de GRIST et apprenez à le maîtriser.
</div> </div>
</div> </div>
</a>
<a href="../parapheur" class="tile"> <!-- Tuile 3 -->
<img src="../uploads/268554f4e23fb4173ba1ae8de88b299f/collectif.svg" alt="Parapheur" /> <div class="tile">
<img src="../uploads/89b50da136422046f40d9b6fdfde5f8b/grist.jpg" alt="Ressource 3">
<div class="tile-content"> <div class="tile-content">
<div class="tile-title">Le Parapheur</div> <h2>Ressource 3</h2>
<div class="tile-separator"></div> <p>Description de la ressource 3.</p>
<div class="tile-text">
Dématérialisez vos circuits de validation et embarquez de la signature électronique certifiée.
</div> </div>
</div> </div>
</a>
<a href="#" class="tile"> <!-- Tuile 4 -->
<img src="../uploads/7e19b2d3c08627b2974fabae4d662d81/pc.svg" alt="PC" /> <div class="tile">
<img src="../uploads/89b50da136422046f40d9b6fdfde5f8b/grist.jpg" alt="Ressource 4">
<div class="tile-content"> <div class="tile-content">
<div class="tile-title">Votre PC</div> <h2>Ressource 4</h2>
<div class="tile-separator"></div> <p>Description de la ressource 4.</p>
<div class="tile-text">
Paramétrage, sécurité, gestion des fichiers et bonnes pratiques d’entretien de votre poste de travail.
</div> </div>
</div> </div>
</a>
<a href="#" class="tile"> <!-- Tuile 5 -->
<img src="../uploads/aeb48d794189cf0ffe36458683b8fed8/visio.svg" alt="visio" /> <div class="tile">
<img src="../uploads/89b50da136422046f40d9b6fdfde5f8b/grist.jpg" alt="Ressource 5">
<div class="tile-content"> <div class="tile-content">
<div class="tile-title">Visioconférence</div> <h2>Ressource 5</h2>
<div class="tile-separator"></div> <p>Description de la ressource 5.</p>
<div class="tile-text">
Applications recommandées, connexion sécurisée, et synchronisation avec vos outils professionnels.
</div> </div>
</div> </div>
</a>
</section> <!-- Tuile 6 -->
<div class="tile">
<img src="../uploads/89b50da136422046f40d9b6fdfde5f8b/grist.jpg" alt="Ressource 6">
<div class="tile-content">
<h2>Ressource 6</h2>
<p>Description de la ressource 6.</p>
</div>
</div>
</div>
</main> </main>
\ No newline at end of file