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>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<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>
<script src="script.js" defer></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<section id="corps">
<h1>Our Team Members</h1>
<div id= blocs>
<div id="carteidentite1">
<div>
<img id="avatar" src="/assets/kisspng-computer-icons-avatar-login-user-avatar-5ac207e6c8c133.5629676315226654468223.png" alt="">
</div>
<div id="personne1">
<p id="nom">Nom</p>
<p id="prenom">Prenom</p>
<p id="dentifiant">Identifiant</p>
<p id = "mail">Email</p>
</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="dentifiant">Identifiant</p>
<p id = "mail">Email</p>
</div>
</div>
<h1>Our Team Members</h1>
<div id="blocs">
<div id="carteidentite1">
<div>
<img
id="avatar"
src="/assets/kisspng-computer-icons-avatar-login-user-avatar-5ac207e6c8c133.5629676315226654468223.png"
alt=""
/>
</div>
<div id="personne1">
<p id="nom">Nom</p>
<p id="prenom">Prenom</p>
<p id="identifiant">Identifiant</p>
<p id="mail">Email</p>
</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>
</body>
<footer>
</body>
<footer>
<nav aria-label="pagination">
<ul class="pagination">
<li><a href=""><span aria-hidden="true">«</span><span class="visuallyhidden"></span></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>
<ul class="pagination">
<li>
<a href=""
><span aria-hidden="true">«</span
><span class="visuallyhidden"></span
></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>
</footer>
</html>
</footer>
</html>

77
script.js
View File

@ -1,22 +1,61 @@
const AVATAR = document.getElementById('avatar');
const NOM = document.getElementById('nom');
const PRENOM = document.getElementById('prenom');
const IDENTIFIANT = document.getElementById('identifiant');
const MAIL = document.getElementById('mail');
const AVATAR = document.getElementById("avatar");
const NOM = document.getElementById("nom");
const PRENOM = document.getElementById("prenom");
const IDENTIFIANT = document.getElementById("identifiant");
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) => {
fetch(API_URL).then(resp => {
console.log(resp);
return resp.json()
}).then(data => {
console.log(data);
AVATAR.src =data.avatar ;
NOM.innerText=data.last_name;
PRENOM.innerText=data.first_name;
IDENTIFIANT.innerText=data.id;
MAIL.innerText=data.email;
})
class Identite {
constructor(avatar, nom, prenom, identifiant, mail) {
this.avatar = avatar;
this.nom = nom;
this.prenom = prenom;
this.identifiant = identifiant;
this.mail = mail;
}
PersonneSuiv() {
PERSONNE.innerHTML += `
<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 {
text-align: center;
font-family: Mulish, sans-serif;
font-family: "Mulish", sans-serif;
}
#h1{
font-family: Mulish, sans-serif;
font-size: x-large;
font-style: bold;
font-weight: 800;
line-height: 26px;
letter-spacing: 0.3545454740524292px;
text-align: center;
#h1 {
font-family: "Mulish", sans-serif;
font-size: 144px;
font-style: bold;
font-weight: 1500;
line-height: 26px;
letter-spacing: 0.3545454740524292px;
text-align: center;
}
#blocs {
@ -20,46 +18,52 @@ text-align: center;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
}
#personne1,
#personne2,
#personne3 {
width: 200px;
height: 200px;
background: #edecfe;
background-color: #3d36c2;
width: 160px;
height: 175px;
margin: 50px 5px 5px 40px;
/* background: #edecfe; */
border-radius: 10px;
padding: 20px;
font-family: Mulish, sans-serif;
font-family: "Mulish", sans-serif;
font-size: small;
font-style: normal;
/* font-style: normal; */
font-weight: 800;
line-height: 5%;
letter-spacing: 0.3545454740524292px;
text-align: left;
display: table-cell;
vertical-align: bottom;
z-index: 0;
position: relative;
}
#nom,#prenom{
#nom {
font-weight: bold;
font-size: 30px;
}
#prenom {
font-size: medium;
}
#avatar {
display: flex;
text-align: left;
width: 100px;
height: 100px;
border: 50%;
margin-bottom: 100px;
padding-top: 50px;
z-index: 1;
position: absolute;
position: relative;
/* display: flex; */
left: -25%;
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*/
@ -69,7 +73,7 @@ nav {
justify-content: center;
border-top: 1px solid #eee;
margin-top: 1em;
padding-top: .5em;
padding-top: 0.5em;
}
.pagination {
@ -85,9 +89,9 @@ nav {
.pagination a {
display: block;
padding: .5em 1em;
padding: 0.5em 1em;
border: 1px solid #999;
border-radius: .2em;
border-radius: 0.2em;
text-decoration: none;
}
@ -95,6 +99,3 @@ nav {
background-color: #333;
color: #fff;
}