Pen Settings

HTML

CSS

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

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="container">
  
<!-- Header block - FINISHED, but there has to be a better solution to accomplish the border around the text for small screens...just don't know what. -->
  
  <div class="topbox-extraspace">
    <div class="panel-topbox">
    <div class="panel-heading">
      <h1>Лайка</h1>
      <h2>Laika the Soviet Space Dog</h2>
    </div>
  <div class="panel-body"></div>
    </div>
  </div>  
  
  
  <!-- Laika in cockpit photo - FINISHED -->
  
  <div class="text-center">
    <div id="imagespace"><img class="img-responsive" src="https://www.naomi-maria.com/freecodecamp/project1/laika-1000w.jpg" alt="Photo of Laika the Soviet space dog."></div>
   <div class="caption text-center">
     <p>Laika was launched into space aboard Sputnik 2 in 1957 and was the first animal to orbit the Earth.
     </p>
    </div>
  </div>
  
<!-- Some facts about Laika. FINISHED -->
  
  <div class="panel-body ">
    
      <p>Most people think Laika was the first dog in a rocket, but she wasn't. Laika was the first dog to orbit the planet before dying a horrible death a few hours later from either running out of oxygen or getting cooked alive in Sputnik 2.<p> 
    <p>Laika's actual name was Kudryavka which means Little Curly in Russian. Western media eventually settled on the name of Laika out of the many names used in headlines about the dog. Laika - A collective name for various husky like breeds that the international press used as her name. She was a stray dog like other dogs in the space program selected for their scrappiness and ability to survice extreme conditions.</p>
    <p>Laika's last meal was some terrible nutritional space goo she ate in the capsule during her flight, but she was able to go and spend a day in a regular home with people and play with kids to have a pleasant memory before her adventure. She also got a few kisses on the nose before they sealed her into the rocket.
   
  </div>
  
<!-- Aliases. Rework with panels -->
  
  <div>
    <div class="panel-h3"><h3>Aliases</h3></div>
    <div class="row">
    <div class="col-md-2"><h4>Laika</h4></div>
    <div class="col-md-2"><h4>Pupnik</h4></div>
    <div class="col-md-2"><h4>Pooch-nik</h4></div>
    <div class="col-md-2"><h4>Sputpup</h4></div>
    <div class="col-md-2"><h4>Woofnik</h4></div>
    <div class="col-md-2"><h4>Muttnik</h4></div>
    </div>
    </div>
  
  <!-- Not sure what this section will be -->
  

  <div><div class="panel-heading"><h3 class="panel-h3">The Taste of Regret</h3></div>
<div class="panel-body">
  <p>The plan was always to give Laika a one way ticket to space and there wasn't much attention paid to the fact that she was intended to die in space until sometime later. This first started with outside the Soviet Union, but eventually even scientists in the space program expressed regret and guilt about sending animals to their death without any real scientific gains.</p>
  <p>Eventually it was decided that future missions sending dogs into space should have some sort of return plan. Of course this didn't mean that every dog that went into space after Laika survived. Four more dogs died in accidents or in intentional explosions to protect Soviet rocket science. Laika was recognized later with a cameo in a big monument depicting the history of the space program in 1997, but in 2008 she was recognized with her very own half-hand, half-rocket holding a dog monument for her bravery even though the poor dog really had no idea what she was getting herself into.   </p>
  </div>
  </div>

  
<!-- Memorial photo - FINISHED -->
  
  <div class="text-center">
    <div id="imagespace"><img class="img-responsive" src="https://www.naomi-maria.com/freecodecamp/project1/laika-memorial-1000w.jpg" alt="Laika memorial in Russia." class="img-responsive"></div>
   <div class="caption text-center">
     <p>
       Memorial monument of Laika in Russia.
     </p>
    </div>
  </div>  

<!-- Links section - FINISHED -->
  
 <div>   
  <h3 class="panel-h3 text-center">If you weren't already sad, some more articles about Laika</h3>
    <div class="bulletdiv">
    <div class="row">
    <div class="col-md-4">
     <ul>
        <li><a href="http://time.com/3546215/laika-1957/" target="blank">The Sad Story of Laika, the First Dog Launched Into Orbit</a></li>
        <li><a href="https://news.bbc.co.uk/2/hi/science/nature/2367681.stm" target="blank">First dog in space died within hours</a></li>
      </ul>
    </div>
    <div class="col-md-4">
      <ul>
        <li><a href="http://www.space.com/17764-laika-first-animals-in-space.html" target="blank">Laika the Dog & the First Animals in Space</a></li>
        <li><a href="https://starchild.gsfc.nasa.gov/docs/StarChild/space_level2/laika.html" target="blank">Laika, the first dog in space</a></li>
      </ul>
    </div>
    <div class="col-md-4">
      <ul>
        <li><a href="https://www.thedodo.com/laika-space-dog-1092711354.html" target="blank">First Dog Put In Orbit Was So Sweet, Scientist Regretted Sending Her There</a></li>
        <li><a href="https://en.wikipedia.org/wiki/Laika" target="blank">Laika - Wikipedia</a></li>
      </ul>    
    </div>
    </div>
    </div>
  </div>

<!-- Footer - FINISHED -->
  
<div class="small text-center">
  <a href="https://www.freecodecamp.com" target="blank">Free Code Camp</a> Tribute Page Project by <a href="https://www.freecodecamp.com/naomimaria" target="blank">Naomi Maria</a>.
</div>

</div>
              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css?family=Cabin|Fjalla+One');

/* this gets rid of all the rounded corners in panels */
* {
  border-radius: 0 !important;
}
/* ----- */
  body {
    margin-top: 5%;
    margin-right: 5%;
    margin-bottom: 5%;
    margin-left: 5%;
    background-image: url("https://www.naomi-maria.com/freecodecamp/project1/laika-tile-500.jpg");
    background-repeat;
 /* text attributes - NO PADDING OR MARGINS, except footer */
    font-family: Cabin, sans-serif;
    font-color: #000000;
    }
  h1 {
    font-family: Cabin, sans-serif;
    font-size: 60pt;
    text-transform: uppercase;
    letter-spacing: 10px;
    text-align: center;
    } 
  h2 {
    font-family: Fjalla One, sans-serif;
    text-transform: uppercase;
    font-size: 21pt;
    letter-spacing: 0.75px;
    text-align: center; 
    } 
  
  h3 {
    font-family: Fjalla One, sans-serif;
    text-transform: uppercase;
    font-size: 25pt;
    letter-spacing: 0.5px;  
    text-align: center;
    }
  h4 {
    font-family: Cabin, sans-serif;
    text-transform: uppercase;
    text-align: center;
    }
  .small {
    margin: 50px 0px 0px 0px;
    }  
  .caption {
    text-transform: uppercase;    
    letter-spacing: 1px;
    margin: 15px 0px 15px 0px;
    }  
/* areas - DO ADJUST MARGINS & PADDING HERE*/
  .img-responsive {
    margin: 0 auto;
    }
  .panel-topbox {
    border: 8px solid #000000;
    padding: 0px 0px 0px 0px;
    margin: 15px 250px 15px 250px;
    }
  .topbox-extraspace {
    margin-bottom:75px;
    }
  .panel-heading {
    border: 0px;
    }
  .panel-h3 {
    padding: 25px 5% 25px 5%;
    margin: 25px 5% 25px 5%;
    }
  .panel-body {
    text-align: justify;
    border: 0px;
    }
  .imagespace: {
    margin: 50px 5% 50px 5%;
    }
  .bulletdiv {
    margin: 0% 5% 0% 5%;
    }
  .container {
    background-color: #ffffff;
    width: 85%;
    padding: 5% 5% 5% 5%;
    }
              
            
!

JS

              
                
              
            
!
999px

Console