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

              
                <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tribute Page to Kobe Bryant</title>

  <!--  google fonts  -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Dosis:wght@200&family=Thasadith&display=swap" rel="stylesheet">

</head>

<body>
  <header class="header">
    <div class="hero-bg">
      <div class="hero-intro">
        <div class="hero-text">
          <h1 id="title" class="title">Kobe Bryant</h1>
          <h2 class="title-event-year">1978-2020</h2>
          <blockquote class="quote">
            <p>
              “The most important thing is to try and inspire people so that they can be great in whatever they want to do.”
            </p>
          </blockquote>
        </div>

        <a href="#biography" id="tribute-link" class="hero-btn" target="_blank">Biography</a>

      </div>

    </div>
  </header>

  <main id="main" class="main">
    <div class="container">
      <!--    Biography    -->
      <section id="biography" class="biography">
        <h2>Biography</h2>
        <div class="divider"></div>
        <div class="biography-content">
          <div id="img-div" class="bio-img">
            <img src="https://www.thefashionisto.com/wp-content/uploads/2018/01/Kobe-Bryant-2018-LOfficiel-Hommes-Paris-Cover-Photo-Shoot-005.jpg" class="profile-img" id="image" alt="Kobe profile image">
            <div id="img-caption" class="img-caption">Kobe Bryant</div>
          </div>
          <div class="bio-text" id="tribute-info">
            <p>
              <span>Kobe Bean Bryant</span> was an American former professional basketball player. He was one of the most popular and successful basketball players of his time. His father is a retired professional basketball player and is probably the inspiration behind his fondness for this game. He started playing from an early age and represented his school in many games. He helped his school register a victory after 53 event-years which was a great moment for Bryant and his school. After completing high school, Bryant decided to pursue a career in basketball and did not further his studies. He became one of the few players who were drafted into the ‘NBA’ directly from high school. He was made a member of his long-time favorite team ‘Lakers’ and since then, this talented player never looked back. His performance improved with every game and he added a new feather to his crown. He face injuries and also got embroiled in controversies, but emerged successful out of all this. He had set several records and also broken many old records. He was an asset to his team, ‘Los Angeles Lakers,’ and dedicated his entire career of twenty event-years to the ‘Lakers.’
            </p>
          </div>
        </div>
      </section>
      <!-- end of biography    -->

      <!--   Timeline     -->
      <section class="timeline">
        <h2> Career Timeline</h2>
        <div class="divider"></div>
        <div class="timeline-content">
          <div class="timeline-event">
            <p class="event-year">1996</p>
            <p>
              With the 13th pick in the 1996 NBA Draft, the Charlotte Hornets selected Kobe Bryant, the teenage phenom from Lower Merion High School in Philadelphia.
            </p>
          </div>
          <div class="timeline-event">
            <p class="event-year">1997</p>
            <p>
              In the ‘All-Star weekend,’ held in February 1997, he won the ‘Slam Dunk Contest’ and registered his name as the youngest player to win this championship. His remarkable performances during the year got him a place in the ‘NBA All Rookie’ second team.
            </p>
          </div>
          <div class="timeline-event">
            <p class="event-year">1999<br>2002</p>
            <p>
              The Lakers had been a playoff team with Bryant and Shaquille O’Neal, but they hadn’t quite reached championship form. The furthest they’d made it was to the conference finals.That all changed when Phil Jackson arrived. Jackson had already won six league titles with the Chicago Bulls. He’d twice won three in a row. Bryant and Shaq helped him accomplish it a third time. The Lakers knocked off the Indiana Pacers in 2000, Philadelphia 76ers in 2001 and the New Jersey Nets in 2002 for the NBA crown. To this day, this was the last time a team won three straight titles.
            </p>
          </div>
          <div class="timeline-event">
            <p class="event-year">2006</p>
            <p>
              On Jan. 22, 2006, Bryant scored a career-high 81 points against the Toronto Raptors. It’s the second-highest points total in a single game in league history.
            </p>
          </div>
          <div class="timeline-event">
            <p class="event-year">2008</p>
            <p>
              The ‘Lakers’ had a good start at the 2008-09 ‘NBA’ season and Bryant’s performance won him ‘All-Star Game’ as a starter. He was also made the ‘Western Conference Player of the Month’ for December and January.
            </p>
          </div>
          <div class="timeline-event">
            <p class="event-year">2009</p>
            <p>
              The ‘Lakers’ registered a win at the 2009 ‘NBA Finals’ and Kobe won his first ‘NBA Final MVP’ trophy.
            </p>
          </div>
          <div class="timeline-event">
            <p class="event-year">2010</p>
            <p>
              The 2010 ‘NBA Finals’ was also won by his team ‘Lakers’ and this talented player once again received the ‘NBA Finals MVP Award.’
            </p>
          </div>
          <div class="timeline-event">
            <p class="event-year">2012</p>
            <p>
              In the ‘2012 Summer Olympics,’ he won a gold medal. Kobe has been named the top ‘NBA’ player of the 2000s by the ‘Sporting News’ and ‘TNT.’ <br>
              In December 2012, he reached 30,000 career points, becoming the first player in ‘NBA’ history to reach this milestone.
            </p>
          </div>
          <div class="timeline-event">
            <p class="event-year">2013 <br> 2015</p>
            <p>
              After facing severe injuries, Bryant returned to the 2013-14 season. That season, the ‘Lakers’ did not make it to the playoffs, a first since 2005. Bryant faced severe injuries during the 2014-15 season as well. <br>
              After a brief recovery, he returned to his 20th season with the ‘Lakers,’ surpassing John Stockton’s record for most seasons with the same team. At the age of 37, Bryant became the oldest player to score 60 or more points in a game. However, ‘The Lakers’ finished their season with their worst record in the franchise’s history.
            </p>
          </div>
          <div class="timeline-event">
            <p class="event-year">2015</p>
            <p>
              On 29 November 2015, Bryant announced his retirement through ‘Player’s Tribune’ in a poem titled ‘Dear Basketball,’ expressing his love for the sport since his childhood. He was also the leading vote-getter of the 2016 ‘All-Star’ game with 1.9 million votes ahead of Stephen Curry.
            </p>
          </div>
        </div>
      </section>
      <!--   end of timeline     -->
    </div>

  </main>
  <footer class="footer">
    <div class="footer-quotes">
      <p>“The moment you give up, is the moment you let someone else win.”</p>
      <p>-- Kobe Bryant "Black Mamba"</p>
    </div>
    <div class="divider"></div>
    <p class="more-info">Want to read more about Kobe Bryant? Check
      <a href="https://en.wikipedia.org/wiki/Kobe_Bryant" id="tribute-link" target="_blank">Wikipedia</a>.
    </p>
    <p class="creator">Created By Linas Gal.</p>
  </footer>

</body>

</html>
              
            
!

CSS

              
                *,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ===== Scrollbar CSS ===== */
/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #e3e3e3 var(--clr-white);
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 8px;
}

*::-webkit-scrollbar-track {
  background: var(--clr-white);
}

*::-webkit-scrollbar-thumb {
  background-color: #e3e3e3;
  border-radius: 8px;
  border: 3px solid var(--clr-white);
}

:root {
  --ff-primary: "Dosis", sans-serif;
  --ff-secondary: "Thasadith", sans-serif;
  --spacing: 0.1em;
  --fw-200: 200;
  --fw-600: 600;
  --clr-bg-header: #101110;
  --clr-white: #fff;
  --border-timeline: 2px dashed black;
  --border-radius: 1.3rem;
}

html {
  font-size: 100%;
  scroll-behavior: smooth;
}

body {
  color: black;
  line-height: 1.3;
  font-family: var(--ff-primary);
}
img {
  display: block;
  max-width: 100%;
}
h1,
h2 {
  letter-spacing: var(--spacing);
}
h1 {
  font-size: clamp(40px, 5vw, 4rem);
}
h2 {
  font-size: clamp(28px, 3vw, 2.25rem);
  font-family: var(--ff-secondary);
  font-weight: var(--fw-200);
}
p {
  font-size: clamp(12px, 1vw, 1rem);
}
a {
  text-decoration: none;
}

.divider {
  height: 0.1rem;
  width: 60%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0.5rem;
  margin-bottom: 3rem;
  background-color: black;
}

section {
  padding: 2rem 0;
}

@media (min-width: 800px) {
  .divider {
    margin-bottom: 8rem;
  }
  section {
    padding-top: 7rem;
    padding-bottom: 4.5rem;
  }
}

.header {
  background-color: var(--clr-bg-header);
  color: var(--clr-white);
  position: relative;
}
.hero-bg {
  height: 100vh;
  max-width: 1200px;
  margin: 0 auto;
  background-image: url(https://assets.codepen.io/5534723/hero-img.png?format=auto);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
  animation-name: fadingAway;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  z-index: 1000;
  display: grid;
  place-content: center;
}

@keyframes fadingAway {
  from {
    filter: grayscale(0);
  }
  to {
    filter: grayscale(100%);
  }
}

.hero-bg::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation-name: blur;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  background: inherit;
  z-index: 500;
}

@keyframes blur {
  from {
    filter: blur(0);
  }
  to {
    filter: blur(8px);
  }
}

.hero-intro {
  text-align: center;
  display: grid;
  row-gap: 2.5em;
  justify-items: center;
  z-index: 99999;
  animation-name: fadeIn;
  animation-duration: 4s;
  animation-timing-function: cubic-bezier(0.9, 0.03, 0.93, -0.03);
  animation-fill-mode: forwards;
}

@media (min-width: 800px) {
  .hero-intro {
    position: absolute;
    top: 10%;
    left: 10%;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.hero-text {
  max-width: 50ch;
  display: grid;
  row-gap: 0.75em;
}

.hero-text .quote {
  max-width: 35ch;
  margin: 0 auto;
  letter-spacing: 0.1em;
}

.hero-btn {
  display: inline-block;
  cursor: pointer;
  border: 2px solid var(--clr-white);
  border-radius: 15px 0 15px 0;
  padding: 0.25em 2em;
  color: var(--clr-white);
  font-weight: var(--fw-600);
  letter-spacing: 0.15rem;
  background-color: transparent;
}

/* Main */

.container {
  width: 90%;
  max-width: 1000px;
  margin: 0 auto;
}

/* Biography */
.biography {
  text-align: center;
}

.biography-content {
  display: grid;
  justify-items: center;
  row-gap: 50px;
  position: relative;
}
@media (min-width: 800px) {
  .biography-content {
    grid-template-columns: 1fr 1fr;
  }
}
.bio-img {
  max-height: 25rem;
  max-width: 20rem;
  position: relative;
}
.img-caption {
  margin-top: 0.5em;
}

.profile-img {
  width: auto;
  height: auto;
}

@media (min-width: 800px) {
  .bio-img {
    max-height: 25rem;
    max-width: 20rem;
  }
  .bio-img::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: -5%;
    left: -5%;
    background: hsl(0, 0%, 75%);
    filter: blur(5px);
    z-index: -500;
  }
}
.bio-text {
  max-height: 18rem;
  text-align: justify;
  line-height: 1.5;
  align-self: center;
  box-shadow: 2px 5px 6px 0px rgba(0, 0, 0, 0.29);
  padding: 1em;
  background: var(--clr-white);
  overflow-y: scroll;
  opacity: 0.8;
}

.bio-text p {
  font-size: clamp(18px, 1.5vw, 2.5rem);
}
.bio-text p span {
  font-size: 1.7rem;
  font-weight: bold;
}

@media (min-width: 800px) {
  .bio-text {
    position: absolute;
    top: 15%;
    left: 40%;
  }
}

/* timeline */

.timeline {
  display: grid;
  place-content: center;
  text-align: center;
}
.timeline-content {
  width: 80vw;
  max-width: 800px;
}

.timeline-event {
  border-bottom: var(--border-timeline);
  padding: 4rem 0;
  position: relative;
}
.timeline-event:nth-child(odd) {
  border-left: var(--border-timeline);
  border-bottom-left-radius: var(--border-radius);
  border-top-left-radius: var(--border-radius);
  margin-right: 1rem;
  padding-left: 3rem;
  padding-right: 2rem;
}
.timeline-event:nth-child(even) {
  border-right: var(--border-timeline);
  border-bottom-right-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
  margin-left: 1rem;
  padding-left: 2rem;
  padding-right: 3rem;
}
.timeline-event:nth-child(1) {
  border-top-left-radius: 0;
}
.timeline-event .event-year {
  height: 3.5rem;
  width: 3.5rem;
  border: var(--border-timeline);
  border-radius: 50%;
  background-color: var(--clr-white);
  position: absolute;
  top: 50%;
  display: grid;
  place-items: center;
  font-family: var(--ff-secondary);
  font-size: 1rem;
  font-weight: bold;
}

.timeline-event:nth-child(odd) .event-year {
  left: 0;
  transform: translate(-50%, -50%);
}

.timeline-event:nth-child(even) .event-year {
  right: 0;
  transform: translate(50%, -50%);
}
.timeline-event p {
  font-size: 1.2rem;
}

/* Footer */

.footer {
  text-align: center;
  max-width: 65vw;
  max-width: 85vw;
  margin: 0 auto;
}
.footer .footer-quotes p {
  font-size: clamp(24px, 2.5vw, 2rem);
  font-style: italic;
}
.footer .footer-quotes p:last-child {
  font-size: clamp(20px, 2.2vw, 1.7rem);
  margin-top: 0.5em;
  margin-bottom: 1em;
}

.more-info {
  font-weight: bold;
  font-size: 1.1rem;
  margin: 0 auto;
}

.footer .divider {
  width: 20%;
  margin-bottom: 3rem;
}

.footer .more-info a {
  display: inline-block;
  background-color: black;
  font-size: initial;
  color: var(--clr-white);
  padding: 0.2rem;
}

.footer .creator {
  font-size: 1rem;
  padding: 2rem 0;
}

              
            
!

JS

              
                
              
            
!
999px

Console