Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Tell us what’s happening:
The icons I included in the code are not visible in my page. How do I make sure they they appear?

How do I also make sure that my email will be accessible? I included my email adress but not sure if its correct
Your code so far

<div id="contact-links">
<a href="https://github.com/CamaguNcoso" id="profile-link" target="_blank" class="btn contact-details">
<i class="fab fa-github"></i>GitHub</a>

<a href="https://www.linkedin.com/in/camagu-ncoso-401bb2182/" id="profile-link" target="_blank" class="btn contact-details">
<i class="fa fa-linkedin-square"></i>LinkedIn</a>

 <a href="/Camaguncoso@gmail.com" class="btn contact-details"><i class="fas fa-at"></i>Email me</a
        >

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

Your browser information:

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

Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Link to the challenge:

you should put this in the head :
<script src=“https://kit.fontawesome.com/a076d05399.js” crossorigin=“anonymous”></script>
<!–Get your own code at fontawesome.com–>

I do not trust your response simply bcos you don’t have a profile picture

Its better for us if you send the complete code of your current work as I dont know if your <head></head> is correct. Its important to create a connection to fontawesome to use their icons.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width initial-scale=1.0"/>
<link rel="stylesheet" href="styles.css"/>
<title>Personal Portfolio</title>
</head>

<body>
<nav id="navbar">
<ul id="nav-list">
<li>
<a class="nav-link" href="#welcome-section">About
</a>
</li>
<li><a class="nav-link" href="#projects">Work
  </a>
</li>
<li><a class="nav-link" href="#contact">
  Contact
</a>
</li>
</ul>
</nav>

<section id="welcome-section" class="welcome-section">
<h1>Welcome, I am Camagu</h1>
<p>a  Front-End Developer</p>
</section>

<section id="projects" class="projects">
<h2 class="project-tile">These are some of my projects</h2>
<div class="projects-grid">
  <a href=" " target="_blank"> <img src="https://i.pinimg.com/originals/ea/c7/90/eac79017cf53edc7f9ada1e79b943872.jpg" alt="tupac" class="project-img"> <p class="project-tile">Tribute page</p>
</a>

<a href="https://codepen.io/Camagu-Ncoso/full/zYMdvoP">
  <img src="https://i.pinimg.com/originals/ea/c7/90/eac79017cf53edc7f9ada1e79b943872.jpg" alt="tupac" class="project-img"><p class="project-tile">Tribute page</p> </a>

<a href="https://codepen.io/Camagu-Ncoso/full/zYMdvoP">
  <img src="https://i.pinimg.com/originals/ea/c7/90/eac79017cf53edc7f9ada1e79b943872.jpg" alt="tupac" class="project-img"><p class="project-tile">Tribute page</p></a>

<a href="https://codepen.io/Camagu-Ncoso/full/zYMdvoP">
  <img src="https://i.pinimg.com/originals/ea/c7/90/eac79017cf53edc7f9ada1e79b943872.jpg" alt="tupac" class="project-img"><p class="project-tile">Tribute page</p>
</a>

<a href="https://codepen.io/Camagu-Ncoso/full/zYMdvoP">
  <img src="https://i.pinimg.com/originals/ea/c7/90/eac79017cf53edc7f9ada1e79b943872.jpg" alt="tupac" class="project-img"><p class="project-tile">Tribute page</p>
</a>

<a href="https://codepen.io/Camagu-Ncoso/full/zYMdvoP">
  <img src="https://i.pinimg.com/originals/ea/c7/90/eac79017cf53edc7f9ada1e79b943872.jpg" alt="tupac" class="project-img"><p class="project-tile">Tribute page</p>
</a>

<a href="https://codepen.io/Camagu-Ncoso/full/zYMdvoP">
  <img src="https://i.pinimg.com/originals/ea/c7/90/eac79017cf53edc7f9ada1e79b943872.jpg" alt="tupac" class="project-img"><p class="project-tile">Tribute page</p>
</a>

</div>
</section>

<section id="contact" class="contact">
<div id="contact-header">
  <h2>Lets work together...</h2>
  <p id="contact-p">how do you take your coffee?</p>
</div>


<div id="contact-links">
<a href="https://github.com/CamaguNcoso" id="profile-link" target="_blank" class="btn contact-details">
<i class="fab fa-github"></i>GitHub</a>

<a href="https://www.linkedin.com/in/camagu-ncoso-401bb2182/" id="profile-link" target="_blank" class="btn contact-details">
<i class="fa fa-linkedin-square"></i>LinkedIn</a>

 <a href="/Camaguncoso@gmail.com" class="btn contact-details"><i class="fas fa-at"></i>Email me</a
        >

        </div>
</section>









</body>
</html>





CSS

body {margin: 0; padding: 0;}

#navbar {background-color: #000000;
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: flex-end;
font-family: Blippo, fantasy;}

#nav-list {display: flex;
flex-direction: row;}

li {list-style: none;}

a {color: white;
text-decoration: none;
font-size: 1.5em;
padding: 1rem 2rem;}

nav > ul > li > a:hover {
  background-color: #C06014;
}

#welcome-section {width: 100%;
height: 100vh;
display: flex; 
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #C06014;}

h1 {color: white;
font-size: 3.5rem;
}

#welcome-section > p {color: #1A2930;
  font-size: 2.5rem;
  font-style: italic;
  font-weight: 700;}

  .projects {text-align: center; 
  background-color: #828081;
  padding: 7rem 2rem;} 

h2 {font-size: 3.2rem;
color: white;}
  
.project-img {height: calc(100-4.8rem);
width: 100%;
object-fit: cover;}

.project-tile {color: white;
width: 100%;
background-color: #008284;
padding: 1em;}

.projects-grid {display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
grid-gap: 4rem;
width: 100%;
max-width: 1080px;
margin: 0 auto;
margin-bottom: 6rem;}

#contact {background-color: #015249;
width: 100%;
height: 80vh;
padding: 1rem 2rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;}

#contact-p {color: white;
font-style: italic;
font-weight: 100;
text-align: center;
font-size: 1.7rem;}

@media (max-widths: 800px){

{font-size: 2.5rem;}

} 
             
.contact-details {font-size: 2.4rem;
    text-shadow: 2px 2px 1px #1f1f1f;
    transition: transform 0.3s ease-out;}

just trying to help!

[W3Schools Tryit Editor](\https://www.w3schools.com/css/tryit.asp?filename=trycss_icons_fa)

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