xseignard/EXO1.md

## EXO1.md

      
    Raw
  

              EXO1.md
            
          
    Créer le drapeau de la Norvège en HTML/CSS

Le drapeau doit faire 800px par 600px et être centré horizontalement et verticamlement sur le viewport grace à flexbox.
Liste des contraintes


vous n'avez le droit qu'à 5 div dans le HTML et rien d'autre!!
vous n'avez le droit qu'à 3 classes CSS!!
les éléments du drapeau doivent être positionnés en absolu

Liste des propriétés CSS acceptables


margin (que sur le body)
position
display
justify-content
align-items
width
height
background-color
right
bottom
border-bottom
border-top
border-right
border-left

La propriété CSS à exploiter

box-sizing: https://developer.mozilla.org/fr/docs/Web/CSS/box-sizing

  
## EXO2.md

      
    Raw
  

              EXO2.md
            
          
    Créer le rendu d'image suivant


N'utiliser que flexbox!!
Liste des contraintes


vous avez le droit d'utiliser 11 div au maximum!
vous pouvez utiliser autant de classes CSS que vous voulez

Liste des propriétés CSS acceptables


margin
height
display
flex-grow
flex-direction
flex-wrap
background-image
background-size
background-position

Vous n'avez le droit d'utiliser la propriéré width qu'UNE SEULE FOIS, ET AVEC LA VALEUR 50%, soit "width: 50%"
Afficher les images

Utilisez la technique de la background image recouvrant la div comme ce qui suit:
background-image: url(https://placem.at/places?w=800&h=600&txt=&random=1);
background-size: cover;
background-position: center;

Utilisez le service https://placem.at pour charger des images comme ci-dessus.
A chaque fois que vous voulez une nouvelle image, changez la valeur de random dans l'url, soit :

https://placem.at/places?w=800&h=600&txt=&random=1
https://placem.at/places?w=800&h=600&txt=&random=2
https://placem.at/places?w=800&h=600&txt=&random=3
https://placem.at/places?w=800&h=600&txt=&random=4
etc.


## QUESTIONS.md

      
    Raw
  

              QUESTIONS.md
            
          
    Questions

Sans ordinateur, vous devez répondre aux questions suivantes.
Quelle sera la hauteur de la <div> ?

Soit le code HTML suivant :
<div class="container">
	<span class="mon-span">Je suis un span</span>
	<span class="mon-span">Je suis un span</span>
</div>

Et le CSS associé :
.mon-span {
	display: block;
	height: 100px;
}

Quelle est la hauteur de la <div> ayant pour classe container ?
Quelle sera la position de la <div> ?

Soit le code HTML suivant :
<body>
	<div class="container">
		<div class="carre"></div>
	</div>
</body>

Et le CSS associé :
body {
	margin: 0;
}

.container {
	top: 100px;
	left: 100px;
}

.carre {
	position: absolute;
	top: 100px;
	left: 100px;
	width: 100px;
	height: 100px;
	background-color: red;
}

Quelle est la distance horizontale et verticale, en pixels, entre le coin "top left" du viewport et le carré rouge ?
Quelle(s) couleur(s) est(sont) visible(s) ?

Soit le code HTML suivant :
<body>
	<div class="carre red"></div>
	<div class="carre green"></div>
	<div class="carre blue"></div>
</body>

Et le CSS associé :
.carre {
	position: absolute;
	width: 100px;
	height: 100px;
}

.red {
	background-color: red;
}

.green {
	background-color: green;
}

.blue {
	background-color: blue;
}

Quelle(s) couleur(s) est(sont) visible(s) ?