Comment arriver à ce résultat ?
augustin Le 16 août 2016 à 20:05 (Édité le 25 janvier 2019 à 17:52)
Je vois de plus en plus de site ayant ce genre de tableau voir image...
http://hpics.li/192863c
Comment fait-on pour arriver à ce résultat ?? Connaissez-vous un tuto qui pourrait m'aider??
D'avance merci
TheOldNoob Le 16 août 2016 à 20:40
C'est du CSS tout bêtement, pas vraiment de tuto pour refaire ça, si tu t'y connais en css tu en as pour 35/40 minutes, sinon bah... bon courage 😉
augustin Le 16 août 2016 à 20:46 (Édité le 16 août 2016 à 20:51)
Bhein j'ai essayé j'arrive pas à faire le truc en turquoise... lol
Voici déjà le résultat... http://hpics.li/a5f6b92
Le "Gain de Temps" c'est ça que j'aimerais mettre en turquoise
/*Le talbeau */
.box_menu { /*Le talbeau en lui même */
margin: 10px;
float: left;
height: 340px;
width: 320px;
border: solid F3FAFF;
-moz-border-radius: 4px;
-moz-box-shadow:0px 0px 3px #000000;
-webkit-box-shadow:0px 0px 3px #000000;
box-shadow:0px 0px 3px #000000;
background-color: #EFFEFC;
color: teak;
}
#main img {
margin-left: 10px;
margin-top: 8px;
-moz-border-radius: 10px;
}
/* bouton orange */
.recipies {
float: right;
height: 39px;
width: 130px;
}
.recipies img {
height: 39px;
width: 130px;
float: right;
}
TheOldNoob Le 16 août 2016 à 21:13 (Édité le 16 août 2016 à 21:16)
Tu a un bon début, après, c'est une question d'entrainement.
Pour ma part, quand je fait du html/css j'aime bien utilisé brakets, mais ça reste un choix très personnel, parce qu'il m'offre des possibilité rapide de personalisation, surtout quand par exeple tu connais pas les code couleurs.
En 15 minutes j'ai fait ça :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Exo reproduction</title>
<style>
body {
background: black;
}
.middle{
margin: auto;
padding-top: 1%;
width: 500px;
height: 700px;
background: aliceblue;
}
.bandolBlue{
margin-top: 1%;
background: aquamarine;
width: 100%;
height: 20%;
}
.price{
text-align: center;
padding-top: 5%;
}
.txtW{
color: white;
}
.sizeAA{
font-size: 1.8rem;
}
.sizeM{
font-size: 4rem;
}
h1 {
padding-top: 4%;
text-align: center;
color: cadetblue;
font-size: 2.5rem;
}
.vBlue{
color: aquamarine;
font-weight: bold;
font-size: 1.8rem;
}
.option{
margin: 10%;
}
.txtOption{
font-size: 1.6rem;
color: lightslategray
}
.bold{
font-weight: bold;
}
.btnOrange{
padding: 5%;
border-radius: 15px;
font-size: 1.6rem;
background: orange;
color: white;
font-weight: bold;
text-align: center;
margin: auto;
width: 200px;
}
</style>
</head>
<body>
<div class="middle">
<div class="bandolBlue">
<div class="price">
<span class="txtW sizeAA">àpd </span><span class="txtW sizeM">9,49€</span><span class="txtW sizeAA"> par mois</span>
</div>
<h1>Couverture de base</h1>
<div class="option">
<span class="vBlue">V </span><span class="txtOption">Remboursement des dépenses de santé de manières <span class="bold">rapide et transparente</span></span>
</div>
<div class="option">
<span class="vBlue">V </span><span class="txtOption">Plus de 60 avantages et service pour <span class="bold">toute la famille</span>(option, sport, médecines alternatives, bébé,...)</span>
</div>
<div class="btnOrange">Affilation en ligne</div>
</div>
</div>
</body>
</html>
TheFlameflo Le 16 août 2016 à 21:42 (Édité le 16 août 2016 à 23:32)
J'étais entrain de le reproduire sur codepen.io pour pouvoir te montrer le code complet, mais l'onglet a fermé sans que je puisse sauvegarder...
Bref, je peux t'expliquer comment faire maintenant :
On comment par regarder le "bloc" au complet.
Grâce au screen que tu as fournis, j'ai pu regarder la hauteur et la largeur.
Bref, c'est environ 670 px de haut et 480 px de large.
Pour le bandeau bleu, on voit qu'il y a un espace en haut (je ne sais pas si c'est ce qu'il y avait de "base" où c'est à cause du screenshot.
Bref, il suffit d'appliquer un margin top de 20 px.
La hauteur du bandeau est de 115px.
Le texte pourrait être un span que tu peux placer au milieu avec text-align et line-height.
Pour le titre "Couverture", c'est plutôt simple. Je te laisse le faire.
Après, c'est une liste non-organisée avec un petit icône.
Pour l'icône, tu dois utiliser list-style-image afin de définir l'image.
Pour le bouton, il suffit de le définir en tant que block, lui donner une largeur définie et une hauteur, appliquer un border-radius et le positionner en bas.
Je pense que je t'ai donné suffisamment de pistes pour que tu sois en mesure de réussir à reproduire quelque chose de similaire ! 😉
Bonne chance ! 😄
Si tu as d'autres questions, n'hésite pas ! 😄
EDIT : Trop tard.. 😶
augustin Le 17 août 2016 à 00:11
Waaaaaaawwww t'as fais ça comment l'ami ??? C'est impressionnant que tu ais pu faire ça en 15 minutes, moi je galère depuis plus d'une heure... 😰😰 Franchement chapeau !
Je vais essayer de comprendre ton code pour pouvoir m'améliorer, c'est sympa en tout les cas de m'avoir aidé.
TheOldNoob Le 17 août 2016 à 00:13
C'est pas forcement difficile, mais c'est le genre d'exercice qu'on a eu quand j'ai passer mes certifications. Du coup, ça aide ^^
C'est juste une question d'entrainement, connaitres le CSS c'est super interessent, donc s'apprend vite 😀
augustin Le 17 août 2016 à 00:15
Merci pour toutes tes explications, je vais les reprendre ainsi que le code de TheHoldNoob, je pense pouvoir me débrouiller maintenant...
augustin Le 17 août 2016 à 00:20
Là où j'ai du mal, c'est lorsqu'il faut déterminer les valeurs d'une hauteur, et d'une largueur je n'arrive jamais du premier coup... 😄
Mais comme tu le dis, c'est une question d'entrainement...
TheFlameflo Le 17 août 2016 à 00:25 (Édité le 17 août 2016 à 00:46)
Pour déterminer la largeur et la hauteur, tu peux y aller à l'oeil, c'est pas trop difficile sur de petites dimensions (20px, 10px, etc).
Sinon, il y a plusieurs plugins sous Firefox et Chrome qui te permettent de mesurer les différentes parties d'un site web.
Tu peux aussi regarder directement dans le code source du site (F12/Inspecter l'élément).
La méthode que je préfère, c'est de prendre un screenshot de l'élément en question, aller sous Photoshop (ou tout autre logiciel qui traite les images ^^), sélectionner la partie à calculer et voir.
TheOldNoob Le 17 août 2016 à 11:27
TheFlameflo Le 17 août 2016 à 20:16
On peut aussi trouver le pourcentage avec un screenshot, en calculant un peu, avec F12, etc.
TheOldNoob Le 17 août 2016 à 22:01
F12 est ton ami !
