How can I add links for each box without causing issues with the "a" tag? What am I doing wrong?
.services-area {
padding: 120px 0;
}
.container3 {
display: flex;
width: 100%;
min-height: 500px;
background-color: #fff;
flex-wrap: wrap;
}
.main-text2 {
color: #333;
width: 100%;
padding: 0 40px;
margin: 0 10%;
}
.main-text2 h2 {
text-align: center;
}
.services {
display: flex;
width: 100%;
padding: 2rem 0;
}
.service {
display: flex;
width: 30%;
flex-direction: column;
align-items: center;
padding: 45px 55px;
transition: 0.25s;
}
.service:hover {
border-radius: 5px;
cursor: pointer;
transform: scale(1.1);
box-shadow: 10px 10px 20px;
border-color: #fff;
border: 1px;
}
.link {
display: grid;
}
.service-image {
width: 60px;
height: 60px;
margin: 0 0 23px;
}
.service-title {
color: #333;
font-size: 18px;
font-weight: bold;
align-items: end;
}
.service-text {
margin-top: 1rem;
font-size: 14px;
color: #333;
}
.service-price {
margin-top: 2rem;
align-self: flex-start;
}
.price-underline {
text-decoration: underline #999997 2px;
}<section class="services-area">
<div class="container3">
<div class="main-text2">
<h2>
We have a wide range of renovation services available
</h2>
<div class="services">
<div class="service">
<a href="sevice.html" target="_blank" class="link">
<div> <img class="service-image " src="images/paint-roller (1).png" alt=""></div>
<p class="service-title">Construction</p>
<p class="service-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, seagna aliqua maecenas accum lacus vel facilisis.</p>
<p class="service-price"> Prices from <span class="price-underline">$30/m2</span></p>
</a>
</div>
<div class="service">
<a href="sevice.html" target="_blank">
<div> <img class="service-image " src="images/painting.png" alt=""></div>
<p class="service-title"> Electrics</p>
<p class="service-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, seagna aliqua maecenas accum lacus vel facilisis.</p>
<p class="service-price">Prices from <span class="price-underline">$25/point</span></p>
</a>
</div>
<div class="service">
<a href="sevice.html" target="_blank">
<div> <img class="service-image " src="images/paint-roller.png" alt=""></div>
<p class="service-title"> Plumbing</p>
<p class="service-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, seagna aliqua maecenas accum lacus vel facilisis.</p>
<p class="service-price">Prices from<span class="price-underline"> $35/point</span></p>
</a>
</div>
</div>
</div>
</div>
</section>