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

              
                <body>
    <header id="header">
      <img src="img/Chisinau.jpg" alt="logo" class="noLogo" id="header-img" />
      <h2><a href="#">Moldova Travel</a></h2>
      <nav class="navLinks" id="nav-bar">
        <li><a href="#destinations" class="nav-link">Destinations</a></li>
        <li><a href="#tours" class="nav-link">Tours</a></li>
        <li><a href="#contact" class="nav-link">Contact</a></li>
      </nav>
      <div class="hamburger">
        <div class="line line_1"></div>
        <div class="line line_2"></div>
        <div class="line line_3"></div>
      </div>
    </header>

    <main>
      <section class="hero">
        <div class="hero-content-area">
          <h1>Moldova Travel</h1>
          <h3>Awesome Adventure Tours in Moldova</h3>
          <a href="#" class="btn">Contact Us Now</a>
        </div>
      </section>

      <section class="destinations" id="destinations">
        <h2 class="title">Some of our destinations:</h2>
        <p>
          If you are one of those travelers looking to get off the beaten path,
          Moldova will be your heaven. Hosting a diversity of landscape
          reservations and natural wonders, it gives you the opportunity to
          spend some moments of calm. Take a break from your daily routine,
          choose a sacred space and meet your inner self in one of the country’s
          many green destinations.
        </p>

        <hr />

        <div class="pictures">
          <div class="chisinau">
            <img src="https://images2.imgbox.com/5f/ef/SKdanYvI_o.jpg" alt="chisinau" />
            <div class="item_overlay">
              <div class="title_overlay">Chișinău</div>
              <div class="description_overlay">
                <p>
                  Chișinău is the capital and largest city of the Republic of
                  Moldova.
                </p>
              </div>
            </div>
          </div>
          <div class="orheiul_vechi">
            <img src="https://images2.imgbox.com/75/3b/uqL6hUTF_o.jpg" alt="orheiul_vechi" />
            <div class="item_overlay">
              <div class="title_overlay">Orheiul Vechi</div>
              <div class="description_overlay">
                <p>Cultural-natural reservation</p>
              </div>
            </div>
          </div>
          <div class="cricova">
            <img src="https://images2.imgbox.com/43/00/xPhT5Jhd_o.jpg" alt="Vinaria_cricova" />
            <div class="item_overlay">
              <div class="title_overlay">Cricova Winery</div>
              <div class="description_overlay">
                <p>
                  Cricova is a Moldovan winery, located in the town with the
                  same name, 15 kilometres north of Chişinău.
                </p>
              </div>
            </div>
          </div>
          <div class="manastirea_tipova">
            <img src="https://images2.imgbox.com/d2/d6/eUTgwIrf_o.jpg" alt="Manastirea_Tipova" />
            <div class="item_overlay">
              <div class="title_overlay">Mănăstirea Țipova</div>
              <div class="description_overlay">
                <p>
                  The cave monastery is hidden in the rocks that form the banks
                  of the river Nistru.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section class="packages" id="tours">
        <h2>Tour Packages</h2>
        <p>
          In Moldova we know how to have fun, and we’ll make sure you do, too.
          If you like adventure, we will take you kayaking on the Dniester
          River, cycling in Codri, paragliding at Orheiul Vechi, picking
          lavender from fragrant purple fields, and kicking up your heels at a
          traditional Moldovan wedding. All of these will make you wonder why
          you took so long to discover Moldova.
        </p>

        <hr />

        <div class="trips">
          <div class="photo_trips">
            <i class="fas fa-camera"></i>
            <h3>Photo Trips</h3>
            <p>
              Want to experience nature's beauty without all of that annoying
              exercise? Take a photo tour on one of our buses.
            </p>
          </div>

          <div class="biking_trips">
            <i class="fas fa-bicycle"></i>
            <h3>Biking Trips</h3>
            <p>
              Whether for active travel or amateur sports, adventure tourism is
              the perfect choice.
            </p>
          </div>

          <div class="guided_trips">
            <i class="far fa-compass"></i>
            <h3>Guided Trips</h3>
            <p>
              Guided tours are all generally all-inclusive group travel
              experiences led by a guide and following a specific itinerary.
            </p>
          </div>

          <div class="racing_trips">
            <i class="fas fa-flag-checkered"></i>
            <h3>Racing Trips</h3>
            <p>
              Got a competitive spirit? Sign up for one of our marathons! Try to
              reach the summit before anyone else.
            </p>
          </div>
        </div>
      </section>

      <section class="testimonials">
        <h2>Testimonials</h2>
        <p>What our travelers say about us</p>

        <hr />

        <div class="travelers">
          <div class="slider-container">
            <div class="jordan_jensen user show">
              <img src="https://images2.imgbox.com/f9/cd/gk6KFkh6_o.jpg" alt="jordan_jensen" />
              <h4>Jordan Jensen</h4>
              <p>
                Wow! This tour made me realize how much I love Moldova. After
                going on one of these tours, I can safely say that they are my
                favorite geographic feature, and my favorite word that starts
                with M.
              </p>
            </div>

            <div class="jeanne_murray user">
              <img src="https://images2.imgbox.com/36/fa/U2wIriuK_o.jpg" alt="jeanne_murray" />
              <h4>Jeanne Murray</h4>
              <p>
                I never understood why people cared so much about Moldova. But
                then I went on one of these tours. Now I can't understand people
                who don't care about Moldova!
              </p>
            </div>

            <div class="serenity_grant user">
              <img src="https://images2.imgbox.com/87/16/kf4db0dS_o.jpg" alt="Serenity Grant" />
              <h4>Serenity Grant</h4>
              <p>
                Awesome way to see two of the best wineries in moldova! SO much
                wine. Milestii mici also gives you a decent food pairing so you
                don’t have to worry about breakfast. Friendly and professional
                driver, overall well organized and enjoyable.
              </p>
            </div>

            <div class="bob_jackson user">
              <img src="https://images2.imgbox.com/df/9a/0rWOJ6Xh_o.jpg" alt="bob_jackson" />
              <h4>Bob Jackson</h4>
              <p>
                Excellent way to spend the day. Our guide was excellent! Great
                wines (much more than a tasting) and the snacks were also very
                generous.
              </p>
            </div>

            <div class="shelly_marshall user">
              <img src="https://images2.imgbox.com/b1/99/n6qzOBRP_o.jpg" alt="shelly_marshall" />
              <h4>Shelly Marshall</h4>
              <p>
                The most amazing place We have been. Trip around winery, tasting
                and info. The most delicious champagne I’ ve tasted On hole my
                life. We see and learn a lot in Cricova winery.
              </p>
            </div>

            <div class="controls">
              <button id="prev"><i class="fas fa-arrow-left"></i></button>
              <button id="next"><i class="fas fa-arrow-right"></i></button>
            </div>
          </div>
        </div>
      </section>

      <section class="learn_more" id="contact">
        <h2>Learn More</h2>
        <p>
          Want to know about our upcoming related events, or come to one of our
          mixers? Just sign up for our mailing list. No spam from us, we
          promise! Except for the spam we give you to keep up your energy while
          you're hiking through the Moldova. We have tons of that.
        </p>
        <hr />
        <form id="form" action="https://www.freecodecamp.com/email-submit">
          <input
            type="email"
            placeholder="Email"
            id="email"
            name="email"
            required
          />
          <input type="submit" id="submit" class="btn" value="Subscribe now" />
        </form>
      </section>
    </main>

    <footer>
      <div class="footer">
        <div class="logo_box">
          <h2><a href="#">Moldova Travel</a></h2>
          <div class="social">
            <a href="https://twitter.com/"
              ><i class="fab fa-twitter-square"></i
            ></a>
            <a href="https://facebook.com/"
              ><i class="fab fa-facebook-square"></i
            ></a>
            <a href="https://youtube.com/"
              ><i class="fab fa-youtube-square"></i
            ></a>
          </div>
        </div>

        <div class="footer-row">
          <p class="author">
            Create with <i class="fas fa-heart"></i> in beautiful Chișinău,
            Moldova.
          </p>
          <small
            >@ 2021 by
            <a href="https://github.com/VaNaChiMa">Vanachima</a>.</small
          >
        </div>
      </div>
    </footer>
    <button class="scrollUp" title="Go to top">
      <i class="fas fa-angle-up"></i>
    </button>
    <iframe
      id="video"
      height="315"
      src="https://www.youtube-nocookie.com/embed/y8Yv4pnO7qc?rel=0&amp;controls=0&amp;showinfo=0"
      frameborder="0"
      allowfullscreen
    ></iframe>

  </body>
              
            
!

CSS

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

html {
    font: normal 16px sans-serif;
}

body {
    max-width: 1440px;
    min-height: 100vh;
    margin: 0 auto;
    position: relative;
}

section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 100px 80px;
}

section:nth-of-type(odd) {
    background-color: #f5f5f5;
}

section h2 {
    margin-bottom: 30px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 2rem;
    color: #555;
}

section p {
    margin-bottom: 30px;
    text-align: center;
    max-width: 750px;
    line-height: 2;
    font-family: 'Open Sans', sans-serif;
    font-weight: 500;
    font-size: 1rem;
}

hr {
    width: 250px;
    height: 3px;
    color: #00adef;
    background-color: #00adef;
    margin-bottom: 70px;
    border: none;
    border-radius: 50px;
}

/*    Header     */

.noLogo {
    display: none;
}

iframe {
    display: none;
}

header {
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
    padding: 0 30px 0 100px;
    animation: 1s fadein 0.5s forwards;
    opacity: 0;
    color: #fff;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.5);
}

@keyframes fadein {
    100% {
        opacity: 1;
    }
}

header h2 {
    font-family: 'Quicksand', sans-serif;
}

header nav {
    display: flex;
    margin-right: -15px;
    list-style: none;
}

header nav li {
    margin: 0 15px;
}

header a {
    text-decoration: none;
    color: #fff;
    transition: 0.25s ease;
}

header a:hover {
    color: #00adef;
}

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

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

/*   Hero section  */

.hero {
    position: relative;
    justify-content: center;
    height: 100vh;
    width: 100%;
    text-align: center;
    color: #fff;
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://i.ibb.co/2Fb4Qww/Hero-new.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
}

.hero h1 {
    font-family: 'Open Sans', sans-serif;
    font-size: 3.75rem;
    margin-bottom: 15px;
    letter-spacing: 10px;
}

.hero h3 {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.675rem;
    font-weight: 700;
    margin-bottom: 80px;
    letter-spacing: 2px;
}

.hero a {
    padding: 20px 45px;
    border-radius: 50px;
    font-weight: 300;
    text-transform: uppercase;
    text-align: center;
    background: #fff; 
    color: #777;
    text-decoration: none;
    display: inline-block;
    transition: all 0.25s ease;
}

.hero a:hover {
    background-color: #00adef;
    color: #fff;
    transform: scale(0.98);
}

.hero a:active {
    transform: translateY(2px);
}

.hero-content-area {
    opacity: 0;
    margin-top: 100px;
    animation: 1s slidefade 1s forwards;
}

@keyframes slidefade {
    100% {
        opacity: 1;
        margin: 0;
    }
}

/*   Destination section    */

.destinations {
    animation: 1s fadein 0.5s forwards;
}

.pictures {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(2, 25vw);
    grid-gap: 5px;
}

.pictures > div img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chisinau {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
    position: relative;
}

.orheiul_vechi {
    grid-column-start: 3;
    grid-column-end: 7;
    grid-row-start: 1;
    grid-row-end: 2;
    position: relative;
}

.cricova {
    grid-column-start: 1;
    grid-column-end: 5;
    grid-row-start: 2;
    grid-row-end: 3;
    position: relative;
}

.manastirea_tipova {
    grid-column-start: 5;
    grid-column-end: 7;
    grid-row-start: 2;
    grid-row-end: 3;
    position: relative;
}

.item_overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px 30px;
    height: 50px;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.35);
    color: #fff;
    transition: all 0.3s ease;
    font-size: 1.2rem;
    font-weight: 500;
}

.title_overlay {
    margin-bottom: 17px;
}

.description_overlay p {
    font-size: 0.8rem;
    font-weight: 300;
    margin-bottom: 10px;
    text-align: left;
    margin-bottom: 2.2rem;
    line-height: normal;
}

/* .item_overlay:hover */

.pictures div:hover .item_overlay {
    height: 50%;
    background-color: rgba(0, 0, 0, 0.7);
    padding-top: 20px;
}

.description_overlay {
    opacity: 1;
}

/*     Packages     */

.trips {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
}

.photo_trips, .biking_trips,
.guided_trips, .racing_trips {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 50px;
}

.trips i {
    color: #00adef;
    font-size: 4rem;
    transition: all 0.3s ease;
}

.trips i:hover {
    transform: scale(1.2) rotate(-360deg);
}

.trips p {
    margin-bottom: 30px;
    padding: 0 20px;
}

.trips h3 {
    margin: 25px 0;
}

/*     Testimonials     */

.testimonials {
    background: rgb(0,173,239);
    background: linear-gradient(64deg, rgba(42,245,152,1) 0%, rgba(0,173,239,1) 100%);
    color: #f9fafa;
}

.testimonials h2 {
    color: #f9fafa;
}

.testimonials hr {
    background-color: #f9fafa;
}

.slider-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.travelers img {
    border-radius: 50%;
}

.slider-container > div {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.slider-container .user {
    display: none;
    margin: auto;
    border-radius: 8px;
    height: 330px;
    width: 400px;
  }

.slider-container .user h4 {
   padding-top: 20px;
   font-family: 'Open Sans', sans-serif;
   font-weight: 700;
   font-size: 1.3rem;
}

.slider-container .user p {
    padding: 20px 20px 0 20px;
    width: 350px;
    line-height: normal;
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: 400;
    font-family: 'Open Sans', sans-serif;
}

.slider-container .user.show {
    display: flex;
}

.controls button {
    display: block;
    padding: 10px 30px;
    color: #00c09d;
    border-radius: 5px;
    outline: none;
    transition: 0.3s;
    border: 0;
    cursor: pointer;
    opacity: 0.8;
}
  
.controls sbutton:hover {
    color: #00c09d;
    background: #fff;
    opacity: 0.9;
  }
  
.controls button:active {
    transform: scale(0.95);
  }
  
  .slider-container {
    position: relative;
    z-index: 50;
  }
  
.controls #prev {
    position: absolute;
    top: 50%;
    left: -70px;
    transform: translate(-50%);
    z-index: -1;
  }
.controls #next {
    position: absolute;
    top: 50%;
    right: -150px;
    transform: translate(-50%);
    z-index: -1;
}
  
.controls button i {
    font-size: 1.5rem;
  }

  /*   Learn More    */

.learn_more form {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 60%;
}

.learn_more form input {
    padding: 15px;
    margin-right: 30px;
    font-size: 18px;
    color: #555;
    flex: 1;
    width: 60%;
}

/* .learn_more form.btn {
    padding: 18px 42px;
} */

.learn_more input.btn {
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: bold;
    text-align: center;
    background-color: #00adef;
    transition: all .25s ease;
    color: #fff;
    border: none;
}

.learn_more input.btn:hover {
    background-color: #0092cc;
}

.learn_more form .btn {
    padding: 18px 42px;
}

/* .learn_more a {
    text-decoration: none;
    color: #fff;
} */

/*     Footer     */

footer {
    background-color: #fff;
    color: #555;
    padding: 50px 80px;
}

footer h2 {
    padding: 30px 0;
}

footer h2 a {
    color: #00adef;
    text-decoration: none;
}

.logo_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo_box h2 {
    transition: all 0.25s ease;
}

.logo_box h2:hover {
    transform: scale(1.2) rotate(-5deg);
}

.social {
    display: flex;
    justify-content: center;
    align-items: center;
}

.social i {
    margin-right: 10px;
    font-size: 2rem;
    color: #999;
    transition: all 0.25s ease;
}

.social i:hover {
    transform: scale(1.1) rotate(360deg);
}

.social .fa-facebook-square:hover {
    color: #1778f2;
}
.social .fa-twitter-square:hover {
    color: #1C9CEA;
}
.social .fa-youtube-square:hover {
    color:#FF0000;
}

.social i:before {
    display: inline;
  }

.footer-row {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 30px;
}

.footer-row p {
    text-align: center;
    margin-bottom: 10px;
    font-size: 0.875rem;
}

.footer-row small {
    margin-bottom: 10px;
    font-size: 0.875rem;
}

.author i {
    color: #ff0000;
}

footer small a {
    text-decoration: none;
    color: #00adef;
    font-weight: 700;
}

/*     Scroll button     */

.scrollUp {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    font-size: 1.5rem;
    font-weight: 500;
    outline: none;
    cursor: pointer;
    background-color:#fff;
    color: #00adef;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    border: 1px solid #00adef;
    transition: all 0.25s ease;
}

.scrollUp:hover {
    color: #fff;
    background-color: #00adef;
}

@media screen and (prefers-reduced-motion: no-preference) {
    html {
      scroll-behavior: smooth;
    }
  }

/*   MEDIA    */

@media  screen and (max-width: 1100px) {
    .chisinau {
        grid-column-start: 1;
        grid-column-end: 4;
        grid-row-start: 1;
        grid-row-end: 2;
    }

    .orheiul_vechi {
        grid-column-start: 4;
        grid-column-end: 7;
        grid-row-start: 1;
        grid-row-end: 2;
    }

    .cricova {
        grid-column-start: 1;
        grid-column-end: 4;
        grid-row-start: 2;
        grid-row-end: 3;
    }

    .manastirea_tipova {
        grid-column-start: 4;
        grid-column-end: 7;
        grid-row-start: 2;
        grid-row-end: 3;
    }

    .pictures div:hover .item_overlay {
        height: 70%;
    }

    .learn_more form input {
        flex-basis: 100%;
        margin: 0 0 20px 0;
    }
}

@media  screen and (max-width: 768px) {
    section {
        padding: 50px 20px;
    }

    .hero h1 {
        font-size: 3rem;
    }
    
    .hero h3 {
        font-size: 1.4rem;
    }

    .hero a {
        padding: 15px 40px;
    }

    header {
        padding-left: 50px;
    }
    
    .hero-content-area {
        opacity: 0;
        margin-top: 100px;
        animation: 1s slidefade 1s forwards;
    }

    header.active {
        background-color: #000;
    }

    .navLinks {
        display: none;
        flex-direction: column;
        align-items: center;
        position: absolute;
        top: 70px;
        left: 0;
        width: 100%;
        height: calc(100vh - 70px);
        padding-top: 20vh;
    }

    .navLinks.active {
        display: flex;
        transition: all .5s ease;
        animation: bigCircle .5s forwards;
    }

    .hero.active {
        background-color: #000;
    }

    .navLinks li {
        margin-bottom: 35px;
        font-size: 1.5rem;
        font-weight: 500;
    }

    .navLinks a {
        animation: showMe .7s ease;
    }

    .navLinks a:hover {
        letter-spacing: .3rem;
    }
    
    .hamburger {
        display: block;
        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;
    }

    @keyframes showMe {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @keyframes bigCircle {
        0% {
            background-color: rgba(0, 0, 0, 0);
        }
        100% {
            background-color: rgba(0, 0, 0, 1);
        }
    }

    .pictures {
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(4, 50vw);
    }

    .chisinau {
        grid-column-start: 1;
        grid-column-end: 7;
        grid-row-start: 1;
        grid-row-end: 2;
    }

    .orheiul_vechi {
        grid-column-start: 1;
        grid-column-end: 7;
        grid-row-start: 2;
        grid-row-end: 3;
    }

    .cricova {
        grid-column-start: 1;
        grid-column-end: 7;
        grid-row-start: 3;
        grid-row-end: 4;
    }

    .manastirea_tipova {
        grid-column-start: 1;
        grid-column-end: 7;
        grid-row-start: 4;
        grid-row-end: 5;
    }

    .pictures div:hover .item_overlay {
        height: 50%;
    }

    .trips {
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(4, 1fr);
    }
    
    .photo_trips, .biking_trips,
    .guided_trips, .racing_trips {
        margin: 20px;
    }

    .slider-container .user {
        height: 330px;
        width: 300px;
      }
    
    .slider-container .user h4 {
       font-size: 1.1rem
    }

    .slider-container .user p {
        padding: 20px 10px 0 10px;
        width: 280px;
        font-size: .9rem;
    }
    
    .controls button {
        padding: 10px 20px;
    }
      
    .controls button:hover {
        background: #fff;
        opacity: 1;
      }
      
    .controls #prev {
        left: -40px;
      }

    .controls #next {
        right: -100px;
    }
      
    .controls button i {
        font-size: 1.2rem;
      }
    
    footer {
        padding: 50px 20px;
    }
}

@media  screen and (max-width: 480px) {

    .hero h1 {
        font-size: 2.5rem;
    }
    
    .hero h3 {
        font-size: .7rem;
    }

    .hero a {
        padding: 15px 30px;
    }

    .pictures div:hover .item_overlay {
        height: 70%;
    }

    .slider-container .user {
        height: 330px;
        width: 250px;
      }
    
    .slider-container .user h4 {
       font-size: 1rem
    }

    .slider-container .user p {
        padding: 20px 10px 0 10px;
        width: 200px;
        font-size: .8rem;
    }

    .controls #prev {
        left: -10px;
      }

    .controls #next {
        right: -70px;
    }
}
              
            
!

JS

              
                

// SLIDER

var users = document.querySelectorAll('.user')
var prev = document.querySelector("#prev");
var next = document.querySelector("#next");

var counter = 0;

console.log(users)

next.addEventListener("click", function () {
  counter = counter + 1;

  if (counter > users.length - 1) {
    counter = 0;
  }
    removeActiveClasses()
  users[counter].classList.add('show');
  console.log(counter);
});

prev.addEventListener("click", function () {
  counter = counter - 1;

  if (counter < 0) {
    counter = users.length - 1;
  }
  removeActiveClasses()
  users[counter].classList.add('show');
  console.log(counter);
});

function removeActiveClasses() {
    users.forEach(user => {
        user.classList.remove('show')
    })
}

// Navigation

const hamburger = document.querySelector('.hamburger')
const hero = document.querySelector('.hero')
const navigation = document.querySelector('.navLinks')
const header = document.querySelector('header')

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

// Scroll button

/* <button onclick="topFunction()" id="myBtn" title="Go to top">Top</button> */

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

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

window.onscroll = function() {scrollFunction()}

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

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

Console