Le contenu principal

Le contenu principal gère le bandeau de bracelets images et les trois modules découvertes.

le Main

1. Propriétés du main
   Comme pour la bannière, il doit être centré dans la page et Il a une largeur fixe.

   /* - - -  - -  - MAIN - - - - - -  - - - -- */
   main {
   	width: 960px;
   	margin: 0 auto;
   }

2. Le bandeau de bracelets
   C'est une liste. On va lui appliquer une propriété display : flex qui permet par défaut d'aligner horizontalement les contenus de la boîte. On centre horizontalement et verticalement ensuite les contenus.
   Le fond en rayures est un dégradé qui se répète avec deux épaisseurs différentes, 2px et 15px.

   ul#bandeau-bracelets {
   	display: flex;
   	justify-content: center;
   	align-items: center;
   	padding: 1.5em 0 0;
   	background: repeating-linear-gradient(rgba(0,70,100,0.8) 0, rgba(190,230,251,0.8) 2px, rgba(130,210,250,0.3) 0, rgba(130,210,250,0.3) 15px);
   }

   Figure: Display flex pour organiser les contenus horizontalement

   
   
   

3. La section de contenu des modules découverte
   On provoque comme pour les bracelets l'organisation du contenu horizontalement, mais avec une disposition où le premier élément est sur le bord gauche de son parent et le dernier sur le bord droit du même parent.

   section#contenu {
   	display: flex;
   	justify-content: space-between;
   }

   Figure: Display flex avec alignement horizontal space-between

   
   
   

4. Les articles (modules)
   Ils ont une dimension précise commune, mais un fond différent. Une image pour le premier et le troisième et une couleur pour le deuxième. La propriété background-size avec la valeur cover permet de remplir la boite quand elle change de dimension. Ce qui sera utile pour la version smartphone.

   article.module1, article.module2, article.module3 {
   	width: 320px;
   	height: 198px;
   }
   article.module1 {
   	background: url(../images-site/sport-smartphone-petite.jpg); background-size: cover;
   }
   article.module2 {
   	background: tan;
   }article.module3 {
   	background: url(../images-site/courir-sur-la-plage_petite.jpg); background-size: cover;
   }

   Figure: background-size: cover, permet d'adpter l'image à son contenu

   
   
   

5. Le texte des modules
   Mise en forme des titres et paragraphes des modules.

   article.module1 h2, article.module3 h2 {
   	padding: 15px;
   	line-height: 1.25;
   	font-size: 1.3em;
   }
   article.module1 p, article.module3 p {
   	padding: 15px;	
   }
   article.module2 h2 {
   	padding-top: 60px;
   	text-align: center;
   	font-size: 2.5em;
   }

   Figure: Les liens ne sont pas encore traités.

   
   
   

6. Ajouter un contenu en CSS
   Sans le faire en HTML, il est possible de générer un contenu que l'on peut mettre en forme en CSS. On va placer le signe # devant le texte du module 2 et choisir une couleur et une épaisseur de graisse.

   article.module2 h2::before {
   	content: "# ";
   	color: #FFF;
   	font-weight: 900;
   }

   Figure: Pseuso-classe before pour ajouter du contenu