<style>
:root{
--pt: 'Cedarville Cursive', cursive;
--pp: 'arial', sans-serif;
--cu: #EDA78D;
--cd: #F2CFC2;
--ct: #515151;
--color-tooltip: #E6E0DF;
}
*::-webkit-scrollbar-thumb {
background: linear-gradient(0deg, rgba(219,139,114,1) 0%, rgba(249,191,167,1) 50%, rgba(242,215,206,1) 100%);
outline: 1px solid #E8E8E8;
}
*::-webkit-scrollbar {
background-color: #DE8E8E8;
border: 0;
height: 2px;
width: 4px;
}
*{scrollbar-color: #cfb1b0;
scrollbar-width: thin;}
body{
font-family: var(--pp) !important;
font-size: 12px !important;
color: var(--ct) !important;
}
a:hover{
text-decoration:none !important;
}
.pa-wac{
width:800px;
background:#F7F7F7;
padding:10px;
}
.flexpa{
display:flex;
}
.patitre{
text-align:center;
}
.patitre .titre{
font-family: var(--pp);
color: var(--cu);
text-transform: uppercase;
font-weight: 500;
font-size: 28px;
margin: 0;
padding: 0;
}
.patitre .soustitre {
font-family: var(--pt);
font-size: 21px;
color: #DFBDB0;
margin-top: -28px;
margin-left: 65px;
display: flex;
justify-content: space-around;
/* width: 30%; */
width: 31%;
margin-left: 269px;
flex-wrap: wrap;
}
.contexte{
border: #ffffff solid 1px;
box-shadow: inset 0 0 4px var(--color-tooltip);
width: 260px;
text-align: justify;
height:140px;
overflow:overlay;
overflow-y: scroll;
padding: 10px;
line-height: 14px;
}
.liensutiles {
display: flex;
width: 260px;
flex-wrap: wrap;
justify-content: space-around;
margin-top: 12px !important;
margin: auto;
}
.liensutiles a {
margin: 7px 8px;
color: var(--ct);
text-decoration: none;
padding: 0px;
position: relative;
z-index: 1;
font-size: 14px;
}
.liensutiles a:hover{
text-decoration: none;
color: var(--cu);
}
.liensutiles a::after {
content: '';
position: absolute;
bottom: 2.5px;
left: 0px;
right: 0;
height: .5em;
background: var(--cu);
z-index: -1;
opacity: 0.5;
/* width: 95%; */
text-align: center;
}
.liensutiles .gris::after {
content: '';
position: absolute;
bottom: 2.5px;
left: 0px;
right: 0;
height: .5em;
background: var(--cd) !important;
z-index: -1;
opacity: 0.5;
/* width: 95%; */
text-align: center;
}
.colonned{
margin: 0px 15px;
}
.actupa{
width: 240px;
height:70px;
overflow:overlay;
overflow-y: scroll;
margin-bottom:10px;
padding:10px;
text-align: justify;
border: 1px solid #ffffff;
box-shadow: inset 0 0 4px var(--color-tooltip);
line-height: 14px;
}
.carouseladmin {
width: 240px;
height: 87px;
border: solid #ffffff 1px;
margin-bottom: 10px;
padding: 5px;
}
.item{
position:relative;
}
.flexcarou {
visibility: hidden !important;
position: absolute;
top: 0;
font-size: 10px;
text-align: center;
/* margin: 0px 77px; */
color: #ffffff;
/* width: 100%; */
/* height: 40px; */
background: #33333385;
width: 100%;
height: 75px;
opacity: 0;
transition: all .5s;
}
.item:hover + .flexcarou, .flexcarou:hover {
visibility: visible !important;
transition: all 0.5s;
opacity: 1;
}
.pseudo {
background: var(--cu);
width: 86px;
margin: auto;
margin-top: 20px;
}
.liens a{
color: var(--cu);
text-transform:uppercase;
font-weight:700;
}
.liens a:hover{
text-decoration: none;
color: var(--cu);
}
.item img{
width:240px !important;
height: 75px !important;
object-fit:cover !important;
object-position: 0px -10px;
border:0;
filter: grayscale(1);
}
#myCarousel2 .item img{
width:240px !important;
height: 73px !important;
object-fit:cover !important;
object-position: 0px -10px;
border:0;
filter: grayscale(1);
}
/* CARROUSEL ADMIN NE PAS TOUCHER CETTE PARTIE */
.carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right, .carousel-control .icon-next, .carousel-control .icon-prev {
font-size: 20px !important;
}
.carousel-control {
color: var(--cu) !important;
text-shadow: none !important;
opacity: .5;
}
#mycarousel2 .carousel-control {
color: var(--cu) !important;
text-shadow: none !important;
opacity: .5;
margin-top: -13px !important;
}
.carousel-control.right {
background-image: none !important;
}
.carousel-control.left {
background-image: none !important;
}
/* FIN CAROUSEL ADMIN */
.groupemois img {
width: 240px;
height: 74px;
object-fit: cover;
border: 1px solid #ffffff;
padding: 5px;
}
.titremdm{
background: var(--cu);
text-transform: uppercase;
font-size: 8px;
text-align: center;
color: #ffffff;
margin-bottom: 4px;
}
.mdmois {
width: 250px;
height: 86px;
border: solid 1px #ffffff;
margin-bottom: 10px;
padding: 5px;
}
#myCarousel2{
width: 100%;
height: 72px;
}
.intrigue {
width: 250px;
border: solid 1px #ffffff;
box-shadow: inset 0 0 4px var(--color-tooltip);
height: 78px;
overflow: overlay;
overflow-y: scroll;
padding: 10px;
text-align: justify;
line-height: 14px;
}
.intrigue p{margin:0;}
highlight{text-transform: uppercase;
font-weight: 700;
font-size:14px;}
.partenariat select{
width: 250px;
border: 1px solid #ffffff;
box-shadow: inset 0 0 4px var(--color-tooltip);
background: none;
margin-top: 10px;
height: 37px;
text-align: center !important;
text-transform: uppercase;
color: var(--ct);
font-weight: 700;
font-family: var(--pp);
}
.partenariat p{
margin:0;
text-align:center;
color: var(--cd);
}
.partenariat a{
color: var(--cd);
text-decoration: none;
}
.partenariat a:hover{
text-decoration: none;
color: var(--cu);
}
</style> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" /><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <link rel="preconnect" href="https://fonts.gstatic.com" /><link href="https://fonts.googleapis.com/css2?family=Cedarville+Cursive&family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,700&display=swap" rel="stylesheet" />
<div class="pa-wac">
<div class="patitre">
<div class="titre">
bienvenue
</div>
<div class="soustitre">
<img src="https://i.ibb.co/KzrkNqs/LBP3U7V.png" alt="" />mayberry
</div>
</div>
<div class="flexpa">
<div class="colonnep">
<div class="contexte">
<img src="https://i.ibb.co/bHrQ7kv/Untitled-1.png" alt="" />Douce mélancolie des saisons qui passent et qui trépassent, les feuilles qui changent de couleurs tout au long de l'année, les plages bondées l'été, les devantures de maison décorées aux couleurs d'Halloween, la magie de Noël et la neige qui recouvre le bitume ou bien la floraison de ses magnifiques fleurs qui décorent cette petite ville de la Caroline du Nord. À Mayberry, chaque saison a sa particularité et les habitants se prêtent au jeu tout au long de l'année et ce, qu'importe les idéologies de chacun. Convivialité à l'honneur, chacun y met du sien, rendant ainsi cette ville si agréable et attrayante pour les citoyens tout comme pour les vacanciers. Néanmoins, méfiez-vous des habitants de Mayberry car ici, tout se sait. Votre secret ne sera pas gardé bien longtemps et vous pouvez être certain que le ragot à votre égard fera le tour de la ville en seulement quelques jours, voir quelques heures. D'ailleurs, les potins de la ville partent souvent de ce groupe de mères au foyer qui se donnent rendez-vous à toute heure de la journée dans le café insolite ; Berry's & Co. Les habitants savent que tout part de ce groupe de femmes que l'on surnomme les « Desperate Housewives » en référence à la célèbre série qui a fait fureur auprès de nos jeunes dames. Mais n'ayez crainte, vous saurez vous plaire par chez nous et vous ne risquez nullement de vous tourner les pouces.
</div>
<div class="liensutiles">
<a target="blank_" href="https://warmandcozy.forumactif.com/t5-reglement">règlement</a> <a target="blank_" href="https://warmandcozy.forumactif.com/t40-berries-gossip" class="gris">berries gossip</a> <a target="blank_" href="https://warmandcozy.forumactif.com/f31-scenarios">scénarios</a> <a target="blank_" href="https://warmandcozy.forumactif.com/t6-groupes" class="gris">groupes</a> <a target="blank_" href="https://warmandcozy.forumactif.com/t21-bottin-des-avatars">bottin</a> <a target="blank_" href="https://warmandcozy.forumactif.com/f14-pre-liens" class="gris">pré-liens</a> <a target="blank_" href="https://warmandcozy.forumactif.com/t39-decouvrir-mayberry">mayberry</a> <a target="blank_" href="https://warmandcozy.forumactif.com/t42-mayberry-moodboard" class="gris">moodboard</a> <a target="blank_" href="https://warmandcozy.forumactif.com/f4-invites">invités</a>
</div>
</div>
<div class="colonned">
<div class="actupa">
<strong>00.03.2021</strong> ouverture du forum <strong>17.02.2021</strong> installation du premier design réalisé par languenoire et aelyna <strong>20.01.2021</strong> création du forum.
</div>
<div class="carouseladmin">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="https://64.media.tumblr.com/a174cf12789ac8a07ebd0a589e0a7a68/05e64fee738dcd7e-1b/s2048x3072/12723d9e96b68f6d813c7357ae4ee1377650a570.jpg" id="Aelyna" style="width:100%;" />
</div>
<div class="flexcarou">
<div class="pseudo">
aelyna
</div>
<div class="multicompte">
divina, narciza
</div>
<div class="liens">
<a target="blank_" href="#">MP</a>
</div>
</div>
<div class="item">
<img src="https://i.ibb.co/yBTwZ5H/01.png" id="Instagirl" style="width:100%;" />
</div>
<div class="flexcarou">
<div class="pseudo">
dré
</div>
<div class="multicompte">
prénom, prénom
</div>
<div class="liens">
<a target="blank_" href="#">MP</a>
</div>
</div>
<div class="item">
<img src="https://i.ibb.co/yBTwZ5H/01.png" alt="Soren" style="width:100%;" />
</div>
<div class="flexcarou">
<div class="pseudo">
pseudo
</div>
<div class="multicompte">
prénom, prénom
</div>
<div class="liens">
<a target="blank_" href="#">MP</a>
</div>
</div>
<div class="item">
<img src="https://i.ibb.co/yBTwZ5H/01.png" alt="comete" style="width:100%;" />
</div>
<div class="flexcarou">
<div class="pseudo">
pseudo
</div>
<div class="multicompte">
prénom, prénom
</div>
<div class="liens">
<a href="#">MP</a>
</div>
</div>
<!-- Left and right controls --> <a class="left carousel-control" href="#myCarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">Next</span> </a>
</div>
</div>
</div>
<div class="groupemois">
<img src="https://i.ibb.co/PNK0V16/groupe1.png" alt="" />
</div>
</div>
<div class="colonnet">
<div class="titremdm">
Nos membres du mois
</div>
<div class="mdmois">
<div id="myCarousel2" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="https://i.ibb.co/rd2dcyV/02.png" id="Aelyna" style="width:100%;" />
</div>
<div class="flexcarou">
<div class="pseudo">
Compte principal
</div>
<div class="multicompte">
prénom, prénom
</div>
<div class="liens">
<a target="blank_" href="#">MP</a>
</div>
</div>
<div class="item">
<img src="https://i.ibb.co/yBTwZ5H/01.png" style="width:100%;" />
</div>
<div class="flexcarou">
<div class="pseudo">
Compte principal
</div>
<div class="multicompte">
prénom, prénom
</div>
<div class="liens">
<a target="blank_" href="#">MP</a>
</div>
</div>
<!-- Left and right controls --> <a class="left carousel-control" href="#myCarousel2" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel2" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">Next</span> </a>
</div>
</div>
</div>
<div class="intrigue">
<highlight>INFORMATIONS</highlight>
<p>
Pas de minimum de lignes — 1 rp par mois — environs 5 ans d’écart entre l’avatar et le personnage — pas de compétition sur l’avatar. Le premier arrivé, premier servi — pas de flood dans les fiches de liens, a voir en mp ou sur discord.
</p>
</div>
<div class="partenariat">
<select onchange="window.open(this.options[this.selectedIndex].value)">
<option selected="selected">Partenaires</option>
<option value="#">Liens du partenaire</option>
</select>
<p>
<a target="blank_" href="#">Vous ?</a> / <a href="#">Nos amis</a>
</p>
</div>
</div>
</div>
</div>
Accueil 
Sujet: page d'accueil 