Personal Portfolio Webpage - Build a Personal Portfolio Webpage

HTML-CSS
1

**Hey Guys, how do i make my “a” element stop overflowing and just occupy the img elements which is neested inside the “a” tag.?.. I gave it a border of white so i can know see where it’s overflowing. **

Your code so far

a href.PNG
a href.PNG1920×1196 162 KB 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Personal Portfolio Webpage</title>
  </head>
  <link rel="stylesheet" href="styles.css">
   <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
      integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay"
      crossorigin="anonymous"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Poppins:200i,300,400&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Raleway:700&display=swap"
      rel="stylesheet"
    />
  <body>
    <nav id="navbar">
      <ul class="nav-list">
        <li class="list-item"><a href="#">About</a></li>
        <li class="list-item"><a href="#">Work</a></li>
        <li class="list-item"><a href="#">Contact</a></li>
      </ul>
    </nav>
    <section id="welcome-section">
      <h1 style="color: white;" class="welcome">Hey I am Eastside</h1>
         <i><p class="sub-heading" style="color: #ca3433;"">a web developer</p></i>
    </section>
    <section id="projects">
      <h2 class="project-tile">These are some of my projects</h2>
      <div class="project-grid">
         <a
          href="https://codepen.io/freeCodeCamp/full/zNqgVx"
          target="_blank"
          class="project"
        >
          <img
            class="project-image"
            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute.jpg"
            alt="project"
          />
          <p class="project-title">
            <span class="code">&lt;</span>
            Tribute Page
            <span class="code">&#47;&gt;</span>
          </p>
        </a>
        <a
          href="https://codepen.io/freeCodeCamp/full/qRZeGZ"
          target="_blank"
          class="project project-tile"
        >
          <img
            class="project-image"
            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
            alt="project"
          />
          <p class="project-title">
            <span class="code">&lt;</span>
            Random Quote Machine
            <span class="code">&#47;&gt;</span>
          </p>
        </a>
        <a
          href="https://codepen.io/freeCodeCamp/full/wgGVVX"
          target="_blank"
          class="project project-tile"
        >
          <img
            class="project-image"
            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
            alt="project"
          />
          <p class="project-title">
            <span class="code">&lt;</span>
            JavaScript Calculator
            <span class="code">&#47;&gt;</span>
          </p>
        </a>
        <a
          href="https://codepen.io/freeCodeCamp/full/mVEJag"
          target="_blank"
          class="project project-tile"
        >
          <img
            class="project-image"
            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/map.jpg"
            alt="project"
          />
          <p class="project-title">
            <span class="code">&lt;</span>
            Map Data Across the Globe
            <span class="code">&#47;&gt;</span>
          </p>
        </a>
        <a
          href="https://codepen.io/freeCodeCamp/full/wGqEga"
          target="_blank"
          class="project project-tile"
        >
          <img
            class="project-image"
            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/wiki.png"
            alt="project"
          />
          <p class="project-title">
            <span class="code">&lt;</span>
            Wikipedia Viewer
            <span class="code">&#47;&gt;</span>
          </p>
        </a>
        <a
          href="https://codepen.io/freeCodeCamp/full/KzXQgy"
          target="_blank"
          class="project project-tile"
        >
          <img
            class="project-image"
            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tic-tac-toe.png"
            alt="project"
          />
          <p class="project-title">
            <span class="code">&lt;</span>
            Tic Tac Toe Game
            <span class="code">&#47;&gt;</span>
          </p>
        </a>
      </div>

      <a
        href="https://codepen.io/FreeCodeCamp/"
        class="btn btn-show-all"
        target="_blank"
        id="button">Show all<i class="fas fa-chevron-right"></i
      ></a>
    </section>
    <section id="contact-section">
     <h1 class="pro">Let's work together</h1>
     <i><p class="how">How do you take your coffee?</p></i>
     <div class="socials">
        <a href="https://facebook.com/freecodecamp" class="contact-details" target="_blank" ><i class="fab fa-facebook-f" id="facebook"></i>Facebook</a>
         <a id="profile-link" href="https://github.com/freecodecamp" class="contact-details"  target="_blank" ><i class="fab fa-github"></i>Github</a>
        <a href="https://twitter.com/freecodecamp" class="contact-details"  target="_blank"><i class="fab fa-twitter"id="twitter"></i>Twitter</a>
        <a href="/cdn-cgi/l/email-protection#8beef3eae6fbe7eecbeef3eae6fbe7eea5e8e4e6" class="contact-details" target="_blank" ><i class="fa fa-envelope" aria-hidden="true" id="mail"></i>
Send a mail</a>
<a href="tel:555-555-5555"class="contact-details"  target="_blank"><i class="fa fa-mobile" aria-hidden="true" id="phone"></i>Call me</a>
     </div>
    </section>
    <footer>
      <p class="fake">
        **This is just a fake portfolio. All the projects and contact details
        given are not real.
      </p>
      <p class=freecode>
        &copy; Created for
        <a href="https://www.freecodecamp.com/" target="_blank"
          class="created">freeCodeCamp <i class="fab fa-free-code-camp fa-lg"></i
        ></a>
      </p>
    </footer>
  <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>
  </body>
</html>

body {
  margin: 0;
  padding: 0;
  font-family: Poppins, Raleway;
  overflow-x: hidden;
}

#navbar {
  background-color:#ca3433;
  display: flex;
  justify-content: flex-end;
  font-weight: bold;
  position: fixed;
  z-index: 1000000;
  width: 100vw;
}

.nav-list {
  list-style: none;
  margin-right: 24px;
}

.nav-list .list-item {
  display: inline-block;
  padding: 15px 10px;
  margin-left: 16px;
}

a {
  text-decoration: none;
  font-size: 22px;
  color: #fdfff5 ;
}

#welcome-section {
  background-color: #303030;
  height: 100vh;
}

.welcome{ 
   position: absolute;
   bottom: 280px;
   left: 400px;
   font-size: 60px;
}

 .sub-heading {
   position: absolute;
   bottom: 250px;
   left: 490px;
   font-size: 30px;
}

h2 {
  text-align: center;
  font-size: 40px;
  color: white;
  border-bottom: 2px solid white;
  display: inline-block;
  margin-left: 330;
  margin-top: 90
}

#projects {
  background-color: #0e4d92;
  padding-bottom: 130
}


.project-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 10px;
}

#button {
  top: 50px;
}

img {
  width: 383px;
  height:370px;
  position: relative;
  margin-right: 12px;
  margin-left: 18px;
}

.project-title {
  text-align: center;
  background-color: #303030;
  height: 55px;
  width: 383px;
  position: relative;
  bottom: 22px;
  border-radius: 0 0 3px 3px;
}

.project-title {
  margin-left: 18px;
  padding-top: 20px;
}

a:hover > .code { 
  transform: translateX(5px);
  color:  #FFC000;
}

span {
 color: #303030;
}





.btn {
  position: relative;
  left: 570px;
  padding: 10px 25px;
  font-size: 20px;
  color: white;
  background-color: #303030;
  border: none;
  cursor: pointer;
  transition: all  0.9s  ease;
}

.btn:hover {
  background-color: #ca3433;
}

.btn:hover > i {
   transform: translateX(5px); 
}

button {
  margin-top: 100px;
}

#contact-section {
  background-color: #303030;
  height: 100vh;
  padding-top: 10px;
}

.pro {
  color: white;
  font-size: 55px;
  margin-left: 400px;
  margin-top: 170px;
}

.how {
  position: relative;
  bottom: 50px;
  left: 490px;
  color: white;
  font-size: 20px;
}



.contact-details {
 margin-left: 17px;
}


i {
  margin-right: 7px;
}

.socials {
  margin-left: 300
}

.socials > a:hover {
   color: grey;
  background-color: white;
  
}

footer {
  border-top: 4px solid #ca3433;
  background-color : #303030;
  padding-bottom: 2px;
}



.freecode {
  position: relative;
  left: 885px;
  bottom: 20px;
  color: white;
}

.fake {
  position: relative;
  left: 75px;
  top: 25px;
  color: white;
}

.created {
  font-size: 17px;
}

 a {
  border: 3px solid white;
 
}



![a href.PNG|690x429](upload://lCmUGEYm3ns4cnpm4iZFtRHBg3D.jpeg)

Your browser information:

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

Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Link to the challenge:

1 Like
2

Hi @Eastside

Check my answer here, it might help you in this one too.

Also remember you can change the display property in elements, for example:

a {
  display: block;
}

It might help too here.

But try to comment out all the CSS rules for layout and start over

You can use border and outline (I prefer this one because it does not affect other properties).

Happy coding!

1 Like
3

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