Votez !
Aller en haut Aller en bas
Bienvenue sur LGDC RPG
-28%
Le deal à ne pas rater :
Précommande : Smartphone Google Pixel 8a 5G Double Sim 128Go ...
389 € 539 €
Voir le deal

Soucis de CSS !

La Guerre des Clans RPG :: Avant de Commencer :: En communauté :: Questions
Marchand de Sable
Jeune recrue
Puf/Surnom Puf/Surnom : Dove
Messages Messages : 22

Le personnage
Sexe du perso: Mâle
Âge du perso: 24 lunes
Mentor / apprenti : Nuage de Marron
 
Marchand de Sable
 Dim 15 Aoû 2021 - 17:17
Bonjour bonjour !
J'ai trouvé une template trop top en libre service d'une fiche de RP, jusque là, no soucis. Le résultat du code est supposé ressembler à ça : https://www.zupimages.net/up/21/32/qzpx.gif mais moi le résultat est plus .. décevant on va pas se mentir hein https://www.zupimages.net/up/21/32/k465.gif

J'ai hébergé toute la partie CSS sur notepadd+++ pour qu'il y ait moins de css quand je poste une réponse mais j'ai littéralement c/c son codage donc je pense pas que le soucis vienne d'une faute de c/c ?

Voici le code :

Code:
<div align="center">
 <div class="fg_box">
 <div class="fg_circ"></div>
 <div class="fg_lyrics">
 <h1>
 screaming
 </h1>
 <h2>
 the name
 </h2>
 <h3>
 of a
 </h3>
 <h4>
 foreigner's god
 </h4>
 </div>
 <div class="fg_post_toggle">
 <div class="fg_exit">
 <span class="th th-return"></span>
 </div>
 <div class="fg_post">
 <div class="fg_text">
post here. <br><br> between paragraphs.
 <tagged>@tag</tagged>
 </div>
 </div>
 </div>
 </div>
 <div class="fg_cred"><a href="http://pixel-perfect.boards.net/user/15">SELKIE</a></div>
</div>
<head>
 <link href="https://fonts.googleapis.com/css?family=Libre+Baskerville:400,700|Playfair+Display:400,700|Roboto:400,400i,700" rel="stylesheet">
<link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
</head>
<style>
 .fg_box {
 --fg_accent: #6e85ab;
 background: url(https://image.ibb.co/eyfFuU/image.png) !important;
}
.fg_box {
 display: flex;
 align-items: center;
 justify-content: center;
 flex-flow: column nowrap;
 z-index: 2;
 height: 600px;
}
.fg_post_toggle {
 width: 500px !important;
 height: 600px !important;
 position: relative;
 z-index: 2;
 top: 600px;
 transition: 0.33s ease;
}
.fg_box {
 width: 500px;
 height: 600px;
 display: flex;
 align-items: center;
 justify-content: center;
 background: url(https://image.ibb.co/eyfFuU/image.png);
 box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
 margin: 10px;
 position: relative;
 overflow: hidden;
 line-height: normal !important;
}
.fg_circ {
 width: 250px;
 height: 250px;
 position: absolute;
 background-color: rgba(255, 255, 255, 0.25);
 z-index: 0;
 transform: rotate(45deg) scale(0);
 transition: 0.5s ease;
}

.fg_box:hover .fg_circ {
 transform: rotate(45deg) scale(1);
 transition: 0.5s ease;
}

.fg_exit {
 background-color:var(--fg_accent);
 width:25px;
 height:25px;
 margin:25px 0px 0px 25px;
 display:flex;
 align-items:center;
 justify-content:center;
 cursor:pointer;
 transition: 0.33s ease;
 position:absolute;
 z-index:1;
}

.fg_exit span {
 font-size:10px;
 color:#000;
}
.fg_post {
 position: absolute;
 background-color: rgba(10, 10, 10, 0.825);
 width: 500px;
 height: 600px;
 padding: 0px;
 transition: 0.25s ease;
 text-align: justify;
 color: #999;
}
.fg_post b {
 font: 600 13px roboto;
 color: var(--fg_accent);
}
.fg_post i {
 border-bottom: 1px solid var(--fg_accent);
}
.fg_text {
 margin: 75px;
 font: 400 13px/16px roboto;
 text-align: justify;
 color: #bbb;
 transition: 0.25s ease;
 height: 450px;
 overflow: auto;
 padding-right: 10px;
}

.fg_post tagged {
 display: block;
 text-align: center;
 font: 600 13px roboto !important;
 margin-top: 25px;
}

.fg_post tagged a {
 color: var(--fg_accent)!important;
 font: 600 13px roboto !important;
}

.fg_text::-webkit-scrollbar {
 width: 10px;
 border: 0px !important;
 background-color: rgba(0, 0, 0, 0) !important;
}
.fg_text::-webkit-scrollbar-thumb {
 background-color: var(--fg_accent);
 border: 0px;
}
.fg_text::-webkit-scrollbar-track {
 background-color: rgba(0, 0, 0, 0) !important;
 border: 0px;
}


.fg_lyrics h1 {
 margin: 0px;
 font: 700 35px/35px Playfair Display;
 text-transform: uppercase;
 display: flex;
 align-items: center;
 justify-content: center;
 color: #fafafa;
 text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
.fg_lyrics h2 {
 margin: 0px;
 width: 220px;
 display: flex;
 align-items: center;
 justify-content: center;
 font: 700 25px/25px playfair display;
 text-transform: uppercase;
 color: #fafafa;
 text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}
.fg_lyrics h2:before {
 content: "";
 margin-right: 10px;
 height: 1px;
 background-color: #fafafa;
 flex-grow: 1;
 box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}
.fg_lyrics h2:after {
 content: "";
 margin-left: 10px;
 height: 1px;
 background-color: #fafafa;
 flex-grow: 1;
 box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}
.fg_lyrics h3 {
 margin: 0px;
 width: 220px;
 display: flex;
 align-items: center;
 text-transform: uppercase;
 font: 400 82px/82px Libre Baskerville;
 color: #fafafa;
 text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}
.fg_lyrics h4 {
 margin: 0px;
 font: 400 18px/18px Libre Baskerville;
 text-transform: uppercase;
 color: #fafafa;
 text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}
.fg_cred {
 margin-top: -10px;
 font: 700 7px roboto;
 margin-left: 425px;
}
.fg_cred a {
 font: 700 7px roboto;
}

.fg_lyrics {
 cursor: pointer;
 z-index:1;
 margin-top:0px;
 position:absolute;
}
.fg_open_post {
 position:relative;
 top:0px!important;
 transition: 0.33s ease;
}

.fg_close_post {
 position:relative;
 top:600px;
 transition: 0.33s ease;
}
</style>
<script>
$(".fg_lyrics").click(function(){
 $(this).next().removeClass('fg_close_post');
 $(this).next().addClass('fg_open_post');
});

$(".fg_exit").click(function(){
 $(this).parent().removeClass('fg_open_post');
 $(this).parent().addClass('fg_close_post');
});
</script>

( donc moi toute la partie CSS elle est hébergé sur archive host : https://i.gyazo.com/44df95eef02669e7f71b0438b2064b7d.png

à l'aide sauvez moi


La Guerre des Clans RPG :: Avant de Commencer :: En communauté :: Questions
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum