Merge branch 'bugron-feature/enlarge-images' into staging
This commit is contained in:
Quincy Larson
@ -26,6 +26,7 @@
|
||||
"moment": "~2.10.2",
|
||||
"angular-bootstrap": "~0.13.0",
|
||||
"ramda": "~0.13.0",
|
||||
"jshint": "~2.7.0"
|
||||
"jshint": "~2.7.0",
|
||||
"lightbox2": "~2.8.1"
|
||||
}
|
||||
}
|
||||
|
||||
@ -282,6 +282,10 @@ ul {
|
||||
margin-bottom: -6px;
|
||||
}
|
||||
|
||||
.lb-container {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.btn-social {
|
||||
width: 250px;
|
||||
margin: auto;
|
||||
|
||||
@ -347,7 +347,7 @@
|
||||
"description": [
|
||||
"Normally, your <code>button</code> elements are only as wide as the text that they contain. By making them block elements, your button will stretch to fill your page's entire horizontal space.",
|
||||
"This image illustrates the difference between <code>inline</code> elements and <code>block-level</code> elements:",
|
||||
"<img class=\"img-responsive\" src=\"http://i.imgur.com/O32cDWE.png\" alt=\"An \"inline\" button is as small as the text it contains. In this image, it's centered. Below it is a \"block-level\" button, which stretches to fill the entire horizontal space.'>",
|
||||
"<a href=\"http://i.imgur.com/O32cDWE.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"http://i.imgur.com/O32cDWE.png\" title=\"Click to enlarge\" alt=\"An \"inline\" button is as small as the text it contains. In this image, it's centered. Below it is a \"block-level\" button, which stretches to fill the entire horizontal space.'></a>",
|
||||
"Note that these buttons still need the <code>btn</code> class.",
|
||||
"Add Bootstrap's <code>btn-block</code> class to your Bootstrap button."
|
||||
],
|
||||
@ -700,7 +700,7 @@
|
||||
"description": [
|
||||
"Bootstrap uses a responsive grid system, which makes it easy to put elements into rows and specify each element's relative width. Most of Bootstrap's classes can be applied to a <code>div</code> element.",
|
||||
"Here's a diagram of how Bootstrap's 12-column grid layout works:",
|
||||
"<a href=\"http://i.imgur.com/FaYuui8.png\" target=\"_blank\"><img class=\"img-responsive\" src=\"http://i.imgur.com/FaYuui8.png\" alt=\"an image illustrating Bootstrap's grid system\"></a>",
|
||||
"<a href=\"http://i.imgur.com/FaYuui8.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"http://i.imgur.com/FaYuui8.png\" title=\"Click to enlarge\" alt=\"an image illustrating Bootstrap's grid system\"></a>",
|
||||
"Note that in this illustration, the <code>col-md-*</code> class is being used. Here, <code>md</code> means medium, and <code>*</code> is a number specifying how many columns wide the element should be. In this case, the column width of an element on a medium-sized screen, such as a laptop, is being specified.",
|
||||
"In the Cat Photo App that we're building, we'll use <code>col-xs-*</code>, where <code>xs</code> means extra small (like an extra-small mobile phone screen), and <code>*</code> is the number of columns specifying how many columns wide the element should be.",
|
||||
"Put the <code>Like</code>, <code>Info</code> and <code>Delete</code> buttons side-by-side by nesting all three of them within one <code><div class=\"row\"></code> element, then each of them within a <code><div class=\"col-xs-4\"></code> element.",
|
||||
@ -895,7 +895,7 @@
|
||||
"description": [
|
||||
"You can use spans to create inline elements. Remember when we used the <code>btn-block</code> class to make the button fill the entire row?",
|
||||
"This image illustrates the difference between <code>inline</code> elements and <code>block-level</code> elements:",
|
||||
"<img class=\"img-responsive\" src=\"http://i.imgur.com/O32cDWE.png\" alt=\"An \"inline\" button is as small as the text it contains. In this image, it's centered. Below it is a \"block-level\" button, which stretches to fill the entire horizontal space.'>",
|
||||
"<a href=\"http://i.imgur.com/O32cDWE.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"http://i.imgur.com/O32cDWE.png\" title=\"Click to enlarge\" alt=\"An \"inline\" button is as small as the text it contains. In this image, it's centered. Below it is a \"block-level\" button, which stretches to fill the entire horizontal space.'></a>",
|
||||
"By using the <code>span</code> element, you can put several elements together, and even style different parts of the same element differently.",
|
||||
"Nest the word \"love\" in your \"Things cats love\" element below within a <code>span</code> element. Then give that <code>span</code> the class <code>text-danger</code> to make the text red.",
|
||||
"Here's how you would do this with the \"Top 3 things cats hate\" element: <code><p>Top 3 things cats <span class = \"text-danger\">hate</span></p></code>"
|
||||
@ -984,7 +984,7 @@
|
||||
"We will make a simple heading for our Cat Photo App by putting them in the same row.",
|
||||
"Remember, Bootstrap uses a responsive grid system, which makes it easy to put elements into rows and specify each element's relative width. Most of Bootstrap's classes can be applied to a <code>div</code> element.",
|
||||
"Here's a diagram of how Bootstrap's 12-column grid layout works:",
|
||||
"<a href=\"http://i.imgur.com/FaYuui8.png\" target=\"_blank\"><img class=\"img-responsive\" src=\"http://i.imgur.com/FaYuui8.png\" alt=\"an image illustrating Bootstrap's grid system\"></a>",
|
||||
"<a href=\"http://i.imgur.com/FaYuui8.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"http://i.imgur.com/FaYuui8.png\" title=\"Click to enlarge\" alt=\"an image illustrating Bootstrap's grid system\"></a>",
|
||||
"Note that in this illustration, the <code>col-md-*</code> class is being used. Here, <code>md</code> means medium, and <code>*</code> is a number specifying how many columns wide the element should be. In this case, the column width of an element on a medium-sized screen, such as a laptop, is being specified.",
|
||||
"In the Cat Photo App that we're building, we'll use <code>col-xs-*</code>, where <code>xs</code> means extra small (like an extra-small mobile phone screen), and <code>*</code> is the number of columns specifying how many columns wide the element should be.",
|
||||
"Nest your first image and your <code>h2</code> element within a single <code><div class=\"row\"></code> element. Nest your <code>h2</code> text within a <code><div class=\"col-xs-8\"></code> and your image in a <code><div class=\"col-xs-4\"></code> so that they are on the same line.",
|
||||
|
||||
@ -1060,7 +1060,7 @@
|
||||
"description": [
|
||||
"<code>a</code> elements, also known as <code>anchor</code> elements, are used to link to content outside of the current page.",
|
||||
"Here's a diagram of an <code>a</code> element. In this case, the <code>a</code> element is used in the middle of a paragraph element, which means the link will appear in the middle of a sentence.",
|
||||
"<img class=\"img-responsive\" alt=\"a diagram of how anchor tags are composed with the same text as on the following line\" src=\"http://i.imgur.com/hviuZwe.png\">",
|
||||
"<a href=\"http://i.imgur.com/hviuZwe.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" title=\"Click to enlarge\" alt=\"a diagram of how anchor tags are composed with the same text as on the following line\" src=\"http://i.imgur.com/hviuZwe.png\"></a>",
|
||||
"Here's an example: <code><p>Here's a <a href=\"http://freecodecamp.com\"> link to Free Code Camp</a> for you to follow.</p></code>.",
|
||||
"Create an <code>a</code> element that links to <code>http://freecatphotoapp.com</code> and has \"cat photos\" as its <code>anchor text</code>."
|
||||
],
|
||||
@ -1130,7 +1130,7 @@
|
||||
"difficulty": 1.23,
|
||||
"description": [
|
||||
"Again, here's a diagram of an <code>a</code> element for your reference:",
|
||||
"<img class=\"img-responsive\" alt=\"a diagram of how anchor tags are composed with the same text as on the following line\" src=\"http://i.imgur.com/hviuZwe.png\">",
|
||||
"<a href=\"http://i.imgur.com/hviuZwe.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" title=\"Click to enlarge\" alt=\"a diagram of how anchor tags are composed with the same text as on the following line\" src=\"http://i.imgur.com/hviuZwe.png\"></a>",
|
||||
"Here's an example: <code><p>Here's a <a href=\"http://freecodecamp.com\"> link to Free Code Camp</a> for you to follow.</p></code>.",
|
||||
"<code>Nesting</code> just means putting one element inside of another element.",
|
||||
"Now nest your existing <code>a</code> element within a new <code>p</code> element so that the surrounding paragraph says \"click here for cat photos\", but where only \"cat photos\" is a link, and the rest of the text is rest is plain text."
|
||||
|
||||
@ -86,7 +86,6 @@ block content
|
||||
a.close.closing-x(href='#', data-dismiss='modal', aria-hidden='true') ×
|
||||
.modal-body
|
||||
.text-center
|
||||
<<<<<<< HEAD
|
||||
#checkmark-container.row
|
||||
#challenge-checkmark.animated.zoomInDown.delay-half
|
||||
span.completion-icon.ion-checkmark-circled.text-primary
|
||||
@ -95,9 +94,4 @@ block content
|
||||
#submit-challenge.animated.fadeIn.btn.btn-lg.btn-primary.btn-block Submit and go to my next challenge (ctrl + enter)
|
||||
else
|
||||
a.btn.btn-lg.btn-primary.btn-block(href='/challenges/next-challenge?id=' + challengeId) Go to my next challenge
|
||||
=======
|
||||
.animated.zoomInDown
|
||||
span.completion-icon.ion-checkmark-circled.text-primary
|
||||
a.animated.fadeIn.btn.btn-lg.signup-btn.btn-block(href='/login') Sign in so you can save your progress
|
||||
>>>>>>> 45e8cef504bada71c3fa805b8e0422208299eada
|
||||
include ../partials/challenge-modals
|
||||
|
||||
@ -28,6 +28,7 @@ script.
|
||||
script(src=rev('/js', 'main.js'))
|
||||
script(src="/bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js")
|
||||
script(src="/bower_components/ramda/dist/ramda.min.js")
|
||||
script(src='/bower_components/lightbox2/dist/js/lightbox.min.js')
|
||||
script.
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
link(rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Lato:400|Inconsolata")
|
||||
link(rel="stylesheet" type="text/css" href="/bower_components/cal-heatmap/cal-heatmap.css")
|
||||
link(rel='stylesheet', href='/bower_components/font-awesome/css/font-awesome.min.css')
|
||||
link(rel='stylesheet', href='/bower_components/lightbox2/dist/css/lightbox.css')
|
||||
link(rel='stylesheet', href=rev('/css', 'main.css'))
|
||||
|
||||
Reference in New Issue
Block a user