Personal Portfolio Webpage - Build a Personal Portfolio Webpage

HTML-CSS
1

**I cannot add spacing between the images and the text. **
it seems like i cannot add spacing between the images and the text. how do i do that? i tried to make space by using margin properties. still doesn’t work. heres my code:

body{
  text-align:center;
    margin: 250px;
  font-family: sans-serif;
  background: hotpink;

}
#navbar{
position:absolute;
 right:0;
  top:0;
   margin:0 auto;
   font-family:sans-serif verdana;
   font-weight:bold;
    

}
a:link{
  text-decoration:none;
  
 
}
 

.a:hover{

transform: scale(1.5);
}



.about{
  margin-right:25px;
}
.work{
  margin-right:25px;
}
.connect{
 margin-right:25px;
}


#welcome-section{
  margin:0;
  display: block;
}
#image-one {
width:350px;
top:0;
display:flex;



}
#title{
  color:white;
  font-family:sans-serif verdana;
}
.title-two{
  display:flex;
  align-items:center;
  justify-content:center;
 
}
.linkedIn{
  margin:10px;
  color:white;
   font-size:25px;
}
.email{
  margin:10px;
  color:white;
 font-size:25px;
}
#freecodecamp{
  margin:10px;
  color:white;
  font-size:25px;
}
.fa-free-code-camp{
  color:white;
}
#projects{
  margin:250px;
  display: block;
  font-family:sans-serif verdana;
  color:white;
  left:25px;
}
.project-tile{
  margin:0;
  display:block;
  
}
.image-one{
  max-width:400px;
  float:left;
  
}
.border{
color:white;


  
}
h1{
  color:white;
  
  
  
}
.cat{
  float:right;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
<title>Norma's Portfolio</title>
<link rel="stylesheet" href="styles.css"/>
<script src="https://kit.fontawesome.com/b98b02e413.js" crossorigin="anonymous"></script>
</head>
<body>
  <div id="navbar">
   <p class="top-bar"><a href="https://www.freecodecamp.org/learn/2022/responsive-web-design"></a></p>
<span class="about"><a href="about.hsp">About </span></a><a href="work-ethic.hsp"><span class="work">Work </span></a><a href="connect.hsp>"<span class="connect">Connect </span></a>
 
</div>
  <div id="welcome-section">
<h1 id="title">Hello my name is Norma<span id="heart">💜</span><span class="title-two"> a web developer</span></h1>

<h1 id="projects">These are some of my projects</h1>
<a href="https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-tribute-page-project/build-a-tribute-page">
<div class="project-tile">
<img src="https://cdn.theatlantic.com/thumbor/1eLgsh6WVKKyOvSZQj8Lghm9iGQ=/1200x800/media/img/photo/2020/04/photos-essential-work-farmers-coron/f01_1216824338/original.jpg" alt="farmer" class="image-one"/><p class="border">Tribute Page</p></a>
  
  <a href="https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-69"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="cat-photo-app" class="cat"/></a>
</div>
</a>



<div id="projects">
  <a href="https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-intermediate-css-by-building-a-picasso-painting/step-89"></a>
</div>
<div id="bottom">
<h1 class="together">Let's work together</h2>

<p id="profile-link">
  <a src="https://www.freecodecamp.org/misslathan" alt="profile-links"><i class="fa-brands fa-free-code-camp"></i><span id="freecodecamp">FreeCodeCamp.org </span></a><a href="https://www.linkedin.com/in/norma-lathan-a10667139/" alt="linkedIn"><span class="linkedIn"><i class="fa-brands fa-linkedin"></i>LinkedIn </span></a><a href="" alt="email"><span class="email"><i class="fa-solid fa-at"></i>Send an email</span></a>
</p>
</div>
</body>
</html>

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:106.0) Gecko/20100101 Firefox/106.0

Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Link to the challenge:

2

please post the html parts also

3

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

4 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
<title>Norma's Portfolio</title>
<link rel="stylesheet" href="styles.css"/>
<script src="https://kit.fontawesome.com/b98b02e413.js" crossorigin="anonymous"></script>
</head>
<body>
  <div id="navbar">
   <p class="top-bar"><a href="https://www.freecodecamp.org/learn/2022/responsive-web-design"></a></p>
<span class="about"><a href="about.hsp">About </span></a><a href="work-ethic.hsp"><span class="work">Work </span></a><a href="connect.hsp>"<span class="connect">Connect </span></a>
 
</div>
  <div id="welcome-section">
<h1 id="title">Hello my name is Norma<span id="heart">💜</span><span class="title-two"> a web developer</span></h1>

<h1 id="projects">These are some of my projects</h1>
<a href="https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-tribute-page-project/build-a-tribute-page">
<div class="project-tile">
<img src="https://cdn.theatlantic.com/thumbor/1eLgsh6WVKKyOvSZQj8Lghm9iGQ=/1200x800/media/img/photo/2020/04/photos-essential-work-farmers-coron/f01_1216824338/original.jpg" alt="farmer" class="image-one"/><p class="border">Tribute Page</p></a>
  
  <a href="https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-69"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="cat-photo-app" class="cat"/></a>
</div>
</a>



<div id="projects">
  <a href="https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-intermediate-css-by-building-a-picasso-painting/step-89"></a>
</div>
<div id="bottom">
<h1 class="together">Let's work together</h2>

<p id="profile-link">
  <a src="https://www.freecodecamp.org/misslathan" alt="profile-links"><i class="fa-brands fa-free-code-camp"></i><span id="freecodecamp">FreeCodeCamp.org </span></a><a href="https://www.linkedin.com/in/norma-lathan-a10667139/" alt="linkedIn"><span class="linkedIn"><i class="fa-brands fa-linkedin"></i>LinkedIn </span></a><a href="" alt="email"><span class="email"><i class="fa-solid fa-at"></i>Send an email</span></a>
</p>
</div>
</body>
</html>
5

is that better? please help me solve this! thanks!

6

have u tried adding margin-bottom in .image-one or/and margin-top in .border classes or try it instead with padding

7

i tried margin-top and bottom but it does not work alone without padding but ill try that thanks!

8

it worked! but now my i need my images to be side by side. Do i use float property to align the images?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
<title>Norma's Portfolio</title>
<link rel="stylesheet" href="styles.css"/>
<script src="https://kit.fontawesome.com/b98b02e413.js" crossorigin="anonymous"></script>
</head>
<body>
  <div id="navbar">
   <p class="top-bar"><a href="https://www.freecodecamp.org/learn/2022/responsive-web-design"></a></p>
<span class="about"><a href="about.hsp">About </span></a><a href="work-ethic.hsp"><span class="work">Work </span></a><a href="connect.hsp>"<span class="connect">Connect </span></a>
 
</div>
  <div id="welcome-section">
<h1 id="title">Hello my name is Norma<span id="heart">💜</span><span class="title-two"> a web developer</span></h1>

<h1 id="projects">These are some of my projects</h1>
<a href="https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-tribute-page-project/build-a-tribute-page">
<div class="project-tile">
<img src="https://cdn.theatlantic.com/thumbor/1eLgsh6WVKKyOvSZQj8Lghm9iGQ=/1200x800/media/img/photo/2020/04/photos-essential-work-farmers-coron/f01_1216824338/original.jpg" alt="farmer" class="image-one"/><p class="border">Tribute Page</p></a>
  
  <a href="https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-69"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="cat-photo-app" class="cat"/></a>
</div>
</a>



<div id="projects">
  <a href="https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-intermediate-css-by-building-a-picasso-painting/step-89"></a>
</div>
<div id="bottom">
<h1 class="together">Let's work together</h2>

<p id="profile-link">
  <a src="https://www.freecodecamp.org/misslathan" alt="profile-links"><i class="fa-brands fa-free-code-camp"></i><span id="freecodecamp">FreeCodeCamp.org </span></a><a href="https://www.linkedin.com/in/norma-lathan-a10667139/" alt="linkedIn"><span class="linkedIn"><i class="fa-brands fa-linkedin"></i>LinkedIn </span></a><a href="" alt="email"><span class="email"><i class="fa-solid fa-at"></i>Send an email</span></a>
</p>
</div>
</body>
</html>



body{
  text-align:center;
    margin: 250px;
  font-family: sans-serif;
  background: hotpink;

}
#navbar{
position:absolute;
 right:0;
  top:0;
   margin:0 auto;
   font-family:sans-serif verdana;
   font-weight:bold;
    

}
a:link{
  text-decoration:none;
  
 
}
 

.a:hover{

transform: scale(1.5);
}



.about{
  margin-right:25px;
}
.work{
  margin-right:25px;
}
.connect{
 margin-right:25px;
}


#welcome-section{
  margin:0;
  display: block;
}
#image-one {
width:350px;
top:0;
display:flex;



}
#title{
  color:white;
  font-family:sans-serif verdana;
}
.title-two{
  display:flex;
  align-items:center;
  justify-content:center;
 
}
.linkedIn{
  margin:10px;
  color:white;
   font-size:25px;
}
.email{
  margin:10px;
  color:white;
 font-size:25px;
}
#freecodecamp{
  margin:10px;
  color:white;
  font-size:25px;
}
.fa-free-code-camp{
  color:white;
}
#projects{
  margin:250px;
  display: block;
  font-family:sans-serif verdana;
  color:white;
  left:25px;
}
.project-tile{
  margin:0;
  display:block;
  
}
.image-one{
  max-width:400px;
  float:left;
  
  
}
.border{
color:white;

margin-top:20px; 
padding:200px;
  
}
h1{
  color:white;
  
  
  
}
.cat{

  margin:0;
  padding:
}
9

yes u can use that but instead use diplay:flex in the .project-tile and it should be.because flex_direction by default is row which aligns the imgs side by side

1 Like
10

just extra tip click the solution button where the reply that solved your problem for the topic

11

not that one .:grinning: the reply that solve your problem and it is reply number 2 from my replies.look at the end of topic post after freecodecamp link you give it shows you,thanks