isa44.74
/
Our-Team-Members
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add files via upload

This commit is contained in:
HarmandI 2021-10-17 22:54:41 +02:00 committed by GitHub
parent 9dd111f273
commit 4a8e0b3e51
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 183 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

146
index.html
View File

@ -1,67 +1,97 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Mulish&display=swap"
rel="stylesheet"
/>
<title>Document</title> <title>Document</title>
<script src="script.js" defer></script> <script src="script.js" defer></script>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css" />
</head> </head>
<body> <body>
<section id="corps"> <section id="corps">
<h1>Our Team Members</h1> <h1>Our Team Members</h1>
<div id= blocs> <div id="blocs">
<div id="carteidentite1">
<div id="carteidentite1"> <div>
<div> <img
<img id="avatar" src="/assets/kisspng-computer-icons-avatar-login-user-avatar-5ac207e6c8c133.5629676315226654468223.png" alt=""> id="avatar"
</div> src="/assets/kisspng-computer-icons-avatar-login-user-avatar-5ac207e6c8c133.5629676315226654468223.png"
<div id="personne1"> alt=""
<p id="nom">Nom</p> />
<p id="prenom">Prenom</p> </div>
<p id="dentifiant">Identifiant</p> <div id="personne1">
<p id = "mail">Email</p> <p id="nom">Nom</p>
</div> <p id="prenom">Prenom</p>
</div> <p id="identifiant">Identifiant</p>
<p id="mail">Email</p>
<div id="carteidentite2"> </div>
<div>
<img id="avatar" src="/assets/kisspng-computer-icons-avatar-login-user-avatar-5ac207e6c8c133.5629676315226654468223.png" alt="">
</div>
<div id="personne2">
<p id="nom">Nom</p>
<p id="prenom">Prenom</p>
<p id="identifiant">Identifiant</p>
<p id = "mail">Email</p>
</div>
</div>
<div id="carteidentite3">
<div>
<img id="avatar" src="/assets/kisspng-computer-icons-avatar-login-user-avatar-5ac207e6c8c133.5629676315226654468223.png" alt="">
</div>
<div id="personne3">
<p id="nom">Nom</p>
<p id="prenom">Prenom</p>
<p id="dentifiant">Identifiant</p>
<p id = "mail">Email</p>
</div>
</div>
</div> </div>
<div id="carteidentite2">
<div>
<img
id="avatar"
src="/assets/kisspng-computer-icons-avatar-login-user-avatar-5ac207e6c8c133.5629676315226654468223.png"
alt=""
/>
</div>
<div id="personne2">
<p id="nom">Nom</p>
<p id="prenom">Prenom</p>
<p id="identifiant">Identifiant</p>
<p id="mail">Email</p>
</div>
</div>
<div id="carteidentite3">
<div>
<img
id="avatar"
src="/assets/kisspng-computer-icons-avatar-login-user-avatar-5ac207e6c8c133.5629676315226654468223.png"
alt=""
/>
</div>
<div id="personne3">
<p id="nom">Nom</p>
<p id="prenom">Prenom</p>
<p id="identifiant">Identifiant</p>
<p id="mail">Email</p>
</div>
</div>
</div>
</section> </section>
</body>
</body> <footer>
<footer>
<nav aria-label="pagination"> <nav aria-label="pagination">
<ul class="pagination"> <ul class="pagination">
<li><a href=""><span aria-hidden="true">«</span><span class="visuallyhidden"></span></a></li> <li>
<li><a href=""><span class="visuallyhidden"></span>1</a></li> <a href=""
<li><a href="" aria-current="page"><span class="visuallyhidden"></span>2</a></li> ><span aria-hidden="true">«</span
<li><a href=""><span class="visuallyhidden"></span><span aria-hidden="true">»</span></a></li> ><span class="visuallyhidden"></span
</ul> ></a>
</li>
<li>
<a href=""><span class="visuallyhidden"></span>1</a>
</li>
<li>
<a href="" aria-current="page"
><span class="visuallyhidden"></span>2</a
>
</li>
<li>
<a href=""
><span class="visuallyhidden"></span
><span aria-hidden="true">»</span></a
>
</li>
</ul>
</nav> </nav>
</footer> </footer>
</html> </html>

77
script.js
View File

@ -1,22 +1,61 @@
const AVATAR = document.getElementById('avatar'); const AVATAR = document.getElementById("avatar");
const NOM = document.getElementById('nom'); const NOM = document.getElementById("nom");
const PRENOM = document.getElementById('prenom'); const PRENOM = document.getElementById("prenom");
const IDENTIFIANT = document.getElementById('identifiant'); const IDENTIFIANT = document.getElementById("identifiant");
const MAIL = document.getElementById('mail'); const MAIL = document.getElementById("mail");
const API_URL= "https://regres.in:api:users?page=1"; const PERSONNE = document.getElementById("personne_suivante");
const API_URL = "https://reqres.in/api/users?";
const getData = (API_URL) => { class Identite {
fetch(API_URL).then(resp => { constructor(avatar, nom, prenom, identifiant, mail) {
console.log(resp); this.avatar = avatar;
return resp.json() this.nom = nom;
}).then(data => { this.prenom = prenom;
console.log(data); this.identifiant = identifiant;
this.mail = mail;
AVATAR.src =data.avatar ; }
NOM.innerText=data.last_name;
PRENOM.innerText=data.first_name; PersonneSuiv() {
IDENTIFIANT.innerText=data.id; PERSONNE.innerHTML += `
MAIL.innerText=data.email; <div>
}) <img
id="avatar"
src="${this.avatar}"
alt=""
/>
</div>
<div id="personne1">
<p id="nom" >${this.nom}</p>
<p id="prenom">${this.prenom} </p>
<p id="identifiant"> ${this.identifiant}</p>
<p id="mail">${this.mail}</p>
</div>`;
}
} }
const getData = (api) => {
fetch(api)
.then((resp) => {
return resp.json();
})
.then((dataUser) => {
console.log(dataUser);
const PERPAGE = dataUser.per_page;
for (i = 0; i < PERPAGE; i++) {
AVATAR.src = dataUser.data[i].avatar;
NOM.innerText = dataUser.data[i].last_name;
PRENOM.innerText = dataUser.data[i].first_name;
IDENTIFIANT.innerText = dataUser.data[i].id;
MAIL.innerText = dataUser.data[i].email;
// PERSONNE.innerHTML='';
const gens = new Identite(AVATAR, NOM, PRENOM, IDENTIFIANT, MAIL);
gens.PersonneSuiv();
}
});
};
getData(API_URL);

73
style.css
View File

@ -1,18 +1,16 @@
#corps { #corps {
text-align: center; text-align: center;
font-family: Mulish, sans-serif; font-family: "Mulish", sans-serif;
} }
#h1{ #h1 {
font-family: Mulish, sans-serif; font-family: "Mulish", sans-serif;
font-size: x-large; font-size: 144px;
font-style: bold; font-style: bold;
font-weight: 800; font-weight: 1500;
line-height: 26px; line-height: 26px;
letter-spacing: 0.3545454740524292px; letter-spacing: 0.3545454740524292px;
text-align: center; text-align: center;
} }
#blocs { #blocs {
@ -20,46 +18,52 @@ text-align: center;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-around; justify-content: space-around;
} }
#personne1, #personne1,
#personne2, #personne2,
#personne3 { #personne3 {
width: 200px; background-color: #3d36c2;
height: 200px; width: 160px;
background: #edecfe; height: 175px;
margin: 50px 5px 5px 40px;
/* background: #edecfe; */
border-radius: 10px; border-radius: 10px;
padding: 20px; padding: 20px;
font-family: Mulish, sans-serif; font-family: "Mulish", sans-serif;
font-size: small; font-size: small;
font-style: normal; /* font-style: normal; */
font-weight: 800; font-weight: 800;
line-height: 5%; line-height: 5%;
letter-spacing: 0.3545454740524292px; letter-spacing: 0.3545454740524292px;
text-align: left; text-align: left;
display: table-cell; display: table-cell;
vertical-align: bottom; vertical-align: bottom;
z-index: 0;
position: relative;
} }
#nom,#prenom{ #nom {
font-weight: bold;
font-size: 30px;
}
#prenom {
font-size: medium; font-size: medium;
} }
#avatar { #avatar {
display: flex; position: relative;
text-align: left; /* display: flex; */
width: 100px; left: -25%;
height: 100px;
border: 50%;
margin-bottom: 100px;
padding-top: 50px;
z-index: 1;
position: absolute;
border-radius: 50%; border-radius: 50%;
margin-bottom: -20%;
margin-right: -10%;
width: 150px;
/* text-align: left; */
/* height: 150px; */
/* border: 50%;*/
/* padding-top: 50px; */
/* /* z-index: 1; */
/* position: absolute; */
} }
/*footer*/ /*footer*/
@ -69,7 +73,7 @@ nav {
justify-content: center; justify-content: center;
border-top: 1px solid #eee; border-top: 1px solid #eee;
margin-top: 1em; margin-top: 1em;
padding-top: .5em; padding-top: 0.5em;
} }
.pagination { .pagination {
@ -85,9 +89,9 @@ nav {
.pagination a { .pagination a {
display: block; display: block;
padding: .5em 1em; padding: 0.5em 1em;
border: 1px solid #999; border: 1px solid #999;
border-radius: .2em; border-radius: 0.2em;
text-decoration: none; text-decoration: none;
} }
@ -95,6 +99,3 @@ nav {
background-color: #333; background-color: #333;
color: #fff; color: #fff;
} }