How do i get the images in my portfolio

HTML-CSS
1

Tell us what’s happening:
I made projects ofcourse, ( the previous of the list from codecamp)
but i dont know how to put those in my portfolio now. Because i need an image link and i dont know how to get that

Your code so far

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

<nav id="navbar">
<a href="#about">About</a>
<a href="#projects">Projects</a>
<a href="#socials">Socials</a>
</nav>

<header id="about">
  <h1>Hello! </h1>
  <p>My Name is Niek Batenburg</p>
  <p>and I am a Web Developer</p>
</header>

<section id="projects">
  <h2>Projects</h2>
 <div class="project">
   <img src="" alt="">
   <p>Survey Form</p>
 </div>
 <div class="project">
   <img src="" alt="">
   <p></p>
 </div>
 <div class="project">
   <img src="" alt="">
   <p></p>
 </div>
 <div class="project">
   <img src="" alt="">
   <p></p>
 </div>
 <div class="project">
   <img src="" alt="">
   <p></p>
 </div>
 <div class="project">
   <img src="" alt="">
   <p></p>
 </div>
</section>

<section id="social" class="bg-pinkish">
  <h2>Social Media</h2>
  <p>You can find me on</p>
  <ul class="social-ul">
    <li><a href="https://twitter.com/Niekbaas" target="_blank"><i class="fab fa-twitter"></i></a></li>
    <li><a href="https://www.youtube.com/channel/UCw_wlqGKgOpPn8xYQUzTArw/featured?view_as=subscriber" target="_blank"><i class="fab fa-youtube"></i></a></li>
    <li><a href="https://www.instagram.com/_niekbatenburg/" target="_blank"><i class="fab fa-instagram"></i></a></li>
    <li><a href="https://github.com/Nqek" target="_blank"><i class="fab fa-github"></i></a></li>
    <li><a href="https://codepen.io/Nqek" target="_blank"><i class="fab fa-codepen"></i></a></li>
  </ul>
  
  
</section>

<footer>Made by Niek</footer>

@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');

* { 
  box-sizing: border-box;
}
body { 
  background-color: #FCF0CC; 
  font-family: 'Lato', sans-serif;
  margin: 0;
}
nav { 
  background-color: #861657;
  color: fff;
  display: flex;
  padding: 15px;
  justify-content: flex-end;
}
nav a { 
  color: #fff;
  margin-left: 20px;
  text-decoration: none;
}

header { 
  background-image: url('https://images.unsplash.com/photo-1498050108023-c5249f4df085?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1052&q=80');
  background-size: cover;
  background-position: center center;
  color: #fff; 
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100vh;
  position: relative;
}

header::after { 
  content: '';
  background-color: #000;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.8;
}

header * { 
  position: relative;
  z-index: 1;
}

header h1 { 
  font-size: 60px;
  margin-bottom: 5px;
  margin-top: 0;
}

header p { 
  font-size: 30px;
  margin: 0;

}

section h2{
  margin: 0;
}
section p { 
  margin-top: 0;
}

section{ 
  padding: 40px;
  text-align: center;
}

.bg-pinkish { 
  background-color: #A64253;
  color: #fff;
}

.social-ul {
  display: flex;
  justify-content: center;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.social-ul a {
  color: #fff;
  font-size: 30px;
  margin: 0 10px;
}
footer { 
  background-color: #861657;
  color: #fff;
  padding: 10px;
  text-align: center;
}```


**Your browser information:**

User Agent is: <code>Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.75 Safari/537.36</code>.

**Challenge:** Build a Personal Portfolio Webpage

**Link to the challenge:**
https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage
2

Link to my codepen: https://codepen.io/Nqek/pen/jOrqJea?editors=1000

3

Hey @Nqek. If you want to get a live link for your images, you need to host it. If you have a PRO CodePen account, you can use their “Asset Hosting” option. If you don’t, follow these instructions:

  • Go to Google Photos and upload your images
  • Select your image and click on the share icon at the top.
  • Click on the create link at the bottom of the popup that appears
  • Click on the create link again
  • Copy the link and go to https://www.labnol.org/embed/google/photos/
  • Paste your link and click on Generate
  • Now copy either the link that appears or the HTML code that appears.
  • Paste your code or link in CodePen

You can use any other image hosting services also, but make sure they support web embedding.

Happy Coding!

2 Likes
4

Hi @Nqek,

  • Codepen creates large and small screen shots of your pens that can be used in your portfolio. Access them from;
    https://codepen.io/userName/pen/slug/image/large.png (for the large screenshot)
    or
    https://codepen.io/userName/pen/slug/image/small.png (for the small screenshot)
    • where you replace userName with your codepen userId and slug with the id of one of your codepen pens and then copy that link into your portfolio
1 Like