Révision

Direction Régional Nord-Ouest I
CFIJ AL KARIA DÉVELOPPER DES SITES WEB

Filière : DÉVELOPPEMENT
DIGITAL STATIQUES
Niveau : TS
Année : 2022/2023 Révision
Nom : Ihssan Nour Eddine , Zakaria Labay
1. Quels sont les types d’éléments HTML

le type "bloc" (parfois appelé "boîte"), le type "en-ligne" et le type "invisible".
Certaines propriétés CSS ne sont conçues que pour s'appliquer aux éléments "blocs".
2. A quoi sert la balise suivante :

<metaname="viewport"content="width=device-width, initial-scale=1.0">
Cet élément est indispensable pour avoir une page web responsive (qui s'adapte à la taille de l'écran
utilisé).
3. Donner le code HTML qui permet d’envoyer un mail.

<!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, initialscale=1.0">
<title>Document</title>
</head>
<body>
<h1>Envoyer un mail</h1>
<p>M'Envoyer un <a href="mailto :pierre.giroud@edhec.com"></a></p>

</body>
</html>
4. La différence avec la balise <img> est que <picture> est associée à certains
attributs. Ces attributs déterminent l'affichage de sorte qu'une image
5. Quel est la différence entre les deux balises La balise <picture> et <img> ?
La différence avec la balise <img> est que <picture> est associée à certains attributs.
Ces attributs déterminent l'affichage de sorte qu'une image s'affiche correctement sur les
appareils mobiles avec de petits écrans.
6. Quelle est la différence cellspacing et cellpadding ?
La principale différence entre cellpadding et cellpacing est que cellpadding

est utilisé pour fixer la largeur entre le bord de la cellule et son contenu.
7. Citer Les unités relatives au texte et les unités relatives au viewport.

Ces unités relatives au viewport sont essentielles pour mettre en place un
design responsive
8. Donnez le sélecteur qui sélectionne un lien déjà visité et qui pointe vers l’URL
«http://www.google.fr». <a href=http://www.google.fr».//>site de visite</a>
9. Donnez le code CSS (sélecteurs + propriétés + valeurs) qui permet d’effectuer les
opérations suivantes sur un paragraphe de classe note:
 Le texte doit s’afficher en italique.
 L’arrière-plan du texte doit s’afficher en vert avec une transparence de 50%.
 Le texte doit être justifié.
 La taille du texte doit être de 25 pixels.
note {
font-style: italic;
background-color: rgba(0, 128, 0, 0.5);
text-align: justify;
font-size: 25px;
}
10. Expliquer le sélecteur d'attribut "[ ]"

Ces sélecteurs permettent de cibler un élément en fonction de la présence d'un attribut
unique (par exemple href)
11. Expliquer :
li :first-of-type + li
{
color : red;
}
il doit être colore rouge
o Sous-élément B
o Sous-élément B
12. Expliquer le code suivant :
p ~ span
{
color : red;
}
<span>Ici, ce n'est pas rouge.</span>
<p>Voici un paragraphe.</p>
<code>Un peu de code.</code>
<span>Et un autre span.</span>
<code>Encore du code</code>
<span>Ici aussi, c'est rouge</span>
il doit être colore rouge dans la balise span
Ici, ce n'est pas rouge.
Voici un paragraphe.
Un peu de code. Et un autre span. Encore du code Ici aussi, c'est rouge
13. Donner le résultat du code suivant :

<ul>
<li>
<div>Élément 1</div>
<ul>
<li>Sous-élément A</li>
<li>Sous-élément B</li>
</ul>
</li>
<li>
<div>Élément 2</div>
<ul>
<li>Sous-élément A</li>
<li>Sous-élément B</li>
</ul>
</li>
</ul>
li
{
list-style-type : disc;
}
li li
{
list-style-type : circle;
}
 Élément 1
o Sous-élément A
o Sous-élément B
 Élément 2
o Sous-élément A
o Sous-élément B
14. Expliquer le code suivant :
input :invalid
{
border : 2px solid red;
}
AJouter des commentaires pour expliquer chaque ligne

a{
text-decoration: none; /* ………………………………………………………………
*/
color: red; /* ……………………………………………………………… */
font-style: italic; /* ……………………………………………………………… */
}
a:hover /* ……………………………………………………………… */
{
text-decoration: underline; /*
……………………………………………………………… */
color: green; /* ……………………………………………………………… */
background-color: #CFE1EB; /*
……………………………………………………………… */
}
15. Donnez le sélecteur qui sélectionne un paragraphe situé immédiatement après un

élément a de classe bijou.
Le sélecteur CSS qui sélectionne un paragraphe situé immédiatement après un élément de classe
"bijou" +p
16. Donnez le code CSS (sélecteurs + propriétés + valeurs) qui permet d’effectuer les
opérations suivantes sur le corps de la page (élément body) :
•La famille de la police doit être verdana.
•Le texte doit s’afficher en vert.
•Le texte doit être souligné.
•La police doit être en gras.
body {
font-family: verdana;
color: green: text-decoration: underline; font-weight:

}
17. Quelles sont les propriétés qui définissent la taille des marges sur les quatre côtés de
l'élément.
La propriété margin définit la taille des marges sur les quatre côtés de l'élément. C'est une
propriété raccourcie qui permet de manipuler les autres propriétés de marges : margin-top ,
margin-right , margin-bottom et margin-left . Il est possible d'utiliser des valeurs négatives
pour chacun des côtés.
18. Quels sont les mécanismes de positionnement de base en CSS :

Les mecanismea ou propriétés top, right, bottom, left et z-index ne s'appliquent pas.
19. A quoi sert Flexbox
Flexbox permet de contrôler la direction de la distrubution des

éléments flex à l’intérieur du conteneur flex.
20. Quelle sont les valeurs possibles qu’on peut utiliser pour
align-items et justify-content
.conteneur
{
background-color : blue;
height : 230px;
width : 500px;
display : flex;
flex-direction : row;
align-items : stretch | flex-start | flex-end | center | baseline;
justify-content : flex-start | flex-end | center | space-around | space-between | space-evenly;
}
.conteneur
{
background-color : blue;
height : 230px;
width : 500px;
display : flex;
flex-direction : row;
align-items : stretch | flex-start | flex-end | center | baseline;
justify-content : flex-start | flex-end | center | space-around | space-between | space-evenly;
}
21. Quel sont les types d’animation en CSS ?

animation.
Expérimental animation-composition.
animation-delay.
animation-direction.
animation-duration.
animation-fill-mode.
animation-iteration-count.
animation-name.
22. Citer les éléments de la charte graphique d'un site web

Typographies et couleurs. ...
Création du logotype. ...
Les champs d'application du logo. ...
Notre logo. ...
Notre typographie. ...
Nos couleurs. ...
Notre image de marque. ...
Notre identité visuelle.
23. Citer les classes du Système de grille Bootstrap 5
<ul class="pagination pagination-lg">

<li class="page-item"><a class="page-link" href="#">Précédent</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">Suivant</a></li>
</ul>
Row
Col
Col-Xs-sm-md-lg-xlg-xxlg
24. Donnez le code HTML qui donnera l’affichage ci-dessous. Ne donnez que le contenu
de l’élément body. Il n’est pas demandé d’afficher les bordures du tableau.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>

<table border="1" >
<thead>
<tr>
<td>prenome</td>
<td>Age</td>
</tr>
</thead>
<tbody>
<tr>
<td>Julien</td>

<td rowspan="2">52</td>
</tr>
<tr>
<td>Marc</td>

</tr>
<tr>
<td>Antoine</td>

<td>24</td>
</tr>
</tbody>
</table>
</body>
</html>
TP 1
Transformer la suite de paragraphes en une liste à puces.
<body>
<h1>Mes langages de programmation préférés:</h1>
<p>HTML</p>
<p>CSS</p>
<p>Bootstrap</p>
<p>React</p>
</body>
<body>
<h1>Mes <span>langages </span>> préférés</h1>
<p>HTML</p>
<p>CSS</p> <p>Bootstrap</p>
<p>React</p>
</body>
TP 2
Corriger les problèmes.
<body>
<h1>Mes <span>langages <h1> préférés</span>
<p>HTML</p>
<p>CSS</p>
<p>Bootstrap</p>
<p>React</p>
</body>
<body>
<h1>Mes <span>langages </span>> préférés</h1>
<p>HTML</p>
<p>CSS</p> <p>Bootstrap</p>
<p>React</p>
</body>
TP 3
Ajouter un lien dans les paragraphes pour les différents cocktails.
<body>
<p>Un cloud public, qu'est-ce que c’est ?</p>
<p> Bootstrap est une collection d'outils utiles à la création du design
(graphisme, animation et interactions avec la page dans le navigateur,
etc.) de sites et d'applications web. C'est un ensemble qui contient des
codes HTML et CSS, des formulaires, boutons, outils de navigation et autres
éléments interactifs, ainsi que des extensions JavaScript en option.
</p>
</body>
<body>
<p> Un <a href="https://www.google.com/url?

sa=t&rct=j&q=&esrc=s&source=web&cd=&cad=rj
asuact=8&ved=2ahUKEwjo3LHqzvb7AhUwTgQEнe 18A-
BQETOECBYQAw&url=https://ar.wikipedia.orgs2Fwiki/%D8%AD%D9%
881250812583425D8%A842508425A9 $25D8%B3%D8%AD825D8%A7%D8%A832 5D9%8A
%D8%A96usg=AOvVaw2x11CNR0mah69Kc2 Hcom1">cloud public</a>, qu'est-ce que
c'est ?</p>
<p><a href="https://ar.wikipedia.org/wiki/3‫بوت‬D8B3�AA0881308
A73D8�">Bootstrap </a>
est une collection d'outils utiles à la création du design (graphisme,
animation et interactions avec la page dans le navigateur, etc.) de sites
et d'applications web. C'est un ensemble qui contient des codes HTML et
CSS, des formulaires, boutons, outils de navigation et autres éléments
interactifs, ainsi que des extensions JavaScript en option.</p> </body>
TP 4
Ajouter un texte alternatif à l'image.
<body>
<p> HTML signifie « HyperText Markup Language » qu'on peut traduire par «
langage de balises pour l'hypertexte ». Il est utilisé afin de créer et de
représenter le contenu d'une page web et sa structure. </p>
<p><img src="html.png" /></p>
</body>
<body>
<p> HTML signifie « HyperText Markup Language » qu'on peut traduire par «
langage de balises pour l'hypertexte ». Il est utilisé afin de créer et de
représenter le contenu d'une page web et sa structure. </p>
<p><img src="html.png" alt="Girl in a jacket"/></p>
</body>

TP 5
Ajouter une barre horizontale entre le titre et le paragraphe.
<body>
<h1>Mon super titre</h1>
<p>
CSS est l’acronyme de « Cascading Style Sheets » ce qui signifie « feuille
de style en cascade ».
Le CSS correspond à un langage informatique permettant de mettre en forme

des pages web (HTML ou XML).
Ce langage est donc composé des fameuses « feuilles de style en cascade »

également appelées fichiers CSS (.css) et contient des éléments de codage.
</p>
</body>
<body>
<h1>Mon super titre</h1>
<hr>
<p>
CSS est l’acronyme de « Cascading Style Sheets » ce qui signifie «
feuille de style en cascade ».

Le CSS correspond à un langage informatique permettant de mettre en
forme des pages web (HTML ou XML).

Ce langage est donc composé des fameuses « feuilles de style en
cascade » également appelées fichiers CSS (.css) et contient des éléments de
codage.
</p>
</body>
TP 6
Faire en sorte qu'à l'intérieur des paragraphes, chaque vers du poème soit sur une ligne.
<body>
<p>
Prends mon cœur, il est à toi mon amour
Depuis longtemps j'en avais fait ton bien :
Il est sensible, il te sera fidèle toujours ;
Rien ne pourra jamais le séparer du tien.
</p>
<p>
Toujours fidèle au serment qui nous lie,
D'un feu constant je brûlerai pour toi :
Le Ciel te fit pour embellir ma vie ;
Mon bonheur est de vivre sous ta loi.
</p>
</body>
<body>
Prends mon cœur, il est à toi mon amour <br> Depuis longtemps j'en avais
fait ton bien: <br> Il est sensible, il te sera fidèle toujours: <br> Rien
ne pourra jamais le séparer du tien.br
</p>
<p> Toujours fidèle au serment qui nous lie, <br>
D'un feu constant je brûlerai pour toi : <br>
Le Ciel te fit pour embellir ma vie : <br>
Mon bonheur est de vivre sous ta loi. <br
</p> </body>
TP 7
Construire un tableau avec la liste des pays et des capitales.
<table border="1">
<tr><th>Pays</th><th>capitale</th></tr
<tr><td>Maroc</td><td>Rabat</td></tr
<tr><td>Algérie</td><td>Algérie</td></tr>
<tr><td>libye</td><td>tripoli</td></tr>
<p<td>Palestine</td><td>Jérusalem</td></tr>
<tr><td>Diamètre</td><td>Doha</td></tr>
TP8 (bootstrap)
1. Au survol de la souris, on veut avoir le bouton login en rouge.
2. Mettre le mot Welcome en gris.
3. Quand on clique sur le Sign-up, on veut afficher la page signup.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Login V2</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
body, html {
height: 100%;
font-family: Poppins-Regular, sans-serif;
a{
font-family: Poppins-Regular;
font-size: 14px;
line-height: 1.7;
color: #139317;
margin: 0px;
transition: all 0.4s;
-webkit-transition: all 0.4s;
-o-transition: all 0.4s;
-moz-transition: all 0.4s;
a:focus {
outline: none !important;
color: #139317;
a:hover {
text-decoration: none;
color: #139317;
h1,h2,h3,h4,h5,h6 {
margin: 0px;
p{
font-size: 14px;
line-height: 1.7;
color: #666666;
margin: 0px;
ul, li {
margin: 4px;
list-style-type: circle;
input {
outline: none;
border: none;
}
textarea {
outline: none;
border: none;
textarea:focus, input:focus {
border-color: transparent !important;
input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; }
input:focus::-moz-placeholder { color:transparent; }
input:focus:-ms-input-placeholder { color:transparent; }
textarea:focus::-webkit-input-placeholder { color:transparent; }
textarea:focus:-moz-placeholder { color:transparent; }
textarea:focus::-moz-placeholder { color:transparent; }
textarea:focus:-ms-input-placeholder { color:transparent; }
input::-webkit-input-placeholder { color: #adadad;}
input:-moz-placeholder { color: #adadad;}
input::-moz-placeholder { color: #adadad;}
input:-ms-input-placeholder { color: #adadad;}
textarea::-webkit-input-placeholder { color: #adadad;}
textarea:-moz-placeholder { color: #adadad;}
textarea::-moz-placeholder { color: #adadad;}
textarea:-ms-input-placeholder { color: #adadad;}

button {
border: none;
background: transparent;
button:hover {
cursor: pointer;
iframe {
border: none !important;
.txt1 {
font-size: 13px;
color: #666666;
line-height: 1.5;
.txt2 {
font-size: 13px;
color: #333333;
line-height: 1.5;
.txt3 {
font-size: 13px;
color: #666666;
line-height: 1.5;
.txt4 {
font-size: 13px;
color: #333333;
line-height: 1.5;
.limiter {
width: 100%;
margin: 0 auto;
.container-login100 {
width: 100%;
min-height: 100vh;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding: 15px;
background: #f2f2f2;
.wrap-login100 {
width: 390px;
background: #fff;
border-radius: 10px;
overflow: hidden;
padding: 77px 55px 33px 55px;
box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
-ms-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
.login100-form {
width: 100%;
}
.login100-form-title {
display: block;
font-family: Poppins-Bold;
font-size: 30px;
color: #333333;
line-height: 1.2;
text-align: center;
.login100-form-title i {
font-size: 60px;
.wrap-input100 {
width: 100%;
position: relative;
border-bottom: 2px solid #adadad;
margin-bottom: 37px;
.input100 {
font-size: 15px;
color: #555555;
line-height: 1.2;
display: block;
width: 100%;
height: 45px;
padding: 0 5px;
.focus-input100 {
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
.focus-input100::before {
content: "";
display: block;
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;

.focus-input100::after {
font-size: 15px;
color: #999999;
line-height: 1.2;
content: attr(data-placeholder);
display: block;
width: 100%;
position: absolute;
top: 16px;
left: 0px;
padding-left: 5px;
.input100:focus + .focus-input100::after {
top: -15px;
}
.input100:focus + .focus-input100::before {
width: 100%;
.has-val.input100 + .focus-input100::after {
top: -15px;
.has-val.input100 + .focus-input100::before {
width: 100%;
.container-login100-form-btn {
display: -moz-box;
display: flex;
flex-wrap: wrap;
padding-top: 13px;
.wrap-login100-form-btn {
width: 100%;
display: block;
position: relative;
z-index: 1;
overflow: hidden;
margin: 0 auto;
.login100-form-bgbtn {
position: absolute;
z-index: -1;
width: 400%;
height: 300%;
background: #64e73d;
top: 0;
left: -100%;
.login100-form-btn {
font-family: Poppins-Medium;
font-size: 15px;
color: #ffffff;
line-height: 1.2;
text-transform: uppercase;
display: -moz-box;
display: flex;
padding: 0 20px;
width: 100%;
height: 50px;
.wrap-login100-form-btn:hover .login100-form-bgbtn {
left: 0;
.validate-input {
position: relative;
}
.alert-validate::before {
content: attr(data-validate);
position: absolute;
max-width: 70%;
background-color: #fff;
border: 1px solid #c80000;
border-radius: 2px;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
right: 0px;
color: #c80000;
font-size: 13px;
line-height: 1.4;
text-align: left;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity 0.4s;
-o-transition: opacity 0.4s;
-moz-transition: opacity 0.4s;

transition: opacity 0.4s;
.alert-validate::after {
content: "\f06a";
font-family: FontAwesome;
font-size: 16px;
color: #c80000;
display: block;
position: absolute;
top: 50%;
right: 5px;
.alert-validate:hover:before {
visibility: visible;
opacity: 1;
@media (max-width: 992px) {
opacity: 1;
.avatar {
vertical-align: middle;
width: 100px;
height: 100px;
border-radius: 100%;
margin-left: 30%;
margin-top: 20%;
</style>
<body>
<div class="limiter">
<div class="container-login100">
<div class="wrap-login100">
<form class="login100-form validate-form">
<span class="login100-form-title p-b-26">
Welcome
</span>
<div class="login-box">
<img src="avatar.jpg" class="avatar" alt="">
</div>
<div class="inner">
<i class="zmdi zmdi-font"></i>
</span>
<div class="wrap-input100 validate-input" data-validate =

"Valid email is: a@b.c">
<input class="input100" type="text" name="email"

placeholder="Email">
</div>
<div class="wrap-input100 validate-input" data-

validate="Enter password">
<input class="input100" type="password"

name="pass" placeholder="Password">
</div>
<div class="container-login100-form-btn">
<div class="wrap-login100-form-btn">
<div class="login100-form-bgbtn"></div>
<button class="login100-form-btn">
Login
</button>
</div>
</div>
<div class="text-center p-t-115">
<span class="txt1">
<ul>
<li> Forgot
</span>
<a class="txt2" href="">
username/password?
</a>
</li>
</ul>
<span class="txt3">
<ul>
<li> Don’t have an account?
</span>
<a class="txt4" href="#">
Sign Up
</a>
</li>
</ul>
</div>
</div>
</form>
</div>
</div>
</div>
<div id="dropDownSelect1"></div>
</body>
</html>
TP9 (bootstrap)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Booking Form HTML Template</title>

<link href="https://fonts.googleapis.com/css?family=Montserrat:300,600"
rel="stylesheet">
<link type="text/css" rel="stylesheet" href="bootstrap.min.css" />
</head>
<style>
.section {
position: relative;
height: 100vh;
}
.section .section-center {
position: absolute;
top: 50%;
left: 0;
right: 0;
}
#booking {
font-family: 'Montserrat', sans-serif;
background-image: url('yy.jpg');
background-size: cover;
background-position: center;
font-weight: 300;
}
.booking-form {
background: #fff;
padding: 30px 15px 0px;
border-radius: 4px;
overflow: auto;
}
.booking-form .form-group {
position: relative;
}
.booking-form .form-control {
border: none;
height: 65px;
-webkit-box-shadow: none;
box-shadow: none;
font-size: 24px;
color: #090a0b;
font-weight: 300;
border-radius: 4px;
}
.booking-form .form-control::-webkit-input-placeholder {
color: #b1b6bd;
}
.booking-form .form-control:-ms-input-placeholder {
color: #b1b6bd;
}
.booking-form .form-control::placeholder {
color: #b1b6bd;
}
.booking-form input[type="date"].form-control:invalid {
color: #b1b6bd;
}
.booking-form select.form-control {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.booking-form select.form-control+.select-arrow {
position: absolute;
right: 0px;
top: 0px;
width: 24px;
text-align: center;
height: 65px;
line-height: 65px;
color: #b1b6bd;
font-size: 14px;
}
.booking-form select.form-control+.select-arrow:after {
content: '\279C';
display: block;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.booking-form .form-label {
color: #184c8f;
display: block;
font-weight: 600;
height: 25px;
line-height: 25px;
font-size: 16px;
position: relative;
margin-top: 10px;
}
.booking-form .form-label:after {
content: '';
position: absolute;
left: 10px;
top: -10px;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 10px 0 10px;
border-color: #f2f1f1 transparent transparent transparent;
}
.booking-form .form-btn {
}
.booking-form .submit-btn {
background: #184c8f;
border: none;
font-weight: 600;
height: 90px;
font-size: 18px;
width: 100%;
color: #fff;
border-radius: 4px;
display: block;
}
</style>
<body>

<div id="booking" class="section">
<div class="section-center">
<div class="container">
<div class="row">
<div class="booking-form">
<form>
<div class="col-md-8">
<div class="form-group">
<input class="form-control" type="text"
placeholder="Enter Address, zip, city or airport">
<span class="form-
label">Destination</span>
</div>
</div>
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<span class="select-arrow"></span>
<span class="form-label">Guests</span>
</div>
</div>
<select class="form-control">
<option>0</option>
<option>1</option>
<option>2</option>
</select>
<span class="select-arrow"></span>
<span class="form-label">Children</span>
</div>
</div>
<input class="form-control" type="date"
required>
<span class="form-label">Check In</span>
</div>
</div>
<input class="form-control" type="date"
required>
<span class="form-label">Check out</span>
</div>
</div>
<div class="form-btn">
<button class="submit-btn">Check
availability</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">

<head>
<title>Login V2</title>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/
2.2.0/css/material-design-iconic-font.min.css">
<link rel="stylesheet" type="text/css" href="util.css">

</head>
<style>
/*//////////////////////////////////////////////////////////////////
[ FONT ]*/
@font-face {
src: url('../fonts/poppins/Poppins-Regular.ttf');
}
@font-face {
src: url('../fonts/poppins/Poppins-Medium.ttf');
}
@font-face {
src: url('../fonts/poppins/Poppins-Bold.ttf');
}
@font-face {
font-family: Poppins-SemiBold;
src: url('../fonts/poppins/Poppins-SemiBold.ttf');
}
/*//////////////////////////////////////////////////////////////////
[ RESTYLE TAG ]*/
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body, html {
height: 100%;
font-family: Poppins-Regular, sans-serif;
}
/*---------------------------------------------*/
a {
font-size: 14px;
line-height: 1.7;
color: #666666;
margin: 0px;
}
a:focus {
}
a:hover {
text-decoration: none;
color: #6a7dfe;
color: -webkit-linear-gradient(left, #21d4fd, #b721ff);
color: -o-linear-gradient(left, #21d4fd, #b721ff);
color: -moz-linear-gradient(left, #21d4fd, #b721ff);
color: linear-gradient(left, #21d4fd, #b721ff);
}
/*---------------------------------------------*/
h1,h2,h3,h4,h5,h6 {
margin: 0px;
}
p {
font-size: 14px;
line-height: 1.7;
color: #666666;
margin: 0px;
}
ul, li {
margin: 0px;
list-style-type: none;
}
/*---------------------------------------------*/
input {
outline: none;
border: none;
}
textarea {
outline: none;
border: none;
}
textarea:focus, input:focus {
border-color: transparent !important;
}
input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; }
input:focus::-moz-placeholder { color:transparent; }
input:focus:-ms-input-placeholder { color:transparent; }
textarea:focus::-webkit-input-placeholder { color:transparent; }
textarea:focus:-moz-placeholder { color:transparent; }
textarea:focus::-moz-placeholder { color:transparent; }
textarea:focus:-ms-input-placeholder { color:transparent; }
input::-webkit-input-placeholder { color: #adadad;}
input:-moz-placeholder { color: #adadad;}
input::-moz-placeholder { color: #adadad;}
input:-ms-input-placeholder { color: #adadad;}
textarea::-webkit-input-placeholder { color: #adadad;}

textarea:-moz-placeholder { color: #adadad;}
textarea::-moz-placeholder { color: #adadad;}
textarea:-ms-input-placeholder { color: #adadad;}
/*---------------------------------------------*/
button {
border: none;
}
button:hover {
cursor: pointer;
}
iframe {
border: none !important;
}
/*//////////////////////////////////////////////////////////////////
[ Utility ]*/
.txt1 {
font-size: 13px;
color: #666666;
line-height: 1.5;
}
.txt2 {
font-size: 13px;
color: #333333;
line-height: 1.5;
}
/*//////////////////////////////////////////////////////////////////
[ login ]*/
.limiter {
width: 100%;
margin: 0 auto;
}
.container-login100 {
width: 100%;
min-height: 100vh;
display: -moz-box;
display: flex;
flex-wrap: wrap;
padding: 15px;
}
.wrap-login100 {
width: 390px;
background: #fff;
overflow: hidden;
box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);

-moz-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
-o-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
-ms-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
}
/*------------------------------------------------------------------
[ Form ]*/
.login100-form {
width: 100%;
}
.login100-form-title {
display: block;
font-size: 30px;
color: #333333;
line-height: 1.2;
text-align: center;
}
.login100-form-title i {
font-size: 60px;
}
/*------------------------------------------------------------------
[ Input ]*/
.wrap-input100 {
width: 100%;
position: relative;
border-bottom: 2px solid #adadad;
}
.input100 {
font-size: 15px;
color: #555555;
line-height: 1.2;
display: block;
width: 100%;
height: 45px;
padding: 0 5px;
}
/*---------------------------------------------*/
.focus-input100 {
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.focus-input100::before {
content: "";
display: block;
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;

background: #6a7dfe;
background: -webkit-linear-gradient(left, #21d4fd, #b721ff);
background: -o-linear-gradient(left, #21d4fd, #b721ff);
background: -moz-linear-gradient(left, #21d4fd, #b721ff);
background: linear-gradient(left, #21d4fd, #b721ff);
}
.focus-input100::after {
font-size: 15px;
color: #999999;
line-height: 1.2;
content: attr(data-placeholder);
display: block;
width: 100%;
position: absolute;
top: 16px;
left: 0px;
padding-left: 5px;

}
.input100:focus + .focus-input100::after {
top: -15px;
}
.input100:focus + .focus-input100::before {
width: 100%;
}
.has-val.input100 + .focus-input100::after {
top: -15px;
}
.has-val.input100 + .focus-input100::before {
width: 100%;
}
/*---------------------------------------------*/
.btn-show-pass {
font-size: 15px;
color: #999999;
display: -moz-box;
display: flex;
position: absolute;
height: 100%;
top: 0;
right: 0;
padding-right: 5px;
cursor: pointer;
}
.btn-show-pass:hover {
color: #6a7dfe;
}
.btn-show-pass.active {
color: #6a7dfe;
}
/*------------------------------------------------------------------
[ Button ]*/
.container-login100-form-btn {
display: -moz-box;
display: flex;
flex-wrap: wrap;
padding-top: 13px;
}
.wrap-login100-form-btn {
width: 100%;
display: block;
position: relative;
z-index: 1;
overflow: hidden;
margin: 0 auto;
}
.login100-form-bgbtn {
position: absolute;
z-index: -1;
width: 300%;
height: 100%;
background: #a64bf4;
background: -webkit-linear-gradient(right, #21d4fd, #b721ff, #21d4fd,
#b721ff);
background: -o-linear-gradient(right, #21d4fd, #b721ff, #21d4fd, #b721ff);
background: -moz-linear-gradient(right, #21d4fd, #b721ff, #21d4fd, #b721ff);
background: linear-gradient(right, #21d4fd, #b721ff, #21d4fd, #b721ff);
top: 0;
left: -100%;

}
.login100-form-btn {
font-size: 15px;
color: #fff;
line-height: 1.2;
display: -moz-box;
display: flex;
padding: 0 20px;
width: 100%;
height: 50px;
}
.wrap-login100-form-btn:hover .login100-form-bgbtn {
left: 0;
}
/*------------------------------------------------------------------
[ Responsive ]*/

.wrap-login100 {
}
}
/*------------------------------------------------------------------
[ Alert validate ]*/
.validate-input {
position: relative;
}
content: attr(data-validate);
position: absolute;
max-width: 70%;
border: 1px solid #c80000;
border-radius: 2px;
top: 50%;
right: 0px;
color: #c80000;
font-size: 13px;
line-height: 1.4;
text-align: left;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity 0.4s;
-o-transition: opacity 0.4s;
-moz-transition: opacity 0.4s;
transition: opacity 0.4s;
}
.alert-validate::after {
content: "\f06a";
font-family: FontAwesome;
font-size: 16px;
color: #c80000;
display: block;
position: absolute;
top: 50%;
right: 5px;
}
.alert-validate:hover:before {
opacity: 1;
}

opacity: 1;
}
}
</style>
<body>

<div class="limiter">
<div class="container-login100">
<div class="wrap-login100">
<form class="login100-form validate-form">
Welcome
</span>
<i class="zmdi zmdi-font"></i>
</span>
<div class="wrap-input100 validate-input" data-validate =

"Valid email is: a@b.c">
<input class="input100" type="text" name="email">
<span class="focus-input100" data-
placeholder="Email"></span>
</div>
<div class="wrap-input100 validate-input" data-

validate="Enter password">
<span class="btn-show-pass">
<i class="zmdi zmdi-eye"></i>
</span>
<input class="input100" type="password" name="pass">
<span class="focus-input100" data-
placeholder="Password"></span>
</div>
<div class="container-login100-form-btn">
<div class="wrap-login100-form-btn">
<div class="login100-form-bgbtn"></div>
<button class="login100-form-btn">
Login
</button>
</div>
</div>

<span class="txt1">
Don’t have an account?
</span>
<a class="txt2" href="#">

Sign Up
</a>
</div>
</form>
</div>
</div>
</div>

<div id="dropDownSelect1"></div>

</body>
</html>

Révision

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Révision

Transféré par

Droits d'auteur :

Formats disponibles

Direction Régional Nord-Ouest I

CFIJ AL KARIA DÉVELOPPER DES SITES WEB

1. Quels sont les types d’éléments HTML

2. A quoi sert la balise suivante :

3. Donner le code HTML qui permet d’envoyer un mail.

6. Quelle est la différence cellspacing et cellpadding ?

La principale différence entre cellpadding et cellpacing est que cellpadding

7. Citer Les unités relatives au texte et les unités relatives au viewport.

background-color: rgba(0, 128, 0, 0.5);

10. Expliquer le sélecteur d'attribut "[ ]"

il doit être colore rouge

12. Expliquer le code suivant :

il doit être colore rouge dans la balise span

Ici, ce n'est pas rouge.

Un peu de code. Et un autre span. Encore du code Ici aussi, c'est rouge

13. Donner le résultat du code suivant :

AJouter des commentaires pour expliquer chaque ligne

15. Donnez le sélecteur qui sélectionne un paragraphe situé immédiatement après un

color: green: text-decoration: underline; font-weight:

18. Quels sont les mécanismes de positionnement de base en CSS :

19. A quoi sert Flexbox

Flexbox permet de contrôler la direction de la distrubution des

21. Quel sont les types d’animation en CSS ?

22. Citer les éléments de la charte graphique d'un site web

23. Citer les classes du Système de grille Bootstrap 5

<ul class="pagination pagination-lg">

<h1>Mes <span>langages </span>> préférés</h1>

<h1>Mes <span>langages </span>> préférés</h1>

<p> Un <a href="https://www.google.com/url?

Le CSS correspond à un langage informatique permettant de mettre en forme

Ce langage est donc composé des fameuses « feuilles de style en cascade »

Le Ciel te fit pour embellir ma vie : <br>

Mon bonheur est de vivre sous ta loi. <br

<meta name="viewport" content="width=device-width, initial-scale=1">

font-family: Poppins-Regular, sans-serif;

transition: all 0.4s;

-webkit-transition: all 0.4s;

-o-transition: all 0.4s;

-moz-transition: all 0.4s;

outline: none !important;

border-color: transparent !important;

input::-webkit-input-placeholder { color: #adadad;}

input:-moz-placeholder { color: #adadad;}

input::-moz-placeholder { color: #adadad;}

input:-ms-input-placeholder { color: #adadad;}

textarea::-webkit-input-placeholder { color: #adadad;}

textarea:-moz-placeholder { color: #adadad;}

textarea::-moz-placeholder { color: #adadad;}

textarea:-ms-input-placeholder { color: #adadad;}

outline: none !important;

border: none !important;

padding: 77px 55px 33px 55px;

box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);

-moz-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);

-webkit-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);

-o-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);

-ms-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);

border-bottom: 2px solid #adadad;

-webkit-transition: all 0.4s;

-o-transition: all 0.4s;

-moz-transition: all 0.4s;

-webkit-transition: all 0.4s;

-o-transition: all 0.4s;

-moz-transition: all 0.4s;