11 Favoris
Plume` le 27 Nov 2020 à 19h04
Voici le code de la fiche avec deux animations au survol, saurez-vous les retrouver ?
C'est mon premier code entièrement codé avec des classes, si quelqu'un veut jeter un oeil au code pour voir si il est juste je dis pas non :p

EDIT : voici un lien vers le code aux dimensions des fiches de wyvartem que pouvez copier-coller ^^

Commentaires (21)

Avatar de Ayfoth
Ayfoth le 27 Nov 2020 à 19h24
Hum 1er survol sur pseudo et 2eme sur l'image.

Cette fiche est toute mignonne mais on voit pas le code alors le corriger... ^^
Avatar de Sygea
VIP depuis le 01/11/2020
Sygea le 27 Nov 2020 à 20h45
C'est magnifique !
Avatar de Shinohara
VIP depuis le 07/08/2020
Shinohara le 27 Nov 2020 à 21h14
C'est superbe !!!
Avatar de Milou
VIP depuis le 02/01/2023
Milou le 28 Nov 2020 à 01h59
Oh yes tu l'as codée ! J'adore, tout est toujours aussi harmonieux, les effets d'hover sont très bien choisis, c'est super clair et pratique. Bref c'est nickel
Avatar de Galad-El
VIP depuis le 06/03/2020
Galad-El le 28 Nov 2020 à 09h41
Elle est superbe cette fiche
Avatar de Zukki
VIP depuis le 14/03/2020
Zukki le 28 Nov 2020 à 10h20
Magnifique ! Superbes les animations :3
Avatar de Plume`
Plume` le 28 Nov 2020 à 11h48
Merci tout le monde !

Ayfoth effectivement c'est un problème x)
Avatar de Ayfoth
Ayfoth le 28 Nov 2020 à 11h50
Après dans le selecteur d'élements j'ai vu certaines choses mais des fois le code posté est un peu différent ^^
Avatar de Ayfoth
Ayfoth le 28 Nov 2020 à 12h21
Alors j'ai pu voir ton code et voici quelques points que tu peux corriger.

<div style="width: 800px; height: 550px;" class="background">
Ici le style ne sert à rien puisque le width et height et déjà attribuer dans ta class background.

<div class="fondavatar">
<div class="imageavatar"><img src="https://zupimages.net/up/20/47/ba0t.png"></div></div>

Ici tu n'avais pas besoin de deux div.
Tu aurais tout simplement pu mettre les element de fondavatar dans imageavatar et les element de imageavatar en mettant imageavatar img, on appelle cela les sélecteur css. En plus ta balise img est mal refermée.
On aurait donc eu :
<div class="imageavatar"><img src="https://zupimages.net/up/20/47/ba0t.png" /></div>
et dans ton css
.imageavatar{
float: left;
margin-top: 35px;
margin-left: 55px;
height: 140px;
width: 140px;
background-color: #301A51;
box-shadow: 0px 0px 2px #1B0F30;
position: relative;
z-index: 2;
}

.imageavatar img{
float: left;
margin-top: 10px;
margin-left: 10px;
height: 120px;
width: 120px;
box-shadow: 0px 0px 3px #1B0F30;
position: relative;
z-index: 3;
}


Comme tu l'auras deviné cette méthode s'applique également à ta class header, cependant dans ce div une autre chose est gênant tu as mit une balise </i> alors que désormais ce genre de texte se modifie directement avec le CSS avec : font-style: italic

Et pour finir les abus de br sont à éviter quand tu peux utiliser du positionnement en css


Voilà voilà je crois que c'est tout.
Avatar de Alek
Alek le 28 Nov 2020 à 23h49
Olala, il est magnifique ce code J'adore la composition et l'harmonie global + les couleurs ! Les deux hovers sont super bien choisis bbllkb j'adore
Avatar d'un compte supprimé
Compte supprimé le 29 Nov 2020 à 11h26
C'est magnifique !
Avatar de Nekkomi
Nekkomi le 29 Nov 2020 à 13h42
owiiii j'avais pas vu que tu l'avais codée du coup
c'est beauuuuu *u*
Avatar de Plume`
Plume` le 29 Nov 2020 à 13h51
Merci bcp Ayfoth je vais corriger tout ça !

Et merci
Avatar de 1AM
1AM le 14 Déc 2020 à 12h19
Hey, c'est vraiment superbe ! Très joli choix d'images et de couleurs !
Avatar de Plume`
Plume` le 16 Déc 2020 à 23h26
Merci 1AM ! :D
Avatar de Serah
Serah le 15 Fév 2021 à 17h03
Wow, cette fiche est vraiment sublime, merci beaucoup Plume` !
Avatar de Ollash
Ollash le 27 Fév 2021 à 20h22
Superbe !!
Avatar de Lethe
Lethe le 08 Jui 2021 à 21h17
Magnifique
Avatar de Plume`
Plume` le 13 Jui 2021 à 19h22
Merci
Avatar de Azelya
Azelya le 03 Jul 2021 à 20h37
Magnifique comme d'hab !
Avatar de Plume`
Plume` le 04 Jul 2021 à 12h54
merci jeannette

Poster un commentaire

Vous devez être inscrit et connecté pour poster un commentaire.