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

              
                <header>
  <a class="logo" href="#">LogoMushu</a>
  <nav>
    <ul class="navbar">
      <li><a href="#tribute-info">About</a></li>
      <li><a href="#plans">Plans</a></li>
      <li><a href="#bottom">Contact</a></li>
    </ul>
  </nav>
</header>

<main id="main">
  <section class="splash">
    <div class="splash-content">
      <figure id="img-div">
        <img id="image" src="https://i.imgur.com/o1lx6bl.jpg?1" alt="A black cat laying on a carpet with a hairtie.">
        <figcaption id="img-caption" hidden>Textual Content</figcaption>
      </figure>
      <div class="splash-textbox">
        <h1 id="title">Mushu</h1>
        <h2>Master of the Universe</h2>
      </div>
    </div>
  </section>
  
<h2 class="section-title">About the Master</h2>
  <section id="tribute-info">
    <div class="content-container">
      <p>Mushu is a 12 year-old kitten with dreams of world domination.</p>
      <p>He is making his Internet debut here and does not currently have any social media accounts.</p>
      <p>Some of his favorite activities include:</p>
      <ul>
        <li>Long naps in obscure places</li>
        <li>Snacking on chewy treats</li>
        <li>Staring at void ghosts</li>
      </ul>
      <p id="learn-more">If you would like to learn more you can check out the <a id="tribute-link" href="https://en.wikipedia.org/wiki/Cat" target="_blank">Wikipedia page on cats</a>.</p>
    </div>
  </section>
  
<h2 class="section-title">Plans for World Domination</h2>
  <section id="plans">
    <div class="content-container">
      <p>Last month's laundry room defense left the squirrels reeling on the back foot and hurting for supplies. While Mushu did not press the advantage of a sucessfull defense, preparations for further action are ongoing. Kitten Kommandos have been seen training for night-time CQC tactics and surprise drops from the top of the refridgerator. Meanwhile, ball-of-yarn production is at an all time high and stockpiles are overflowing all available baskets.</p>
      <p>The Master declined comment on his future plans for fear that "...dog spies might be listening." However, his current holding action in the doorway to the kitchen gives us hope that a spectacular offensive is in the works.</p>
    </div>
  </section>

  <footer id="bottom">
    <p>&copy; 2021 DiscountBear</p>
    <ul>
      <li><a href="#">Facebook</a></li>
      <li><a href="#">Instagram</a></li>
      <li><a href="#">Twitter</a></li>
    </ul>
  </footer>
</main>
              
            
!

CSS

              
                /* Basic Settings */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

:root {
  --bright-gray: #EEEEEE;
  --chinese-silver: #CCCCCC;
  --spanish-gray: #999999;
  --granite-gray: #666666;
  --dark-charcoal: #333333;
  --black: #000000;
}

body {
  font-size: 16px;
  font-family: 'Cabin', sans-serif;
  background-color: var(--black);
  color: var(--bright-gray);
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  top: 50px;
}

.section-title {
  width: 100%;
  text-align: center;
  border-bottom: solid;
  padding: 10px;
  margin-top: 20px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Roboto Condensed', sans-serif;
}

h1 {
  font-size: 35px;
}

/* Navigation Styles */
header {
  background: var(--dark-charcoal);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10%;
  width: 100vw;
  height: 50px;
  position: fixed;
  z-index: 10;
}

header li, a {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: bold;
  color: var(--bright-gray);
  text-decoration: none;
}
.navbar {
  display: flex;
}

.logo {
  cursor: pointer;
  text-transform: uppercase;
}

.logo:hover {
  color: var(--chinese-silver);
  border-bottom: solid var(--chinese-silver);
}

.navbar li {
  list-style: none;
  padding-left: 20px;
}

.navbar li a {
  transistion: all 0.3 ease 0s;
}

.navbar li a:hover {
  color: var(--chinese-silver);
  border-bottom: solid var(--chinese-silver);
}

/* Splash Section Styles*/
.splash {
  width: 100%;
  height: 96vh;
  background-image: url("https://images.unsplash.com/photo-1633432695542-b2c8e2b8a26c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2664&q=80");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-bottom: 10px;
}

.splash-content {
  max-width: 80%;
  display: flex;
  flex-direction: column;
  flex-wrap: no-wrap;
  justify-content: center;
  align-items: center;
}

.splash-textbox {
  background-color: var(--dark-charcoal);
  border-radius: 15px;
  padding: 15px;
  margin-top: 15px;
  max-width: 50%;
  min-width: 300px;
  box-shadow: 2px 2px 2px var(--black);
}

.splash h1 {
  text-transform: uppercase;
}

#image {
  max-width: 40%;
  min-width: 300px;
  border: solid var(--chinese-silver);
  border-radius: 50%;
  display: block;
  margin: 0 auto;
  box-shadow: 2px 2px 2px var(--black);
}

/* About Section Styles */
.content-container {
  padding: 0 20%;
}

section {
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
}

.content-container ul {
  padding-left: 20px;
}

.content-container p {
  padding-top: 5px;
}






/* Footer Styles */
footer {
  background-color: var(--dark-charcoal);
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10%;
  margin-top: 10px;
}

footer ul {
  display: flex;
}

footer li {
  list-style: none;
  padding-left: 20px;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: bold;
  color: var(--bright-gray);
  text-decoration: none;
}

footer li a:hover {
  color: var(--chinese-silver);
  border-bottom: solid var(--chinese-silver);
}
              
            
!

JS

              
                
              
            
!
999px

Console