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.

-28%
Le deal à ne pas rater :
-28% Machine à café avec broyeur à grain MELITTA Purista
229.99 € 318.99 €
Voir le deal

    [CODE] Creativ'mess# - Vite fait, bien fait !

    Youp
    Youp
    FémininAge : 29Messages : 579

    Lun 27 Fév 2017 - 9:54

    Oyé oyé !
    Vous n'avez pas beaucoup de temps ? Parfait ! Ce défi ne vous prendra que 35 minutes MAXIMUM, c'est justement la seule contrainte du défi. Vous devez réaliser une fiche de relation (si cela avait été une fiche rp, je vous aurais donné 15 minutes haha), vous ne devez pas faire la partie "liens", juste l'affichage de "présentation" disons, mais si vous avez du temps (héhé) vous pouvez toujours le faire. Comment cela se déroule ? Poster un premier message à la suite, puis avant les trente cinq minutes impartis (je vous conseille de mettre une alarme à 30 minutes, histoire d'avoir 5 minutes à checker le code), poster votre rendu. Vous pouvez chercher des images, ouvrir des liens si nécessaires dans des onglets, avant de commencer à coder mais seulement ça. Pas de copié-collé d'un autre code pleaaaaase, ne prenez pas d'avance, jouez le jeu Wink Mais de toute façon, je vous fait confiance là dessus !

    Quelques petits liens utiles:
    Couleur en hexadécimal = http://www.code-couleur.com/
    Générateur de texte aléatoire = http://www.faux-texte.com/

    Vous avez vingt jour ! (soit jusqu'au 18 mars ) Un délai accordé jusqu'à samedi pour d'éventuelles nouvelles participations : soit jusqu'au samedi 25 à 23h59 )

    Pour ceux qui ne savent pas ce qu'est une fiche de relation, vous pouvez voir des exemples ici : https://www.never-utopia.com/f166-relations-gestion-rp


    Dernière édition par Youp le Jeu 23 Mar 2017 - 2:00, édité 2 fois



    [CODE] Creativ'mess# - Vite fait, bien fait ! 262632clip20160315at092522
    • Revenir en haut
    Anonymous
    Invité

    Lun 27 Fév 2017 - 16:56

    Allez je tente ma chance !

    Très intéressant de s'imposer un temps imparti o/
    • Revenir en haut
    Anonymous
    Invité

    Lun 27 Fév 2017 - 17:37

    Bon ce n'est pas fini mais au moins j'ai fait quelque chose o/

    Le rendu en image :

    [CODE] Creativ'mess# - Vite fait, bien fait ! Screen10

    et le code (sur une page HTML) :

    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>
    • Revenir en haut
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Dim 5 Mar 2017 - 19:25

    Oh tiens une image de lorempixel ... Je l'ai vu plein de fois celle là haha xD * utilisait aussi Lorempixel *

    J'aime bien cette idée de défi ! Ca me fait penser à la Technique Pomodoro :hudada:

    Normalement je papote en codant, je vais donc couper toute distraction (¬_¬). Autant "coder" une maquette déjà faite je serais confiante, là je suis un peu mode "OLALALALA KESSKESAVADONNER ?!" car j'aime bien trouver le temps de trouver une apparence qui me plait bien. ;-;
    ...
    ok je stress, ça me parait vraiment très court 35 minutes xD.

    Généralement je code par ce que j'ai une ressource qui m'inspire, du coup j'ai attendu d'avoir une image qui me donne envie et je pars avec :
    - https://i.imgur.com/Ra3BYJU.jpg (je sais déjà que je veux partir sur un avatar carré/rond/losange xD)
    - une font que me fait de l'oeil : https://fonts.google.com/specimen/Poppins

    A dans 35 minutes (allez, 40 si je mets du temps à faire une capture d'écran u-u) ! et de toutes les façons je dois y aller vers 20h donc pas le choix

    • Revenir en haut
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    Dim 5 Mar 2017 - 20:01

    Ok alors, le code HTML :

    Spoiler:

    L'apparence :

    • Revenir en haut
    Youp
    Youp
    FémininAge : 29Messages : 579

    Dim 5 Mar 2017 - 20:21

    Vous avez bien compris l'idée du défi, ça me réjouit ^^

    Allez je me lance ! Pareille que Nihil, je préfère coder avec une image et j'avais trop envie de coder en jaune et gris/noir (oui je suis étrange) alors hop j'ai choisi celle-ci: https://www.zupimages.net/up/17/09/sre6.png
    Vu un peu le code couleur : jaune #feed01
    et gris : #363636
    et choisit une police facile à écrire: https://fonts.google.com/specimen/Anton?selection.family=Anton
    C'est parti !



    [CODE] Creativ'mess# - Vite fait, bien fait ! 262632clip20160315at092522
    • Revenir en haut
    Youp
    Youp
    FémininAge : 29Messages : 579

    Dim 5 Mar 2017 - 20:54

    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.

    Mes liens



    fiche
    profil
    Contact
    Rps
    fiche de lien



    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>


    Done !



    [CODE] Creativ'mess# - Vite fait, bien fait ! 262632clip20160315at092522
    • Revenir en haut
    Elena Chase
    Elena Chase
    FémininAge : 30Messages : 43

    Mar 14 Mar 2017 - 10:37

    J'aime l'idée de ce défi, j'suis pas du tout persuadée que je vais réussir à terminer dans les temps mais j'veux y arriver

    Du coup, je pars d'une image moi aussi https://2img.net/r/hpimg15/pics/88057064E2.png
    Et quelques polices que j'ai déjà sélectionné.

    A dans 35 minutes pour voir si j'ai réussi (ou non x))
    • Revenir en haut
    Elena Chase
    Elena Chase
    FémininAge : 30Messages : 43

    Mar 14 Mar 2017 - 11:05

    Et voilà ! Pas tout à fait satisfaite mais.. x)


    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:
    <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>
    • Revenir en haut
    Youp
    Youp
    FémininAge : 29Messages : 579

    Jeu 23 Mar 2017 - 1:57

    J'ai comme qu'il dirait, un peu zappé la date de fin du défi Very Happy Comme je voulais faire un dernier rappel histoire de motiver certaines personnes n'ayant pas vu le défi, je laisse jusqu'à samedi pour d'éventuelles participations !




    [CODE] Creativ'mess# - Vite fait, bien fait ! 262632clip20160315at092522
    • Revenir en haut
    Anonymous
    Invité

    Jeu 23 Mar 2017 - 9:19

    On peut avoir plusieurs participations ? :p J'aimerais bien retenter ^^
    • Revenir en haut
    Youp
    Youp
    FémininAge : 29Messages : 579

    Jeu 23 Mar 2017 - 13:49

    Bien sûr ! ^^ Tu voudras garder les deux participations ou choisir celle que tu préfères ? (Je demande juste histoire de savoir.)

    Au fait, j'ajoute mes petites astuces qui m'ont bien aidé pour ce défi pour les nouveaux venus et nouvelles tentatives:
    - coder direct sur le forum, je trouve ça plus rapide (et ça permet d'utiliser les saut de lignes au lieu de coder ceux-ci)
    - J'ai écrit:
    Code:
    <div class=" "> </div>
    au début de mon document, après j'ai copié collé ça le nombre de fois que je pensais que ça me serait utile, remplit le nom des class puis zoo le css. J'ai du gagné quelques minutes grâce à ça.
    - pour le positionnement, une seule solution pour être rapide: flexbox
    Voili voilou, j'espère que ça pourra vous être utile



    [CODE] Creativ'mess# - Vite fait, bien fait ! 262632clip20160315at092522
    • Revenir en haut
    Anonymous
    Invité

    Ven 24 Mar 2017 - 12:08

    Je pense choisir la plus jolie ! Je tente ça durant le week-end !

    Et merci pour l'astuce Very Happy
    • Revenir en haut
    Youp
    Youp
    FémininAge : 29Messages : 579

    Mar 28 Mar 2017 - 10:20

    Je vous ai laissé tout le week end ^^ Je clos donc ce défi et lance les votes ce soir !



    [CODE] Creativ'mess# - Vite fait, bien fait ! 262632clip20160315at092522
    • Revenir en haut
    Contenu sponsorisé

    • Revenir en haut
    « Voir le sujet précédent · Voir le sujet suivant »
      La date/heure actuelle est Jeu 21 Nov 2024 - 12:49