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

              
                <main id="main">
  <header>
    <h1 id="title"><i>SHOJI MEGURO</i></h1>
    
    <div>
      <div class="text-background"><a href="#first-topic"><h3>GAME COMPOSER</h3></a></div>
      <div class="text-background"><a href="#second-topic"><h3>INFLUENCES</h3></a></div>
      <div class="text-background"><a href="#third-topic"><h3>LEARN MORE</h3></a></div>
    </div>
  </header>
  <div id="main-content">
    <div id="img-div">
      <img id="image" class="image" src="https://lastfm.freetls.fastly.net/i/u/770x0/8aadb514928d4be8bbf1c3f78a5b69ab.jpg" alt="Shoji Meguro playing guitar">
      <h2 id=img-caption>Shoji Meguro playing his guitar</h2>
    </div>
    <div id="first-topic" class="tribute-info">
      <h2>Game composer</h2>
      <div class="info-background"><p id="tribute-info"> Shoji Meguro (目黒 将司, Meguro Shōji, born June 4, 1971) is a Japanese composer and guitarist who works for the video game company Atlus. Meguro joined them in 1995 and has since worked on many of their games, mainly those in the Persona series. His musical style spans several genres, including rock, electronic, jazz, classical, and J-pop. He has also served as a creative director on the PSP remakes of Shin Megami Tensei: Persona and Persona 2. 
        Meguro's career was propelled to international stardom in his craft with his work on Persona 3, where he used a pop-based vocal style, and the soundtrack to the game sold over 100,000 copies. In 2008, Meguro continued upon his success with Persona 4, where he blended genres to craft a unique sound. A concert at Akasaka Blitz was held to celebrate Meguro's work on the Persona series, where Persona favorites were played. 
        </p></div>
    </div>
    <div id="second-topic" class="tribute-info">
      <h2>INFLUENCES</h2>
      <div class="info-background" id="info-backgroundb"><p id="tribute-infob"> Although many of his works feature a signature rock style, Meguro experiments with different musical genres, such as orchestral, electronica, jazz, and hip hop on various projects. Meguro cites video game composers Koichi Sugiyama, Hiroshi Kawaguchi, and Takenobu Mitsuyoshi, as well as T-Square, Casiopea, Beethoven, and Tchaikovsky as some of his musical influences. Regarding the use of English lyrics in many of the Persona games, Meguro stated that due to Japanese people not fully understanding the language, it helped create music that was not as distracting to them as Japanese would be.
        </p></div>
    </div>
    <div id="img-divb">
      <img id="imageb"  class="image" src="https://pbs.twimg.com/media/DGN2_puVwAAkrW9.jpg" alt="Persona live show">
      <h2 id="img-captionb">Persona super P-LIVE sound bomb 2017</h2>
    </div>
  </div>
  <footer id="third-topic">
    <h3 id="learn-more"><a id="tribute-link" href="https://en.wikipedia.org/wiki/Shoji_Meguro" target="_blank">Learn more about this amazing musician here</a></h3>
    <h4><a id="tribute-linkb" href="https://github.com/Jenrykster" target="_blank">; )</a></h4>
  </footer>
</main>
              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');

a{
  text-decoration:none;
  color:inherit;
}
body{
 background: black;
 margin: 0px; 
 font-family: 'Noto Sans JP', sans-serif;
 color:snow;
 overflow-x: hidden;
}
header{
  color: snow;
  background-color:#be0000;
  padding: 50px;
  user-select: none;
}

header div{
  display:flex;
  flex-direction:row;
  justify-content:center;
}
header h3{
  font-style: bold;
  margin-right: 80px;
  margin-left: 80px;
  margin-bottom: 0px;
  margin-top: 0px;
}
.text-background:hover{
  background-color:snow;
  color: #000;
  transform: skew(20deg);
  box-shadow: -5px 5px black;
}
.text-background:hover h3{
  transform: skew(-20deg); 
}

#title {
  text-align:center;
  margin-top: 0px;
  margin-left: 50px;
  font-size: 6em;
  background-color: #000;
  text-shadow: -3px 3px rgba(200,200,200,.15);
  box-shadow: -30px 15px snow;
  transform: skew(10deg);
}

#main-content{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  margin: 50px;
  margin-bottom:0px;
  row-gap: 50px
}

#img-divb h2{
  text-align:center;
}
.image{
 display:block;
 max-width: 90%;
 max-height: 90%;
 box-shadow: -30px 15px snow;
 border: 5px solid snow;
 margin: 0 auto;
}

.tribute-info h2 {
  display:inline-block;
  color: #000;
  background-color: snow;
  padding-right: 10px;
  font-style:bold;
  font-size:2em;
  text-shadow: -3px 3px rgba(0,0,0,0.15);
}

.tribute-info p{
  font-size:1.3em;
  transform:skew(2deg);
  margin: 50px
}

.info-background {
  background-color: #be0000;
  transform: skew(-2deg);
  border: 5px solid snow
}

#second-topic{
  display:inline-block;
  text-align:center
}

#info-backgroundb{
  transform:skew(2deg);
  margin-bottom:0px
}
#info-backgroundb p{
  transform:skew(-2deg);
}

#imageb{
  margin-left: 50px;
  margin-bottom:0px
}

footer{
  color: snow;
  background-color:#be0000;
  padding: 50px;
  user-select: none;
  margin-top: 0px;
  justify-content:center;
  text-align:center;
}
#learn-more{
  display:inline-block;
  box-shadow: -10px 5px snow;
  background-color: #000;
}
#tribute-link{
  text-decoration: underline;
}

@media (max-width: 1000px){
  
  #main-content{
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    margin:10px;
    margin-top:30px;
  }
  #title{
    font-size:3em;
    margin-top:30px;
  }
  header h3{
    font-size: 1em;
    margin: 30px;  
    white-space:nowrap;
  }
  #first-topic {
    text-align: center;
  }
  #img-caption{
    text-align: center;
    margin-bottom:0px;
  }
  #image{
    max-width: 70%;
  }
  .info-background{
    margin: 0px;
    transform: skew(0deg); 
   
  }
  .info-background p{
    transform: skew(0deg)
  }
  #info-backgroundb{
    transform: skew(0deg)
  }
  #info-backgroundb p{
    transform: skew(0deg)
  }
  #imageb{
    margin-left: 40px;
  }
  #tribute-info{
    text-align:left;
    margin:20px;
  }
  #tribute-infob{
    text-align:left;
    margin:20px;
  }
}

@media(max-width:500px){
  header h3{
    margin-left: 10px;
    margin-right:10px;
  }
}
              
            
!

JS

              
                
              
            
!
999px

Console