123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <link href="https://fonts.googleapis.com/css?family=Ultra|Alfa+Slab+One|Merriweather:400,400i|Source+Serif+Pro:400,700" rel="stylesheet">



<div class="container">
  <div class="grid tc">
    <div class="folio bb">
      <p class="b f6 sans-serif pb2 tl">Storia di copertina</p>
    </div>
    <div class="page-title tc">
      <h1 class="alfa title-headline tracked-tight">Americanistica</h1>
      <h2 class="merriweather tracked-tight title-deck">Numeri, fatti, primati degli Stati Uniti</h2>
      <p class="ttu f7 b tracked lh-title">A cura di Sara Deganello e davide mottes, illustrazioni di marta signori</p>
    </div>
    <div class="section-1 tc bt"><div>
      <h1 class="alfa tracked-tight section-1-headline">Buone festivà</h1>
      <h2 class="section-1-deck merriweather lh-title measure-narrow center">Gli apputamenti del calendario che scandiscono l'idenità a stelle e strisce generano anche un indotto economico di rilievo</h2></div>
    </div>
    <div class="hero-image bt bb">
      <img src="https://preview.ibb.co/j1LFDa/Screen_Shot_2017_09_04_at_2_22_12_PM.png">
    </div>
    <div class="section-2 relative">
      <div class="section-2-label absolute w-100">
        <p class="ttu tracked f7 b bg-white dib ph2">4 luglio</p>
      </div>
      <h2 class="alfa tracked-tight section-2-headline">Fest dell'Indipendenza</h2>
      <p class="merriweather section-2-subhead i">Independence Day</p>
      <div class="section-2-subsection-1 br">
        <img src="https://image.ibb.co/mjNHRv/Screen_Shot_2017_09_04_at_3_07_20_PM.png" style="width: 110px;">
        <h3 class="stat b">3,6</h3>
        <p class="ttu b tracked f7 pb2">milioni di dollari</p>
        <p class="pb3">È il valore delle importazioni di bandiere Usa nel 2014; vengono soprattutto dalla Cina (3,5 milioni). 1,8 milioni è invece il valore di quelle esportate: soprattutto in Turchia (ne ha comprate per 673mil adollari).</p>
        <h3 class="stat b">59</h3>
        <p class="ttu b tracked f7 pb2">luoghi</p>
        <p>Si chiamano Liberty negli Usa.</p>
      </div>
      <div class="section-2-subsection-2">
        <h3 class="stat b">2,5</h3>
        <p class="ttu b tracked f7 pb2">milioni</p>
        <p class="pb3">La popolazione Usa nel luglio 1776. Oggi gli statunitensi sono 320 milioni.</p>
        <img src="https://image.ibb.co/e3hsRv/Screen_Shot_2017_09_04_at_3_32_43_PM.png" style="width: 110px">
        <h3 class="stat b">247</h3>
        <p class="ttu b tracked f7 pb2">milioni di dollari</p>
        <p class="pb3">È il valore dl fuochi artificali importati dalla Cina nel 2014. Gli Usa ne hanno esportati per 12 milioni di dollari; 5.4 verso Israele, il migliore acquirente.</p>
      </div>
    </div>
    <div class="section-3 relative">
      <div class="section-3-label absolute w-100">
        <p class="ttu tracked f7 b bg-white dib ph2">31 ottobre</p>
      </div>
      <h2 class="alfa tracked-tight section-3-headline">Halloween</h2>
      <div class="section-3-subhead">
        <img src="https://image.ibb.co/hSj3zF/Screen_Shot_2017_09_04_at_3_39_14_PM.png" style="width: 110px;">
      </div>
      <div class="section-3-subsection-1 br">
        <h3 class="stat b">50k</h3>
        <p class="ttu b tracked f7 pb2">acri coltivati</p>
        <p class="pb3">Sono i campi di zucche negli Usa nel 2013. I maggiori Stati produttori: Illinois, California, Ohio, Michigan.</p>
      </div>
      <div class="section-3-subsection-2">
        <h3 class="stat b">41,2</h3>
        <p class="ttu b tracked f7 pb2">milioni</p>
        <p class="pb3">Sono i ragazzi americani tra i 5 e i 14 anni: tutto potenziali trick or treaters.</p>
      </div>
    </div>
    <div class="section-4 relative">
      <div class="section-4-label absolute w-100">
        <p class="ttu tracked f7 b bg-white dib ph2">26 novembre</p>
      </div>
      <h2 class="alfa tracked-tight section-4-headline">Festa del ringraziamento</h2>
      <p class="merriweather section-2-subhead i">Thanksgiving Day</p>
      <div class="section-4-subsection-1 br">
        <h3 class="stat b">152</h3>
        <p class="ttu b tracked f7 pb2">anni fa</p>
        <p class="pb3">Il presidente Lincoln proclamò festa nazionale l'ultimo giovedì di novembre. Successivamente Roosevelt la spostò al quarto per stimolare le vendite natalizie (il goirno dopo è il Black Friday).</p>
      </div>
      <div class="section-4-subsection-2">
        <h3 class="stat b">42</h3>
        <p class="ttu b tracked f7 pb2">luoghi</p>
        <p class="pb3">Si chiamano Plymouth negli Usa. È il posto in cui sbarcarono i padri pellegrini nel 1620 e in cul nel 1621 si festeggiò il primo giorno del ringrazimento tra coloni inglesi e indian Wampanoag.</p>
      </div>
      <div class="section-4-subsection-3 pa3">
        <p class="s4-ss3-s1 ttu s4-box b tracked lh-title">soprattutto, i doni della terra</p>
        <p class="s4-ss3-s2 s4-box i merriweather lh-title pv2 measure center">Nel menu tradizionale possiamo trovare: tacchino al forno, purè, salsa di cranberry, potato dolci, torta di zucca</p>
        <div class="sans-serif s4-box s4-ss3-s3 lh-title">
          <p class="b">242 milioni</p>
          <p class="">E il numero di tacchini alleviati negli Usa nel 2014 (il 5% in meno rispetto al 2012). Maggiori stati produti Minnesota (45 milioni), North Carolina (35), Arkansas (29), Indiana (17).</p>
        </div>
        <div class="sans-serif s4-box s4-ss3-s4 lh-title">
          <p class="b">19 milioni di dolari</p>
          <p class="pb3">E il numero delle importazioni di tacchini viv net 2013, il 99.9% viene del Canada.</p>
          <p class="b">1,088,622 tonneliate</p>
          <p class="">E la produzione cli patate dolci negli Usa nel 2014.</p>
        </div>
        <div class="sans-serif s4-box s4-ss3-s5 lh-title">
          <p class="b">2388,275 tonneliate</p>
          <p class="">È la produzione di cranberry (mirtillo rosso americano) nel 2014. Il Wisconsin è il maggior producttore con 244,-37 tonnellate, seguito dal Massachusetts con 95,254.</p>
        </div>
        <p class="sans-serif s4-box s4-ss3-s6 lh-title pv2 b">Ci sono 20 luoghi negli Usa che si chiamano Turkey - B. invece. Cranberry.</p>
      </div>
    </div>
    <div class="section-5 relative">
      <div class="section-5-label absolute w-100">
        <p class="ttu tracked f7 b bg-white dib ph2">25 dicembre</p>
      </div>
      <h2 class="alfa tracked-tight section-5-headline">Natale</h2>
      <div class="measure-narrow center section-5-subsection-1">
        <h3 class="stat b">24,4</h3>
        <p class="ttu b tracked f7 pb2">miliardi di dollari</p>
        <p class="pb3 measure center">È il valore dei consumi Usa a dicembre (il 40% più di novembre). Il 19% è speso nelle gioiellerie.</p>
      </div>
      <div class=" center section-5-subsection-2">
        <img src="https://image.ibb.co/c0owKF/Screen_Shot_2017_09_04_at_4_29_50_PM.png" style="height: 150px;">
        <h3 class="stat b">137,5</h3>
        <p class="ttu b tracked f7 pb2">milioni di dollari</p>
        <p class="pb3 measure-narrow center">È il valore delle importazioni Usa di alberi natalizi sintetici dalla Cina.</p>
      </div>
      <div class="center section-5-subsection-3">
        <img src="https://image.ibb.co/hsKsta/Screen_Shot_2017_09_04_at_4_30_02_PM.png" style="height: 150px;">
        <h3 class="stat b">1931</h3>
        <p class="ttu b tracked f7 pb2">l'anno di santa</p>
        <p class="pb3 measure-narrow center">Haddon Sundblom inizia a disengare Babbo Natale per la Coca-Cola.</p>
      </div>
    </div>
  </div>
</div>
            
          
!
            
              body {
  font-family: 'Source Serif Pro', serif;
  font-size: 14px;
}

.s4-box {
  font-size: 9px;
}

.alfa {
  font-family: 'Alfa Slab One', serif;
}

.merriweather {
  font-family: 'Merriweather', serif;
}

.container {
  padding: 30px;
}

.folio {
}

.stat {
  font-size: 44px;
  font-family: 'ultra', serif;
  letter-spacing: -2px;
  padding: 15px 0;
}

.page-title {
  padding: 30px 0;
}

.title-headline {
  font-size: 40px;
  margin: 0;
  padding: 0 0 15px 0;
}

.title-deck {
  font-size: 18px;
  margin: 0;
  padding: 0 0 20px 0;
}

.section-1 {
}

.section-1-headline {
  font-size: 58px;
  margin: 0 auto;
  padding: 30px 0;
}

.section-1-deck {
  font-size: 22px;
  padding-bottom: 30px;
}

.hero-image {
  padding: 30px 0;
}

.section-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid #000;
}

.section-2-label {
  top: -8px;
}

.section-2-headline {
  grid-column: span 2;
  font-size: 30px;
  padding: 30px 0 15px 0;
}

.section-2-subhead {
  grid-column: span 2;
}

.section-2-subsection-1 {
  grid-column-start: 1;
  grid-column-end: 2;
  margin: 30px 0;
  padding-right: 30px;
}

.section-2-subsection-2 {
  padding-left: 30px;
  margin: 30px 0;
}

.section-3 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid #000;
}

.section-3-label {
  top: -8px;
}

.section-3-headline {
  grid-column: span 2;
  font-size: 30px;
  padding: 30px 0 15px 0;
}

.section-3-subhead {
  grid-column: span 2;
}

.section-3-subsection-1 {
  grid-column-start: 1;
  grid-column-end: 2;
  margin: 30px 0;
  padding-right: 30px;
}

.section-3-subsection-2 {
  padding-left: 30px;
  margin: 30px 0;
}

.section-4 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid #000;
}

.section-4-label {
  top: -8px;
}

.section-4-headline {
  grid-column: span 2;
  font-size: 30px;
  padding: 30px 0 15px 0;
}

.section-4-subhead {
  grid-column: span 2;
}

.section-4-subsection-1 {
  grid-column-start: 1;
  grid-column-end: 2;
  margin: 30px 0;
  padding-right: 30px;
}

.section-4-subsection-2 {
  padding-left: 30px;
  margin: 30px 0;
}

.section-4-subsection-3 {
  grid-column: span 2;
  border: 1px solid #000;
  margin: 15px 0 30px 0;
  
}

.s4-ss3-s3 {
  padding-bottom: 15px;
}

.s4-ss3-s4 {
  padding-bottom: 15px;
}

.section-5 {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.section-5-label {
  top: -8px;
}

.section-5-headline {
  grid-column: span 2;
  font-size: 30px;
  padding: 30px 0 15px 0;
}

.section-5-subhead {
  grid-column: span 2;
}

.section-5-subsection-1 {
  grid-column: span 2;
}

.section-5-subsection-2 {
  margin: 30px 0;
  padding-right: 30px;
  border-right: 1px solid #000;
}

.section-5-subsection-3 {
  padding-left: 30px;
  margin: 30px 0;
}

@media (min-width: 600px) {
  
  .page-title {
    padding: 60px 0;
  }
  .title-headline {
    font-size: 65px;
  }
  
  .title-deck {
    font-size: 24px;
  }
  
  .section-1-deck {
    font-size: 18px;
    max-width: 300px;
  }
  
  .section-4-subsection-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;

  }
  
  .s4-ss3-s1 {
    grid-column: span 3;
  }
  
  .s4-ss3-s2 {
    grid-column: span 3;
    padding-bottom: 25px;
  }
  
  .s4-ss3-s3 {
    padding-right: 15px;
  }
  
  .s4-ss3-s4 {
    border-right: 1px solid #000;
    border-left: 1px solid #000;
    padding: 0 15px;
  }
  
  .s4-ss3-s5 {
    padding-left: 15px;
    
  }
  
  .s4-ss3-s6 {
    grid-column: span 3;
    padding-top: 25px;
    
  }
  
  .section-5-subsection-2 {
    border-right: 1px solid #000;
  }
}

@media (min-width: 800px) {
  
  .container {
    padding: 50px;
  }
  
  body {
    font-size: 13px;
  }
  .grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
  
  .folio {
    grid-column: span 4;
  }
  
  .page-title{
    grid-column: span 4;
    padding: 90px 0;
  }
  
  .section-1 {
    grid-column: span 2;
    border-bottom: 1px solid #000;
    border-right: 1px solid #000;
    padding-right: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .hero-image {
    grid-column: span 2;
    padding-left: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .section-2 {
    grid-column: span 3;
    padding-right: 15px;
  }
  
  .section-3 {
    grid-column: span 1;
    display: block;
    border-left: 1px solid #000;
    padding-left: 15px;
  }
  
  .section-3-label {
    left: 2px;
    right: 2px;
  }
  .section-3-subsection-1{
    border: none;
    padding: 0;
    margin: 0;
  }
  
  .section-3-subsection-2 {
    padding: 0;
    margin: 0;
  }
  
  .section-4 {
    grid-column: span 2;
    padding-right: 15px;
    border-bottom: none;
  }
  
  .section-5 {
    grid-column: span 2;
    display: block;
    border-left: 1px solid #000;
    padding-left: 15px;
    display: flex;
    flex-direction: column;
  }
  
  .section-5-subsection-2 {
    padding: 0;
    margin: auto;
    border: none;
    
  }
  
  .section-5-subsection-3 {
    padding: 0;
    margin: auto;
  }
}

@media (min-width: 1100px) {
  .container {
    max-width: 1040px;
    margin: auto;
  }
  
  .section-2-headline,
  .section-3-headline,
  .section-4-headline,
  .section-5-headline {
    font-size: 20px;
    padding: 10px 0 20 0;
  }
 
  .grid {
    grid-template-columns: repeat(7, 14.2857%);
    grid-template-rows: repeat(35, 40px);
  }
  
  .folio {
    grid-column: span 7;
    grid-row-start: 1;
  }
  
  .page-title {
    padding: 100px 0;
    grid-area: 2 / 1 / 11 / 8;
  }
  .title-headline {
    font-size: 90px;
  }
  
  .section-1 {
    border-top: none;
    grid-area: 11 / 1 / 19/ 3;
    border-right: none;
  }
  
  .section-1-deck {
    font-size: 15px;
  }
  
  .hero-image {
    border-top: none;
    padding: 30px;
    grid-area: 11 / 3 / 21 / 7;
    border-left: 1px solid #000;
  }
  
  .section-2 {
    grid-area: 19 / 1 / 36 / 3;
    padding-right: 15px;
    border-bottom: none;
  }

  .section-2-subsection-1 {
    padding-right: 15px;
  }
  
  .section-2-subsection-2 {
    padding-left: 15px;
  }
  
  .section-3 {
    grid-area: 21 / 3 / 36 / 4;
    padding: 0 15px;
    border-bottom: none;
    border-right: 1px solid #000;
    
  }
  
  .section-4 {
    grid-area: 21 / 4 / 36 / 7;
    padding-left: 15px;
  }
  
  .section-4-subsection-1 {
    
    padding-right: 15px;
    margin-top: 10px;
    margin-bottom: 10px;
    
  }
  .section-4-subsection-2 {
    padding-left: 15px;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  
  .section-4-subsection-3 {

      padding: 10px;
    
  }
  
  .s4-ss3-s3 {
    padding-right: 5px;
  }
  
   .s4-ss3-s4 {
    padding: 0 5px;
  }
  
  .s4-ss3-s5 {
    padding-left: 5px;
  }
  
  .section-5 {
    grid-area: 11 / 7 / 36 / 8;
  }
  
  .section-5-label {
    right: 2px;
    left: 2px;
    top: 0;
  }
  
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console