Links show up in View Source but not clickable
Links show up in View Source but not clickable
I'm trying to understand how this demo site from Codrops works.
I'm trying to turn the titles into links, but despite showing up correctly in 'View Source', they aren't clickable when I run it live.
Why would that be the case?
I've copied the site's code below, with the links added pointing to google.com:
So far the only thing I've tried is nesting an tag inside the title tag, but I don't see why that doesn't work.
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Little Fragments | Codrops</title>
<meta name="keywords" content="effect, web design, javascript, css, poster, cut, fragment, parallax" />
<link rel="shortcut icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Inconsolata:400,700" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/fragments.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<script>document.documentElement.className = 'js';</script>
</head>
<body class="loading">
<main>
<section class="section section--intro">
<div class="content">
<div id="frag-1" class="fragment-wrap" style="background-image: url(img/2.jpg)"></div>
<h2 class="title"><a href="https://google.com">blazed</a></h2>
<p class="text"><span class="deco-bg deco-bg--color-1">“Waking up this morning, I smile. Twenty-four brand new hours are before me. I vow to live fully in each moment and to look at all beings with eyes of compassion.” ― Thich Nhat Hanh</span></p>
</div>
</section><!-- /intro -->
<section class="section section--flow">
<div class="content">
<div id="frag-2" class="fragment-wrap fragment-wrap--right" style="background-image: url(img/4.jpg)"></div>
<h2 class="title title--left"><a href="https://google.com">hollos</a></h2>
<p class="text text--left"><span class="deco-bg deco-bg--color-2">“Every thought, every word, and every action that adds to the positive and the wholesome is a contribution to peace. Each and every one of us is capable of making such a contribution.” ― Aung San Suu Kyi</span></p>
</div>
</section>
<section class="section section--flow">
<div class="content">
<div id="frag-3" class="fragment-wrap" style="background-image: url(img/1.jpg)"></div>
<h2 class="title"><a href="https://google.com">zizzle</a></h2>
<p class="text"><span class="deco-bg deco-bg--color-3">“The meaning of life is just to be alive. It is so plain and so obvious and so simple. And yet, everybody rushes around in a great panic as if it were necessary to achieve something beyond themselves.” ― Alan W. Watts</span></p>
</div>
</section>
<section class="section section--flow">
<div class="content">
<div id="frag-4" class="fragment-wrap fragment-wrap--right" style="background-image: url(img/3.jpg)"></div>
<h2 class="title title--left"><a href="https://google.com">shimmy</a></h2>
<p class="text text--left"><span class="deco-bg deco-bg--color-4">“We’re in such a hurry most of the time we never get much chance to talk. The result is a kind of endless day-to-day shallowness, a monotony that leaves a person wondering years later where all the time went and sorry that it’s all gone.” — Robert M. Pirsig</span></p>
</div>
</section>
<section class="section section--flow">
<div class="content">
<div id="frag-5" class="fragment-wrap" style="background-image: url(img/2.jpg)"></div>
<h2 class="title"><a href="https://google.com">eponym</a></h2>
<p class="text"><span class="deco-bg deco-bg--color-5">“To escape from the world means that one's mind is not concerned with the opinions of the world.” ― Koso Joyo Daishi</span></p>
</div>
</section>
</main>
<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/main.js"></script>
<script>
(function() {
imagesLoaded(document.querySelectorAll('.fragment-wrap'), { background: true }, function() {
document.body.classList.remove('loading');
new FragmentsFx(document.getElementById('frag-1'));
new FragmentsFx(document.getElementById('frag-2'), {
fragments: 15,
boundaries: {x1: 200, x2: 100, y1: 10, y2: 50},
randomIntervals: {
top: {min: 0,max: 90},
left: {min: 0,max: 90},
dimension: {
width: {min: 5,max: 20, fixedHeight: 5},
height: {min: 10,max: 100, fixedWidth: 5}
}
}
});
new FragmentsFx(document.getElementById('frag-3'), {
fragments: 20,
boundaries: {x1: 100, x2: 300, y1: 0, y2: 0},
randomIntervals: {
top: {min: 0,max: 90},
left: {min: 0,max: 90},
dimension: {
width: {min: 50,max: 100, fixedHeight: 0.5},
height: {min: 50,max: 100, fixedWidth: 0.5}
}
}
});
new FragmentsFx(document.getElementById('frag-4'), {
fragments: 10,
boundaries: {x1: 250, x2: 75, y1: 50, y2: 50},
randomIntervals: {
top: {min: 0,max: 90},
left: {min: 0,max: 90},
dimension: {
width: {min: 30,max: 50, fixedHeight: 10},
height: {min: 30,max: 50, fixedWidth: 10}
}
},
parallax: true
});
new FragmentsFx(document.getElementById('frag-5'), {
fragments: 20,
boundaries: {x1: 50, x2: 300, y1: 0, y2: 0},
randomIntervals: {
top: {min: 0,max: 40},
left: {min: 0,max: 90},
dimension: {
width: {min: 10,max: 50, fixedHeight: 0.5},
height: {min: 5,max: 10, fixedWidth: 5}
}
},
parallax: true,
randomParallax: {min: 30, max: 300}
});
});
})();
</script>
</body>
And the CSS:
*,
*::after,
*::before {
box-sizing: border-box;
}
body {
font-family: 'Inconsolata', monospace;
color: #080811;
background: #f0f0f0;
}
a {
text-decoration: none;
color: #c61dc8;
outline: none;
}
a:hover,
a:focus {
color: #333;
text-decoration: underline;
}
.hidden {
position: absolute;
overflow: hidden;
width: 0;
height: 0;
pointer-events: none;
}
/* Icons */
.icon {
display: block;
width: 1.5em;
height: 1.5em;
margin: 0 auto;
fill: currentColor;
}
/* Page Loader */
.js .loading::before {
content: '';
position: fixed;
z-index: 100;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #f0f0f0;
}
.js .loading::after {
content: '';
position: fixed;
z-index: 10000;
top: 50%;
left: 50%;
width: 30px;
height: 70px;
margin: -35px 0 0 -15px;
pointer-events: none;
border: 3px solid #c61dc8;
-webkit-animation: loaderAnim 0.8s ease-out infinite alternate
forwards;
animation: loaderAnim 0.8s ease-out infinite alternate forwards;
}
@-webkit-keyframes loaderAnim {
to {
-webkit-transform: translate3d(0, -100px, 0);
transform: translate3d(0, -100px, 0);
}
}
@keyframes loaderAnim {
to {
-webkit-transform: translate3d(0, -100px, 0);
transform: translate3d(0, -100px, 0);
}
}
.section {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.section--intro {
background: url(../img/arrow.svg) no-repeat calc(100% - 2em) calc(100% - 1.5em);
background-size: 40px;
min-height: 100vh;
}
.section--flow {
padding: 3em 0;
min-height: 100vh;
}
.section--related {
padding: 3em 1em;
font-weight: bold;
text-align: center;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.section__heading {
width: 100%;
}
.media-item {
display: inline-block;
padding: 1em;
vertical-align: top;
}
.media-item__img {
max-width: 100%;
}
.media-item:hover .media-item__img,
.media-item:focus .media-item__img {
border-top: 2px solid currentColor;
}
.media-item__title {
font-size: 1em;
margin: 0;
padding: 0.5em;
}
/* Content */
.content {
margin: auto;
max-width: 1200px;
min-height: 600px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-flex: 0;
-ms-flex: none;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
flex: none;
position: relative;
}
.title {
position: absolute;
font-size: 8vw;
margin: 0;
pointer-events: none;
bottom: 10%;
left: 35%;
}
.title--left {
left: auto;
right: 35%;
}
.text {
font-size: 1.15em;
position: absolute;
width: 50%;
bottom: calc(10% + 8vw);
left: 40%;
pointer-events: none;
}
.text--left {
left: 10%;
text-align: right;
}
.deco-bg {
line-height: 1.6;
}
.deco-bg--color-1 {
background: -webkit-linear-gradient(bottom, #807cfd 90%, transparent 90%, transparent);
background: linear-gradient(to top, #807cfd 90%, transparent 90%, transparent);
}
.deco-bg--color-2 {
background: -webkit-linear-gradient(bottom, #fdf164 90%, transparent 90%, transparent);
background: linear-gradient(to top, #fdf164 90%, transparent 90%, transparent);
}
.deco-bg--color-3 {
background: -webkit-linear-gradient(bottom, #93b3f2 90%, transparent 90%, transparent);
background: linear-gradient(to top, #93b3f2 90%, transparent 90%, transparent);
}
.deco-bg--color-4 {
background: -webkit-linear-gradient(bottom, #c2f3b0 90%, transparent 90%, transparent);
background: linear-gradient(to top, #c2f3b0 90%, transparent 90%, transparent);
}
.deco-bg--color-5 {
background: -webkit-linear-gradient(bottom, #ffb857 90%, transparent 90%, transparent);
background: linear-gradient(to top, #ffb857 90%, transparent 90%, transparent);
}
/* Adjust the layout for smaller screens */
@media screen and (max-width: 50em) {
.codrops-header__tagline,
.github {
margin: 1em 0 0;
width: 100%;
}
.fragment-wrap {
width: 80vw;
margin: 0;
}
.fragment-wrap--right {
margin: 0;
}
.text {
width: 80%;
left: 10%;
bottom: auto;
top: 10%;
}
.title {
font-size: 16vw;
}
}
1 Answer
1
The pointer-events: none; declaration under the .title rule is what's making those links unclickable
pointer-events: none;
.title
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
