camelia-studio/Sites-Camelia
camelia-studio/Sites-Camelia
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
branches/alt+tab/index.html
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">

60
branches/alt+tab/style.css
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 {