Personal portfolio project inquiry

HTML-CSS
1

i have finished my project on “personal-portfolio” but my projects link i added inside my portfolio is just showing the text link i used inside the anchor element instead of showing the background image of the project, please someone should help me and explain how to set it to display the project instead of text.

Here is my code;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  
  <style>
  
    #welcome-section {text-align: center;
                      color: #00ffff;
                      background: #330019;
                      padding-top: 0px;
                      font-size: 25px;
                      font-family: cursive;
                       border-radius: 20px;
                         
                        margin-top: 0px;
                         display: block;
                        height: 100vh;}
    
    #header {position: fixed;
             top: 0;
             left: 0;
             width: 100%;
             background: #330000;
             display: flex;
             justify-content: center;
             flex-direction: row;}
    
    #projects {position: relative;
              display: inline-block;
             margin: opx;
              padding: 16px 20px;}
    
    #nav-link2 {display: flex;
                float: left;
               margin: 0 30px;}
               
   
    @media screen and (max-width:480px) {body
                             text-align: center;}
  </style>
  
</head>

  <body>
    
    <header id="header">
    <nav id="navbar">
        <a href="#projects">project section</a>
      <a id="nav-link2" href="#welcome-section">welcome-section</a> 
    </nav>
    </header>
      
  <section id="welcome-section">
    
    <h1>Hello I Am<br><u>ANTHONY</u><br> A Web - Developer</h1>
  </section>
    
    <section id="projects">
      <header class="project-tile"><u><strong>These are some of my projects</strong></u></header>
      <div id="div-link">
      <a id="profile-link" href="https://codepen.io/cullkid/pen/mdXVzzb" target="_blank">check my project here</a><br>
      <a id="profile-link-2" href="https://codepen.io/cullkid/pen/mdXdPRm" target="_black">check my project here</a><br>
      <a id="profile-link-3" href="https://codepen.io/cullkid/pen/MWQWpPG" target="_blank">check my project here</a>
      </div>
    </section>
    
    
</body>
</html>
2

Please don’t ping someone specific when you are creating a post. Many people will check the topic to see if they can’t help.

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

3

I don’t see any code that would add a background image - what are you trying to do?

4

thank you, correction noted.

i look forward to get help publicly

5

i am defending my project of personal portfolio, but from the example of the project in freecodecamp display a photos of other projects, and when you click the display it will take you to the project website while mine is showing only anchor text instead of displaying the images i used on my former project which i added insid the portfolio

6

this is the code i used to add my projects inside my portfolio but it doesn’t display the project’s page rather a text anchor.

I don’t know if you understand what i meant now @ilenia

7

you have not added any image, that’s why there is no image

8

but i have added the project link inside the portfolio code.
do i have to add image of the project? because the project doesn’t have an image only url link

9

Yeah, an anchor tag shows only whats between the anchors … for instance:

<a href="http://wwwgoogle.com"> This is google </a> results in:

This is google

If you want a image, you have to put an image between the anchor tags:

<a href="..."> <img src="..."> </a>

So the question becomes… where do you get an image for your projects.

10

thanks for the explanation, but where and how do i get the image of my project?

12

I’m not sure if there is a more clever answer…I mean I played with iframe, but that creates an interactive window inside your site which didn’t work out well… kinda wish someone would respond with like a super-clever page sample snapshot link idea…

but for just a simple image, basically you can use windows snipping tool or printscreen to create an image of your page. Step 2 would be you need to put that image somewhere publicly accessible. I happened to have a webhost already so stored it there… if you have a github account, I think you can link images from there but not 100% sure. Heck, I think you could even store it on your facebook profile, then right click the image and select open image in new tab, and the URL to link the image would be at the top, I think I’ve done that before to link images. Once you find a place, store your image there. Then on your profile page, in the anchor tag create an image with a src pointing to where you saved the image.

13

If you want images of your projects, codepen has a guide on how to guide screenshots of your previous projects.

1 Like
14

And there is the more clever answer we were all looking for :slight_smile:

15

The project doesn’t enforce that we use actual projects so i just used a random image from website that allows access to free and open source images.
I created a fake portfolio site instead with fake projects and project images.

16

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.