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>
<main id="main">
<header>
      <nav id="home">
        <div class="navbar" id="mynavbar">
          <ul>
            <li class="nav_link">
              <a href="#home" id="home-border-bottom">Home</a>
            </li>
            <li class="nav_link"><a href="#timeline">Time Line</a></li>
            <li class="nav_link"><a href="#quotes">Quotes</a></li>
            <li class="nav_link"><a href="#best-games">Best Games</a></li>
          </ul>
        </div>
        <div class="hamburger">
          <div class="line line_1"></div>
          <div class="line line_2"></div>
          <div class="line line_3"></div>
        </div>
      </nav>

      <div class="row hero-row">
        <div class="hero-text-box">
          <h1 id="title">Jose Raul Capablanca</h1>
          <h3 id="tribute-info">
            World Chess Champion - a chess prodigy, he is considered as one of
            the greatest players of all time
          </h3>
        </div>
        <div class="hero-image" id="img-div">
          <img src="https://i.ibb.co/MGWwqP7/J-R-Capablanca-min.png" id="image"/>
          <div id="img-caption">Textual content</div>
        </div>
      </div>
    </header>

    <section class="section-tribute-info" id="timeline">
      <div class="header-king">
        <i class="fas fa-chess-king"></i>
        <h2 class="desktop_header_king">
          Here's a time line of Jose Raul Capablanca's life:
        </h2>
        <h2 class="mobile_header_king">Time line</h2>
      </div>

      <div class="row timeline">
        <div class="container right">
          <div class="content">
            <h3>1888</h3>
            <p>Born in Havana, Cuba.</p>
          </div>
        </div>
        <div class="container left">
          <div class="content">
            <h3>1908</h3>
            <p>He left the university to concentrate on chess.</p>
          </div>
        </div>
        <div class="container right">
          <div class="content">
            <h3>1911</h3>
            <p>
              Capablanca challenged Emanuel Lasker for the World Chess
              Championship.
            </p>
          </div>
        </div>
        <div class="container left">
          <div class="content">
            <h3>1913</h3>
            <p>Capablanca accepted a job in the Cuban Foreign Office.</p>
          </div>
        </div>
        <div class="container right">
          <div class="content">
            <h3>1920</h3>
            <p>
              Emanuel Lasker and Capablanca signed an agreement to play a World
              Championship match.
            </p>
          </div>
        </div>
        <div class="container left">
          <div class="content">
            <h3>1921</h3>
            <p>
              Capablanca won his match against Lasker after fourteen games,
              having won four games.
            </p>
          </div>
        </div>
        <div class="container right">
          <div class="content">
            <h3>1921</h3>
            <p>
              In December, shortly after becoming World Champion, Capablanca
              married Gloria Simoni Betancourt. They had a son, José Raúl Jr.,
              in 1923 and a daughter, Gloria, in 1925. According to Capablanca's
              second wife, Olga, his first marriage broke down fairly soon, and
              he and Gloria had affairs. Both his parents died during his reign,
              his father in 1923 and mother in 1926.
            </p>
          </div>
        </div>
        <div class="container left">
          <div class="content">
            <h3>1922</h3>
            <p>
              Capablanca won the London tournament of 1922 with 13 points from
              15 games with no losses.
            </p>
          </div>
        </div>
        <div class="container right">
          <div class="content">
            <h3>1927</h3>
            <p>Won New York chess tournament.</p>
          </div>
        </div>
        <div class="container left">
          <div class="content">
            <h3>1927</h3>
            <p>
              Played World Chess Championship match against Alexander Alekhine.
              Alekhine won the match, played from September to November at
              Buenos Aires, by 6 wins, 3 losses, and 25 draws.
            </p>
          </div>
        </div>
        <div class="container right">
          <div class="content">
            <h3>1938</h3>
            <p>
              He divorced his first wife and then married Olga on October 20,
              about a month before the AVRO tournament.
            </p>
          </div>
        </div>
        <div class="container left">
          <div class="content">
            <h3>1939</h3>
            <p>
              Capablanca played for Cuba in the 8th Chess Olympiad, held in
              Buenos Aires, and won the gold medal for the best performance on
              the top board.
            </p>
          </div>
        </div>
        <div class="container right">
          <div class="content">
            <h3>1942</h3>
            <p>Dies at the age of 53, in New York.</p>
          </div>
        </div>
      </div>
    </section>

    <section class="section-quotes" id="quotes">
      <div class="header-queen">
        <i class="fas fa-chess-queen"></i>
        <h2>Quotes</h2>
      </div>

      <div class="row">
        <div class="quotes-container">
          <div class="quote1">
            <img src="https://i.imgur.com/kivD7Tk.png" alt="Emanuil_Lasker" />
            <p>
              "I have known many chess players, but among them there has been
              only one genius - Capablanca! His ideal was to win by manoeuvring.
              Capablanca's genius reveals itself in his probing of the
              opponent's weak point. The slightest weakness cannot escape from
              his keen eye."
            </p>
            <em class="wc-names">World Chess Champion<br />Emanuel Lasker</em>
          </div>
          <div class="quote2">
            <img
              src="https://i.imgur.com/hRddsiy.jpg"
              alt="Mikhail_Botvinnik"
            />
            <p>
              "Capablanca's play produced and still produces an irresistible
              artistic effect. In his games a tendency towards simplicity
              predominated, and in this simplicity there was a unique beauty of
              genuine depth."
            </p>
            <em class="wc-names">World Chess Champion<br />Mikhail Botvinik</em>
          </div>
          <div class="quote3">
            <img src="https://i.imgur.com/dMKjDmI.jpg" alt="Anatoly_Karpov" />
            <p>
              "The ideal in chess can only be a collective image, but in my
              opinion it is Capablanca who most closly approachess this...His
              book was the first chess book thet I studied from cover to cover.
              Of course, his ideas influenced me."
            </p>
            <em class="wc-names">World Chess Champion<br />Anatoly Karpov</em>
          </div>
        </div>
      </div>
    </section>

    <section class="section-best-games" id="best-games">
      <div class="header-rook">
        <i class="fas fa-chess-rook"></i>
        <h2>Best Games</h2>
      </div>
      <div class="li-games">
        <iframe
          width="750"
          height="500"
          src="https://lichess.org/study/embed/EuGO403T/6lZQeXlp"
          frameborder="0"
        ></iframe>
      </div>
    </section>

    <footer>
      <div class="footer">
        <div class="row">
          <div class="flex-container">
            <div class="column1">
              <a
                href="https://en.wikipedia.org/wiki/Jose_Raul_Capablanca"
                target="_blank"
                >Jose Raul Capablanca on Wikipedia</a
              >
              <a
                href="https://en.wikipedia.org/wiki/World_Chess_Championship"
                target="_blank" id="tribute-link"
                >All world chess champions</a
              >
              <a
                href="https://www.chessgames.com/player/jose_raul_capablanca.html"
                target="_blank"
                >All chess games of Jose Raul Capablanca</a
              >
              <a href="http://www.gutenberg.org/ebooks/33870" target="_blank"
                >Chess Fundamentals by Jose Raul Capablanca</a
              >
            </div>
            <div class="column2">
              <p class="play-chess">Play Chess</p>
              <a
                href="https://www.chess.com/"
                target="_blank"
                class="link-chesscom hide_child"
                ><img
                  src="https://i.imgur.com/AVy9Gwf.png"
                  class="chesscom child"
                  alt="chesscom"
                />Chess.com</a
              >
              <a
                href="https://lichess.org/"
                target="_blank"
                class="link-lichess hide_child"
                ><img
                  src="https://i.imgur.com/sSixB6S.png"
                  class="lichess child"
                  alt="lichess"
                />Lichess.org</a
              >
              <a
                href="https://chess24.com/"
                target="_blank"
                class="link-chess24 hide_child"
                ><img
                  src="https://i.imgur.com/9wGX2CF.png"
                  class="chess24 child"
                  alt="chess24"
                />Chess24.com</a
              >
            </div>
          </div>
          <hr class="hr-footer" />
          <p class="author">
            Create with <i class="fas fa-heart"></i> in beautiful Chișinău,
            Moldova. @ 2020 by Vanachima.
          </p>
        </div>
      </div>
    </footer>
    <button class="scrollUp" title="Go to top">
      <i class="fas fa-angle-up"></i>
    </button>
  </main>
              
            
!

CSS

              
                /* -------------------------------------- */
/*              BASIC SETUP               */
/* -------------------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  font-size: 16px;
  font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
  text-rendering: optimizeLegibility;
  background-color: #f1f1f1; 
}

.row {
  max-width: 1140px;
  margin: 0 auto;
}

section {
  padding: 0 0 80px 0;
}

h2 {
  font-weight: 300;
  font-size: 190%;
  background-color:#1abc9c;
  color: #fff;                          /*#FBC11A galben*/   /*#008CDB albastru*/
  text-align: center;
  padding: 15px 0;
  margin-bottom: 80px;
  word-spacing: 2px;
  letter-spacing: 1px;
    }

p {
  font-weight: 300;
  line-height: 1.45;
  font-size: 1rem;
}   

    /* -------------------------------------- */
    /*               Navigation               */
    /* -------------------------------------- */

.navbar {
  height: 50px;
  width: 100%;
  background-color: #1abc9c;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 33;
  padding: 18px 20px 16px 20px;
  transition: .25s ease;
  }

.navbar ul {
  display: flex;
  list-style: none;
} 

.navbar ul li:first-child {
  margin-left: 35px;
  }

.navbar a {
  display: inline-block;
  margin-right: 20px;
  list-style: none;
  font-size: 1.1rem;
  word-spacing: 0.5px;
  letter-spacing: 0.5px;
  padding: 0 0 7px 0;
  position: relative;
    }

.navbar a::after {
  position: absolute;
  content: "";
  width: 0%;
  height: 2px;
  background-color: #fff;
  left: 0;
  bottom: -3px;
  transition: all 0.35s ease;
}

.navbar a:first-child {
  margin-left: 35px;
    }
    
.navbar a:link,
.navbar a:visited {
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
  transition: 0.25s ease;
}
    
.navbar a:hover,
.navbar a:active {
  color: #fff;
  text-decoration: none;
}

.navbar li:hover a::after {
  width: 100%;
  left: 0;
}

.hamburger {
  display: none;
  color: #fff;
  cursor: pointer;
}

.line {
  height: 2px;
  background-color: #fff;
  width: 20px;
  margin-bottom: 3px;
  transition: all .5s ease;
}

#home {
  position: relative;
  scroll-margin-top: 50px;
}

    /*  Header */

header {
      background-color: #1ABC9C;
      height: calc(100vh + 50px);
    }

.hero-row {
      width: 100%;
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
}

.hero-text-box {
      width: 50%;
    }

.hero-text-box h1 {
      font-size: 5rem;
      font-weight: 900; 
      color:#fff;
      text-align: center;
      word-spacing: 4px;
      letter-spacing: 2px;
}
    
.hero-text-box h3 {
      font-size: 1.1rem;
      font-weight: 300; 
      color: #fff;
      width: 80%;
      margin: 20px auto;
      text-align: center;
      word-spacing: 1.5px;
      line-height: 145%;
    }

.hero-image {
     width: 50%;
     margin: 70px 20px 0 20px;
    }

.hero-image img {
  display:block;
  max-width:100%;
     width: 100%;
     border-radius: 50%;
     border:5px solid #fff;
     box-shadow: 0 2px 4px rgba(0, 0, 0, .1), 0 8px 16px rgba(0, 0, 0, .1);
}

#img-caption {
  display: none;
}

    /*------------------------*/
    /*      Timeline          */
    /*------------------------*/

#timeline {
  scroll-margin-top: 55px;
}    

.section-tribute-info {
  background: rgb(241,241,241);
  background: linear-gradient(0deg, rgba(241,241,241,1) 0%, rgba(26,188,156,1) 100%);
  cursor: default;
}

.header-queen,
.header-rook {
  background-color: #1abc9c;
  height: 70px;
  text-align: center;
  margin-bottom: 80px;
  transition: 0.25s ease;
}

.header-queen:hover, .header-rook:hover {
  box-shadow:0 1px 10px 5px rgba(26, 188, 156, 0.5);
}

.header-king {
  background-color: #1abc9c;
  height: 70px;
  text-align: center;
  margin-bottom: 80px;
  box-shadow: 0 0 0 1px #dddfe2;
  transition: all .25s ease;
}

.mobile_header_king {
  display: none;
}

.header-king:hover{box-shadow:0 1px 8px 5px #dddfe2;text-decoration:none}

.desktop_header_king {
  background-color: transparent;
  display: inline-block;
}

.fa-chess-king,
.fa-chess-queen,
.fa-chess-rook {
  font-size: 150%;
  color: #fff;
  margin-right: 20px;
  border: 3px solid #fff;
  border-radius: 0.5rem;
  padding: 5px;
}

    /* The actual timeline (the vertical ruler) */
.timeline {
  position: relative;
  width: 1140px;
  margin: 0 auto;
}

.timeline::after {
  content: '';
  position: absolute;
  width: 6px;
  background-color: #fff;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -3px;
}

/* Container around content */
.container {
  padding: 10px 40px;
  position: relative;
  background-color: inherit;
  width: 50%;
}

/* The circles on the timeline */
.container::after {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  right: -17px;
  background-color: #1abc9c;
  border: 4px solid #fff;
  top: 15px;
  border-radius: 50%;
  z-index: 1;
}

/* Place the container to the left */
.left {
  left: 0;
}

/* Place the container to the right */
.right {
  left: 50%;
}

/* Add arrows to the left container (pointing right) */
.left::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  right: 30px;
  border: medium solid white;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent white;
}

/* Add arrows to the right container (pointing left) */
.right::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  left: 30px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent white transparent transparent;
}

/* Fix the circle for containers on the right side */
.right::after {
  left: -16px;
}

/* The actual content */
.content {
  padding: 20px 30px;
  background-color: white;
  position: relative;
  border-radius: 6px;
}

/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {
  /* Place the timelime to the left */
  .timeline::after {
  left: 31px;
  }
  
  /* Full-width containers */
  .container {
  width: 100%;
  padding-left: 70px;
  padding-right: 25px;
  }
  
  /* Make sure that all arrows are pointing leftwards */
  .container::before {
  left: 60px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent white transparent transparent;
  }

  /* Make sure all circles are at the same spot */
  .left::after, .right::after {
  left: 4px;
  }
  
  /* Make all right containers behave like the left ones */
  .right {
  left: 0%;
  }
}

@media screen and (max-width: 480px) {
  .left::after, .right::after {
    left: 7px;}
}

     /*-----------------------------*/
     /*           Quotes            */
     /*-----------------------------*/

#quotes {
  scroll-margin-top: 50px;
} 

.section-quotes h2{
  display: inline-block;
}

.quotes-container {
      margin: 0 20px;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      font-size: 1.1rem;
    }
    
.quote1,
.quote2,
.quote3 {
      width: 33%;
      margin: 0 20px 0 0;
      padding: 20px 20px 100px 20px;
      background-color: #fff;
      border-top: 1px #e0e0e0 solid;
      border-right: 1px #e0e0e0 solid;
      border-bottom: 1px #e0e0e0 solid;
      border-left: 5px #1ABC9C solid;
      border-radius: 15px;
      position: relative;
    }

.quote3 {
  margin-right: 0;
}    

.quote1 img, 
.quote2 img, 
.quote3 img {
      display: block;
      margin:15px auto 30px auto;
      width: 200px;
      height: auto;
      border:2px #e0e0e0 solid;
      border-radius: 50%;
    }

.wc-names {
      color: #1ABC9C;
      font-weight: bold;
      position: absolute;
      bottom: 20px;
    }

    /*-----------------------------*/
    /*        Bestgames            */
    /*-----------------------------*/
    
#best-games {
  scroll-margin-top: 50px;
} 

.section-best-games h2 {
  display: inline-block;
}

.li-games {
  margin: 0 auto;
  text-align: center;
  display: block;
}

    /*-----------------------------*/
    /*        Footer               */
    /*-----------------------------*/
    
footer {
      background-image: linear-gradient(to bottom, #169e83, #052720);
      text-align: center;
      font-weight: normal;
      padding: 40px 20px;
      color: #fff;
    }

.flex-container {
      display: flex;
      flex-direction: row;
    }

.column1,
.column2 {
      width: 50%;
      margin-right: 20px;
    }
    
.column2 p {
      display:block;
      color: #dee2e6;
      margin: 10px 20px;
      text-decoration: none;
      text-align: left;
      font-size: 1.1rem;
      text-transform: uppercase;
      font-weight: normal;
    }

footer a:link,
footer a:visited {
      display:block;
      color: #dee2e6;
      margin: 15px 20px;
      text-decoration: none;
      text-align: left;
      font-size: 1.1rem;
      transition: all .2s ease-out;
      position: relative;
    }

footer a:hover,
footer a:active {
      text-decoration: underline;
      color: #fff;
      opacity: 1;
    }

img.chesscom,
img.lichess,
img.chess24 {
      height: 20px;
      left: -30px;
      position: absolute;
      transition: 0.2s ease;
}

.hide_child .child {
  opacity: 0;
}

.hide_child:hover .child {
  opacity: 1;
}

.fa-heart {
       color: #ff0000;
       padding: 0 2px;
}

.hr-footer{
      margin: 30px 20px 20px 20px;
      color: #dee2e6;
    }

.author {
      margin: 30px 0 20px 0;
      font-weight: normal;
      font-size: 1.1rem;
      color: #dee2e6;
    }

.scrollUp {
      display: none;
      position: fixed;
      bottom: 20px;
      right: 30px;
      z-index: 15;
      font-size: 1.5rem;
      font-weight: 500;
      outline: none;
      cursor: pointer;
      background-color:#fff;
      color: #1abc9c;
      width: 40px;
      height: 40px;
      border-radius: 4px;
      border: 1px solid #1abc9c;
      transition: all 0.25s ease;
  }
  
  .scrollUp:hover {
      color: #fff;
      background-color: #1abc9c;
  }
  
  /*     MEDIA     */
  
  @media screen and (prefers-reduced-motion: no-preference) {
      html {
        scroll-behavior: smooth;
      }
    }

/* Big tablet to 1200px (widths smaller that the 1140px row) */
@media only screen and (max-width: 1200px) {
      .row { padding: 0 2%; }
      .hero-text-box {width: 50%;padding: 0 2%;}
      .timeline {width: 100%;}
}

/* Small tablet to big tablet: from 768px to 1023px */
@media only screen and (max-width: 1023px) {
      body { font-size: 14px; }
      section { padding: 0 0 60px 0; }
      header {height: auto;}
      .hero-row {align-items: center;}
      .hero-text-box h1 {font-size: 4rem;}
      .hero-text-box h3 { font-size: 0.9rem; }
      .timeline {width: 100%;}
      .header-queen, .header-rook {margin-bottom: 60px;}
}

/* Small phones to small tablets: from 481px to 767px */
@media only screen and (max-width: 767px) {
       body { font-size: 12px; }
       section { padding: 0 0 40px 0; }
      .navbar a:first-child {margin-left: 0;}
      .navbar a {font-size: 1rem;}
      .navbar a::after {bottom: -4px;}
      .navbar ul {justify-content: center;}
      .hero-row { flex-direction: column-reverse; justify-content: center; align-items: center; height: auto;}
      .hero-text-box h1 {font-size: 3rem;}
      .hero-text-box h3 { font-size: 0.8rem; }
      .hero-image { width: 75%; }
      .mobile_header_king {display: inline-block;}
      .desktop_header_king {display: none;}
      .timeline {width: 100%;}
      .header-queen, .header-rook {margin-bottom: 40px;}
       iframe{ width: 480px; height: 300px;}
      .quotes-container {flex-direction: column; justify-content: center; align-items: center;}
      .quote1,
      .quote2,
      .quote3 {width: 100%; margin: 20px 20px;} 
}

  /* Small phones: from 0 to 480px */
@media only screen and (max-width: 480px) {

      #timeline {
        scroll-margin-top: 0;
      }  

      #quotes {
        scroll-margin-top: 0;
      } 

      #best-games {
        scroll-margin-top: 0;
      } 

    .navbar {
      display: none;
    }

    .navbar.active {
      display: flex;
      position: absolute;
      top: 0;
      left: 0;
      height: 100vh;
      width: 100%;
      transition: all .5s ease;
    }

    #home.active {
      display: none;
    }

    .navbar ul {
      flex-direction: column;
      align-items: center;
      width: 100%;
    }

    .hamburger {
      display: block;
      position: absolute;
      top: 20px;
      right: 20px;
      z-index: 50;
      transition: transform 0.25s ease;
    }

    .active .line_1 {
        transform: rotate(-40deg) translateY(6.5px);
        background-color: #fff;
    }
    .active .line_2 {
        opacity: 0;
    }
    .active .line_3 {
        transform: rotate(40deg) translateY(-6.5px);
        background-color: #fff;
    }

    .navbar ul li {
      margin-bottom: 50px;
    }

    .navbar ul li:first-child {
      margin-left: 0;
    }

    .navbar a {
      font-size: 1.1rem;
    }

    .hero-text-box h1 {font-size: 2rem;}
      section { padding: 0 0 20px 0; }
    .timeline {width: 100%;}
    .header-queen, .header-rook {margin-bottom: 20px;}
      iframe{ width: 350px; height: 650px;}
}

@media only screen and (max-width: 375px) {
      .hero-text-box h1 {font-size: 1.5rem;}
       iframe{ width: 300px; height: 650px;}
}


              
            
!

JS

              
                

$(document).ready(function() { 
   
	/* Navigation scroll */
    // Select all links with hashes
$('a[href*="#"]')
  // Remove links that don't actually link to anything
  .not('[href="#"]')
  .not('[href="#0"]')
  .click(function(event) {
    // On-page links
    if (
      location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') 
      && 
      location.hostname == this.hostname
    ) {
      // Figure out element to scroll to
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      // Does a scroll target exist?
      if (target.length) {
        // Only prevent default if animation is actually gonna happen
        event.preventDefault();
        $('html, body').animate({
          scrollTop: target.offset().top - ($('.navbar').css('position') == 'fixed' ? $('.navbar')[0].clientHeight : 0)
        }, function() {
          // 1500,
        });
      }
    }
  });
}); 


// Scroll button

var scrollButton = document.querySelector(".scrollUp");

scrollButton.addEventListener('click', () => {
  topFunction()
})

document.querySelector('body').onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 570 || document.documentElement.scrollTop > 570) {
    scrollButton.style.display = "block";
  } else {
    scrollButton.style.display = "none";
  }
}

function topFunction() {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}

// Navigation

const hamburger = document.querySelector('.hamburger')
const navigation = document.querySelector('.navbar')
const home = document.querySelector('#mynavbar')

hamburger.addEventListener('click', () => {
  navigation.classList.toggle('active')
  hamburger.classList.toggle('active')
})

home.addEventListener('click', () => {
  home.classList.toggle('active')
  hamburger.classList.toggle('active')
})


              
            
!
999px

Console