cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

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.

            
              <div class="container-fluid no-padding">
  <div class="top">
    <img src="https://dl.dropboxusercontent.com/s/85tm4lanniy9cj2/sushi-freecodecamp-tributepage.jpg" class="img-responsive" alt="sushi">
    <div class="row">
      <div class="header">
        <h1><strong>A Tribute to Sushi</strong><br>
      <small>Japan's “Fast Food”</small>
      </h1>
      </div>
    </div>
  </div>

  <div class="body">
    <div class="row">
      <div class="col-md-4">
        <br>
        <img src="https://upload.wikimedia.org/wikipedia/commons/6/64/Hiroshige_Bowl_of_Sushi.jpg" class="img-responsive" alt="Utagawa Hiroshige (歌川広重) [Public domain], via Wikimedia Commons">
        <h4><small><i>Bowl of Sushi</i>; Utagawa Hiroshige (1797-1858) </small></h4>
      </div>
      <div class="col-md-8">
        <h3>The Beginnings of Sushi</h3>
        <p>The original type of sushi was first developed in Southeast Asia and spread to south China before being introduced to Japan sometime around the 8th century. Fish was salted and wrapped in fermented rice, a traditional lacto-fermented rice dish.
          The fermentation of the rice prevented the fish from spoiling. The fermented rice was discarded and fish was the only part consumed. </p>
        <p>
          During the Edo period, haya-zushi (fast sushi) was introduced. It was assembled so that both rice and fish could be consumed at the same time, and the dish became unique to Japanese culture. Rice was now mixed with vinegar, with fish, vegetables and dried
          food stuff added. This type of sushi is still very popular today. </p>
        <br>
        <p class="lead">People in Tokyo were living in haste even a hundred years ago.</p>
        <p>
          When Tokyo was still known as Edo in the early 19th century, mobile food stalls run by street vendors became popular. During this period nigiri sushi was introduced, consisting of an oblong mound of rice with a slice of fish draped over it. </p>
        <p>
          Today the sushi dish internationally known as "sushi" (nigiri zushi) is a fast food invented by <a href="https://en.wikipedia.org/wiki/Hanaya_Yohei" target="_blank">Hanaya Yohei (華屋与兵衛; 1799–1858)</a> in today's Tokyo. The nigiri zushi invented by Hanaya was not fermented and could be eaten using the fingers or chopsticks.
          It was an early form of fast food that could be eaten in public or in the theater.
        </p>
        <p class="bg-grey"><a href="https://en.wikipedia.org/wiki/History_of_sushi" target="_blank">More information on the history of sushi.</a> (Wikipedia)</p>
      </div>
    </div>
<br>
    <div class="row">
      <div class="col-md-4">
        <br>
        <img src="https://upload.wikimedia.org/wikipedia/commons/3/35/Conveyor_belt_sushi_by_EverJean_in_Kyoto.jpg" class="img-responsive" alt="Kaiten Sushi">
        <h4><small>Kaiten Sushi in Japan<a href="https://commons.wikimedia.org/wiki/File%3AConveyor_belt_sushi_by_EverJean_in_Kyoto.jpg" target="_blank"> (photo by: EverJean from Kyoto (Flickr) [CC BY 2.0], via Wikimedia Commons)</a></small></h4>
      </div>
      <div class="col-md-8">
        <h3>Faster Sushi – <i>Kaiten Sushi</i></h3>
        <p>Kaiten-zushi is a sushi restaurant where the plates with the sushi are placed on a rotating conveyor belt that moves past every table and counter seat. Customers may place special orders, but most simply pick their selections from a steady stream
          of fresh sushi moving along the conveyor belt. The final bill is based on the number and type of plates of the consumed sushi. </p>
        <br>
        <p class="lead">Kaiten-zushi: literally "go around sushi"; aka "conveyor belt sushi. </p>
        <p>
          Conveyor belt sushi was invented by Yoshiaki Shiraishi (1914–2001), who had problems staffing his small sushi restaurant. He got the idea of a conveyor belt sushi after watching beer bottles on a conveyor belt in an Asahi brewery. After five years of
          development and design, Shiraishi opened the first conveyor belt sushi Mawaru Genroku Sushi in Osaka in 1958. </p>
        <p>
          A conveyor belt sushi boom started in 1970 after introduced at the Osaka World Expo, then again in 1980 when eating out became more popular, and finally in the late 1990s when inexpensive restaurants became popular after the burst of the economic bubble.
          Today, new variant of conveyor belt sushi has a touch screen monitor at every table, showing a virtual aquarium with many fish. The customer can order the sushi by touching the type of fish, which then is brought to the table by conveyor belt.</p>
        <p>
          Sushi is now loved all over the world and even kaiten-zushi are popular in London, New york and other large cities. </p>
        <p class="bg-grey"><a href="https://en.wikipedia.org/wiki/Conveyor_belt_sushi" target="_blank"> More information on kaiten sushi.</a> (Wikipedia)</p>
      </div>
    </div>
  </div>
  <br>
  <div class="bottom">
    <div class="row">
      <h6 class="text-center">A tribute page project in <a href="https://www.freecodecamp.com" target="_blank">Free Code Camp.</a></h6>
    </div>
  </div>
</div>
            
          
!
            
              .no-padding{
  padding: 0;
  overflow-x: hidden;
}
.top{
  background-color: black;
}
.bottom{
  background-color: black;
}
.header{
  color:#d94929;
  padding: 0px 0px 0px 30px;
}
.body {
  padding: 10px 10px 0px 10px;
}
h6 {
  padding: 0px 0px 5px 25px;
  color: white;
}
a{
  color: #d94929;
}

            
          
!
999px
Loading ..................

Console