11
Favoris
Du même auteur...
Commentaires (21)
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... ^^
Cette fiche est toute mignonne mais on voit pas le code alors le corriger... ^^
VIP depuis le 01/11/2020
VIP depuis le 07/08/2020
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
VIP depuis le 06/03/2020
VIP depuis le 14/03/2020
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 ^^
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.
<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.
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
Compte supprimé
le 29 Nov 2020 à 11h26
C'est magnifique !
Poster un commentaire
Vous devez être inscrit et connecté pour poster un commentaire.
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 ^^