postales Nº 1 al 17

dabblet.css

/**
 * postales Nº 1 al 17
 */

/* aquí van las fuentes importadas*/
@import url(http://fonts.googleapis.com/css?family=Oswald:400,700);
@import url(http://fonts.googleapis.com/css?family=Codystar);
@import url(http://fonts.googleapis.com/css?family=Lato:100,300);
@import url(http://fonts.googleapis.com/css?family=Lato:100italic,300italic);
@import url(http://fonts.googleapis.com/css?family=Abril+Fatface);
@import url(http://fonts.googleapis.com/css?family=Pinyon+Script);
@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(http://fonts.googleapis.com/css?family=Ultra);
@import url(http://fonts.googleapis.com/css?family=Jacques+Francois+Shadow);
@import url(http://fonts.googleapis.com/css?family=Kreon:400,700);
@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700);
@import url(http://fonts.googleapis.com/css?family=Titillium+Web:900);
@import url(http://fonts.googleapis.com/css?family=Archivo+Black);
@import url(http://fonts.googleapis.com/css?family=Merriweather+Sans:400,700);
@import url(http://fonts.googleapis.com/css?family=Cabin+Condensed:600,700);

/* aquí va el estilo */
.postal {
    width: 600px;
    height: 400px;
    border: 1px solid #DDD;
    color: red;
    background-color: white;
    margin: 100px auto;
    text-align: center;
}
.rojo {
    background-color: red;
    color: white;
}
#postal_1 p {
    font-family: 'Oswald',sans-serif;
    font-size: 7.5em;
}
.postal_2 p {
    font-family: 'Codystar',cursive;
    font-size: 7em;
    margin-top: 1.4em;
}
.postal_3 p {
    font-family: 'Lato',sans-serif;
    font-weight: 100;
    text-transform: uppercase;
    font-size: 5em;
    letter-spacing: .1em;
    margin-top: 2.2em;
}
.postal_4 p {
    font-family: 'Abril Fatface',cursive;
    font-size: 4.8em;
    margin-top: 2em;
}
.postal_5 p {
    font-family: 'Pinyon Script',cursive;
    font-size: 7.5em;
    margin-top: 1.2em;
}
.postal_5 p span {
    text-transform: uppercase;
}
.postal_6 p {
    font: 700 5em/1.1 Oswald,sans-serif;
    text-transform: uppercase;
    letter-spacing: -.01em;
    margin-top: 1.2em;
}
.postal_6 p {
}
.postal_7 p {
    font: 700 3.5em/1.3 Oswald,sans-serif;
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-top: 2.2em;
}
.postal_8 p {
    text-transform: uppercase;
    font: 400 3em/1 Montserrat, sans-serif;
    margin-top: 1.15em;
}
.postal_9 p {
    font: 2.7em/1.5 'Jacques Francois Shadow', cursive;
    text-transform: uppercase;
    margin-top: 2.8em;
}
.postal_10 p {
    font: 5.5em/1 "Ultra",sans-serif;
    text-transform: uppercase;
    margin-top: 1.3em;
}
.postal_10 p span {
    display: block;
    font-size: .5em;
}
.postal_11 p {
    font: 700 5em/.85 Kreon, sans-serif;
    text-transform: uppercase;
    margin-top: 1.5em;
}
.postal_12 p {
    font: italic 300 5.85em/1.3 Lato, sans-serif;
    text-transform: uppercase;
    letter-spacing: .07em;
    -webkit-transform: rotate(-6.5deg);
    -moz-transform: rotate(-6.5deg);
    -o-transform: rotate(-6.5deg);
    margin-top: 1.1em;
}
.postal_12 p span {
    display: block;
    letter-spacing: .085em;
    margin-left: .12em;
}
.postal_13 {
    position: relative;
}
.postal_13 p {
    font: 400 3.7em/1 'Yanone Kaffeesatz', sans-serif;
    text-transform: uppercase;
    text-align: right;
    margin: 0;
}
.postal_13 .primera {
    position: absolute;
    top: 13px;
    right: 17px;
}
.postal_13 .segunda {
    position: absolute;
    bottom: 13px;
    left: 17px;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}
.postal_13 p .grande {
    font-weight: 700;
    display: block;
    line-height: .8;
    font-size: 1.7em;
}
.postal_13 p .interlineado_amplio {
    display: block;
    margin-top: 2em;
}
.postal_14 p {
    font: 900 4.5em/1em "Titillium Web", sans-serif;
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-top: 2.4em;
}
.postal_14 p:before {
    display: block;
    background-color: white;
    content: "";
    height: 10px;
    margin: 0 4.2em;
}
.postal_14 p:after {
    display: block;
    background-color: white;
    content: "";
    height: 10px;
    margin: .08em 4.2em;
}

.postal_15 p {
    font: 6em/1.1 "Archivo Black", sans-serif;
    text-transform: uppercase;
    margin-top: .8em;
}
.postal_15 span {
    display: block;
    font-size: .7em;
    margin: 0 1.7em;
    background-color: transparent;
    margin: .7em 1.9em 1em;
}
.postal_15 span:before {
    display: block;
    content: "";
    height: 9px;
    background-color: red;
    margin-bottom: -.7em;
    margin-top: .4em;
}
.postal_15 span:after {
    display: block;
    content: "";
    height: 1em;
    background-color: rgba(255,255,255,1);
    margin: -1em 1.3em;
}

.postal_16 p {
    font: 700 4em/1.3 "Merriweather Sans", sans-serif;
    text-transform: uppercase;
}
.postal_16 p:before {
    content: "•";
    display: block;
}
.postal_16 p:after {
    content: "•";
    display: block;
}

.postal_17 p {
    font: 2.75em/1.4 "Cabin Condensed",sans-serif;
    text-transform: uppercase;
    border-top: .075em solid;
    border-bottom: .075em solid;
    letter-spacing: .0875em;
    margin: 3.8em 3.75em 0 3.7em;
}
.postal_17 p span {
    display: block;
    border-bottom: .075em solid;
}

dabblet.html

<!-- Postales 1 al 5 : una palabra -->
    <section>
      <div id="postal_1" class="postal"><p>pioneering</p></div>
      <div class="postal_2 postal rojo"><p>unique</p></div>
      <div class="postal_3 postal"><p>prestigious</p></div>
      <div class="postal_4 postal rojo"><p>engaging</p></div>
      <div class="postal_5 postal"><p>uni<span>q</span>ue</p></div>    
    </section>
    
    <!-- Postales 6 al 11 : tres renglones -->
    <section>
      <div class="postal_6 postal rojo"><p>Intensive<br> collaborative<br> inclusive</p></div>
      <div class="postal_7 postal"><p>Fulfill needs,<br> wants and<br> expectations</p></div>
      <div class="postal_8 postal rojo">
        <p>We only<br> know what we<br> don’t want</p>
        <p>We don’t<br> know what<br> we want</p>
      </div>
      <div class="postal_9 postal"><p>New territories<br> new relationships<br> new possibilities</p></div>
      <div class="postal_10 postal rojo"><p>We are <span>the only ones</span> doing it</p></div>
      <div class="postal_11 postal rojo"><p>Challenging<br> &<br> stimulating</p></div>
    </section>
    
    <!-- Postales 12 y 13 : propiedad de girar -->
    <section>
      
      <div class="postal_12 postal"><p><span>There is</span> no plan</p></div>
      <div class="postal_13 postal rojo">
        <p class="primera"><span class="grande">Break the rules</span> make new ones <span class="interlineado_amplio">repeat</span></p>
        <p class="segunda"><span class="grande">Break the rules</span> make new ones <span class="interlineado_amplio">repeat</span></p>
      </div>
    </section>
    
    <!-- Postales 14 a 17 : pseudoclases -->
    <section>
      <div class="postal_14 postal rojo"><p>Innovative</p></div>
      <div class="postal_15 postal"><p><span>First</span> imagine <span>then</span> apply</p></div>
      <div class="postal_16 postal rojo"><p>Coming<br> soon</p></div>
      <div class="postal_17 postal"><p><span>One plus one is</span> more than two</p></div>
    </section>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"110","seethrough":"","prefixfree":"1","page":"result"}