Personal Portfolio Webpage - Build a Personal Portfolio Webpage

HTML-CSS
1

Tell us what’s happening:
I have my special text above an img which i want, but it leaves a weird huge gap underneath the img

Help is needed!
Your code so far

My Personal Portfolio 
    <nav id="navbar">
      
      <a class="nav-link" href="#flower-img">Home</a>
      
      <a class="nav-link" href="#skills-ul">Skills</a> 

      <a class="nav-link" href ="#profile-link">Projects</a> 
      
      <a class="nav-link" href="#about-me">About me</a>
      
      <a class="nav-link" href="#contact-div">Contact us</a>
    </nav> 
  </header> 

  <main> 
     
    <section id="welcome-section">
      
     <div id="Image-div"> 
      <img src="https://cdn.pixabay.com/photo/2014/04/10/11/24/rose-320868_640.jpg" id="flower-img"/>
     </div>

      <h1 class="special-text">Jasmine Snow | Student in Programming</h1>

      <h2 id="about-me">About Me</h2>

      <p class="about-me">𝗛𝗲𝗹𝗹𝗼, 𝗜'𝗺 𝗝𝗮𝘀𝗺𝗶𝗻𝗲! 𝗜'𝗺 𝗮 𝘀𝘁𝘂𝗱𝗲𝗻𝘁 𝗹𝗲𝗮𝗿𝗻𝗶𝗻𝗴 𝘄𝗲𝗯 𝗱𝗲𝘀𝗶𝗴𝗻 𝗮𝗻𝗱 𝗜'𝗺 𝗳𝗿𝗼𝗺 𝗣𝗵𝗶𝗹𝗶𝗽𝗽𝗶𝗻𝗲𝘀. :)</p> 

      <h2 id="h2-skills">Skills:</h2>
      <ul id="skills-ul">
        <li>HTML5</li>
        <li>CSS3</li>
        <li>Ballet</li>
        <li>Human Languages: English Filipino Spanish</li>
      </ul>

      <h2 id="h2-interests">Interests:</h2>
      <ul id="interests-ul">
        <li>Ballet</li>
        <li>CSS3</li>
        <li>Photography</li>
      </ul>
       
    </section>
      
    <section id="projects">
      
      <h2 id="h2-projects">Projects</h2>
     
      <a href="https://www.freecodecamp.org/learn/2022/responsive-web-design/#learn-html-by-building-a-cat-photo-app" class="project-tile" target="_blank">Building a Cat Photo App</a>
        
      <a href="https://www.freecodecamp.org/learn/2022/responsive-web-design/#learn-typography-by-building-a-nutrition-label" id="profile-link" target="_blank">Building a Nutrition Label</a>

    </section>

    <div id="contact-div">
      <h2 id="contact-us">Contact Us</h2>
      <input id="email" placeholder="Enter your email address"

type=“email” name=“email” />

      <input id="subject-input" placeholder="Subject"

type=“email” name=“email” />

      <input id="message-input" placeholder="Message" type="Message" />
    
      <input id="send" placeholder="Send" type="submit" />
    
    </div>
  </main>
</div>

@media only screen and (max-width: 600px) {
#main-div {
background-color: black;
}

header {
background-color: black;
}

#flower-img {
padding-top: 24rem;
}
}

@media only screen and (min-width: 300px) {
#main-div {
background-color: black;
}

header {
min-width: 100px;
background-color: black;
}

#flower-img {
padding-top: 1rem;
}

#contact-div {
width: auto;
align-items: center;
padding: 0.8rem;
}
}

  • g{
    border: 1px solid white;
    }

html {
font-size: 14px;
}

body {
background-color: black;
z-index: 1;
}

#main-div {
margin: 0 auto;
width: 80.5%;
}

main {
margin: 0;
}

header {
display: flex;
position: fixed;
top: 0;
width: 80%;
height: auto;
background-color: black;
z-index: 3;
margin: 0;

}

#navbar {
display: flex;
position: relative;
justify-content: center;
align-items: center;
overflow: hidden;
padding: 10;
flex-wrap: wrap;
width: 79rem;
height: auto;
}

.nav-link {
font-size: 1.6rem;
text-align: center;
text-decoration: none;
background-color: white;
border-radius: 1rem;
color: black;
margin: 1rem;
padding: 0.3rem, 0.5rem, 0, 0.3rem;
width: 10rem;
height: auto;
display: inline;
white-space: nowrap;
}

.nav-link:hover {
background-color: black;
color: white;
opacity: 0.4;
transition: 0.2s;
}

#logo-img {
width: auto;
height: 5rem;
border-radius: 6rem;
padding: 0.1rem;
}

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

h2 {
color: white;
padding: 0rem;
}

#h2-interests {
padding-top: 3rem;
}

#h2-skills {
padding: 3rem 0 0 -1rem;
}

p {
color: lightblue;
padding-bottom: 3rem;
}

#flower-img {
margin: 1rem aut0;
width: 100%;
height: auto;
filter: blur(8px);
-webkit-filter: blur(2px);
padding: 0.5rem;
overflow: hidden;
}

.project-tile {
background-color: white;
text-decoration: none;
width: 12rem;
height: 5rem;
font-size: 1.5rem;
padding: 0.2rem;
border-radius: 2rem;
}

#profile-link {
background-color: white;
text-decoration: none;
width: 12rem;
height: auto;
font-size: 1.5rem;
padding: 0.2rem;
border-radius: 2rem
}

#profile-link:hover{
background-color: #f5cac3;
color: #4a4e69;
}

.project-tile:hover{
background-color: #f5cac3;
color: #4a4e69;
}

#projects {
padding: 3rem 0 3rem 0;
}

.special-text {
position: relative;
color: black;
font-weight: normal;
border: 3px solid #f1f1f1;
left: 55%;
transform: translate(-50%, -190%);
z-index: 2;
width: 50%;
height: auto;
padding: 3rem;
text-align: center;
align-items: center;
background-color: white;
opacity: 1rem;}

ul {
list-style-type: none;
padding: 0rem;
}

li {
text-align: left;
font-family: Tahoma, sans-serif;
color: lightblue;
font-size: 19px;
justify-content: center;
}

#email {
font-size: 1.3rem;
text-align: left;
font-style: italic;
width: 100%;
}

#send {
background-color: white;
color: black;
width: 6rem;
height: 3rem;
margin: 0 1rem;
padding: 0.6rem;
}

#send:hover {
background-color: #80ed99;
opacity: 0.8;
}

#contact-div {
background-color: white;
opacity: 0.3;
padding: 1rem 1rem 1rem 11rem;
border-radius: 3rem;
width: auto;
justify-content: center;
}

#contact-us {
color: black;
font-size: 3rem
}

input {
border-radius: 5px;
font-size: 20px;
font-style: italic;
display: flex;
width: 100%;
max-width: 100%;
padding: 12px;
margin: 5px 0 22px 0;
border-bottom: 5px solid black;
}

input:hover {
background-color: white;
transition: 1s;
opacity: 0.6;
}

input:visited {
background-color: #80ed99;

}

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64) 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:
https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-personal-portfolio-webpage-project/build-a-personal-portfolio-webpagePreformatted text

2

Hi @Naomi11 ,

Please paste your code inside CodePen and share it here.

3

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