AccueilFAQRechercherMembresGroupesS'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.


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

    Partagez

    Sondage

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

    [ 1 ]
    10% [10%] 
    [ 6 ]
    60% [60%] 
    [ 3 ]
    30% [30%] 
    [ 0 ]
    0% [0%] 

    Total des votes: 10
    avatar
    Youp
    FémininAge : 22Messages : 579

    le 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 :



    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>




    avatar
    KoalaBzh9
    FémininAge : 18Messages : 54

    le 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 !
    avatar
    Melle Lena
    FémininAge : 42Messages : 284

    le 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:
    avatar
    Nihil Scar Winspeare
    Messages : 4792

    le Dim 9 Avr 2017 - 22:51

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

    avatar
    Rozenbrez
    FémininAge : 26Messages : 1361

    le 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.

    avatar
    Youp
    FémininAge : 22Messages : 579

    le Dim 23 Avr 2017 - 17:31

    Bravo à Nihil qui remporte ce défi <3



    avatar
    Nihil Scar Winspeare
    Messages : 4792

    le 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 Dim 19 Nov 2017 - 7:55