Personal Portfolio Webpage - Build a Personal Portfolio Webpage

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
I see that freecodecamp has used codepen for their tribute page. It requires me to pay it. I am looking for a free website where I can upload my tribute page so that I can attach the link to this portfolio that I’m building.

DISCLAIMER:
Git and Github is complicated and overwhelming for me at the moment.

Your code so far

<!-- file: index.html -->
<!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="nav-bar">
<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 I did at freecodecamp</h2>
<div class="project-grid">
  <a href="">
<img src="https://i.pinimg.com/564x/4c/3a/23/4c3a23c031cdf004254c9237019874e4.jpg" alt="tupac">
</a>
</div>

</section>

<section id="contact" class="contact">

</section>









</body>
</html>

/* file: styles.css */
body {margin: 0; padding: 0;}

#nav-bar {background-color: #000000;
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: fex-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;}

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 {background-color: #0B3C5D;} 

  #0F1626

Your browser information:

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

Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Link to the challenge:

2 Likes
2

Hey!

Codepen has a freemium model (free for basic usage and paid for advanced usage) so you can do a lot of stuff with it just by creating an account with them and using their free plan.

You only need to pay them if you intend to use their premium features.

Here’s a video explaining how you can use codepen.

Hope this helps! :smile:

2 Likes
3

Thank you man. I wanted to view my tribute page in full view with the link attached to my personal portfolio

4

A post was split to a new topic: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

6

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