Un forum de discussions pour parler de tout et de rien, de vos études,de vos vacances,de vos loisirs et faire plein de connaissances
 
Le Deal du moment :
TCL C74 Series 55C743 – TV 55” 4K QLED 144 ...
Voir le deal
499 €

Partagez
 

 Libre Service - Océan

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Frisk
Baleine de Nemo
Baleine de Nemo
Frisk
Messages : 2356
Date d'inscription : 02/01/2017
Age : 21

Libre Service - Océan Empty
Message Sujet: Libre Service - Océan   Libre Service - Océan EmptyMar 10 Jan - 18:35

Hello, voici un petit code pour présenter vos Océans!
Juste quelques précisions:

  1. Merci d'utiliser ce code pour Ocean Home seulement!
  2. N'enlevez pas les crédits!
  3. Vous pouvez changer les couleurs, les polices, l'image et évidemment le texte, mais merci de ne pas toucher au reste.
  4. Pour utiliser ce code, il vous faut avoir accès au panneau d'administration d'un forum pour pouvoir utiliser une page HTML et une iframe.


J'ai utilisé des hover (effets au survols) pour les box, les titres et la bande avec le pseudo, donc n'hésitez pas à passer votre souris un peu partout ^^

Vous pouvez avoir un aperçu en direct ici
Et en image ici

Le code à mettre dans un page HTML:
Code:
<div align="center">
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /><title>Ocean Home</title>
   <style type="text/css">

 @import url('https://fonts.googleapis.com/css?family=Domine|Great+Vibes|Neucha|Roboto');
            
#ocean{
 width: 500px;
 height: auto;
 background-color: #C9CAF2; /* couleur du fond de l'océan */
 border-radius: 5px;
 border: 1px solid LightSteelBlue; /* couleur et épaisseur de la bordure */
 box-shadow: 3px 0px 3px 0px rgba(55,55,55,0.3); /* taille et couleur de l'ombre */
 -webkit-box-shadow: 3px 0px 3px 0px rgba(55,55,55,0.3);
 background-size: cover;
 background-attachment: scroll;
 overflow-y: hidden;
 overflow-x: hidden;
}
  
.bande{
 width: 505px;
 height: auto;
 transform: rotate(-3deg);
 background-color: LightCoral; /* couleur du fond de la bande avec votre pseudo */
 text-align: center;
 font-size: 28px;
 font-weight: normal;
 color: LightSteelBlue; /* couleur du texte */
 font-family: 'Great Vibes', cursive;
 transition-duration: 1s; }
  
.bande:hover{
 width: 500px;
 height: auto;
 transform: rotate(0deg); }
  
.paragraphe{
 width: 213px;
 height: 200px;
 background-color: lightpink; /* couleur de fond des paragraphes */
 border: 1px solid LightCoral; /* couleur de la bordure */
 overflow: auto;
 float: left;
 border-radius: 0px;
 padding: 10px;
 margin-left: 10px;
 margin-top: 10px;
 margin-bottom: 10px;
 text-align:justify;
 font-size: 13px;
 color: black; /* couleur du texte */
 font-family: 'Domine', serif;
 transition-duration: 0.9s; }
            
.paragraphe:hover{
 width: 213px;
 height: 200px;
 background-color: LightCoral; /* couleur de fond des paragraphes */
 border: 1px solid LightCoral; /* couleur de la bordure */
 overflow: auto;
 float: left;
 border-radius: 0px;
 padding: 10px;
 margin-left: 10px;
 margin-top: 10px;
 margin-bottom: 10px;
 text-align:justify;
 font-size: 13px;
 color: black; /* couleur du texte */
 font-family: 'Domine', serif;
 transition-duration: 0.9s; }
            
.paragraphesuiv{
 width: 213px;
 height: 200px;
 background-color: lightpink; /* couleur de fond des paragraphes */
 border: 1px solid LightCoral; /* couleur de la bordure */
 overflow: auto;
 float: right;
 border-radius: 0px;
 padding: 10px;
 margin-right: 10px;
 margin-top: 10px;
 margin-bottom: 10px;
 text-align:justify;
 font-size: 13px;
 color: black; /* couleur du texte */
 font-family: 'Domine', serif;
 transition-duration: 0.9s; }
            
.paragraphesuiv:hover{
 width: 213px;
 height: 200px;
 background-color: LightCoral; /* couleur de fond des paragraphes au passage de la souris */
 border: 1px solid LightCoral; /* couleur de la bordure */
 overflow: auto;
 float: right;
 border-radius: 0px;
 padding: 10px;
 margin-right: 10px;
 margin-top: 10px;
 margin-bottom: 10px;
 text-align:justify;
 font-size: 13px;
 color: black; /* couleur du texte */
 font-family: 'Domine', serif;
 transition-duration: 0.9s; }
  
.paragraphe2{
 width: 460px;
 height: 200px;
 background-color: lightpink; /* couleur de fond des paragraphes */
 border: 1px solid LightCoral; /* couleur de la bordure */
 overflow: auto;
 border-radius: 0px;
 padding: 10px;
 margin: 10px 10px 10px 10px;
 text-align:justify;
 font-size: 13px;
 color: black; /* couleur du texte */
 font-family: 'Domine', serif;
 transition-duration: 0.9s; }
            
.paragraphe2:hover{
 width: 460px;
 height: 200px;
 background-color: LightCoral; /* couleur de fond des paragraphes au passage de la souris */
 border: 1px solid LightCoral; /* couleur de la bordure */
 overflow: auto;
 border-radius: 0px;
 padding: 10px;
 margin: 10px 10px 10px 10px;
 text-align:justify;
 font-size: 13px;
 color: black; /* couleur du texte */
 font-family: 'Domine', serif;
 transition-duration: 0.9s; }
            
.paragraphe3{
 width: 460px;
 height: 50px;
 background-color: lightpink; /* couleur de fond des paragraphes */
 border: 1px solid LightCoral; /* couleur de la bordure */
 overflow: auto;
 border-radius: 0px;
 padding: 10px;
 margin: 10px 10px 10px 10px;
 text-align:justify;
 font-size: 13px;
 color: black; /* couleur du texte */
 font-family: 'Domine', serif;
 transition-duration: 0.9s; }
            
.paragraphe3:hover{
 width: 460px;
 height: 50px;
 background-color: LightCoral; /* couleur de fond des paragraphes au passage de la souris */
 border: 1px solid LightCoral; /* couleur de la bordure */
 overflow: auto;
 border-radius: 0px;
 padding: 10px;
 margin: 10px 10px 10px 10px;
 text-align:justify;
 font-size: 13px;
 color: black; /* couleur du texte */
 font-family: 'Domine', serif;
 transition-duration: 0.9s; }
          
.gif{
 width: 500px;
 height: 250px;
 filter: brightness(1.3);
 -webkit-filter: brightness(1.3);
 transition-duration: 1s;
 background-image: url('http://www.zupimages.net/up/17/02/0ylx.png'); } /* lien de l'image */
            
.credits{
 width: 500px;
 border-radius: 5px;
 padding: 0 10px 0 10px;
 margin: 0px 10px 10px 10px;
 text-align: center;
 font-size: 8px;
 text-transform: uppercase;
 color: LightCoral;
 letter-spacing: 0px;
 font-family: 'Roboto', sans-serif;
 text-shadow: 0px 0px 1px thistle;}
            
.titre{
 font-family: 'Great Vibes', cursive;
 font-size: 28px;
 color: LightCoral; /* couleur des titres des box */
 transition-duration: 0.5s;
 margin-bottom: -35px;
 margin-left: 25px;
 text-align: left; }
            
.titre:hover {
 letter-spacing: 3px; }
            
.titre2{
 font-family: 'Great Vibes', cursive;
 font-size: 28px;
 color: LightCoral; /* couleur des titres des box */
 transition-duration: 0.5s;
 margin-bottom: -25px;
 margin-right: 25px;
 text-align: right; }
            
.titre2:hover {
 letter-spacing: 3px; }
  
#haut{
 width: 500px;
 height: auto;
 background-color: LightSteelBlue; /* couleur du haut de l'océan */
 text-align: center;
 font-size: 22px;
 font-family: 'Neucha', cursive;
 font-variant: normal;
 color: LightCoral; /* couleur du texte du haut de l'océan */
 letter-spacing: 0px;
 text-shadow: 0px 0px 1px hotpink;
 transition: 1s ease;
}
  
#soustitre{
 width: 500px;
 height: auto;
 margin-right: auto;
 margin-left: auto;
 margin-top: -10px;
 padding-bottom: -25px;
 text-align: center;
 font-size: 12px;
 font-family: 'Roboto', sans-serif;
 font-variant: small-caps;
 color: LavenderBlush; /* couleur du sous-titre en haut de l'océan */
 letter-spacing: 1px;
}
 
::-webkit-scrollbar {  
  height: 6px;
  width: 6px;
  background-color: LightPink; /* couleur de fond de la barre de défilement */
}
 
html > ::-webkit-scrollbar {
  width: 6px;
}
 
::-webkit-scrollbar-thumb {
  background: LightCoral; /* couleur de la barre de défilement (celle qui se déplace) */
  border-radius: 0px;  /* arrondissement de la barre de défilement */
}
 
::-webkit-scrollbar-track-piece {
  background-color: lightpink; /* couleur de fond de la barre de défilement */
}
  
</style>
 <div id="ocean">
        
 <div id="haut">
  Humeur du jour:
                   <br />                                      
 <div id="soustitre">
  Une petite citation trop cool
 </div>
                  
 <div class="gif">
                 </div>
                  
 </div>
                                              
 <div class="bande">
            [Pseudo]          
 </div>

          <div class="titre">
                   Quelques infos
          </div>
          
         <div class="titre2">
                    Foire aux questions
          </div>
          
 <div class="paragraphe">
                  <strong>Nom:</strong>
                  <br />
                  <strong>Âge:</strong>
                  <br />
                  <strong>Loisirs:</strong>
                  <br />
                  <strong>Lieu de résidence:</strong>
                  <br />
                  <strong>J'aime:</strong>
                  <br />
                  <strong>Je n'aime pas:</strong>
                  <br /><br />
                  (Ou votre texte personnel) Itaque tum Scaevola cum in eam ipsam mentionem incidisset, exposuit nobis sermonem Laeli de amicitia habitum ab illo secum et cum altero genero, C. Fannio Marci filio, paucis diebus post mortem Africani. Eius disputationis sententias memoriae mandavi, quas hoc libro exposui arbitratu meo; quasi enim ipsos induxi loquentes, ne 'inquam' et 'inquit' saepius interponeretur, atque ut tamquam a praesentibus coram haberi sermo videretur.

           </div>
          
 <div class="paragraphesuiv">
  <strong>Question?</strong> Réponse
                  <br/>
                  <strong>Question?</strong> Réponse
                  <br />
                  <strong>Question?</strong> Réponse
           </div>
          
          <div class="titre2">
                    Quoi de neuf?
          </div>
          
           <div class="paragraphe2">
                          Itaque tum Scaevola cum in eam ipsam mentionem incidisset, exposuit nobis sermonem Laeli de amicitia habitum ab illo secum et cum altero genero, C. Fannio Marci filio, paucis diebus post mortem Africani. Eius disputationis sententias memoriae mandavi, quas hoc libro exposui arbitratu meo; quasi enim ipsos induxi loquentes, ne 'inquam' et 'inquit' saepius interponeretur, atque ut tamquam a praesentibus coram haberi sermo videretur.

  <p>
                          Nam sole orto magnitudine angusti gurgitis sed profundi a transitu arcebantur et dum piscatorios quaerunt lenunculos vel innare temere contextis cratibus parant, effusae legiones, quae hiemabant tunc apud Siden, isdem impetu occurrere veloci. et signis prope ripam locatis ad manus comminus conserendas denseta scutorum conpage semet scientissime praestruebant, ausos quoque aliquos fiducia nandi vel cavatis arborum truncis amnem permeare latenter facillime trucidarunt.
  </p>
                          
  Post hoc impie perpetratum quod in aliis quoque iam timebatur, tamquam licentia crudelitati indulta per suspicionum nebulas aestimati quidam noxii damnabantur. quorum pars necati, alii puniti bonorum multatione actique laribus suis extorres nullo sibi relicto praeter querelas et lacrimas, stipe conlaticia victitabant, et civili iustoque imperio ad voluntatem converso cruentam, claudebantur opulentae domus et clarae.
           </div>
          
          <div class="titre2">
                    Historique
          </div>
          
           <div class="paragraphe3">
                          Itaque tum Scaevola cum in eam ipsam mentionem incidisset, exposuit nobis sermonem Laeli de amicitia habitum ab illo secum et cum altero genero, C. Fannio Marci filio, paucis diebus post mortem Africani. Eius disputationis sententias memoriae mandavi, quas hoc libro exposui arbitratu meo; quasi enim ipsos induxi loquentes, ne 'inquam' et 'inquit' saepius interponeretur, atque ut tamquam a praesentibus coram haberi sermo videretur.
           </div>
                                    
 <div class="credits">
             Codage par Hecate pour Ocean Home            
 </div>
                  <script type="text/javascript">
    </script>    
 </div>
</div>

Et l'iframe:
Code:
<iframe src="LIEN DE LA PAGE HTML" allowTransparency="true" width="500" height="950" frameborder="0" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>

Voilà! :qoobee6:

Edit du 11 janvier: j'ai changé les couleurs de fond des box et de leur hover, je trouvais ça plus joli =D


Dernière édition par Hecate le Mer 11 Jan - 11:48, édité 1 fois
Revenir en haut Aller en bas
https://www.wattpad.com/user/wintersoldxer
Myria
Léviathan des Nymphes
Léviathan des Nymphes
Myria
Messages : 4603
Date d'inscription : 04/06/2016
Age : 23

Libre Service - Océan Empty
Message Sujet: Re: Libre Service - Océan   Libre Service - Océan EmptyMar 10 Jan - 20:59

Merci pour le partage @Hecate :dino20:
Revenir en haut Aller en bas
Frisk
Baleine de Nemo
Baleine de Nemo
Frisk
Messages : 2356
Date d'inscription : 02/01/2017
Age : 21

Libre Service - Océan Empty
Message Sujet: Re: Libre Service - Océan   Libre Service - Océan EmptyMar 10 Jan - 21:08

Mais de rien, ça me fait plaisir ^^
Revenir en haut Aller en bas
https://www.wattpad.com/user/wintersoldxer
Contenu sponsorisé



Libre Service - Océan Empty
Message Sujet: Re: Libre Service - Océan   Libre Service - Océan Empty

Revenir en haut Aller en bas
 
Libre Service - Océan
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Libre-service - Océan bleu
» Libre Service - Océan Violet
» [libre service] juh
» Libre service RP
» Fiche océan marbre black & white (réponse océan/réponse RP)

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Ocean Home :: Our Homes :: Vos talents artistiques :: Codage :: Libre Service-