diff --git a/branches/alt+tab/la-compagnie-de-sufokia/images/Efo2FK8XoAMYU3Y.jpg b/branches/alt+tab/la-compagnie-de-sufokia/images/Efo2FK8XoAMYU3Y.jpg new file mode 100644 index 0000000..e05a8bb Binary files /dev/null and b/branches/alt+tab/la-compagnie-de-sufokia/images/Efo2FK8XoAMYU3Y.jpg differ diff --git a/branches/alt+tab/la-compagnie-de-sufokia/images/c7b93f49527705.jpg b/branches/alt+tab/la-compagnie-de-sufokia/images/c7b93f49527705.jpg new file mode 100644 index 0000000..cf9dfdd Binary files /dev/null and b/branches/alt+tab/la-compagnie-de-sufokia/images/c7b93f49527705.jpg differ diff --git a/branches/alt+tab/la-compagnie-de-sufokia/index.html b/branches/alt+tab/la-compagnie-de-sufokia/index.html new file mode 100644 index 0000000..4ded2b8 --- /dev/null +++ b/branches/alt+tab/la-compagnie-de-sufokia/index.html @@ -0,0 +1,37 @@ + + + + + + La Compagnie de Sufokia + + + + + + + + +
+ +
+
+ +
+

La Compagnie de Sufokia

+

Nous sommes une guilde existante depuis 2007, actuellement sur le serveur classique Orukam.
+ Vous pouvez contacter en jeu le meneur : Miel-Cerise ou les bras droit : Arctyk et Rage-Skit.
+ Pour nous rejoindre ou discuter avec nous, ça se passe sur notre serveur Discord.

+
+
+ + \ No newline at end of file diff --git a/branches/alt+tab/la-compagnie-de-sufokia/style.css b/branches/alt+tab/la-compagnie-de-sufokia/style.css new file mode 100644 index 0000000..c83c066 --- /dev/null +++ b/branches/alt+tab/la-compagnie-de-sufokia/style.css @@ -0,0 +1,258 @@ +/* style.css */ + +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); + +/* Global Styles */ +body { + margin: 0; + font-family: 'Inter', Arial, sans-serif; + background-color: #d5d0aa; + color: #312d21; + overflow: auto; + font-size: 16px; +} + +body a { + color: #ff6600; + text-decoration: none; +} + +body a:hover { + text-decoration: underline; +} + +header { + background-color: #524a3d; + padding: 10px; + position: fixed; + top: 0; + width: 100%; + display: flex; + justify-content: center; + z-index: 1000; +} + +nav { + display: flex; + flex-wrap: wrap; + justify-content: center; +} + +nav a { + margin: 5px 10px; + color: #fefeff; + text-decoration: none; + font-weight: bold; + font-size: 0.9em; +} + +nav a:hover { + color: #ff6600; + text-decoration: none; +} + +.container { + max-width: 800px; + padding-top: 70px; + margin: 0 auto; + padding-left: 15px; + padding-right: 15px; +} + +/* Carousel Styles */ +.carousel { + position: relative; + width: 100%; + height: 100vh; + overflow: hidden; +} + +#carousel-container { + position: relative; + width: 100%; + height: 100%; +} + +#carousel-image { + width: 100%; + height: 100%; + object-fit: cover; + transition: opacity 1s ease; +} + +#overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: black; + opacity: 0; + transition: opacity 1s ease; + z-index: 1; +} + +.carousel-text { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: #fdfdfd; + text-align: center; + background-color: rgba(72, 74, 61, 0.9); + padding: 15px; + border-radius: 10px; + z-index: 2; + width: 80%; + max-width: 600px; +} + +.carousel-text h1 { + font-size: 2em; + margin: 0 0 10px; +} + +.carousel-text p { + font-size: 1em; +} + +/* Page-specific Styles */ +.home-background { + height: 100vh; + width: 100%; + position: relative; + background-size: cover; + background-position: center; + transition: background-image 1.5s ease-in-out; +} + +.home-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + color: #312d21; + background: rgba(0, 0, 0, 0.5); + padding: 15px; + border-radius: 10px; + width: 80%; + max-width: 400px; +} + +.home-content h1 { + font-size: 2em; + margin: 0; +} + +.home-content p { + font-size: 1em; +} + +/* Description Page */ +ol { + background: #524a3d; + padding: 15px; + padding-left: 30px; + border-radius: 10px; + color: #ffffff; +} + +ol li { + margin-bottom: 10px; +} + +/* List Page */ +ul { + list-style: none; + padding: 0; +} + +ul li { + margin-bottom: 10px; +} + +ul li a { + color: #ff6600; + text-decoration: none; +} + +ul li a:hover { + text-decoration: underline; +} + +/* Footer */ +footer { + padding: 10px; + text-align: center; + margin-top: 20px; + color: #99aab5; + font-size: 0.9em; +} + +/* Media Queries for Responsive Design */ +@media screen and (max-width: 768px) { + body { + font-size: 14px; + } + + nav a { + margin: 5px; + font-size: 0.8em; + } + + .carousel-text h1 { + font-size: 1.8em; + } + + .carousel-text p { + font-size: 0.9em; + } + + .home-content h1 { + font-size: 1.8em; + } + + .home-content p { + font-size: 0.9em; + } + + .container { + padding-top: 60px; + } +} + +@media screen and (max-width: 480px) { + body { + font-size: 12px; + } + + nav { + flex-direction: column; + align-items: center; + } + + nav a { + margin: 3px 0; + } + + .carousel-text h1 { + font-size: 1.5em; + } + + .carousel-text p { + font-size: 0.8em; + } + + .home-content h1 { + font-size: 1.5em; + } + + .home-content p { + font-size: 0.8em; + } + + .container { + padding-top: 120px; + } +}