Personal Portfolio Webpage - Build a Personal Portfolio Webpage

This is my final html project, and there’s still many things I don’t know how to do for this project, in the projects section I need to make it so when the cursor hovers over them a small animation comes up like the one in the preview (https://personal-portfolio.freecodecamp.rocks/) and in the footer I don’t know how to implement the contacts logo for facebook-twitter-github and I don’t know how to add a mail and number contact option. Can someone help solve these issues one problem at a time?

This is my code:

<!DOCTYPE lang>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, inital-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>My Last HTML Project</title>
  </head>
  <main>
    <nav id="nav-bar">
        <ul>
            <a class="nav-link" href="#welcome-section">About</a>
            <a class="nav-link" href="#projects">Work</a>
            <a class="nav-link" href="#footer">Contact</a>
        </ul>
    </nav>
    <section id="welcome-section">
      <h1 class="name">Hey I am Ghady</h1>
      <p class="name-quote">a web developer</p>
    </section>



    <section id="projects">
      <h2>These are  some of projects</h2>
      <div class="hr-div">
        <hr></hr>
      </div>
      <div class="grid-center">
      <div class="projects">
        <a rel="tribute page" href="https://codepen.io/freeCodeCamp/full/zNqgVx" class="imported-projects"><img id="img" class="imported-pictures" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute.jpg"><p class="caption">Tribute page</p></a>
        <a rel="random quote of the day" href="https://codepen.io/freeCodeCamp/full/qRZeGZ" class="imported-projects"><img id="img" class="imported-pictures" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"> <p class="caption">Random Quote Machine</p></a>
        <a rel="javascript calculator" href="https://codepen.io/freeCodeCamp/full/wgGVVX" class="imported-projects"><img id="img" class="imported-pictures" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"><p class="caption">Javascript Calculator</p></a>
          <a rel="code camp map data" href="https://codepen.io/freeCodeCamp/full/mVEJag" class="imported-projects"><img id="img" class="imported-pictures" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/map.jpg"><p class="caption">Map Data Across the Globe</p></a>
        <a rel="Wikipedia Viewer" href="https://codepen.io/freeCodeCamp/full/wGqEga" class="imported-projects"><img id="img" class="imported-pictures" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/wiki.png"><p class="caption">Wikipidia Viewer</p></a>
        <a rel="Tic Tac Toe game" href="https://codepen.io/freeCodeCamp/full/KzXQgy" class="imported-projects"><img id="img" class="imported-pictures" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tic-tac-toe.png"><p class="caption">Tic Tac Toe Game</p></a>
        <a class="show-all" href="https://codepen.io/FreeCodeCamp/" rel="All Projects">Show All</a>
      </div>
    </div>
    </section>
    


    <section class="contact">
      <div class="contact-title">
        <p class="last-title">Let's work together...</p>
        <p class="last-p">How do you take your coffee</p>
      </div>
      <div class="contact-links">
        <a href="https://www.facebook.com/freecodecamp"><i class="fab fa-facebook-f"></i>Facebook</a>
        <a href="https://github.com/freecodecamp"><i class="fab fa-github"></i>Twitter</a>
        <a href="https://twitter.com/freecodecamp"><i class="fab fa-twitter"></i></a>
        <div class="contact-line">
        </div>
        <div id="footer" class="footer">
        <p>**This is just a fake portfolio. All the projects and contact details given are not real.</p>
        <p>Created for freeCodeCamp</p>
        </div>
      </div>

    </section>
  </main>
*{
    padding:0;
    margin:0;
}
#nav-bar{
    background-color: rgb(161, 52, 52);
    height:60px;
    position:fixed;
    float:top;
    width:100%;
    text-align: right;
}
.nav-link{
    display:inline-block;
    list-style-type:none;
    text-decoration:none;
    color:white;
    font-size: 25px;
    padding:16px;
}
.nav-link:hover{
    background-color: rgb(61, 88, 114);
    cursor: pointer;
}
#welcome-section{
    background:repeating-linear-gradient(60deg,rgb(66, 66, 66),rgb(31, 30, 30));
    width:100%;
    height:930px;

}
h1{
    text-align:center;
    padding-top:300px;
    font-size: 56px;
    color:white;
}
.name-quote{
    text-align:center;
    font-size:30px;
    color:rgb(175, 43, 43);
    font-style:italic;
}
#Projects{
    background-color: rgb(61, 88, 114);
    height:1150px;
    width:100%;
}
h2{
    text-align: center;
    color:white;
    font-size:40px;
    padding-top:40px;

}   
.hr-div{
    display: flex;
    align-items: center;
    padding-bottom:40px;
}
.projects{
    
    display:grid;
    grid-template-rows:450px 450px 450px ;
    grid-template-columns:450px 450px 450px ;
    justify-items: center;
}
hr{
    width:500px;
    margin-left:auto;
    margin-right:auto
}
.imported-pictures{
    width:400px
}
.grid-center{
    display:flex;
    justify-content: center;
    align-items: center;
}
#img{
    width:400px;
    height:300px;
}
.caption{
    background-color:rgb(49, 49, 56);
    color:white;
    width:400px;
    height:60px;
    padding-top:20px;
    text-align: center;
    font-size:30px;
    text-decoration: none;
}
.show-all{
    grid-row-start:3;
    grid-row-end:3;
    grid-column-start:2;
    grid-column-end:2;
    text-decoration: none;
    color:white;
    background-color: rgb(49, 49, 56);
    width:120px;
    text-align: center;
    height:40px;
    padding-top:20px;
    font-size:19px;
    font-weight:bold;
}
.contact{
    background-color:rgb(49, 49, 56);
    color:white;
    height:700px;
}
.contact-title{
    text-align: center;
}
.last-title{
    font-weight:bold;
    font-size:50px;
    padding-top:200px;
}
.last-p{
    font-style: italic;
    font-size:17px;
    padding-top:7px;
}
.contact-links{
    text-align:center;
}
.contact-line{
    width:100%;
    height:2px;
    background-color:rgb(175, 43, 43);
    margin-top:300px;
}
.footer{
    display:flex;
    justify-content: space-between;
    padding-top:25px;
    padding-left:20px;
    padding-right:20px;
}

Your browser information:

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

Challenge Information:

Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Can someone pls help?

Hey @GhadyKeyrouz ! Let’s take this step by step.

You can create this effect by using a blend of :hover pseudo-class and the CSS transition property which lets you fine-tune the transition effect you’re trying to achieve.

Try to translate this in CSS

- Whenever the user hovers on the card
       Change the opacity of the child element

here’s some articles to help you get familiar with this.

1 Like