16/03/2023 11:49 TP noté 3 : relecture de tentative
Commencé le jeudi 16 mars 2023, 10:34
État Terminé
Terminé le jeudi 16 mars 2023, 11:49
Temps mis 1 heure 15 min
Note Pas encore évalué
[Link] 1/14
16/03/2023 11:49 TP noté 3 : relecture de tentative
Question 1
Terminé
Noté sur 5,00
Proposez un code html et css permettant d'obtenir l’aperçu ci-dessous en utilisant les éléments suivants
image : Cheshire Cat
bleu : rgb(104, 220, 255)
noir : #000002
famille de la police : cursive
[Link] 2/14
16/03/2023 11:49 TP noté 3 : relecture de tentative
fichier html
<html lang="fr">
<body>
<h1>WE'RE ALL MAD HERE ALICE</h1>
<img src="Cheshire Cat" alt="Cheshire Cat Image">
[Link] 3/14
16/03/2023 11:49 TP noté 3 : relecture de tentative
</body>
</html>
fichier css
body{
background-color: #000002;
}
h1{
color: rgb(104, 220, 255);
font-family: cursive;
}
img {
background-color: rgb(104, 220, 255);
border-radius: 10px 10px 10px 10px;
margin: auto;
display: block;
[Link] 4/14
16/03/2023 11:49 TP noté 3 : relecture de tentative
Question 2
Terminé
Noté sur 2,00
Entrez ci-dessous le code CSS permettant de faire disparaitre l'élément "hidden"
<body>
<p>Le <strong>Collaporta</strong> est un sort pour sceller une porte.</p>
<p id="hidden">Le sort <strong>Avada kedavra</strong> est un sort utilisé pour tuer quelqu'un.</p>
<p>Le <strong>Flipendo</strong> est un sort pour pétrifier quelqu'un pendant 3 secondes.</p>
</body>
#hidden{
display: none;
}
[Link] 5/14
16/03/2023 11:49 TP noté 3 : relecture de tentative
Question 3
Terminé
Noté sur 6,00
Modifier le code HTML et la feuille de style CSS pour obtenir le rendu ci-dessous, en utilisant les images suivantes.(Pink,
White, Black)
HTML :
<body>
<table></table>
</body>
CSS:
img {
display: block;
}
table {
margin: auto;
border-collapse: collapse;
border-spacing: 0;
}
td {
padding: 20px;
border: 1px black solid;
}
[Link] 6/14
16/03/2023 11:49 TP noté 3 : relecture de tentative
HTML :
<body> <table> <tr> <td><img src="[Link] <td><img
src="[Link] <td><img src="[Link]
web/EvalMaterial/[Link]"></td> </tr> <tr> <td><img src="[Link] <td>
<img src="[Link] <td><img src="[Link]
web/EvalMaterial/[Link]"></td> </tr> <tr> <td><img src="[Link] <td>
<img src="[Link] <td><img src="[Link]
web/EvalMaterial/[Link]"></td> </tr> </table> </body>
CSS :
img {
display: block;
width: 100%;
height: 100%; }
table {
[Link] 7/14
16/03/2023 11:49 TP noté 3 : relecture de tentative
margin: auto;
border-collapse: collapse;
border-spacing: 0;
width: 400px;
height: 400px; }
td {
padding: 0;
border: none; }
[Link] 8/14
16/03/2023 11:49 TP noté 3 : relecture de tentative
Question 4
Terminé
Noté sur 4,00
Écrire le code HTML et CSS pour obtenir le rendu ci-dessous, en utilisant les images suivantes :
planete1, planete2, planete3, fond
P.S: Faites de sorte d'étirer l'image du fond pour couvrir l’arrière plan
FICHIER HTML
<body>
<div class="planets">
<img src="[Link] alt="Planete 1">
<img src="[Link] alt="Planete 2">
[Link] 9/14
16/03/2023 11:49 TP noté 3 : relecture de tentative
<img src="[Link] alt="Planete 3">
</div>
</body>
fichier css
body {
background-image: url([Link]
background-size: cover;
margin: 0;
padding: 0;
}
.planets {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.planets img {
width: 150px;
height: 150px;
margin: 20px;
animation-name: spin;
animation-duration: 5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
[Link] 10/14
16/03/2023 11:49 TP noté 3 : relecture de tentative
Question 5
Terminé
Noté sur 3,00
Quelles modifications apporter au code CSS ci-dessous pour obtenir le résultat suivant?
HTML:
<div class="conteneur">
<div class="box one"> 1</div>
<div class="box two"> 2</div>
<div class="box three"> 3</div>
<div>
CSS:
*{
font-family: Arial;
}
.box {
background-color: #fff;
border-radius: 10px;
[Link] 11/14
16/03/2023 11:49 TP noté 3 : relecture de tentative
border: 3px solid black;
height: 150px;
width: 150px;
display: flex;
justify-content: center;
align-items: center;
}
.conteneur {
position: relative;
height: 300px;
width: 300px;
}
.one {
background-color: #C2B0F9;
left: 0;
top: 90px;
}
.two {
background-color: #CBFCB9;
right: 70px;
top: 0;
}
.three {
background-color: #F2A3BB;
right: 0;
bottom: 20px;
}
*{
margin : 0;
*{
[Link] 12/14
16/03/2023 11:49 TP noté 3 : relecture de tentative
font-family: Arial;
}
.box {
background-color: #fff;
border-radius: 10px;
border: 3px solid black;
height: 150px;
width: 150px;
display: flex;
justify-content: center;
align-items: center;
}
.conteneur {
position: relative;
height: 300px;
width: 300px;
}
.one {
background-color: #C2B0F9;
position: absolute;
left: 0;
top: 90px;
}
.two {
background-color: #CBFCB9;
position: absolute;
right: 70px;
top: 0;
}
.three {
[Link] 13/14
16/03/2023 11:49 TP noté 3 : relecture de tentative
background-color: #F2A3BB;
right: 0;
position: absolute;
bottom: 20px;
}
[Link] 14/14