Tell us what’s happening:
Hi, When I change the size of the browser sometimes the scroll function on my preview page stops working. Am I doing something wrong in my code or is this a browser issue?
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" />
<link rel="stylesheet" href="./styles.css" />
<title>My Portfolio</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<nav id="navbar" class="nav">
<ul class="nav-list">
<li><a href="#welcome-section">About</a></li>
<li><a href="#projects">Work</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<section id = "welcome-section" class="welcome-section">
<h1>Hi! I'm Mika</h1>
<p class="sub-title">A web developer</p>
</section>
<section id="projects" class="projects">
<h2 class="project-section-title">These are some of my projects</h2>
<div class="project-grid">
<a href="https://codepen.io/freeCodeCamp/full/wGqEga" target="_blank" class="project-tile"></a>
<div class="project-tile"></div>
<div class="project-tile"></div>
<div class="project-tile"></div>
<div class="project-tile"></div>
</div>
</section>
</body>
</html>
/* file: styles.css */
*{
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: 'Anton', sans-serif;
}
html{
font-size: 62.5%;
scroll-behavior: smooth;
}
a{
text-decoration: none;
color: inherit;
}
ul{
list-style: none;
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
align-items: center;
min-height: 100%;
}
#navbar{
position: fixed;
top: 0%;
right: 0%;
display: flex;
justify-content: right;
font-size: 2rem;
height: 50px;
background-color: #fbc6d0;
}
li {
margin: 0 0.2rem;
padding: 0.2rem;
display: block;
color: #ee0979;
}
.welcome-section{
width: 100%;
min-height: 40vh;
background-color: #fbc6d0;
padding: 100px;
justify-items: center;
align-items: center;
}
h1,h2{
font-size: 4rem;
background: linear-gradient(to right, #ff6a00, #ee0979); /* Gradient colors */
-webkit-background-clip: text; /* Clips the background to the text */
-webkit-text-fill-color: transparent; /* Makes text transparent */;
}
.sub-title{
font-family: 'Anton', sans-serif;
font-size: 2rem;
color: #ee0979;
}
.project-section-title{
display: block;
margin-left: 10px;
text-align: center;
font-size: 3rem;
}
.projects{
background-color: #c2d1e5;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
max-width: 1400px;
margin: 0 auto;
padding: 20px 10px;
}
.project-tile{
width: 500px;
height: 300px;
margin: 10px;
background-color:#ee0979;
}
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36
Challenge Information:
Personal Portfolio Webpage - Build a Personal Portfolio Webpage