I am trying to make the second page of my Website, but some of the CSS and JS seem to not work.
I have 4 files, and 4 folders (all located in 1 same folder). The first folder is view, which contains index.html (the main page of the website), and links.html (the file that isn’t working). Then there is the js folder which contains script.js. The third folder is css and inside of it is style.css. The final folder is asset which has image assets for my Website.
Here is the content of index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Linkeld</title>
<!-- CSS Links -->
<link rel="stylesheet" href="../css/style.css">
<!-- JS Links -->
<script src="../js/script.js"></script>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body>
<div id="loader">
<span>
<i class="fas fa-spinner fa-spin"></i>
</span>
</div>
<div id="topnav" class="transparent">
<div class="wrapper main">
<div class="wrapper left" id="navLogo">
<img src="../asset/9984-confusion.png" alt="logo">
</div>
<div class="wrapper right" id="navLinks">
<a href="#" class="active">Home</a>
<a href="links.html">Links</a>
<a href="account.html">Account</a>
<a href="about.html">About</a>
</div>
</div>
</div>
<div id="head">
<div class="wrapper">
<img src="../asset/9984-confusion.png" alt="logo">
<h1>Linkeld</h1>
<h2>With over 1.000.000 links worldwide</h2>
<div id="signup">
<a href="" class="button">Sign-Up Now!</a>
</div>
</div>
</div>
<div id="main">
<div id="aboutWebsite">
<div class="wrapper">
<div class="card">
<h1><i class="fas fa-share-alt"></i> Share</h1>
<p>Share links to people across the globe to discover, the limitation is only your imagination</p>
<div class="image" id="image1">
<img src="../asset/brooke-cagle-g1Kr4Ozfoac-unsplash-removebg-preview.png" alt="image1">
</div>
</div>
<div class="card">
<h1><i class="fas fa-search"></i> Discover</h1>
<p>Discover new websites from other people via links, you can visit all of the internet's website!
</p>
<div class="image" id="image2">
<img src="../asset/grzegorz-walczak-yoIIPcrWhjI-unsplash-removebg-preview.png" alt="image2">
</div>
</div>
<div class="card">
<h1><i class="fas fa-times-circle"></i> No Restrictions</h1>
<p>No restricted links or banned sites, share whatever you like</p>
<div class="image" id="image3">
<img src="../asset/cdd20-vR6bNYTVlpo-unsplash-removebg-preview.png" alt="image3">
</div>
</div>
</div>
</div>
<div id="whySignup">
<div class="wrapper">
<div class="section">
<h1><i class="fas fa-question-circle"></i> Why Sign-Up?</h1>
<p>Firstly, you'll be able to share links with others! Not just click them.</p>
<p>Secondly, you can like and save links to your account, so you can view at them later.</p>
<p>Thirdly, you'll be able to customize your Username! No more plain old nicknames.</p>
</div>
<div class="section">
<img src="../asset/sincerely-media-4dSXcNTyXaI-unsplash.jpg" alt="image4">
</div>
</div>
</div>
<div id="phishing">
<div class="wrapper">
<div class="section">
<h1><i class="fas fa-question-circle"></i> Would i fall to phishing?</h1>
<p>Well technically, yes, you will at some point fall into a phishing scam.</p>
<p>But, you can check the domain first, before clicking the link.</p>
<p>Check for any typos, or weird characters. A site that has a suspicious looking domain may be a
phishing website so be careful.</p>
</div>
<div class="section">
<img src="../asset/sincerely-media-4dSXcNTyXaI-unsplash.jpg" alt="image4">
</div>
</div>
</div>
<div id="nfsw">
<div class="wrapper">
<div class="section">
<h1><i class="fas fa-question-circle"></i> Can I post NFSW related stuff?</h1>
<p>There is no limitation to what website you want to share here.</p>
<p>So yes you absolutely can post NFSW related content here and not get banned.</p>
</div>
<div class="section">
<img src="../asset/sincerely-media-4dSXcNTyXaI-unsplash.jpg" alt="image4">
</div>
</div>
</div>
<div id="signupCall">
<div class="wrapper">
<div class="section">
<h1>What are you waiting for?</h1>
</div>
<div class="section">
<div>
<a class="button" href="">Sign-Up Now!</a>
</div>
</div>
</div>
</div>
</div>
<div id="foot">
<div class="wrapper">
<div class="section">
<h2>Other resources</h2>
<a href="">Home</a>
<a href="">Copyright</a>
<a href="">Terms</a>
<a href="">Policy</a>
<a href="">Sources</a>
</div>
<div class="section">
<h2>About us</h2>
<a href="">Team</a>
<a href="">About</a>
<a href="">Site Stats</a>
</div>
</div>
</div>
</body>
</html>And here is links.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Linkeld</title>
<!-- CSS Links -->
<link rel="stylesheet" href="../css/style.css">
<!-- JS Links -->
<script src="../js/script.js"></script>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body>
<div id="loader">
<span>
<i class="fas fa-spinner fa-spin"></i>
</span>
</div>
<div id="topnav" class="transparent">
<div class="wrapper main">
<div class="wrapper left" id="navLogo">
<img src="../asset/9984-confusion.png" alt="logo">
</div>
<div class="wrapper right" id="navLinks">
<a href="index.html" class="active">Home</a>
<a href="#">Links</a>
<a href="account.html">Account</a>
<a href="about.html">About</a>
</div>
</div>
</div>
<div id="head">
<div class="wrapper">
<img src="../asset/9984-confusion.png" alt="logo">
<h1>Links</h1>
<h2 style="margin-bottom: 100px;">This is where you'll find links to Websites!</h2>
</div>
</div>
<div id="main">
<div id="linksList">
<div class="wrapper">
<div class="card">
<h3>By [user]</h3>
<a href="[user-input-link]">[user input]</a>
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
<a href="[user-input-link]">[user input]</a>
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
<a href="[user-input-link]">[user input]</a>
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
<a href="[user-input-link]">[user input]</a>
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
<a href="[user-input-link]">[user input]</a>
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
<a href="[user-input-link]">[user input]</a>
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
<a href="[user-input-link]">[user input]</a>
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
<a href="[user-input-link]">[user input]</a>
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
<a href="[user-input-link]">[user input]</a>
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
<a href="[user-input-link]">[user input]</a>
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
<a href="[user-input-link]">[user input]</a>
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
<a href="[user-input-link]">[user input]</a>
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
<a href="[user-input-link]">[user input]</a>
<div class="description">
<p>[user input]</p>
</div>
</div>
<div class="card">
<h3>By [user]</h3>
<a href="[user-input-link]">[user input]</a>
<div class="description">
<p>[user input]</p>
</div>
</div>
</div>
</div>
</div>
<div id="foot">
<div class="wrapper">
<div class="section">
<h2>Other resources</h2>
<a href="">Home</a>
<a href="">Copyright</a>
<a href="">Terms</a>
<a href="">Policy</a>
<a href="">Sources</a>
</div>
<div class="section">
<h2>About us</h2>
<a href="">Team</a>
<a href="">About</a>
<a href="">Site Stats</a>
</div>
</div>
</div>
</body>
</html>Now for the CSS (style.css) :
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
* {
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: 'Roboto', sans-serif;
}
:root {
/* CSS HEX */
--lime-green: #1ec90eff;
--metallic-sunburst: #9b7e46ff;
--mellow-apricot: #f4b266ff;
--dark-liver-horses: #544343ff;
}
html {
scroll-behavior: smooth;
}
a {
color: var(--lime-green);
text-decoration: none;
transition: text-decoration 0.3s ease-in-out;
}
a:hover {
text-decoration: underline;
}
a:visited {
color: var(--lime-green);
}
#topnav {
position: fixed;
width: 100%;
z-index: 99;
background: white;
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
transition: all 0.2s ease-in-out;
}
#topnav.transparent {
background: transparent;
box-shadow: none;
}
#topnav .wrapper.main {
display: flex;
justify-content: stretch;
}
#topnav .wrapper {
display: flex;
}
#topnav .wrapper#navLogo {
width: 70%;
}
#topnav .wrapper#navLogo img {
padding: 10px;
width: 60px;
margin-left: 40px;
}
#topnav .wrapper#navLinks {
flex: 1;
justify-content: space-evenly;
}
#topnav.transparent .wrapper#navLinks a {
padding: 20px;
text-decoration: none;
color: white;
text-align: center;
transition: all 0.2s ease-in-out;
}
#topnav .wrapper#navLinks a {
color: black;
padding: 20px;
text-decoration: none;
text-align: center;
transition: all 0.2s ease-in-out;
}
#head {
background: url("../asset/sincerely-media-4dSXcNTyXaI-unsplash.jpg");
margin-bottom: 30px;
}
#head .wrapper {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
#head .wrapper h1,
#head .wrapper h2 {
color: white;
}
#head .wrapper img {
width: 40px;
margin: 100px 0 20px 0;
}
#head .wrapper h1 {
font-size: 90px;
}
#head .wrapper h2 {
font-size: 18px;
}
#head #signup {
margin: 80px 0 100px 0;
}
#head #signup a {
color: white;
padding: 20px;
background: var(--mellow-apricot);
border-radius: 10px;
transition: all 0.3s ease-in-out;
display: block;
}
#head #signup a:hover {
text-decoration: none;
transform: scale(1.1);
}
#aboutWebsite .wrapper {
display: flex;
flex-direction: row;
justify-content: center;
}
#aboutWebsite .wrapper .card {
width: 400px;
margin: 20px;
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
padding: 80px 60px;
}
#aboutWebsite .wrapper .card h1 {
font-size: 40px;
margin-bottom: 20px;
font-weight: 300;
}
#aboutWebsite .wrapper .card p {
font-size: 18px;
}
#aboutWebsite .wrapper .card .image {
display: flex;
justify-content: center;
}
#aboutWebsite .wrapper .card .image img {
width: 300px;
}
#aboutWebsite .wrapper .card .image#image1,
#aboutWebsite .wrapper .card .image#image2 {
margin-top: 130px;
}
#foot {
margin-top: 50px;
background: rgb(235, 235, 235);
}
#foot .wrapper {
display: flex;
}
#foot .wrapper .section {
flex: 1;
padding: 50px 30px;
}
#foot .wrapper .section a {
display: block;
color: black;
margin-bottom: 30px;
width: max-content;
}
#foot .wrapper .section h2 {
margin-bottom: 30px;
}
#loader {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
background: white;
z-index: 999;
}
#loader.loaded {
display: none;
}
#loader span {
font-size: 100px;
}
a.button {
color: white;
padding: 20px;
background: var(--mellow-apricot);
border-radius: 10px;
transition: all 0.3s ease-in-out;
display: block;
}
a.button:hover {
text-decoration: none;
transform: scale(1.1);
}
#whySignup {
width: 65%;
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
margin: 50px auto;
border-radius: 20px;
}
#whySignup .wrapper {
display: flex;
justify-content: start;
transition: all 0.5s ease-in-out;
}
#whySignup .wrapper .section:first-child {
padding: 50px 20px;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
#whySignup .wrapper .section:first-child h1 {
font-weight: 300;
margin-bottom: 40px;
}
#whySignup .wrapper .section:first-child p {
font-size: 18px;
margin-bottom: 10px;
}
#whySignup .wrapper .section img {
width: 450px;
height: 500px;
}
#phishing {
width: 65%;
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
margin: 50px auto;
border-radius: 20px;
}
#phishing .wrapper {
display: flex;
justify-content: start;
flex-direction: row-reverse;
transition: all 0.5s ease-in-out;
}
#phishing .wrapper .section:first-child {
padding: 50px 20px;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
#phishing .wrapper .section:first-child h1 {
font-weight: 300;
margin-bottom: 40px;
}
#phishing .wrapper .section:first-child p {
font-size: 18px;
margin-bottom: 10px;
}
#phishing .wrapper .section img {
width: 450px;
height: 500px;
}
#nfsw {
width: 65%;
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
margin: 50px auto;
border-radius: 20px;
}
#nfsw .wrapper {
display: flex;
justify-content: start;
transition: all 0.5s ease-in-out;
}
#nfsw .wrapper .section:first-child {
padding: 50px 20px;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
#nfsw .wrapper .section:first-child h1 {
font-weight: 300;
margin-bottom: 40px;
}
#nfsw .wrapper .section:first-child p {
font-size: 18px;
margin-bottom: 10px;
}
#nfsw .wrapper .section img {
width: 450px;
height: 500px;
}
#signupCall {
width: 65%;
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
margin: 50px auto;
border-radius: 20px;
}
#signupCall .wrapper {
display: flex;
flex-direction: column;
transition: all 0.5s ease-in-out;
}
#signupCall .wrapper .section:first-child {
padding: 50px 20px;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
background: transparent;
}
#signupCall .wrapper .section:first-child h1 {
font-weight: 300;
margin-bottom: 40px;
font-size: 50px;
}
#signupCall .wrapper .section:first-child h2 {
font-size: 20px;
margin-bottom: 10px;
}
#signupCall .wrapper .section {
background: url("../asset/sincerely-media-4dSXcNTyXaI-unsplash.jpg");
background-position: -45%;
padding: 50px 20px;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
height: 300px;
}
#linksList {
padding: 50px;
}
#linksList .wrapper {
display: flex;
}
#linksList .wrapper .cards {
padding: 30px;
box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
width: 120px;
margin: 30px;
background: cyan;
}Here’s script.js :
window.addEventListener("load", () => {
const loader = document.getElementById("loader");
loader.classList.add("loaded");
})
window.addEventListener("scroll", () => {
let scrollY = window.scrollY;
let posY = 450;
let topnav = document.getElementById("topnav");
if (scrollY < posY) {
topnav.classList.add("transparent");
} else {
topnav.classList.remove("transparent");
}
});Now the problem is that #linksList doesn’t seem to change even though I’ve written the CSS in style.css. What’s wrong about it? I can’t seem to find anything that could’ve conflicted with the CSS. I even gave the .card in #linksList a cyan background to test if it works, but to no result.
Then there’s the #topnav, the JS won’t add the class .transparent when the user scrolled to the #topnav in links.html until the browser’s screen was resized (I’m using Chrome). I have no actual clue about what is going on here. Maybe it’s just my browser acting weird or is it because I made some kind of mistake in the scripting?
(sorry for the long question)