[alt+tab] ajout de la dernière section (contact)

This commit is contained in:
Esenjin 2024-09-06 03:00:29 +02:00
parent c20ab1c4b9
commit a6a8b251ec
2 changed files with 90 additions and 3 deletions

View File

@ -13,6 +13,7 @@
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
@ -96,7 +97,8 @@
<div class="community-right">
<h2>Qui sommes-nous ?</h2>
<p>Bienvenue dans l'atmosphère vibrante et décontractée de notre communauté <b>Alt Tab</b> (anciennement <i>Zaap Sufokien</i>). Nos guildes sont bien plus que de simples regroupements de joueurs ; ce sont des familles virtuelles où règnent la camaraderie, le fun et l'aventure. Que vous soyez un novice enthousiaste ou un vétéran aguerri, vous trouverez ici un refuge où vous pouvez être vous-même, explorer des mondes fantastiques et relever des défis épiques. Rejoignez-nous pour des soirées endiablées, des événements communautaires et des échanges enjoués où l'humour (douteux) et la bonne humeur sont toujours au rendez-vous. Dans nos guildes, chaque joueur est une pièce essentielle d'un puzzle plus grand, où l'amusement et la convivialité sont les maîtres mots !</p>
<p>Bienvenue dans l'atmosphère vibrante et décontractée de notre communauté <b>Alt Tab</b> (anciennement <i>Zaap Sufokien</i>). Nos guildes sont bien plus que de simples regroupements de joueurs ; ce sont des familles virtuelles où règnent la camaraderie, le fun et l'aventure. Que vous soyez un novice enthousiaste ou un vétéran aguerri, vous trouverez ici un refuge où vous pouvez être vous-même, explorer des mondes fantastiques et relever des défis épiques. Rejoignez-nous pour des soirées endiablées, des événements communautaires et des échanges enjoués où l'humour (douteux) et la bonne humeur sont toujours au rendez-vous. Dans nos guildes, chaque joueur est une pièce essentielle d'un puzzle plus grand, où l'amusement et la convivialité sont les maîtres mots.</p>
<p><b>Alt Tab</b> est une branche de l'association <b>Camélia Studio</b>, vous pouvez en savoir plus à son sujet en consultant sa page web <a href="https://camelia-studio.org/" target="_blank">juste ici</a>.</p>
<h2>Où nous trouver ?</h2>
<p>Nous avons actuellement des guildes sur :</p>
@ -149,8 +151,33 @@
</div>
</section>
<section class="third-section" id="section-3">
<!-- Contenu de la section 3 -->
<!-- Third Section (Nous Contacter) -->
<section id="section-3" class="contact-section">
<div class="contact-container">
<h2>À voir également</h2>
<ul class="contact-links">
<li>
<a href="https://tsubakimono.camelia-studio.org/category/zaap-sufokien/" target="_blank">
<i class="fa-brands fa-wordpress"></i> Nos articles sur Tsubakimono
</a>
</li>
<li>
<a href="https://ico.camelia-studio.org/gallery/jMr107O4hFJqcKwyqds2epX8" target="_blank">
<i class="fa-solid fa-image"></i> Nos galeries d'images sur ICO
</a>
</li>
<li>
<a href="https://discord.gg/nBuZ9vJ" target="_blank">
<i class="fa-brands fa-discord"></i> Le serveur Discord de Camélia Studio
</a>
</li>
<li>
<a href="https://shelter.moe/@Camelia" target="_blank">
<i class="fa-brands fa-mastodon"></i> La page Mastodon de Camélia Studio
</a>
</li>
</ul>
</div>
</section>
<div class="pagination-dots">

View File

@ -292,6 +292,66 @@ a {
border-radius: 2px;
}
/* Contact Section */
.contact-section {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #2682C4;
color: white;
}
.contact-container {
text-align: center;
}
.contact-section h2 {
font-size: 3rem;
margin-bottom: 40px;
position: relative;
}
/* Ligne bleue sous le titre */
.contact-section h2::after {
content: '';
display: block;
width: 80px;
height: 3px;
background-color: white;
margin: 20px auto;
}
/* Liste des liens */
.contact-links {
list-style: none;
padding: 0;
}
.contact-links li {
margin: 20px 0;
}
.contact-links a {
text-decoration: none;
font-size: 1.5rem;
color: white;
display: inline-flex;
align-items: center;
transition: color 0.3s ease;
}
.contact-links a:hover {
color: #ccc;
}
/* Icônes */
.contact-links i {
margin-right: 10px;
font-size: 2rem;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.community-section {