diff --git a/dist/images/dog_1.jpg b/dist/images/dog_1.jpg new file mode 100644 index 0000000..63b873c Binary files /dev/null and b/dist/images/dog_1.jpg differ diff --git a/dist/images/dog_2.jpg b/dist/images/dog_2.jpg new file mode 100644 index 0000000..baf37f2 Binary files /dev/null and b/dist/images/dog_2.jpg differ diff --git a/dist/images/dog_3.jpg b/dist/images/dog_3.jpg new file mode 100644 index 0000000..feea89d Binary files /dev/null and b/dist/images/dog_3.jpg differ diff --git a/dist/images/dog_4.jpg b/dist/images/dog_4.jpg new file mode 100644 index 0000000..30beaf3 Binary files /dev/null and b/dist/images/dog_4.jpg differ diff --git a/dist/images/dog_5.jpg b/dist/images/dog_5.jpg new file mode 100644 index 0000000..185fc79 Binary files /dev/null and b/dist/images/dog_5.jpg differ diff --git a/dist/index.html b/dist/index.html index 864464f..4515b61 100644 --- a/dist/index.html +++ b/dist/index.html @@ -22,77 +22,39 @@ - -
-
-
-
-
Trial
-
-
Free!
-
-
-
-
-
Basic tier
(most popular)
-
-
$10.00
-
-
-
-
-
Advanced tier
(only for enterprise-level professionals)
-
-
$6,000.00
-
+ +
+ + +
- -
-
-
-
Science potion
-
-
Costs $5
+ +
+
Tab 1
+
Tab 2
+
Tab 3
+
Tab 4
- -
-
-
- + +
+ +
+ - -
-
-
+
Inbox
+
Sent
+
Trash
-
Welcome to the app!
-
Thanks for signing up. Let’s take a look around.
-
Begin tour
-
- -
- -
-
-
+ +
+
Settings
+
Log out
-
The calendar feature makes scheduling a snap.
-
-
-
-
-
-
Our dashboard gives you a bird’s-eye-view-at-a-glance-on-the-go.
-
-
-
-
-
-
You can get notified by email or SMS.
@@ -128,39 +90,115 @@
- -
- -
- -
Inbox
-
Sent
-
Trash
+ +
+
+
- -
-
Settings
-
Log out
+
Welcome to the app!
+
Thanks for signing up. Let’s take a look around.
+
Begin tour
+
+ +
+ +
+
+
+ +
+ +
+
+
+
+
The calendar feature makes scheduling a snap.
+
+
+
+
+
+
Our dashboard gives you a bird’s-eye-view-at-a-glance-on-the-go.
+
+
+
+
+
+
You can get notified by email or SMS.
+
+ +
+ +
+
+
+
Science potion
+
+
Costs $5
+
+ +
+ +
+
+
+
+
Trial
+
+
Free!
+
+
+
+
+
Basic tier
(most popular)
+
+
$10.00
+
+
+
+
+
Advanced tier
(only for enterprise-level professionals)
+
+
$6,000.00
- -
- - - + +
+ Sup, dog
-
- -
-
Tab 1
-
Tab 2
-
Tab 3
-
Tab 4
+ +
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
+
+ +
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
11
+
12
+
13
+
14
diff --git a/dist/styles.css b/dist/styles.css index fb652bc..5d48757 100644 --- a/dist/styles.css +++ b/dist/styles.css @@ -1,3 +1,6 @@ +* { + box-sizing: border-box; +} /*===================================================== contents of: styles/stepper-input.css @@ -10,7 +13,6 @@ * This has a similar effect to setting the children * to have display: inline-block. */ - display: -webkit-flex; display: -ms-flexbox; display: flex; } @@ -57,7 +59,6 @@ * out its children using flexbox, the exact same * as in the above "Stepper input" example. */ - display: -webkit-flex; display: -ms-flexbox; display: flex; @@ -84,7 +85,6 @@ * Lay out the children of this container with * flexbox, which is horizontal by default. */ - display: -webkit-flex; display: -ms-flexbox; display: flex; @@ -93,9 +93,8 @@ * between its children, with the children at either * end laying flush against the container's edges. */ - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; padding: 10px; background-color: #56727C; @@ -106,7 +105,6 @@ * Lay out the children of this container with * flexbox. */ - display: -webkit-flex; display: -ms-flexbox; display: flex; @@ -115,9 +113,8 @@ * the main axis. By default the children will * align along their top edges. */ - -webkit-align-items: center; - -ms-flex-align: center; - align-items: center; + -ms-flex-align: center; + align-items: center; } .siteHeader__item { @@ -154,7 +151,6 @@ * Lay out the children of this container with * flexbox, which is horizontal by default. */ - display: -webkit-flex; display: -ms-flexbox; display: flex; @@ -162,18 +158,16 @@ * Align the children in the center, along * the main axis, which is horizontal in this case. */ - -webkit-align-items: center; - -ms-flex-align: center; - align-items: center; + -ms-flex-align: center; + align-items: center; - /** + /** * Make the container put as much space as possible * between its children, with the children at either * end laying flush against the container's edges. */ - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; border-top: 1px solid #D7DBDD; padding: 10px; @@ -183,16 +177,14 @@ /** * This container orders items horizontally. */ - display: -webkit-flex; display: -ms-flexbox; display: flex; /** * It aligns them vertically in the center. */ - -webkit-align-items: center; - -ms-flex-align: center; - align-items: center; + -ms-flex-align: center; + align-items: center; } .formFooter__item + .formFooter__item { @@ -206,18 +198,12 @@ } .formFooterSpinner { - -webkit-animation: formFooterSpinner 1s infinite steps(8, end); - animation: formFooterSpinner 1s infinite steps(8, end); + animation: formFooterSpinner 1s infinite steps(8, end); } -@-webkit-keyframes formFooterSpinner { - 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } - 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } -} - @keyframes formFooterSpinner { - 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } - 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } } .button--clear { @@ -235,7 +221,6 @@ * rules. By default, this would arrange its children * horizontally. However, the next property... */ - display: -webkit-flex; display: -ms-flexbox; display: flex; @@ -244,18 +229,16 @@ * horizontal, so now the children are laid out * vertically, from top to bottom. */ - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; /** * It will also put as much space as possible * between its children, with the children at either end * laying flush against the container's edges. */ - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; height: 300px; width: 150px; @@ -284,7 +267,6 @@ * Lay out the children of this container with * flexbox. */ - display: -webkit-flex; display: -ms-flexbox; display: flex; @@ -293,9 +275,8 @@ * are laid out vertically, the same as in the * above "Side bar" example. */ - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; /** * Align the children in the center, along @@ -303,18 +284,16 @@ * "column" this has a similar effect as setting * text-align: center. */ - -webkit-align-items: center; - -ms-flex-align: center; - align-items: center; + -ms-flex-align: center; + align-items: center; /** * Instead of pushing the children apart, as in * previous examples, we will group them together * in the center of their container. */ - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; + -ms-flex-pack: center; + justify-content: center; min-height: 300px; padding: 10px; @@ -355,7 +334,6 @@ * Lay out the children of this container with * flexbox. */ - display: -webkit-flex; display: -ms-flexbox; display: flex; @@ -364,25 +342,22 @@ * we'll rotate the main axis so that the children * are ordered vertically. */ - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; /** * And just like in that example, align the children * in the center, along the main axis. */ - -webkit-align-items: center; - -ms-flex-align: center; - align-items: center; + -ms-flex-align: center; + align-items: center; /** * Same thing here as before: group the children * together in the center of their container. */ - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; + -ms-flex-pack: center; + justify-content: center; border: 1px solid #D7DBDD; font-size: 40px; @@ -403,7 +378,6 @@ * Lay out the children of this container with * flexbox, which is horizontal by default. */ - display: -webkit-flex; display: -ms-flexbox; display: flex; @@ -411,9 +385,8 @@ * Align the children in the center, along * the main axis, which is horizontal in this case. */ - -webkit-align-items: center; - -ms-flex-align: center; - align-items: center; + -ms-flex-align: center; + align-items: center; max-width: 400px; padding: 10px; @@ -430,9 +403,8 @@ * reverse order of how they appear in the * markup. */ - -webkit-flex-direction: row-reverse; - -ms-flex-direction: row-reverse; - flex-direction: row-reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; } .featureListItem__icon, @@ -458,7 +430,6 @@ * Lay out the children of this container with * flexbox, which is horizontal by default. */ - display: -webkit-flex; display: -ms-flexbox; display: flex; @@ -466,9 +437,8 @@ * Rotate the main axis so that the children * are laid out vertically. */ - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; border: 1px solid #CAD0D2; border-radius: 4px; @@ -480,7 +450,6 @@ * Lay out the children of this container with * flexbox. */ - display: -webkit-flex; display: -ms-flexbox; display: flex; @@ -490,27 +459,24 @@ * First we'll rotate the main axis so that the * children are laid out vertically. */ - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; /** * Just like in the "Centered prompt" example, * we'll align the children in the center, along * the main axis. */ - -webkit-align-items: center; - -ms-flex-align: center; - align-items: center; + -ms-flex-align: center; + align-items: center; /** * And just like in the "Centered prompt", we'll * group the children in the center of their * container. */ - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; + -ms-flex-pack: center; + justify-content: center; padding: 15px 0; } @@ -552,7 +518,6 @@ * Lay out the children of this container with * flexbox, which is horizontal by default. */ - display: -webkit-flex; display: -ms-flexbox; display: flex; @@ -594,9 +559,8 @@ * find more info at: * github.com/philipwalton/flexbugs. */ - -webkit-flex: 1 1 0%; - -ms-flex: 1 1 0%; - flex: 1 1 0%; + -ms-flex: 1 1 0%; + flex: 1 1 0%; border: none; border-radius: 0; @@ -613,9 +577,198 @@ * flex-basis is auto, so now the size of its content * will affect how large it is. */ - -webkit-flex: 1 1 auto; - -ms-flex: 1 1 auto; - flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; } +/*===================================================== + contents of: styles/photo.css + =====================================================*/ +.photo { + /** + * Lay out the children of this container with + * flexbox, which is horizontal by default. + */ + display: -ms-flexbox; + display: flex; + + /** + * Align all the children to the end of the + * secondary axis. This is the bottom, by default. + */ + -ms-flex-align: end; + align-items: flex-end; + + /** + * Align all the children to the end of the main + * axis. This is the right side, by default. + */ + -ms-flex-pack: end; + justify-content: flex-end; + + width: 145px; + margin: 5px; + padding: 5px 10px; + font-size: 18px; + font-weight: bold; + text-shadow: 0 2px 3px rgba(0, 0, 0, 0.5); + color: #FFFFFF; + background-size: cover; + background-position: center; + border-radius: 4px; +} + +.photo--large { + height: 130px; +} + +.photo1 { + background-image: url('images/dog_1.jpg'); +} + +/*===================================================== + contents of: styles/gallery.css + =====================================================*/ +.gallery { + /** + * Lay out the children of this container with + * flexbox, which is horizontal by default. + */ + display: -ms-flexbox; + display: flex; + + /** + * Allow the children to wrap to the next "row", + * instead of trying to squeeze them all into + * a single row. + */ + -ms-flex-wrap: wrap; + flex-wrap: wrap; + + width: 478px; + padding: 5px; + border: 1px solid #D7DBDD; +} + +.photo2 { + background-image: url('images/dog_2.jpg'); +} + +.photo3 { + background-image: url('images/dog_3.jpg'); +} + +.photo4 { + background-image: url('images/dog_4.jpg'); +} + +.photo5 { + background-image: url('images/dog_5.jpg'); +} + +.photo6 { + background-image: url('images/dog_1.jpg'); +} + +.photo7 { + background-image: url('images/dog_2.jpg'); +} + +.photo8 { + background-image: url('images/dog_3.jpg'); +} + +.photo9 { + background-image: url('images/dog_4.jpg'); +} + +.photo10 { + background-image: url('images/dog_5.jpg'); +} + +/*===================================================== + contents of: styles/mosaic.css + =====================================================*/ +.mosaic { + /** + * Lay out the children of this container with + * flexbox, which is horizontal by default. + */ + display: -ms-flexbox; + display: flex; + + /** + * Set the main axis to be vertical instead of + * horizontal, so now the children are laid out + * vertically, from top to bottom. + */ + -ms-flex-direction: column; + flex-direction: column; + + /** + * Now when the children wrap, they'll wrap to the + * next "column". + */ + -ms-flex-wrap: wrap; + flex-wrap: wrap; + + width: 478px; + height: 370px; + padding: 6px; + border: 1px solid #D7DBDD; + overflow: auto; +} + +.photo:last-child { + /** + * This is the first part of a flexbox hack. + * It addresses a problem flexbox has with scrolling + * content. Without this hack, the children on the + * far right of the container will be flush against + * the container's right edge. + */ + position: relative; +} + +.photo:last-child::after { + /** + * This is the second part of the hack. It creates + * an invisible element on the last child that + * forces a space between the child and the right + * edge of the container. + */ + display: block; + width: 11px; + height: 1px; + position: absolute; + top: 0; + left: 100%; + visibility: hidden; + content: ""; +} + +.photo--small { + height: 70px; +} + +.photo--medium { + height: 90px; +} + +.photo11 { + background-image: url('images/dog_1.jpg'); +} + +.photo12 { + background-image: url('images/dog_2.jpg'); +} + +.photo13 { + background-image: url('images/dog_3.jpg'); +} + +.photo14 { + background-image: url('images/dog_4.jpg'); +} + diff --git a/dist/styles.css.map b/dist/styles.css.map deleted file mode 100644 index d2bc727..0000000 --- a/dist/styles.css.map +++ /dev/null @@ -1,7 +0,0 @@ -{ -"version": 3, -"mappings": "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", -"sources": ["../src/styles/stepper-input.scss","../src/styles/tabs.scss","../src/styles/site-header.scss","../src/styles/form-footer.scss","../src/styles/side-bar.scss","../src/styles/centered-prompt.scss","../src/styles/centered-icon.scss","../src/styles/feature-list.scss","../src/styles/card.scss","../src/styles/card-group.scss"], -"names": [], -"file": "styles.css" -} diff --git a/package.json b/package.json index 5b2db6a..1749bcc 100644 --- a/package.json +++ b/package.json @@ -11,13 +11,15 @@ "devDependencies": { "autoprefixer": "6.2.3", "css-concat": "0.0.4", + "cpx": "1.3.1", "jade": "1.11.0", "postcss-cli": "2.3.3" }, "scripts": { - "build": "npm run compileCss && npm run autoPrefixCss && npm run compileHtml", - "compileCss": "node_modules/.bin/css-concat src/index.css dist/styles.css", - "autoPrefixCss": "node_modules/.bin/postcss --local-plugins --use autoprefixer --autoprefixer.browsers 'last 2 versions' -o dist/styles.css dist/styles.css", - "compileHtml": "node_modules/.bin/jade src/index.jade -P -o dist" + "build": "npm run copyImages && npm run compileCss && npm run autoPrefixCss && npm run compileHtml", + "copyImages": "cpx \"src/images/**/*\" dist/images", + "compileCss": "css-concat src/index.css dist/styles.css", + "autoPrefixCss": "postcss --local-plugins --use autoprefixer --autoprefixer.browsers 'last 2 versions' -o dist/styles.css dist/styles.css", + "compileHtml": "jade src/index.jade -P -o dist" } } diff --git a/src/examples/gallery.html b/src/examples/gallery.html new file mode 100644 index 0000000..662aa6e --- /dev/null +++ b/src/examples/gallery.html @@ -0,0 +1,12 @@ +
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
\ No newline at end of file diff --git a/src/examples/mosaic.html b/src/examples/mosaic.html new file mode 100644 index 0000000..8121be4 --- /dev/null +++ b/src/examples/mosaic.html @@ -0,0 +1,16 @@ +
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
11
+
12
+
13
+
14
+
diff --git a/src/examples/photo.html b/src/examples/photo.html new file mode 100644 index 0000000..7ebfa88 --- /dev/null +++ b/src/examples/photo.html @@ -0,0 +1,3 @@ +
+ Sup, dog +
\ No newline at end of file diff --git a/src/images/dog_1.jpg b/src/images/dog_1.jpg new file mode 100644 index 0000000..63b873c Binary files /dev/null and b/src/images/dog_1.jpg differ diff --git a/src/images/dog_2.jpg b/src/images/dog_2.jpg new file mode 100644 index 0000000..baf37f2 Binary files /dev/null and b/src/images/dog_2.jpg differ diff --git a/src/images/dog_3.jpg b/src/images/dog_3.jpg new file mode 100644 index 0000000..feea89d Binary files /dev/null and b/src/images/dog_3.jpg differ diff --git a/src/images/dog_4.jpg b/src/images/dog_4.jpg new file mode 100644 index 0000000..30beaf3 Binary files /dev/null and b/src/images/dog_4.jpg differ diff --git a/src/images/dog_5.jpg b/src/images/dog_5.jpg new file mode 100644 index 0000000..185fc79 Binary files /dev/null and b/src/images/dog_5.jpg differ diff --git a/src/index.css b/src/index.css index 76db4ab..b4d26bc 100644 --- a/src/index.css +++ b/src/index.css @@ -1,3 +1,6 @@ +* { + box-sizing: border-box; +} @import url("./styles/stepper-input.css"); @import url("./styles/tabs.css"); @@ -9,3 +12,6 @@ @import url("./styles/feature-list.css"); @import url("./styles/card.css"); @import url("./styles/card-group.css"); +@import url("./styles/photo.css"); +@import url("./styles/gallery.css"); +@import url("./styles/mosaic.css"); diff --git a/src/index.jade b/src/index.jade index 171c830..3fb1061 100644 --- a/src/index.jade +++ b/src/index.jade @@ -44,25 +44,17 @@ html(lang='en') body - // Card group + // Stepper input .demo - include ./examples/card-group.html + include ./examples/stepper-input.html - // Card + // Tabs .demo - include ./examples/card.html + include ./examples/tabs.html - // Centered icon + // Site header .demo - include ./examples/centered-icon.html - - // Centered prompt - .demo - include ./examples/centered-prompt.html - - // Feature list - .demo - include ./examples/feature-list.html + include ./examples/site-header.html // Form footer .demo @@ -72,14 +64,34 @@ html(lang='en') .demo include ./examples/side-bar.html - // Site header + // Centered prompt .demo - include ./examples/site-header.html + include ./examples/centered-prompt.html - // Stepper input + // Centered icon .demo - include ./examples/stepper-input.html + include ./examples/centered-icon.html - // Tabs + // Feature list .demo - include ./examples/tabs.html + include ./examples/feature-list.html + + // Card + .demo + include ./examples/card.html + + // Card group + .demo + include ./examples/card-group.html + + // Photo + .demo + include ./examples/photo.html + + // Gallery + .demo + include ./examples/gallery.html + + // Mosaic + .demo + include ./examples/mosaic.html diff --git a/src/styles/form-footer.css b/src/styles/form-footer.css index f203dcc..48d1f85 100644 --- a/src/styles/form-footer.css +++ b/src/styles/form-footer.css @@ -11,7 +11,7 @@ */ align-items: center; - /** + /** * Make the container put as much space as possible * between its children, with the children at either * end laying flush against the container's edges. diff --git a/src/styles/gallery.css b/src/styles/gallery.css new file mode 100644 index 0000000..6f86fbd --- /dev/null +++ b/src/styles/gallery.css @@ -0,0 +1,54 @@ +.gallery { + /** + * Lay out the children of this container with + * flexbox, which is horizontal by default. + */ + display: flex; + + /** + * Allow the children to wrap to the next "row", + * instead of trying to squeeze them all into + * a single row. + */ + flex-wrap: wrap; + + width: 478px; + padding: 5px; + border: 1px solid #D7DBDD; +} + +.photo2 { + background-image: url('../images/dog_2.jpg'); +} + +.photo3 { + background-image: url('../images/dog_3.jpg'); +} + +.photo4 { + background-image: url('../images/dog_4.jpg'); +} + +.photo5 { + background-image: url('../images/dog_5.jpg'); +} + +.photo6 { + background-image: url('../images/dog_1.jpg'); +} + +.photo7 { + background-image: url('../images/dog_2.jpg'); +} + +.photo8 { + background-image: url('../images/dog_3.jpg'); +} + +.photo9 { + background-image: url('../images/dog_4.jpg'); +} + +.photo10 { + background-image: url('../images/dog_5.jpg'); +} diff --git a/src/styles/mosaic.css b/src/styles/mosaic.css new file mode 100644 index 0000000..02668b2 --- /dev/null +++ b/src/styles/mosaic.css @@ -0,0 +1,78 @@ +.mosaic { + /** + * Lay out the children of this container with + * flexbox, which is horizontal by default. + */ + display: flex; + + /** + * Set the main axis to be vertical instead of + * horizontal, so now the children are laid out + * vertically, from top to bottom. + */ + flex-direction: column; + + /** + * Now when the children wrap, they'll wrap to the + * next "column". + */ + flex-wrap: wrap; + + width: 478px; + height: 370px; + padding: 6px; + border: 1px solid #D7DBDD; + overflow: auto; +} + +.photo:last-child { + /** + * This is the first part of a flexbox hack. + * It addresses a problem flexbox has with scrolling + * content. Without this hack, the children on the + * far right of the container will be flush against + * the container's right edge. + */ + position: relative; +} + +.photo:last-child::after { + /** + * This is the second part of the hack. It creates + * an invisible element on the last child that + * forces a space between the child and the right + * edge of the container. + */ + display: block; + width: 11px; + height: 1px; + position: absolute; + top: 0; + left: 100%; + visibility: hidden; + content: ""; +} + +.photo--small { + height: 70px; +} + +.photo--medium { + height: 90px; +} + +.photo11 { + background-image: url('../images/dog_1.jpg'); +} + +.photo12 { + background-image: url('../images/dog_2.jpg'); +} + +.photo13 { + background-image: url('../images/dog_3.jpg'); +} + +.photo14 { + background-image: url('../images/dog_4.jpg'); +} diff --git a/src/styles/photo.css b/src/styles/photo.css new file mode 100644 index 0000000..94e3737 --- /dev/null +++ b/src/styles/photo.css @@ -0,0 +1,38 @@ +.photo { + /** + * Lay out the children of this container with + * flexbox, which is horizontal by default. + */ + display: flex; + + /** + * Align all the children to the end of the + * secondary axis. This is the bottom, by default. + */ + align-items: flex-end; + + /** + * Align all the children to the end of the main + * axis. This is the right side, by default. + */ + justify-content: flex-end; + + width: 145px; + margin: 5px; + padding: 5px 10px; + font-size: 18px; + font-weight: bold; + text-shadow: 0 2px 3px rgba(0, 0, 0, 0.5); + color: #FFFFFF; + background-size: cover; + background-position: center; + border-radius: 4px; +} + +.photo--large { + height: 130px; +} + +.photo1 { + background-image: url('../images/dog_1.jpg'); +}