Anchor tag not working?

HTML & CSS
1

its driving me nuts. no a tag link is working or even shows that its clickable. I could put a link to a website and it does nothing.

a,
a:hover,
a:focus,
a:active {
    text-decoration: none;
    color: inherit;
}

a {
    display: inline-block;
    color: --beige;
    cursor: pointer;
}

img {
    display: block;
    width: 100%;
    height: auto;
}

body {
    height: 100%;
    left: 0;
    line-height: 1.4;
    margin: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 100%;
    background-color: var(--main-black);
    color: var(--beige);
    font-family: 'helixaregular';
}

h1, .mfont {
    font-family: 'young_morinregular';
}

h1 {
    font-size: 45px;
}

.biggertext {
    font-size: 35px;
}

.imgsize {
    width: 42px;
}

.main-wrapper {
    height: 100%;
    pointer-events: none;
    position: relative;

    max-width: 90%;
    margin: auto;
    display: flex;
    flex-direction: column;
}

.bottom-bar {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding-bottom: 30px;
    align-items: flex-end;
    align-self: flex-end;
    align-content: flex-end;
    position: absolute;
    bottom: 0;
}

.top-bar {

    width: 100%;
    z-index: 9;
    display: flex;
    justify-content: space-between;
    padding-top: 30px;
}

.top-bar, .bottom-bar {
    font-size: 25px;
}

.bottombar-wrap {
    position: absolute;
    display: flex;

}

.title {
    font-family: 'belgium_freeregular';
    letter-spacing: 13px;
    font-size: 20px;
}

and this is the HTML

<body>

<main class="main-wrapper">
  
    <div class="top-bar nav">
      <div>
 <a class="mfont biggertext" href="#">morayo</a></div>
<div>
      <a href="#" target="_blank" class="sparkle-effect">let's work</a></div>
    </div>
  


  <div class="main-inner">
      <h1>Morayo</h1>
      <span class="title">girl</span>
      <div class="tricross">
        <img src="assets\ornamental-cross.png" 
        alt="" class="imgsize">
        <img src="assets\ornamental-cross.png" 
        alt="" class="imgsize">
        <img src="assets\ornamental-cross.png" 
        alt="" class="imgsize">
        
      </div>
  </div>
 
  <div class="bottom-bar nav">
      <a href=".//pages/letswork.html" target="_blank">about</a>
      <a href=".//pages/letswork.html" target="_blank">services + work</a>
  </div>
 
</main>















</body>

</html>
2

I’ve never used the point-events tag, but I suspect it’s turning off all the pointer functionality on the whole page. Comment it out or delete it unless you know you need it for something.

1 Like
3

thank you!! thats what i get for copy and pasting that part.

1 Like