Porfolio Issues

Three problems…

  1. My nav bar works except that when I click on a link it does not take me to the start of the section it refers to. This is most notable when you click on “Projects”.

  2. I’m unable to get a background image to render in the section I want (the about section).

  3. I cannot change the font color or remove the underline from the link titles underneath my projects.

Thanks in advance

<body>
    
    <div class="wrapper">
    <header>
    <nav id="navbar">
        <a href="#welcome-section"><strong>About</strong></a>
        <a href="#projects"><strong>Projects</strong></a>
        <a href="#contact"><strong>Media</strong></a>
    </nav>
    </header>

    <section id="welcome-section">
        <h1>Hi, my name is Harrison,<br>welcome to my portfolio</h1>
    </section>

    <div class="project-bk">
    <h1>Some of my work...</h1>
    <section id="projects">
        <a target="_blank" href="https://codepen.io/greevesh/full/KoRxQy/"><img class="projectimg" src="https://res.cloudinary.com/greevesh/image/upload/v1534088935/muhammad_ali.jpg" alt=""><div class="project-title">Tribute Page</div></a>
        <a target="_blank" href="https://codepen.io/greevesh/full/XBaJyY/"><img class="projectimg" src="https://res.cloudinary.com/greevesh/image/upload/v1534090954/5230292300_7bff484bd0_b.jpg" alt=""><div class="project-title">Project Landing Page</div></a>
        <a target="_blank" href="https://codepen.io/greevesh/full/ajJeKr/"><img class="projectimg" src="https://res.cloudinary.com/greevesh/image/upload/v1534092146/survey_form.jpg" alt=""><div class="project-title">Survey Form</div></a>
    </section>
</div>

<div>
<h1 class="media">Access my GitHub profile</h1>
<h2 class="media">More coming soon...</h2>
<section id="contact">
        <div>
        <a target="_blank" href="https://github.com/greevesh?tab=repositories" id="profile-link">GitHub</a>
        </div>
    </section>
</div>
    </div>
</body>
.wrapper {
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    height: auto;
    width: auto;
}

#navbar {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 999;
    background: #fff;
    width: 100%;
    height: 75px;
    padding: 5px 0 5px 0;
}

nav a {
    margin: 30px;
    text-decoration: none;
    color: black;
    font-size: 20px;
}

nav a:hover {
    text-decoration: underline;
}

#welcome-section {
    background-image: url("https://images.pexels.com/photos/316466/pexels-photo-316466.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
    width: auto;
    font-size: 25px;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

#welcome-section h1 {
    animation-name: fadein;
    animation-duration: 10s;
}

@keyframes fadein {
    from {opacity: 0;}
    to {opacity: 100;}
}

.project-bk {
    background-color: rgb(111, 201, 192);
    box-shadow: 5px 5px 5px 5px;
}

.project-bk h1 {
    padding-top: 30px;
}

#projects {
    display: flex;
    justify-content: center;
    height: 100vh;
}

.projectimg {
    height: 300px;
    width: 300px;
    border: 2px solid rgb(0, 0, 0);
    margin: 50px;
}

.project-title {
    text-decoration: none;
    color: rgb(0, 0, 0);
    font-weight: bold;
    font-size: 30px;
}

.media {
    margin-top: 50px;
}

#profile-link {
    line-height: 3em;
    border: 2px solid rgb(0, 0, 0);
    border-radius: 25px;
    padding: 20px;
    text-decoration: none;
    background-color: rgb(111, 201, 192);
    color: black;
    font-size: 50px;
    box-shadow: 3px 3px 3px 3px;
}

@media screen and (max-width 992px) {
    .wrapper {
        background-color:
    }
}

@media screen and (max-width 600px) {
    .wrapper {
        background-color:
    }
}
  1. Because that place is exactly where you defined it to go. You probably want to move id=“projects” to its container div.
  2. It is rendering. Google search background-image position property to display where you want to display.
  3. Apply this property.
a {
  text-decoration :none;
}
1 Like

Thanks for the help. Everything else worked apart from moving my projects id to my container div. That just rearranges all my projects.

You can simply copy the styles you defined for id=“projects” and create another id and paste it in there. Apply the new id to your section and simply move projects id(which has empty style now) to the container div.

1 Like

Thanks. I also needed to shorten the height of the nav-bar.