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