Tell us what’s happening:
I know that we are supposed to do these projects on our own but I have no idea how to get the images (the little previews of my projects) as a source code. I hope someone knows what I mean. I am grateful for any little hint I can get. Thank you:)
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Portfolio</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<!--START NAVBAR-->
<nav id="nav-bar">
<ul id="navbar">
<li id="navbar"><a class="nav-link">About</a></li>
<li id="navbar"><a class="nav-link">Work</a></li>
<li id="navbar"><a class="nav-link">Contact</a></li>
</ul>
</nav>
<!--END NAVBAR-->
<!--INTRO-->
<section id="intro" class="intro">
<h1>Hi I am Lola</h1>
<p>A newbie in the coding world</p>
</section>
<!--PROJECTS SECTION-->
<section id="projects" class="projects-section">
<h2>These are some of my projects</h2>
<div class="projects-grid">
<a href="https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-survey-form-project/build-a-survey-form" target="_blank" title="project project-title">
<img class="project-img" alt="project" src="" />
<p></p>
</a>
</div>
</section>
</body>
</html>
/* file: styles.css */
#nav-bar{
position: fixed;
top: 0;
left: 0;
width: 100%;
}
ul#navbar{
list-style-type: none;
margin: 0;
padding: 10px;
overflow: hidden;
background-color: #556B2F;
}
li#navbar{
float: left;
}
li a{
display: block;
color: white;
padding: 10px 10px;
text-decoration: none;
}
h1{
color: #556B2F;
font-size: 45px;
}
p{
color: #556B2F;
font-size: 30px;
}
#intro{
text-align: center;
padding: 50vh;
background-color: #ffe4c4;
width: 100vw;
height: 100vh;
}
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.55 Safari/537.36
Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage
Link to the challenge: