gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update resources to https on bootstrap responsive

Browse Source
This commit is contained in:
Cesar Dario Garcia 2016-03-29 02:24:08 -07:00
parent ba2c111eb5
commit 31ade5df09
1 changed files with 127 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

254
challenges/01-front-end-development-certification/bootstrap.json
View File

@ -104,102 +104,12 @@
"id": "bad87fee1348bd9acde08812",
"title": "Make Images Mobile Responsive",
"description": [
"First, add a new image below the existing one. Set its <code>src</code> attribute to <code>http://bit.ly/fcc-running-cats</code>.",
"First, add a new image below the existing one. Set its <code>src</code> attribute to <code>https://bit.ly/fcc-running-cats</code>.",
"It would be great if this image could be exactly the width of our phone's screen.",
"Fortunately, with Bootstrap, all we need to do is add the <code>img-responsive</code> class to your image. Do this, and the image should perfectly fit the width of your page."
],
"challengeSeed": [
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<style>",
" .red-text {",
" color: red;",
" }",
"",
" h2 {",
" font-family: Lobster, Monospace;",
" }",
"",
" p {",
" font-size: 16px;",
" font-family: Monospace;",
" }",
"",
" .thick-green-border {",
" border-color: green;",
" border-width: 10px;",
" border-style: solid;",
" border-radius: 50%;",
" }",
"",
" .smaller-image {",
" width: 100px;",
" }",
"</style>",
"",
"<div class=\"container-fluid\">",
" <h2 class=\"red-text\">CatPhotoApp</h2>",
"",
" <p>Click here for <a href=\"#\">cat photos</a>.</p>",
"",
" <a href=\"#\"><img class=\"smaller-image thick-green-border\" src=\"http://bit.ly/fcc-relaxing-cat\"></a>",
"",
" <p>Things cats love:</p>",
" <ul>",
" <li>cat nip</li>",
" <li>laser pointers</li>",
" <li>lasagna</li>",
" </ul>",
" <p>Top 3 things cats hate:</p>",
" <ol>",
" <li>flea treatment</li>",
" <li>thunder</li>",
" <li>other cats</li>",
" </ol>",
" <form action=\"/submit-cat-photo\">",
" <label><input type=\"radio\" name=\"indoor-outdoor\"> Indoor</label>",
" <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label>",
" <label><input type=\"checkbox\" name=\"personality\"> Loving</label>",
" <label><input type=\"checkbox\" name=\"personality\"> Lazy</label>",
" <label><input type=\"checkbox\" name=\"personality\"> Crazy</label>",
" <input type=\"text\" placeholder=\"cat photo URL\" required>",
" <button type=\"submit\">Submit</button>",
" </form>",
"</div>"
],
"tests": [
"assert($(\"img\").length === 2, 'message: You should have a total of two images.');",
"assert($(\"img:eq(1)\").hasClass(\"img-responsive\"), 'message: Your new image should be below your old one and have the class <code>img-responsive</code>.');",
"assert(!$(\"img:eq(1)\").hasClass(\"smaller-image\"), 'message: Your new image should not have the class <code>smaller-image</code>.');",
"assert($(\"img:eq(1)\").attr(\"src\") === \"http://bit.ly/fcc-running-cats\", 'message: Your new image should have a <code>src</code> of <code>http&#58;//bit.ly/fcc-running-cats</code>.');",
"assert(code.match(/<img/g) && code.match(/<img[^<]*>/g).length === 2 && code.match(/<img/g).length === 2, 'message: Make sure your new <code>img</code> element has a closing angle bracket.');"
],
"type": "waypoint",
"challengeType": 0,
"titleEs": "Haz que las imágenes sean adaptativas en dispositivos móviles",
"descriptionEs": [
"Primero, agrega una nueva imagen debajo que la que ya existe. Haz que su atributo <code>src</code> sea <code>http://bit.ly/fcc-running-cats</code>.",
"Sería genial si esta imagen fuera exactamente del tamaño de la pantalla de nuestro teléfono.",
"Afortunadamente, con Bootstrap, todo lo que tenemos que hacer es agregar la clase <code>img-responsive</code> a tu imagen. Hazlo, y verás que la imagen se ajustará perfectamente al ancho de tu página."
],
"nameFr": "Rendre des images adaptatives aux appareils mobiles",
"descriptionFr": [
"It would be great if this image could be exactly the width of our phone's screen.",
"Fortunately, with Bootstrap, all we need to do is add the <code>img-responsive</code> class to your image. Do this, and the image should perfectly fit the width of your page.",
"D'abord, ajoutez une nouvelle image en dessous de celle qui eiste dejà. Changez l'attribut <code>src</src> en <code>http://bit.ly/fcc-running-cats</code>.",
"Ce serait absolument super si notre image pouvait être exactement de la largeur de l'écran du téléphone.",
"Heureusement, avec Bootstrap, il faut seulement ajouter la classe <code>img-responsive</code> à notre image. Faites le, et l'image devrait s'ajuster parfaitement à la largeur de la page."
]
},
{
"id": "bad87fee1348bd8acde08812",
"title": "Center Text with Bootstrap",
"description": [
"Now that we're using Bootstrap, we can center our heading element to make it look better. All we need to do is add the class <code>text-center</code> to our <code>h2</code> element.",
"Remember that you can add several classes to the same element by separating each of them with a space, like this:",
"<code>&#60h2 class=\"red-text text-center\"&#62your text&#60/h2&#62</code>"
],
"challengeSeed": [
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<style>",
" .red-text {",
" color: red;",
@ -233,7 +143,97 @@
"",
" <a href=\"#\"><img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
"",
" <img src=\"http://bit.ly/fcc-running-cats\" class=\"img-responsive\">",
" <p>Things cats love:</p>",
" <ul>",
" <li>cat nip</li>",
" <li>laser pointers</li>",
" <li>lasagna</li>",
" </ul>",
" <p>Top 3 things cats hate:</p>",
" <ol>",
" <li>flea treatment</li>",
" <li>thunder</li>",
" <li>other cats</li>",
" </ol>",
" <form action=\"/submit-cat-photo\">",
" <label><input type=\"radio\" name=\"indoor-outdoor\"> Indoor</label>",
" <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label>",
" <label><input type=\"checkbox\" name=\"personality\"> Loving</label>",
" <label><input type=\"checkbox\" name=\"personality\"> Lazy</label>",
" <label><input type=\"checkbox\" name=\"personality\"> Crazy</label>",
" <input type=\"text\" placeholder=\"cat photo URL\" required>",
" <button type=\"submit\">Submit</button>",
" </form>",
"</div>"
],
"tests": [
"assert($(\"img\").length === 2, 'message: You should have a total of two images.');",
"assert($(\"img:eq(1)\").hasClass(\"img-responsive\"), 'message: Your new image should be below your old one and have the class <code>img-responsive</code>.');",
"assert(!$(\"img:eq(1)\").hasClass(\"smaller-image\"), 'message: Your new image should not have the class <code>smaller-image</code>.');",
"assert($(\"img:eq(1)\").attr(\"src\") === \"https://bit.ly/fcc-running-cats\", 'message: Your new image should have a <code>src</code> of <code>https&#58;//bit.ly/fcc-running-cats</code>.');",
"assert(code.match(/<img/g) && code.match(/<img[^<]*>/g).length === 2 && code.match(/<img/g).length === 2, 'message: Make sure your new <code>img</code> element has a closing angle bracket.');"
],
"type": "waypoint",
"challengeType": 0,
"titleEs": "Haz que las imágenes sean adaptativas en dispositivos móviles",
"descriptionEs": [
"Primero, agrega una nueva imagen debajo que la que ya existe. Haz que su atributo <code>src</code> sea <code>https://bit.ly/fcc-running-cats</code>.",
"Sería genial si esta imagen fuera exactamente del tamaño de la pantalla de nuestro teléfono.",
"Afortunadamente, con Bootstrap, todo lo que tenemos que hacer es agregar la clase <code>img-responsive</code> a tu imagen. Hazlo, y verás que la imagen se ajustará perfectamente al ancho de tu página."
],
"nameFr": "Rendre des images adaptatives aux appareils mobiles",
"descriptionFr": [
"It would be great if this image could be exactly the width of our phone's screen.",
"Fortunately, with Bootstrap, all we need to do is add the <code>img-responsive</code> class to your image. Do this, and the image should perfectly fit the width of your page.",
"D'abord, ajoutez une nouvelle image en dessous de celle qui eiste dejà. Changez l'attribut <code>src</src> en <code>https://bit.ly/fcc-running-cats</code>.",
"Ce serait absolument super si notre image pouvait être exactement de la largeur de l'écran du téléphone.",
"Heureusement, avec Bootstrap, il faut seulement ajouter la classe <code>img-responsive</code> à notre image. Faites le, et l'image devrait s'ajuster parfaitement à la largeur de la page."
]
},
{
"id": "bad87fee1348bd8acde08812",
"title": "Center Text with Bootstrap",
"description": [
"Now that we're using Bootstrap, we can center our heading element to make it look better. All we need to do is add the class <code>text-center</code> to our <code>h2</code> element.",
"Remember that you can add several classes to the same element by separating each of them with a space, like this:",
"<code>&#60h2 class=\"red-text text-center\"&#62your text&#60/h2&#62</code>"
],
"challengeSeed": [
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<style>",
" .red-text {",
" color: red;",
" }",
"",
" h2 {",
" font-family: Lobster, Monospace;",
" }",
"",
" p {",
" font-size: 16px;",
" font-family: Monospace;",
" }",
"",
" .thick-green-border {",
" border-color: green;",
" border-width: 10px;",
" border-style: solid;",
" border-radius: 50%;",
" }",
"",
" .smaller-image {",
" width: 100px;",
" }",
"</style>",
"",
"<div class=\"container-fluid\">",
" <h2 class=\"red-text\">CatPhotoApp</h2>",
"",
" <p>Click here for <a href=\"#\">cat photos</a>.</p>",
"",
" <a href=\"#\"><img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
"",
" <img src=\"https://bit.ly/fcc-running-cats\" class=\"img-responsive\">",
" <p>Things cats love:</p>",
" <ul>",
" <li>cat nip</li>",
@ -284,7 +284,7 @@
"Create a new <code>button</code> element below your large kitten photo. Give it the class <code>btn</code> and the text of \"Like\"."
],
"challengeSeed": [
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<style>",
" .red-text {",
" color: red;",
@ -318,7 +318,7 @@
"",
" <a href=\"#\"><img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
"",
" <img src=\"http://bit.ly/fcc-running-cats\" class=\"img-responsive\">",
" <img src=\"https://bit.ly/fcc-running-cats\" class=\"img-responsive\">",
"",
" <p>Things cats love:</p>",
" <ul>",
@ -372,7 +372,7 @@
"Add Bootstrap's <code>btn-block</code> class to your Bootstrap button."
],
"challengeSeed": [
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<style>",
" .red-text {",
" color: red;",
@ -406,7 +406,7 @@
"",
" <a href=\"#\"><img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
"",
" <img src=\"http://bit.ly/fcc-running-cats\" class=\"img-responsive\">",
" <img src=\"https://bit.ly/fcc-running-cats\" class=\"img-responsive\">",
" <button class=\"btn\">Like</button>",
" <p>Things cats love:</p>",
" <ul>",
@ -450,7 +450,7 @@
"descriptionFr": [
"Normalement, vos éléments <code>button</code> sont aussi large que le texte qu'ils contiennent. En les transformants en éléments blocs, vos boutons vont s'ajuster pour remplir l'intégralité de l'espace horizontal de la page et tous les éléments qui le suivront se placeront sur une \"nouvelle ligne\" en dessous du bloc.",
"Cette image illustre la différence entre éléments <code>inline</code> (sans briser la ligne) et éléments <code>block-level</code> (en blocs)",
"<a href=\"http://i.imgur.com/O32cDWE.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"http://i.imgur.com/O32cDWE.png\" title=\"Cliquez pour agrandir\" alt=\"Un bouton \"inline\" est aussi petit que le texte qu'il contient. Dans cette image, il est centré. En dessous de celui-ci il y a un bouton \"block-level\" , qui s'étire et remplit l'espace horizontal.'></a>",
"<a href=\"https://i.imgur.com/O32cDWE.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"https://i.imgur.com/O32cDWE.png\" title=\"Cliquez pour agrandir\" alt=\"Un bouton \"inline\" est aussi petit que le texte qu'il contient. Dans cette image, il est centré. En dessous de celui-ci il y a un bouton \"block-level\" , qui s'étire et remplit l'espace horizontal.'></a>",
"Notez que ces boutons ont toujours besoin de la classe <code>btn</code>",
"Ajoutez la classe Bootstrap <code>btn-block</code> à votre bouton Bootstrap."
]
@ -464,7 +464,7 @@
"Note that this button will still need the <code>btn</code> and <code>btn-block</code> classes."
],
"challengeSeed": [
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<style>",
" .red-text {",
" color: red;",
@ -498,7 +498,7 @@
"",
" <a href=\"#\"><img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
"",
" <img src=\"http://bit.ly/fcc-running-cats\" class=\"img-responsive\">",
" <img src=\"https://bit.ly/fcc-running-cats\" class=\"img-responsive\">",
" <button class=\"btn btn-block\">Like</button>",
" <p>Things cats love:</p>",
" <ul>",
@ -552,7 +552,7 @@
"Note that these buttons still need the <code>btn</code> and <code>btn-block</code> classes."
],
"challengeSeed": [
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<style>",
" .red-text {",
" color: red;",
@ -586,7 +586,7 @@
"",
" <a href=\"#\"><img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
"",
" <img src=\"http://bit.ly/fcc-running-cats\" class=\"img-responsive\">",
" <img src=\"https://bit.ly/fcc-running-cats\" class=\"img-responsive\">",
" <button class=\"btn btn-block btn-primary\">Like</button>",
" <p>Things cats love:</p>",
" <ul>",
@ -641,7 +641,7 @@
"Note that these buttons still need the <code>btn</code> and <code>btn-block</code> classes."
],
"challengeSeed": [
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<style>",
" .red-text {",
" color: red;",
@ -675,7 +675,7 @@
"",
" <a href=\"#\"><img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
"",
" <img src=\"http://bit.ly/fcc-running-cats\" class=\"img-responsive\">",
" <img src=\"https://bit.ly/fcc-running-cats\" class=\"img-responsive\">",
" <button class=\"btn btn-block btn-primary\">Like</button>",
" <button class=\"btn btn-block btn-info\">Info</button>",
" <p>Things cats love:</p>",
@ -736,7 +736,7 @@
"The <code>row</code> class is applied to a <code>div</code>, and the buttons themselves can be nested within it."
],
"challengeSeed": [
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<style>",
" .red-text {",
" color: red;",
@ -770,7 +770,7 @@
"",
" <a href=\"#\"><img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
"",
" <img src=\"http://bit.ly/fcc-running-cats\" class=\"img-responsive\">",
" <img src=\"https://bit.ly/fcc-running-cats\" class=\"img-responsive\">",
" <button class=\"btn btn-block btn-primary\">Like</button>",
" <button class=\"btn btn-block btn-info\">Info</button>",
" <button class=\"btn btn-block btn-danger\">Delete</button>",
@ -819,7 +819,7 @@
"descriptionFr": [
"Bootstrap utilise un système de grille adaptative, qui rend plus simple le placement des éléments en rangées et la spécification de la largeur relative de chaque élément. La plupart des classes de Bootstrap peuvent être associés à un élément <code>div</code>",
"Voici un diagramme décrivant le fonctionnement du système de grille à 12 colonnes:",
"<a href=\"http://i.imgur.com/FaYuui8.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"http://i.imgur.com/FaYuui8.png\" title=\"Cliquer pour agrandir\" alt=\"Une image illustrant le système de grille Bootstrap\"></a>",
"<a href=\"https://i.imgur.com/FaYuui8.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"https://i.imgur.com/FaYuui8.png\" title=\"Cliquer pour agrandir\" alt=\"Une image illustrant le système de grille Bootstrap\"></a>",
"Notez que dans cet exemple, nous avons utilisé la classe <code>col-md-*</code>. Ici, <code>md</code> signifie medium, et <code>*</code> donne le nombre de colonnes en largeur de l'élément. Dans le cas présenté, on a défini la largeur en colonnes d' un élément sur un écrand de taille medium, comme un ordinateur portable.",
"Dans l'application de photos de chats que nous sommes en train de construire, nous utiliserons <code>col-xs-*</code>, où <code>xs</code> signifie extrêmement petit (comme un écran de téléphone mobile), et <code>*</code> est le nombre de colonnes en largeur de l'élément.",
"Mettez les boutons <code>Like</code>, <code>info</code> et <code>Delete</code> côte-à-côte en les enveloppant tous dans un élément <code>&#60;div class=\"row\"&#62;</code>, puis chacun d'entre eux dans un élément <code>&#60;div class=\"col-xs-4\"&#62;</code> element.",
@ -837,7 +837,7 @@
"Finally, remove the \"smaller-image\" class from your first <code>img</code> element and replace it with the <code>img-responsive</code> class."
],
"challengeSeed": [
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<style>",
" .red-text {",
" color: red;",
@ -871,7 +871,7 @@
"",
" <a href=\"#\"><img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
"",
" <img src=\"http://bit.ly/fcc-running-cats\" class=\"img-responsive\">",
" <img src=\"https://bit.ly/fcc-running-cats\" class=\"img-responsive\">",
" <div class=\"row\">",
" <div class=\"col-xs-4\">",
" <button class=\"btn btn-block btn-primary\">Like</button>",
@ -945,7 +945,7 @@
"<code>&#60;p&#62;Top 3 things cats &#60;span class = \"text-danger\"&#62;hate:&#60;/span&#62;&#60;/p&#62;</code>"
],
"challengeSeed": [
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<style>",
"",
" h2 {",
@ -966,7 +966,7 @@
"",
" <a href=\"#\"><img class=\"img-responsive thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
"",
" <img src=\"http://bit.ly/fcc-running-cats\" class=\"img-responsive\">",
" <img src=\"https://bit.ly/fcc-running-cats\" class=\"img-responsive\">",
" <div class=\"row\">",
" <div class=\"col-xs-4\">",
" <button class=\"btn btn-block btn-primary\">Like</button>",
@ -1023,7 +1023,7 @@
"descriptionFr": [
"Vous pouvez utiliser les spans pour créer des éléments inline. Vous rappelez vous quand nous avions utilisé la classe <code>btn-block</code> pour remplir la rangée entière?",
"Cette image illustre la différence entre les éléments <code>inline</code> (en ligne) et les éléments <code>block-level</code> (de blocs):",
"<a href=\"http://i.imgur.com/O32cDWE.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"http://i.imgur.com/O32cDWE.png\" title=\"Cliquez pour élargir\" alt=\"Un bouton \"inline\" est aussi petit que le texte qu'il contient. Dans cette image, c'est centré. En dessous il y a un bouton \"block-level\", qui s'étire à tout l'espace horizontal.'></a>",
"<a href=\"https://i.imgur.com/O32cDWE.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"https://i.imgur.com/O32cDWE.png\" title=\"Cliquez pour élargir\" alt=\"Un bouton \"inline\" est aussi petit que le texte qu'il contient. Dans cette image, c'est centré. En dessous il y a un bouton \"block-level\", qui s'étire à tout l'espace horizontal.'></a>",
"En utilisant un élément <code>span</code>, vous pouvez mettre ensemble plusieurs éléments, et même donner un style différent à plusieurs parties d'un même élément",
"Nichez le mot \"love\" dans votre élément \"Things cats love\" en dessous dans un élément <code>span</code>; Ensuite donnez à ce <code>span</code> la classe <code>text-danger</code> pour rendre le texte rouge.",
"Il faudrait que vous fassiez ainsi pour l'élément \"Top 3 things cats hate\":",
@ -1044,7 +1044,7 @@
"Notice how the image is now just the right size to fit along the text?"
],
"challengeSeed": [
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"",
"<style>",
" h2 {",
@ -1064,7 +1064,7 @@
"",
" <a href=\"#\"><img class=\"img-responsive thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
"",
" <img src=\"http://bit.ly/fcc-running-cats\" class=\"img-responsive\">",
" <img src=\"https://bit.ly/fcc-running-cats\" class=\"img-responsive\">",
" <div class=\"row\">",
" <div class=\"col-xs-4\">",
" <button class=\"btn btn-block btn-primary\">Like</button>",
@ -1124,7 +1124,7 @@
"Nous allons réaliser un entête tout simple pour notre appli Cat Photo App en plaçant le titre et l'image de chat relaxante dans la même rangée.",
"Rappelez-vous, Bootstrap utilise un système de grille adaptative, qui rend facile le placement des éléments en rangées et la définition de la largeur relative de chaque élément. La plupart des classes de Bootstrap peuvent être appliquées à un élément <code>div</code>.",
"Voici un diagramme du fonctionnement de la grille à 12 colonnes de Bootstrap:",
"<a href=\"http://i.imgur.com/FaYuui8.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"http://i.imgur.com/FaYuui8.png\" title=\"Cliquer pour élargir\" alt=\"Une image illlustrant le système de grille de Bootstrap\"></a>",
"<a href=\"https://i.imgur.com/FaYuui8.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"https://i.imgur.com/FaYuui8.png\" title=\"Cliquer pour élargir\" alt=\"Une image illlustrant le système de grille de Bootstrap\"></a>",
"Notez que dans cet exemple, on utilise la classe <code>col-md-*</code>. Ici <code>md</code> signifie medium, et <code>*</code> est un nombre spécifiant le nombre de colonnes en largeur que l'élément devrait avoir.",
"Enveloppez votre première image et votre élément <code>h2</code> dans un seul élément <code>&#60;div class=\"row\"&#62;</code>. Mettez l'élément <code>h2</code> dans un <code>&#60;div class=\"col-xs-8\"&#62;</code> et votre image dans un <code>&#60;div class=\"col-xs-4\"&#62;</code> pour qu'ils soient sur la même ligne.",
"Voyez vous comme l'image est maintenant exactement ajustée à la bonne taille pour être à côté du texte?"
@ -1143,7 +1143,7 @@
"Use Font Awesome to add a <code>thumbs-up</code> icon to your like button by giving it an <code>i</code> element with the classes <code>fa</code> and <code>fa-thumbs-up</code>."
],
"challengeSeed": [
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<style>",
" h2 {",
" font-family: Lobster, Monospace;",
@ -1166,7 +1166,7 @@
" <a href=\"#\"><img class=\"img-responsive thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
" </div>",
" </div>",
" <img src=\"http://bit.ly/fcc-running-cats\" class=\"img-responsive\">",
" <img src=\"https://bit.ly/fcc-running-cats\" class=\"img-responsive\">",
" <div class=\"row\">",
" <div class=\"col-xs-4\">",
" <button class=\"btn btn-block btn-primary\">Like</button>",
@ -1238,7 +1238,7 @@
"Use Font Awesome to add an <code>info-circle</code> icon to your info button and a <code>trash</code> icon to your delete button."
],
"challengeSeed": [
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<style>",
" h2 {",
" font-family: Lobster, Monospace;",
@ -1261,7 +1261,7 @@
" <a href=\"#\"><img class=\"img-responsive thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
" </div>",
" </div>",
" <img src=\"http://bit.ly/fcc-running-cats\" class=\"img-responsive\">",
" <img src=\"https://bit.ly/fcc-running-cats\" class=\"img-responsive\">",
" <div class=\"row\">",
" <div class=\"col-xs-4\">",
" <button class=\"btn btn-block btn-primary\"><i class=\"fa fa-thumbs-up\"></i> Like</button>",
@ -1322,7 +1322,7 @@
"Nest all of your radio buttons within a <code>&#60;div class=\"row\"&#62;</code> element. Then nest each of them within a <code>&#60;div class=\"col-xs-6\"&#62;</code> element."
],
"challengeSeed": [
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<style>",
" h2 {",
" font-family: Lobster, Monospace;",
@ -1345,7 +1345,7 @@
" <a href=\"#\"><img class=\"img-responsive thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
" </div>",
" </div>",
" <img src=\"http://bit.ly/fcc-running-cats\" class=\"img-responsive\">",
" <img src=\"https://bit.ly/fcc-running-cats\" class=\"img-responsive\">",
" <div class=\"row\">",
" <div class=\"col-xs-4\">",
" <button class=\"btn btn-block btn-primary\"><i class=\"fa fa-thumbs-up\"></i> Like</button>",
@ -1406,7 +1406,7 @@
"Nest all your checkboxes in a <code>&#60;div class=\"row\"&#62;</code> element. Then nest each of them in a <code>&#60;div class=\"col-xs-4\"&#62;</code> element."
],
"challengeSeed": [
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<style>",
" h2 {",
" font-family: Lobster, Monospace;",
@ -1430,7 +1430,7 @@
" <a href=\"#\"><img class=\"img-responsive thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
" </div>",
" </div>",
" <img src=\"http://bit.ly/fcc-running-cats\" class=\"img-responsive\">",
" <img src=\"https://bit.ly/fcc-running-cats\" class=\"img-responsive\">",
" <div class=\"row\">",
" <div class=\"col-xs-4\">",
" <button class=\"btn btn-block btn-primary\"><i class=\"fa fa-thumbs-up\"></i> Like</button>",
@ -1498,7 +1498,7 @@
"Give your form's text input field a class of <code>form-control</code>. Give your form's submit button the classes <code>btn btn-primary</code>. Also give this button the Font Awesome icon of <code>fa-paper-plane</code>."
],
"challengeSeed": [
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<style>",
" h2 {",
" font-family: Lobster, Monospace;",
@ -1522,7 +1522,7 @@
" <a href=\"#\"><img class=\"img-responsive thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
" </div>",
" </div>",
" <img src=\"http://bit.ly/fcc-running-cats\" class=\"img-responsive\">",
" <img src=\"https://bit.ly/fcc-running-cats\" class=\"img-responsive\">",
" <div class=\"row\">",
" <div class=\"col-xs-4\">",
" <button class=\"btn btn-block btn-primary\"><i class=\"fa fa-thumbs-up\"></i> Like</button>",
@ -1599,7 +1599,7 @@
"This is the last challenge we'll do for our Cat Photo App for now. We hope you've enjoyed learning Font Awesome, Bootstrap, and responsive design!"
],
"challengeSeed": [
"<link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
"<style>",
" h2 {",
" font-family: Lobster, Monospace;",
@ -1623,7 +1623,7 @@
" <a href=\"#\"><img class=\"img-responsive thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
" </div>",
" </div>",
" <img src=\"http://bit.ly/fcc-running-cats\" class=\"img-responsive\">",
" <img src=\"https://bit.ly/fcc-running-cats\" class=\"img-responsive\">",
" <div class=\"row\">",
" <div class=\"col-xs-4\">",
" <button class=\"btn btn-block btn-primary\"><i class=\"fa fa-thumbs-up\"></i> Like</button>",