Personal Portfolio Webpage - Build a Personal Portfolio Webpage

HTML-CSS
1

Tell us what’s happening:

Describe your issue in detail here.

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">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="styles.css">
    <title>Portfolio website</title>
</head>
<body>
  <header>
      <div class="logo"><span>H</span>assen.</div>
      <ul class="navlist">
        <li><a href="#" class="active">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
  </header>
    <section class="home">
      <div class="home-content">
        <h1>Hi! I'm Hassent Hadery</h1>
        <h3>full-stack web-developer</h3>
        <div class="info-box">
          <div class="email-info">
            <h5>Email :</h5>
            <span>hasshadery7@gmail.com</span>
          </div>
          <div class="behance-info">
            <h5>Behance :</h5>
            <span>behance.net/hassen</span>
          </div>
        </div>

        <div class="btn-box">
          <a href="#">Download</a>
          <a href="#">Let's work together</a>
        </div>
      </div>

      <div class="home-image">
        <div class="img-box">
          <img src="" alt="">
        </div>
      </div>

    </section>
</body>
</html>

/* file: styles.css */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
 font-family: 'Poppins', sans-serif;
 scroll-behavior: smooth;
 text-decoration: none; 
}

:root{
  --text-color: #f5f5f5;
  --hover-color: #12f7ff;
  --bg-color: #250821;
  --big-font: 2.5rem;
  --normal-font: 2rem;
  --neon-box-shadow:0 0 .8rem #12f7ff;
  --h2-font: 3rem;
  --p-font: 1rem;
  --font-neon-text-shadow: 0 010px    rgba(18,237,255,0.3),
  0 0 10px rgba(18, 247, 255, 0.3),
  0 0 10px rgba(18, 247, 255, 0.3),
  0 0 10px rgba(18, 247, 255, 0.3),
  0 0 10px rgba(18, 247, 255, 0.3),;
}

body{
  background-color: var(--bg-color);
  color: var(--text-color);
}

header{
  position: fixed;
  width: 100%;
  top: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 10px;
  background: transparent;
  border-bottom: 1px solid transparent;

}

.logo{
  font-size: 26px;
  font-weight: 700px;
  letter-spacing: 1px;

}

span{
  color: var(--hover-color);
}

.navlist{
  display: flex;
  list-style-type: none;
}

.navlist a{
  font-size: var(--p-font);
  color: var(--text-color);
  font-weight: 500;
  padding: 10px 27px;
}

.navlist a:hover{
  color: var(--hover-color);
  text-shadow: 0 010px    rgba(18,237,255,0.6),
  0 0 10px rgba(18, 247, 255, 0.6),
  0 0 10px rgba(18, 247, 255, 0.6),
  0 0 10px rgba(18, 247, 255, 0.6),
  0 0 10px rgba(18, 247, 255, 0.6),;
}

.navlist a.active{
  color: var(--hover-color);
}

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

2

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.
Learning to describe problems is hard, but it is an important part of learning how to code.
Also, the more you say, the more we can help!

3

I want to know how to insert an image from local file into freecodecamp html element

5

l really try to do that but it is not working

6

Welcome to the community @Hadery7 !

We cannot enter local photos into the freecodecamp courses. The photos need to be hosted online somewhere.

If you do not mind sharing the photo for others to possibly use free, too, you could upload to a free site, like pixels or pixabay, or one of the other sites.
I use pixels for my images.

Or, if you can use a general photo, you coulld get a free one from any of these sites, too, to use for your project.

I hope this helps you.

1 Like
7

Hello!

EDIT: someone typed faster than me :smile:.

You can’t, fCC has no access to your local files and that’s a GOOD thing. Imagine random sites on the internet could simply rummage in your hard drives.

You need to use images that are uploaded to the internet. One option would be to store your images in Google Drive or another cloud provider and link them.

2 Likes
8

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