1
Favori
HTML
<head>
<title>Effet Ruban en CSS</title>
<meta charset="UTF-8" />
<style>
/***** Reset *****/
html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, font, img, ul, li{
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
ol, ul{
list-style: none;
}
/******** End Reset **********/
/****** HTML5 *********/
section, aside, nav, footer{
display: block;
}
body{
background: #f1f1f1;
font-family: Georgia, Verdana, "Lucida Sans Unicode", sans-serif;
font-size: 12px;
color: #999;
}
h2{
font-style: italic;
font-weight: normal;
line-height: 1.2em;
}
#wrapper{
margin: 50px auto 0px auto; /*Centré*/
width: 400px;
}
.container{
position: relative;
margin: 0px auto;
width: 350px;
background: #fff;
border-radius: 10px;
box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
z-index: 90;
}
.container2{
position: relative;
margin: 0px auto;
width: 350px;
border-radius: 10px;
z-index: 90;
}
.rectangle{
background: #6d6e72;
height: 50px;
width: 380px;
position: relative;
left: -15px;
top: 30px;
float: left;
box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
z-index: 100;
}
.rectangle h2{
font-size: 30px;
color: #fff;
padding-top: 6px;
text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
text-align: center;
}
.left_tri{
border-color: transparent #333 transparent transparent;
border-style: solid;
border-width: 15px;
height: 0px;
width: 0px;
position: relative;
left: -30px;
top: 65px;
z-index: -1;
}
.right_tri{
border-color: transparent transparent transparent #333;
border-style: solid;
border-width: 15px;
height: 0px;
width: 0px;
position: relative;
left: 350px;
top: 35px;
z-index: -1;
}
.content{
padding: 60px 25px 35px 25px;
}
.content h2{
font-size: 20px;
}
.content p{
padding-top: 10px;
font-size: 14px;
line-height: 22px;
}
.content p a{
color: #c4591e;
text-decoration: none;
}
.content p a:hover{
text-decoration: underline;
}
</style>
<body>
<section id="wrapper">
<div class="container">
<div class="rectangle">
<h2>Généralités</h2>
</div>
<div class="left_tri"></div>
<div class="right_tri"></div>
</div>
<div class="content">
<p><ul>
<li>Prénom :</li>
<li>Age :</li>
<li>Ville :</li>
<li>Profession :</li>
<li>Passions :</li>
<li>Qualités :</li>
<li>Défauts :</li>
</ul>
</p>
</div>
<div class="container2">
<div class="rectangle">
<h2>Personnage</h2>
</div>
<div class="left_tri"></div>
<div class="right_tri"></div>
</div>
<div class="content">
<p><ul>
<li>Nom :</li>
<li>Age :</li>
<li>Description physique :</li>
<li>Etat mental :</li>
<li>Ville de naissance :</li>
<li>Pouvoir héréditaire :</li>
<li>Biographie :</li>
</ul>
</p>
</div>
</section>
</body>
</head>
Commentaires
VIP depuis le 14/03/2020
Vous devez être inscrit et connecté pour pouvoir poster un commentaire.
Une personnalisation est possible par le biais de ma boutique.