Personal Portfolio Guidance

Hi there.

I am in need of some help with my personal portfolio project that I have been working on. I started the fCC curriculum about a month ago and received the Responsive Web Design certificate. This portfolio project is different from the fCC project; this is my own undertaking and it is built solely in HTML and CSS right now.

The issues I am having are:

  1. I cannot get the project cards in the “work” section of my portfolio to become active links without the whole container becoming one single active link. I thought this was an issue with targeting, but when I checked the HTML I could not identify the source of the problem because I thought I had created the appropriate divs. I would like for each project card to ultimately link to its appropriate GitHub repository.

  2. I also cannot get the Twitter, LinkedIn, and WordPress icons in the footer of the portfolio to become active links to my accounts. Perhaps I formatted the anchor tags incorrectly. I would like for each icon to link to my personal media page.

Below are both the HTML document and main CSS stylesheet for this project (excuse messy coding, I am a novice):

<!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 href="https://fonts.googleapis.com/css?family=Open+Sans|Quicksand:300&display=swap" rel="stylesheet">
  <script src="https://kit.fontawesome.com/039d567cea.js" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="CSS/style.css">
  <link rel="stylesheet" media="screen and (max-width: 768px)" href="CSS/mobile.css">
  <link rel="stylesheet" media="screen and (min-width: 1100px)"href="CSS/widescreen.css">
  <script src="https://kit.fontawesome.com/039d567cea.js" crossorigin="anonymous"></script>
  <title>G.A. Perez | Home</title>
</head>

<body>
<header id="showcase">
  <nav id="navbar">
    <h1 class="logo">G.A.P.</h1>
    <ul>
      <li><a href="#work">Work</a></li>
      <li><a href="#info">Info</a></li>
    </ul>
  </nav>
  <div class="landing">
    <h2>
     Conscious Coder
    </h2>
  </div>
</header>

<section class="projects" id="work">
  <div class="container">
    <div class="card" id="project-1">
      <a id="card-link" href="#"></a>
      </div>
    <div class="card" id="project-2">
      <a id="card-link" href="#"></a>
    </div>
    <div class="card" id="project-3">
    </div>
  </div>
</section>

<section id="info">

</section>
  
<footer id="footer">
  <div id="icon-group">
    <div class="icon">
      <i class="fab fa-twitter"><a href="https://twitter.com/ConsciousCoder1"></a></i>
  </div>
  <div class="icon">
    <i class="fab fa-linkedin"><a href="https://www.linkedin.com/in/amy-gabe-perez-9a8aa3110/"></a></i>
  </div>
    <div class="icon">
    <i class="fab fa-wordpress-simple"><a href="https://element.code.blog/"></a></i>
  </div>
</div>
  <h3>G.A.P. &copy; 2020, All Rights Reserved</h3>
</footer>
</body>
</html>



* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

* {scroll-behavior: smooth;}

:root {
--main-bg-color: #ddd;
--secondary-color: #dbdbdb;
}

body {
  font-family: 'Quicksand', Arial, Helvetica, sans-serif;
  background: var(--main-bg-color);
  line-height: 1.4;
}

/* Showcase with Nav*/

#showcase {
  background: url('/img/mount4.jpeg') no-repeat center center/cover;
  height: 100vh;
  padding: 2rem;
}

#showcase nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
}

#showcase nav ul {
list-style: none;
display: flex;
z-index: 2;
}

#showcase nav ul li a {
  text-decoration: none;
  padding: 0 1rem;
  color: #f4f4f4;
  animation: nav 2.5s ease-in;
}

@keyframes nav {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

#showcase nav ul li a:hover {
  color: #333;
  transition: color .7s;
}

nav .logo{
  font-size: 1rem;
  font-weight: 1000;
  color: #cfcfcf;
  z-index: 3;
  cursor: pointer;
  animation: logo 2.5s ease-in;
  }

  @keyframes logo {
    0%   { opacity: 0; }
    100% { opacity: 1; }
  }

  nav .logo:hover {
    color: #333;
    transition: color .7s;
  }

.landing {
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 0 2rem;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.3);
  z-index: 1;
}

.landing h2 {
  color: #cfcfcf;
  font-size: 4.5rem;
  font-stretch: expanded;
  animation: landing 2.5s ease-in;
}

@keyframes landing {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* Section: Projects */

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  padding: 2rem;
}

.container .card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
margin: 1.5rem;
width: 250px;
height: 250px;
color: #f4f4f4;

}

/* .card a {
  position: absolute;
  top: 0; 
  left: 0;
  height: 100%; 
  width: 100%;
} */

/* .card a:hover {
  background-color: rgba(0,0,0,0.3);
} */

.container #project-1 {
  background: url('/img/hotelbt.jpg') no-repeat center center/cover;
  border-radius: 3px;
}

section .container #project-2 {
  background: url('/img/edgeledger.jpg') no-repeat center center/cover;
  border-radius: 5px;
}

/* Footer */
footer {
  background: #bbb;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 20vh;
  color: #efefef;
  padding: 1rem;
  padding-bottom: 3rem;
  z-index: 3;
}

footer #icon-group {
  display: flex;
}

footer #icon-group .icon {
  font-size: 2rem;
  padding: 1rem;
}

Can anyone help me identify what I am doing wrong?
Thanks!

1 Like

the anchor elements seem fine
you just haven’t putted anything inside them, so they seems to not be there

<a href="#" id="empty_anchor"></a>No link here
<a href="#" id="correct_anchor">A link!</a>
1 Like

I would suggest you to send us the link of your project at codepen so we can actually test out and see what is happening.

The reason why your entire project card becomes a link is probably because you wrapped the <a> tags around the content inside (including the div). If you aren’t doing that, then you are probably styling the <a> tag instead of the div. To ensure that your project card is not a link, make sure that you make the div bigger than the <a>.

To make the icons into links, wrap the <a> tags around the icon <img> or <svg> tags.

Can’t wait to see the final product!

1 Like

Hi there. Thank you for these tips! I will check out these alternatives and see if I can get it to work. Here is the link to the codepen page. The main images are missing because they are from a local file.

This may not help much because the photos are missing, but let me know…
I also tried making putting the image in the HTML document and wrapping the img tags in anchor tags, but when I do that, the image takes over the entire viewport. I don’t quite understand why that happens or how to readjust the size for it to fit where it needs to. In addition to trying to make the card a link, I am trying to put an overlay on it as a hover event. I can’t seem to do that without having the link work first.

Update: I was able to figure it out. It took me resizing the original image and altering my HTML mark-up to make it look somewhat decent. Long way to go, but it will do for now.

<section class="projects" id="work">
  <div class="container">
    <div class="card" id="project-1">
      <a id="card-link" href="https://github.com/ConsciousCoder1/Hotel_BT_Website" target="_blank"><img src="/img/hotelbt.jpg" alt=""></a>
    </div>