Personal Portfolio Webpage - Build a Personal Portfolio Webpage

**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:

please post the html parts also

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.

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

<!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>

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

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

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

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:
}

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

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

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

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