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

              
                <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap" rel="stylesheet">
<!DOCTYPE HTML>

<html>
<main>

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title id="title">Tribute to Kobe Bryant</title>
    <link href="style.css" rel="stylesheet" type="text/css">

  </head>

  <body id="main">
    <div id="tribute-info">
      <div id="img-div" class="container">
        <img id="image" class="image"
          src="https://ewscripps.brightspotcdn.com/dims4/default/1f1708e/2147483647/strip/true/crop/1000x563+0+0/resize/1280x720!/quality/90/?url=https%3A%2F%2Fewscripps.brightspotcdn.com%2Fb8%2Fbf%2Fa2d16fc843a692bdbcb19c5b7bfb%2Fkobe-cover.png">
        <figcaption id="img-caption">kobe Bryant image</figcaption>
      </div>
      <div class="contenedor">
        <h1 class="nombre">Kobe Bryant</h1>
        <div class="fecha">1978-2020</div>
        <div class="desc">Who leaded the Los Angeles Lakers</div>
        <div class="desc"> to five championships</div>
      </div>
      <hr>
      <div id="box-container2">
        <div id="box-1">
          <p>Born August 23, 1978, Philadelphia, Pennsylvania, U.S.—died January 26, 2020, Calabasas, California).
            <br>
            <br>American professional basketball player, who helped lead the Los Angeles Lakers of the National Basketball Association (NBA) to five championships (2000–02, 2009–10).</p>
          <a id="tribute-link" href="https://en.wikipedia.org/wiki/Kobe_Bryant" target="_blank" class="button-main">Wikipedia</a>
        </div>
        <div id="box-2">
          <p>Los Angeles Lakers legend Kobe Bryant died Jan. 26 at age 41. Bryant and his 13-year-old daughter, Gianna, were among nine people killed in a helicopter crash in Calabasas, California.
            <br>
            <br> Bryant entered the NBA straight out of high school in 1996 and won five championships and one regular-season MVP award.
            <br>
            <br> Across the world, players, coaches and fans mourned Bryant's death, with multiple teams opening their games with back-to-back 24-second violations.</p>
        </div>
      </div>
      <hr />
      <div class="div-block-2">
        <div class="quote">Quotes:</div>
        <div class="container-grid">
          <div class="d1"><img id="article-box-image" src="https://mk0slamonlinensgt39k.kinstacdn.com/wp-content/uploads/2020/01/Attachment-1_original.jpg">
            <div class="paragraph-s">"Everything negative - pressure, challenges - is all an opportunity for me to rise."</div>
            <br>

          </div>
          <div class="d1"><img id="article-box-image" src="https://www.billboard.com/files/media/01-bw-Kobe-Bryant-billboard-1548.jpg">
            <div class="paragraph-s">"I don't want to be the next Michael Jordan, I only want to be Kobe Bryant."</div>
            <br>

          </div>
          <div class="d1"><img id="article-box-image" src="https://fm100.com/wp-content/uploads/sites/12/2020/02/GettyImages-499681918-740x489.jpg">
            <div class="paragraph-s">"I’m reflective only in the sense that I learn to move forward. I reflect with a purpose."</div>
            <br>

          </div>
          <div class="d1"><img id="article-box-image" src="https://imagesvc.timeincapp.com/v3/fan/image?url=https://wizofawes.com/wp-content/uploads/getty-images/2017/07/518440954.jpeg&c=sc&w=1600&h=1067">
            <div class="paragraph-s">"If you’re afraid to fail, then you’re probably going to fail."</div>
            <br>

          </div>

        </div>
      </div>
      <hr />
      <div class="contenedor-time">
        <div class="tarjeta">
          <div class="fec">Aug. 23, 1978:</div> Bryant is born in Philadelphia. His father, Joe “Jelly Bean” Bryant, played for the 76ers.
        </div>
        <div class="tarjeta">
          <div class="fec"> July 1996:</div> Lakers trade Vlade Divac to Charlotte Hornets for the draft rights to 17-year-old Bryant, the 13th pick in the NBA draf
        </div>

        <div class="tarjeta">
          <div class="fec"> 1996-97:</div> Named to the NBA’s All-Rookie second team. Averages 7.6 points coming off the bench.
        </div>

        <div class="tarjeta">
          <div class="fec">1999-00:</div>With Phil Jackson as coach, and alongside Shaquille O’Neal, Bryant wins his first NBA title as the Lakers beat Pacers in six games.
        </div>

        <div class="tarjeta">
          <div class="fec">2000-01:</div>Scores 51 points against Warriors, Bryant’s first 50-plus game. Averages 28.5 points a game for the season, second on the team to O’Neal (28.7). Lakers repeat as NBA champs, beating 76ers in five games.
        </div>

        <div class="tarjeta">
          <div class="fec">2001-02:</div>All-Star game MVP. Lakers three-peat as champions, sweeping Nets in Finals.
        </div>
        <div class="tarjeta">
          <div class="fec">July 2003:</div>Bryant is arrested and accused of sexual assault in Colorado. He leads the Lakers in scoring in 2003-04, on occasion flying back to Los Angeles for games after court appearances in Colorado on the same day.
          The case is dropped in September 2004.
        </div>
        <div class="tarjeta">
          <div class="fec">2003-04:</div>The last Kobe-Shaq squad loses in the Finals to Detroit. That summer O’Neal is traded and Bryant, a free agent, almost signs with the Clippers but returns to the Lakers after agreeing to a seven-year,
          $136-million deal.
        </div>
        <div class="tarjeta">
          <div class="fec">2004-05:</div>Lakers have a miserable season, finishing 34-48, with new Coach Rudy Tomjanovich quitting in mid-season because of health problems. Bryant misses 16 games because of injuries.
        </div>
        <div class="tarjeta">
          <div class="fec">2005-06:</div>Scores 81 points against Toronto, second-highest total in NBA history behind Wilt Chamberlain’s 100-point effort. Bryant leads league in scoring (35.4) as Jackson returns to coach the team. Lakers lose to
          Phoenix in first round of playoffs.
        </div>
        <div class="tarjeta">
          <div class="fec">2006-07:</div>Bryant wins another scoring title (31.6), but Lakers are ousted again in the first round by the Suns. Soon after Bryant, frustrated by management, says he wants to be traded. Owner Jerry Buss considers trading
          Bryant, but doesn’t.
        </div>
        <div class="tarjeta">
          <div class="fec"> 2007-08:</div>Midseason trade for Pau Gasol makes Lakers a title contender. Bryant wins MVP award. Lakers reach Finals and lose to Boston in six games.
        </div>
        <div class="tarjeta">
          <div class="fec">2008-09:</div>Bryant wins fourth NBA title and is named Finals MVP as Lakers beat Orlando in five games.
        </div>
        <div class="tarjeta">
          <div class="fec">2009-10:</div>Bryant collects his fifth ring as Lakers beat the Celtics in seven games; he’s also named Finals MVP. Signs a three-year, $84-million extension, staying under contract through the 2013-14 season.
        </div>
        <div class="tarjeta">
          <div class="fec">2012-13:</div>Makes 15th All-Star team. Passes Chamberlain for fourth on the NBA’s all-time scoring list. Averages 27.3 points in 38.6 minutes a game for the season before rupturing his left Achilles’ tendon.
        </div>


      </div>

      <aside>
        <hr />
        <h2>About section</h2>
        <p>Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
      </aside>

      <footer>
        <div class="container_foot">
          <p>© 2020 Pedro Perez </p>
        </div>
      </footer>
    </div>
  </body>

</main>

</html>

              
            
!

CSS

              
                #main {
  background: black;
  padding-left: 60px;
  padding-right: 60px;
  margin: auto;
  /*    border: 1px solid blue; */
}

body {
  font-family: 'PT Serif', Georgia, Cambria, "Times New Roman", Times, serif;
  font-size: 21px;
  max-width: 1000px;
}

.container {
  position: relative;
  text-align: center;
  padding-bottom: 40px;
  /*     border: 1px solid red; */
}

.image {
  width: 100%;
  display: block;
  max-width: 1024px;
  opacity: 0.6;
}

.contenedor {
  position: absolute;
  top: 20%;
  right: 20%;
}

.nombre {
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 6vw;
  opacity: 0.88;
}

.fecha {
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 4vw;
  opacity: 0.88;
  text-align: center;
}

.desc {
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 2vw;
  opacity: 0.88;
  text-align: center;
}

#box-container2 {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding-bottom: 30px;

}

#box-1 {
  font-family: 'Montserrat', sans-serif;
  opacity: 0.88;
  color: white;
  font-size: 2.2vw;
  padding-right: 5%;
  padding-bottom: 5%;
  width: 50%;
  height: 50%;
}

.button-main {
  display: flex;
  padding: 2%;
  align-items: center;
  justify-content: center;
  font-size: 1.5vw;
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  border-style: solid;
  border-width: 1px;
  border-color: hsla(0, 0%, 100%, .2);
  color: white;
  transition: opacity .2s ease;
  transition-property: opacity;
  transition-duration: 0.2s;
  transition-timing-function: ease;
  transition-delay: 0.1s;
}

.button-main:hover {
  opacity: 0.6;
}

#box-2 {
  font-family: 'Montserrat', sans-serif;
  opacity: 0.88;
  color: white;
  padding-left: 5%;
  font-size: 1.5vw;
  width: 50%;
  height: 50%;
}

hr {
  opacity: 0.15;
}

.d1 {
  color: white;
  border-style: solid;
  border-width: 1px;
  border-color: hsla(0, 0%, 100%, .2);
}

.div-block-2 {
  min-height: 400px;
  padding-top: 15px;
  padding-bottom: 65px;
}

.quote {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-style: italic;
  opacity: 0.8;
  color: white;
  padding-bottom: 20px;
  padding-top: 30px;
}

.container-grid {
  font-size: 40px;
  font-weight: 100;
  min-height: 300px;
  width: 100%;
  background: black;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-column-gap: 16px;
  grid-gap: 30px;
}

.d1 {
  max-height: 350px;
}

#article-box-image {
  width: 100%;
  display: block;
  max-width: 160px;
  opacity: 0.5;
  margin: 20px auto 20px;
  border: 0;
}

#article-box-image:hover {
  opacity: 1;
}

.paragraph-s {
  color: #fff;
  font-size: 16px;
  line-height: 28px;
  text-align: left;
  padding-left: 5px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  font-style: italic;
  opacity: 0.8;
  padding-top: 25px;
}

.contenedor-time {
  min-height: 300px;
  width: 100%;
  display: grid;
  grid-template-rows: 1fr;
  padding-top: 70px;
  padding-bottom: 70px;
}

.tarjeta {
  font-family: 'Montserrat', sans-serif;
  font-weight: 100;
  background: black;
  color: white;
  opacity: 0.8;
  font-size: 2.2vw;
  border-style: solid;
  border-width: 1px;
  border-color: hsla(0, 0%, 100%, .2);
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 20px;
  padding-right: 20px;
  text-align: justify;
}

.fec {
  font-weight: 400;
  font-size: 2.3vw;
}

.tarjeta:hover {
  opacity: 1;
}

.container_foot {
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  ont-family: 'Montserrat', sans-serif;
  font-weight: 100;
  background: black;
  color: white;
  opacity: 0.4;
  font-size: 1.2vw;
}

@media only screen and (max-width: 650px) {
  #main {
    background: black;
    padding-left: 10px;
    padding-right: 10px;
  }

  .container {
    padding-bottom: 5px;

  }

  #box-container2 {
    display: flex;
    flex-direction: column;
    padding-right: 10%;
    align-items: flex-start;

  }

  #box-1 {
    width: 100%;
    height: 100%;
    font-family: 'Montserrat', sans-serif;
    opacity: 0.88;
    color: white;
    font-size: 3.8vw;
    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 5%;
  }

  #box-2 {
    width: 100%;
    height: 100%;
    font-family: 'Montserrat', sans-serif;
    opacity: 0.88;
    color: white;
    padding-left: 5%;
    padding-right: 5%;
    font-size: 2.5vw;
  }

  .contenedor {
    position: absolute;
    top: 10%;
    right: 15%;

  }

  .button-main {
    font-size: 2.3vw;
    padding: 5px 10%;
  }

  .container-grid {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: black;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }
}

.contenedor-time {
  font-size: 40px;
  min-height: 300px;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
}

              
            
!

JS

              
                
              
            
!
999px

Console