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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ 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

              
                <div class="opening-screen">
  <p class="fakeh1">BTS</p>
  <p class="fakep">a brief history</p>
</div>

<header>
  <h1 id="title">BTS</h1>
  <p>a brief history</p>
</header>

<main id="main">
  <div class="group-photo-1">
    <figure id="img-div">
      <img src="https://pbs.twimg.com/media/E7EHBY8X0AwrJnP?format=jpg&name=small" alt="A group photo of BTS from their SBS News appearance. They're standing in front of a purple screen, huddled together, smiling." class="bts-group-photo" id="image">
      <figcaption id="img-caption">212407 : BTS' appearance on SBS News / Left to right : V, Jin, Jungkook, RM, Suga, J-Hope, Jimin</figcaption>
    </figure>

    <section class="quick-facts">

      <div class="quick-facts-div">
        <h2>Quick Facts</h2>
        <hr>
        <ul>
          <li>BTS debuted June 13th, 2013.</li>
          <li>The band is from Seoul, South Korea.</li>
          <li>There are 7 members.</li>
          <li>BTS has released 15 albums, inlcuding Dark & Wild, Youth, Most Beautiful Moment in Life: Young Forever, Wings, Love Yourself: Tear, Map of the Soul: 7, and BE.</li>
          <li>The group has released music in Korean, Japanese, and English.</li>
          <li>They've won Artist and Song of the Year for 5 years consecutively. They've been nominated for a Grammy.</li>
        </ul>
      </div>
    </section>
  </div>
  <!--group photo END-->

  <section class="grid" id="tribute-info">

    <div class="their-story">
      <h2>Their Story</h2>
      <hr>
      <p>In <span class="purple-words">2010</span>, producer and CEO Bang Shihyuk put BTS together starting with the passionate young rapper Kim Namjoon (RM) and ending with the ambitious dancer, Park Jimin. In between came the other 5 members: Kim Seokjin, Min Yoongi, Jung Hoseok, Kim Taehyung, and Jeon Jungkook. Bighit Entertainment was a small company, unknown in the industry, that was financially unstable. People didn't believe that BTS would succeed, and thought that Bang should maybe give up, but he believed in them.</p>
      <p>BTS began as a hip-hop/R&B centric group. They debuted with "No More Dream" in <span class="purple-words">2013</span>, a song about the adults who supress students by forcing them to follow a certain path, making them dedicate all their time to studying. They speak bluntly about how they really feel about the education system in Korea, and what their dreams really are. </p>
      <p>But BTS changed up their music every year and with every comeback, showing something new, but still continuing to sing about topics that touch the hearts of young people. In the <span class="purple-words">2015</span> 2 years after debut, they finally won with their title track "I Need U", at a music show. That same year they debuted at No. 171. on the Billboard 200 with <i>The Most Beautiful Moment in Life, Part 2</i> for the first time.</p>
      <p>In <span class="purple-words">2016</span> with their compilation album <i>Most Beautiful Moment In Life: Young Forever</i>, they won Album and Artist of the Year at the MAMA awards for the first time. This began this began their winning streak at MAMA and MMA for years to come.</p>

      <div class="center"><a href="https://www.billboard.com/articles/columns/k-town/8455612/bts-takeover-timeline-bbmas" target="_blank" id="tribute-link">Read 'A Timeline of The Group's Biggest Career Moments' on Billboard (up until 2018)</a></div>

      <figure><img src="https://0.soompi.io/wp-content/uploads/2021/03/21213534/hybe-5.jpg" alt="A picture of the HYBE Builing">
        <figcaption>What used to be Bighit Entertainment is now HYBE</figcaption>
      </figure>
      <p>In <span class="purple-words">2017</span>, they release their title-track "Spring Day" along with their repackaged album <i>You Never Walk Alone</i>; "Spring Day" is the longest charting song of all the time on the Melon charts, remaining in the TOP 100 since it's release. In the same year they began the <i>Love Yourself</i> era releasing the first album of the series <i>Love Yourself: Her</i>.<br><br>With the Love Yourself series they explored the journey of coming to love yourself and the different ways self-love or self-hatred shows up in life. In <span class="purple-words">2018</span> they released <i>Love Yourself: Tear</i>. then <i>Love Yourself: Answer</i> later that same year as a final conclusion to the series. One way they showed their growth is by taking their song "Save Me" from early 2016 - a song about depending on and needing someone's love to feel okay - and reversing it and singing "I'm Fine". That even though they will still have hard times, they don't have to depend on someone else anymore.<br><br><i>Map of the Soul: Persona</i> was released in <span class="purple-words">2019</span>. An album taking inspiration from Carl Jung's <i>Map of the Soul</i> and relating it to themselves and their fame. The title-track was "Boy with Luv", a song about wanting to stay close with fans regardless of their growing fame, and learning to find joy and love in the small things - a mature spin on their earlier song "Boy in Luv".<br><br>Right before the pandemic, they released <i>Map of the Soul: 7</i>, mixing the shadow and ego from the map of the soul and also reflecting on their seven years together as a band. They were set to go on a tour for their Map of the Soul series, but it got cut short before it even began. In <span class="purple-words">2020</span> and <span class="purple-words">2021</span> they released 3 English singles, the first one being "Dynamite" which landed them with their first #1 on the Billboard Hot 100 and a Grammy nomination, and Butter which has been #1 for 8 weeks as of now. Their latest song is "Permission to Dance". In between that, they released <i>BE</i> with "Life Goes On", a calm and comforting song about getting through this tough time. The whole album reflects on their feelings during the pandemic.</p>
    </div>
    <!--their story END-->

    <div class="members">
      <h2>The Members</h2>
      <hr>
      <div class="grid2">
        <div class="flex2">
          <img src="https://i.postimg.cc/Fds2PySQ/1-RM-ID.jpg" alt="RM, (Kim Namjoon)">
          <div class="members-text">
            <h3>RM</h3>
            <p>RM, 27, is the leader of BTS, a rapper, and an unofficial philosopher. Born as Kim Namjoon, he was just 18 years old when the group debuted. He used to spend his predebut days rapping underground under a few stage names such as Runch Runda, a name he used from a Maple Story username generator.</p>
          </div>
        </div>

        <div class="flex2">
          <img src="https://i.postimg.cc/BXrfqPrx/JIN-ID.jpg" alt="Jin (Kim Seokjin)">
          <div class="members-text">
            <h3>Jin</h3>
            <p>Jin, 29, is the oldest member of BTS. Born as Kim Seokjin, he originally had no ambition to pursue music, but rather he was on his way to becoming an actor. He was a college student majoring in Film and Visual Arts, when he was scouted by a Bighit employee for his looks. He worked hard to improve his skills and now despite learning from scratch, he has an impressive range, and emotional, distinct vocals.</p>
          </div>
        </div>

        <div class="flex2">
          <img src="https://i.postimg.cc/mcSvNXtw/SUGA-ID.jpg" alt="SUGA (Min Yoongi)">
          <div class="members-text">
            <h3>SUGA</h3>
            <p>Suga, 29, is a rapper and producer. From a young age, Min Yoongi had his mind set towards doing music, and went against his parents wishes to pursue it. He goes under the name of AGUST D when he releases solo work, and also uses SUGA when he produces work. He's worked with Epik High, IU, Lee Sora, MAX, Halsey, and more.</p>
          </div>
        </div>

        <div class="flex2">
          <img src="https://i.postimg.cc/njRNNXK9/HOBI-ID.jpg" alt="J-Hope (Jung Hoseok)">
          <div class="members-text">
            <h3>J-Hope</h3>
            <p>J-Hope, 28, is a unique rapper and skilled dancer of BTS. Pre-debut, Jung Hoseok did street dancing, and is self-taught. He had no knowledge of rapping, but when he joined Bighit, he got help from the other trainee rappers, including RM and SUGA, to guide him. He is now the main dancer, and he's a very skilled rapper, with such a distinct tone you could recognize him right away.</p>
          </div>
        </div>

        <div class="flex2">
          <img src="https://i.postimg.cc/8FD8vQPc/JIMIN-ID.jpg" alt="Jimin (Park Jimin)">
          <div class="members-text">
            <h3>Jimin</h3>
            <p>Jimin, 26, is vocalist with a unique tone, voice, and an entrancing dancer. Park Jimin has training in ballet and contemporary dance. He attended a performing arts school, and auditioned for then joined Bighit when he was 16. He has been able to blend his classical training and hiphop into a beautiful and impressive style.</p>
          </div>
        </div>

        <div class="flex2">
          <img src="https://i.postimg.cc/CnR90wJP/V-ID.jpg" alt="V (Kim Taehyung)">
          <div class="members-text">
            <h3>V</h3>
            <p>V, 26, is a soulful vocalist who has the deepest voice among the singers. Though he's a baritone, he still sings in the high pitch characteristic of BTS songs. He's a naturally good dancer. He only went to the Bighit audition to support his friend, but ended up making the cut.</p>
          </div>
        </div>

        <div class="flex2">
          <img src="https://i.postimg.cc/DS1kmyhR/JK-ID.jpg" alt="Jungkook (Jeon Jungkook)">
          <div class="members-text">
            <h3>Jungkook</h3>
            <p>Jungkook, 24, is the youngest member of BTS. He was 15 when they debuted, but was just 13 when he became a trainee under Bighit. Jeon Jungkook is the main vocalist, and a strong dancer.</p>
          </div>
        </div>
        <!--flex END-->
      </div>
      <!--grid2 END-->
    </div>
    <!--members END-->

  </section>

</main>
              
            
!

CSS

              
                body {
  background: #f0d3ff;
  margin: 0;
  padding: 0;
  line-height: 1.5;
  box-sizing: border-box;
  font-family: "Advent Pro";
}

@import url("https://fonts.googleapis.com/css2?family=Advent+Pro&family=Cinzel:wght@500&family=Merienda&display=swap");

p {
  letter-spacing: 1px;
  font-size: 16px;
}

.opening-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-right: auto;
  margin-left: auto;
  background: white;
  height: 100%;
  width: 100%;
  position: fixed;
  animation-name: OpeningScreen;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  animation-delay: 1s;
}

p.fakeh1 {
  font-size: 48px;
  margin: 0;
  font-weight: bold;
}
p.fakep {
  margin: 0;
  font-size: 18px;
  color: #c583ea;
  text-transform: uppercase;
}
@keyframes OpeningScreen {
  100% {
    opacity: 0%;
    display: none;
    visibility: hidden;
  }
}

/* HEADER */
header {
  background: white;
  padding: 20px;
  text-align: center;
  border-bottom: solid black;
  border-width: 1px;
}

h1 {
  margin: 0;
  font-size: 48px;
  font-family: "Merienda";
}

header p {
  color: #c583ea;
  margin: 0;
  text-transform: uppercase;
  font-size: 18px;
}
/* HEADER END */

#main {
  padding: 30px;
  max-width: 1080px;
  margin: 0 auto;
}

span.purple-words {
  color: #c583ea;
}

@media (max-width: 950px) {
  .group-photo-1 {
    flex-wrap: wrap;
  }
  section.quick-facts {
    margin-top: 20px;
    margin-left: 0px;
  }
  .flex2 {
    flex-wrap: wrap;
    justify-content: center;
  }
  .members-text h3 {
    text-align: center;
  }
  .members img {
    margin-bottom: 10px;
  }
}

@media (max-width: 700px) {
  .grid {
    grid-template-areas: "members members" "their-story their-story";
    grid-template-columns: none;
  }
  .members {
    grid-area: members;
    margin-bottom: 20px;
  }
  .their-story {
    grid-area: their-story;
  }
  .grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(4, 1fr);
  }
  .flex2 {
    align-content: flex-start;
  }
}

@media (max-width: 560px) {
  .grid2 {
    grid-template-columns: 1fr;
  }
}

.group-photo-1 {
  display: flex;
  justify-content: center;
  flex-direction: row;
}

figure {
  background: white;
  display: flex;
  flex-direction: column;
  margin: 0;
  border-radius: 15px;
}

#img-caption {
  text-align: center;
  padding: 10px;
  padding-top: 15px;
}

#img-div img {
  width: 680px;
}

img.bts-group-photo {
  max-width: 100%;
  height: auto;
  border-radius: 15px 15px 0px 0px;
}

hr {
  border-color: rgb(68, 68, 68);
  width: 200px;
}
.quick-facts {
  display: flex;
  background-color: white;
  margin-left: 20px;
  padding: 15px;
  flex-shrink: 3;
  flex-basis: 700px;
  flex-direction: column;
  border-radius: 15px;
}

.quick-facts h2 {
  text-align: center;
  margin: 0;
}

.quick-facts ul {
  padding: 15px;
  margin: 0;
}

.quick-facts li {
  font-size: 18px;
  letter-spacing: 1px;
  margin-bottom: 10px;
}

section.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  grid-column-gap: 20px;
  margin-top: 30px;
}

/* THEIR STORY */

.their-story {
  background: white;
  border-radius: 15px;
  padding: 15px;
}

.their-story h2 {
  text-align: center;
  margin: 0;
}

.their-story a {
  font-size: 21px;
  font-family: "Merienda";
  color: #c583ea;
  text-align: center;
}

.center {
  text-align: center;
}

.their-story a:visited {
  color: #c583ea;
}

.their-story a:hover {
  color: #b5e8fc;
}

.their-story img {
  width: 100%;
  height: auto;
  padding: 10px 0px 10px 0px;
}

.their-story figcaption {
  text-align: center;
}

/*THEIR STORY END */

/* MEMBERS*/

.members {
  background: linear-gradient(45deg, #ffc4ed 35%, #b5e8fc, #dbb0ff);
  border-radius: 15px;
}

.members h2 {
  margin: 0;
  padding-top: 8px;
  text-align: center;
}

.flex2 {
  display: flex;
  padding: 10px;
}

.members-text {
  display: flex;
  flex-direction: column;
  padding-left: 15px;
}

.members-text h3,
.members-text p {
  margin: 0;
  padding: 0;
}

.members-text h3 {
  letter-spacing: 1.5px;
}

.members img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  transition: all 0.2s ease-in-out;
}

.members img:hover {
  transform: scale(1.5);
}
/* MEMBERS END */

              
            
!

JS

              
                // !! IMPORTANT README:

// You may add additional external JS and CSS as needed to complete the project, however the current external resource MUST remain in place for the tests to work. BABEL must also be left in place.

/***********
INSTRUCTIONS:
  - Select the project you would 
    like to complete from the dropdown 
    menu.
  - Click the "RUN TESTS" button to
    run the tests against the blank 
    pen.
  - Click the "TESTS" button to see 
    the individual test cases. 
    (should all be failing at first)
  - Start coding! As you fulfill each
    test case, you will see them go   
    from red to green.
  - As you start to build out your 
    project, when tests are failing, 
    you should get helpful errors 
    along the way!
    ************/

// PLEASE NOTE: Adding global style rules using the * selector, or by adding rules to body {..} or html {..}, or to all elements within body or html, i.e. h1 {..}, has the potential to pollute the test suite's CSS. Try adding: * { color: red }, for a quick example!

// Once you have read the above messages, you can delete all comments.

              
            
!
999px

Console