Oyé oyé très chers farfalins!
Le défi code du jour consistait à réaliser en 35 minutes maximum une fiche de relation (enfin plutôt l'en-tête, je ne demandais pas de coder les liens). Merci à nos chers participants et aux futurs voteurs <3
A vos votes ! Vous avez 15 jours
Participation de Shaneliae
Rendu en image :
Code:
Participation de Nihil
Rendu en image:
code:
Participation de Youp
Le rendu en vrai (effets de survol):
Ex his quidam aeternitati se commendari posse per statuas aestimantes eas ardenter adfectant quasi plus praemii de figmentis aereis sensu carentibus adepturi, quam ex conscientia honeste recteque factorum, easque auro curant inbracteari, quod Acilio Glabrioni delatum est primo, cum consiliis armisque regem superasset Antiochum. quam autem sit pulchrum exigua haec spernentem et minima ad ascensus verae gloriae tendere longos et arduos, ut memorat vates Ascraeus, Censorius Cato monstravit. qui interrogatus quam ob rem inter multos... statuam non haberet malo inquit ambigere bonos quam ob rem id non meruerim, quam quod est gravius cur inpetraverim mussitare.
Ex his quidam aeternitati se commendari posse per statuas aestimantes eas ardenter adfectant quasi plus praemii de figmentis aereis sensu carentibus adepturi, quam ex conscientia honeste recteque factorum, easque auro curant inbracteari, quod Acilio Glabrioni delatum est primo, cum consiliis armisque regem superasset Antiochum. quam autem sit pulchrum exigua haec spernentem et minima ad ascensus verae gloriae tendere longos et arduos, ut memorat vates Ascraeus, Censorius Cato monstravit. qui interrogatus quam ob rem inter multos... statuam non haberet malo inquit ambigere bonos quam ob rem id non meruerim, quam quod est gravius cur inpetraverim mussitare.
Code:
Participation de Elena
Le rendu en vrai:
Code:
Le défi code du jour consistait à réaliser en 35 minutes maximum une fiche de relation (enfin plutôt l'en-tête, je ne demandais pas de coder les liens). Merci à nos chers participants et aux futurs voteurs <3
A vos votes ! Vous avez 15 jours
Participation de Shaneliae
Rendu en image :
Code:
- Code:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i|Sansita:400,400i,700,700i,800,800i,900,900i"
rel="stylesheet">
<title>Creativ'mess# - Vite fait, bien fait !</title>
<style>
.cm {
width: 100%;
background-color: #fafafa;
margin: auto;
font-family: 'Roboto', sans-serif;
font-size: 14px;
color: #0a0a0a;
padding-bottom: 20px;
}
.cm h1 {
background-color: #1E88E5;
color: #fff;
text-align: center;
margin: 0 0 30px;
padding: 10px;
font-family: 'Sansita', sans-serif;
font-weight: 400;
font-size: 32px;
}
.card {
max-width: 650px;
margin: auto;
background-color: #fff;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
padding: 5px 10px;
margin-bottom: 20px;
}
.cm .image {
text-align: center;
}
.cm-first {
width: 670px;
margin: auto;
clear: both;
}
.cm-first:after {
content: "";
clear: both;
display: block;
}
.cm-liens, .cm-search {
width: 300px;
height: 150px;
float: left;
overflow: hidden;
}
.cm-liens {
height: 125px;
margin-right: 30px;
text-align: center;
text-decoration: none;
line-height: 30px;
padding-top: 30px;
}
.cm-liens a {
text-decoration: none !important;
color: #FF9800;
}
.cm h2 {
color: #1E88E5;
font-family: 'Sansita', sans-serif;
font-weight: 400;
font-size: 24px;
margin: 0;
margin-top: 10px;
text-align: center;
}
</style>
</head>
<body>
<div class="cm">
<h1>Prénom P² Nom</h1>
<div class="card image">
<img src="http://lorempixel.com/600/200/people" alt="">
</div>
<div class="cm-first">
<div class="card cm-liens">
<a href="#">Profil</a> - <a href="#">Présentation</a>
<br/>
<a href="#">Liste de RP</a> - <a href="#">Autre lien</a>
<br/>
<a href="#">Me contacter</a>
</div>
<div class="card cm-search">
<h2>Je recherche</h2>
<p>
Des amis, ennemis, Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores assumenda culpa,
delectus et eveniet facilis hic nemo nihil numquam placeat quam.
</p>
</div>
</div>
<div class="card pres">
<h2>Ma vie en résumé</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus consequuntur dolorum exercitationem
expedita fuga laborum sequi suscipit ut voluptas? Ad aspernatur blanditiis, delectus earum eos et libero
quia sed voluptatibus?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, atque commodi culpa deserunt dolores
facere, facilis molestiae porro quae qui recusandae sed sequi sunt temporibus voluptatum. Architecto quos
velit veritatis.</p>
</div>
</div>
</body>
</html>
Participation de Nihil
Rendu en image:
code:
- Code:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<title>Fiche de relation</title>
<link href="https://fonts.googleapis.com/css?family=Poppins:700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lora" rel="stylesheet">
<style>
* { box-sizing: border-box; }
body {
padding: 50px;
}
/* ce qu'il y a aussi est juste du style général pour bien positionner ma fiche y tout y tout */
.fiche-relation {
max-width: 400px;
margin: auto;
background: #000;
background-image: linear-gradient(to bottom, #252946, #181b21);
color: white;
padding: 50px 0;
border-radius: 5px;
text-align: center;
font-family: "Lora", serif;
font-size: 16px;
line-height: 1.6;
position: relative;
overflow: hidden;
box-shadow: 0 20px 10px -20px #252946, 0 30px 30px -30px #181b21;
}
.avatar {
display: inline-block;
width: 180px;
height: 180px;
border-radius: 50%;
overflow: hidden;
border: 5px solid #27a7a7;
margin-bottom: 20px;
}
.avatar img {
width: 100%;
}
.name {
font-family: "Poppins", sans-serif;
font-size: 30px;
margin-bottom: 25px;
}
.name span {
position: relative;
z-index: 0;
}
.name span::after {
content: '';
position: absolute;
z-index: -1;
background: #27a7a7;
left: 0;
bottom: 0;
width: 100%;
height: 40%;
transform: translate3d(8%, -50%,0);
}
.description {
max-width: 80%;
margin: auto;
}
.mes-infos {
margin-top: 45px;
}
.mes-infos a {
color: #27a7a7;
font-family: "Poppins", sans-serif;
text-decoration: none;
}
</style>
</head>
<body>
<div class="fiche-relation">
<div class="avatar">
<img src="http://i.imgur.com/Ra3BYJU.jpg" alt="" />
</div>
<div class="name">
<span>Roxanne</span>
</div>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis quod repellat minus soluta ullam hic excepturi beatae recusandae dicta libero quibusdam.
</div>
<div class="mes-infos">
<a href="">profil</a> ✘ <a href="">contact</a> ✘ <a href="">rp</a>
</div>
</div>
</body>
</html>
Participation de Youp
Le rendu en vrai (effets de survol):
Mysterio Riddle
Info
Ex his quidam aeternitati se commendari posse per statuas aestimantes eas ardenter adfectant quasi plus praemii de figmentis aereis sensu carentibus adepturi, quam ex conscientia honeste recteque factorum, easque auro curant inbracteari, quod Acilio Glabrioni delatum est primo, cum consiliis armisque regem superasset Antiochum. quam autem sit pulchrum exigua haec spernentem et minima ad ascensus verae gloriae tendere longos et arduos, ut memorat vates Ascraeus, Censorius Cato monstravit. qui interrogatus quam ob rem inter multos... statuam non haberet malo inquit ambigere bonos quam ob rem id non meruerim, quam quod est gravius cur inpetraverim mussitare.
Je recherche
Ex his quidam aeternitati se commendari posse per statuas aestimantes eas ardenter adfectant quasi plus praemii de figmentis aereis sensu carentibus adepturi, quam ex conscientia honeste recteque factorum, easque auro curant inbracteari, quod Acilio Glabrioni delatum est primo, cum consiliis armisque regem superasset Antiochum. quam autem sit pulchrum exigua haec spernentem et minima ad ascensus verae gloriae tendere longos et arduos, ut memorat vates Ascraeus, Censorius Cato monstravit. qui interrogatus quam ob rem inter multos... statuam non haberet malo inquit ambigere bonos quam ob rem id non meruerim, quam quod est gravius cur inpetraverim mussitare.
Code:
- Code:
<style type="text/css">.titre{width: 480px;padding:10px;margin:auto;background:#363636;font-family:'anton';font-size:20px;color:#feed01;text-align:center;transition: all ease 0.5s;}.titre:hover{letter-spacing:10px;transition: all ease 0.5s;}.image{background-image: url('http://zupimages.net/up/17/09/sre6.png');width: 500px;height:300px;margin:auto;}.caché{width: 440px;height:240px;padding:20px;margin:auto;background:#feed01;margin-top:-290px;opacity:0;transition: all ease 0.5s;overflow:auto;}.caché:hover{opacity:1;transition: all ease 0.5s;}.conteneur{width:500px;margin:auto;display:flex;}.jesuis{width: 280px;height:280px;padding:10px;background:#363636;color:white;overflow:auto;}.recherche{width: 170px;height:280px;padding:10px;background:#feed01;margin-left:10px;}.recherche a{color:black;font-family:'anton';font-size:22px;text-align:center;}.titrebis{color:#363636;font-family:'anton';font-size:20px;}.titrebisbis{color:#feed01;font-family:'anton';font-size:20px;}</style><link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet"><div class="titre"> Mysterio Riddle</div>
<div class="image"></div><div class="caché"> <div class="titrebis">Info </div>
Ex his quidam aeternitati se commendari posse per statuas aestimantes eas ardenter adfectant quasi plus praemii de figmentis aereis sensu carentibus adepturi, quam ex conscientia honeste recteque factorum, easque auro curant inbracteari, quod Acilio Glabrioni delatum est primo, cum consiliis armisque regem superasset Antiochum. quam autem sit pulchrum exigua haec spernentem et minima ad ascensus verae gloriae tendere longos et arduos, ut memorat vates Ascraeus, Censorius Cato monstravit. qui interrogatus quam ob rem inter multos... statuam non haberet malo inquit ambigere bonos quam ob rem id non meruerim, quam quod est gravius cur inpetraverim mussitare.
</div>
<div class="conteneur"><div class="jesuis"> <div class="titrebisbis">Je recherche</div>
Ex his quidam aeternitati se commendari posse per statuas aestimantes eas ardenter adfectant quasi plus praemii de figmentis aereis sensu carentibus adepturi, quam ex conscientia honeste recteque factorum, easque auro curant inbracteari, quod Acilio Glabrioni delatum est primo, cum consiliis armisque regem superasset Antiochum. quam autem sit pulchrum exigua haec spernentem et minima ad ascensus verae gloriae tendere longos et arduos, ut memorat vates Ascraeus, Censorius Cato monstravit. qui interrogatus quam ob rem inter multos... statuam non haberet malo inquit ambigere bonos quam ob rem id non meruerim, quam quod est gravius cur inpetraverim mussitare.
</div><div class="recherche"> <div class="titrebis">Mes liens</div>
<a href="http://www.never-utopia.com/" target="_blank">fiche</a>
<a href="http://www.never-utopia.com/" target="_blank">profil</a>
<a href="http://www.never-utopia.com/" target="_blank">Contact</a>
<a href="http://www.never-utopia.com/" target="_blank">Rps</a>
<a href="http://www.never-utopia.com/" target="_blank">fiche de lien</a>
</div></div>
Participation de Elena
Le rendu en vrai:
Prénom P. Nom
Code:
- Code:
<link href="https://fonts.googleapis.com/css?family=Aclonica|Akronim|Cormorant+Upright" rel="stylesheet">
<center><div style="width:450px;font-family:Akronim;font-size:40px;color:#006666;text-shadow:1px 1px #009999;border-bottom:1px dotted #009966;padding-bottom:-15px;">Prénom P. Nom</div>
<div align=justify style="width:500px;color:#000000;font-family:Cormorant Upright;font-size:20px;">
<div style="height:120px;width:500px;overflow:hidden;box-shadow:1px 1px 5px #C0C0C0;"><div style="font-family:Aclonica;color:#003399"><center>Wanted</center></div>
<div style="height:35px;width:450px;padding:25px;overflow:auto;">Quis enim aut eum diligat quem metuat, aut eum a quo se metui putet? Coluntur tamen simulatione dumtaxat ad tempus. Quod si forte, ut fit plerumque, ceciderunt, tum intellegitur quam fuerint inopes amicorum. Quod Tarquinium dixisse ferunt, tum exsulantem se intellexisse quos fidos amicos habuisset, quos infidos, cum iam neutris gratiam referre posset.</div>
</div><table style="box-shadow:1px 1px 5px #C0C0C0;width:500px;height:320px;overflow:hidden;"><tr><td style="width:300px;height:320px;overflow:hidden;">
<div style="font-family:Aclonica;color:#003399"><center>Mon Histoire</center></div><div style="width:250px;height:290px;overflow:auto;padding:25px;">Quis enim aut eum diligat quem metuat, aut eum a quo se metui putet? Coluntur tamen simulatione dumtaxat ad tempus. Quod si forte, ut fit plerumque, ceciderunt, tum intellegitur quam fuerint inopes amicorum. Quod Tarquinium dixisse ferunt, tum exsulantem se intellexisse quos fidos amicos habuisset, quos infidos, cum iam neutris gratiam referre posset.</div>
</td><td><img style="width:190px;" src="http://img15.hostingpics.net/pics/88057064E2.png"/></td></tr></table>
<center><a href="#" style="color:#003399;">Ma Prez</a> * <a href="#" style="color:#003399;">Mes Rps</a></center>
</div></center>
et merci Youp pour le défi :)