Issues in linking to another page - html

Question

I am unable to link certain text (text that I want to link is in h6) to another page I've created. I'm following the standard format but somehow it is not working. Please help me!
HTML Code:
<ul class="ei-slider-large">
<li>
<img src="images/large/1.jpg" alt="slider1"/>
<div class="ei-title">
<h2>Welcome</h2> <br>
<h3>Child at Street 11</h3>
</div>
</li>
<li>
<img src="images/large/2.jpg" alt="slider2" />
<div class="ei-title2">
<h4>Enrol</h4><br>
<h5>Every child deserves to have an early education</h5><br>
<h6>Enrol Now</h6>
<br>
</div>
</li>
<li>
<img src="images/large/3.jpg" alt="slider3" />
<div class="ei-title2">
<h4>Donate</h4><br>
<h5>Give back to our society by helping the underpriviledged</h5><br>
<h6>Donate Now</h6>
</div>
</li>
<li>
<img src="images/large/4.jpg" alt="slider4"/>
<div class="ei-title2">
<h4>Volunteer</h4><br>
<h5>Lend us your hand with our many volunteer opportunities</h5><br>
<h6>Volunteer Now</h6>
</div>
</li>
</ul>
CSS Style:
.ei-title2 h6{
font-size: 25px;
text-decoration:underline;
font-family: 'Open Sans Condensed', sans-serif;
font-weight:300;
text-transform: uppercase;
color: #000;
letter-spacing:.02em;
background:#ffd40b;
display:inline;
padding: 0 10px 0 10px;}
.ei-title2 h6 a:hover{
-webkit-text-stroke: 1px;}
Thanks kind soul!