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

22
script.js
View File

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

13
style.css
View File

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