This is my final project and I’m happy with it, there’s just a few things that aren’t complete I am trying to make this page: https://personal-portfolio.freecodecamp.rocks/#welcome-section:
-
My main section doesn’t extends when changing the size of the page so when I size down my page the projects wrap like I want them to but the main doesn’t extends so you would see that the projects now have another background color (The contact section), it’s hard for me to explain but try changing the size of the window you’ll understand what I mean.
-
The p in the anchor element inside the main, when I hover over it I’ve added some content like they did but I can’t space them like 5px from the p and each p has a different width so as you can see it’s a little messy.
-
The projects button animation, as you can see it’s not working it is turning red like I want it to but I don’t know how to make the > move.
4.The contact section has 5 links for social media and emails and stuff, in the original page they have icons of them next to them and they are animated, I don’t know how to put these icons, and for the animation I tried doing it but something isn’t working .
Here’s my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="styles.css" rel="stylesheet">
<title>Final Project</title>
</head>
<body>
<header>
<nav class="nav__bar" id="navbar">
<ul>
<li><a class="nav__links" href="#welcome-section">About</a></li>
<li><a class="nav__links" href="#projects">Work</a></li>
<li><a class="nav__links" href="#contact">Contact</a></li>
</ul>
</nav>
<section class="section__first" id="welcome-section">
<h1 class="section__h1">Hey I am Ghady</h1>
<p class="section__p">a web developper</p>
</section>
</header>
<main>
<section class="section__projects" id="projects">
<h2>These are some of my projects</h2>
<div class="projects__div">
<a href="https://codepen.io/freeCodeCamp/full/zNqgVx" target="_blank" class="project-tile">
<img class="projects__images" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute.jpg">
<p class="projects__p">Tribute Page</p>
</a>
<a href="https://codepen.io/freeCodeCamp/full/qRZeGZ" target="_blank" class="project-tile">
<img class="projects__images" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png">
<p class="projects__p">Random Quote Machine</p>
</a>
<a href="https://codepen.io/freeCodeCamp/full/wgGVVX" target="_blank" class="project-tile">
<img class="projects__images" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png">
<p class="projects__p">Javascipt Calculator</p>
</a>
<a href="https://codepen.io/freeCodeCamp/full/mVEJag" target="_blank" class="project-tile">
<img class="projects__images" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/map.jpg">
<p class="projects__p">Map Across The Globe</p>
</a>
<a href="https://codepen.io/freeCodeCamp/full/wGqEga" target="_blank" class="project-tile">
<img class="projects__images" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/wiki.png">
<p class="projects__p">Wikipedia Viewer</p>
</a>
<a href="https://codepen.io/freeCodeCamp/full/KzXQgy" target="_blank" class="project-tile">
<img class="projects__images" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tic-tac-toe.png">
<p class="projects__p">Tic Tac Toe Game</p>
</a>
</div>
<div class="div__button">
<button class="projects__button">Show all ></button>
</div>
</section>
</main>
<section class="section__contact" id="contact">
<div class="contact__header">
<h2 class="contact__h2">Let's work together...</h2>
<p class="contact__p">How do you take your coffee?</p>
</div>
<div class="contact__links">
<a href="https://www.facebook.com/freecodecamp" id="profile-link" target="_blank">Facebook</a>
<a href="https://github.com/freecodecamp" id="profile-link" target="_blank">Github</a>
<a href="https://twitter.com/freecodecamp" id="profile-link" target="_blank">Twitter</a>
<a href="mailto:example@example.com" id="profile-link" target="_blank">Send an Email</a>
<a href="tel: 555-555-5555 id="profile-link" target="_blank"">Call me</a>
</div>
</section>
<footer class="footer">
<p class="wrap inline">**This is just a fake portfolio. All the projects and contact details given are not real.</p>
<p class="wrap inline">© Created for <a class="footer__link" href="https://freecodecamp.org/">freeCodeCamp</a></p>
</footer>
</body>
</html>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html{
scroll-behavior: smooth;
}
body{
font-size: 1.5rem;
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
:root{
/* COLORS */
--HEADER-RED: rgb(241, 92, 92);
--FONT-COLOR: whitesmoke;
--BODY-GRAY: rgb(70, 70, 71);
--HEADER-HOVER-BLUE: rgb(98, 98, 236);
--PROJECT-PBGCOLOR: rgb(52, 53, 58);
--POPPING-RED: brown;
}
/* UTILITY CLASSES */
.wrap{
white-space:wrap;
}
.inline{
display: inline;
}
/* || NAVIGATION BAR */
.nav__bar{
position: fixed;
top: 0;
z-index: 1;
background-color: var(--HEADER-RED);
width: 100%;
height: 80px;
border-bottom: 1px solid black;
}
.nav__bar ul{
height: 80px;
display: flex;
flex-direction: row;
justify-content: flex-end;
}
.nav__bar li{
display: inline;
padding: 1em 1em;
height: 80px;
}
.nav__links{
text-decoration: none;
color: var(--FONT-COLOR);
}
.nav__bar li:hover, .nav__bar li:focus{
background-color: var(--HEADER-HOVER-BLUE);
}
/* WELCOME SECTION */
.section__first{
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: var(--BODY-GRAY);
}
.section__h1{
font-size: 3em;
color: var(--FONT-COLOR);
}
.section__p{
font-style: italic;
font-size: 1.7em;
color: var(--HEADER-RED);
}
/* || PROJECTS SECTION */
.section__projects{
height: 130vh;
background-color: var(--HEADER-HOVER-BLUE);
}
.section__projects h2{
color: var(--FONT-COLOR);
text-align: center;
text-decoration: underline;
font-size: 2em;
padding-top: 3rem;
}
.projects__div{
margin-top: 2rem;
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 2rem;
justify-content: center;
}
.project-tile{
width: 30%;
min-width: 300px;
text-decoration: none;
}
.projects__images{
width: 100%;
height: 400px;
display: block;
}
.projects__p{
background-color: var(--PROJECT-PBGCOLOR);
color: var(--FONT-COLOR);
text-align: center;
padding: 1rem;
position: relative;
}
.projects__p:hover::after{
content: '/>';
color: orange;
position: absolute;
right: 20px;
}
.projects__p:hover::before{
content: '<';
color: orange;
position: absolute;
left: 20px;
}
.div__button{
text-align: center;
margin-top: 3rem;
}
.projects__button{
padding: 1rem 1.5rem;
background-color: var(--PROJECT-PBGCOLOR);
color: var(--FONT-COLOR);
font: inherit;
cursor: pointer;
}
.projects__button:hover{
background: var(--POPPING-RED);
transition: background 0.5s ease;
}
/* CONTACT SECTION */
.section__contact{
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: var(--PROJECT-PBGCOLOR);
gap: 2rem;
}
.contact__header{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: var(--FONT-COLOR);
}
.contact__h2{
font-size: 3.5rem;
}
.contact__p{
font-style: italic;
font-weight: 100;
}
.contact__links a{
color: var(--FONT-COLOR);
padding: 2rem;
text-decoration: none;
}
.contact__links a:hover{
transform: translateY(-2rem);
transition: all 0.5s ease;
}
/* || FOOTER */
.footer{
height: 120px;
background-color: rgb(52, 53, 58);
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
border-top: 4px solid var(--POPPING-RED);
}
.footer p{
color: var(--FONT-COLOR);
padding: 1rem;
}
.footer__link{
color: var(--FONT-COLOR);
text-decoration: none;
}
/* DARK MODE */
@media(prefers-color-scheme: dark){
:root{
--HEADER-RED: rgb(233, 116, 116);
--FONT-COLOR: whitesmoke;
--BODY-GRAY: rgb(70, 70, 71);
--HEADER-HOVER-BLUE: rgb(30, 30, 44);
--PROJECT-PBGCOLOR: rgb(52, 53, 58);
--POPPING-RED: rgb(216, 224, 96);
}
}
Thank you for the help!
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36
Challenge Information:
Personal Portfolio Webpage - Build a Personal Portfolio Webpage
