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 includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

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

              
                <html>

<head>
  <link href="https://fonts.googleapis.com/css?family=Nova+Square|Oswald:300|Roboto:400,900|Ubuntu:300" rel="stylesheet">
</head>

<body>
  <div class="container-fluid">
    <div class="bezel">
      <div class="container">
        <div class="row">
          <div class="col-xs-12">
            <p>
              <h1 class="text-center">Commander Shepard</h1>
            </p>
            <p>
              <h2 class="text-center">"We will fight! We will sacrifice! And we will find a way! That's what humans do!</h2>
            </p>
            <div class="text-center imgbox">
              <img class="img-fluid" src="https://s17.postimg.org/5ad8b1mxr/mass-effect-3-femshep_1200.0.0.jpg" alt="Cmdr. Shepard stands ready to retake Earth from Reaper forces.">
              <p class="descrip"> Commander Shepard, the first Human Spectre, perpares to retake Earth from the Reaper forces. She united the races of the galaxy to fight together to defeat the Reapers. Her brave sacrifice saved galactic civilization from being wiped out.
                Some have speculated that Commander Shepard survived the destruction of the Citadel after she activated the Crucible, however her fate remains a mystery to this day.</p>
            </div>
            <div class="center-block listbox">

              <h3 class="text-center"> A Timeline of Cmdr. Shepard's Life</h3>
              <ul class="center-block" style="list-style-type:square">
                <li><strong>2154:</strong> April 11th - Shepard is born into an Alliance Navy family.</li>
                <li><strong>2168:</strong> Shepard receives secondary exposure to element zero. Permanent biotic inclination manifests.</li>
                <li><strong>2171:</strong> Shepard is formally observed to be a biotic and is fitted with L3 implants.</li>
                <li><strong>2172:</strong> April 11th - Shepard follows in her parent's footsteps and enlists as a Vanguard in the Alliance Military.
                  <li><strong>2175:</strong> Shepard completes the Systems Alliance Special Forces training program, obtaining the highest designation, "N7".</li>
                  <li><strong>2176:</strong> A band of slavers, pirates, and Batarian Warlords attack the human colony of Elysium. Shepard, on shore leave rallies the civilian inhabitants of the colony to hold off the attack. Shepard singlehandedly held off
                    the attackers when they breached the defensive lines and held them back until allied reinforcements arrive to drive the attackers away.</li>
                  <li><strong>2183 (early):</strong> Commander Shepard is assigned to the SSV Normandy as the executive officer under David Anderson.</li>
                  <li><strong>2183:</strong> Commander Shepard is named the first Human Spectre after uncovering Specter Saren Arterius' plot at Eden Prime. The Alliance Navy transfers command of the SSV Normandy from Captain David Anderson to Commander Shepard.</li>
                  <li><strong>2183:</strong> Commander Shepard leads a strike team through the Conduit to defeat Saren Arterius, Reaper capital ship "Sovereign", and the Geth invasion force. A large part of the Alliance Navy is lost defending the Council.</li>
                  <li><strong>2183 (late):</strong> The SSV Normandy is attacked by unknown forces, Commander Shepard is presumed KIA.</li>
                  <li><strong>2183 (late):</strong> Commander Shepard's body is obtained by Cerberus with the help of Liara T'Soni. The Lazarus Project begins.</li>
                  <li><strong>2184:</strong> Commander Shepard makes contact with Admiral Anderson at the Citadel and informs him of the Cerberus backed mission to investigate missing human colonists.</li>
                  <li><strong>2184:</strong> Commander Shepard destroys the Collector base and betrays Cerberus.</li>
                  <li><strong>2184:</strong> Commander Shepard assists Liara T'Soni defeat the Shadow Broker.</li>
                  <li><strong>2185:</strong> To delay the imminent Reaper invasion, Commander Shepard destroys the Mass Relay in the Bahat system, killing all colonists on Arathot. Shepard surrenders herself into Alliance Military custody for potential court-martial.</li>
                  <li><strong>2186:</strong> September: Reaper forces invade the Milky Way Galaxy. Commander Shepard is reinstated by the Alliance Navy to lead the effort to unite the Council Races.</li>
                  <li><strong>2186:</strong> October: Commander Shepard unites the Krogan and Turian races by supporting Dr. Mordin Solus' Genophage cure.</li>
                  <li><strong>2186:</strong> Late October: Commander Shepard resolves the confict between the Geth and Quarians.
                    <li><strong>2186:</strong> November: Thessia is lost to Reaper forces, Commander Shepard loses a Prothean beacon to Cerberus forces.</li>
                    <li><strong>2186:</strong> November: Shepard uncovers the truth of Sanctuary. The supposed safe haven was a Cerberus front for brutal experiments on refugees of the Reaper War. Specialist Traynor and EDI, were able determine the location
                      of Cerberus' Chronos Station through tracking a Cerberus operative's shuttle.</li>
                    <li><strong>2186:</strong> Late November: Shepard leads an assault on Chronos Station, destroying Cerberus.</li>
                    <li><strong>2186:</strong> December: The combined fleets of the galaxy's races converge on Sol, Commander Shepard leads the ground assault to defeat Reaper forces on Earth. Shepard and Admiral Anderson are beamed to the Citadel. It is
                      presumed that Shepard or Anderson triggered the Crucible device to fire, destroying the Reaper threat.</li>
              </ul>
              <!--        <blockquote class="blockquote-reverse"><p><h2>"Look around you. You're not in this fight alone. We face our enemy together, and together we will defeat them!"</h2></p>
             <footer><h2>-Commander Shepard<h2></footer></blockquote> !-->

              <div class="container">
                <blockquote class="blockquote-reverse">
                  <p>
                    <h2>"Look around you. You're not in this fight alone. We face our enemy together, and together we will defeat them!"</h2>
                  </p>
                  <footer>
                    <h2>Commander Shepard</h2>
                  </footer>
                </blockquote>
              </div>
              <p></p>
              <p></p>
              Read more about the hero of the Reaper War on her Wikia<a href="http://masseffect.wikia.com/wiki/Commander_Shepard" target="_blank"> page</a>.
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</body>

</html>
              
            
!

CSS

              
                body {
  background-color: #ddd;
}
.bezel {
  border-radius: 1%;
  padding-right: 50px;
  padding-left: 50px;
  margin-top: auto;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: auto;
  background-color: #ccc;
}
.container {
  padding-right: 50px;
  padding-left: 50px;
  margin-right: auto;
  margin-left: auto;
  background-color: #ccc;
}
h1 {
  font-size: 50px;
  font-family: "Nova Square", cursive;
}

h2 {
  font-size: 30px;
  font-family: "Oswald", sans-serif;
}
h3 {
  font-size: 20px;
  font-family: "Roboto", sans-serif;
  font-weight: bold;
}
.descrip {
  padding-top: 10px;
  padding-bottom: 0px;
  font-size: 15px;
  font-family: "Roboto", sans-serif;
}

.imgbox {
  display: block;
  border-style: solid;
  border-color: #ff0000;
  border-width: 1px;
  border-radius: 3%;
  background-color: grey;
  padding-top: 8px;
  padding-left: 8px;
  padding-right: 8px;
  padding-bottom: 0px;
}

.listbox {
  text-color: #000000;
  min-height: 1px;
  margin-top: 10px;
  margin-right: auto;
  margin-left: auto;
}

              
            
!

JS

              
                
              
            
!
999px

Console