KoalaVolant
Mar 7 Avr 2020 - 22:42
Il existe deux versions de cette fiche, vous trouverez les deux dans ce sujet. L'une est avec un trait, l'autre sans.
Le code CSS est le même.
HTML
CSS
Ajouter une coupure entre chaque
Pour ajouter un bloc il suffit d'ajouter un :
Après le "DEBUT DE LA FICHE GEN" et avant "FIN DE LA FICHE"
Et une fois un bloc ajouté, il faut ajouter :
C'est ce qui permet de faire la séparation entre les deux.
Le code CSS est le même.
HTML
- Code:
<link href="https://fonts.googleapis.com/css?family=Frank+Ruhl+Libre|Oswald&display=swap" rel="stylesheet">
<div class="dawn-gen"><span class="titre titre-1"><h1>Et voici un titre tu peux le faire aussi complexe que tu veux</h1><h2>Et un sous titre pacque c'est sexy</h2></span><!-- DEBUT CONTENT GENERAL -->
<!-- Exemple de bloc --><div><img class="img-2" src="https://i.pinimg.com/564x/0e/59/76/0e59764dac0273dbea976db940e24093.jpg">Exorcizamus te, omnis immundus spiritus, omnis satanica potestas omnis incursio infernalis adversarii. Omnis legio! Omnis con...potestas, omnis incursio infernalis adversarii. Omnis legio! Omnis congregatio et secta diabolica! Ergo, Draco maledicte et omnis......legio diabolica, adiuramus te! Exorcizamus te, omnis immundus spiritus, omnis satanica potestas, omnis incursio infernalis adversarii. Omnis legio! Omnis congregatio et secta diabolica! Ergo, Draco maledicte et omnis legio diabolica, adiuramus te!
<h3>Test parce que voilà</h3>
Exorcizamus te, omnis immundus spiritus, omnis satanica potestas omnis incursio infernalis adversarii. Omnis legio! Omnis con...potestas, omnis incursio infernalis adversarii. Omnis legio! Omnis congregatio et secta diabolica! Ergo, Draco maledicte et omnis......legio diabolica, adiuramus te! Exorcizamus te, omnis immundus spiritus, omnis satanica potestas, omnis incursio infernalis adversarii. Omnis legio! Omnis congregatio et secta diabolica! Ergo, Draco maledicte et omnis legio diabolica, adiuramus te!</div><!-- Fin de l'exemple de bloc -->
<!-- Coupure des deux --> <span class="entredeux"></span>
<!-- Nouveau bloc --><div>Exorcizamus te, omnis immundus spiritus, omnis satanica potestas omnis incursio infernalis adversarii. Omnis legio! Omnis con...potestas, omnis incursio infernalis adversarii. Omnis legio! Omnis congregatio et secta diabolica! Ergo, Draco maledicte et omnis......legio diabolica, adiuramus te! Exorcizamus te, omnis immundus spiritus, omnis satanica potestas, omnis incursio infernalis adversarii. Omnis legio! Omnis congregatio et secta diabolica! Ergo, Draco maledicte et omnis legio diabolica, adiuramus te!
Exorcizamus te, omnis immundus spiritus, omnis satanica potestas omnis incursio infernalis adversarii. Omnis legio! Omnis con...potestas, omnis incursio infernalis adversarii. Omnis legio! Omnis congregatio et secta diabolica! Ergo, Draco maledicte et omnis......legio diabolica, adiuramus te! Exorcizamus te, omnis immundus spiritus, omnis satanica potestas, omnis incursio infernalis adversarii. Omnis legio! Omnis congregatio et secta diabolica! Ergo, Draco maledicte et omnis legio diabolica, adiuramus te!</div><!-- Fin du nouveau bloc --><!-- FIN DE LA FICHE -->
<span class="titre titre-2"></div></div>
CSS
- Code:
:root{
--main-color:#3A7258;
--second-color:#fff;
--four-color:#E08A54;
}
/* Fiche générale par KoalaVolant */
.dawn-gen{
width:500px;
margin:0 auto;
color:#222;
}
.dawn-gen *{
box-sizing:border-box;
}
.dawn-gen .img-1{
width:400px;
height:200px;
object-fit:cover;
margin:0 auto;
display:block;
z-index:7; position:relative;
border:5px solid var(--second-color);
}
.dawn-gen .dn{
display:none;
}
.dawn-gen .titre{
background-color:var(--main-color);
padding:15px;
text-align:center;
display:block;
margin-top:-25px;
z-index:13; position:relative;
}
.dawn-gen .titre-1{
-webkit-border-top-left-radius: 40px;
-webkit-border-top-right-radius: 40px;
-moz-border-radius-topleft: 40px;
-moz-border-radius-topright: 40px;
border-top-left-radius: 40px;
border-top-right-radius: 40px;
margin-bottom:-25px;
}
.dawn-gen .titre-2{
-webkit-border-bottom-right-radius: 40px;
-webkit-border-bottom-left-radius: 40px;
-moz-border-radius-bottomright: 40px;
-moz-border-radius-bottomleft: 40px;
border-bottom-right-radius: 40px;
border-bottom-left-radius: 40px;
clear:both;
}
.dawn-gen h1{
font-size:25px;
line-height:28px;
font-weight:700;
font-family: 'Oswald', sans-serif;
color:var(--second-color);
text-transform:uppercase;
}
.dawn-gen h2{
margin-top:-15px;
font-size:18px;
line-height:20px;
font-weight:400;
font-family: 'Frank Ruhl Libre', serif;
color:var(--four-color);
}
.dawn-gen h3{
color: var(--main-color);
font-family: Oswald, sans-serif;
font-size: 21px;
font-weight: 700;
line-height: 19px;
text-transform: uppercase;
text-align: center;
border-bottom: 2px solid;
padding-bottom: 4px;
margin: 10px;
}
.dawn-gen .img-2, .dawn-gen .img-3{
width:100px; height:100px;
object-fit:cover;
border:var(--main-color) 4px solid;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.dawn-gen .img-2{
float:left;
margin-right:10px;
}
.dawn-gen div p{
float:right;
}
.dawn-gen div{
background-color:var(--second-color);
padding:20px;
color:(--four-color);
font-size:12px;
line-height:15px;
text-align:justify;
z-index:5; position:relative;
}
.dawn-gen .entredeux{
background-color: var(--main-color);
display: block;
width: 115px;
height: 64px;
position: relative;
z-index: 1;
margin-top: -35px;
margin-left: 10vw;
margin-bottom: -35px;
-moz-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);
}
Ajouter une coupure entre chaque
Pour ajouter un bloc il suffit d'ajouter un :
- Code:
<div>blablabla</div>
Après le "DEBUT DE LA FICHE GEN" et avant "FIN DE LA FICHE"
Et une fois un bloc ajouté, il faut ajouter :
- Code:
<span class="entredeux"></span>
C'est ce qui permet de faire la séparation entre les deux.
Vous êtes perdu ? On peut personnaliser le code pour vous !
KoalaVolant
Mar 7 Avr 2020 - 22:44
Ceci est la version simple sans coupure
Le CSS est le même qu'au dessus
Le CSS est le même qu'au dessus
HTML
- Code:
<link href="https://fonts.googleapis.com/css?family=Frank+Ruhl+Libre|Oswald&display=swap" rel="stylesheet"><div class="dawn-gen"><img src="https://i.pinimg.com/564x/58/8e/a3/588ea3a19b752b8ccbadbf27c8cca27d.jpg" class="img-1 dn"><span style="margin-top:0px;" class="titre titre-1"><h1>Titre qu'il faut bien mettre</h1><h2>"Bienvenue" ici, mais faites attention à vous</h2></span>
<div><img class="img-2" src="https://media0.giphy.com/media/81xwEHX23zhvy/giphy.gif">Exorcizamus te, omnis immundus spiritus, omnis satanica potestas omnis incursio infernalis adversarii. Omnis legio! Omnis con...potestas, omnis incursio infernalis adversarii. Omnis legio! Omnis congregatio et secta diabolica! Ergo, Draco maledicte et omnis......legio diabolica, adiuramus te! Exorcizamus te, omnis immundus spiritus, omnis satanica potestas, omnis incursio infernalis adversarii. Omnis legio! Omnis congregatio et secta diabolica! Ergo, Draco maledicte et omnis legio diabolica, adiuramus te!
<h3>Test parce que voilà</h3>
Exorcizamus te, omnis immundus spiritus, omnis satanica potestas omnis incursio infernalis adversarii. Omnis legio! Omnis con...potestas, omnis incursio infernalis adversarii. Omnis legio! Omnis congregatio et secta diabolica! Ergo, Draco maledicte et omnis......legio diabolica, adiuramus te! Exorcizamus te, omnis immundus spiritus, omnis satanica potestas, omnis incursio infernalis adversarii
</div>
<span class="titre titre-2"></div></div>
|
|