Tell us what’s happening:
Hello everyone,
the example portfolio from freecodecamp https://personal-portfolio.freecodecamp.rocks/. If I visit the site and press on “About”, it doesnt move. But if I press on my own portfolio on “Welcome”, it moves. how can I fix that? it shouldnt move if nothing was clicked before. I want to be in the same view as I would visit the site for the first time, if I click on “Welcome” on my own portfolio.
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Arams Portfolio</title>
<link rel="stylesheet" href="./styles.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Dosis:wght@700&display=swap" rel="stylesheet">
</head>
<body>
<nav id="navbar">
<ul>
<li><a href="#welcome-section">Welcome</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<main class="sections">
<section id="welcome-section">
<h1>Hey I am Aram</h1>
<p>a web developer</p>
</section>
<section id="projects">
<h2 class="project-title">These are some of my projects</h2>
<div class="images-pro">
<img src="https://i.ibb.co/2NssqwD/Product-page.png" alt="a picture of the product page">
<img src="https://i.ibb.co/2NssqwD/Product-page.png" alt="a picture of the product page">
</div>
</section>
<section id="contact">
<h2>Contact</h2>
</section>
<footer></footer>
</main>
</body>
</html>
/* file: styles.css */
:root {
--text: rgb(65, 65, 65);
--navbar: rgb(217, 255, 0);
--background: rgb(65, 65, 65);
}
* {
margin: 0;
padding: 0;
}
body {
/*background-color: var(--background);*/
background: linear-gradient(220deg, var(--text) 40%, rgb(126, 134, 94));
width: 100%;
}
#navbar {
width: 100%;
height: auto;
background: linear-gradient(120deg, var(--navbar) 70%, var(--text));
border-bottom: 2px solid rgba(0, 0, 0, 0.192);
position: fixed;
}
#navbar ul {
display: flex;
justify-content: center;
align-items: center;
}
#navbar ul li {
margin: 1rem 2rem;
list-style: none;
font-family: Arial, Helvetica, sans-serif
}
#navbar ul li a:hover {
background-color: rgba(0, 0, 0, 0.192);
height: 100%;
}
#navbar ul li a {
text-decoration: none;
color: var(--text);
padding: 17px;
}
.sections {
display: flex;
flex-direction: column;
}
#welcome-section {
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: linear-gradient(340deg, var(--text) 40%, rgb(126, 134, 94) 120%);
}
#welcome-section h1 {
font-family: 'Dosis', sans-serif;
font-size: 3em;
background: -webkit-linear-gradient(220deg, #fff, rgb(126, 134, 94));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
#welcome-section p {
font-family: 'Dosis', sans-serif;
color: var(--navbar);
font-size: 20px;
}
#projects {
background-color: rgb(65, 65, 65);
width: 100%;
height: 100vh;
}
#projects h2 {
text-align: center;
margin-top: 4rem;
}
#projects img {
width: 100%;
max-width: 300px;
height: auto;
}
#projects h2 {
font-size: 2em;
color: white;
font-family: 'Dosis', sans-serif;
background: -webkit-linear-gradient(220deg, #fff, rgb(126, 134, 94));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.images-pro {
display: flex;
justify-content: center;
align-items: center;
}
.images-pro img {
margin: 20% 20px;
border: 2px solid black;
border-radius: 0 0 10px 10px;
}
#contact {
background-color: aqua;
width: 100%;
height: 100vh;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36
Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage
Link to the challenge: