epsilon
forum de libre service de codage,
possibilité de commander des designs,
aucune inscription
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Le Deal du moment : -50%
Nike Sportswear Club Fleece – Sweat à ...
Voir le deal
29.97 €

Jawn
Jawn
The relations between us in those latter days were peculiar.
The relations between us in those latter days were peculiar.
PAGE D'ACCUEIL CLAIRE - Bleu - réel B0XLKKc

Tout d'abord, nous allons commencer par installer le HTML. Allez dans Panneau d'administration > Affichage > Page d'accueil > Généralités, puis copiez collez le code suivant :

Code:
<link href="https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap" rel="stylesheet"/><div class="grey_pa"> <div class="grey_pa_top"> <div class="grey_pa_name">Forum</div><div class="grey_pa_icon_gr"><span class="th th-bird-cage-o"></span></div><div class="grey_pa_adjectif"> <li><span class="th th-chat-bubble"></span> <b>NOM ADJECTIF :</b> Adjectif ici.</li><li><span class="th th-chat-bubble"></span> <b>NOM ADJECTIF :</b> Adjectif descriptif un peu plus long ici.</li><li><span class="th th-chat-bubble"></span> <b>NOM ADJECTIF :</b> Adjectif descriptif un peu plus long ici pour que ça passe à la ligne aller hop hop.</li></div><div class="grey_pa_adjectif"> <li><span class="th th-chat-bubble"></span> <b>NOM ADJECTIF :</b> Adjectif ici.</li><li><span class="th th-chat-bubble"></span> <b>NOM ADJECTIF :</b> Adjectif descriptif un peu plus long ici.</li><li><span class="th th-chat-bubble"></span> <b>NOM ADJECTIF :</b> Adjectif descriptif un peu plus long ici pour que ça passe à la ligne aller hop hop.</li></div><div class="grey_pa_right_ic"><img src="https://imgur.com/UzksTYL.png"/></div></div><div class="grey_pa_bottom"> <div class="grey_pa_bottom_left"> <div class="grey_pa_ong_staff"> <div class="grey_pa_ong_icon"><span class="th th-z-cancer"></span></div><div class="grey_pa_ong_name"> <span>Nom & P.</span><br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div></div><div class="grey_pa_ong_staff"> <div class="grey_pa_ong_icon"><span class="th th-z-virgo"></span></div><div class="grey_pa_ong_name"> <span>Nom & P.</span><br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div></div></div><div class="grey_pa_bottom_middle"> <div class="grey_pa_img"><img src="https://imgur.com/3YjUYhT.png"/></div></div><div class="grey_pa_bottom_right"> <div class="grey_pa_bo_ri_txt"> <div class="gray_pa_decal"></div><b>Bienvenue{USERNAME}.</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sollicitudin at ante sed rhoncus. Cras aliquam posuere augue, sed elementum risus mattis et. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse feugiat id orci eget tincidunt. Nunc facilisis tincidunt orci, eget dignissim nulla congue ac. Duis dignissim massa non tellus rutrum ullamcorper. Aenean nisi eros, accumsan at magna fringilla, varius euismod mi. Maecenas odio est, aliquet et diam sed, scelerisque pulvinar velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer ac sollicitudin massa. Quisque ex lacus, feugiat at condimentum eget, tincidunt et risus. Mauris suscipit tristique ligula, sit amet vulputate lectus feugiat sollicitudin. Nam quis velit eget turpis lobortis sagittis. Donec at bibendum nisl, et congue justo. Nunc congue dui ac libero pretium, et dignissim velit venenatis. Proin nunc lorem, pulvinar eget diam a, rutrum tincidunt sem. Mauris fermentum leo vel augue posuere mollis. In neque justo, mollis vel elementum non, rhoncus vitae massa. Mauris et placerat nulla. Duis at lacinia libero. Aenean vitae orci magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sollicitudin at ante sed rhoncus. Cras aliquam posuere augue, sed elementum risus mattis et. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse feugiat id orci eget tincidunt. Nunc facilisis tincidunt orci, eget dignissim nulla congue ac. Duis dignissim massa non tellus rutrum ullamcorper. Aenean nisi eros, accumsan at magna fringilla, varius euismod mi. Maecenas odio est, aliquet et diam sed, scelerisque pulvinar velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer ac sollicitudin massa. Quisque ex lacus, feugiat at condimentum eget, tincidunt et risus. Mauris suscipit tristique ligula, sit amet vulputate lectus feugiat sollicitudin. Nam quis velit eget turpis lobortis sagittis. Donec at bibendum nisl, et congue justo. Nunc congue dui ac libero pretium, et dignissim velit venenatis. Proin nunc lorem, pulvinar eget diam a, rutrum tincidunt sem. Mauris fermentum leo vel augue posuere mollis. In neque justo, mollis vel elementum non, rhoncus vitae massa. Mauris et placerat nulla. Duis at lacinia libero. Aenean vitae orci magna. </div><div class="grey_pa_ong_bottom"> <div class="grey_pa_txt_txt"><b>INFORMATION :</b><br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div><div class="grey_pa_txt_icon"><span class="th th-meteorite"></span></div></div></div><div class="grey_pa_cre"><a target="_blank" href="https://somuchgravity.forumsrpg.com/">made by :copyright: epsilon</a></div></div></div>

Ensuite, il faut rajouter le CSS. Pour cela, allez dans Panneau d'administration > Affichage > Images et couleurs > Couleurs > Feuille de style CSS puis copiez collez le code suivant :

Code:
<style>@font-face{font-family: "kiona"; src: url("https://dl.dropbox.com/s/9eky6ml4wqyragu/kiona-regular-webfont.woff2?dl=0") format("woff2"), url("https://dl.dropbox.com/s/o4omys8coh1345m/kiona-regular-webfont.woff?dl=0") format("woff"); font-weight: normal; font-style: normal;}.grey_pa{width: 1000px; padding: 20px; margin: 0 auto; background: #f4f0f6;}.grey_pa_top{padding: 20px 0px 0px 0px; width: 1000px; margin: 0px -20px 0px -20px; border-bottom: solid 2px #ad98c8; display: flex; flex-wrap: wrap; justify-content: space-evenly;}.grey_pa_name{color: #ad98c8; font: 50px kiona; width: 200px;}.grey_pa_icon_gr{width: 80px;}.grey_pa_icon_gr span{background: linear-gradient(to top, #ad98c8 0%, #fbc2eb 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 50px;}.grey_pa_adjectif{width: 250px; list-style: none; text-align: justify; font: 10px Newsreader; color: #575757;}.grey_pa_adjectif li span{color: #ad98c8 !important;}.grey_pa_right_ic{width: 100px; margin: -20px 0px 15px 0px; border: solid 1px grey; padding: 5px;}.grey_pa_right_ic img{width: 100%;}.grey_pa_bottom{display: flex; flex-wrap: wrap; justify-content: space-evenly; width: 100%; padding-top: 20px; position: relative; z-index: 9;}.grey_pa_bottom_left{width: 200px;}.grey_pa_bottom_left:before{content: "\ec0a"; font-family: HoneyBee; color: #ccc; z-index: -1; position: absolute; font-size: 200px; margin: 150px 0px 0px 0px; opacity: 0.2;}.grey_pa_ong_staff{display: flex; flex-wrap: wrap; justify-content: space-evenly; text-align: justify; background: #fbfbfb; padding: 10px; border-radius: 10px; box-shadow: 0 5px 10px -8px rgba(0, 0, 0, 0.8); color: #575757; margin-bottom: 20px;}.grey_pa_ong_icon{width: 40px;}.grey_pa_ong_icon span{background: linear-gradient(to top, #ad98c8 0%, #fbc2eb 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 30px;}.grey_pa_ong_name{font: 10px Newsreader; width: 140px;}.grey_pa_ong_name span{font-weight: bold;}.grey_pa_bottom_middle{width: 150px;}.grey_pa_img{text-align: center;}.grey_pa_img img{width: 100%;}.grey_pa_bottom_right{width: 500px;}.grey_pa_bo_ri_txt{text-align: justify; font: 11px Newsreader; color: #575757; float: right;}.gray_pa_decal{margin: 0px 0px -40px 14px; width: 200px; height: 120px; float: right;}.grey_pa_ong_bottom{width: 200px; text-align: justify; background: #fbfbfb; padding: 10px; border-radius: 10px; box-shadow: 0 5px 10px -8px rgba(0, 0, 0, 0.8); color: #575757; display: flex; flex-wrap: wrap; justify-content: space-evenly; float: right; margin-top: -342px;}.grey_pa_txt_txt{font: 10px Newsreader; width: 140px; padding-right: 20px;}.grey_pa_txt_icon{width: 30px;}.grey_pa_txt_icon span{background: linear-gradient(to top, #ad98c8 0%, #fbc2eb 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 30px;}.grey_pa_cre{width: 100%; text-align: right;}.grey_pa_cre a{background: linear-gradient(to top, #ad98c8 0%, #fbc2eb 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font: 9px Newsreader;}</style>
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum