Welcome

Halloween Présentations & Prédéfinis

Post-apocalyptique

Halloween, LS codage Forumactif Fiches & Messages Présentations & Prédéfinis Post-apocayptique

Toutes versions

Optimisé Les images se redimensionnent automatiquement dans les formes, les pourcentages sont évidemment modifiables par soi-même. Les illustrations de compétences sont en 20*20px.
Réalisé pour un concours de codage sur Ohana'rt.

Retour

Codage post-apocalyptique présentation Halloween Forumactif

CSS

/************************************************** PRESENTATION POST APOCALYPTIQUE **************************************************/

/* AJOUT DE LA POLICE STREAMSTER */
@font-face { 
      font-family: 'Streamster';
      src: url('http://ls-halloween.fr/Streamster.ttf');
      font-weight: normal;
      font-style: normal;
}

/* GENERALITES */
#pres_apo {
    color: #262525;
    font-family: 'Lato', sans-serif;
    background: #ececec;
    width: 500px;
    margin: auto;
    font-size: 12px;
    line-height: 2;
}

#pres_apo p {
    font-family: 'Lato', sans-serif;
}

/* HEADER */
#pres_apo header {
    background: url(https://i.imgur.com/o8hg2Ty.png);
    height: 261px;
    overflow: hidden;
    text-align: center;
    padding: 9% 0 0;
    box-sizing: border-box;
}

#pres_apo header h1 {
    color: #f7f8fc;
    font-family: 'Oswald', sans-serif;
    font-size: 48px;
    text-transform: uppercase;
    font-weight: 300;
    margin: 0;
}

#pres_apo header h1 span {
    font-weight: 600;
}

#pres_apo header h2 {
    color: #f7f8fc;
    font-family: 'Oswald', sans-serif;
    font-size: 24px;
    text-transform: uppercase;
    font-weight: 200;
    letter-spacing: 15px;
    margin: -5% 0 0;
}

/* INFORMATIONS PRINCIPALES */
.content_infos {
    background: url(https://i.imgur.com/HqABEnD.png) no-repeat center, #1f1f1f;
    height: 400px;
    padding: 25% 0 0;
    box-sizing: border-box;
}

#pres_apo .trans {
    background: rgba(0,0,0,.4);
    height: 170px;
    color: #ececec;
    font-family: 'Lato', sans-serif;
    text-transform: uppercase;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

#pres_apo .content_infos .trans .trans_bloc span::before {
    color: #ac0d0d;
    content: "[";
    font-weight: bold;
    padding: 0 15% 0 0;
}

#pres_apo .content_infos .trans .trans_bloc span::after {
    color: #ac0d0d;
    content: "]";
    font-weight: bold;
    padding: 0 0 0 15%;
}

img.pres_avatar {
    -webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
    clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
    width: 170px;
    height: 170px;
    object-fit: cover;
}

img.symbole {
    display: block !important;
    margin: auto;
}

/* MENTAL */
#pres_apo .mental {
    display: flex;    
    align-items: center;
}

#pres_apo .mental h3, #pres_apo .histoire h3, #pres_apo .competences h3 {
    color: #1f1f1f;
    font-family: 'Oswald', sans-serif;
    font-size: 30px;
    text-transform: uppercase;
    font-weight: 300;
    margin: 0;
    text-align: center;
}

#pres_apo .mental h3 span, #pres_apo .histoire h3 span, #pres_apo .competences h3 span {
    font-weight: 600;
}

#pres_apo .mental h4 {
    font-family: "Streamster", sans-serif;
    font-size: 30px;
    font-weight: normal;
    margin: -10% 0 0;
    text-align: center;
}

#pres_apo .mental p {
    width: 90%;
    margin: auto;
    height: 260px;
    overflow: auto;
    text-align: justify;
    box-sizing: border-box;
    padding: 0 5% 0 0;
}

#pres_apo .mental div:first-child {
    width: 277px;
}

#pres_apo .mental div:nth-child(2) {
    background: url(https://i.imgur.com/y4Hvd2f.png);
    height: 506px;
    padding: 15% 0 0;
    box-sizing: border-box;
    width: 233px;
    text-align: right;
}

/* CITATION */
#pres_apo .citation {
    text-align: center;
}

#pres_apo .citation h3 {
    color: #535353;
    text-transform: uppercase;
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-size: 30px;
    margin: 0;
    font-weight: 300;
    text-shadow: 1px 1px #464444;
}

#pres_apo .citation h3::before {
    content: "[";
    color: #000;
    padding: 0 3% 0 0;
    text-shadow: none;
}

#pres_apo .citation h3::after {
    content: "]";
    color: #000;
    padding: 0 0 0 3%;
    text-shadow: none;
}

/* HISTOIRE */
#pres_apo .histoire {
    margin: 4% 0 0;
}

#pres_apo .histoire h3 {
    margin: 0 0 0 30%;
}

#pres_apo .histoire p {
    width: 85%;
    margin: auto;
    text-align: justify;
}

#pres_apo .histoire p img {
    -webkit-clip-path: polygon(37% 0%, 56% 0%, 56% 40%, 66% 40%, 66% 56%, 56% 56%, 56% 79%, 37% 79%, 37% 57%, 11% 57%, 11% 40%);
    clip-path: polygon(37% 0%, 56% 0%, 56% 40%, 66% 40%, 66% 56%, 56% 56%, 56% 79%, 37% 79%, 37% 57%, 11% 57%, 11% 40%);
    width: 200px;
    float: left;
    height: 250px;
    object-fit: cover;
    margin: 3% -8% -10% 0;
}

/* COMPETENCES */
#pres_apo .competences {
    background: url(https://i.imgur.com/yOKZyRw.png);
    width: 100%;
    height: 673px;
    box-sizing: border-box;
    color: #ececec;
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    margin: 0;
}

#pres_apo .competences h3 {
    text-align: left;
    margin: 0 0 0 10%;
    padding: 10% 0 13% 0;
}

#pres_apo .ligne_abilities {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    width: 90%;
    text-align: center;
    height: 60px;
}

#pres_apo .bloc_abilities {
    width: 80%;
    background: url(https://i.imgur.com/yZdlTRa.png) no-repeat;
}

#pres_apo .ligne_defaut {
    position: relative;
    width: 85%;
    height: 3px;
    background: #ececec;
    box-sizing: border-box;
    border: 1px solid #262625;
    margin: 5.1% 0 0 5%;
}

#pres_apo .intitule_abilities {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2% 0 0;
}

#pres_apo .intitule_abilities img {
    width: 17px;
    height: 17px;
    margin: 0 2% 0 0;
}

#pres_apo .lvl_compet {
    height: 3px;
    background: #ac0d0d;
    position: absolute;
    top: -1px;
    left: -1px;
}

#pres_apo .intitule_abilities h4 span {
    color: #ac0d0d;
}

#pres_apo .intitule_abilities h4 {
    margin: 0;
    text-transform: uppercase;
}

#pres_apo .stat {
    border: 1px solid;
    border-radius: 100px;
    padding: 1.5%;
}

/* FOOTER */
#pres_apo footer {
    background: url(https://i.imgur.com/v9hwlaG.png) no-repeat bottom left;
}

#pres_apo footer .header_footer {
    width: 90%;
    margin: auto;
    display: flex;    
    flex-wrap: wrap;
}

#pres_apo footer .header_footer span {
    font-family: 'Volkhov', serif;
    font-size: 70px;
}

#pres_apo footer .header_footer h3, #pres_apo footer h3 {
    color: #1f1f1f;
    font-family: 'Oswald', sans-serif;
    font-size: 48px;
    text-transform: uppercase;
    font-weight: 300;
    margin: 4% 5% 0 10%;
    text-align: center;
}

#pres_apo footer .header_footer h3 span, #pres_apo footer h3 span {
    font-weight: 600;    
    font-family: 'Oswald', sans-serif;
    font-size: 48px;
}

#pres_apo footer .header_footer h4 {
    font-family: "Streamster", sans-serif;
    font-weight: normal;
    font-size: 48px;
    margin: 5% 0 0;
}

#pres_apo footer p {
    width: 60%;
    text-align: justify;
    margin: 0 0 0 30%;
}

#pres_apo footer h3::before {
    content: "[ ";
}

#pres_apo footer h3::after {
    content: " ]";
}

#pres_apo .credits_hallow {
    text-decoration: none !important;
    text-align: center;
    display: block;
    color: #b3b2b2;
    text-transform: lowercase;
    font-style: italic;
    letter-spacing: -1px;
    font-family: Cambria, sans-serif;
    font-size: 10px;
    padding: 0 0 2%;
}

HTML

--><div id="pres_apo"><!-- DEBUT DU HEADER

--><header><h1>My <span>Name</span></h1><h2>Here</h2></header><!-- FIN HEADER

DEBUT INFORMATIONS PRINCIPALES --><div class="content_infos"><div class="trans"><div class="trans_bloc"><span>Nom</span>
<span>Prénom</span>
<span>Age</span></div><img src="https://i.imgur.com/x39nL8k.png" alt="" class="pres_avatar" /><div class="trans_bloc"><span>Groupe</span>
<span>Métier</span>
<span>Sexualité</span></div></div></div><img src="https://i.imgur.com/gaXEAFH.png" alt="" /><!-- FIN BLOC INFORMATIONS PRINCIPALES

IMAGE SEPARATION --><img src="https://i.imgur.com/vlMuez8.png" alt="" class="symbole" /><!-- FIN SYMBOLE

DEBUT MENTAL --><div class="mental"><div><h3>My <span>Mental</span></h3><h4>boom</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent placerat lectus quis tincidunt tempor. Cras at laoreet risus, quis dictum orci. Curabitur consequat nisi odio, congue tempus nisi dignissim nec. Morbi faucibus ex lectus, ac convallis ipsum cursus sit amet. Sed at libero diam. Donec sed egestas ante. Praesent magna ligula, porttitor in elementum sed, semper non lectus.

Vivamus dictum augue vitae nulla efficitur, ac porta neque maximus. Maecenas quis libero quis lorem porttitor facilisis. Pellentesque ac purus porta, lacinia neque eu, accumsan diam. Nam malesuada erat et eros eleifend condimentum. Ut sollicitudin dui orci, varius laoreet risus facilisis id. Cras volutpat, est vitae facilisis cursus, diam urna fermentum arcu, ac ultricies turpis augue in enim. Quisque eleifend orci sit amet lectus lacinia suscipit.

Curabitur vel nisi sit amet sem pulvinar tristique eget sit amet est. Phasellus nunc metus, cursus vel bibendum non, dignissim quis ante. Mauris ac elit felis. Curabitur tempor quam sit amet dolor ornare luctus. Nulla blandit dui nec enim aliquet blandit sed at justo. Nunc nec mauris feugiat nisl ultricies vehicula. Integer sit amet est eget orci porttitor pellentesque. Duis eu bibendum nisl, varius sodales nibh. Cras in leo vulputate, tincidunt enim ac, ultricies tellus. Mauris cursus, arcu eu eleifend imperdiet, quam nulla dictum dui, id vestibulum dolor ipsum eu mauris. Integer commodo erat id quam mollis, quis tincidunt erat porttitor. Aliquam ultrices odio in turpis fermentum, vel tincidunt orci maximus. Suspendisse tincidunt mattis arcu, a faucibus ipsum imperdiet dapibus. Maecenas elementum malesuada bibendum. Sed vestibulum purus ut lorem faucibus ultrices. Vestibulum tempor, nisl vitae volutpat rhoncus, risus metus hendrerit sapien, eget varius elit magna sed est.</p></div><div><img src="https://i.imgur.com/MCyolm5.png" alt="" class="mental_avatar" /></div></div><!-- FIN MENTAL

DEBUT CITATION --><div class="citation"><img src="https://i.imgur.com/ZlZQgHM.png" alt="" /><h3>Citation qui déchire</h3><img src="https://i.imgur.com/tjCAV4M.png" alt="" /></div><!-- FIN CITATION

DEBUT HISTOIRE --><div class="histoire"><h3>My <span>Story</span></h3><p><img src="https://i.pinimg.com/originals/f0/d3/e6/f0d3e6cbba2954d7bd42a966745f9345.gif" alt="" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a purus ac ipsum aliquet efficitur. Ut quis nisl lacus. Duis fringilla ornare lectus ac mollis. Donec id egestas purus. Nullam ornare augue nisl, in egestas lorem scelerisque vel. Curabitur tincidunt molestie interdum. Sed ultricies hendrerit venenatis. Proin ullamcorper mollis ipsum, eget interdum dolor accumsan eu. Suspendisse nisl nibh, commodo id posuere et, egestas mattis lectus. Phasellus turpis lectus, sollicitudin ac luctus eu, mattis sed ante. Nulla vel tellus risus. Sed tincidunt pharetra dolor, non porttitor diam posuere in. Pellentesque egestas sagittis viverra. Praesent ut nibh non leo vehicula sagittis.

Donec rhoncus elit tellus, eu aliquam lacus sollicitudin ut. Mauris dolor velit, pharetra non pellentesque vitae, dapibus in felis. Suspendisse placerat, metus in aliquet fermentum, lacus libero fermentum lacus, nec ornare felis ex ac magna. Proin id ex eget nisl tempus gravida eu sed risus. Nunc interdum orci ultrices tincidunt tristique. Curabitur tristique sollicitudin leo at efficitur. Vivamus eu porta urna, non malesuada nunc. Ut a nulla euismod, pretium enim eget, sodales nisl. Curabitur libero libero, hendrerit nec velit non, tempus fringilla odio. Aenean posuere et nisl a commodo.

Fusce vel venenatis nisl. Etiam in ipsum in metus mollis varius. Cras eget metus efficitur, tempor eros id, tincidunt sapien. Phasellus non tincidunt magna. Sed eu lectus sagittis, iaculis dui ac, blandit diam. Maecenas pretium euismod nulla, vel consequat tortor placerat vitae. Aenean lacinia vitae est id pellentesque. Curabitur varius ipsum nec aliquam aliquet. Ut at sem id orci malesuada ultrices. Maecenas placerat fringilla nibh tincidunt auctor. Suspendisse ultrices pellentesque elementum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Curabitur hendrerit urna sed massa scelerisque sollicitudin. Suspendisse sed leo placerat, eleifend massa sit amet, tristique nulla. Pellentesque quis nisi justo. Nullam elementum urna at purus pulvinar tincidunt. Pellentesque ornare interdum pretium. Nam ac augue finibus nibh aliquam varius. Nullam viverra mauris non ex dictum ultrices. Curabitur sagittis tristique fringilla.</p></div><!-- FIN HISTOIRE

DEBUT COMPETENCES --><div class="competences"><h3>My <span>abilities</span></h3><div class="ligne_abilities"><div class="bloc_abilities"><div class="ligne_defaut"><div class="lvl_compet" style="width: 20%;"></div></div><div class="intitule_abilities"><img src="https://i.imgur.com/HFgAqAq.png" alt="Shoot" class="symbole_abilities" /><h4>Sho<span>ot</span></h4></div></div><div class="stat">20%</div></div><!-- Fin competence 1

Debut competence 2 --><div class="ligne_abilities"><div class="bloc_abilities"><div class="ligne_defaut"><div class="lvl_compet" style="width: 40%;"></div></div><div class="intitule_abilities"><img src="https://i.imgur.com/9cue8Aa.png" alt="Hunt" class="symbole_abilities" /><h4>Hu<span>nt</span></h4></div></div><div class="stat">40%</div></div><!-- Fin competence 2

Debut competence 3 --><div class="ligne_abilities"><div class="bloc_abilities"><div class="ligne_defaut"><div class="lvl_compet" style="width: 60%;"></div></div><div class="intitule_abilities"><img src="https://i.imgur.com/OzJ2RE8.png" alt="Orientation" class="symbole_abilities" /><h4>Orient<span>ation</span></h4></div></div><div class="stat">60%</div></div><!-- Fin competence 3

Debut competence 4 --><div class="ligne_abilities"><div class="bloc_abilities"><div class="ligne_defaut"><div class="lvl_compet" style="width: 35%;"></div></div><div class="intitule_abilities"><img src="https://i.imgur.com/YknuRKz.png" alt="Endurance" class="symbole_abilities" /><h4>Endur<span>ance</span></h4></div></div><div class="stat">35%</div></div><!-- Fin competence 4

Debut competence 5 --><div class="ligne_abilities"><div class="bloc_abilities"><div class="ligne_defaut"><div class="lvl_compet" style="width: 13%;"></div></div><div class="intitule_abilities"><img src="https://i.imgur.com/n9Davpg.png" alt="Build" class="symbole_abilities" /><h4>Bui<span>ld</span></h4></div></div><div class="stat">13%</div></div><!-- Fin competence 5

Debut competence 6 --><div class="ligne_abilities"><div class="bloc_abilities"><div class="ligne_defaut"><div class="lvl_compet" style="width: 90%;"></div></div><div class="intitule_abilities"><img src="https://i.imgur.com/EZAQa8S.png" alt="Ingenuity" class="symbole_abilities" /><h4>Ingen<span>uity</span></h4></div></div><div class="stat">90%</div></div></div><!-- FIN COMPETENCES

DEBUT FOOTER --><img src="https://i.imgur.com/CvDAcD1.png" alt="" class="symbole" /><footer><div class="header_footer"><span>66</span><h3>Un <span>Truc</span></h3><h4>à dire</h4></div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean in ipsum sed mi rhoncus venenatis. Donec tempus pulvinar ante, vel lacinia velit pretium rutrum. Proin massa odio.</p><h3>The <span>end</span></h3><a href="http://ls-halloween.fr" target="_blank" class="credits_hallow">Halloween</a></footer>

<!-- FIN FICHE

--></div>

POUR MODIFIER UNE COMPETENCE Il faut penser à modifier la valeur du "Width" de la class "lvl_compet" ainsi que les statistiques dans la div "stat", comme dans l'exemple suivant.

#Post-apocalyptique #Présentation #forumactif #codage #libreservice

Halloween