Tell us what’s happening:
I need some help!
My navbar keeps going over it’s boundaries. I’m using the header to contain my navbar, and it keeps going over the boundaries, and I have no clue what to do!
Help please…
Your code so far
My Personal Portfolio <nav id="navbar">
<img id="logo-img" src="https://cdn.pixabay.com/photo/2016/02/10/21/57/heart-1192662_640.jpg" />
<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">
<img src="https://cdn.pixabay.com/photo/2014/04/10/11/24/rose-320868_640.jpg" id="flower-img"/>
<h1 class="special-text">Jasmine Snow | Student in Programming</h1>
<h2 id="about-me">About Me</h2>
<p class="about-me-p">Hello, I'm Jasmine! I'm a student learning web design and I'm from Philippines.</p>
<h2>Skills:</h2>
<ul id="skills-ul">
<li>HTML5</li>
<li>CSS3</li>
<li>Ballet</li>
<li>Human Languages: English Filipino Spanish</li>
</ul>
<h2>Interests:</h2>
<ul id="interests-ul">
<li>Ballet</li>
<li>CSS3</li>
<li>Photography</li>
</ul>
</section>
<section id="projects">
<h2>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>Contact</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>
- {
border: 1px solid black;
box-sizing: border-box;
}
@media only screen and (max-width: 399px) {
#main-div {
background-color: #354f52;
}
header {
background-color: #354f52;
}
}
@media only screen and (min-width: 400px) {
#main-div {
background-color: #354f52;
}
header {
background-color: #354f52;
}
}
html {
font-size: 14px;
}
body {
background-color: #354f52;
}
#main-div {
margin: 0 auto;
width: 80%;
}
main {
margin: 0;
}
header {
display: flex;
position: fixed;
top: 0;
width: 79.1%;
height: 7rem;
background-color: #354f52;
box-shadow: 1px 0.5px black;
z-index: 3;
margin: 0;
}
#navbar {
display: flex;
position: fixed;
align-items: center;
overflow: hidden;
padding: 1rem;
margin: 0;
}
.nav-link {
font-size: 1.6rem;
text-align: center;
text-decoration: none;
background-color: #52796f;
border-radius: 0.5rem;
color: white;
margin: 0.5rem;
padding-top: 0.5rem;
padding-left: 0.5rem;
padding-right: 0.5rem;
width: auto;
height: 3rem;
display: inline;
white-space: nowrap;
}
.nav-link:hover {
background-color: black;
color: white;
opacity: 0.4;
transition: 0.2s;
}
#logo-img {
width: 7rem;
border-radius: 6rem;
padding: 1rem;
}
h1 {
color: white;
text-align: center;
}
h2 {
color: white;
padding: 1rem;
}
.interests-div {
display: inline;
}
#skills-h2 {
padding: 1rem;
}
p {
color: lightblue;
padding: 1rem;
}
#flower-img {
margin: 3rem auto;
width: 100%;
height: auto;
filter: blur(8px);
-webkit-filter: blur(2px);
box-shadow: 4px 6px;
}
.project-tile {
background-color: #84a59d;
text-decoration: none;
width: 12rem;
height: 5rem;
font-size: 1.5rem;
padding: 0.5rem;
border-radius: 1rem;
}
#profile-link {
background-color: #84a59d;
text-decoration: none;
width: 12rem;
height: 5rem;
font-size: 1.5rem;
padding: 0.5rem;
border-radius: 1rem
}
#profile-link:hover{
background-color: #f5cac3;
color: #4a4e69;
transition: 0.5s;
}
.project-tile:hover{
background-color: #f5cac3;
color: #4a4e69;
transition: 0.5s;
}
#projects {
padding: 1rem;
}
.special-text {
position: relative;
color: white;
font-weight: normal;
border: 3px solid #f1f1f1;
top: 50%;
left: 50%;
transform: translate(-50%, -190%);
z-index: 2;
width: 60%;
height: auto;
padding: 3rem;
text-align: center;
background-color: black;
opacity: 0.6;
}
ul {
list-style-type: none;
padding: 1rem;
}
li {
text-align: left;
font-family: Tahoma, sans-serif;
color: lightblue;
font-size: 17px;
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;
transition: 1s;
opacity: 0.8;
}
#contact-div {
background-color: black;
opacity: 0.3;
padding: 1rem 1rem 1rem 10rem;
border-radius: 3rem;
}
input {
border-radius: 5px;
font-size: 20px;
font-style: italic;
display: inline-block;
width: 100%;
max-width: 60%;
padding: 12px;
margin: 5px 0 22px 0;
border-bottom: 5px solid white;
}
input:hover {
background-color: #dde5b6;
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: