Can't access another page besides my html home page

JordanFritztiono
February 4, 2024
236 views
1 vote
2 Answers

it seems that my html doesn’t allow me to open another page. I put the other pages link on the head of my html code. As of now i have 3 html files: index.html, about.html, stocks.html. When i’m on my index.html page, i tried to open my about page by clicking the button on my nav but i’m just stuck on my index.html page and it doesn’t allow me to move to another page.
Bellow is my code

I have checked all the possible errors by checking the head and all of the link to the other pages but i’m still stuck on the index.html page. I’m sure that i don’t miss anything on my code but still i cannot access another page (about.html & stocks.html) . My goal is to simply being able to load another page.

console.log("Hello world!");

const myName = "Jordan Septian";
const h1 = document.querySelector(".heading-primary");
console.log(myName);
console.log(h1);

///////////////////////////////////////////////////////////
// Make mobile navigation work

const btnNavEl = document.querySelector(".btn-mobile-nav");
const headerEl = document.querySelector(".header");

btnNavEl.addEventListener("click", function() {
  headerEl.classList.toggle("nav-open");
});

///////////////////////////////////////////////////////////
// Set current year
const yearEl = document.querySelector(".year");
const currentYear = new Date().getFullYear();
yearEl.textContent = currentYear;

///////////////////////////////////////////////////////////
// Smooth scrolling animation

const allLinks = document.querySelectorAll("a:link");

allLinks.forEach(function(link) {
  link.addEventListener("click", function(e) {
    e.preventDefault();
    const href = link.getAttribute("href");

    // Scroll back to top
    if (href === "#")
      window.scrollTo({
        top: 0,
        behavior: "smooth",
      });

    // Scroll to other links
    if (href !== "#" && href.startsWith("#")) {
      const sectionEl = document.querySelector(href);
      sectionEl.scrollIntoView({
        behavior: "smooth"
      });
    }

    // Close mobile navigation
    if (link.classList.contains("main-nav-link"))
      headerEl.classList.toggle("nav-open");
  });
});

///////////////////////////////////////////////////////////
// STICKY NAVIGATION

const sectionHeroEl = document.querySelector(".section-hero");

const obs = new IntersectionObserver(
  function(entries) {
    const ent = entries[0];
    console.log(ent);

    if (ent.isIntersecting === false) {
      document.body.classList.add("sticky");
    }

    if (ent.isIntersecting) {
      document.body.classList.remove("sticky");
    }
  }, {
    // In the viewport
    root: null,
    threshold: 0,
    rootMargin: "-80px",
  }
);
obs.observe(sectionHeroEl);

/* ************************** */


/* Header*/


/* ************************** */

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  height: 12.8rem;
  padding: 0 4.8rem;
  position: relative;
}

.logo {
  height: 12.8rem;
}


/* ************************** */


/* Header*/


/* ************************** */

.main-nav-list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 4.8rem;
}

.main-nav-link:link,
.main-nav-link:visited {
  display: inline-block;
  text-decoration: none;
  color: #000;
  font-weight: 500;
  font-size: 1.8rem;
  transition: all 0.3s;
  cursor: pointer;
}

.main-nav-link:hover,
.main-nav-link:active {
  color: #333;
  cursor: pointer;
}


/* !!!! */


/* For Hamburger Menu*/


/* ********* */

.btn-mobile-nav {
  border: none;
  background: none;
  cursor: pointer;
  display: none;
}

.icon-mobile-nav {
  height: 4.8rem;
  width: 4.8rem;
  color: #333;
}

.icon-mobile-nav[name="close-outline"] {
  display: none;
}


/* STICKY NAVIGATION */

.sticky .header {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 8rem;
  padding-top: 0;
  padding-bottom: 0;
  background-color: rgba(255, 255, 255, 0.97);
  z-index: 999;
  box-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, 0.03);
}

.sticky .section-hero {
  margin-top: 9.6rem;
}


/* ************************** */


/* Hero Section*/


/* ************************** */

.hero-section {
  position: relative;
  margin-bottom: 9.6rem;
  z-index: 0;
}

.hero-img {
  width: 100%;
}

.motto {
  position: absolute;
  top: 40%;
  right: 15%;
  transform: translate(0, -50%);
}

.sticky-note {
  background-color: #1809f2;
  width: 35rem;
  height: 35rem;
  text-align: left;
  padding: 2.4rem;
  margin-bottom: 1.6rem;
}

.motto-heading {
  font-size: 6.2rem;
  color: #fff;
}

.btn--center {
  position: absolute;
  right: 50%;
  transform: translate(50%, 0);
}


/* ************************** */


/* New Stock section*/


/* ************************** */


/* .sticky-flex {
  display: flex;
} */

.grid--2-cols-cus1 {
  grid-template-columns: 1fr 9fr;
}

.new-stock {
  padding: 1.6rem 0;
}

.new-sticky {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: #1809f2;
  width: 14.2rem;
  height: 14.2rem;
  padding: 0.8rem;
  text-align: right;
}

.sticky-heading {
  color: #fff;
  font-size: 1.6rem;
}

.product img {
  width: 100%;
}

.product {
  position: relative;
  border: 1.5px solid #000;
}

.product::after {
  content: "New";
  position: absolute;
  top: 0;
  right: 0;
  font-size: 1.4rem;
  background-color: #1809f2;
  color: #fff;
  padding: 1.2rem 0.8rem;
}

.product-description {
  padding: 1.2rem;
  font-size: 1.2rem;
  line-height: 1.5;
}

.product-description p:nth-child(3) {
  margin-bottom: 0.8rem;
}

.btn--right {
  justify-self: end;
  grid-column: -2 / -1;
}


/* ************************** */


/* Playlist section*/


/* ************************** */

.grid--2-cols-cus2 {
  grid-template-columns: 70fr 30fr;
  column-gap: 6.4rem;
}

.section-playlist {
  padding: 4.8rem;
  background-color: #1809f2;
  margin-bottom: 9.6rem;
}

.playlist-img {
  width: 100%;
}

.playlist-list {
  text-align: center;
}

.playlist-description {
  color: #fff;
  font-size: 1.6rem;
}

.playlist-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

.playlist-heading {
  color: #fff;
  font-size: 5.2rem;
}

.note {
  position: absolute;
  right: 45px;
}


/* ************************** */


/* Staff pick section*/


/* ************************** */

.product-staff img {
  width: 100%;
}

.product-staff,
.product {
  position: relative;
  border: 1.5px solid #000;
  transition: all 0.3s;
}

.product-staff:hover,
.product:hover,
.product-staff:active,
.product:active {
  transform: scale(1.1);
  cursor: pointer;
}


/* ************************** */


/* Footer*/


/* ************************** */

.footer {
  padding: 4.8rem 0;
  margin-top: 9.6rem;
  background-color: #c2c2c2;
  position: relative;
}

.grid--footer {
  grid-template-columns: 1fr 1fr;
  justify-items: center;
}

.footer-logo {
  position: absolute;
  top: 0;
  left: 20px;
  height: 9.6rem;
}

.social-icon {
  height: 1.6rem;
  width: 1.6rem;
  position: absolute;
  right: 10px;
}

.copyright {
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: 1.4rem;
  line-height: 1.6;
}

.footer-heading {
  font-size: 2.4rem;
  font-weight: 500;
  margin-bottom: 3.2rem;
}

.margin-right {
  margin-left: -25px;
}

.footer-nav {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.footer-link:link,
.footer-link:visited {
  text-decoration: none;
  font-size: 1.2rem;
  color: #000;
  transition: all 0.3s;
  position: relative;
}

.footer-link:hover,
.footer-link:active {
  color: #333;
}

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

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />

  <meta name="description" content="Groovy is a store where you can spoil your record collecting hobby. Here you can find whatever record you are looking for" />

  <link rel="icon" href="img/favicon copy.png" />
  <link rel="apple-touch-icon" href="img/apple-touch-icon.png" />
  <link rel="manifest" href="manifest.webmanifest" />
  <link href="style.css" rel="stylesheet" type="text/css" />

  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="css/style.css" />
  <link rel="stylesheet" href="css/general.css" />
  <link rel="stylesheet" href="css/queries.css" />
  <link rel="stylesheet" href="about.html" />
  <link rel="stylesheet" href="stocks.html" />

  <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Russo+One&family=Source+Code+Pro&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer"
  />

  <script defer src="https://unpkg.com/[email protected]/dist/smoothscroll.min.js"></script>
  <script defer src="js/script.js"></script>

  <title>Groovy Records</title>
</head>

<body>
  <header class="header sticky">
    <a href="index.html">
      <img src="img/footer/logo.png" alt="Groovy logo" class="logo" />
    </a>

    <nav class="main-nav">
      <ul class="main-nav-list">
        <li>
          <a href="about.html" class="main-nav-link">About</a>
        </li>
        <li><a href="stocks.html" class="main-nav-link">Stocks</a></li>
        <li><a href="#" class="main-nav-link">Stores</a></li>
      </ul>
    </nav>

    <button class="btn-mobile-nav">
        <ion-icon class="icon-mobile-nav" name="menu-outline"></ion-icon>
        <ion-icon class="icon-mobile-nav" name="close-outline"></ion-icon>
      </button>
  </header>

  <main>
    <section class="hero-section">
      <img src="img/Web_Home EmptyBG.webp" alt="background image" class="hero-img" />
      <div class="motto">
        <div class="sticky-note">
          <span class="motto-heading">Spinning</span>
          <span class="motto-heading">Memories</span>
          <span class="motto-heading">Since ♪</span>
          <span class="motto-heading">&horbar;&horbar;&horbar; 2010 </span>
        </div>
        <a href="#" class="hero-btn btn btn--center">Our Story</a>
      </div>
    </section>

    <section class="new-stock">
      <div class="record container grid grid--2-cols-cus1 margin-bottom-md">
        <div class="new-sticky">
          <h1 class="heading-secondary sticky-heading">New In Stock</h1>
        </div>

        <div class="grid grid--4-cols">
          <div class="product">
            <img src="img/New In Stocks/LoyleCarner-NotWavingButDrowning-3000x3000.jpg" alt="loyle-carner" />
            <div class="product-description">
              <p>Not Waving, But Drowning</p>
              <p>Loyle Carner</p>
              <p>2019</p>
              <p>Hip Hop music</p>
              <p>$50.00</p>
            </div>
          </div>
          <div class="product">
            <img src="img/New In Stocks/Frank-Ocean-Blond.jpg" alt="Frank ocean" />
            <div class="product-description">
              <p>Blonde</p>
              <p>Frank Ocean</p>
              <p>2016</p>
              <p>R&B/Soul</p>
              <p>$50.00</p>
            </div>
          </div>
          <div class="product">
            <img src="img/New In Stocks/Arlo-Parks.jpg.png" alt="Arlo-Parks" />
            <div class="product-description">
              <p>Collapsed in Sunbeams</p>
              <p>Arlo Parks</p>
              <p>2021</p>
              <p>R&B/Soul, Alternative/Indie</p>
              <p>$50.00</p>
            </div>
          </div>
          <div class="product">
            <img src="img/New In Stocks/kings.jpeg" alt="kings-of-convenience" />
            <div class="product-description">
              <p>Declaration of Dependence</p>
              <p>Kings of Convenience</p>
              <p>2009</p>
              <p>Alternative</p>
              <p>$50.00</p>
            </div>
          </div>
          <div class="product">
            <img src="img/New In Stocks/billie.jpeg" alt="billie-holiday" />
            <div class="product-description">
              <p>Strange Fruit</p>
              <p>Billie Holiday</p>
              <p>1972</p>
              <p>Jazz</p>
              <p>$50.00</p>
            </div>
          </div>
          <div class="product">
            <img src="img/New In Stocks/fkj.jpeg" alt="Fkj" />
            <div class="product-description">
              <p>French Kiwi Juice</p>
              <p>FKJ</p>
              <p>2017</p>
              <p>Funk/Soul</p>
              <p>$50.00</p>
            </div>
          </div>
          <div class="product">
            <img src="img/New In Stocks/tyler.jpeg" alt=" Tyler, The creator" />
            <div class="product-description">
              <p>Call Me If You Get Lost</p>
              <p>Tyler, The Creator</p>
              <p>2021</p>
              <p>Hip Hop/ Rap</p>
              <p>$50.00</p>
            </div>
          </div>
          <div class="product">
            <img src="img/New In Stocks/francoise.jpg" alt="Francoise hardy" />
            <div class="product-description">
              <p>Tous les garçons et filles</p>
              <p>Françoise Hardy</p>
              <p>1962</p>
              <p>Soul</p>
              <p>$50.00</p>
            </div>
          </div>
        </div>
        <a href="#" class="btn btn--right">All Stocks</a>
      </div>
    </section>

    <section class="section-playlist">
      <div class="playlist container grid grid--2-cols-cus2">
        <div class="grid grid--3-cols">
          <div class="playlist-list">
            <img src="img/playlist/Playlist_Krulism.png" alt="Playlist_Krulism" class="playlist-img" />
            <p class="playlist-description">
              A playlist intended for lifetime dedicated music enthusiast
            </p>
          </div>
          <div class="playlist-list">
            <img src="img/playlist/Playlist_Trip The Light.png" alt="Playlist_Trip" class="playlist-img" />
            <p class="playlist-description">
              A playlist intended for lifetime dedicated music enthusiast
            </p>
          </div>
          <div class="playlist-list">
            <img src="img/playlist/Playlist_Jazz.png" alt="Playlist_Jazz" class="playlist-img" />
            <p class="playlist-description">
              A playlist intended for lifetime dedicated music enthusiast
            </p>
          </div>
        </div>

        <div class="playlist-container">
          <span class="playlist-heading">Curated Playlists to Jam Into
              <span class="note">♪♪</span>
          </span>
        </div>
      </div>
    </section>

    <section class="staff-pick">
      <div class="record container grid grid--2-cols-cus1 margin-bottom-md">
        <div class="new-sticky">
          <h1 class="heading-secondary sticky-heading">Staff's Picks</h1>
        </div>

        <div class="grid grid--4-cols">
          <div class="product-staff">
            <img src="img/staff's pick/chet.jpg" alt="Chet Baker" />
            <div class="product-description">
              <p>Chet Baker Sings</p>
              <p>Chet Baker</p>
              <p>1954</p>
              <p>Jazz</p>
              <p>$50.00</p>
            </div>
          </div>
          <div class="product-staff">
            <img src="img/staff's pick/macmiller.jpg" alt="Mac Miller" />
            <div class="product-description">
              <p>Circles</p>
              <p>Mac Miller</p>
              <p>2020</p>
              <p>Hip Hop, Punk, Emo Rap</p>
              <p>$50.00</p>
            </div>
          </div>
          <div class="product-staff">
            <img src="img/staff's pick/mazzy.jpg" alt="Mazzy Star" />
            <div class="product-description">
              <p>So Tonight That I Might See</p>
              <p>Mazzy Star</p>
              <p>1993</p>
              <p>Alternative</p>
              <p>$50.00</p>
            </div>
          </div>
          <div class="product-staff">
            <img src="img/staff's pick/sade.jpg" alt="Sade adu" />
            <div class="product-description">
              <p>The Best of Sade</p>
              <p>Sade</p>
              <p>1994</p>
              <p>Jazz, Soul, R&B</p>
              <p>$50.00</p>
            </div>
          </div>
          <div class="product-staff">
            <img src="img/staff's pick/beach house.jpg.png" alt="Beach House" />
            <div class="product-description">
              <p>Depression Cherry</p>
              <p>Beach House</p>
              <p>2015</p>
              <p>Dream Pop, Indie Rock</p>
              <p>$50.00</p>
            </div>
          </div>
          <div class="product-staff">
            <img src="img/staff's pick/archy.jpg" alt="Archy Marshall" />
            <div class="product-description">
              <p>A New Place 2 Drown</p>
              <p>King Krule</p>
              <p>2015</p>
              <p>Alternative</p>
              <p>$50.00</p>
            </div>
          </div>
          <div class="product-staff">
            <img src="img/staff's pick/kingkrule.jpg.png" alt=" King Krule" />
            <div class="product-description">
              <p>6 Feet Beneath The Moon</p>
              <p>King Krule</p>
              <p>2013</p>
              <p>Alternative</p>
              <p>$50.00</p>
            </div>
          </div>
          <div class="product-staff">
            <img src="img/staff's pick/the-ooz.jpg.png" alt="King Krule - The Ooz" />
            <div class="product-description">
              <p>The Ooz</p>
              <p>King Krule</p>
              <p>2017</p>
              <p>Alternative</p>
              <p>$50.00</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  </main>

  <footer class="footer">
    <div class="logo-col">
      <a href="#" class="container-rel">
        <img src="img/footer/logo.png" alt="Groovy logo" class="footer-logo" />
      </a>
    </div>
    <div class="container grid grid--footer margin-bottom-md">
      <nav class="nav-col">
        <p class="footer-heading">Quick Links</p>
        <ul class="footer-nav">
          <li><a href="#" class="footer-link">Home</a></li>
          <li><a href="about.html" class="footer-link">About</a></li>
          <li><a href="#" class="footer-link">Stocks</a></li>
          <li><a href="#" class="footer-link">Stores</a></li>
          <li><a href="#" class="footer-link">Wishlist</a></li>
        </ul>
      </nav>

      <nav class="nav-col">
        <p class="footer-heading margin-right">Contact</p>
        <ul class="footer-nav">
          <li>
            <a href="#" class="footer-link">
              <ion-icon name="logo-whatsapp" class="social-icon"></ion-icon>
            </a>
            <a href="#" class="footer-link">(+65)22457889</a>
          </li>
          <li>
            <a href="#" class="footer-link">
              <ion-icon name="logo-instagram" class="social-icon"></ion-icon>
            </a>
            <a href="#" class="footer-link">groovy.records</a>
          </li>
          <li>
            <a href="#" class="footer-link">
              <ion-icon name="logo-facebook" class="social-icon"></ion-icon>
            </a>
            <a href="#" class="footer-link">groovy_records</a>
          </li>
          <li>
            <a href="#" class="footer-link">
              <ion-icon name="mail-outline" class="social-icon"></ion-icon>
            </a>
            <a href="#" class="footer-link">[email protected]</a>
          </li>
        </ul>
      </nav>
    </div>
    <p class="copyright">
      &copy; <span class="year">2023</span> Groovy Records. All rights reserved.
    </p>
  </footer>
  <script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
  <script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
</body>

</html>

Tags: html hyperlink

Answers

- OyinladeDemola
- February 4, 2024 at 3:18 pm
- 0 votes
0
You disabled the click when you added e.preventDefault(); to you code under link.addEventListener try removing that and you will be able to navigate

Login or Signup to reply.

- ElchinNovruzov
- February 4, 2024 at 7:30 pm
- 0 votes
0
You disabled the click when you added e.preventDefault(); to you code under link.addEventListener try removing that and you will be able to navigate

Login or Signup to reply.

Please signup or login to give your own answer.

Click here to cancel reply.