AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.

-20%
Le deal à ne pas rater :
Pack Gigabyte Ecran PC Gamer 27″ LED M27Q (rev2.0) + Radeon RX 6950 ...
749 € 939 €
Voir le deal

    (VOTE) (CODE) Creativ'mess# - Vite fait, bien fait !

    Sondage

    Vite fait bien fait ? Quelle fiche de relation a-t-elle gagné selon vous ?

    [ 1 ]
    (VOTE) (CODE) Creativ'mess# - Vite fait, bien fait ! Empty10%(VOTE) (CODE) Creativ'mess# - Vite fait, bien fait ! Empty [10%] 
    [ 6 ]
    (VOTE) (CODE) Creativ'mess# - Vite fait, bien fait ! Empty60%(VOTE) (CODE) Creativ'mess# - Vite fait, bien fait ! Empty [60%] 
    [ 3 ]
    (VOTE) (CODE) Creativ'mess# - Vite fait, bien fait ! Empty30%(VOTE) (CODE) Creativ'mess# - Vite fait, bien fait ! Empty [30%] 
    [ 0 ]
    (VOTE) (CODE) Creativ'mess# - Vite fait, bien fait ! Empty0%(VOTE) (CODE) Creativ'mess# - Vite fait, bien fait ! Empty [0%] 

    Total des votes: 10
    Sondage clos
    Youp
    Youp
    FémininAge : 29Messages : 579

    Mar 28 Mar 2017 - 13:53

    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 cheers

    Participation de Shaneliae

    Rendu en image :

    (VOTE) (CODE) Creativ'mess# - Vite fait, bien fait ! Screen10

    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


    Wanted

    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.


    Mon Histoire
    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.

    Ma Prez * Mes Rps



    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>




    (VOTE) (CODE) Creativ'mess# - Vite fait, bien fait ! 262632clip20160315at092522
    KoalaBzh9
    KoalaBzh9
    FémininAge : 24Messages : 54

    Ven 31 Mar 2017 - 23:16

    J'admire l'efficacité des participants ! Ca reste à la fois simple et très beau, c'est dingue °^°
    J'ai surtout hésité entre celle de Nihil et de Youp, mais je penche plutôt pour cette deuxième.
    En tous les cas, bravo à tous les quatre, c'est super !
    Melle Lena
    Melle Lena
    FémininAge : 49Messages : 308

    Sam 1 Avr 2017 - 15:45

    Coucou les gens, celle de Youp, pour l'originalité. Le jaune n'est en général pas ma couleur préférée, mais là, j'avoue que le rendu est harmonieux. :pompom:
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Dim 9 Avr 2017 - 22:51

    Encore 3 jours pour voter si je ne me trompe pas :hudada:

    RozenBreizh
    RozenBreizh
    FémininAge : 32Messages : 1411

    Dim 9 Avr 2017 - 23:49

    Bonsoiiir !!

    J'étais intimidé par le fait que nous n'avions que 35 minutes pour réaliser le défis, du coup j'admire le travail fourni des participants. :chomp:

    J'ai voté pour le code de Nihil, il est très simple de visuel et c'est justement cela qui m'attire. Tout comme je le trouve simple dans son utilisation et sa personnalisation.

    Bravo à tous les participants, vous avez fait du très beaux travail en 35 minutes.
    Youp
    Youp
    FémininAge : 29Messages : 579

    Dim 23 Avr 2017 - 17:31

    Bravo à Nihil qui remporte ce défi <3



    (VOTE) (CODE) Creativ'mess# - Vite fait, bien fait ! 262632clip20160315at092522
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Sam 29 Avr 2017 - 20:20

    Bravo à tous \ o / pour les créations et puis le courage de faire un truc en peu de temps :toto: et merci Youp pour le défi :)

    Je vais donner mon petit retour sur comment j'ai vécu le défi quand j'ai codé :
    - 35 minutes c'est vraiment court pour trouver une idée et coder (x-x)
    - on pourrait imaginer le même genre d'épreuve avec éventuellement juste le graph à faire ♥︎
    - j'ai préféré partir sur une page HTML vu le temps, bien plus rapide pour éviter les bugs de br, le style du forum de base
    - et surtout le plus de partir juste sur du html plutôt que sur le forum c'est que ça permet de coder "en direct" sans devoir à chaque fois valider x-x

    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 15:54