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

              
                <!-- The version compliant to the user story of FreeCodeCamp: https://codepen.io/AysaDelB/pen/jOadvqp?editors=0100 -->

<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet">

<header class="hero">
  <div class="header-items">
    <h1 class="title">Mikhail Tal</h1>
    <h3 class="subtitle">The Magician of Riga</h3>
    <q>You must take your opponent into a deep dark forest where 2+2=5, <br> and the path leading out is only wide enough for one.</q>
    <a href="#main" class="scroll-down"><span>Enter the forest</span><i class="material-icons-outlined">expand_circle_down</i></a>
  </div>
</header>

<main id="main">

  <input type="radio" name="tab-radio" class="tab-radio" id="tab-radio-1" checked>
  <label for="tab-radio-1" class="tab-label tab-label-1">Young Misha</label>
    
  <input type="radio" name="tab-radio" class="tab-radio" id="tab-radio-2">
  <label for="tab-radio-2" class="tab-label tab-label-2">World Championship</label>
  
  <input type="radio" name="tab-radio" class="tab-radio" id="tab-radio-3">
  <label for="tab-radio-3" class="tab-label tab-label-3">Beyond the Championship</label>
  
  <input type="radio" name="tab-radio" class="tab-radio" id="tab-radio-4">
  <label for="tab-radio-4" class="tab-label tab-label-4">Notable Games</label>
  
  <section class="content section-1" id="section-1">
    <div class="section-1-wrapper">
      
      <figure class="section-1-figure">
        <img class="young-misha-image" src="https://images.chesscomfiles.com/uploads/v1/images_users/tiny_mce/PeterDoggers/phpjjYlMl.jpeg" alt="a picture of young Mikhail Tal">
        <figcaption class="img-caption">Young Misha playing chess with the white pieces</figcaption>
      </figure>

      <article class="article-1-timeline">
        <h4 class="year sec-1-year">1936</h4>
        <p class="timeline-details sec-1-p">Misha was born on 1936 in Riga, Latvia.</p>
        <h4 class="year sec-1-year">1942</h4>
        <p class="timeline-details sec-1-p">Misha started playing chess at the age of six and joined the Riga Palace of Young Pioneers chess club.</p>
        <h4 class="year sec-1-year">1949</h4>
        <p class="timeline-details sec-1-p">At the age of 13, Misha won against Ratmir Kholmov in a simultaneous exhibition using an imaginative combination.</p>
        <h4 class="year sec-1-year">1951</h4>
        <p class="timeline-details sec-1-p">Misha qualified for the Latvian Championship.</p>
        <h4 class="year sec-1-year">1953</h4>
        <p class="timeline-details sec-1-p">Misha won his first Latvian title and was awarded the title of Candidate Master.</p>
        <h4 class="year sec-1-year">1954</h4>
        <p class="timeline-details sec-1-p">Misha became a Soviet Master and scored his first win against a grandmaster when Yuri Averbakh lost on time in a drawn position.
        <h4 class="year sec-1-year">1957</h4>
        <p class="timeline-details sec-1-p">At the age of 20, Misha became the youngest player to win the USSR Championship. While he had not played in enough international tournaments to qualify for the title of Grandmaster, this achievement convinced FIDE to waive the normal restrictions and award him the title.</p>
        <h4 class="year sec-1-year">1958</h4>
        <p class="timeline-details sec-1-p">Misha retained the Soviet Championship title in 1958 at Riga, and competed in the World Chess Championship for the first time. He won the 1958 Interzonal tournament at Portorož, then helped the Soviet Union win its fourth consecutive Chess Olympiad at Munich.</p>
      </article>
      
    </div>
  </section>
  
  <section class="content section-2" id="section-2">
    
    <article class="section-2-3-wrapper section-2-3-timeline">
      <figure class="section-2-3-figure">
        <img src="http://fishburn.me/images/chess/sets/zagreb-59/zagreb-1959-candidates-tournament-players-600x400.jpg" alt="a picture of the participants in the 1959 Candidates Tournament" class="section-2-3-img">
        <figcaption class="section-2-3-caption">1959 Candidates Tournament players and arbiter (left to right): Petrosian, Golombek (arbiter), Tal, Gligoric, Smyslov, Benko, Fischer, Olafsson, Keres
</figcaption>
      </figure>
      <h4 class="year">1959</h4>
      <p class="timeline-details">Tal won a very strong tournament at Zürich and carried on to the Candidates' Tournament in Yugoslavia 1959. He won with 20 out of 28 points and earned the right to challenge Botvinnik for the title.</p>
      <p class="timeline-details">When Benko arrived for his match with Tal, he wore dark glasses in order to avert the gaze of Tal, which could be intimidating. In response and as a joke, Tal wore large sunglasses which he borrowed from a member of the crowd.</p>
      <figure class="section-2-3-figure">
        <img src="https://www.chessgames.com/history/1007400.jpg" alt="a picture of Tal and Botvinnik playing chess" class="section-2-3-img">
        <figcaption class="section-2-3-caption">Tal and Botvinnik during the 1960 World Chess Championship</figcaption>
      </figure>
      <h4 class="year">1960</h4>
      <p class="timeline-details">At the age of 23, Tal thoroughly defeated Mikhail Botvinnik in a World Championship match, held in Moscow, by 12½–8½ (6 wins, 2 losses, and 13 draws), making him the youngest-ever World Champion at that time.
      <figure class="section-2-3-figure">
        <img src="https://ceasefiremagazine.co.uk/wp-content/uploads/Bobby-Fischer-Tal1.jpg" alt="a picture of Tal and Fischer playing chess in the hospital" class="section-2-3-img">
        <figcaption class="section-2-3-caption">Fischer visited a sick Tal whose health has been declining</figcaption>
      </figure>
      <h4 class="year">1961</h4>
      <p class="timeline-details">In the period between the matches Botvinnik had thoroughly analyzed Tal's style and turned most of the return match's games into slow wars of maneuver or endgames, rather than the complicated tactical melees which were Tal's happy hunting ground. His chronic kidney problems contributed to his defeat, and his doctors in Riga advised that he should postpone the match for health reasons. His short reign atop the chess world made him one of the two so-called "winter kings" who interrupted Botvinnik's long reign from 1948 to 1963.</p>
    </article>
  </section>
  
  <section class="content section-3" id="section-3">
    
    <article class="section-2-3-wrapper section-2-3-timeline">
      <h4 class="year">1961</h4>
      <p class="timeline-details">Soon after losing the rematch with Botvinnik, Tal won the 1961 Bled supertournament by one point over Fischer, despite losing their individual game, scoring 14½ from nineteen games (+11−1=7).</p>
      <figure class="section-2-3-figure">
        <img src="https://images.chesscomfiles.com/uploads/v1/article/26024.7e3a0180.5000x5000o.6f2a413cba36.jpeg" alt="a picture of an older Tal smoking" class="section-2-3-img">
        <figcaption class="section-2-3-caption">Tal is a chronic smoker which definitely affected his health</figcaption>
      </figure>
      <h4 class="year">1973</h4>
      <p class="timeline-details">Tal got a record of having played 86 consecutive games without a loss (+47-0=39).</p>
      <h4 class="year">1974</h4>
      <p class="timeline-details">Tal got a record of having played 95 consecutive games without a loss (+46-0=49), shattering his previous record. This became the longest unbeaten streaks in competitive chess for more than four decades, until Ding Liren broke the record in 2018 with 100 games, although with far fewer wins than either of Tal's streaks (29 wins, 71 draws).</p>
      <h4 class="year">1980</h4>
      <p class="timeline-details">Tal achieved his highest Elo rating of 2705.</p>
      <figure class="section-2-3-figure">
        <img src="https://qph.fs.quoracdn.net/main-qimg-b5ce415a6bcdc09a2797139b9c5148e7-lq" alt="a picture of an older Tal in a tournament" class="section-2-3-img">
        <figcaption class="section-2-3-caption">Though he never again got the chance to compete for the World Championship title, Tal was still a menace on the chessboard until his death in 1992.</figcaption>
      </figure>
      <h4 class="year">28 May 1992</h4>
      <p class="timeline-details">A month before his death, Tal defeated Kasparov (a future World Chess Champion) at the Moscow blitz tournament.</p>
    </article>
  </section>
  
  <section class="content section-4" id="section-4">
    <div class="game-wrapper">
          <figure class="chess-game-figure">
            <iframe class="chess-game" src="https://lichess.org/study/embed/SoHmCzZW/7Rgbpz6t#28/frame?theme=brown&bg=dark" alt="an embed of Tal's game against Gurgenidze in 1957"></iframe>
        <figcaption>Gurgenidze vs Tal in the Soviet Chess Championship in 1957. Instead of pulling his knight back, Tal captured on f2!
        </figcaption>
      </figure>
      <figure class="chess-game-figure">
        <iframe class="chess-game" src="https://lichess.org/study/embed/u4TxsOUk/6AxT3AEG#42" alt="an embed of Tal's game against Botvinnik in 1960"></iframe>
        <figcaption>Botvinnik vs Tal in Game 6 of the World Chess Championship in 1960. Instead of defending against a fork, Tal played Nf4!</figcaption>
      </figure>
          <figure class="chess-game-figure">
        <iframe class="chess-game" src="https://lichess.org/study/embed/QLAnVhFH/rpGorKkD#71/frame?theme=brown&bg=dark" alt="an embed of Tal's game against Hjartarson in 1987"></iframe>
        <figcaption>Tal vs Hjartarson in a game called "Broken Hjarted" played in in 1897. Tal plays Rc5, offering a full rook!</figcaption>
      </figure>

    </div>
    <a href="https://lichess.org/study/L7Z2N6TS" target="_blank" class="show-more-games">Show more</a>
  </section>

</main>

<footer>
  <p>This is a fan-made tribute page. If you want to learn more about him, check out his <a href="https://en.wikipedia.org/wiki/Mikhail_Tal" class="wiki">Wikipedia page</a>.</p>
</footer>
              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Poppins:ital,wght@0,300;1,300&display=swap');

/*
==================================================
GLOBAL STYLES
==================================================
*/

:root {
  --beige: #ead6ba;
  --dark-beige: #d0ba9b;
  --black: #2a2223;
  --milk-chocolate-brown: #7d675e;
  --chocolate-brown: #5c4136;
  --red: #b13636;
  --light-blue: #5d7fc1;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", arial, helvetica, sans-serif;
  font-size: 12px;
  text-align: center;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  overflow-y: scroll;
}

::-webkit-scrollbar {
  width: 1vw;
}

::-webkit-scrollbar-track {
  background-color: var(--dark-beige);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  background-color: var(--red);
  border-radius: 5px;
}

body {
  background-color: var(--dark-beige);
}

a {
  text-decoration: none;
}

header {
  width: 100vw;
  height: 100vh;
  background: linear-gradient( 180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.4),  rgba(0,0,0,0.6),  rgba(0,0,0,0.8), rgba(0,0,0,1) ), url("https://images.chesscomfiles.com/uploads/v1/blog/332664.15d312e3.668x375o.746e66dcb666@2x.jpeg") no-repeat;
  background-size: cover;
  background-position: left 10% top 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: 7rem;
}

.header-items {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.title {
  font-family: "Abril Fatface", arial, helvetica, sans-serif;
  font-size: clamp(3rem, calc(10vw - 0.1rem), 5rem);
  color: var(--beige);
  letter-spacing: 0.15rem;
  text-shadow: 2.5px 2.5px 2.5px rgba(0,0,0,0.75), -2.5px -2.5px 2.5px rgba(0,0,0,0.75);
}

.subtitle {
  font-size: clamp(1rem, calc(3.5vw - 0.1rem), 2.25rem);
  color: var(--dark-beige);
  margin-bottom: 0.5rem;
}

q {
  color: var(--beige);
  font-size: clamp(0.75rem, calc(3vw - 0.1rem), 1.25rem);
  margin-bottom: 0.75rem;
}

.scroll-down {
  animation-name: pulse;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

.scroll-down span {
  display: none;
}

.scroll-down i {
  display: block;
  font-size: 2rem;
  color: var(--red);
}

@keyframes pulse {
  0% {
    transform: scale(1.1);
  }
  25% {
    transform: scale(1.0);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(1.0);
  }
  100% {
    transform: scale(1.1);
  }
}

main {
  width: 100vw;
  height: 100vh;
  padding: 1rem 0rem;
}

.year {
  font-family: "Abril Fatface", arial, helvetica, sans-serif;
  font-size: clamp(1.25rem, calc(3vw - 0.1rem), 2.25rem);
  color: var(--beige);
  margin: 1rem 0.5rem 0 0;
}

.timeline-details {
  font-size: clamp(1rem, calc(3vw - 0.1rem), 1.5rem);
  color: var(--beige);
  margin-right: 0.5rem;
}

.tab-radio {
  display: none;
}

.tab-label {
  display: inline-block;
  padding: 0.25rem;
  border-radius: 5px 5px 0 0;
  height: clamp(45px, calc(10vw - 1px), 65px);
  background-color: var(--milk-chocolate-brown);
  font-size: clamp(0.9rem, calc(2.5vw - 0.1rem), 1.5rem);
  color: var(--dark-beige);
  cursor: pointer;
}

.tab-label-1 {
  width: clamp(50px, calc(15vw - 5px), 110px);
  margin-right: -0.3rem;
}
.tab-label-2 {
  width: clamp(95px, calc(20vw - 5px), 175px);
  margin-right: -0.3rem;
}
.tab-label-3 {
  width: clamp(95px, calc(20vw - 5px), 175px);
  margin-right: -0.3rem;
}
.tab-label-4 {
  width: clamp(60px, calc(15vw - 5px), 125px);
}

.content {
  display: none;
  padding: 0.5rem;
  opacity: 0;
  width: 90%;
  height: 90%;
  background-color: var(--chocolate-brown);
  border-radius: 7.5px;
  margin: auto;
}

#tab-radio-1:checked ~ .tab-label-1 {
  background-color: var(--chocolate-brown);
}

#tab-radio-1:checked ~ .section-1 {
  opacity: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow-x: hidden;
}

.section-1-wrapper {
  width: 100%;
  height: 100%;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  overflow-y: scroll;
}
/*
.section-1-wrapper::-webkit-scrollbar {
  width: 1vw;
}

.section-1-wrapper::-webkit-scrollbar-track {
  background-color: var(--dark-beige);
  border-radius: 5px;
}

.section-1-wrapper::-webkit-scrollbar-thumb {
  background-color: var(--red);
  border-radius: 5px;
}
*/
.section-1-figure {
  width: 240px;
  padding: 0.5rem;
  border-radius: 5px;
  background-color: var(--red);
  margin: 1rem 0 0 0;
}

.young-misha-image {
  width: 100%;
  height: auto;
  border-radius: 5px;
}

.img-caption {
  font-size: clamp(0.9rem, calc(2.5vw - 0.1rem), 1.25rem);
  color: var(--beige);
}

.article-1-timeline {
  margin-top: 1rem;
  padding: 0 0.25rem;
}

#tab-radio-2:checked ~ .tab-label-2 {
  background-color: var(--chocolate-brown);
}

#tab-radio-2:checked ~ .section-2 {
  opacity: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.section-2-3-wrapper {
  width: 100%;
  height: 100%;
  padding: 0.25rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  overflow-x: hidden;
  overflow-y: scroll;
}
/*
.section-2-3-wrapper::-webkit-scrollbar {
  width: 1vw;
}

.section-2-3-wrapper::-webkit-scrollbar-track {
  background-color: var(--dark-beige);
  border-radius: 5px;
}

.section-2-3-wrapper::-webkit-scrollbar-thumb {
  background-color: var(--red);
  border-radius: 5px;
}
*/
.section-2-3-figure {
  width: 240px;
  padding: 0.5rem;
  border-radius: 5px;
  background-color: var(--red);
  margin: 1rem 0;
}

.section-2-3-img {
  width: 100%;
  height: auto;
  border-radius: 5px;
}

.section-2-3-caption {
  font-size: clamp(0.9rem, calc(2.5vw - 0.1rem), 1.25rem);
  color: var(--beige);
}

#tab-radio-3:checked ~ .tab-label-3 {
  background-color: var(--chocolate-brown);
}

#tab-radio-3:checked ~ .section-3 {
  opacity: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#tab-radio-4:checked ~ .tab-label-4 {
  background-color: var(--chocolate-brown);
}

#tab-radio-4:checked ~ .section-4 {
  opacity: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  overflow-y: hidden;
}

.game-wrapper {
  width: 100%;
  height: 90%;
  padding: 1rem 0;
  display: flex;
  gap: 1.5rem;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  overflow-y: scroll;
}

.chess-game-figure {
  width: 264px;
  padding: 1rem;
  background-color: var(--red);
  border-radius: 5px;
}

.chess-game {
  width: 240px;
  height: 360px;
  frame-border: none;
  overflow-y: hidden !important;
}

.chess-game-figure figcaption {
  font-size: clamp(0.9rem, calc(2.5vw - 0.1rem), 1.25rem);
  color: var(--beige);
}

.show-more-games {
  margin-top: 2rem;
  padding: 0.5rem;
  width: clamp(150px, calc(25vw - 0.1px), 270px);
  border-radius: 5px;
  background-color: var(--red);
  font-size: clamp(1rem, calc(3.5vw - 0.1rem), 2.25rem);
  color: var(--beige);
}

.show-more-games::after {
  content: " >>";
  font-size: clamp(1rem, calc(3.5vw - 0.1rem), 2.25rem);
  color: var(--beige);
}

footer {
  padding: 0.25rem 0;
  background-color: var(--black);
  color: var(--beige);
}

footer a {
  color: var(--light-blue);
}

/*
==================================================
MEDIA QUERIES
==================================================
*/

@media (min-width:480px) {
  .section-1-wrapper,
  .section-2-3-wrapper {
    padding: 0.75rem;
  }
}
@media (min-width: 600px) {
  .content {
    padding: 1rem 0.5rem;
  }
  .section-1-wrapper,
  .section-2-3-wrapper {
    padding: 1rem;
  }
  .section-1-figure, 
  .section-2-3-figure {
    width: 360px;
  }
}

@media (min-width: 768px) {
  .section-2-3-figure {
    width: 480px;
  }
}

@media (min-width: 992px) {
  header {
    background: linear-gradient( 90deg, rgba(0,0,0,0.2), rgba(0,0,0,0.4),  rgba(0,0,0,0.6),  rgba(0,0,0,0.8), rgba(0,0,0,1) ), url("https://images.chesscomfiles.com/uploads/v1/blog/332664.15d312e3.668x375o.746e66dcb666@2x.jpeg") no-repeat;
    background-size: cover;
    background-position: left center;
    justify-content: center;
    align-items: flex-end;
    padding-right: 7.5rem;
  }
  .scroll-down span {
    display: block;
    opacity: 0;
    font-size: clamp(0.75rem, calc(2.5vw - 0.1rem), 1.5rem);
    font-weight: bold;
    color: var(--red);
    text-shadow: 2.5px 2.5px 2.5px rgba(0,0,0,0.75), -2.5px -2.5px 2.5px rgba(0,0,0,0.75);
    transition: all 500ms ease;
  }
  .scroll-down i {
    font-size: 2.75rem;
  }
  .scroll-down:hover > span {
    opacity: 1;
  }
  .content {
    padding: 2rem 0.5rem;
  }
  .section-1-wrapper {
    display: block;
    padding: 0 3rem;
  }
  .section-1-figure {
    width: 300px;
    float: right;
    margin-left: 1rem;
  }
  .sec-1-year, .sec-1-p {
    text-align: left;
  }
  .sec-1-p {
    margin: 0 1.5rem;
  }
  #tab-radio-4:checked ~ .section-4 {
    flex-direction: column;
    justify-content: center;
  }
  .game-wrapper {
    height: 75%;
  }
  .show-more-games::after {
    color: var(--red);
    transition: all 500ms ease;
  }
  .show-more-games:hover::after {
    color: var(--beige);
  }
}

@media (min-width: 1200px) {
  ::-webkit-scrollbar {
    width: 0.5vw;
  }
  header {
    justify-content: center;
    align-items: flex-end;
    padding-right: 20%;
  }
  .tab-label {
    height: 35px;
  }
  .tab-label-1 {
    width: 160px;
    margin: 0;
  }
  .tab-label-2 {
    width: 200px;
    margin: 0;
  }
  .tab-label-3 {
    width: 250px;
    margin: 0;
  }
  .tab-label-4 {
    width: 160px;
  }
}

              
            
!

JS

              
                
              
            
!
999px

Console