Je donne 15euros à celui qui termine mon site htlm

L'exercice c'est de faire un CV pour ce soir

J'envoie le css et style en mp à celui qui veut bien

+ je peux fournir des preuves que vous serez bien payé, je peux payer en LINK, MATIC, ETH, BTC, voir Euro

L'erreur est dans le titre htlm -> html

https://image.noelshack.com/fichiers/2018/29/6/1532177209-naruhodo.png

Le 08 octobre 2021 à 18:19:44 :
L'erreur est dans le titre htlm -> html

https://image.noelshack.com/fichiers/2018/29/6/1532177209-naruhodo.png

enfaite le site marche, faut juste que je le termine

Le salaire des devs web a pas mal baissé on dirait

tu apprendras jamais

Le 08 octobre 2021 à 18:22:31 :
Le salaire des devs web a pas mal baissé on dirait

Ahiii là c'est un vieux CV tout pourris en HTLM fait en 1h max, ça vaut 15e

Le 08 octobre 2021 à 18:23:23 :
tu apprendras jamais

En même temps apprendre le HTLM en 2K21https://image.noelshack.com/fichiers/2021/39/7/1633295253-tison-lunette.png

Mets ton css ici avec les consignes

CSS ;
<spoil>/*——————————————————————————— DÉCLARATION GÉNÉRALES ———————————————————————————————*/
/* ( On va toujours du général au particulier ) */

• {
  margin: 0;
  padding: 0;
  }

body
{
font-family: montserrat;
color: #0B5345;
text-align: center;
}
section
{
padding: 2% 10% 2% 10%;
}
h1
{
font-size: 5em;
color: black;
}
h2
{
font-size: 4em;
}
h3
{
font-size: 2em;
}

/*———— DÉCLARATION PARTICULIÈRE DANS L'ORDRE DE LA PAGE ( de haut en bas) ————————*/

/*————————————————————————————————————————————————————————————————————————————————*/
/* 1ère des 3 grandes parties de body (HEADER) */
/*————————————————————————————————————————————————————————————————————————————————*/

/* Menu de navigation dans la balise nav */

header
{
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 1;
}

1. cercleid
   {
   position: fixed;
   z-index: 1;

}

header nav
{
padding: 30px 0 30px 0;
background-color: lightgray;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
/* Les liens du menu */

header ul
{
display: flex;
justify-content: space-around;
}

header li
{
transition-duration: 0.5s;
}
header li:hover
{
transform: translateY(6px);
}

nav a
{
text-decoration: none;
font-weight: 500;
color: white;
font-size: 1.5em;
margin: 3%;
transition-duration: 0.5s;
}
nav a:hover
{
transform: translateY(6px);
}

nav i
{
font-size: 1.2em;
color: white;
}

/*————————————————————————————————————————————————————————————————————————————————*/
/* 2ème des 3 grandes parties de body (MAIN) */
/*————————————————————————————————————————————————————————————————————————————————*/

1. hero
   {

background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
color: white;
padding: 12% 12% 5% 12%;
}

1. hero p
   {
   font-size: 1.5em;
   line-height: 2;
   }

1. hero a
   {
   color: orange;
   }

1. hero q
   {
   letter-spacing: 3px;
   font-weight: bold;
   }

1. hero i
   {
   font-size: 2.5em;
   line-height: 2;
   color: white;
   }

1. actus
   {
   background-color: lightgray;
   }

1. actus p
   {
   font-size: 1.5em;
   }

1. actus img
   {
   margin: 5% 0 5% 0;
   }

1. voyages article
   {
   border: solid 2px gray;
   margin: 20px 35% 20px 35%;
   padding-bottom: 20px;
   box-shadow: 5px 5px 8px gray;
   transition-duration: 0.5s;
   }

1. voyages article:hover
   {
   transform: scale(1.1);
   box-shadow: 12px 12px 30px gray;
   }

1. voyages img
   {
   width: 100%;
   }

1. voyages a
   {
   padding: 3%;
   background-color: #0B5345;
   border-radius: 25px;
   color: white;
   text-decoration: none;
   }

1. voyages-2 article
   {
   margin-bottom: 150px;
   }

1. voyages-2 article
   {
   margin-bottom: 150px;
   }

1. voyages-2
   {
   text-align: left;
   }

1. voyages-2 ul
   {
   list-style-type: none;
   background-color: white;
   color: #0B5345;
   padding: 2%;
   }

1. voyages-2 li
   {
   padding: 2%;
   }

1. voyages-2 i
   {
   padding-right: 5%;
   }

1. contact
   {
   background-color: lightgray;
   }

/*————————————————————————————————————————————————————————————————————————————————*/
/* 3ème des 3 grandes parties de body (FOOTER) */
/*————————————————————————————————————————————————————————————————————————————————*/

footer nav
{
background-color: darkslategray;
padding: 40px 0 40px 0;
}

.cercleid
{
transition-duration: 0.5s;
}
.cercleid:hover
{
transform: translateY(6px);
}

/*————————————————————— RESERVOIR DE POLICE ——————————————————————————*/

• /

</spoil>

CSS : / COULEURS DES POLICES */

.orange
{
color: orange;
}
.green
{
color: green;
}
.black
{
color: black;
}
.white
{
color: white;
}

/* TAILLE DES POLICES */

.font-xl
{
font-size: 5em;
}
.font-l
{
font-size: 3em;
}
.font-m
{
font-size: 2em;
}
.font-s
{
font-size: 0.5em;
}
.font-xs
{
font-size: 0.2em;
}

/* HAUTEUR DE LIGNE */

.line-height-m
{
line-height: 2;
}
.line-height-l
{
line-height: 3;
}
.line-height-xl
{
line-height: 4;
}

/* MARGES EXTÉRIEURES */

.margin-5
{
margin: 5%;
}
.margin-10
{
margin: 10%;
}

/* ALIGNEMENT */

.center
{
text-align: center;
}

/* COULEURS DE FONDS D'ÉCRAN */

.bg-gray
{
background-color: gray;
}
.bg-lightgray
{
background-color: lightgray;
}
.bg-green
{
background-color: slategrey;
}

/* IMAGES EN FOND D'ÉCRAN */

/* BORDER */

.border
{
border: solid 1px gray;
}

/* BORDER-RADIUS ROUNDED */

.rounded
{
border-radius: 50px;
}

/* FAMILLES DE POLICES */

.bebas
{
font-family: 'Bebas Neue', cursive;
}
.ephesis
{
font-family: 'Ephesis', cursive;
}

/* Effet au survol de la souris : Hover */

.zoom
{
transition-duration: 0.5s;
}
.zoom:hover
{
transform: scale(1.5);
}
.translatey
{
transition-duration: 0.5s;
}
.translatey:hover
{
transform: translateY(10px);
}

ok mais c'est quoi qu'il faut faire?

Le 08 octobre 2021 à 18:34:07 :
ok mais c'est quoi qu'il faut faire?

Vous réaliserez un curriculum vitae en HTML & CSS en vous aidant des
cours de cette semaine.
12 consignes devront être respectées :
• Votre CV comprendra 6 rubriques : Présentation en haut de page,
compétences, formations, expériences, centres d’interêts et contact.
• Structurez votre document HTML avec des des balises structurantes.
• Vous établirez un menu supérieur de navigation en lien avec les
différentes rubriques.
• Vous intégrerez une photo en haut de page.
• Vous utiliserez des polices personnalisées avec un CDN.
• Vous importez quelques icônes avec un CDN pour illustrer certaines
parties de votre page.
• Les différentes compétences, formations, expériences et centres
d’intérêt devront êtres listées dans des balises de liste.
• Le menu supérieur devra être toujours visible en haut de page quand
on fait défiler la page.
• Vous établirez en bas de page, une icône qui ramène en haut de page
quand on clique dessus et qui reste toujours présente lors du
défilement de la page.
• Vous créerez quelques animations au survol de la souris.
• Votre code HTML devra être correctement indenté.
• Votre code CSS devra être logiquement organisé.
Le design ( mise en page, typographie et charte des couleur ) est
entièrement libre pourvu que votre page soit lisible et ergonomique.

J'ai déjà fait l'ensemble des consignes sauf : l''animation de survol de la souris, l'icone fixe qui ramène en haut de page

Bordel 15e il propose le farfelin

Le 08 octobre 2021 à 18:40:05 :
Bordel 15e il propose le farfelin

Bah ouais

animations au survol de la souris tu mets un truc de genre :

.tonImage:hover {
height: le triple;
width: le triple;
}

tu rajoute un lien vers une ancre au bas de page
tu lui donne :

taFleche {
display: block;
background-color: red;
height: 4rem;
width: 4rem;
-webkit-clip-path: polygon(50% 0, 100% 40%, 70% 40%, 70% 100%, 30% 100%, 30% 40%, 0 40%);
clip-path: polygon(50% 0, 100% 40%, 70% 40%, 70% 100%, 30% 100%, 30% 40%, 0 40%);
}
Le truc chelou clip-path c'est ppour faire une flèche

et href="hero" dans le html

<a href="#hero"><i class="fa fa-arrow-up"></i></a> Que tu rajoute en bas dans la nav du bas sinon c'est mieux

Le 08 octobre 2021 à 18:22:31 :
Le salaire des devs web a pas mal baissé on dirait

https://image.noelshack.com/fichiers/2017/05/1485951438-risitassueur1.png

Pour l'animmation à la souris tu peux juste changer la couleur des liens sinon

a:hover {
color: red;
}

Ou
#tonLien1:hover,
#tonlien2:hover,
[...] {
color: green;
}

Je connaissais pas le truc de <i class="fas fa-phone"></i> tu m'as appris un truc