Working on my own prorfolio

HTML-CSS
1

i been making websites as practice with vs code and github desktop and using github pages. and i was wondering how i can get the website thumbnail and put as a img

1 Like
2

for context this is the html css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Portfolio</title>
    <link rel="stylesheet" href="style.css" />
    <script src="https://kit.fontawesome.com/f6bfa81d64.js" crossorigin="anonymous"></script>
</head>
<body>
    <nav id="navbar" class="navbar">
 <ol>
    <li><a href="#about-me">about me</a></li>
    <li><a href="#Projects">My Projects</a></li>
    <li><a href="#Contacts">contact me</a></li>
 </ol>
    </nav>
    <section id="content">
    <section id="about-me">
    <h1 id="intro">Hello I'm Gavin Escanilla</h1>
 <p id="role">and I am a front-end engineer!</p>
    </section>
    <section id="Projects">
        <h1 id="project-title">Here are some of my projects</h1>
        <div id="project-container">
 <button id="left-arrow" class="button"><i class="fa-solid fa-arrow-left"></i></button>
 <a  id="project-link" href="https://gavinescanilla.github.io/My-Socials/"><img src="https://gavinescanilla.github.io/My-Socials/image" alt="web"></a>
 <button id="right-arrow" class="button"><i class="fa-solid fa-arrow-right"></i></button>
</div>
    </section>
    <section id="Contacts">
hello
    </section>
</section>
    <script src="script.js"></script>
</body>
</html>

body{
    margin:0;
    padding: 0;
    background-color: pink;
}
#navbar{
    background-color: blueviolet;
     height: 10vh;
     width: 100%;
     position: fixed;
     top:0;
     z-index: 9999;
}
ol{
    display: flex;
    height: 100%;
    flex-direction: row;
    justify-content: space-evenly;
    text-align: center;
    list-style-type: none;
    margin: 0;
}
li{
    display: flex;
    align-items: center;
}
li a{
    text-decoration: none;
    font-size: 30px;
}
#content{
    background-color: blue;
}
#about-me{
    background-color: teal;
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%;
    justify-content: center;
    text-align: center;
}
#intro{
    font-size: 50px;
    color: aquamarine;
    margin: 0%;
}
#role{
    color: red;
    font-size: 30px;
    margin-top: 10;
}
#Projects{
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%;
    background-color: purple;
    justify-content: center;
    align-items: center;
    margin:0;
}
#project-title{
    font-size: 40px;
    margin-top: 20vh;
}
#project-container{
    display: flex;
    flex-direction: row;
    width: 100vw;
    height: 100vh;
    justify-content: space-evenly;
    align-items: center;
}
.button{
    color: black;
    width: 5%;
    height: 10%;
    margin: 0;
    padding: 0;
    background-color: transparent;
    border: none;
}
.fa-arrow-left{
    font-size: 70px;
}
#project-link{
    border: 1px solid red;
    height: 400px;
    width: 600px;
}
.fa-arrow-right{
    font-size: 70px;
}

and this one my website im using as testing but i cant figure to get the thumbnail of it for example if i wanna put the google link the img should show the google search screen

3

Hello there!

I’m not quite sure what you’re asking, but let me know if I understood you correctly: you would like to have an image of a website be a link to that website, correct? In other words, in the case of adding a link to the Google Search page, you would like an image of the Google search page as a link for users to click on to get to Google Search page. Correct me if I’m mistaken in your request.

This seems relatively simple. In the case of the Google Search page, all you need to do is take a screenshot of the Google Search page, host it (either by putting it in an assets folder in your website’s Github repository or by uploading it to an image hosting site like https://imgbb.com), and then adding it to your webpage by creating an img element with the proper url in the src attribute. Then enclose that entire img in a pair of anchor tags with the href attribute set to the url of the Google Search page. Style the width and height of the img in your CSS for sizing if necessary. Classic HTML and CSS.

Here’s a Codepen with the Google Search example:

What did I do here?

  • I created a container for the img and anchor element for ease of styling with the class of .thumbnail-container .
  • Inside it I added a pair of anchor tags with these attributes: href="https://www.google.com/" and target="_blank" . The target attribute set to blank ensures the link opens on a new tab when the user clicks on it. You can change this if you like.
  • Then, of course, inside the anchor tags I added the thumbnail image. I chose an arbitrary image of the Google Search Page off of Google but I would recommend a screenshot in your case.
  • As for styling, I added a few things: responsive width (but not height to preserve aspect ratio!), a margin, making sure the img has 100% of the container’s width and a hover effect.

I hope this helps. Let me know if I understood you correctly.

4

Something like that but when I did the portfolio project I did some projects on codepen then put it on the portfolio project and they way I got its thumbnail was did videos link/image/small.png. But since I’m making a new one I’m hosting with GitHub pages instead of codepen

5

Aha, so it’s a hosting question? You’re not sure how to add the images to the GitHub repo? It’s not hard, no worries. And let me know if I’m getting you right.

Keep in mind that I am yet to host a website in GitHub myself.

It’s really all about creating folders and file paths. Create a folder in your GitHub repo for your website. Call it “Assets”. Inside that folder you can put media like icons, images, videos etc.

Of course these need to be sorted neatly too, so create folders for each of these categories inside you Assets folder: “Images” is the only you might need to create for now.

Next, take screenshots of your projects you’d like to link to, and turn them into links as I showed in the pen above.

What do you put in the src attribute of these images is what you’re asking, right? Well, in this case it would go along with the principle of HTML file paths: (name-of-your-website)/assets/images/(name-of-image). Of course replace the text in brackets with the appropriate names.

This can get more complicated, depending on how you arrange your website’s files and folders, but if you keep it simple it should work simply. Here’s an article to help you understand HTML file paths better:

If you’re not quite sure how the process of hosting a site on Github works, here’s a simple article for that too:

Hope that helped a bit!

6

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