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">
  <div class="headline">
    <h1 id="title">Kobe Bryant</h1>
    <p class="nickname">The Black Mamba</p>
    <p class="slogan">The Greatest of All Time</p>
    <div class="underline"></div>
  </div>
  <figure id="img-div">
    <img src="https://wallpaperaccess.com/full/2506708.jpg" id="image" />
    <figcaption id="img-caption">
      <i>Picture: Kobe Bryant celebrates after winning his 4th Championship.
      </i>
    </figcaption>
  </figure>
  <section id="tribute-info">
    <h3 id="tribute-title"> Career Timelime </h3>
    <div class="underline"></div>
    <ul>
      <li>
        <strong>1978 </strong>- Kobe is born in Philadelphia the third of three children of Joe and Pamela Bryant. His father Joe is an NBA player for the 76ers.

      </li>
      <li>
        <strong>1983 </strong>- Joe Bryant retires from the NBA and moves his family to Italy in order to keep playing basketball. Kobe would spend the next 7 years of his life here learning to speak fluent Italian and growing his love of basketball.

      </li>
      <li>
        <strong>1992 </strong>- At the age of 13 Kobe's family moved back to Philadelphia and he attended 8th grade there.

      </li>
      <li>
        <strong>1995 </strong>- Kobe earns the senior MVP Award at the Adidas ABCD Camp, and has already recieved offers from many of the top basketball colleges in the nation.

      </li>
      <li>
        <strong>1996 </strong>- Kobe leads his high school Lower Merion to win the State Championship. A monstrous improvement from the 4-20 record they posted during his freshman season.

      </li>
      <li>
        <strong>1996 </strong>- Kobe Declares for the NBA draft opting to forgoe college. At the age 0f 17 Kobe was drafted by the Charlotte Hornets, but was immediately traded to the Los Angeles Lakers due to Jerry West's determination to make him a Laker.

      </li>
      <li>
        <strong>1999 </strong>- Due to adding Phil Jackson as head coach and Kobe relentless work ethic the lakers would begin their three peat, winning consecutive championships in 2000, 2001, and 2002.

      </li>
      <li>
        <strong>2004 </strong>- After two failed playoff runs, Shaquille O'Neal leaves the Lakers giving Kobe an oppertunity to prove himself to people that felt he owed all his success to Shaq.

      </li>
      <li>
        <strong>2006 </strong>- On January 22nd Bryant scores a career high of 81 points in a 122-104 victory over the Toronto Raptors.

      </li>
      <li>
        <strong>2008 </strong>- The Lakers return to the finals for the first time since shaq's departure, but would fall short to the Celtics and their big three in 6 games.

      </li>
      <li>
        <strong>2008 </strong>- Bryant helps lead the "Redeem Team" to the gold medal in the Olympics

      </li>
      <li>
        <strong>2009 </strong>- The Lakers return to the finals and Bryant would lead them to victory over the Orlando Magic in 5 games. This performance earned him finals MVP.

      </li>
      <li>
        <strong>2010 </strong>- The Lakers return to the Finals facing the Boston Celtics again. Despite struggling with his shot early in the game Kobe leads the team back from a 13 point deficit. Scoring 10 of his 23 point in the fourth quarter.

      </li>
      <li>
        <strong>2012 </strong>- Bryant again joins team USA and won gold in London.

      </li>
      <li>
        <strong>2016 </strong>- In his final game in the NBA, Kobe scores an NBA season high 60 points against the Utah Jazz, outscoring the entire Jazz team 23-21 in the fourth quarter. Bryant retires as the all-time leading scorer in Lakers franchise history, and an 18 time all-star.

      </li>
      <li>
        <strong>2018 </strong>- Kobe wins an Oscar for his short animated film dear basketball. After retiring from playing he remains a common presence at NBA games and is known for mentoring younger players.

      </li>
      <li>
        <strong>2020 </strong>- Kobe Bryant and his 13 year old daughter Gianna tragically pass away after a helicopter, crash on their way to basketball practice. The news sends shockwaves through the basketball community throughtout the world. The NBA cancels games and players play tribute to his impact on the game.

      </li>
    </ul>
  </section>
  <div id="quotes">
    <blockquote cite="https://www.brainyquote.com/quotes/kobe_bryant_574704">
      <p>
        "The most important thing is to try and inspire people so that they can be great in whatever they want to do."
      </p>
      <cite>-- Kobe Bryant.</cite>
    </blockquote>
  </div>
  <section id="footer">
    <p> If you have time, you should read more about this incredible human being on his

      <a id="tribute-link" href="https://en.wikipedia.org/wiki/Kobe_Bryant" target="_blank">Wikipedia entry</a>.

    </p>
  </section>
</main>
              
            
!

CSS

              
                @import url("https://fonts.googleapis.com/css2?family=Courgette&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap");
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  background-image: url("https://img.freepik.com/free-vector/dark-color-pattern-abstract-style_1035-2691.jpg?size=338&ext=jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  font-size: 16px;
  font-family: "Poppins", sans-serif;
}

#main {
  color: white;
  margin: auto;
  max-width: 80%;
  padding-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.headline {
  text-align: center;
  width: 100%;
}

h1 {
  font-family: Roboto;
  font-size: 80px;
  color: gold;
}
.nickname {
  font-size: 18px;
  font-weight: bold;
  padding: 12px 0px 16px 0px;
}
cite,
a,
strong {
  color: gold;
}

#image {
  max-width: 100%;
  display: block;
}

#img-caption {
  margin-top: -30px;
  text-align: center;
  background-color: black;
}

.slogan {
  font-family: "Courgette", Helvetica;
  font-size: 1.75rem;
  color: gold;
}

#tribute-title {
  text-align: center;
  font-size: 25px;
  color: gold;
}

#footer,
#tribute-info {
  width: 100%;
  background-color: black;
  padding: 30px 0px;
}

#footer {
  text-align: center;
}

ul {
  list-style-type: none;
  margin: 20px 0px;
  padding: 10px 5px;
}
li {
  padding: 7px;
}

.underline {
  margin-top: 10px;
  border: 1px solid gold;
}

#quotes {
  position: relative;
  font-size: 20px;
  border: 2px solid gold;
  padding: 30px;
}

@media only screen and (max-width: 768px) {
  #main {
    max-width: 100%;
  }
  #img-caption {
    margin-top: 0px;
  }
  h1 {
    font-size: 3.5rem;
  }
  #quotes {
    margin-top: -20px;
  }
}

              
            
!

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