diff --git a/README.md b/README.md index c2941e1..571c450 100644 --- a/README.md +++ b/README.md @@ -9,4 +9,6 @@ If you'd like to contribute to this project, here are the *game rules*: * Must use at least one of the tales from Aesop’s Fables: http://www.gutenberg.org/ebooks/11339 * When including third-party images and similar artwork, please make sure they are public domain. [Here's a great resource for stock images that don't suck](https://medium.com/@dustin/stock-photos-that-dont-suck-62ae4bcbe01b). +Refer to [practical typographic rules](http://practicaltypography.com) for pointers on web typography and [http://www.typography.com/techniques/](http://www.typography.com/techniques/) for pointers on combining typefaces. + Have questions? [Contact me @femmebot on Twitter](https://twitter.com/femmebot) \ No newline at end of file diff --git a/css/google-type.css b/css/google-type.css index facd51c..0fca4b7 100644 --- a/css/google-type.css +++ b/css/google-type.css @@ -18,6 +18,7 @@ h1, h2, p { margin: 0; padding: 0; } .section-intro a { color: #000; text-decoration: none; } .section-intro a:hover { background-color: #ddd; } +<<<<<<< HEAD .section-gnat-bull { background: url(../images/forest.jpg) no-repeat; background-size: cover; padding: 90px 0 100px;} .section-gnat-bull h2 { font: 70px/68px 'Playfair Display', Georgia, serif; color: #fff; text-transform: uppercase; margin: 0 0 60px 20px; } .section-gnat-bull p { font: 16px/30px 'Fauna One', Georgia, serif; max-width: 540px; color: #fff; margin: 0 0 12px 20px; } @@ -31,6 +32,33 @@ h1, h2, p { margin: 0; padding: 0; } .section-two-bags h2 i { font-family:'Oleo Script', serif; font-style: normal;} .section-two-bags p { font: 17px/28px 'Monda', Arial, sans-serif; color: #817a74; width: 380px; margin-left: 250px; } .section-two-bags .caption { color: #999; float: left; width: 200px; margin: 4px 0 20px 20px; } +======= +.section-moon {background: #000000; background-size: contain; padding: 90px 0 100px;} +.section-moon h2 { font: 50px/48px 'Libre Baskerville', Georgia, serif; color: #fff; margin: 0 0 2px 50px; } +.section-moon h3 { font: 22px/20px 'Libre Baskerville', Georgia, serif; color: #fff; margin: 0 0 2px 50px; } +.section-moon p { font: 18px/18px 'News Cycle', Georgia, serif; max-width: 600px; color: #fff; margin: 10px 0 0 50px;} +.section-moon span {display: inline-block; background-color: #fff; border-radius: 50%; width: 37px; height: 37px; margin: auto -40px auto 0px;} +.section-moon .wrapper {float: left; position: relative; overflow: hidden;} +.section-moon .wrapper1 {float: inherit; position: relative; overflow: hidden;} +.section-moon .avatar img { margin: 0 0 10px 50px; } +.section-moon .caption { margin: 0 0 40px 50px; color: #eee; } +.section-moon .caption a { color: #eee; } +.section-moon .caption a:hover { background-color: #ffffff; color: #2e2361;} + +.section-forest { background: url(../images/forest.jpg) no-repeat; background-size: cover; padding: 90px 0 100px;} +.section-forest h2 { font: 70px/68px 'Playfair Display', Georgia, serif; color: #fff; text-transform: uppercase; margin: 0 0 60px 20px; } +.section-forest p { font: 16px/30px 'Fauna One', Georgia, serif; max-width: 540px; color: #fff; margin: 0 0 12px 20px; } +.section-forest .avatar img { margin: 0 0 10px 20px; } +.section-forest .caption { margin: 0 0 40px 20px; color: #eee; } +.section-forest .caption a { color: #eee; } +.section-forest .caption a:hover { background-color: #0cf; } + +.section-architecture { background: #ddd9d1 url(../images/architecture.png) no-repeat center; background-size: cover; height: 600px; } +.section-architecture h2 { font: 80px/66px 'Fugaz One', serif; text-transform: uppercase; color: #817a74; margin: 0 0 30px 20px; opacity: .6; } +.section-architecture h2 i { font-family:'Oleo Script', serif; font-style: normal;} +.section-architecture p { font: 17px/28px 'Monda', Arial, sans-serif; color: #817a74; width: 380px; margin-left: 250px; } +.section-architecture .caption { color: #999; float: left; width: 230px; margin: 4px 0 0 20px; } +>>>>>>> 8bd75c2c5e8d8cf3a200483271ff82a4b7a0915f .section-oak { padding: 30px 20px 200px 20px; } .section-oak .container { text-align: center; } @@ -117,6 +145,18 @@ h1, h2, p { margin: 0; padding: 0; } .section-the-fox-and-the-grapes h2 { color: #8EC9D2; font: 36px 'Ovo', serif; text-align: center; margin-bottom: 16px; } .section-the-fox-and-the-grapes p { color: #B7B8BF; font: 15px/21px 'Muli', sans-serif; font-weight: 300; text-align: justify; } +.section-moon {background: #000000; opacity: .9; no-repeat; background-size: contain; padding: 90px 0 100px;} +.section-moon h2 { font: 50px/48px 'Libre Baskerville', Georgia, serif; color: #fff; margin: 5px 0 2px 50px; } +.section-moon .smallerhead { font: 22px/20px 'Libre Baskerville', Georgia, serif; color: #fff; margin: 0 0 2px 50px;} +.section-moon p { font: 16px/14px 'Trocchi', Georgia, serif; max-width: 375px; color: #fff; margin: 30px 0 0 50px;} +.section-moon span {display: inline-block; background-color: #fff; border-radius: 50%; width: 37px; height: 37px; margin: auto -40px auto 0px;} +.section-moon .wrapper {float: left; position: relative; overflow: hidden;} +.section-moon .wrapper1 {float: inherit; position: relative; overflow: hidden;} +.section-moon .avatar img { margin: 0 0 10px 50px; } +.section-moon .caption { margin: 0 0 40px 50px; color: #eee; } +.section-moon .caption a { color: #eee; } +.section-moon .caption a:hover { background-color: #ffffff; color: #2e2361;} + @-webkit-keyframes shake { 0% { -webkit-transform: translate(0, 0) rotate(0); } 1% { -webkit-transform: translate(-1px, -2px) rotate(-10deg); } diff --git a/index.html b/index.html index fdbc3f6..b6a356d 100644 --- a/index.html +++ b/index.html @@ -27,6 +27,12 @@ + + + + + + @@ -49,12 +55,32 @@

All passages are from the Project Gutenberg transcript of Æsop’s Fables. All photographic images are from Unsplash.com. If you’d like to contribute to this project, please send me a tweet or simply fork it on Github.

+
Playfair Display, Abril Fatface, Alegreya
+<<<<<<< HEAD
+======= + + +
+
+ turkishdlite + +

The

+

MOON

+

and
her

+
MOTHER
+

The Moon once begged her Mother to make her a gown. "How can I?" replied she; "there's no fitting your figure. At one time you're a New Moon, and at another you're a Full Moon; and between whiles you're neither one nor the other."

+
+
+ + +
+>>>>>>> 8bd75c2c5e8d8cf3a200483271ff82a4b7a0915f
femmebot @@ -173,6 +199,18 @@

The Fox & the Grapes

+
+
+ turkishdlite + +

The

+

MOON

+

and
her

+

MOTHER

+

The Moon once begged her Mother to make her a gown. "How can I?" replied she; "there's no fitting your figure. At one time you're a New Moon, and at another you're a Full Moon; and between whiles you're neither one nor the other."

+
+
+