Personal Portfolio Webpage - Build a Personal Portfolio Webpage

HTML-CSS
1

Tell us what’s happening:
Hi!
I have a problem with removing white spaces between sections on my project. I would appreciate any help:)

   **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">
   <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,400;1,600&family=Roboto+Slab:wght@300;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<title>Portfolio</title>
 </head>

 <body>

   <header>
     <nav>
       <ul>
         <a href="#welcome-section" class="navbar"><li>About</a></li>
         <a href="#projects" class="navbar"><li>Projects</a></li>
         <a href="#socials" class="navbar"><li>Socials</a></li>
       </ul>
     </nav>
   </header>

   <main>
     <section id="welcome-section">
       <h1>Hey I am Mimic</h1>
       <p>a web developer</p>
     </section>

     <section id="projects">
       <h2 id="project-tile">These are some of my projects</h2>
       <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png" >
       <figcaption>Calculator</figcaption>
       <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute.jpg">
       <figcaption>Tribute page</figcaption>
       <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tic-tac-toe.png">
       <figcaption>Tic Tac Toe game</figcaption>
       <a href="https://codepen.io/FreeCodeCamp/">Show all ></a>
     </section>
   </main>

   <footer id="socials">
     <h2>Let's work together...</h2>
     <p>How do you take your coffee?</p>
     <a href="https://www.freecodecamp.org/fcc3b897761-97f5-4225-aa09-df039f8d4df2" target="_blank"><i class="fa-brands fa-free-code-camp"></i></a>
     <a href="https://github.com/" target="_blank"><i class="fa-brands fa-github"></i></a>
     <a href="https://open.spotify.com/" target="_blank"><i class="fa-brands fa-spotify"></i></a>
   </footer>

 </body>
</html

/* file: styles.css */
body {
 box-sizing: border-box;
 padding: 0;
 margin: 0;
 font-family: 'Josefin Sans', sans-serif;
}

a, li {
 text-decoration: none;
 color: black;
 list-style-type: none;
}

ul {
 list-style-type: none;
 margin: 0;
 padding: 0;
 overflow: hidden;
 background-color:#be3144;
 z-index: 1;
}

li {
 float: right;
}

li a {
 display: block;
 color: white;
 text-align: center;
 padding: 14px 16px;
 text-decoration: none;
}

li:hover {
 background-color: #45567d;
}

h1, h2 {
text-align: center; 
font-size: 2rem;
color: white;
}

section:first-of-type {
 background-color: #303841;
}


section:nth-of-type(2) {
  background-color: #45567d;
}


footer {
 background-color: #303841;
}

p {
 text-align: center;
 color: white;
}

img {
 width: 100px;
 display: flex;
 flex-direction: coloumn;
 flex-wrap: wrap;
}

   **Your browser information:**

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

Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Link to the challenge:

2

please see the instructions below on how to use codepen, then one you have create a codepen, you can point to it here and tell us more about your objective.
(including which elements you are trying to modify and what you have attempted to do to them)

documentation

3

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