Bonjour , j'ai récemment le projet de réaliser mon site , mais malheureusement le texte cliquable ne fonctionne plus et je ne sais pas pourquoi ,
Voici L'html :
et le CSS :
Modifié par _Mat_ (07 Dec 2018 - 19:01)
Voici L'html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DECA</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Work+Sans:300">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Muli">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu:700">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
<header>
<img class="fondheader" src="imgs/montagne_header2.jpg" alt="fond montagne">
<img class="logo" src="imgs/logo_header2.png" alt="Logo du site">
<div class="contenue">
<a class ="lien-nav" href="#">home</a>
<a class ="lien-nav" href="#">work</a>
<a class ="lien-nav" href="#">contact</a>
<a class ="lien-nav" href="#">about me</a>
</div>
</header>
<premierepage>
<img class="bandeverte" src="imgs/bandeverte.png" alt="bandeau vert">
<h2 class="what"> What I do.. </h2>
<div id="logomedia">
<img src="imgs/web_pannel1.png" alt="logo pour illustrer le text">
</div>
<p class="ido"> In my lost time, I usually do social media design, like YouTube Banner, Twitter Header, some design for the website, and other things.. </p>
</premierePage>
<deuxiemepage>
<img class="fondvert" src="imgs/bande.jpg" alt="fond">
<img class="bandeblanche" src="imgs/bandeblanche.png" alt="bandeau blanc">
<img class="personnage" src="imgs/personnage.png" alt="personnage">
<h2 class="about"> About me.. </h2>
<p class="me"> My name is Matteo, i have actually 17years old. I’ve been designing for about 2 years now, I practice on Adobe suite App and I like coding Website too !</p>
</deuxiemepage>
<troisiemepage>
<img class="fondblanc" src="imgs/bande2.jpg" alt="fond">
</troisiemepage>
<bottom>
<p class="textfin"> ⓒ DECA. Website created by HHHHH</p>
<img class="bandenoir" src="imgs/bas.png" alt=" fond du bas">
</bottom>
</html>et le CSS :
/*Header*/
.fondheader{
position: absolute;
}
.contenue{
position: absolute; /* postulat de départ */
padding-top: 420px;
left: 50%; /* à 50%/50% du parent référent */
transform: translate(-50%,0%);
padding-right: 0px;
padding-left: 0px;
}
.logo{
width: 216px;
height: 222px;
position: absolute; /* postulat de départ */
padding-top: 70px;
left: 50%; /* à 50%/50% du parent référent */
transform: translate(-50%,0%);
}
.lien-nav{
color: white;
text-decoration: none;
text-transform: uppercase;
font-size: 30px;
padding-right: 50px;
padding-left: 50px;
font-family: 'Ubuntu', sans-serif;
transition: 0.5s;
}
.lien-nav:hover{
color: #2a2a2a;
transition: 0.5s;
}
/*1re Présentation*/
.bandeverte{
position: absolute; /* postulat de départ */
padding-top: 725px;
left: 50%; /* à 50%/50% du parent référent */
transform: translate(-50%,0%);
}
.what{
position: absolute; /* postulat de départ */
left: 50%; /* à 50%/50% du parent référent */
transform: translate(-50%,0%); /* décalage de 50% de sa propre taille */
padding-top: 750px;
color: #52d1d0;
font-size: 37px;
font-family: 'Ubuntu', sans-serif;
}
#logomedia{
position: absolute; /* postulat de départ */
left: 50%;
transform: translate(-50%,0%); /* décalage de 50% de sa propre taille */
padding-top: 820px;
}
.ido{
position: absolute; /* postulat de départ */
left: 50%;
transform: translate(-50%,0%); /* décalage de 50% de sa propre taille */
padding-top: 900px;
text-align: center;
color: black;
text-decoration: none;
font-size: 17px;
padding-right: 290px;
padding-left: 290px;
font-family: 'Muli', sans-serif;
line-height: 25px;
}
/*2eme Présentation*/
.fondvert{
position: absolute; /* postulat de départ */
padding-top: 1242px;
}
.bandeblanche{
position: absolute; /* postulat de départ */
padding-top: 1494px;
left: 50%; /* à 50%/50% du parent référent */
transform: translate(-50%,0%);
}
.personnage{
position: absolute; /* postulat de départ */
padding-top: 1589px;
left: 50%; /* à 50%/50% du parent référent */
transform: translate(-50%,0%);
width: 60px;
height: 60px;
}
.about{
position: absolute; /* postulat de départ */
padding-top: 1519px;
left: 50%; /* à 50%/50% du parent référent */
transform: translate(-50%,0%);
color: white;
font-size: 37px;
padding-right: 290px;
padding-left: 290px;
font-family: 'Ubuntu', sans-serif;
text-align: center;
}
.me{
position: absolute; /* postulat de départ */
padding-top: 1669px;
left: 50%; /* à 50%/50% du parent référent */
transform: translate(-50%,0%);
padding-top: 1669px;
text-align: center;
color: white;
text-decoration: none;
font-size: 17px;
padding-right: 290px;
padding-left: 290px;
font-family: 'Muli', sans-serif;
line-height: 25px;
}
/*3eme Présentation*/
.fondblanc{
position: absolute; /* postulat de départ */
padding-top: 2011px;
}
/*Bas de Présentation*/
.bandenoir{
position: absolute; /* postulat de départ */
padding-top: 2780px;
}
.textfin{
position: absolute; /* postulat de départ */
padding-top: 2799px;
color: white;
font-size: 24px;
padding-right: 25px;
padding-left: 25px;
font-family: 'Muli', sans-serif;
z-index: 1;
}
Modifié par _Mat_ (07 Dec 2018 - 19:01)
