Skip to content

added my fable #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
kurtsy wants to merge 8 commits into
base: master
Choose a base branch
from
Open

added my fable #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
fb87fa7
added my fable
kurtsy Aug 12, 2014
8bd75c2
removed image from background
kurtsy Aug 12, 2014
9f8f313
updated README
femmebot Aug 13, 2014
05e4008
Merge branch 'master' of github.com:femmebot/google-type
femmebot Aug 13, 2014
78aa170
README update
femmebot Aug 13, 2014
2690edd
updated fork
kurtsy Aug 13, 2014
bea179f
post fastforward
kurtsy Aug 14, 2014
7c990b1
updated
kurtsy Aug 14, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
40 changes: 40 additions & 0 deletions css/google-type.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Copy link

@adrientetar adrientetar Dec 10, 2014

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

rebase derp

.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; }
Expand All @@ -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
Copy link

@adrientetar adrientetar Dec 10, 2014

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

rebase derp


.section-oak { padding: 30px 20px 200px 20px; }
.section-oak .container { text-align: center; }
Expand Down Expand Up @@ -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); }
Expand Down
38 changes: 38 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,12 @@
<!-- Google web fonts for "The Fox and the Grapes" -->
<link href='http://fonts.googleapis.com/css?family=Ovo|Muli:300' rel='stylesheet' type='text/css'>

<!-- Google web fonts for "THe Moon and her Mother" -->
<link href='http://fonts.googleapis.com/css?family=News+Cycle:400,700|Libre+Baskerville:400,700,400italic' rel='stylesheet' type='text/css'>

<!-- Google web fonts for "The Moon and her Mother" -->
<link href='http://fonts.googleapis.com/css?family=Libre+Baskerville:400,400italic|Trocchi' rel='stylesheet' type='text/css'>

<!-- Typography Project stylesheet -->
<link href="css/google-type.css" rel="stylesheet">

Expand All @@ -49,12 +55,32 @@ <h1>
<p>
All passages are from the <a href="http://www.gutenberg.org/ebooks/11339" target="_blank">Project Gutenberg</a> transcript of &AElig;sop&rsquo;s Fables. All photographic images are from <a href="http://unsplash.com" target="_blank">Unsplash.com</a>. If you&rsquo;d like to contribute to this project, please <a href="https://twitter.com/femmebot" target="_blank">send me a tweet</a> or simply <a href="https://github.com/femmebot/google-type" target="_blank">fork it on Github</a>.
</p>

<div class="divider"></div>
<div class="caption"><a href="http://www.google.com/fonts/specimen/Playfair+Display" target="_blank">Playfair Display</a>, <a href="http://www.google.com/fonts/specimen/Abril+Fatface" target="_blank">Abril Fatface</a>, <a href="http://www.google.com/fonts/specimen/Alegreya" target="_blank">Alegreya</a></div>
</div>
</div>

<<<<<<< HEAD
<div class="container-fluid section-gnat-bull" id="femmebot">
=======


<div class="container-fluid section-moon">
<div class="container">
<a href="https://twitter.com/turkishdlite" class="avatar" target="_blank" title="turkishdlite"><img src="https://pbs.twimg.com/profile_images/486334921368023041/ts61YJT0_400x400.jpeg" alt="turkishdlite"></a>
<div class="caption"><a href="http://www.google.com/fonts/specimen/Libre+Baskerville" target="_blank">Libre Baskerville</a>, <a href="http://www.google.com/fonts/specimen/News+Cycle" target="_blank">News Cycle</a></div>
<h3><i>The</i></h3>
<h2>MO<span class="filled-in"></span>ON</h2>
<div class="wrapper"><h4><i>and</i><br><i>her</i></h4></div>
<div class="wrapper1"><h5>MOTHER</h5></div>
<p>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."</p>
</div>
</div>


<div class="container-fluid section-forest">
>>>>>>> 8bd75c2c5e8d8cf3a200483271ff82a4b7a0915f
Copy link

@adrientetar adrientetar Dec 10, 2014

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

rebase derp

<div class="container">
<a href="https://twitter.com/femmebot" class="avatar" target="_blank" title="femmebot"><img src="https://pbs.twimg.com/profile_images/1779775150/bitty-icon.gif" alt="femmebot"></a>
<div class="caption"><a href="http://www.google.com/fonts/specimen/Playfair+Display" target="_blank">Playfair Display</a>, <a href="http://www.google.com/fonts/specimen/Fauna+One" target="_blank">Fauna One</a></div>
Expand Down Expand Up @@ -173,6 +199,18 @@ <h2>The Fox &amp; the Grapes</h2>
</div>
</div>

<div class="container-fluid section-moon">
<div class="container">
<a href="https://twitter.com/turkishdlite" class="avatar" target="_blank" title="turkishdlite"><img src="https://pbs.twimg.com/profile_images/486334921368023041/ts61YJT0_400x400.jpeg" alt="turkishdlite"></a>
<div class="caption"><a href="http://www.google.com/fonts/specimen/Libre+Baskerville" target="_blank">Libre Baskerville</a>, <a href="http://www.google.com/fonts/specimen/News+Cycle" target="_blank">News Cycle</a></div>
<h3><i>The</i></h3>
<h2>MO<span class="filled-in"></span>ON</h2>
<div class="wrapper"><h3><i>and</i><br><i>her</i></h3></div>
<div class="wrapper1"><h2>MOTHER</h2></div>
<p>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."</p>
</div>
</div>

</body>

<script src="scripts/jquery-1.11.1.min.js"></script>
Expand Down