Front-page
unknown
plain_text
2 years ago
6.9 kB
15
Indexable
<!DOCTYPE html>
<html>
<head>
<style>
body{margin:0}
.banner{position:relative;height:900px;display:flex;align-items:flex-start;justify-content:flex-start;text-align:left;color:#fff}
.banner__media{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;filter:brightness(40%)}
.banner__overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.5);z-index:1}
.banner__box{position:absolute;left:20rem;top:5cm;z-index:2}
.banner__heading{font-size:50px;margin:0.1em;line-height:1.2;display:flex;flex-wrap:wrap}
.banner__subtitle{font-size:17px;margin-bottom:0.1em;display:flex;flex-wrap:wrap} /* Updated font size to 17px */
.banner__button{width:223px;height:44px;letter-spacing:.1rem;font-size:1.5rem;font-weight:normal;color:#5C5C5C;border:none;border-radius:12px;font-family:"Montserrat",sans-serif;position:relative;overflow:hidden;transition:transform .4s ease,background-color .4s ease,border-radius .2s ease,color .4s ease;cursor:pointer}
.banner__button:before{content:'';position:absolute;top:5px;right:5px;bottom:5px;left:5px;z-index:-1;border-radius:10px}
.banner__button:hover{transform:translateY(2px);background-color:#9B046F;border-radius:15px;color:#fff}
.banner__button:hover:before{transform:translateX(100%)}
.reviews{display:flex;flex-wrap:nowrap;margin-top:200px;position:relative} /* Updated margin-top to reduce distance between button and line */
.reviews::before{content:"";position:absolute;top:0;left:0;width:100%;height:.6px;background-color:rgba(255,255,255,.5)}
.review{display:flex;flex-direction:column;align-items:center;text-align:center;width:4.5cm;font-size:9px;margin-right:10px;padding:5px 0;margin-bottom:5px}
.review__stars{color:gold;margin-bottom:3px;font-size:14px}
.review__title,.review__subtitle{margin:0}
/* Mobile Styles */
@media screen and (max-width:700px){
.banner__heading{font-size:25px}
.banner__box{padding:5%;left:2rem;top:2.5cm;} /* Updated top padding to reduce distance between H2 and line */
.banner__subheading{padding-bottom: 10px;} /* Updated padding to reduce distance between H2 and button */
.banner__media.banner-mobile{height:900px;max-height:900px;transform:scale(1)}
.banner__media.banner-desktop{display:none}
.banner__heading.mobile-line-break{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.review{width:50%;margin-bottom:20px;padding:3px 0;margin-right:5px}
.review__title,.review__subtitle{font-size:9px}
.review:nth-child(n+3){display:none}
}
/* Tablet Styles */
@media screen and (min-width:701px) and (max-width:1000px){
.banner__heading{font-size:35px}
.banner__box{padding:5%;left:2rem;top:5cm}
.banner__media.banner-mobile{height:450px;max-height:500px;transform:scale(1)} /* Update height to 50% of the original height */
.banner__media.banner-desktop{display:none}
.banner{height:50vh} /* Update height to 50% of the original height */
.review{width:33.33%;margin-bottom:50px;padding:3px 0;margin-right:5px}
.review__title,.review__subtitle{font-size:9px}
.review:nth-child(3),.review:nth-child(4){display:none}
}
/* Desktop Styles */
@media screen and (min-width:1001px){
.banner__media.banner-mobile{display:none}
.banner__media.banner-desktop{object-fit:cover;filter:brightness(40%)}
}
</style>
</head>
<body>
<section id="shopify-section-template--19106266349914__16400990552675e254" class="shopify-section">
<div id="Banner-template--19106266349914__16400990552675e254" class="banner banner--medium">
<div class="banner__overlay"></div>
<img src="https://cdn.shopify.com/s/files/1/0686/9581/8505/files/vecteezy_taking-the-wheel-man-in-uniform-is-working-in-the-auto-service_16728556_661_1_1.jpg?v=1689722178" alt="Banner Image" class="banner__media banner-mobile">
<img src="https://cdn.shopify.com/s/files/1/0686/9581/8505/files/vecteezy_taking-the-wheel-man-in-uniform-is-working-in-the-auto-service_16728556_661_1_1.jpg?v=1689722178" alt="Banner Image" class="banner__media banner-desktop">
<div class="banner__content banner__content--middle banner__mobile_content--top">
<div class="banner__box">
<h1 class="banner__heading">
HUD Liner: New Sweat-Transporting<br> Technology for Hand Protection
</h1>
<h2 class="banner__subheading" style="font-size: 17px; color: white; padding-bottom: 20px;"> The new innovative inner glove that protects your skin against sweat and itching while <br> providing superior comfort, precision, and durability. </h2>
<form action="https://www.hudsverige.se/collections/summer-collection" method="get" target="_blank">
<button type="submit" class="banner__button" style="background-color: transparent; border: 1px solid white; outline-color: #9B046F; color: white; background-image: none;"> 200 gloves left!</button>
</form>
<div class="reviews">
<div class="review">
<span class="review__stars" style="font-size: 19px;">★★★★★</span>
<h5 class="review__title"> <b>Huge difference!</b></h5>
<p class="review__subtitle">I love the HUD Liner. It's comfortable and does a great job at keeping my hands dry.
<br>
- Sofia M </p>
</div>
<div class="review" style="width: 4.5cm;">
<span class="review__stars" style="font-size: 19px;">★★★★</span>
<h5 class="review__title"><b>A matter of habit</b></h5>
<p class="review__subtitle"> I didn't get wet or sweaty, which was good, but it took some getting used to for everyday work.
<br>
- Emilia A <br></p>
</div>
<div class="review">
<span class="review__stars" style="font-size: 19px;">★★★★★</span>
<h5 class="review__title"><b>Better sleep</b></h5>
<p class="review__subtitle">I used to have major issues with cracked hands, but now I'm free from itching, sweat, and moisture. <br>
- Adam H
<br>
</p>
</div>
<div class="review">
<span class="review__stars" style="font-size: 19px;">★★★★★</span>
<h5 class="review__title"><b>100% Sweat free!</b></h5>
<p class="review__subtitle">Much better product than cotton gloves, as it avoids sweating and has better quality. <br>
- Michal</p>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>Editor is loading...