vincentRamiere/tp-figma-js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

mise en page

Browse Source
This commit is contained in:
Vincent Ramiere 2021-10-18 11:55:53 +02:00
parent 5995d85878
commit 6604046de6
3 changed files with 22 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -10,7 +10,7 @@
</head>
<body>
<h1>Our Team Members</h1>
<section id="bloc1">
<section class="bloc1">
<!--<div id="fiche">
<img id = "avatar" src="" alt="Photo d'identité">
<p id = "nom"></p> <p id = "prenom"></p>

22
script.js
View File

@ -1,10 +1,10 @@
const NOM = document.getElementById('nom');
const PRENOM = document.getElementById('prenom');
const IDENTIFIANT = document.getElementById('identifiant');
const EMAIL = document.getElementById('email');
const AVATAR = document.getElementById('avatar');
/*const NOM = document.getElementsByClassName('nom');
const PRENOM = document.getElementsByClassName('prenom');
const IDENTIFIANT = document.getElementsByClassName('identifiant');
const EMAIL = document.getElementsByClassName('email');
const AVATAR = document.getElementsByClassName('avatar');*/
const MEMBER = document.getElementById('personne');
console.log(MEMBER);
const API_URL = "https://reqres.in/api/users?page=1";
@ -21,12 +21,12 @@ fetch(API_URL)
console.log(PERSONNE);
MEMBER.innerHTML +=`
<div = fiche>
<div class = "fiche">
<img src="${PERSONNE.avatar}" alt="Photo d'identité">
<p id= "nom">${PERSONNE.last_name}</p>
<p id="prenom">${PERSONNE.first_name}</p>
<p id ="identifiant">${PERSONNE.id}</p>
<p id = "email">${PERSONNE.email}</p>
<p class= "nom">${PERSONNE.last_name}</p>
<p class="prenom">${PERSONNE.first_name}</p>
<p class ="identifiant">${PERSONNE.id}</p>
<p class = "email">${PERSONNE.email}</p>
</div>
`

13
style.css
View File

@ -2,13 +2,20 @@ h1 {
text-align: center;
}
#bloc1 {
.bloc1 {
text-align: left;
}
#personne{
.fiche{
background-color: rgba(237, 236, 254, 1);
}
#personne{
display: flex;
flex-direction: row;
justify-content: space-around;
flex-wrap: wrap;
}
img{
@ -16,6 +23,6 @@ img{
clip-path:ellipse(50% 50%);
}
#nom, #prenom {
.nom, .prenom {
display: inline;
}