Jawn
# SCRATCHED - Dim 5 Mai - 23:41
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:
<div class="base">
<div class="blokg">
<div class="contexte">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at nisl faucibus, eleifend mauris et, tempus turpis. Vivamus imperdiet odio in augue malesuada tempor. Ut at nunc ante. Nullam malesuada vitae nulla in congue. Aenean mattis accumsan felis in tincidunt. Fusce condimentum risus in elementum feugiat. Maecenas sed porta urna, nec pharetra nunc. Sed ultricies ac ex nec commodo. Cras accumsan lorem eu faucibus euismod. Fusce vestibulum accumsan metus, eu scelerisque ante convallis at. Cras posuere eleifend neque non fringilla. Phasellus tempus mi id orci varius, sed rutrum nisl varius. Praesent pulvinar lacus turpis, nec dictum libero consectetur at. Vestibulum fringilla dapibus velit at bibendum.
Aliquam felis nisl, hendrerit in aliquet convallis, gravida sit amet lorem. Nulla a sem molestie, aliquam purus at, consequat dolor. Fusce mollis vulputate turpis ac fermentum. Curabitur luctus nibh ac suscipit dapibus. Quisque ultrices tincidunt ante et maximus. Suspendisse eu fermentum lorem. Integer sed massa vitae augue lobortis bibendum. Nulla vitae condimentum odio. In in purus sed purus tristique dapibus iaculis et nulla. Aenean fringilla quam non urna elementum, nec tempus nisi lobortis. Vestibulum non suscipit purus. Aliquam consequat in mauris faucibus fermentum. Donec pharetra fermentum eros non vulputate.
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi maximus vel mi vitae accumsan. Aenean congue purus vel eros finibus, tincidunt lacinia quam vestibulum. Nullam et pharetra leo, eget viverra elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer sed ipsum lacinia, consequat massa a, pretium magna. Ut commodo vel felis id interdum. Aliquam a porttitor augue, vitae dapibus dolor. Praesent vitae ipsum tellus. Suspendisse sodales, felis maximus condimentum bibendum, augue felis vulputate elit, eget venenatis arcu magna et tellus. Vivamus pharetra laoreet est, ac auctor dolor laoreet eget. Donec fermentum, nisl ut lobortis porttitor, lacus ipsum vestibulum eros, quis aliquet metus quam eget eros. Phasellus pellentesque auctor dolor in commodo. Nam id mauris commodo, lacinia libero quis, pretium lorem.
</div></div>
<div class="blokd">
<div class="alive" style="background-image:url('http://via.placeholder.com/350x60"/><div class="feeling">
<div class="triangle"><div class="imgcont"><a href="////"><img src="https://imgur.com/XJMaPy0.png"></a></div>
<div class="imgcont"><a href="////"><img src="https://imgur.com/a7s4Z2y.png"></a></div>
<div class="namestaff">Nom Prénom </br><p>fonction</p></div></div></div></div>
<div class="alive" style="background-image:url('http://via.placeholder.com/350x60"/><div class="feeling">
<div class="triangle"><div class="imgcont"><a href="////"><img src="https://imgur.com/XJMaPy0.png"></a></div>
<div class="imgcont"><a href="////"><img src="https://imgur.com/a7s4Z2y.png"></a></div>
<div class="namestaff">Nom Prénom </br><p>fonction</p></div></div></div></div>
<div class="alive" style="background-image:url('http://via.placeholder.com/350x60"/><div class="feeling">
<div class="triangle"><div class="imgcont"><a href="////"><img src="https://imgur.com/XJMaPy0.png"></a></div>
<div class="imgcont"><a href="////"><img src="https://imgur.com/a7s4Z2y.png"></a></div>
<div class="namestaff">Nom Prénom </br><p>fonction</p></div></div></div></div>
</div>
<div class="blokg2">
<div style="text-align:center;color:#693127;letter-spacing:6px;text-transform:uppercase;text-align:center;font-size:13px;font-family: 'IBM Plex Mono';">➼ Nos meilleurs bataillons</div>
<div class="topparto"><a href="/"><img src="http://via.placeholder.com/50x50"></a></div>
<div class="topparto"><a href="/"><img src="http://via.placeholder.com/50x50"></a></div>
<div class="topparto"><a href="/"><img src="http://via.placeholder.com/50x50"></a></div>
<div class="topparto"><a href="/"><img src="http://via.placeholder.com/50x50"></a></div>
<div class="topparto"><a href="/"><img src="http://via.placeholder.com/50x50"></a></div>
<div class="topparto"><a href="/"><img src="http://via.placeholder.com/50x50"></a></div>
<div class="topparto"><a href="/"><img src="http://via.placeholder.com/50x50"></a></div>
<div class="topparto"><a href="/"><img src="http://via.placeholder.com/50x50"></a></div>
<div class="topparto"><a href="/"><img src="http://via.placeholder.com/50x50"></a></div>
<div class="topparto"><a href="/"><img src="http://via.placeholder.com/50x50"></a></div>
<div class="topparto"><a href="/"><img src="http://via.placeholder.com/50x50"></a></div>
<div class="topparto"><a href="/"><img src="http://via.placeholder.com/50x50"></a></div>
<div class="topparto"><a href="/"><img src="http://via.placeholder.com/50x50"></a></div>
<div class="topparto"><a href="/"><img src="http://via.placeholder.com/50x50"></a></div>
<div class="topparto"><a href="/"><img src="http://via.placeholder.com/50x50"></a></div>
<div class="topparto"><a href="/"><img src="http://via.placeholder.com/50x50"></a></div>
<div class="topparto"><a href="/"><img src="http://via.placeholder.com/50x50"></a></div>
<div class="topparto"><a href="/"><img src="http://via.placeholder.com/50x50"></a></div>
</div>
<div class="blokd2">
<div class="newsy"><img src="https://imgur.com/u6CRBgv.png"/> Breaking news
<div style="padding:10px;background:#693127;text-align:left;color:#eaeaea;width:50px;
font-size:10px;font-family: 'IBM Plex Mono';letter-spacing:0px;">xx.XX.18</div><div style="text-align:left;font-size:12px;font-family:calibri;text-transform:none;border-bottom:solid 1px #d6c4af;margin:2px;letter-spacing:0px;">Lorem ip
sum dolor sit amet, consectetur adipiscing elit. Aenean at nisl faucibus, eleifendLorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at nisl faucibus, eleifend</div>
<div style="padding:10px;background:#693127;text-align:left;color:#eaeaea;width:50px;
font-size:10px;font-family: 'IBM Plex Mono';letter-spacing:0px;">xx.XX.18</div><div style="text-align:left;font-size:12px;font-family:calibri;text-transform:none;border-bottom:solid 1px #d6c4af;margin:2px;letter-spacing:0px;">Lorem ip
sum dolor sit amet, consectetur adipiscing elit. Aenean at nisl faucibus, eleifendLorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at nisl faucibus, eleifend</div>
<div style="padding:10px;background:#693127;text-align:left;color:#eaeaea;width:50px;
font-size:10px;font-family: 'IBM Plex Mono';letter-spacing:0px;">xx.XX.18</div><div style="text-align:left;font-size:12px;font-family:calibri;text-transform:none;border-bottom:solid 1px #d6c4af;margin:2px;letter-spacing:0px;">
Lorem ip
sum dolor sit amet, consectetur adipiscing elit. Aenean at nisl faucibus, eleifendLorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at nisl faucibus, eleifend</div>
</div></div>
<div style="width:1000px;margin-top:20px;"><img src="https://imgur.com/MgpEFjR.png"/></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:
.imgcont {
position:relative;
right:50px;
}
.alive {
width: 350px;
height:60px;
border:10px solid #e2ded9;
overflow:hidden;
display:block;
margin:8px;
position:relative;
top:15px;
}
.feeling {
width: 320px;
height: 30px;
color: #000;
font-family: calibri;
font-size: 10px;
background: #fff;
padding: 5px;
position:relative;
left:10px;
top:10px;
display: block;
text-align: center;
margin-left: -370px;
transition-duration: 1s;
transition-timing-function: ease;
}
.feeling {
background: url(https://imgur.com/S7BoTJs.png);
background-repeat:no-repeat;
height: 56px;
margin-left: -250px;
position:relative;
left:0;
top:0;
text-align: center;
transition: all 1000ms ease;
width: 340px;
}
.namestaff{
text-transform:uppercase;
margin-top:5px;
margin-left:200px;
color:#eaeaea;
opacity:0;
transition:linear 1s;
text-align:center;
position:relative;
top:-60px;
}
.namestaff p{
font-weight:700;
font-family: 'IBM Plex Mono';
color:green;
font-size:12px;
}
.alive:hover .feeling {
margin-left: 0px;
transition-duration: 1s;
transition-timing-function: ease;
background-color:rgba(0, 0, 0, 0.6);
}
.feeling:hover .namestaff {
transition:linear 1s;
opacity:1;
}
.base {
margin:0 auto;
height:850px;
width:1000px;
background:#d6c4af;
}
#fondbann img{
width:100%;
height:750px;
}
#fondbann h1{
position:relative;
text-align:center;
top:-500px;
transition:linear 1s;
padding:50px;
border:solid 5px #eaeaea;
width:400px;
height:50px;
margin:0 auto;
color:#eaeaea;
text-transform:uppercase;
font-family:Dosis;
letter-spacing:6px;
transition:linear 1s;
box-shadow:1px 1px 18px 1px #454545;
}
#fondbann h1:before {
content:"L'attaque des titans";
text-shadow:5px 5px 1px #2f1b0f;
transition:linear 1s;
}
#fondbann h1:hover:before {
content:'進撃の巨人';
text-shadow:5px 5px 2px #2f1b0f;
transition:linear 1s;
}
.blokg {
width:600px;
height:300px;
vertical-align:top;
display:inline-block;
}
.blokd {
width:390px;
height:300px;
display:inline-block;
vertical-align:top;
}
.contexte {
background:#e2ded9;
padding:10px;
font-family:calibri;
font-size:12px;
width:550px;
margin:0 auto;
height:250px;
position:relative;
top:15px;
color:#454545;
text-align:justify;
overflow:auto;
line-height:15px;
}
.contexte::-webkit-scrollbar {
width: 1px;
background: #eaeaea;
}
.contexte::-webkit-scrollbar {
width: 4px;
}
.contexte::-webkit-scrollbar-thumb {
background-color: #693127;
}
.contexte::-webkit-scrollbar-track {
border: 4px solid #eaeaea;
}
.contexte::first-letter {
font-size:20px;
font-weight:700;
font-family: 'IBM Plex Mono';
color:#693127;
}
.blokg2 {
margin-top:10px;
width:500px;
height:300px;
display:inline-block;
vertical-align:top;
}
.blokd2 {
margin-top:10px;
width:490px;
height:300px;
display:inline-block;
vertical-align:top;
}
.newsy {
width:410px;
margin:10px;
padding:20px;
height:220px;
background:#eaeaea;
border:solid 10px #e2ded9;
color:#693127;
text-transform:uppercase;
text-align:center;
font-size:13px;
font-family: 'IBM Plex Mono';
letter-spacing:6px;
overflow:auto;
}
.news1 {
background:blue;
width:400px;
height:10px;
height:70px;
position:relative;
text-align:left;
font-family:calibri;
font-size:12px;
color:#eaeaea;
}
.topparto {
display:inline-block;
position:relative;
left:30px;
margin:5px;
border:solid 5px #e2ded9;
top:50px;
}
.imgcont {
display:inline-block;
position:relative;
top:-5px;
left:-90px;
margin:15px;
}
.imgcont img {
width:30px;
}
.newsy::-webkit-scrollbar {
width: 1px;
background: #eaeaea;
}
.newsy::-webkit-scrollbar {
width: 4px;
}
.newsy::-webkit-scrollbar-thumb {
background-color: #693127;
}
.newsy::-webkit-scrollbar-track {
border: 4px solid #eaeaea;
}
Pour rajouter la police d'écriture, rendez-vous dans Panneau d'administration > Affichage > Templates > Général > Overall_header après la balise {CSS} :
- Code:
<link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono" rel="stylesheet">
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum|
|
|