Personal Portfolio Webpage - Build a Personal Portfolio Webpage

HTML-CSS
1

Hi. I have copied my code for a FCCamp project over to CodePen so that I can include a link to it in my Portfolio page. However, to make that link appear as an image, I want to include an img element as the content in the anchor element that links to the project.
Is there a ‘nice’ way to do this on CodePen, or is it necessary to make my own image file and find an image-hosting website and then provide the link to that image as the src for the img element?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="author" content="Peter Hawes" />
<meta name="description" content="Personal Portfolio Page"/>
<title>Peter Hawes Web Development Projects</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="styles.css"/>
</head>
<body>
<section id="welcome-section">
<nav id="navbar">
  <div class="navdiv"><a class="navlink" href="#welcome-section">About</a></div>
  <div class="navdiv"><a class="navlink" href="#projects">Work</a></div>
  <div class="navdiv"><a class="navlink" href="#contacts">Contact</a></div>
</nav>
<div class="centertext">
<h1 class="nametext">Peter Hawes</h1>
<p class="subtext">Hoping to suck a little less with each project.</p>
</div>
</section>
<section id="projects">
<div class="project-tile"></div>
<p>Technical Documentation Page</p>
<a id="techdocpage" href="https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-technical-documentation-page-project/build-a-technical-documentation-page"><img src="imageurlhere" alt="Technical Documentation Page"/></a>
<div class="project-tile">
<a class="techlink" href="https://codepen.io/MKMathsMan/pen/XWYyPxd"><img src="linktoTechDocProject" alt="LinkHereToTechnicalDocumentationProject"/></a>
</div>
<a id="profile-link" href="https://www.freecodecamp.org/MKMathsMan22" target="_blank">Show All &gt</a>
</section>
<section id="contacts"></section>



</body>
</html>

/* file: styles.css */
* {
  margin: 0;
  padding: 0;
}
#welcome-section {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.centertext {
  align-self: center;
  margin-top: 50vh;
  border: 5px solid transparent;
  text-align: center;
  background-color: transparent;
  font-family: "Helvetica", sans-serif;
}
.nametext
{
 font-style: bold;
 font-size: 40px;
}
.subtext
{
  font-size: 20px;
}




nav {
  border: 2px solid black;
  position: fixed;
  top: 0;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  background-color: grey;
}
.navdiv {
  padding: 10px;
  background-color: yellow;
}
body {
  background: linear-gradient(
    90deg, rgb(200,150,100), rgb(100,150,140))
  ;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36

Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Link to the challenge:

3

You can use the thumbnail from the Codepen preview.

https://shots.codepen.io/yourUsername/pen/thePenId-512.webp

Or just right-click the preview and grab the image link from inside the div with the data-picture attribute.

You can also embed the pens

1 Like