HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website Portfolio</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header id="top-bar">
<h1>KARLA NOREN PORTFOLIO</h1>
<nav id="nav">
<ul>
<li><a href="#projects">Projects</a></li>
<li><a href="#about-me">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main class="main">
<fieldset class="fieldset">
<h2 id="projects">PROJECTS</h2>
<!-- Let's normalise real sex -->
<div id="porn-industry" class="porn-industry">
<img href="" ><a href=""></a>
</div>
<!-- A letter from the future -->
<div id="speculative-design" class="speculative-design">
</div>
</fieldset>
<fieldset class="fieldset">
<h2 id="about-me"> ABOUT ME </h2>
<img src="">
<p id="about-me">Hello! I am a wine loving, enthusiastic and lively second-year Graphic Design student at Arts University Bournemouth with a passion for visual communication and a drive for creative problem-solving.
I enjoy group activities and value social interaction, originality and focus on hidden meanings and distant possibilities.
I am always eager to improve my current graphic design skills and learn new technologies and trends in design that focus on creating compelling and thought-provoking designs that help brands stand out and improve the audience's experience, as I like finding solutions to important social issues through the process of identifying the context and needs of the people in order to create a more sustainable, ethical and multicultural environment.
Although I should be busy enough with an ongoing degree, I always feel the need to keep myself busy with more projects! Some at the moment include being a Student Ambassador at AUB, Head Editor of BUMF magazine, and my first comic series ‘How to: Devil’.
Being involved with the community is important to me which is why I am currently working with
<p>
</fieldset>
<!-- contact me -->
<fieldset class="fieldset">
<h2 id="contact">CONTACT</h2>
<div class="Email">
<p> Email: karlanoren@gmail.com
</div>
</form>
</div>
</fieldset>
</main>
</body>
</html>
CSS code:
@media (prefers-reduced-motion: no-preference) {
* {
scroll-behavior: smooth;
}
}
body {
background: #0A0A0A;
color: #dfdfe2;
font-family: Helvetica;
margin: 0;
header {
width: 100%;
height: 50px;
background-color: #0A0A0A;
display: flex;
justify-content: space-between;
align-items: center;
position: fixed;
top: 0;
}
nav {
width: 50%;
max-width: 300px;
height: 50px;
}
nav > ul {
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
align-items: center;
padding-inline-start: 0;
margin-block: 0;
height: 100%;
}
nav > ul > li:hover {
background-color: #dfdfe2;
color: #1b1b32;
cursor: pointer;
text-decoration: none;
}
li > a {
color: inherit;
text-decoration: none;
}
.fieldset {
border: none;
}
.main {
padding-top: 50px;
background-color: #0A0A0A;
}
h1 {
font-family: montsereatt;
font-size: 28px;
color: #dfdfe2;
}
p {
color: #fcf2d8;
}
h2 {
font-family: Anton;
margin-top: 0px;
padding-top: 60px;
}
I still want the links to my nav to be linked to the fieldsets, but want them to flow a bit smoother, I had it before but I’ve screwed it up lol.
I don’t see what I have done wrong, so some help will be greatly appreciated!