Up Remember the OnirismDown Remember the Onirism
Forum d'entraide à la création de projets & de Libre service
Aller à la page : 1, 2  Suivant

Un design pour Shimamoto

le 08.01.18 22:17
Songeurs, songeuses, et autres rêveurs...

Je viens d'ouvrir un projet important et je pense qu'un joli design est de nos jours super important pour que le forum marche... Je viens passer commande ici en espérant que quelqu'un la prendre parce que je suis un peu nulle en codage... J'ai appris deux trois trucs mais c'est tout et aujourd'hui je n'ai plus le temps de prendre réellement des cours (même si j'aimerais beaucoup)

URL du forum : http://shimamoto.forumactif.com/
Genre : RPG City se passant dans plusieurs époques à la fois en fonction des quartiers (allant du médiéval au futuriste en passant par le steampunk et l'époque victorienne).
Résultat attendu : Je vous envoie ici mes premières maquettes il reste encore le QEEL mais je le posterai plus tard. Quant à l'image du header je pense m'en occuper moi même.
https://i.servimg.com/u/f62/16/82/96/52/palien10.jpg (la deuxième image du staff et celle du wanted correspondent au survol de l'image)
https://i.servimg.com/u/f62/16/82/96/52/pa210.jpg (au survol de l'image le contexte apparaît et j'ai oublié de rajouter les liens en bas mais ils y seront toujours bien sûr)
https://i.servimg.com/u/f62/16/82/96/52/papera10.jpg (affichage des catégories la deuxième correspond au survol de l'image)

Ressources : Pour les images je les ai il suffit de mettre des images neutre je remplacerai !
Autres : Et bien sûr si vous voulez ajouter une touche personnel ou modifier quelques trucs par rapport aux maquettes, il n'y a aucun soucis je suis complètement preneuse hihi !

Merci d'avance et j'attends une réponse avec impatience !
avatar
Mon projet :

Messages : 16

LS Graphiques : 0

LS Codage : 0

Songes : 36

Membre


le 19.01.18 21:01
Hello :)

En fait le soucis avec les images "neutres" c'est qu'on perd du temps à trouver les bonnes tailles du coup c'est assez emmerdant XD

Du coup si tu fournis les images je peux commencer la page d'accueil en attendant de voir si quelqu'un veut se charger du reste ^^

avatar
Mon projet : Aucun

Messages : 817

LS Graphiques : 0

LS Codage : 75

LS Projets : 4

Songes : 2197

Spécialité : Codage

Fondatrice


le 20.01.18 13:12
BOnjour !

Cool suppeeeerrr si tu peux me faire la PA ce sera déjà ça !
Voici les tailles, les images, les polices et les couleurs comme ça tu auras tout !

Alors la couleur du fond de PA c'est: #e2e2e4
Couleur fond cadre prédéfinis, staff, partenaires et news + écritures "meilleurs amis", "staff" "news" "wanted" et "lien" + écritures contexte.: #2b5a6c
Rond contexte et liens: #9bb9c3
Rond topsites: #648894
Ecritures topsites + intérieur news: #8fafbc

Voici les tailles:
Rond contexte= 377*377
Rond image contexte= 350*350 (https://i.servimg.com/u/f62/16/82/96/52/image-10.jpg)
Image staff: 144*86 (https://i.servimg.com/u/f62/16/82/96/52/image-11.jpg) et pour les autres il suffit de mettre cette image (qui sera donc de la même couleur que le cadre. DU coup, quand on survole, les écritures apparaissent mais la couleur reste la même) https://i.servimg.com/u/f62/16/82/96/52/image-12.jpg
Rond votes: 70*70
Meilleurs amis: 50*50
Cadres liens: 130*24
Cadre news: 189*252
Cadre wanted: 100*52 et voici les 4 images: https://i.servimg.com/u/f62/16/82/96/52/imagep10.jpg https://i.servimg.com/u/f62/16/82/96/52/imagep11.jpg https://i.servimg.com/u/f62/16/82/96/52/imagep12.jpg
https://i.servimg.com/u/f62/16/82/96/52/imagep13.jpg
La PA générale fait: 800*590

Ecritures: écriture générale: Eras Light ITC
écriture titre: Dolce vita (dafont) Bubbler one sur google fonts, j'ai pas trouvé d'équivalant vraiment semblable (donc c'est mieux Dolce VIta mais si ce n'est pas possible, tant pis :) )
Voili voilou, j'espère que toutes ces infos suffiront !


avatar
Mon projet :

Messages : 16

LS Graphiques : 0

LS Codage : 0

Songes : 36

Membre


le 20.01.18 13:18
Hey :D

En fait le soucis des polices de Dafont c'est que si le membre n'a pas installé la police ça lui ressortira en police "basique" ... donc il vaut mieux partir sur Bubbler one oui pour être sûre :/

avatar
Mon projet : Aucun

Messages : 817

LS Graphiques : 0

LS Codage : 75

LS Projets : 4

Songes : 2197

Spécialité : Codage

Fondatrice


le 20.01.18 13:31
Aaah oui je vois c'est embêtant ça bon alors partons sur Bubbler One ça me va ! :)
avatar
Mon projet :

Messages : 16

LS Graphiques : 0

LS Codage : 0

Songes : 36

Membre


le 22.01.18 14:06
J'ai commencé, je ne t'oublie pas ! Par contre je viens de voir que la police principale n'est pas non plus une police web, donc on aura le même soucis qu'avec Dolce Vita. En attendant de savoir ce que tu veux utiliser je vais mettre de l'Arial \o/

EDIT : Voila pour le rendu www. Par contre il n'est pas possible de faire le texte en cercle, obligé de mettre dans une "boîte" :/

avatar
Mon projet : Aucun

Messages : 817

LS Graphiques : 0

LS Codage : 75

LS Projets : 4

Songes : 2197

Spécialité : Codage

Fondatrice


le 22.01.18 22:07
Ooooooh merci c'est joliiiiii !
La police arial va très bien (je changerai si vraiment ça va pas avec le reste mais ça devrait aller hehe)
Ah bon, on ne peut vraiment pas mettre le texte en cercle ? Il me semblait avoir déjà vu des PA où il y avait ça mais j'ai peut être rêvé ..
J'aime beaucoup les meilleurs amis j'en ai plein qui s'appelle RO je me demande pourquoi c'est très étrange ahahahah https://imgfast.net/
Bref encore merci beaucoup c'est super beau et ça correspond à mes attentes !!!
Juste un truc, est-il possible de mettre des "fondus" entre image et texte ? (des slide je crois un truc comme ça :) )
avatar
Mon projet :

Messages : 16

LS Graphiques : 0

LS Codage : 0

Songes : 36

Membre


le 22.01.18 22:21
Je me renseigne, mais je pense vraiment pas.
Par contre pour les fondus ... il aurait fallu le dire dés le départ car ce n'est pas le même code ^^'

avatar
Mon projet : Aucun

Messages : 817

LS Graphiques : 0

LS Codage : 75

LS Projets : 4

Songes : 2197

Spécialité : Codage

Fondatrice


le 22.01.18 22:42
Ah mince bon t'inquiète ça va comme ça t'embête pas pour le rond et le fondu ça va vraiment bien comme ça !
avatar
Mon projet :

Messages : 16

LS Graphiques : 0

LS Codage : 0

Songes : 36

Membre


le 22.01.18 23:28
Du coup j'ai modifié, ça te convient comme effet ? Par contre j'ai eu confirmation, je peux rien faire de plus pour le contexte :/

EDIT : Et pour les boutons d'RO tu n'avais pas fourni d'image donc j'ai pris ce que j'ai trouvé \o/ Si tu m'en passes une je remplace x)

avatar
Mon projet : Aucun

Messages : 817

LS Graphiques : 0

LS Codage : 75

LS Projets : 4

Songes : 2197

Spécialité : Codage

Fondatrice


le 22.01.18 23:30
Ooooh merci c'est génial comme ça !!! Merci beaucoup !!!! *câlin*
Vraiment, merci beaucoup, tout est parfait !
Et je rigolais pour le bouton RO Ahah ça m'a plutôt fait rire !
avatar
Mon projet :

Messages : 16

LS Graphiques : 0

LS Codage : 0

Songes : 36

Membre


le 22.01.18 23:34
Mais c'est vrai en plus, j'avais pas envie d'ouvrir photoshop pour faire un carré blanc TT

Tentons donc \o/

PA
Code:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Bubbler+One" />
<div class="page_accueil">
                              
   <div class="pa_gauche">
                                 
      <div class="pa_rond_contexte">
                                  
         <div class="pa_contenu_contexte">
                               
            <p>
                               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed suscipit sapien dictum orci faucibus, et congue odio sagittis. Duis risus nulla, scelerisque et dolor eu, placerat viverra tortor. Mauris porta viverra arcu non laoreet. Cras consequat tincidunt turpis, id dapibus magna ornare cursus. Morbi ut eros auctor, volutpat tellus at, ullamcorper quam. Aliquam sed semper ante. Sed sit amet rutrum purus, quis pulvinar quam. In hac habitasse platea dictumst. Proin eu scelerisque ligula, nec viverra nisi. Nam dui magna, blandit et eros nec, pellentesque porta magna. Aliquam in fringilla ipsum. Donec in libero sit amet magna aliquam fermentum non vel tortor. Duis vehicula arcu ut condimentum auctor. Sed aliquet sapien nec gravida egestas. Duis non ultricies mauris. Praesent dignissim hendrerit neque nec tempus. Morbi sodales pellentesque dui, non aliquet nisl vulputate ut. In in tellus lectus. Donec efficitur nulla vel luctus euismod. Aenean laoreet scelerisque magna, eget semper libero mattis vitae. Maecenas dignissim in ex ac ornare. Proin at pulvinar mi. Maecenas vitae est ut ipsum bibendum porta. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque sed interdum nulla. Phasellus faucibus consequat ipsum eu tempor. Phasellus hendrerit sagittis nunc sit amet condimentum. Aliquam facilisis, turpis non condimentum scelerisque, sem nibh bibendum sem, a facilisis velit arcu ut mauris. Integer elementum lorem non iaculis placerat. Phasellus eu justo nibh.               
            </p>
                               
         </div>
                     <img src="https://i.servimg.com/u/f62/16/82/96/52/image-10.jpg" />                 
      </div>
                                 
      <div class="pa_votes">
                       <a href="#">Vote !</a><a href="#">Vote !</a><a href="#">Vote !</a><a href="#">Vote !</a><a href="#">Vote !</a>             
      </div>
                                 
      <div class="clear">
                                    
      </div>
                                 
      <div class="pa_partenaires">
                                    
         <h2>
                          Meilleurs amis             
         </h2><a href="http://www.remember-the-onirism.com" target="_blank"><img src="https://i.imgur.com/I7DAHGL.jpg" /></a><a href="http://www.remember-the-onirism.com" target="_blank"><img src="https://i.imgur.com/I7DAHGL.jpg" /></a><a href="http://www.remember-the-onirism.com" target="_blank"><img src="https://i.imgur.com/I7DAHGL.jpg" /></a><a href="http://www.remember-the-onirism.com" target="_blank"><img src="https://i.imgur.com/I7DAHGL.jpg" /></a><a href="http://www.remember-the-onirism.com" target="_blank"><img src="https://i.imgur.com/I7DAHGL.jpg" /></a><a href="http://www.remember-the-onirism.com" target="_blank"><img src="https://i.imgur.com/I7DAHGL.jpg" /></a><a href="http://www.remember-the-onirism.com" target="_blank"><img src="https://i.imgur.com/I7DAHGL.jpg" /></a><a href="http://www.remember-the-onirism.com" target="_blank"><img src="https://i.imgur.com/I7DAHGL.jpg" /></a>               
      </div>
                                   
   </div>
                                
   <div class="pa_droite">
                                 
      <div class="pa_staff">
                                    
         <h2>
                          Staff             
         </h2>
                                    
         <div class="staff">
                       
            <div class="staff_img">
                     <img src="https://i.servimg.com/u/f62/16/82/96/52/image-11.jpg" />     
            </div>
                       
            <div class="staff_description">
                          
               <h3>
                                Pseudo             
               </h3><a href="#">Fiche</a> <a href="#">Contact</a>             
               <h4>
                                Admin             
               </h4>
                        
            </div>
                       
         </div>
                      
         <div class="staff">
                       
            <div class="staff_img">
                     <img src="https://i.servimg.com/u/f62/16/82/96/52/image-12.jpg" />     
            </div>
                       
            <div class="staff_description">
                          
               <h3>
                                Pseudo             
               </h3><a href="#">Fiche</a> <a href="#">Contact</a>             
               <h4>
                                Admin             
               </h4>
                        
            </div>
                       
         </div>
         
         <div class="staff">
                       
            <div class="staff_img">
                     <img src="https://i.servimg.com/u/f62/16/82/96/52/image-12.jpg" />     
            </div>
                       
            <div class="staff_description">
                          
               <h3>
                                Pseudo             
               </h3><a href="#">Fiche</a> <a href="#">Contact</a>             
               <h4>
                                Admin             
               </h4>
                        
            </div>
                       
         </div>
         
         <div class="staff">
                       
            <div class="staff_img">
                     <img src="https://i.servimg.com/u/f62/16/82/96/52/image-12.jpg" />     
            </div>
                       
            <div class="staff_description">
                          
               <h3>
                                Pseudo             
               </h3><a href="#">Fiche</a> <a href="#">Contact</a>             
               <h4>
                                Admin             
               </h4>
                        
            </div>
                       
         </div>
                                    
      </div>
                                 
      <div class="pa_news">
                                    
         <h2>
                          News             
         </h2>
                                    
         <p>
                          XX : Nouveauté<br />XX : Nouveauté             
         </p>
                                    
      </div>
                                 
      <div class="pa_wanted">
                                    
         <h2>
                          Wanted             
         </h2>
                                
         <div class="wanted">
                       
            <div class="wanted_img">
                     <img src="https://i.servimg.com/u/f62/16/82/96/52/imagep10.jpg" />     
            </div>
                       
            <div class="wanted_description">
                          
               <h3>
                                Nom personnage             
               </h3><a href="#">Fiche</a>             
            </div>
                       
         </div>
                
         <div class="wanted">
                       
            <div class="wanted_img">
                     <img src="https://i.servimg.com/u/f62/16/82/96/52/imagep11.jpg" />     
            </div>
                       
            <div class="wanted_description">
                          
               <h3>
                                Nom personnage             
               </h3><a href="#">Fiche</a>             
            </div>
                       
         </div>
         <div class="wanted">
                       
            <div class="wanted_img">
                     <img src="https://i.servimg.com/u/f62/16/82/96/52/imagep12.jpg" />     
            </div>
                       
            <div class="wanted_description">
                          
               <h3>
                                Nom personnage             
               </h3><a href="#">Fiche</a>             
            </div>
                       
         </div>
         <div class="wanted">
                       
            <div class="wanted_img">
                     <img src="https://i.servimg.com/u/f62/16/82/96/52/imagep13.jpg" />     
            </div>
                       
            <div class="wanted_description">
                          
               <h3>
                                Nom personnage             
               </h3><a href="#">Fiche</a>             
            </div>
                       
         </div>
         
      </div>
                                 
      <div class="clear">
                                    
      </div>
                                 
   </div>
                              
   <div class="clear">
                                 
   </div>
                
   <div class="pa_liens_utiles">
              <a href="#">Lien</a> <a href="#">Lien</a> <a href="#">Lien</a> <a href="#">Lien</a> <a href="#">Lien</a>       
   </div>
</div>

CSS
Code:
/********************************************************** PAGE ACCUEIL, HALLOWEEN **********************************************************/
.page_accueil {
    background: #E2E2E4;
    width: 800px;
    box-sizing: border-box;
    padding: 2%;
    font-size: 10px;
}

.pa_gauche {
    float: left;
    width: 60%;
}

.pa_droite {
    float: left;
    width: 40%;
}

.clear {
    clear: both;
}

a, a:hover {
    text-decoration: none !important;
}

/* TITRES */
.page_accueil h2 {
    font-family: 'Bubbler One', sans-serif;
    color: #2B5A6C;
    font-size: 24px;
    text-transform: uppercase;
    text-align: left;
    margin: 0 0 1% 0;
}

/* CONTEXTE */
.pa_rond_contexte {
    width: 340px;
    height: 340px;
    border: 10px solid #9BB9C3;
    border-radius: 100%;
    position: relative;
    float: left;
}

.pa_rond_contexte img {
    position: relative;
    border-radius: 100%;
    width: 340px;
    height: 340px;
    object-fit: cover;
    z-index: 2;
}

.pa_rond_contexte img:hover {
    z-index: 1;
}

.pa_contenu_contexte {
    border-radius: 100%;
    height: 340px;
    position: absolute;
    top: 0;
    width: 340px;
    z-index: 2;
    background: #9BB9C3;
    color: #2B5A6C;
}

.pa_contenu_contexte:hover {
    z-index: 3;
}

.pa_contenu_contexte p {
    width: 240px;
    height: 240px;
    overflow: auto;
    margin-top: 50px;
    text-align: justify;
}

/* VOTES */
.pa_votes {
    float: left;
    margin: 0 0 0 2%;
}

.pa_votes a {
    background: #648896;
    border-radius: 100%;
    color: #8FAFBC !important;
    display: block;
    font-family: 'Bubbler One', sans-serif;
    font-size: 24px;
    height: 50px;
    margin: 10% 0;
    padding: 20px 0 0;
    text-align: center;
    width: 70px;
}

/* PARTENAIRES */
.pa_partenaires img {
    margin: 0 .7%;
}

/* STAFF ET WANTED */
.contenu_staff {
    position: relative;
    display: inline-block;
    font-size: 12px;
}

.staff, .wanted {
    background: #2B5A6C;
    color: #8FAFBC;
    height: 84px;
    overflow: hidden;
    text-align: center;
    width: 144px;
    display: inline-block;
}

.staff_img, .wanted_img {
    position: relative;
    z-index: 2;
    width: 144px;
    height: 84px;
    margin-left: 0px;
    transform: all;
    transition: 1s;
}

.staff:hover .staff_img, .wanted:hover .wanted_img {
    margin-left: 400px;
    transform: all;
    transition: 1s;
}

.staff_description, .wanted_description {
    height: 71px;
    margin-top: -67px;
    position: relative;
    width: 144px;
    z-index: 1;
}

/* CONTENU BULLE STAFF ET WANTED */
.staff_description h3, .wanted_description h3 {
    margin: 0;
    padding: 0;
    font-weight: normal;
}

.staff_description a, .wanted_description a {
    color: #46707e !important;
}

.staff_description h4 {
    font-family: 'Bubbler One', sans-serif;
    text-transform: uppercase;
    font-size: 20px;
    margin: 0;
}

/* NEWS */
.pa_news {
    float: left;
    margin: 2% 4.5% 0 0;
    width: 60%;
}

.pa_news p {
    background: #2B5A6C;
    width: 90%;
    padding: 5%;
    height: 202px;
    overflow: auto;
    text-align: left;
    font-size: 12px;
    color: #8FAFBC;
}


/* WANTED */
.pa_wanted {
    float: left;
    width: 35%;
}

.wanted {
    height: 53px;
    width: 101px;
    margin: 3.5% 0;
}

.wanted_img {
    width: 101px;
    height: 53px;
}

.wanted_description {
    height: 53px;
    margin-top: -50px;
    position: relative;
    width: 101px;
    z-index: 1;
    padding: 0;
    font-size: 10px;
}


/* LIENS */
.pa_liens_utiles a {
    display: inline-block;
    background: #9BB9C3;
    color: #2B5A6C !important;
    text-transform: uppercase;
    font-family: 'Bubbler One', sans-serif;
    font-size: 18px;
    width: 18%;
    margin: 2% .5% 0 .5%;
}

Et je t'écoute pour les beugs XD

avatar
Mon projet : Aucun

Messages : 817

LS Graphiques : 0

LS Codage : 75

LS Projets : 4

Songes : 2197

Spécialité : Codage

Fondatrice


le 22.01.18 23:39
Chouette !!
(oui pour le carré blanc, je comprends parfaitement ahah)
Alors j'ai essayé, il semble n'y avoir aucun beug, quel beau travail !!! Je me permets de te mettre le lien de mon forum test: http://life-stories.forumactif.org/
avatar
Mon projet :

Messages : 16

LS Graphiques : 0

LS Codage : 0

Songes : 36

Membre


le 22.01.18 23:50
Oh bah nickel XD
Par contre (je ne pense pas que je m'en occuperai, mais quand même), tu devrais préciser un peu le schéma de tes catégories : on ne sait pas vraiment ce qui apparaît au survol de quoi, ni quelle image correspond à quoi :/

avatar
Mon projet : Aucun

Messages : 817

LS Graphiques : 0

LS Codage : 75

LS Projets : 4

Songes : 2197

Spécialité : Codage

Fondatrice


le 22.01.18 23:53
Mmh bon les catégories en vrai j'ai réussi à faire un truc pas mal et mieux que mon schéma que j'apprécie plus trop... Je sais pas si je vais annuler la commande ou pas...
avatar
Mon projet :

Messages : 16

LS Graphiques : 0

LS Codage : 0

Songes : 36

Membre



Vous ne pouvez pas répondre aux sujets dans ce forum

Partenaires