« Ad Astra Per Aspera »

Sujet: Re: Ad Astra Per Aspera Dim 18 Juin 2017, 10:25

boutique toujours d'actualité @Kao

Sujet: Re: Ad Astra Per Aspera Dim 18 Juin 2017, 13:39

Je pense oui, mais Kao n'a plus de pc en ce moment donc c'est compliqué pour lui Sisi

Sujet: Re: Ad Astra Per Aspera Dim 18 Juin 2017, 17:21

j'ai rajouter en description pc hs comme cela pas de soucis ^^

Sujet: Re: Ad Astra Per Aspera Dim 09 Juil 2017, 14:39

Sujet: Re: Ad Astra Per Aspera Dim 09 Juil 2017, 16:39

Pseudo : Rêliane o/

Codage voulu (Mettre un shéma) :

https://i.imgur.com/3aeYguo.png
https://i.imgur.com/Kfk8Lnr.png
https://i.imgur.com/VHDS8Ha.png
https://i.imgur.com/FEV0bCE.png

Effets voulus : "Quand on clique sur avatars etc, ça ouvre donc les onglets :"

Comme sur le GIF
https://i.imgur.com/vIp2vCW.gif

refresh pour voir l'effet

Couleurs voulues : (image de fond : https://i.imgur.com/vB4JPol.png)

Polices voulues :

https://www.fonts.com/font/k-type/new-old-english?QueryFontType=Web&src=GoogleWebFonts (si ca peut t'aider)
https://fonts.google.com/specimen/Bellefair

Sujet: Re: Ad Astra Per Aspera Dim 09 Juil 2017, 16:43

T'as vu j'ai codé ton truc avant la commande je suis un dieu.

Donc voici l'aperçu :

Ensuite voici le code à mettre dans une page HTML sur ton forum de test Smile

:

Code:: <html lang="fr">
<head>
<meta charset="utf-8" />
<title>Galerie de Rêliane</title>
<link rel="stylesheet" href="https://cocktail-graph.org/html/Kao/cloister.css" />
<style>
@import url('https://fonts.googleapis.com/css?family=Bellefair');
body{ font-family: 'Cloister Black'; width: 99%}
body img{
max-width: 95%;
margin: 5px
}
article{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background-image: url('http://i.imgur.com/JPdG6ku.png'); /*Ton image de fond*/
background-repeat: no-repeat; /*Pour empêcher la duplication de l'image*/
background-color: #e7e7e7; /*La couleur de fond générale, à assortir avec ton image de fond*/
width: 100%;
height: 676px;
background-position-x: center;
background-position-y: 65%;
}
#home{display: -webkit-box;display: -ms-flexbox;display: flex;}
#avatar, #signa, #large, #autre{
display: none;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
#descriptif{
padding: 10px;
overflow: auto;
font-family: 'Bellefair';
height: 15%;
}
#rel{
font-family: 'Cloister Black';
color: #393e43;
font-size: 100px;
margin: auto;
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
-ms-flex-item-align: center;
align-self: center;
justify-self: center;
}
#menu{
font-family: 'Cloister Black';
-webkit-box-ordinal-group: 3;
-ms-flex-order: 2;
order: 2;
font-size: 35px;
}
#Avatars, #avatar h2{
color: #4e9939;
}
#Signatures, #signa h2{
color: #0080b3;
}
#Larges, #large h2{
color: #dd624c;
}
#Autres, #autre h2{
color: #e3c769;
}
h2{
margin: 0;
font-size: 35px;
font-weight: normal;
text-align: center;
}
#boxAvatar, #boxSigna, #boxLarge, #boxAutre{
text-align: center;
overflow-y:scroll;;
}
#boxAvatar{
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-fill: balance;
-moz-column-fill: balance;
column-fill: balance;
}
</style>
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-1.4.1.js"></script>
</head>
<body>
<article id="home">

<div id="descriptif">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer euismod ut sem et consequat. Vestibulum gravida pretium imperdiet. Fusce at faucibus dui. Aenean eu sem sit amet nunc ultricies accumsan eget eget nulla. Integer et mollis ex. Nulla ullamcorper dapibus bibendum. Vivamus finibus metus eget dui pretium vulputate. Donec eu mauris erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
</div>
<div id="menu">
<span class="menuitem" id="Avatars">Avatars</span>
<span class="menuitem" id="Signatures">Signatures</span>
<span class="menuitem" id="Larges">Larges pièces</span>
<span class="menuitem" id="Autres">Autres</span>
</div>
<div id="rel">Rêliane</div>

</article>
<article id="avatar">
<h2>Avatars</h2>
<div id="boxAvatar">
<img src="http://img110.xooimage.com/files/c/e/1/qtkyz3a5-5259880.png"/>
<img src="http://img110.xooimage.com/files/c/e/1/qtkyz3a5-5259880.png"/>
<img src="http://img110.xooimage.com/files/c/e/1/qtkyz3a5-5259880.png"/>
<img src="http://img110.xooimage.com/files/c/e/1/qtkyz3a5-5259880.png"/>
<img src="http://img110.xooimage.com/files/c/e/1/qtkyz3a5-5259880.png"/>
<img src="http://img110.xooimage.com/files/c/e/1/qtkyz3a5-5259880.png"/>
<img src="http://img110.xooimage.com/files/c/e/1/qtkyz3a5-5259880.png"/>
<img src="http://img110.xooimage.com/files/c/e/1/qtkyz3a5-5259880.png"/>
<img src="http://img110.xooimage.com/files/c/e/1/qtkyz3a5-5259880.png"/>
<img src="http://img110.xooimage.com/files/c/e/1/qtkyz3a5-5259880.png"/>
</div>
</article>
<article id="signa">
<h2>Signatures</h2>
<div id="boxSigna">
</div>
</article>
<article id="large">
<h2>Larges pièces</h2>
<div id="boxLarge">
</div>
</article>
<article id="autre">
<h2>Autres</h2>
<div id="boxAutre">
</div>
</article>

<script>

if($.browser.mozilla){
$('#avatar, #signa, #large, #autre').css("overflow", "auto");
}

$('#Avatars').mouseover(function() {
$('#home').hide();
$('#avatar').show();})
$('#avatar').mouseleave(function() {
$('#home').show();
$('#avatar').hide();
})
$('#Signatures').mouseover(function() {
$('#home').hide();
$('#signa').show();})
$('#signa').mouseleave(function() {
$('#home').show();
$('#signa').hide();
})
$('#Larges').mouseover(function() {
$('#home').hide();
$('#large').show();})
$('#large').mouseleave(function() {
$('#home').show();
$('#large').hide();
})
$('#Autres').mouseover(function() {
$('#home').hide();
$('#autre').show();})
$('#autre').mouseleave(function() {
$('#home').show();
$('#autre').hide();
})

</script>
</body>

Et dans ton sujet de galerie tu mettras ce code :

Code:: <iframe src="URL DE TA PAGE HTML" frameborder="0" scrolling="no" style="width:100%; height: 680px; border:none;"></iframe>

Sujet: Re: Ad Astra Per Aspera Dim 09 Juil 2017, 17:28

Kaô d'amûr, si je souhaite avoir une fiche rp qui possède des effets au clic, tu crois pouvoir me faire ça ? Sachant que je ne peux pas passer par une page html pour chaque post.

Sujet: Re: Ad Astra Per Aspera Dim 09 Juil 2017, 17:45

Hum donc du javascript qui fonctionne dans un post c'est ça ? :/

Sujet: Re: Ad Astra Per Aspera Dim 09 Juil 2017, 19:28

Pseudo : Aucune idée !
Type de codage [signature à onglet, PA,...] : FICHE
Dimensions : COMME SUR L'image ! bon allez 1024 x ... 864 VOILA
Contraintes : le principe est simple , tu cliques sur l'onglet , ca change de d'onglet et ca déplace l'étiquette vers la gauche ! ta compris le concept ? les effets de texte avec hein e.e
Schéma

Ad Astra Per Aspera Boutique_rel_2

Sujet: Re: Ad Astra Per Aspera Dim 09 Juil 2017, 23:25

6 points amor

Sujet: Re: Ad Astra Per Aspera Lun 10 Juil 2017, 21:29

Voilà voilà Rêliane :

Dis moi si cela te convient c:

Sujet: Re: Ad Astra Per Aspera Lun 10 Juil 2017, 21:43

Au top o/

Sujet: Re: Ad Astra Per Aspera Lun 10 Juil 2017, 22:31

Donc voilà le code à mettre dans une page html :

Code:: <!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Boutique de Rêliane</title>
<style>
@import url('https://fonts.googleapis.com/css?family=Bellefair');
body{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
font-family: 'Bellefair';
}
article{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
background-color: #f4f6fe;
background-image: url('http://i.imgur.com/T6hcgd1.png');
background-repeat: no-repeat;
background-position-x: center;
background-position-y: -140%;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
border: 1px solid #f396cd;
width: 99%;
height: 450px;
padding: 0px 20px 10px 20px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#formulaire, #inProgress, #ended{
display: none;
padding: 0px 65px 10px 65px;
}
aside{
padding-top: 15px;
}
menu{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: 0;
padding: 0;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
menuitem{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding-right: 5px;
height: 65px;
width: 120px;
font-size: 18px;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
text-align: end;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 5px;
cursor: default;
}
#Pres, #presClosed{
background-color: #fbd9ee;
}
#Form, #Progress, #End{
display: none;
}
#Form, #formClosed{
background-color: #f9cb63;
}
#Progress, #progressClosed{
background-color: #f24264;
}
#End, #endClosed{
background-color: #97d460;
}
#bordureExt{
background-color: #f4f6fe;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
height: 457px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
p{
text-align: justify;
background-color: #e8eaf1;
overflow: auto;
}
.descText{
margin: 0;
padding: 20px;
}
.conteneur{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
h2{
margin: 0;
font-weight: normal;
color: #a6c24a;
}
#presClosed{
display: none;
}
#presClosed, #formClosed, #progressClosed, #endClosed{
width: 25px;
cursor: pointer;
}
</style>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
</head>
<body>
<aside>
<menu>
<menuitem id="Pres">Présentation Boutique</menuitem>
<menuitem id="presClosed"></menuitem>
<menuitem id="Form">Formulaire</menuitem>
<menuitem id="formClosed"></menuitem>
<menuitem id="Progress">Commandes en cours</menuitem>
<menuitem id="progressClosed"></menuitem>
<menuitem id="End">Commandes terminées</menuitem>
<menuitem id="endClosed"></menuitem>
</menu>
</aside>
<div id="bordureExt">
<article id="home">
<div class="conteneur">
<h2>Boutique de Rêliane</h2>
<p class="descText">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</article>
<article id="formulaire">
<p class="descText">1Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</article>
<article id="inProgress">
<p class="descText">2Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</article>
<article id="ended">
<p class="descText">3Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</article>
</div>
<script>
$('#presClosed').click(function() {
$('article, menuitem').hide();
$('#home, #Pres, #formClosed, #progressClosed, #endClosed').show();
});
$('#formClosed').click(function() {
$('article, menuitem').hide();
$('#formulaire, #Form, #presClosed, #progressClosed, #endClosed').show();
});
$('#progressClosed').click(function() {
$('article, menuitem').hide();
$('#inProgress, #Progress, #presClosed, #formClosed, #endClosed').show();
});
$('#endClosed').click(function() {
$('article, menuitem').hide();
$('#ended, #End, #presClosed, #progressClosed, #formClosed').show();
});
</script>
</body>

Et voici l'iframe adaptée au forum :

Code:: <iframe src="URL DE TA PAGE HTML" style="width: 100%; height: 475px; border: 0; margin: 0;"></iframe>

Sujet: Re: Ad Astra Per Aspera Lun 10 Juil 2017, 23:12

6 pts

Sujet: Re: Ad Astra Per Aspera Ven 14 Juil 2017, 11:28

+ 6 pts bonus car tu es designer

Sujet: Re: Ad Astra Per Aspera Ven 14 Juil 2017, 14:45

Pseudo : Regarde sur la gauche de l'écran et tu saura. Hap

Type de codage [signature à onglet, PA,...] : Signa codée
Dimensions : euh, les dimensions de cg que jcoco pu. Rip

Contraintes : Bah, y'en a pas vraiment, juste le fait que je puisse changer d'onglet étou.:v
Schéma :

Spoiler:

Spoiler:

Spoiler:

Autre : jsuis venue ici just pr toa tavu. Hap

Ah et Salamich m'a donné les brush, au cas où : https://imgur.com/a6jZWti

Merci d'avance.c:

Sujet: Re: Ad Astra Per Aspera Dim 16 Juil 2017, 11:53

C'est noté mon enfant, je m'en occupe dès que possible.

Sujet: Re: Ad Astra Per Aspera Lun 17 Juil 2017, 08:03

Pseudo : FRANCK
Type de codage [signature à onglet, PA,...] : SIGNATURE A ONGLET
Dimensions : COMME SUR CE SCHEMA PETIT
Contraintes : CONTRAINTE FAUT QUE CA SILLUMINE QUAND ON CLIQUE SUR LES ONGLETS LA TYPO CA FAIT LUMIERE ! QUE CA SCINTILLE ! TU COPIES TOUT LE RESTE COMME C'EST !
Schéma (La par contre c'est une dissertation ton explication bro) :

Spoiler:

Spoiler:

Spoiler:

Spoiler:

Images :

Spoiler:

Et si ton codeur (ça sera sûrement kao mdr) à besoin d'un truc, qu'il vienne me voir c: MESSAGE DHOMIE

Polices d'écriture (passez par google font merci) : TES KAO OU T PAS KAO ?
Autre : MERCI MON PETIT COEUR

Sujet: Re: Ad Astra Per Aspera Jeu 20 Juil 2017, 08:36

Citron vu que tu es en vacances et que j'avais des problèmes avec les brush je te termine dès que je peux. owo. Ce soir certainement.

Quant à toi Rêliane, voici venir ta signature codée, totalement subliiiiiiiime.

Sujet: Re: Ad Astra Per Aspera Jeu 20 Juil 2017, 10:56

Je ne vois pas sur ton post , j'ai regardé sur le lien discord , et c'est parfait o/

Je peux juste t’embêter une dernière fois , au niveau du dernière onglet , pour le texte , qu'il soit plus petit ? que je puisse tout rentrer sans devoir scroll ?

comme ca : https://i.imgur.com/8CKdEt0.png

Mise a part ca , c'est parfait Smile

Sujet: Re: Ad Astra Per Aspera Jeu 20 Juil 2017, 15:15

Bien donc voici le code à mettre dans une page html :

Code:: <!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Signature à Onglets de Petit Citron</title>
<style>
img{max-width: 100%;}
body{
font-family: 'Times New Roman';
color: #fffbe3;
display: flex;
flex-direction: column;
width: 450px;
justify-content: center;
align-items: center;
}
menu{
width: 100%;
justify-content: center;
align-items: center;
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
margin-bottom: 3px;
}
menu li{
transition: 1s;
letter-spacing: 5px;
font-size: 7px;
box-sizing: border-box;
padding: 2px;
margin-right: 5px;
display: inline-block;
width: 88px;
text-align: center;
text-transform: uppercase;
}
menu li:hover{
transition: 1s;
filter: brightness(5);
}
#ongletReliane, #ongletCadeau, #ongletSigna, #ongletTeam{
cursor: pointer;
color: #fffbe3;
background-color: #060b13;
}
#ongletSigna{cursor: default;}
article{
text-transform: uppercase;
height: 250px;
overflow: auto;
display: flex;
flex-direction: column;
align-items: center;
background-color: #060b13;
width: 100%;
}
#cadeaux, #reliane, #team{display: none;}
#signa, #team, #cadeaux{align-items: center;}
#team{justify-content: center;}
#reliane{
box-sizing: border-box;
padding: 15px;
}
#signa img{max-height: 100%;}
#cadeaux img{max-width: 99%;}
#team, #reliane{
background-image: url('http://i.imgur.com/yaSRk9v.png');
background-repeat: no-repeat;
}
#reliane p{
margin: 0;
line-height: 20px;
font-size: 9px;
letter-spacing: 3px;
}
#reliane p img{
float: left;
margin: 0px 10px 4px 0px;
}
</style>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
</head>
<body>
<menu>
<li id="ongletSigna">Signature</li>
<li id="ongletCadeau">Cadeaux</li>
<li id="ongletTeam">Team</li>
<li id="ongletReliane">Rêliane</li>
</menu>
<article id="signa">
<img src="http://i.imgur.com/otabdxT.png" />
</article>
<article id="cadeaux">
<img src="http://zupimages.net/up/17/29/brzy.png" />
<img src="http://i.imgur.com/m2WY73R.png" />
</article>
<article id="team">
vlam
</article>
<article id="reliane">
<p>
<img src="http://i.imgur.com/sLqIO9M.png" />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</article>

<script>
$('#ongletSigna').click(function(){
$('article').hide();
$('menu li').css('cursor', 'pointer');
$('#signa').show();
$('#ongletSigna').css('cursor', 'default');
})
$('#ongletCadeau').click(function(){
$('article').hide();
$('menu li').css('cursor', 'pointer');
$('#cadeaux').show();
$('#ongletCadeau').css('cursor', 'default');
})
$('#ongletReliane').click(function(){
$('article').hide();
$('menu li').css('cursor', 'pointer');
$('#reliane').show();
$('#ongletReliane').css('cursor', 'default');

})
$('#ongletTeam').click(function(){
$('article').hide();
$('menu li').css('cursor', 'pointer');
$('#team').show();
$('#ongletTeam').css('cursor', 'default');
})
</script>

</body>

Quand tu veux mettre du texte quelque part et faire des retours à la ligne, utilise la balise suivante :

Code:: <br />

Et le code à mettre dans ta signature pour l'afficher et la centrer :

Code:: <div style="display: flex; justify-content: center; align-items: center;"><iframe src="https://cocktail-graph.org/html/Kao/signa%20reliane.html" style="border: 0; width: 460px; height: 300px; overflow: hidden;"></iframe></div>

Sujet: Re: Ad Astra Per Aspera Jeu 20 Juil 2017, 22:22

+ 9 pts

Sujet: Re: Ad Astra Per Aspera Ven 21 Juil 2017, 00:02

Et à ton tour mon petit citron, dis moi si ça te convient :

Mais vu la réaction de Asami on va supposer que oui donc voici le code à mettre sur une page html sur un forum test :

Code:: <!doctype html>
<html>
  <head>
   <meta charset="utf-8" />
   <title>Signature à Onglets de Petit Citron</title>
   <link rel="stylesheet" href="https://cocktail-graph.org/html/Kao/levibrush.css" />
   <style>
   body{
   display: flex;
   flex-direction: column;
   width: 570px;
   justify-content: center;
   align-items: center;
   }
   img{max-width: 99%;}
   menu{
   width: 100%;
   justify-content: center;
   align-items: center;
   list-style-type: none;
   margin: 0;
   padding: 0;
   display: flex;
   }
   menu li{
   display: inline-flex;
   flex: 1;
   height: 110px;
   justify-content: center;
   align-items: flex-end;
   text-align: center;
   color: #fffbe3;
   }
   .posText{
   height: 40px;
   display: flex;
   align-items: center;
   font-family: 'Times New Roman';
   text-transform: uppercase;
   font-size: 15px;
   }

   #ongletSigna{background-image: url('http://i.imgur.com/3LRDOYR.png'); cursor: default;}
   #ongletCadeau{background-image: url('http://i.imgur.com/55Rkoje.png'); cursor: pointer;}
   #ongletCitron{background-image: url('http://i.imgur.com/MEHFo77.png'); cursor: pointer;}
   #ongletCitron, #ongletCadeau, #ongletSigna{
   background-repeat: no-repeat;
   background-size: contain;
   background-position: center;
   }
   article{
   display: flex;
   height: 350px;
   box-sizing: border-box;
   padding: 10px;
   flex-direction: column;
   align-items: center;
   background-color: #3b3b3b;
   width: 100%;
   }
   article h2{
   font-family: 'Levibrush';
   text-transform: uppercase;
   margin: 0;
   margin-bottom: 5px;
   padding: 0;
   color: #f0f0f0;
   }
   #cadeaux, #citron{display: none;}
   #textPres{
   display: flex;
   background-color: #6c6c6c;
   height: 80%;
   text-transform: uppercase;
   font-size: 12px;
   color: #eeeeee;
   }
   #textPres img{max-height: 100%; margin-right: 10px;}
   #textPres p{overflow: auto;}
   </style>
   <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
  </head>
  <body>
   <menu>
   <li id="ongletSigna"><span class="posText">Signa</span></li>
   <li id="ongletCadeau"><span class="posText">Cadeaux</span></li>
   <li id="ongletCitron"><span class="posText">Citron</span></li>
   </menu>
   <article id="signa">
   <h2>Signature</h2>
   <img src="http://img15.hostingpics.net/pics/2675681450866608375.png" />
   </article>
   <article id="cadeaux">
   <h2>Cadeaux</h2>
   </article>
   <article id="citron">
   <h2>Citron</h2>
   <div id="textPres">
   <img src="https://2img.net/u/1812/13/57/97/avatars/2664-64.png" />
   <p>
   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

   </p>
   </div>
   </article>

   <script>
   $('#ongletSigna').click(function(){
   $('article').hide();
   $('menu li').css('cursor', 'pointer');
   $('#signa').show();
   $('#ongletSigna').css('cursor', 'default');
   })
   $('#ongletCadeau').click(function(){
   $('article').hide();
   $('menu li').css('cursor', 'pointer');
   $('#cadeaux').show();
   $('#ongletCadeau').css('cursor', 'default');
   })
   $('#ongletCitron').click(function(){
   $('article').hide();
   $('menu li').css('cursor', 'pointer');
   $('#citron').show();
   $('#ongletCitron').css('cursor', 'default');
   })
   </script>

  </body>

Et le code à mettre dans ta signature sur CG :

Code:: <div style="display: flex; justify-content: center; align-items: center;"><iframe src="URL DE TA PAGE HTML"style="border: 0; width: 580px; height: 500px;"></iframe></div>

Sujet: Re: Ad Astra Per Aspera Ven 21 Juil 2017, 00:11

+ 9 pts petit chieur

Sujet: Re: Ad Astra Per Aspera

Rechercher

Résultats par : Messages Sujets
Recherche avancée

Page 1 sur 2	Aller à la page : 1, 2