css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

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='//cdn.knightlab.com/libs/soundcite/latest/css/player.css' rel='stylesheet' type='text/css'>
<script type='text/javascript' src='//cdn.knightlab.com/libs/soundcite/latest/js/soundcite.min.js'></script>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,800,700,600' rel='stylesheet' type='text/css'>
<div class="person">
  <div>
    <h2>Pablo Muñoz</h2>
    <h4>Lakewood, Calif.</h4></div>
  <div class="image"><img src="http://www.cherubs2015.org/wp-content/themes/cherubs-2015/cherubs/pablo_munoz.jpg"></div>
  <p>“I speak Spanish in addition to English and I would rate my proficiency at native but I don’t always have the chance to practice it, so there are months of the year where my Spanish falls into disrepair.<span class="soundcite" data-id="216641217" data-start="0"
    data-end="15000" data-plays="1">I always look forward to practicing it when I can, so having people here who not only speak Spanish but are from Spanish-speaking countries has made a big impact on my ability to practice the language</span> even when
    I’m not home in L.A. where there’s an abundance of Spanish speakers. I learnt Spanish growing up from both my parents.”</p>
</div>
<div class="person">
  <div>
    <h2>Miri Zenilman</h2>
    <h4>Lawrence, N.Y.</h4>
  </div>
  <div class="image"><img src="http://www.cherubs2015.org/wp-content/themes/cherubs-2015/cherubs/miriam_zenilman.jpg"></div>
  <p>“I started learning Hebrew when I was maybe 3 or 4 because I go to a Jewish school where we do dual curriculum, so half our classes are English studies and the other half are Jewish studies. It’s Jewish classes but they’re all taught in Hebrew, so we
    all have to know the language in order to learn in it. I’m pretty conversational.<span class="soundcite" data-id="216644969" data-start="0" data-end="6348" data-plays="1">I’m learning to be fluent, now I can hold conversations with people.</span>I
    go to Israel and I am able to talk really well with the locals.”</p>
</div>
<div class="person">
  <div>
    <h2>Courtney Gao</h2>
    <h4>Piedmont, Calif.</h4>
  </div>
  <div class="image"><img src="http://www.cherubs2015.org/wp-content/themes/cherubs-2015/cherubs/courtney_gao.jpg"></div>
  <p>“I’ve been speaking Mandarin since I was born, so I learned it at the same time that I learned English. Both my parents speak it because my dad was born in China and my mom was born in Taiwan. For a long time, I had babysitters who would only speak
    Mandarin. <span class="soundcite" data-id="216641238" data-start="0" data-end="11781" data-plays="1">It became harder and harder to maintain that just because all my friends would speak English </span>so I started speaking English more and more around
    the house. I can understand a lot and I can hold a conversation with someone but on the radio when there’s a newscast, it’ll be really fast, and there’ll be some words I don’t know. But whenever I go to Taiwan, after a week, I’m basically snappy with
    it again.”
  </p>
</div>
<div class="person">
  <div>
    <h2>Oliver Trapp</h2>
    <h4>Oviedo, Fla.</h4></div>
  <div class="image"><img src="http://www.cherubs2015.org/wp-content/themes/cherubs-2015/cherubs/oliver_trapp.jpg"></div>
  <p>“I speak French, Spanish and German. I take Arabic in school, and I can functionally work with Italian and Portuguese, and a little, very little bit in Russian.<span class="soundcite" data-id="216641220" data-start="0" data-end="3000" data-plays="1">I have a general interest in languages.</span>    My family is very international -- my mom’s Dominican and her father was Italian, and my father’s French-German. [Of all the languages], Spanish and English are definitely by far the best.”
  </p>
</div>
<div class="person">
  <div>
    <h2>Mina Lee</h2>
    <h4>Cockeysville, Md.</h4></div>
  <div class="image"><img src="http://www.cherubs2015.org/wp-content/themes/cherubs-2015/cherubs/mina_lee.jpg"></div>
  <p>“I speak Korean. I was born in Korea, so I grew up with the language. It’s my first language, so I speak it very fluently. My English and Korean are definitely at the same level.<span class="soundcite" data-id="216641223" data-start="0" data-end="5171"
    data-plays="1">Sometimes I find that one language can express something that the other
    language can’t express,</span> but either way, I think I’m at the same level.”
  </p>
</div>
<div class="person">
  <div>
    <h2>Kristina Karisch</h2>
    <h4>Centennial, Colo.</h4></div>
  <div class="image"><img src="http://www.cherubs2015.org/wp-content/themes/cherubs-2015/cherubs/kristina_karisch.jpg"></div>
  <p>“I speak German and Spanish. My parents are both from Austria so German is my first language and I’ve grown up speaking it at home with them. I also went to a German international school in Montreal where all of the classes except for English are taught
    in German. When I came to the U.S. in 2009, I started taking Spanish and got up to AP Spanish sophomore year and have just been keeping it up ever since.<span class="soundcite" data-id="216644972" data-start="0" data-end="4310" data-plays="1">I’m totally fluent in German, I speak it as well as I speak English.</span>In
    Spanish, I can understand everything and hold a conversation, but I don’t speak at the pace of a native Spanish speaker. I learned to speak English when I was four when we first moved to Canada.”</p>
</div>
<div class="person">
  <div>
    <h2>Winny Sun</h2>
    <h4>Vancouver, Canada</h4></div>
  <div class="image"><img src="http://www.cherubs2015.org/wp-content/themes/cherubs-2015/cherubs/winny_sun.jpg"></div>
  <p>“I was born in China, so Mandarin is my mother tongue. I spoke it for 12 years, and when I was 12, I went to Vancouver and started speaking English at school, but at home I still spoke Mandarin.<span class="soundcite" data-id="216727471" data-start="0"
    data-end="4310" data-plays="1">I think I learned English from my peers and from teachers,</span> I think, by getting involved in the environment in school. I’m still better at Mandarin than English.”
  </p>
</div>
<div class="person">
  <div>
    <h2>Giulia Villanueva</h2>
    <h4>Asunción, Paraguay</h4></div>
  <div class="image"><img src="http://www.cherubs2015.org/wp-content/themes/cherubs-2015/cherubs/giulia_villanueva.jpg"></div>
  <p>“I speak Spanish, and I learned it because my family comes from a Spanish country.<span class="soundcite" data-id="216644976" data-start="0" data-end="7445" data-plays="1">I go to an American school in Paraguay, South America. I think my Spanish and English are about equal.”</span>
  </p>
</div>
<div class="person">
  <div>
    <h2>Annie Wan</h2>
    <h4>Beijing, China</h4></div>
  <div class="image"><img src="http://www.cherubs2015.org/wp-content/themes/cherubs-2015/cherubs/annie_wan.jpg"></div>
  <p>“I speak Chinese and English. I learned Chinese first, and then I learned English when I moved to Canada in kindergarten. My parents kept speaking Chinese around the house.<span class="soundcite" data-id="216641241" data-start="0" data-end="5772" data-plays="1">Speaking-wise, I’m probably the same in Chinese and English.</span>But
    my writing in English is probably a little bit better.”
  </p>
</div>
<div class="person">
  <div>
    <h2>Catherine Kim</h2>
    <h4>Norfolk, Va.</h4></div>
  <div class="image"><img src="http://www.cherubs2015.org/wp-content/themes/cherubs-2015/cherubs/catherine_kim.jpg"></div>
  <p>“I learned Korean when I was ten. I spoke broken Korean when I was younger, but that’s when I officially learned Korean because that’s when I moved to Korea from the U.S. I’m very fluent in Korean because I spent my teenage years there.<span class="soundcite"
    data-id="216641239" data-start="0" data-end="4206" data-plays="1">I do translation
    for a job, so [English and Korean] are practically equal."</span>
  </p>
</div>
<div class="person">
  <div>
    <h2>Seohyun Shim</h2>
    <h4>Newton, Mass.</h4></div>
  <div class="image"><img src="http://www.cherubs2015.org/wp-content/themes/cherubs-2015/cherubs/seohyun_shim.jpg"></div>
  <p>“I am a native Korean speaker, so when I’m home, back in Korea, I use Korean every day. In Boston, I sometimes use Korean to speak to my parents or Korean friends.<span class="soundcite" data-id="216641216" data-start="0" data-end="19383" data-plays="1">At the Medill Cherubs program, I largely used Korean to talk about other people without them knowing it.</span>    I’m a lot more fluent in Korean since it’s my first language, and it was the only language I spoke until I was 12.”
  </p>
</div>
<div class="person">
  <div>
    <h2>Kristine Liao</h2>
    <h4>Trabuco Canyon, Calif.</h4></div>
  <div class="image"><img src="http://www.cherubs2015.org/wp-content/themes/cherubs-2015/cherubs/kristine_liao.jpg"></div>
  <p>“I speak Chinese and some Spanish, but I’m only fluent in Chinese. I’ve been fluent since I was born in Toronto. My grandparents lived with me so they spoke Chinese with me. I’m better at English.<span class="soundcite" data-id="216641226" data-start="0"
    data-end="3473" data-plays="1">I understand Chinese pretty well, but speaking-wise
  and writing-wise I’m not as good.</span> I learned to speak English and speak Chinese at the same time. I’ve learned how to write and read English since I was born, like at school, and I learned how to read and write in Chinese starting in second grade.”
  </p>
</div>
<div class="person">
  <div>
    <h2>Emily Kim</h2>
    <h4>Seoul, Republic of Korea</h4></div>
  <div class="image"><img src="http://www.cherubs2015.org/wp-content/themes/cherubs-2015/cherubs/emily_kim.jpg"></div>
  <p>“I speak Korean. I kind of learned [English and Korean] at the same time. My parents speak Korean, but I spent up to 3rd grade in American schools. I moved back to Korea in third grade. I think I speak English better, because I can’t imagine writing
    essays in Korean. <span class="soundcite" data-id="216644978" data-start="0" data-end="4127" data-plays="1">I can speak conversationally and I’m comfortable communicating with people in Korean.</span> I have a much more sophisticated vocabulary in
    English.”
  </p>
</div>
<div class="person">
  <div>
    <h2>Jennifer Chen</h2>
    <h4>Saratoga, Calif.</h4></div>
  <div class="image"><img src="http://www.cherubs2015.org/wp-content/themes/cherubs-2015/cherubs/jennifer_chen.jpg"></div>
  <p>“I speak Mandarin. I don’t remember when I learned it -- from when I was really little, I just knew English and Chinese. <span class="soundcite" data-id="216644974" data-start="0" data-end="4492" data-plays="1">I used to be better at Chinese, but now I’m definitely better at English. Chinese is the one we speak at home.</span>One
    good thing about being bilingual is that when you’re shopping or outside somewhere that doesn’t have very many Asians, you can talk to Chinese to your mom.”
  </p>
</div>
<div class="person">
  <div>
    <h2>Melis Şingin</h2>
    <h4>Istanbul, Turkey</h4></div>
  <div class="image"><img src="http://www.cherubs2015.org/wp-content/themes/cherubs-2015/cherubs/melis_singin.jpg"></div>
  <p>“I live in Turkey. I learned Turkish when I was born. In middle school, my Turkish was good, and the hardest part was to write.<span class="soundcite" data-id="216641225" data-start="0" data-end="8202" data-plays="1">I started learning English when I was 7, but it was high school when I really started talking in English.</span>My
    Turkish is better than my English.”
  </p>
</div>
<div class="person">
  <div>
    <h2>Jasmine Teng</h2>
    <h4>Kaohsiung City, Taiwan</h4></div>
  <div class="image"><img src="http://www.cherubs2015.org/wp-content/themes/cherubs-2015/cherubs/jasmine_teng.jpg"></div>
  <p>“I’ve learned Mandarin ever since I was born, because my parents are Taiwanese.<span class="soundcite" data-id="216641230" data-start="0" data-end="4962" data-plays="1">At my school, it’s mandatory to take Mandarin from kindergarten to eighth grade.</span>I
    learned English at the same time I learned Mandarin, because at my school it’s all English. Generally, it’s about the same, but my English may actually be better. I speak [English and Mandarin] about the same, depending on who I’m talking to.”
  </p>
</div>
<div class="person">
  <div>
    <h2>Glenn Billman</h2>
    <h4>San Carlos, Calif.</h4></div>
  <div class="image"><img src="http://www.cherubs2015.org/wp-content/themes/cherubs-2015/cherubs/glenn_billman.jpg"></div>
  <p>“I speak Italian pretty well because I lived abroad for six months in the second half of sophomore year. The first time I started learning Italian, I was in eighth grade, I think, and me and my friend learned basic phrases for a project for school.
    And then two or three months before I went to Italy, I started meeting with a tutor once a week and using a book and a little bit of Rosetta Stone, but that was pretty much useless. I showed up being able to say ‘pen’ but not much else. After I arrived,
    It just kind of happened.<span class="soundcite" data-id="216641234" data-start="0" data-end="12409" data-plays="1">I went to an Italian school and lived with an Italian family, so for about 18 hours every day for six months, I spoke Italian.</span>When
    I left Italy, I was basically fluent, and now, I still read novels in Italian and I can carry a conversation but I definitely have an accent. I’m getting worse and worse at speaking because I don’t have anyone to practice with.”
  </p>
</div>
<div class="person">
  <div>
    <h2>Nayanika Kapoor</h2>
    <h4>Palo Alto, Calif.</h4></div>
  <div class="image"><img src="http://www.cherubs2015.org/wp-content/themes/cherubs-2015/cherubs/nayanika_kapoor.jpg"></div>
  <p>“I’ve been taking Chinese at school since sixth grade. It’s been a journey. It’s not the easiest language to learn but I really enjoyed kind of struggling through it, finding the best techniques. I wish I spoke more outside of the classroom but I don’t,
    so hopefully that will increase in the future.<span class="soundcite" data-id="216641222" data-start="0" data-end="7000" data-plays="1">I don’t speak Hindi as much anymore, but I grew up understanding it completely and my parents have spoken it in the house as well.</span>My
    parents will speak to me in Hindi, or a mixture of Hindi and English, and I’ll respond in English, but I do watch Bollywood movies and I can fully understand them. I sing in Hindi, so technically I can understand that, but I feel uncomfortable speaking
    it sometimes.”
  </p>
</div>
<div class="person">
  <div>
    <h2>Shawna Chen</h2>
    <h4>Los Altos Hills, Calif.</h4></div>
  <div class="image"><img src="http://www.cherubs2015.org/wp-content/themes/cherubs-2015/cherubs/shawna_chen.jpg"></div>
  <p>“Mandarin was actually my second language, I technically spoke English first. <span class="soundcite" data-id="216644967" data-start="0" data-end="6660" data-plays="1">I always grew up understanding Mandarin because my parents spoke it and it was always present around the house.</span>I
    also lived in China from when I was four to ten. I went to a bilingual school in Shanghai and studied Chinese.”
  </p>
</div>
<br>
<br>
<br>
<h1>Cherub Glossary: the most important terms of the summer, translated</h1>
<table>
  <thead>
    <th id="none"></th>
    <th>Cherub</th>
    <th>Journalism</th>
    <th>Writing</th>
    <th>Editing</th>
    <th>Reporting</th>
  </thead>
  <tr>
    <td class="language">German</td>
    <td><span class="soundcite" data-id="216644804" data-start="0" data-end="1331" data-plays="1">Engel</span></td>
    <td><span class="soundcite" data-id="216644800" data-start="0" data-end="2246" data-plays="1">Journalismus</span></td>
    <td><span class="soundcite" data-id="216644794" data-start="0" data-end="1776" data-plays="1">Schreiben</span></td>
    <td><span class="soundcite" data-id="216644801" data-start="0" data-end="1880" data-plays="1">Bearbeiten</span></td>
    <td><span class="soundcite" data-id="216644795" data-start="0" data-end="1592" data-plays="1">Berichten</span></td>
  </tr>
  <tr>
    <td class="language">Spanish</td>
    <td><span class="soundcite" data-id="216644792" data-start="0" data-end="1750" data-plays="1">Angelito</span></td>
    <td><span class="soundcite" data-id="216644786" data-start="0" data-end="1880" data-plays="1">Periodismo</span></td>
    <td><span class="soundcite" data-id="216644782" data-start="0" data-end="1801" data-plays="1">Escritura</span></td>
    <td><span class="soundcite" data-id="216644789" data-start="0" data-end="1698" data-plays="1">Editar</span></td>
    <td><span class="soundcite" data-id="216644784" data-start="0" data-end="1592" data-plays="1">Reportar</span></td>
  </tr>
  <tr>
    <td class="language">Korean</td>
    <td><span class="soundcite" data-id="216637473" data-start="0" data-end="1410" data-plays="1">Uh-Rini</span></td>
    <td><span class="soundcite" data-id="216637465" data-start="0" data-end="1358" data-plays="1">Ul-Ron</span></td>
    <td><span class="soundcite" data-id="216637468" data-start="0" data-end="1331" data-plays="1">Gul-Ssugi</span></td>
    <td><span class="soundcite" data-id="216637471" data-start="0" data-end="1358" data-plays="1">Pyun Zip</span></td>
    <td><span class="soundcite" data-id="216637469" data-start="0" data-end="1122" data-plays="1">Bo-Do</span></td>
  </tr>
  <tr>
    <td class="language">Hebrew</td>
    <td><span class="soundcite" data-id="216637435" data-start="0" data-end="1932" data-plays="1">Malach</span></td>
    <td><span class="soundcite" data-id="216637433" data-start="0" data-end="1750" data-plays="1">Itonaoot</span></td>
    <td><span class="soundcite" data-id="216637431" data-start="0" data-end="1698" data-plays="1">Kiteevah</span></td>
    <td><span class="soundcite" data-id="216637434" data-start="0" data-end="1801" data-plays="1">Takanot</span></td>
    <td><span class="soundcite" data-id="216637432" data-start="0" data-end="1698" data-plays="1">Leedvoach</span></td>
  </tr>
  <tr>
    <td class="language">Mandarin</td>
    <td><span class="soundcite" data-id="216637483" data-start="0" data-end="1801" data-plays="1">Xiăo Tiān Shí</span></td>
    <td><span class="soundcite" data-id="216637480" data-start="0" data-end="2298" data-plays="1">Xīn Wén Xué</span></td>
    <td><span class="soundcite" data-id="216637476" data-start="0" data-end="1776" data-plays="1">Xiĕ Zuò</span></td>
    <td><span class="soundcite" data-id="216727337" data-start="0" data-end="1985" data-plays="1">Biān Jí Xiū Găi</span>
    </td>
    <td><span class="soundcite" data-id="216727379" data-start="0" data-end="2220" data-plays="1">Pù Chén Zhí Shù</span>
    </td>
  </tr>
  <tr>
    <td class="language">Turkish</td>
    <td><span class="soundcite" data-id="216637447" data-start="0" data-end="1776" data-plays="1">Melek</span></td>
    <td><span class="soundcite" data-id="216637444" data-start="0" data-end="2000" data-plays="1">Gazetecilik</span></td>
    <td><span class="soundcite" data-id="216637439" data-start="0" data-end="2000" data-plays="1">Yazmak</span></td>
    <td><span class="soundcite" data-id="216637438" data-start="0" data-end="2220" data-plays="1">Düzeltmek</span></td>
    <td><span class="soundcite" data-id="216637441" data-start="0" data-end="1932" data-plays="1">Sunmak</span></td>
  </tr>
  <tr>
    <td class="language">French</td>
    <td><span class="soundcite" data-id="216637456" data-start="0" data-end="1698" data-plays="1">Chérubin</span></td>
    <td><span class="soundcite" data-id="216637450" data-start="0" data-end="1932" data-plays="1">Journalisme</span></td>
    <td><span class="soundcite" data-id="216637448" data-start="0" data-end="1698" data-plays="1">Écriture</span></td>
    <td><span class="soundcite" data-id="216637452" data-start="0" data-end="1698" data-plays="1">Rédaction</span></td>
    <td><span class="soundcite" data-id="216637449" data-start="0" data-end="1540" data-plays="1">Rapports</span></td>
  </tr>
  <tr>
    <td class="language">Italian</td>
    <td><span class="soundcite" data-id="216637464" data-start="0" data-end="2298" data-plays="1">Cherubino</span></td>
    <td><span class="soundcite" data-id="216637461" data-start="0" data-end="2507" data-plays="1">Giornalismo</span></td>
    <td><span class="soundcite" data-id="216637458" data-start="0" data-end="2000" data-plays="1">Scrivere</span></td>
    <td><span class="soundcite" data-id="216637462" data-start="0" data-end="2507" data-plays="1">Redazionare</span></td>
    <td><span class="soundcite" data-id="216637460" data-start="0" data-end="3000" data-plays="1">Segnalazionare</span></td>
  </tr>
  <tr>
    <td class="language">Hindi</td>
    <td><span class="soundcite" data-id="216733442" data-start="0" data-end="1540" data-plays="1">Farishta</span></td>
    <td><span class="soundcite" data-id="216733575" data-start="0" data-end="1880" data-plays="1">Patrakāritā</span></td>
    <td><span class="soundcite" data-id="216733671" data-start="0" data-end="1358" data-plays="1">Lēkh</span></td>
    <td><span class="soundcite" data-id="216733947" data-start="0" data-end="1932" data-plays="1">Sampādan</span></td>
    <td><span class="soundcite" data-id="216733626" data-start="0" data-end="1698" data-plays="1">Prativedar</span></td>
</table>
            
          
!
            
              .person {
  float: left;
  width: 90%;
  display: block;
  margin: 4%;
}

h1 {
  font-family: Open Sans;
  text-align: center;
}

h2 {
  font-family: Open Sans;
}

h4 {
  font-family: Open Sans;
  margin-top: -10px;
}

p {
  font-family: Georgia;
  border-left: solid 6px #816C94;
  padding: 0.5em 0 0.5em 1.5em;
}

table {
  font-family: Georgia;
  width: 90%;
  margin: 4%;
  border-collapse: collapse;
}

thead {
  font-family: Open Sans;
  font-size: 18px;
  border-bottom: solid 4px #816C94;
  text-align: left;
}

#none {
  border-right: solid 4px #816C94;
}

.language {
  font-family: Open Sans;
  font-size: 18px;
  font-weight: bold;
  border-right: solid 4px #816C94;
}

th,
td {
  padding: 2%;
}

.image {
  float: right;
  width: 40%;
  display: block;
  padding-top: em;
}

img {
  width: 100%;
}

p {
  display: inline-block;
  width: 45%;
}
            
          
!
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.
Loading ..................

Console