Whenever I attempt to input text into the div tag below, it mysteriously appears hyperlinked, even though there is no "a" tag enclosing it.
HTML:
<html>
<head>
<link href = "https://fonts.googleleapis.com/css?family=Work+Sans:300">
<link href = "MockUpV1.css" rel = "stylesheet" type = "text/css">
<meta charset = "UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home | TechHOUNDS</title>
</head>
<header>
<!-- Navigation Bar -->
<div class = "container">
<h1 class = "logo"></h1>
<img class = "test" src = "th_logo.png" width = "4.5%" height = "auto">
<nav>
<ul>
<li><a href = "https://techhounds.com"/>Home</li>
<li><a href = "https://google.com"/>Text1</li>
<li><a href = "https://google.com"/>Text2</li>
<li><a href = "https://google.com"/>Text3</li>
<li><a href = "https://google.com"/>Text4</li>
</ul>
</nav>
</div>
</header>
<body>
<div class="parallax"></div>
<div style = "height: 150%; background-color: white; font-size: 36px">
This is my fifth attempt at creating a parallax scroll effect.
</div>
<!-- Uncomment the line below if you want a background image as well -->
<!-- <div class="parallax"></div> -->
</body>
</html>
CSS:
body {
margin: 0;
background: #222;
font-family: 'Work Sans', sans-serif;
font-weight: 800;
}
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #f1f1f1;
}
header::after {
content: '';
display: table;
clear: both;
}
.logo {
float: left;
padding: 10px 0;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 70px;
padding-top: 23px;
position: relative;
}
nav a {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
nav a:hover {
color: #000;
}
nav a::before {
content: '';
display: block;
height: 3px;
background-color: #444;
position: absolute;
top: 100%;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before {
width: 100%;
}
body, html {
height: 100%;
}
.parallax {
/* The image used */
background-image: url('placeholder.png');
/* Full height */
height: 100%;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
I have come to understand that the reason "This is my fifth attempt at creating a parallax scroll effect." is displaying as hyperlinked is due to the presence of the "a" tag, and I am struggling to find a viable alternative to remove the hyperlink. Can anyone assist in "un"-linking the text?