Code Snippets

6.10
<style> .additional-text__social__outer { background: url(https://img.spidersnet.co.uk/code-snippets/social-neutral-bg.png) no-repeat center; background-size: cover; margin-bottom: 40px; padding: 30px 15px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px 40px; } .additional-text__social--image { display: none; } .additional-text__social--button .button { background: #000; color: #fff; border: 0; text-transform: none; border-radius: 10px; min-height: auto; } @media screen and (min-width: 48em) { .additional-text__social--image { display: block; } } @media screen and (min-width: 75em) { } </style> <div class="additional-text__social__outer clearfix"> <div class="additional-text__social"> <img src="https://img.spidersnet.co.uk/code-snippets/instagram-joinus.svg"> </div> <div class="additional-text__social--image"> <img src="https://img.spidersnet.co.uk/code-snippets/instagram-bubbles.svg"> </div> <div class="additional-text__social--button"> <a class="button" href="">Follow Us</a> </div> </div>
6.9
<style> .additional-text__social__outer { background: url(https://img.spidersnet.co.uk/code-snippets/social-instagram-bg.png) no-repeat center; background-size: cover; margin-bottom: 40px; padding: 30px 15px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px 40px; } .additional-text__social--image { display: none; } .additional-text__social--button .button { background: #000; color: #fff; border: 0; text-transform: none; border-radius: 10px; min-height: auto; } @media screen and (min-width: 48em) { .additional-text__social--image { display: block; } } @media screen and (min-width: 75em) { } </style> <div href="" class="additional-text__social__outer clearfix"> <div class="additional-text__social"> <img src="https://img.spidersnet.co.uk/code-snippets/instagram-joinus.svg"> </div> <div class="additional-text__social--image"> <img src="https://img.spidersnet.co.uk/code-snippets/instagram-bubbles.svg"> </div> <div class="additional-text__social--button"> <a class="button" href="">Follow Us</a> </div> </div>
6.8
<style> .additional-text__social__outer { background: url(https://img.spidersnet.co.uk/code-snippets/social-neutral-bg.png) no-repeat center; background-size: cover; margin-bottom: 40px; padding: 30px 15px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px 40px; } .additional-text__social--image { display: none; } .additional-text__social--button .button { background: #000; color: #fff; border: 0; text-transform: none; border-radius: 10px; min-height: auto; } @media screen and (min-width: 48em) { .additional-text__social--image { display: block; } } @media screen and (min-width: 75em) { } </style> <div class="additional-text__social__outer clearfix"> <div class="additional-text__social"> <img src="https://img.spidersnet.co.uk/code-snippets/facebook-joinus.svg"> </div> <div class="additional-text__social--image"> <img src="https://img.spidersnet.co.uk/code-snippets/facebook-bubbles.svg"> </div> <div class="additional-text__social--button"> <a class="button" href="">Follow Us</a> </div> </div>
6.7
<style> .additional-text__social__outer { background: url(https://img.spidersnet.co.uk/code-snippets/social-facebook-bg.png) no-repeat center; background-size: cover; margin-bottom: 40px; padding: 30px 15px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 20px 40px; } .additional-text__social--image { display: none; } .additional-text__social--button .button { background: #000; color: #fff; border: 0; text-transform: none; border-radius: 10px; min-height: auto; } @media screen and (min-width: 48em) { .additional-text__social--image { display: block; } } @media screen and (min-width: 75em) { } </style> <div class="additional-text__social__outer clearfix"> <div class="additional-text__social"> <img src="https://img.spidersnet.co.uk/code-snippets/facebook-joinus.svg"> </div> <div class="additional-text__social--image"> <img src="https://img.spidersnet.co.uk/code-snippets/facebook-bubbles.svg"> </div> <div class="additional-text__social--button"> <a class="button" href="">Follow Us</a> </div> </div>
5.24
<p style="margin-bottom: 0;"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"> </p> <style> .snippet-carmoney-banner { background: #E8F0F0; position: relative; font-family: "Poppins", sans-serif; } .snippet-carmoney-banner__inner { display: flex; padding: 0 15px; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px 40px; } .snippet-carmoney-banner__logo { background: #3A9F9E; border-radius: 0 0 35px 35px; padding: 10px 20px; padding-top: 50px; margin-bottom: 10px; align-self: flex-start; } .snippet-carmoney-banner__text { } .snippet-carmoney-banner__text h2 { font-size: 30px; line-height: 1.2; color: #000; font-family: "Poppins", sans-serif; text-transform: none; font-weight: 700; margin-bottom: 10px; } .snippet-carmoney-banner__text h2 img, .snippet-carmoney-banner__text h2 span { display: block; } .snippet-carmoney-banner__text h2 img { margin-bottom: 10px; } .snippet-carmoney-banner__text p { font-size: 20px; line-height: 1.2; color: #000; font-family: "Poppins", sans-serif; display: inline-block; margin-right: 30px; } .snippet-carmoney-banner__button .button { display: inline-block; background: #34908D; border-radius: 10px; border: 0; color: #fff; font-size: 18px; min-height: auto; text-transform: none; } .snippet-carmoney-banner__image { max-width: 200px; } @media screen and (min-width: 48em) { .snippet-carmoney-banner__logo { margin-bottom: 40px; } .snippet-carmoney-banner__text h2 { font-size: 42px; } } </style> <div class="snippet-carmoney-banner clearfix"> <div class="snippet-carmoney-banner__inner"> <div class="snippet-carmoney-banner__logo"> <img src="https://img.spidersnet.co.uk/code-snippets/carmoney-logo-white.png"> </div> <div class="snippet-carmoney-banner__text"> <h2>Cutting the cost of car finance</h2> <p>Find Your Ideal Car and Get a Quote</p> </div> <div class="snippet-carmoney-banner__button"> <a href="" class="button">View Showroom</a> </div> <div class="snippet-carmoney-banner__image"> <img src="https://img.spidersnet.co.uk/code-snippets/carmoney-img.png"> </div> </div> </div>
5.23
<p style="margin-bottom: 0;"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"> </p> <style> .snippet-carmoney-banner { background: #E8F0F0; padding: 20px 0; position: relative; font-family: "Poppins", sans-serif; } .snippet-carmoney-banner__inner { padding: 0 15px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px 80px; } .snippet-carmoney-banner__text { } .snippet-carmoney-banner__text h2 { font-size: 30px; line-height: 1.2; color: #000; font-family: "Poppins", sans-serif; text-transform: none; font-weight: 700; margin-bottom: 10px; } .snippet-carmoney-banner__text h2 img, .snippet-carmoney-banner__text h2 span { display: block; } .snippet-carmoney-banner__text h2 img { margin-bottom: 10px; } .snippet-carmoney-banner__text p { font-size: 20px; line-height: 1.2; color: #000; font-family: "Poppins", sans-serif; display: inline-block; margin-right: 30px; } .snippet-carmoney-banner__button { align-self: flex-end; margin-bottom: 10px; } .snippet-carmoney-banner__button .button { display: inline-block; background: #34908D; border-radius: 10px; border: 0; color: #fff; font-size: 18px; min-height: auto; text-transform: none; } .snippet-carmoney-banner__image { } @media screen and (min-width: 48em) { .snippet-carmoney-banner__text h2 { font-size: 42px; } } </style> <div class="snippet-carmoney-banner clearfix"> <div class="snippet-carmoney-banner__inner"> <div class="snippet-carmoney-banner__text"> <h2><img src="https://img.spidersnet.co.uk/code-snippets/carmoney-logo.png"><span>Cutting the cost of car finance</span></h2> <p>Find Your Ideal Car and Get a Quote</p> </div> <div class="snippet-carmoney-banner__button"> <a href="" class="button">View Showroom</a> </div> <div class="snippet-carmoney-banner__image"> <img src="https://img.spidersnet.co.uk/code-snippets/carmoney-img.png"> </div> </div> </div>
5.22
<p style="margin-bottom: 0;"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"> </p> <style> .snippet-carmoney-banner { background: #E8F0F0; padding: 20px 0; position: relative; font-family: "Poppins", sans-serif; } .snippet-carmoney-banner__inner { padding: 0 15px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px 80px; } .snippet-carmoney-banner__text { } .snippet-carmoney-banner__text h2 { font-size: 30px; line-height: 1.2; color: #000; font-family: "Poppins", sans-serif; text-transform: none; font-weight: 700; margin-bottom: 20px; } .snippet-carmoney-banner__text h2 img, .snippet-carmoney-banner__text h2 span, .snippet-carmoney-banner__text h2 .divider { display: inline-block; vertical-align: middle; } .snippet-carmoney-banner__text h2 img { margin-bottom: 20px; } .snippet-carmoney-banner__text h2 .divider { height: 60px; width: 1px; background: #000; margin: 0 18px; display: none; } .snippet-carmoney-banner__text p { font-size: 20px; line-height: 1.2; color: #000; font-family: "Poppins", sans-serif; display: inline-block; margin-right: 30px; } .snippet-carmoney-banner__text .button { display: inline-block; background: #34908D; border-radius: 10px; border: 0; color: #fff; font-size: 18px; min-height: auto; text-transform: none; } .snippet-carmoney-banner__image { } @media screen and (min-width: 48em) { .snippet-carmoney-banner__text h2 { font-size: 42px; } .snippet-carmoney-banner__text h2 img { margin-bottom: 0; } .snippet-carmoney-banner__text h2 .divider { display: inline-block; } } </style> <div class="snippet-carmoney-banner clearfix"> <div class="snippet-carmoney-banner__inner"> <div class="snippet-carmoney-banner__text"> <h2><img src="https://img.spidersnet.co.uk/code-snippets/carmoney-logo.png"><div class="divider"></div><span>Cutting the cost of car finance</span></h2> <p><img src="https://img.spidersnet.co.uk/code-snippets/carmoney-check.svg"> No Deposit Available</p> <p><img src="https://img.spidersnet.co.uk/code-snippets/carmoney-check.svg"> PCP and HP from 8.9% APR</p> <a href="" class="button">Find Your Car & Get a Quote</a> </div> <div class="snippet-carmoney-banner__image"> <img src="https://img.spidersnet.co.uk/code-snippets/carmoney-img.png"> </div> </div> </div>
3.9
- essential-2
<style> .additional-text__why-choose-us__outer { margin-bottom: 120px; background-image: url(https://img.spidersnet.co.uk/code-snippets/why-choose-bg.png); background-repeat: no-repeat; background-size: cover; background-position: center; background-color: #141414; padding: 30px 0px; clear: both; } .additional-text__why-choose-us { max-width: 1300px; margin: 0 auto; padding: 0 15px; } .additional-text__why-choose-us__title h3 { color: #fff; font-size: 18px; font-weight: 400; text-align: center; } .additional-text__why-choose-us__title h2 { color: #fff; font-size: 28px; font-weight: 600; text-align: center; margin-bottom: 30px; } .additional-text__why-choose-us ul { margin: 0; list-style-type: none; display: flex; gap: 15px 30px; flex-wrap: wrap; } .additional-text__why-choose-us li { width: 100%; border: 1px solid rgba(0, 0, 0, 0.20); background: #FFF; padding: 30px 20px; box-shadow: 0px 3.303px 16.514px 0px rgba(0, 0, 0, 0.15); } .additional-text__why-choose-us li .image { margin-bottom: 15px; min-height: 45px; } .additional-text__why-choose-us li h3 { font-size: 18px; font-weight: 700; } .additional-text__why-choose-us li .text p { font-weight: 400; margin-bottom: 0; } @media screen and (min-width: 48em) { .additional-text__why-choose-us__outer { padding-top: 50px; padding-bottom: 0; } .additional-text__why-choose-us h3 { font-size: 24px; } .additional-text__why-choose-us h2 { font-size: 42px; } .additional-text__why-choose-us li { width: calc(33.333% - 20px); margin-bottom: -80px; } } </style> <div class="additional-text__why-choose-us__outer"> <div class="additional-text__why-choose-us"> <div class="additional-text__why-choose-us__title"> <h3>Why Choose Us</h3> <h2>Experience and Service You Can Trust</h2> </div> <div class="additional-text__why-choose-us__blocks"> <ul> <li> <div class="image"><img src="https://img.spidersnet.co.uk/code-snippets/icons/wallet.svg"></div> <div class="text"> <h3>Finance Options</h3> <p>Flexible plans tailored to suit your budget</p> </div> </li> <li> <div class="image"><img src="https://img.spidersnet.co.uk/code-snippets/icons/family.svg"></div> <div class="text"> <h3>Family Business</h3> <p>Friendly, knowledgeable team with family values</p> </div> </li> <li> <div class="image"><img src="https://img.spidersnet.co.uk/code-snippets/icons/since.svg"></div> <div class="text"> <h3>Established 1998</h3> <p>Decades of experience you can rely on</p> </div> </li> </ul> </div> </div> </div>
3.10
- essential-2
<style> .additional-text__why-choose-us__outer { margin-bottom: 40px; clear: both; } .additional-text__why-choose-us { max-width: 1300px; margin: 0 auto; padding: 0 15px; } .additional-text__why-choose-us h2 { margin-bottom: 30px; text-align: center; font-size: 28px; } .additional-text__why-choose-us ul { margin: 0; list-style-type: none; display: flex; gap: 20px; flex-wrap: wrap; } .additional-text__why-choose-us li { width: 100%; border: 1px solid rgba(0, 0, 0, 0.10); display: flex; align-items: center; gap: 40px; position: relative; overflow: hidden; } .additional-text__why-choose-us li .image { flex-shrink: 0; display: block; height: 100px; width: 100px; background: #9A1320; display: flex; align-items: center; justify-content: center; position: relative; } .additional-text__why-choose-us li .image:after { content: ''; position: absolute; background: #9A1320; top: 0; bottom: 0; right: -20px; width: 100%; transform: skew(-20deg); } .additional-text__why-choose-us li .image img { filter: invert(1); position: relative; z-index: 1; } .additional-text__why-choose-us li .text { padding: 5px 20px; } .additional-text__why-choose-us li .text h3 { font-size: 24px; font-weight: 700; } .additional-text__why-choose-us li .text p { font-weight: 400; margin-bottom: 0; } @media screen and (min-width: 48em) { .additional-text__why-choose-us h2 { font-size: 42px; } .additional-text__why-choose-us li { width: calc(50% - 20px); } } </style> <div class="additional-text__why-choose-us__outer"> <div class="additional-text__why-choose-us"> <h2>Why Choose Us</h2> <ul> <li> <div class="image"><img src="https://img.spidersnet.co.uk/code-snippets/icons/wallet.svg"></div> <div class="text"> <h3>Finance Options</h3> <p>Flexible plans tailored to suit your budget</p> </div> </li> <li> <div class="image"><img src="https://img.spidersnet.co.uk/code-snippets/icons/family.svg"></div> <div class="text"> <h3>Family Business</h3> <p>Friendly, knowledgeable team with family values</p> </div> </li> <li> <div class="image"><img src="https://img.spidersnet.co.uk/code-snippets/icons/since.svg"></div> <div class="text"> <h3>Established 1998</h3> <p>Decades of experience you can rely on</p> </div> </li> <li> <div class="image"><img src="https://img.spidersnet.co.uk/code-snippets/icons/reviews.svg"></div> <div class="text"> <h3>Proven Reputation</h3> <p>Consistently praised by our happy customers</p> </div> </li> </ul> </div> </div>
6.6
<style> .additional-text__social { max-width: 1400px; margin: 0 auto; padding: 0 15px; text-align: center; } .additional-text__social__image { width: 100%; margin-bottom: 20px; } .additional-text__social__text { width: 100%; } .additional-text__social h3 { font-size: 20px; font-weight: 700; margin-bottom: 0; } .additional-text__social p { font-size: 18px; font-weight: 400; margin-bottom: 15px; } .additional-text__social .icons { display: flex; justify-content: center; gap: 15px; } .additional-text__social .icons a { height: 48px; width: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; padding: 10px; background: #ccc; } .additional-text__social .icons a:hover { opacity: 0.8; } .additional-text__social .icons a.facebook { background: #1877F2; } .additional-text__social .icons a.youtube { background: #FF0000; } .additional-text__social .icons a.x { background: #000; } .additional-text__social .icons a.instagram { background: linear-gradient(37deg, #F16565 13.9%, #E22C81 52.98%, #763ABE 84.58%); } @media screen and (min-width: 75em) { .additional-text__social { display: flex; align-items: center; } .additional-text__social__image { width: 60%; margin-bottom: 0; } .additional-text__social__text { width: 40%; } .additional-text__social h3 { font-size: 34px; } .additional-text__social p { font-size: 26px; } } </style> <div class="additional-text__social"> <div class="additional-text__social__image"> <img src="https://img.spidersnet.co.uk/code-snippets/social-placeholder-img.png"> </div> <div class="additional-text__social__text"> <h3>Follow us on our social channels</h3> <p>Stay connected for latest arrivals, offers and updates</p> <div class="icons"> <a href="" target="_blank" class="facebook"><img src="https://img.spidersnet.co.uk/code-snippets/icons/facebook.svg"></a> <a href="" target="_blank" class="youtube"><img src="https://img.spidersnet.co.uk/code-snippets/icons/youtube.svg"></a> <a href="" target="_blank" class="x"><img src="https://img.spidersnet.co.uk/code-snippets/icons/x.svg"></a> <a href="" target="_blank" class="instagram"><img src="https://img.spidersnet.co.uk/code-snippets/icons/instagram.svg"></a> </div> </div> </div>
6.5
<style> .additional-text__social__outer { margin-bottom: 40px; padding: 30px 0px; } .additional-text__social { max-width: 1400px; margin: 0 auto; padding: 0 15px; text-align: center; } .additional-text__social h3 { font-size: 26px; font-weight: 600; margin-bottom: 20px; } .additional-text__social .icons { display: flex; justify-content: center; flex-wrap: wrap; gap: 15px 30px; } .additional-text__social .icons a { width: calc(100% - 30px); background: #ccc; border-radius: 12px; padding: 40px 20px; display: flex; align-items: center; justify-content: center; text-align: left; gap: 30px; } .additional-text__social .icons a img { flex-shrink: 0; } .additional-text__social .icons a h4 { color: #fff; margin-bottom: 0; font-size: 12px; font-weight: 400; } .additional-text__social .icons a h3 { color: #fff; margin-bottom: 0; font-size: 18px; font-weight: 700; } .additional-text__social .icons a:hover { opacity: 0.8; } .additional-text__social .icons a.facebook { background: #1877F2; } .additional-text__social .icons a.youtube { background: #FF0000; } .additional-text__social .icons a.x { background: #000; } .additional-text__social .icons a.instagram { background: linear-gradient(37deg, #F16565 13.9%, #E22C81 52.98%, #763ABE 84.58%); } @media screen and (min-width: 48em) { .additional-text__social .icons a { width: calc(50% - 30px); } } @media screen and (min-width: 75em) { .additional-text__social .icons a { width: calc(25% - 30px); } } </style> <div class="additional-text__social__outer"> <div class="additional-text__social"> <h3>Follow us on our social channels</h3> <div class="icons"> <a href="" target="_blank" class="facebook"> <img src="https://img.spidersnet.co.uk/code-snippets/icons/facebook.svg"> <div class="text"> <h4>Facebook</h4> <h3>/spidersnet</h3> </div> </a> <a href="" target="_blank" class="youtube"> <img src="https://img.spidersnet.co.uk/code-snippets/icons/youtube.svg"> <div class="text"> <h4>Youtube</h4> <h3>/spidersnet</h3> </div> </a> <a href="" target="_blank" class="x"> <img src="https://img.spidersnet.co.uk/code-snippets/icons/x.svg"> <div class="text"> <h4>X</h4> <h3>/spidersnet</h3> </div> </a> <a href="" target="_blank" class="instagram"> <img src="https://img.spidersnet.co.uk/code-snippets/icons/instagram.svg"> <div class="text"> <h4>Instagram</h4> <h3>@spidersnet</h3> </div> </a> </div> </div> </div>
6.4
<style> .additional-text__social__outer { margin: 0 auto; margin-bottom: 40px; padding: 30px 0px; background: #000; border-radius: 10px; max-width: 1300px } .additional-text__social { text-align: center; } .additional-text__social h3, .additional-text__social p { font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 0; } .additional-text__social p { font-weight: 400; margin-bottom: 15px; } .additional-text__social .icons { display: flex; justify-content: center; align-items: center; gap: 20px; } .additional-text__social .icons a { width: 38px; } .additional-text__social .icons a:hover { opacity: 0.8; } @media screen and (min-width: 48em) { .additional-text__social__outer { padding: 40px 0px; } .additional-text__social h3, .additional-text__social p { font-size: 26px; } } @media screen and (min-width: 75em) { } </style> <div class="additional-text__social__outer"> <div class="additional-text__social"> <h3>Follow us on our social channels</h3> <p>Stay connected for latest arrivals, offers and updates</p> <div class="icons"> <a href="" target="_blank" class="facebook"><img src="https://img.spidersnet.co.uk/code-snippets/icons/facebook.svg"></a> <a href="" target="_blank" class="youtube"><img src="https://img.spidersnet.co.uk/code-snippets/icons/youtube.svg"></a> <a href="" target="_blank" class="x"><img src="https://img.spidersnet.co.uk/code-snippets/icons/x.svg"></a> <a href="" target="_blank" class="instagram"><img src="https://img.spidersnet.co.uk/code-snippets/icons/instagram.svg"></a> </div> </div> </div>
6.3
<style> .additional-text__social__outer { margin-bottom: 40px; padding: 30px 0px; background: #000; } .additional-text__social { max-width: 1400px; margin: 0 auto; padding: 0 15px; text-align: center; } .additional-text__social h3, .additional-text__social p { font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 0; } .additional-text__social p { font-weight: 400; margin-bottom: 15px; } .additional-text__social .icons { display: flex; justify-content: center; align-items: center; gap: 20px; } .additional-text__social .icons a { width: 38px; } .additional-text__social .icons a:hover { opacity: 0.8; } @media screen and (min-width: 48em) { .additional-text__social__outer { padding: 60px 0px; } .additional-text__social h3, .additional-text__social p { font-size: 26px; } } @media screen and (min-width: 75em) { } </style> <div class="additional-text__social__outer"> <div class="additional-text__social"> <h3>Follow us on our social channels</h3> <p>Stay connected for latest arrivals, offers and updates</p> <div class="icons"> <a href="" target="_blank" class="facebook"><img src="https://img.spidersnet.co.uk/code-snippets/icons/facebook.svg"></a> <a href="" target="_blank" class="youtube"><img src="https://img.spidersnet.co.uk/code-snippets/icons/youtube.svg"></a> <a href="" target="_blank" class="x"><img src="https://img.spidersnet.co.uk/code-snippets/icons/x.svg"></a> <a href="" target="_blank" class="instagram"><img src="https://img.spidersnet.co.uk/code-snippets/icons/instagram.svg"></a> </div> </div> </div>
6.2
<style> .additional-text__social__outer { margin-bottom: 40px; padding: 30px 0px; } .additional-text__social { max-width: 1400px; margin: 0 auto; padding: 0 15px; text-align: center; } .additional-text__social h3 { font-size: 26px; font-weight: 600; margin-bottom: 20px; } .additional-text__social .icons { display: flex; justify-content: center; gap: 15px; } .additional-text__social .icons a { height: 48px; width: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; padding: 10px; background: #ccc; } .additional-text__social .icons a:hover { opacity: 0.8; } .additional-text__social .icons a.facebook { background: #1877F2; } .additional-text__social .icons a.youtube { background: #FF0000; } .additional-text__social .icons a.x { background: #000; } .additional-text__social .icons a.instagram { background: linear-gradient(37deg, #F16565 13.9%, #E22C81 52.98%, #763ABE 84.58%); } @media screen and (min-width: 48em) { } @media screen and (min-width: 75em) { } </style> <div class="additional-text__social__outer"> <div class="additional-text__social"> <h3>Follow us on our social channels</h3> <div class="icons"> <a href="" target="_blank" class="facebook"><img src="https://img.spidersnet.co.uk/code-snippets/icons/facebook.svg"></a> <a href="" target="_blank" class="youtube"><img src="https://img.spidersnet.co.uk/code-snippets/icons/youtube.svg"></a> <a href="" target="_blank" class="x"><img src="https://img.spidersnet.co.uk/code-snippets/icons/x.svg"></a> <a href="" target="_blank" class="instagram"><img src="https://img.spidersnet.co.uk/code-snippets/icons/instagram.svg"></a> </div> </div> </div>
3.9
<style> .additional-text__why-choose-us__outer { margin-bottom: 120px; background-image: url(https://img.spidersnet.co.uk/code-snippets/why-choose-bg.png); background-repeat: no-repeat; background-size: cover; background-position: center; background-color: #141414; padding: 30px 0px; clear: both; } .additional-text__why-choose-us { max-width: 1400px; margin: 0 auto; padding: 0 15px; } .additional-text__why-choose-us__title h3 { color: #fff; font-size: 18px; font-weight: 400; text-align: center; } .additional-text__why-choose-us__title h2 { color: #fff; font-size: 28px; font-weight: 600; text-align: center; margin-bottom: 30px; } .additional-text__why-choose-us ul { margin: 0; list-style-type: none; display: flex; gap: 15px 30px; flex-wrap: wrap; } .additional-text__why-choose-us li { width: 100%; border-radius: 10px; border: 1px solid rgba(0, 0, 0, 0.10); background: #FFF; padding: 30px 20px; box-shadow: 0px 0px 1px 0px rgba(113, 128, 150, 0.04), 0px 4px 8px 0px rgba(113, 128, 150, 0.08); } .additional-text__why-choose-us li .image { margin-bottom: 15px; min-height: 45px; } .additional-text__why-choose-us li h3 { font-size: 18px; font-weight: 600; } .additional-text__why-choose-us li .text p { font-weight: 400; margin-bottom: 0; } @media screen and (min-width: 48em) { .additional-text__why-choose-us__outer { padding-top: 50px; padding-bottom: 0; } .additional-text__why-choose-us h3 { font-size: 24px; } .additional-text__why-choose-us h2 { font-size: 42px; } .additional-text__why-choose-us li { width: calc(33.333% - 20px); margin-bottom: -80px; } } </style> <div class="additional-text__why-choose-us__outer"> <div class="additional-text__why-choose-us"> <div class="additional-text__why-choose-us__title"> <h3>Why Choose Us</h3> <h2>Experience and Service You Can Trust</h2> </div> <div class="additional-text__why-choose-us__blocks"> <ul> <li> <div class="image"><img src="https://img.spidersnet.co.uk/code-snippets/icons/wallet.svg"></div> <div class="text"> <h3>Finance Options</h3> <p>Flexible plans tailored to suit your budget</p> </div> </li> <li> <div class="image"><img src="https://img.spidersnet.co.uk/code-snippets/icons/family.svg"></div> <div class="text"> <h3>Family Business</h3> <p>Friendly, knowledgeable team with family values</p> </div> </li> <li> <div class="image"><img src="https://img.spidersnet.co.uk/code-snippets/icons/since.svg"></div> <div class="text"> <h3>Established 1998</h3> <p>Decades of experience you can rely on</p> </div> </li> </ul> </div> </div> </div>
3.8
- premier-9
<style> .additional-text__why-choose-us__outer { clear: both; max-width: 1920px; margin: 0 auto; margin-bottom: 40px; } .additional-text__why-choose-us { background-image: url(https://img.spidersnet.co.uk/code-snippets/why-choose-bg.png); background-repeat: no-repeat; background-size: cover; background-position: center; background-color: #6A0707; padding: 20px; border-radius: 20px; margin-left: 15px; margin-right: 15px; } .additional-text__why-choose-us__title { text-align: center; } .additional-text__why-choose-us h3 { color: #fff; font-size: 18px; font-weight: 400; } .additional-text__why-choose-us h2 { color: #fff; font-size: 28px; font-weight: 600; } .additional-text__why-choose-us ul { margin: 0; list-style-type: none; display: flex; gap: 20px; flex-wrap: wrap; } .additional-text__why-choose-us li { width: 100%; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.30); display: flex; flex-direction-column; text-align: center; align-items: center; gap: 20px; padding: 20px; color: #fff; } .additional-text__why-choose-us li .image { flex-shrink: 0; display: block; height: 100px; width: 100px; background: rgba(255, 255, 255, 0.20); border-radius: 20px; display: flex; align-items: center; justify-content: center; padding: 20px; } .additional-text__why-choose-us li .image img { filter: invert(1); } .additional-text__why-choose-us li .text h3 { font-size: 20px; font-weight: 600; } .additional-text__why-choose-us li .text p { font-weight: 400; margin-bottom: 0; font-size: 16px; } @media screen and (min-width: 48em) { .additional-text__why-choose-us { padding: 30px 0 30px 30px; } .additional-text__why-choose-us h3 { font-size: 24px; } .additional-text__why-choose-us h2 { font-size: 42px; } .additional-text__why-choose-us li { width: calc(50% - 20px); flex-direction: row; text-align: left; } .additional-text__why-choose-us__outer { padding: 50px 0; } } @media screen and (min-width: 75em) { .additional-text__why-choose-us { display: flex; gap: 15px; } .additional-text__why-choose-us__title { width: 33%; text-align: left; } .additional-text__why-choose-us__blocks { width: 67%; } } @media screen and (min-width: 90em) { .additional-text__why-choose-us__outer { padding-left: 70px; padding-right: 70px; } } </style> <div class="additional-text__why-choose-us__outer"> <div class="additional-text__why-choose-us"> <div class="additional-text__why-choose-us__title"> <h3>Why Choose Us</h3> <h2>Experience and Service You Can Trust</h2> </div> <div class="additional-text__why-choose-us__blocks"> <ul> <li> <div class="image"><img src="https://img.spidersnet.co.uk/code-snippets/icons/wallet.svg"></div> <div class="text"> <h3>Finance Options</h3> <p>Flexible plans tailored to suit your budget</p> </div> </li> <li> <div class="image"><img src="https://img.spidersnet.co.uk/code-snippets/icons/family.svg"></div> <div class="text"> <h3>Family Business</h3> <p>Friendly, knowledgeable team with family values</p> </div> </li> <li> <div class="image"><img src="https://img.spidersnet.co.uk/code-snippets/icons/since.svg"></div> <div class="text"> <h3>Established 1998</h3> <p>Decades of experience you can rely on</p> </div> </li> <li> <div class="image"><img src="https://img.spidersnet.co.uk/code-snippets/icons/reviews.svg"></div> <div class="text"> <h3>Proven Reputation</h3> <p>Consistently praised by our happy customers</p> </div> </li> </ul> </div> </div> </div>
3.8
- premier-1
- premier-2
- premier-3
- premier-4
- premier-5
- premier-6
- premier-7
- premier-8
- premier-10
- premier-11
- essential-1
- essential-2
- essential-3
- essential-4
<style> .additional-text__why-choose-us__outer { margin-bottom: 40px; background-image: url(https://img.spidersnet.co.uk/code-snippets/why-choose-bg.png); background-repeat: no-repeat; background-size: cover; background-position: center; background-color: #6A0707; padding: 30px 0; clear: both; } .additional-text__why-choose-us { max-width: 1400px; margin: 0 auto; padding: 0 15px; } .additional-text__why-choose-us__title { text-align: center; } .additional-text__why-choose-us h3 { color: #fff; font-size: 18px; font-weight: 400; } .additional-text__why-choose-us h2 { color: #fff; font-size: 28px; font-weight: 600; } .additional-text__why-choose-us ul { margin: 0; list-style-type: none; display: flex; gap: 20px; flex-wrap: wrap; } .additional-text__why-choose-us li { width: 100%; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.30); display: flex; align-items: center; gap: 20px; padding: 20px; color: #fff; } .additional-text__why-choose-us li .image { flex-shrink: 0; display: block; height: 100px; width: 100px; background: rgba(255, 255, 255, 0.20); border-radius: 10px; display: flex; align-items: center; justify-content: center; } .additional-text__why-choose-us li .image img { filter: invert(1); } .additional-text__why-choose-us li .text h3 { font-size: 24px; font-weight: 600; } .additional-text__why-choose-us li .text p { font-weight: 400; margin-bottom: 0; } @media screen and (min-width: 48em) { .additional-text__why-choose-us h3 { font-size: 24px; } .additional-text__why-choose-us h2 { font-size: 42px; } .additional-text__why-choose-us li { width: calc(50% - 20px); } .additional-text__why-choose-us__outer { padding: 50px 0; } } @media screen and (min-width: 75em) { .additional-text__why-choose-us { display: flex; } .additional-text__why-choose-us__title { width: 33%; text-align: left; } .additional-text__why-choose-us__blocks { width: 67%; } } </style> <div class="additional-text__why-choose-us__outer"> <div class="additional-text__why-choose-us"> <div class="additional-text__why-choose-us__title"> <h3>Why Choose Us</h3> <h2>Experience and Service You Can Trust</h2> </div> <div class="additional-text__why-choose-us__blocks"> <ul> <li> <div class="image"><img src="https://img.spidersnet.co.uk/code-snippets/icons/wallet.svg"></div> <div class="text"> <h3>Finance Options</h3> <p>Flexible plans tailored to suit your budget</p> </div> </li> <li> <div class="image"><img src="https://img.spidersnet.co.uk/code-snippets/icons/family.svg"></div> <div class="text"> <h3>Family Business</h3> <p>Friendly, knowledgeable team with family values</p> </div> </li> <li> <div class="image"><img src="https://img.spidersnet.co.uk/code-snippets/icons/since.svg"></div> <div class="text"> <h3>Established 1998</h3> <p>Decades of experience you can rely on</p> </div> </li> <li> <div class="image"><img src="https://img.spidersnet.co.uk/code-snippets/icons/reviews.svg"></div> <div class="text"> <h3>Proven Reputation</h3> <p>Consistently praised by our happy customers</p> </div> </li> </ul> </div> </div> </div>
3.7
<style> .additional-text__why-choose-us__outer { margin-bottom: 40px; clear: both; } .additional-text__why-choose-us { max-width: 1400px; margin: 0 auto; padding: 0 15px; } .additional-text__why-choose-us h2 { margin-bottom: 30px; text-align: center; font-size: 28px; } .additional-text__why-choose-us ul { margin: 0; list-style-type: none; display: flex; gap: 20px; flex-wrap: wrap; } .additional-text__why-choose-us li { width: 100%; border-radius: 10px; border: 1px solid rgba(0, 0, 0, 0.10); display: flex; align-items: center; gap: 20px; padding: 20px; } .additional-text__why-choose-us li .image { flex-shrink: 0; display: block; height: 100px; width: 100px; background: #F1F1F1; border-radius: 10px; display: flex; align-items: center; justify-content: center; } .additional-text__why-choose-us li .text h3 { font-size: 24px; font-weight: 600; } .additional-text__why-choose-us li .text p { font-weight: 400; margin-bottom: 0; } @media screen and (min-width: 48em) { .additional-text__why-choose-us h2 { font-size: 42px; } .additional-text__why-choose-us li { width: calc(50% - 20px); } } @media screen and (min-width: 75em) { .additional-text__why-choose-us li { width: calc(33.333% - 20px); } } </style> <div class="additional-text__why-choose-us__outer"> <div class="additional-text__why-choose-us"> <h2>Why Choose Us</h2> <ul> <li> <div class="image"><img src="https://img.spidersnet.co.uk/code-snippets/icons/wallet.svg"></div> <div class="text"> <h3>Finance Options</h3> <p>Flexible plans tailored to suit your budget</p> </div> </li> <li> <div class="image"><img src="https://img.spidersnet.co.uk/code-snippets/icons/family.svg"></div> <div class="text"> <h3>Family Business</h3> <p>Friendly, knowledgeable team with family values</p> </div> </li> <li> <div class="image"><img src="https://img.spidersnet.co.uk/code-snippets/icons/since.svg"></div> <div class="text"> <h3>Established 1998</h3> <p>Decades of experience you can rely on</p> </div> </li> <li> <div class="image"><img src="https://img.spidersnet.co.uk/code-snippets/icons/reviews.svg"></div> <div class="text"> <h3>Proven Reputation</h3> <p>Consistently praised by our happy customers</p> </div> </li> <li> <div class="image"><img src="https://img.spidersnet.co.uk/code-snippets/icons/exchange.svg"></div> <div class="text"> <h3>Part Exchange</h3> <p>Fair valuations for your current vehicle trade-in</p> </div> </li> <li> <div class="image"><img src="https://img.spidersnet.co.uk/code-snippets/icons/warranty.svg"></div> <div class="text"> <h3>Warranty Options</h3> <p>Extended cover available for added peace of mind</p> </div> </li> </ul> </div> </div>
5.21
<p style="margin-bottom: 0;"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300..800&display=swap" rel="stylesheet"> </p> <style> .snippet-aa-banner { padding: 0 15px; max-width: 1300px; margin: 0 auto; } .snippet-aa-banner__inner { background: url(https://img.spidersnet.co.uk/code-snippets/aa-bg-box-dark.png) no-repeat center; background-size: cover; border-radius: 10px; padding: 50px 15px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px 80px; text-align: center; } .snippet-aa-banner__text { } .snippet-aa-banner__text h2 { font-size: 40px; line-height: 1.2; margin-bottom: 0; color: #fff; font-family: "Open Sans", sans-serif; text-transform: none; font-weight: 700; } .snippet-aa-banner__text p { font-size: 20px; line-height: 1.2; margin-bottom: 0; color: #fff; font-family: "Open Sans", sans-serif; } .snippet-aa-banner__image { } .snippet-aa-banner__image img { border-radius: 5px; background: #FFD302; max-width: 250px !important; padding: 10px; } </style> <div class="snippet-aa-banner clearfix"> <div class="snippet-aa-banner__inner"> <div class="snippet-aa-banner__text"> <h2>You're in Safe Hands</h2> <p>This dealer has signed up to our Dealer Promise</p> </div> <div class="snippet-aa-banner__image"> <img src="https://img.spidersnet.co.uk/code-snippets/aa-cars-standard.svg"> </div> </div> </div>
5.20
<p style="margin-bottom: 0;"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300..800&display=swap" rel="stylesheet"> </p> <style> .snippet-aa-banner { padding: 0 15px; max-width: 1300px; margin: 0 auto; } .snippet-aa-banner__inner { background: url(https://img.spidersnet.co.uk/code-snippets/aa-bg-box-light.png) no-repeat center; background-size: cover; border-radius: 10px; padding: 50px 15px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px 80px; text-align: center; } .snippet-aa-banner__text { } .snippet-aa-banner__text h2 { font-size: 40px; line-height: 1.2; margin-bottom: 0; font-family: "Open Sans", sans-serif; text-transform: none; font-weight: 700; color: #000; } .snippet-aa-banner__text p { font-size: 20px; line-height: 1.2; margin-bottom: 0; font-family: "Open Sans", sans-serif; color: #000; } .snippet-aa-banner__image { } .snippet-aa-banner__image img { border-radius: 5px; background: #FFD302; max-width: 250px !important; padding: 10px; } </style> <div class="snippet-aa-banner clearfix"> <div class="snippet-aa-banner__inner"> <div class="snippet-aa-banner__text"> <h2>You're in Safe Hands</h2> <p>This dealer has signed up to our Dealer Promise</p> </div> <div class="snippet-aa-banner__image"> <img src="https://img.spidersnet.co.uk/code-snippets/aa-cars-standard.svg"> </div> </div> </div>
5.19
<p style="margin-bottom: 0;"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300..800&display=swap" rel="stylesheet"> </p> <style> .snippet-aa-banner { background: url(https://img.spidersnet.co.uk/code-snippets/aa-bg-dark-wide.png) no-repeat center; background-size: cover; padding: 50px 0; position: relative; } .snippet-aa-banner:before, .snippet-aa-banner:after { position: absolute; display: block; top: 2px; left: 0; right: 0; height: 2px; background: rgba(255, 255, 255, 0.30); } .snippet-aa-banner:after { top: auto; bottom: 2px; } .snippet-aa-banner__inner { padding: 0 15px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px 80px; text-align: center; } .snippet-aa-banner__text { } .snippet-aa-banner__text h2 { font-size: 40px; line-height: 1.2; margin-bottom: 0; color: #fff; font-family: "Open Sans", sans-serif; text-transform: none; font-weight: 700; } .snippet-aa-banner__text p { font-size: 20px; line-height: 1.2; margin-bottom: 0; color: #fff; font-family: "Open Sans", sans-serif; } .snippet-aa-banner__image { } .snippet-aa-banner__image img { border-radius: 5px; background: #FFD302; max-width: 250px !important; padding: 10px; } </style> <div class="snippet-aa-banner clearfix"> <div class="snippet-aa-banner__inner"> <div class="snippet-aa-banner__text"> <h2>You're in Safe Hands</h2> <p>This dealer has signed up to our Dealer Promise</p> </div> <div class="snippet-aa-banner__image"> <img src="https://img.spidersnet.co.uk/code-snippets/aa-cars-standard.svg"> </div> </div> </div>
5.18
<p style="margin-bottom: 0;"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300..800&display=swap" rel="stylesheet"> </p> <style> .snippet-aa-banner { background: url(https://img.spidersnet.co.uk/code-snippets/aa-bg-light-wide.png) no-repeat center; background-size: cover; padding: 50px 0; } .snippet-aa-banner__inner { padding: 0 15px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px 80px; text-align: center; } .snippet-aa-banner__text { } .snippet-aa-banner__text h2 { font-size: 40px; line-height: 1.2; margin-bottom: 0; font-family: "Open Sans", sans-serif; text-transform: none; font-weight: 700; color: #000; } .snippet-aa-banner__text p { font-size: 20px; line-height: 1.2; margin-bottom: 0; font-family: "Open Sans", sans-serif; color: #000; } .snippet-aa-banner__image { } .snippet-aa-banner__image img { border-radius: 5px; background: #FFD302; max-width: 250px !important; padding: 10px; } </style> <div class="snippet-aa-banner clearfix"> <div class="snippet-aa-banner__inner"> <div class="snippet-aa-banner__text"> <h2>You're' in Safe Hands</h2> <p>This dealer has signed up to our Dealer Promise</p> </div> <div class="snippet-aa-banner__image"> <img src="https://img.spidersnet.co.uk/code-snippets/aa-cars-standard.svg"> </div> </div> </div>
2.3
<style> .additional-style.additional-style-56 { background: linear-gradient(to right, #EDEFF3, transparent); border-radius: 10px; position: relative; padding: 20px 10px; margin-bottom: 30px; } .additional-style.additional-style-56 .image-wrapper { display: flex; flex-wrap: wrap; gap: 30px; } .additional-style.additional-style-56 .image-wrap { background: #F8F9FB; border-radius: 5px; padding: 15px; display: flex; align-items: center; justify-content: center; height: 117px; flex: 1; } .additional-style.additional-style-56 .image-wrap img { max-height: 100%; } .additional-style.additional-style-56 .text-wrap { text-align: center; margin-bottom: 10px; } .additional-style.additional-style-56 .text-wrap h3 { font-weight: normal; font-size: 24px; margin-bottom: 0; } @media screen and (min-width: 48em) { .additional-style.additional-style-56 { padding: 10px; } .additional-style.additional-style-56 .additional-style-inner { display: flex; align-items: center; } .additional-style.additional-style-56 .text-wrap { width: 40%; order: 2; margin-bottom: 0; } .additional-style.additional-style-56 .image-wrapper { width: 60%; order: 1; } } </style> <div class="additional-style additional-style-56 clearfix"> <div class="additional-style-inner"> <div class="text-wrap"> <h3>Trusted Finance Partners</h3> </div> <div class="image-wrapper"> <div class="image-wrap"> <img src="/media/websitemedia/12562/websiteMedia/4939/1748359923-closebros.png"> </div> <div class="image-wrap"> <img src="/media/websitemedia/12562/websiteMedia/4939/1748359866-first-response-finance-logo-2.png"> </div> </div> </div> </div>
4.7
- essential-3
- essential-4
<style> .additional-style.additional-style-54 h2, .additional-style.additional-style-54 h3, .additional-style.additional-style-54 p, .additional-style.additional-style-54 ul { color: #fff; margin-bottom: 0; } .additional-style.additional-style-54 h3 { font-weight: 500; font-size: 30px; } .additional-style.additional-style-54 a:hover { opacity: 0.8; } .additional-style.additional-style-54 { max-width: 1300px; margin-right: auto; margin-left: auto; } .additional-style.additional-style-54 .additional-style-wrap { background-image: url(https://img.spidersnet.co.uk/code-snippets/style-54-bg.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; padding: 20px 0; border-radius: 20px; } .additional-style.additional-style-54 .additional-style-inner { width: 100%; float: left; padding-right: 0.9375rem; padding-left: 0.9375rem; } .additional-style.additional-style-54 .stars { color: #E8BF19; font-size: 24px; } .additional-style.additional-style-54 p { margin-bottom: 20px; } .additional-style.additional-style-54 .logos { display: flex; gap: 10px; } @media screen and (min-width: 48em) { .additional-style.additional-style-54 h3 { font-size: 42px; line-height: 1; } additional-style.additional-style-54 p { font-size: 20px; } .additional-style.additional-style-54 .additional-style-wrap { padding: 60px 30px; } .additional-style.additional-style-54 h3 { font-size: 32px; } .additional-style.additional-style-54 p { font-size: 20px; } } </style> <div class="additional-style additional-style-54 clearfix"> <div class="additional-style-wrap"> <div class="additional-style-inner"> <div class="stars">★★★★★</div> <h3>Customer Reviews</h3> <p>See what our customers have to say...</p> <div class="logos"> <a href="PUT_LINK_HERE" target="_blank"><img src="https://img.spidersnet.co.uk/code-snippets/google-button.svg"></a> <a href="PUT_LINK_HERE" target="_blank"><img src="https://img.spidersnet.co.uk/code-snippets/autotrader-button.svg"></a> <a href="PUT_LINK_HERE" target="_blank"><img src="https://img.spidersnet.co.uk/code-snippets/facebook-button.svg"></a> </div> </div> </div> </div>
4.7
- premier-9
<style> .additional-style.additional-style-54 h2, .additional-style.additional-style-54 h3, .additional-style.additional-style-54 p, .additional-style.additional-style-54 ul { color: #fff; margin-bottom: 0; } .additional-style.additional-style-54 h3 { font-weight: 500; font-size: 30px; } .additional-style.additional-style-54 a:hover { opacity: 0.8; } .additional-style.additional-style-54 { clear: both; margin-right: auto; margin-left: auto; max-width: 1920px; padding-left: 15px; padding-right: 15px; } @media screen and (min-width: 75em) { .additional-style.additional-style-54 { padding-left: 50px; padding-right: 50px; } } @media screen and (min-width: 90em) { .additional-style.additional-style-54 { padding-left: 70px; padding-right: 70px; } } .additional-style.additional-style-54 .additional-style-wrap { max-width: 100%; background-image: url(https://img.spidersnet.co.uk/code-snippets/style-54-bg.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; padding: 20px 0; border-radius: 20px; } .additional-style.additional-style-54 .additional-style-inner { width: 100%; float: left; padding-right: 0.9375rem; padding-left: 0.9375rem; } .additional-style.additional-style-54 .stars { color: #E8BF19; font-size: 24px; } .additional-style.additional-style-54 p { margin-bottom: 20px; } .additional-style.additional-style-54 .logos { display: flex; gap: 10px; } @media screen and (min-width: 48em) { .additional-style.additional-style-54 h3 { font-size: 42px; line-height: 1; } additional-style.additional-style-54 p { font-size: 20px; } .additional-style.additional-style-54 .additional-style-wrap { padding: 60px 30px; } .additional-style.additional-style-54 h3 { font-size: 32px; } .additional-style.additional-style-54 p { font-size: 20px; } } </style> <div class="additional-style additional-style-54 clearfix"> <div class="additional-style-wrap"> <div class="additional-style-inner"> <div class="stars">★★★★★</div> <h3>Customer Reviews</h3> <p>See what our customers have to say...</p> <div class="logos"> <a href="PUT_LINK_HERE" target="_blank"><img src="https://img.spidersnet.co.uk/code-snippets/google-button.svg"></a> <a href="PUT_LINK_HERE" target="_blank"><img src="https://img.spidersnet.co.uk/code-snippets/autotrader-button.svg"></a> <a href="PUT_LINK_HERE" target="_blank"><img src="https://img.spidersnet.co.uk/code-snippets/facebook-button.svg"></a> </div> </div> </div> </div>
4.7
- premier-1
- premier-2
- premier-3
- premier-4
- premier-5
- premier-6
- premier-7
- premier-8
- premier-10
- premier-11
- essential-1
- essential-2
<style> .additional-style.additional-style-54 h2, .additional-style.additional-style-54 h3, .additional-style.additional-style-54 p, .additional-style.additional-style-54 ul { color: #fff; margin-bottom: 0; } .additional-style.additional-style-54 h3 { font-weight: 500; font-size: 30px; } .additional-style.additional-style-54 a:hover { opacity: 0.8; } .additional-style.additional-style-54 { background-image: url(https://img.spidersnet.co.uk/code-snippets/style-54-bg.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; padding: 20px 0; } .additional-style.additional-style-54 .additional-style-wrap { max-width: 1200px; margin-right: auto; margin-left: auto; } .additional-style.additional-style-54 .additional-style-inner { width: 100%; float: left; padding-right: 0.9375rem; padding-left: 0.9375rem; } .additional-style.additional-style-54 .stars { color: #E8BF19; font-size: 24px; } .additional-style.additional-style-54 p { margin-bottom: 20px; } .additional-style.additional-style-54 .logos { display: flex; gap: 10px; } @media screen and (min-width: 48em) { .additional-style.additional-style-54 h3 { font-size: 42px; line-height: 1; } additional-style.additional-style-54 p { font-size: 20px; } .additional-style.additional-style-54 { padding: 60px 0; } .additional-style.additional-style-54 h3 { font-size: 32px; } .additional-style.additional-style-54 p { font-size: 20px; } } </style> <div class="additional-style additional-style-54 clearfix"> <div class="additional-style-wrap"> <div class="additional-style-inner"> <div class="stars">★★★★★</div> <h3>Customer Reviews</h3> <p>See what our customers have to say...</p> <div class="logos"> <a href="PUT_LINK_HERE" target="_blank"><img src="https://img.spidersnet.co.uk/code-snippets/google-button.svg"></a> <a href="PUT_LINK_HERE" target="_blank"><img src="https://img.spidersnet.co.uk/code-snippets/autotrader-button.svg"></a> <a href="PUT_LINK_HERE" target="_blank"><img src="https://img.spidersnet.co.uk/code-snippets/facebook-button.svg"></a> </div> </div> </div> </div>
4.6
- essential-4
<style> .additional-style.additional-style-53 h2, .additional-style.additional-style-53 h3, .additional-style.additional-style-53 p, .additional-style.additional-style-53 ul { color: #fff; margin-bottom: 0; } .additional-style.additional-style-53 h3 { font-weight: 500; font-size: 30px; } .additional-style.additional-style-53 a:hover { opacity: 0.8; } .additional-style.additional-style-53 { max-width: 1280px; margin-right: auto; margin-left: auto; text-align: center; padding-left: 15px; padding-right: 15px; } .additional-style.additional-style-53 .additional-style-wrap { background: url(https://img.spidersnet.co.uk/code-snippets/style-53-bg.jpg) no-repeat center; background-size: cover; padding: 20px 0; border-radius: 20px; } .additional-style.additional-style-53 .additional-style-half { width: 100%; float: left; padding-right: 0.9375rem; padding-left: 0.9375rem; } .additional-style.additional-style-53 .rating { color: #fff; flex-shrink: 0; margin-bottom: 20px; } .additional-style.additional-style-53 .rating span { font-size: 50px; font-weight: bold; line-height: 1; } .additional-style.additional-style-53 .rating .stars { font-size: 20px; } .additional-style.additional-style-53 .images { display: flex; justify-content: center; gap: 10px; } .additional-style.additional-style-53 .images img { max-width: 30%; } .additional-style.additional-style-53 .additional-style-review { border-radius: 20px; background: rgba(255, 255, 255, 0.85); padding: 30px; } .additional-style.additional-style-53 .additional-style-review h3, .additional-style.additional-style-53 .additional-style-review p { color: #000; } .additional-style.additional-style-53 .additional-style-review h3 { margin-bottom: 30px; } .additional-style.additional-style-53 .additional-style-review .stars { margin-bottom: 5px; color: #E8BF19; font-size: 24px; } .additional-style.additional-style-53 .additional-style-review p { font-size: 18px; } .additional-style.additional-style-53 .additional-style-review .name { font-size: 14px; text-transform: uppercase; letter-spacing: 0.25px; margin-top: 15px; } .additional-style.additional-style-53 .additional-style-review .button { margin-top: 30px; } @media screen and (max-width: 47.9988em) { .additional-style.additional-style-53 .additional-style-review { margin-top: 20px; } } @media screen and (min-width: 48em) { .additional-style.additional-style-53 h3 { font-size: 42px; line-height: 1; } .additional-style.additional-style-53 p { font-size: 20px; } .additional-style.additional-style-53 { } .additional-style.additional-style-53 .additional-style-wrap { display: flex; align-items: center; padding: 60px 30px; } .additional-style.additional-style-53 .additional-style-half { width: 50%; } .additional-style.additional-style-53 .rating span { font-size: 90px; } .additional-style.additional-style-53 .additional-style-review h3 { font-size: 32px; } } </style> <div class="additional-style additional-style-53 clearfix"> <div class="additional-style-wrap"> <div class="additional-style-half"> <div class="rating"> <span>1.0</span> <div class="stars">★★★★★</div> </div> <div class="images"> <img src="https://img.spidersnet.co.uk/code-snippets/at-award-2023.svg"> <img src="https://img.spidersnet.co.uk/code-snippets/at-award-2024.svg"> <img src="https://img.spidersnet.co.uk/code-snippets/at-award-2025.svg"> </div> </div> <div class="additional-style-half"> <div class="additional-style-review"> <div class="additional-style-text"> <div class="stars">★★★★★</div> <h3>Customer Reviews</h3> <p>“Our fantastic team are passionate about delivering outstanding customer experiences and our mission is to ensure that you love both the FN car buying experience and the car”</p> <p class="name">Numan, CEO FN Motors</p> <a href="/reviews/" class="button">Read More</a> </div></div> </div> </div> </div>
4.6
- essential-3
<style> .additional-style.additional-style-53 h2, .additional-style.additional-style-53 h3, .additional-style.additional-style-53 p, .additional-style.additional-style-53 ul { color: #fff; margin-bottom: 0; } .additional-style.additional-style-53 h3 { font-weight: 500; font-size: 30px; } .additional-style.additional-style-53 a:hover { opacity: 0.8; } .additional-style.additional-style-53 { max-width: 1280px; margin-right: auto; margin-left: auto; text-align: center; padding-left: 15px; padding-right: 15px; } .additional-style.additional-style-53 .additional-style-wrap { background: url(https://img.spidersnet.co.uk/code-snippets/style-53-bg.jpg) no-repeat center; background-size: cover; padding: 20px 0; border-radius: 20px; } .additional-style.additional-style-53 .additional-style-half { width: 100%; float: left; padding-right: 0.9375rem; padding-left: 0.9375rem; } .additional-style.additional-style-53 .rating { color: #fff; flex-shrink: 0; margin-bottom: 20px; } .additional-style.additional-style-53 .rating span { font-size: 50px; font-weight: bold; line-height: 1; } .additional-style.additional-style-53 .rating .stars { font-size: 20px; } .additional-style.additional-style-53 .images { display: flex; justify-content: center; gap: 10px; } .additional-style.additional-style-53 .images img { max-width: 30%; } .additional-style.additional-style-53 .additional-style-review { border-radius: 50px 0px; background: rgba(255, 255, 255, 0.85); padding: 30px; } .additional-style.additional-style-53 .additional-style-review h3, .additional-style.additional-style-53 .additional-style-review p { color: #000; } .additional-style.additional-style-53 .additional-style-review h3 { margin-bottom: 30px; } .additional-style.additional-style-53 .additional-style-review .stars { margin-bottom: 5px; color: #E8BF19; font-size: 24px; } .additional-style.additional-style-53 .additional-style-review p { font-size: 18px; } .additional-style.additional-style-53 .additional-style-review .name { font-size: 14px; text-transform: uppercase; letter-spacing: 0.25px; margin-top: 15px; } .additional-style.additional-style-53 .additional-style-review .button { margin-top: 30px; } @media screen and (max-width: 47.9988em) { .additional-style.additional-style-53 .additional-style-review { margin-top: 20px; } } @media screen and (min-width: 48em) { .additional-style.additional-style-53 h3 { font-size: 42px; line-height: 1; } .additional-style.additional-style-53 p { font-size: 20px; } .additional-style.additional-style-53 { } .additional-style.additional-style-53 .additional-style-wrap { display: flex; align-items: center; padding: 60px 30px; } .additional-style.additional-style-53 .additional-style-half { width: 50%; } .additional-style.additional-style-53 .rating span { font-size: 90px; } .additional-style.additional-style-53 .additional-style-review h3 { font-size: 32px; } } </style> <div class="additional-style additional-style-53 clearfix"> <div class="additional-style-wrap"> <div class="additional-style-half"> <div class="rating"> <span>1.0</span> <div class="stars">★★★★★</div> </div> <div class="images"> <img src="https://img.spidersnet.co.uk/code-snippets/at-award-2023.svg"> <img src="https://img.spidersnet.co.uk/code-snippets/at-award-2024.svg"> <img src="https://img.spidersnet.co.uk/code-snippets/at-award-2025.svg"> </div> </div> <div class="additional-style-half"> <div class="additional-style-review"> <div class="additional-style-text"> <div class="stars">★★★★★</div> <h3>Customer Reviews</h3> <p>“Our fantastic team are passionate about delivering outstanding customer experiences and our mission is to ensure that you love both the FN car buying experience and the car”</p> <p class="name">Numan, CEO FN Motors</p> <a href="/reviews/" class="button">Read More</a> </div></div> </div> </div> </div>
4.6
- premier-11
<style> .additional-style.additional-style-53 h2, .additional-style.additional-style-53 h3, .additional-style.additional-style-53 p, .additional-style.additional-style-53 ul { color: #fff; margin-bottom: 0; } .additional-style.additional-style-53 h3 { font-weight: 500; font-size: 30px; } .additional-style.additional-style-53 a:hover { opacity: 0.8; } .additional-style.additional-style-53 { background: url(https://img.spidersnet.co.uk/code-snippets/style-53-bg.jpg) no-repeat center; background-size: cover; padding: 20px 0; } .additional-style.additional-style-53 .additional-style-wrap { max-width: 1300px; margin-right: auto; margin-left: auto; text-align: center; } .additional-style.additional-style-53 .additional-style-half { width: 100%; float: left; padding-right: 0.9375rem; padding-left: 0.9375rem; } .additional-style.additional-style-53 .rating { color: #fff; flex-shrink: 0; margin-bottom: 20px; } .additional-style.additional-style-53 .rating span { font-size: 50px; font-weight: bold; line-height: 1; } .additional-style.additional-style-53 .rating .stars { font-size: 20px; } .additional-style.additional-style-53 .images { display: flex; justify-content: center; gap: 10px; } .additional-style.additional-style-53 .images img { max-width: 30%; } .additional-style.additional-style-53 .additional-style-review { border: 1px solid #fff; padding: 30px; } .additional-style.additional-style-53 .additional-style-review h3 { margin-bottom: 30px; } .additional-style.additional-style-53 .additional-style-review .stars { margin-bottom: 5px; color: #fff; font-size: 24px; } .additional-style.additional-style-53 .additional-style-review p { font-size: 18px; } .additional-style.additional-style-53 .additional-style-review .name { font-size: 14px; text-transform: uppercase; letter-spacing: 0.25px; margin-top: 15px; } .additional-style.additional-style-53 .additional-style-review .button { margin-top: 30px; } @media screen and (max-width: 47.9988em) { .additional-style.additional-style-53 .additional-style-review { margin-top: 20px; } } @media screen and (min-width: 48em) { .additional-style.additional-style-53 h3 { font-size: 42px; line-height: 1; } .additional-style.additional-style-53 p { font-size: 20px; } .additional-style.additional-style-53 { padding: 60px 0; } .additional-style.additional-style-53 .additional-style-wrap { display: flex; align-items: center; } .additional-style.additional-style-53 .additional-style-half { width: 50%; } .additional-style.additional-style-53 .rating span { font-size: 90px; } .additional-style.additional-style-53 .additional-style-review h3 { font-size: 32px; } } </style> <div class="additional-style additional-style-53 clearfix"> <div class="additional-style-wrap"> <div class="additional-style-half"> <div class="rating"> <span>1.0</span> <div class="stars">★★★★★</div> </div> <div class="images"> <img src="https://img.spidersnet.co.uk/code-snippets/at-award-2023.svg"> <img src="https://img.spidersnet.co.uk/code-snippets/at-award-2024.svg"> <img src="https://img.spidersnet.co.uk/code-snippets/at-award-2025.svg"> </div> </div> <div class="additional-style-half"> <div class="additional-style-review"> <div class="additional-style-text"> <div class="stars">★★★★★</div> <h3>Customer Reviews</h3> <p>“Our fantastic team are passionate about delivering outstanding customer experiences and our mission is to ensure that you love both the FN car buying experience and the car”</p> <p class="name">Numan, CEO FN Motors</p> <a href="/reviews/" class="button">Read More</a> </div></div> </div> </div> </div>
4.6
- premier-9
<style> .additional-style.additional-style-53 h2, .additional-style.additional-style-53 h3, .additional-style.additional-style-53 p, .additional-style.additional-style-53 ul { color: #fff; margin-bottom: 0; } .additional-style.additional-style-53 h3 { font-weight: 500; font-size: 30px; } .additional-style.additional-style-53 a:hover { opacity: 0.8; } .additional-style.additional-style-53 { clear: both; margin-right: auto; margin-left: auto; max-width: 1920px; padding-left: 15px; padding-right: 15px; } @media screen and (min-width: 75em) { .additional-style.additional-style-53 { padding-left: 50px; padding-right: 50px; } } @media screen and (min-width: 90em) { .additional-style.additional-style-53 { padding-left: 70px; padding-right: 70px; } } .additional-style.additional-style-53 .additional-style-wrap { max-width: 100%; background: url(https://img.spidersnet.co.uk/code-snippets/style-53-bg.jpg) no-repeat center; background-size: cover; padding: 20px 0; border-radius: 20px; text-align: center; } .additional-style.additional-style-53 .additional-style-half { width: 100%; float: left; padding-right: 0.9375rem; padding-left: 0.9375rem; } .additional-style.additional-style-53 .rating { color: #fff; flex-shrink: 0; margin-bottom: 20px; } .additional-style.additional-style-53 .rating span { font-size: 50px; font-weight: bold; line-height: 1; } .additional-style.additional-style-53 .rating .stars { font-size: 20px; } .additional-style.additional-style-53 .images { display: flex; justify-content: center; gap: 10px; } .additional-style.additional-style-53 .images img { max-width: 30%; } .additional-style.additional-style-53 .additional-style-review { border-radius: 8px; border-radius: 8px; background: rgba(255, 255, 255, 0.85); padding: 30px; } .additional-style.additional-style-53 .additional-style-review h3, .additional-style.additional-style-53 .additional-style-review p { color: #000; } .additional-style.additional-style-53 .additional-style-review h3 { margin-bottom: 30px; } .additional-style.additional-style-53 .additional-style-review .stars { margin-bottom: 5px; color: #E8BF19; font-size: 24px; } .additional-style.additional-style-53 .additional-style-review p { font-size: 18px; } .additional-style.additional-style-53 .additional-style-review .name { font-size: 14px; text-transform: uppercase; letter-spacing: 0.25px; margin-top: 15px; } .additional-style.additional-style-53 .additional-style-review .button { margin-top: 30px; } @media screen and (max-width: 47.9988em) { .additional-style.additional-style-53 .additional-style-review { margin-top: 20px; } } @media screen and (min-width: 48em) { .additional-style.additional-style-53 h3 { font-size: 42px; line-height: 1; } .additional-style.additional-style-53 p { font-size: 20px; } .additional-style.additional-style-53 { } .additional-style.additional-style-53 .additional-style-wrap { display: flex; align-items: center; padding: 60px 30px; } .additional-style.additional-style-53 .additional-style-half { width: 50%; } .additional-style.additional-style-53 .rating span { font-size: 90px; } .additional-style.additional-style-53 .additional-style-review h3 { font-size: 32px; } } </style> <div class="additional-style additional-style-53 clearfix"> <div class="additional-style-wrap"> <div class="additional-style-half"> <div class="rating"> <span>1.0</span> <div class="stars">★★★★★</div> </div> <div class="images"> <img src="https://img.spidersnet.co.uk/code-snippets/at-award-2023.svg"> <img src="https://img.spidersnet.co.uk/code-snippets/at-award-2024.svg"> <img src="https://img.spidersnet.co.uk/code-snippets/at-award-2025.svg"> </div> </div> <div class="additional-style-half"> <div class="additional-style-review"> <div class="additional-style-text"> <div class="stars">★★★★★</div> <h3>Customer Reviews</h3> <p>“Our fantastic team are passionate about delivering outstanding customer experiences and our mission is to ensure that you love both the FN car buying experience and the car”</p> <p class="name">Numan, CEO FN Motors</p> <a href="/reviews/" class="button">Read More</a> </div></div> </div> </div> </div>
4.6
- premier-1
- premier-2
- premier-3
- premier-4
- premier-5
- premier-6
- premier-7
- premier-8
- premier-10
- essential-1
- essential-2
<style> .additional-style.additional-style-53 h2, .additional-style.additional-style-53 h3, .additional-style.additional-style-53 p, .additional-style.additional-style-53 ul { color: #fff; margin-bottom: 0; } .additional-style.additional-style-53 h3 { font-weight: 500; font-size: 30px; } .additional-style.additional-style-53 a:hover { opacity: 0.8; } .additional-style.additional-style-53 { background: url(https://img.spidersnet.co.uk/code-snippets/style-53-bg.jpg) no-repeat center; background-size: cover; padding: 20px 0; } .additional-style.additional-style-53 .additional-style-wrap { max-width: 1300px; margin-right: auto; margin-left: auto; text-align: center; } .additional-style.additional-style-53 .additional-style-half { width: 100%; float: left; padding-right: 0.9375rem; padding-left: 0.9375rem; } .additional-style.additional-style-53 .rating { color: #fff; flex-shrink: 0; margin-bottom: 20px; } .additional-style.additional-style-53 .rating span { font-size: 50px; font-weight: bold; line-height: 1; } .additional-style.additional-style-53 .rating .stars { font-size: 20px; } .additional-style.additional-style-53 .images { display: flex; justify-content: center; gap: 10px; } .additional-style.additional-style-53 .images img { max-width: 30%; } .additional-style.additional-style-53 .additional-style-review { border-radius: 8px; border-radius: 8px; background: rgba(255, 255, 255, 0.85); padding: 30px; } .additional-style.additional-style-53 .additional-style-review h3, .additional-style.additional-style-53 .additional-style-review p { color: #000; } .additional-style.additional-style-53 .additional-style-review h3 { margin-bottom: 30px; } .additional-style.additional-style-53 .additional-style-review .stars { margin-bottom: 5px; color: #E8BF19; font-size: 24px; } .additional-style.additional-style-53 .additional-style-review p { font-size: 18px; } .additional-style.additional-style-53 .additional-style-review .name { font-size: 14px; text-transform: uppercase; letter-spacing: 0.25px; margin-top: 15px; } .additional-style.additional-style-53 .additional-style-review .button { margin-top: 30px; } @media screen and (max-width: 47.9988em) { .additional-style.additional-style-53 .additional-style-review { margin-top: 20px; } } @media screen and (min-width: 48em) { .additional-style.additional-style-53 h3 { font-size: 42px; line-height: 1; } .additional-style.additional-style-53 p { font-size: 20px; } .additional-style.additional-style-53 { padding: 60px 0; } .additional-style.additional-style-53 .additional-style-wrap { display: flex; align-items: center; } .additional-style.additional-style-53 .additional-style-half { width: 50%; } .additional-style.additional-style-53 .rating span { font-size: 90px; } .additional-style.additional-style-53 .additional-style-review h3 { font-size: 32px; } } </style> <div class="additional-style additional-style-53 clearfix"> <div class="additional-style-wrap"> <div class="additional-style-half"> <div class="rating"> <span>1.0</span> <div class="stars">★★★★★</div> </div> <div class="images"> <img src="https://img.spidersnet.co.uk/code-snippets/at-award-2023.svg"> <img src="https://img.spidersnet.co.uk/code-snippets/at-award-2024.svg"> <img src="https://img.spidersnet.co.uk/code-snippets/at-award-2025.svg"> </div> </div> <div class="additional-style-half"> <div class="additional-style-review"> <div class="additional-style-text"> <div class="stars">★★★★★</div> <h3>Customer Reviews</h3> <p>“Our fantastic team are passionate about delivering outstanding customer experiences and our mission is to ensure that you love both the FN car buying experience and the car”</p> <p class="name">Numan, CEO FN Motors</p> <a href="/reviews/" class="button">Read More</a> </div></div> </div> </div> </div>
4.5
- essential-3
<style> .additional-style.additional-style-52 h2, .additional-style.additional-style-52 h3, .additional-style.additional-style-52 ul { color: #fff; margin-bottom: 0; } .additional-style.additional-style-52 p { margin-bottom: 0; } .additional-style.additional-style-52 h3 { font-weight: 500; font-size: 30px; } .additional-style.additional-style-52 a:hover { opacity: 0.8; } .additional-style.additional-style-52 { background-image: url(https://img.spidersnet.co.uk/code-snippets/style-52-bg.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; background-color: #0F4C85; background-blend-mode: color-burn; padding: 20px 0; } .additional-style.additional-style-52 .additional-style-wrap { max-width: 1200px; margin-right: auto; margin-left: auto; text-align: center; } .additional-style.additional-style-52 .additional-style-title { width: 100%; float: left; padding-right: 0.9375rem; padding-left: 0.9375rem; margin-bottom: 20px; text-align: center; position: relative; } .additional-style.additional-style-52 .additional-style-title h3 { margin-bottom: 20px; position: relative; } .additional-style.additional-style-52 .read-reviews { color: #fff; text-transform: uppercase; } .additional-style.additional-style-52 .additional-style-half { width: 100%; float: left; padding-right: 0.9375rem; padding-left: 0.9375rem; } .additional-style.additional-style-52 .additional-style-review { border-radius: 60px 0px; background: rgba(255,255,255,0.9); padding: 30px; color: #000; height: 100%; } .additional-style.additional-style-52 .additional-style-review .stars { margin-bottom: 10px; } .additional-style.additional-style-52 .additional-style-review p { font-size: 20px; } .additional-style.additional-style-52 .additional-style-review .name { font-size: 14px; text-transform: uppercase; letter-spacing: 0.25px; margin-top: 15px; } @media screen and (max-width: 47.9988em) { .additional-style.additional-style-52 .additional-style-review { margin-bottom: 20px; } } @media screen and (min-width: 48em) { .additional-style.additional-style-52 h3 { font-size: 42px; line-height: 1; } .additional-style.additional-style-52 p { font-size: 20px; } .additional-style.additional-style-52 { padding: 60px 0; } .additional-style.additional-style-52 .additional-style-wrap { display: flex; align-items: stretch; } .additional-style.additional-style-52 .additional-style-title h3 { font-size: 32px; max-width: 80%; margin-left: auto; margin-right: auto; } .additional-style.additional-style-52 .read-reviews { position: absolute; top: 0; right: 15px; } .additional-style.additional-style-52 .additional-style-half { width: 50%; } } </style> <div class="additional-style additional-style-52 clearfix"> <div class="additional-style-wrap"> <div class="additional-style-title"> <h3>See What Our Customers Have to Say</h3> <a href="/reviews/" class="read-reviews">Read Reviews</a> </div> </div> <div class="additional-style-wrap"> <div class="additional-style-half"> <div class="additional-style-review"> <div class="additional-style-text"> <div class="stars">★★★★★</div> <p>“Our fantastic team are passionate about delivering outstanding customer experiences and our mission is to ensure that you love both the FN car buying experience and the car”</p> <p class="name">Numan, CEO FN Motors</p> </div></div> </div> <div class="additional-style-half"> <div class="additional-style-review"> <div class="additional-style-text"> <div class="stars">★★★★★</div> <p>“Our fantastic team are passionate about delivering outstanding customer experiences and our mission is to ensure that you love both the FN car buying experience and the car”</p> <p class="name">Numan, CEO FN Motors</p> </div></div> </div> </div> </div>
4.5
- premier-11
<style> .additional-style.additional-style-52 h2, .additional-style.additional-style-52 h3, .additional-style.additional-style-52 p, .additional-style.additional-style-52 ul { color: #fff; margin-bottom: 0; } .additional-style.additional-style-52 h3 { font-weight: 500; font-size: 30px; } .additional-style.additional-style-52 a:hover { opacity: 0.8; } .additional-style.additional-style-52 { padding: 20px 0; } .additional-style.additional-style-52 .additional-style-wrap { max-width: 1300px; margin-right: auto; margin-left: auto; text-align: center; } .additional-style.additional-style-52 .additional-style-title { width: 100%; float: left; padding-right: 0.9375rem; padding-left: 0.9375rem; margin-bottom: 20px; text-align: center; position: relative; } .additional-style.additional-style-52 .additional-style-title h3 { margin-bottom: 20px; position: relative; } .additional-style.additional-style-52 .read-reviews { color: #fff; text-transform: uppercase; } .additional-style.additional-style-52 .additional-style-half { width: 100%; float: left; padding-right: 0.9375rem; padding-left: 0.9375rem; } .additional-style.additional-style-52 .additional-style-review { border: 1px solid #FFF; padding: 30px; height: 100%; } .additional-style.additional-style-52 .additional-style-review .stars { color: #fff; margin-bottom: 10px; } .additional-style.additional-style-52 .additional-style-review p { font-size: 20px; } .additional-style.additional-style-52 .additional-style-review .name { font-size: 14px; text-transform: uppercase; letter-spacing: 0.25px; margin-top: 15px; } @media screen and (max-width: 47.9988em) { .additional-style.additional-style-52 .additional-style-review { margin-bottom: 20px; } } @media screen and (min-width: 48em) { .additional-style.additional-style-52 h3 { font-size: 42px; line-height: 1; } .additional-style.additional-style-52 p { font-size: 20px; } .additional-style.additional-style-52 { padding: 60px 0; } .additional-style.additional-style-52 .additional-style-wrap { display: flex; align-items: stretch; } .additional-style.additional-style-52 .additional-style-title h3 { font-size: 32px; max-width: 80%; margin-left: auto; margin-right: auto; } .additional-style.additional-style-52 .read-reviews { position: absolute; top: 0; right: 15px; } .additional-style.additional-style-52 .additional-style-half { width: 50%; } } </style> <div class="additional-style additional-style-52 clearfix"> <div class="additional-style-wrap"> <div class="additional-style-title"> <h3>See What Our Customers Have to Say</h3> <a href="/reviews/" class="read-reviews">Read Reviews</a> </div> </div> <div class="additional-style-wrap"> <div class="additional-style-half"> <div class="additional-style-review"> <div class="additional-style-text"> <div class="stars">★★★★★</div> <p>“Our fantastic team are passionate about delivering outstanding customer experiences and our mission is to ensure that you love both the FN car buying experience and the car”</p> <p class="name">Numan, CEO FN Motors</p> </div></div> </div> <div class="additional-style-half"> <div class="additional-style-review"> <div class="additional-style-text"> <div class="stars">★★★★★</div> <p>“Our fantastic team are passionate about delivering outstanding customer experiences and our mission is to ensure that you love both the FN car buying experience and the car”</p> <p class="name">Numan, CEO FN Motors</p> </div></div> </div> </div> </div>
4.5
- premier-10
<style> .additional-style.additional-style-52 h2, .additional-style.additional-style-52 h3, .additional-style.additional-style-52 p, .additional-style.additional-style-52 ul { color: #fff; margin-bottom: 0; } .additional-style.additional-style-52 h3 { font-weight: 500; font-size: 30px; } .additional-style.additional-style-52 a:hover { opacity: 0.8; } .additional-style.additional-style-52 { padding: 20px 0; background-color: #2B63D9; background-image: url(/media/bg-pattern.png); background-position: top left; } .additional-style.additional-style-52 .additional-style-wrap { max-width: 1300px; margin-right: auto; margin-left: auto; text-align: center; } .additional-style.additional-style-52 .additional-style-title { width: 100%; float: left; padding-right: 0.9375rem; padding-left: 0.9375rem; margin-bottom: 20px; text-align: center; position: relative; } .additional-style.additional-style-52 .additional-style-title h3 { margin-bottom: 20px; position: relative; } .additional-style.additional-style-52 .read-reviews { color: #fff; text-transform: uppercase; } .additional-style.additional-style-52 .additional-style-half { width: 100%; float: left; padding-right: 0.9375rem; padding-left: 0.9375rem; } .additional-style.additional-style-52 .additional-style-review { border-radius: 8px; border: 1px solid #FFF; padding: 30px; height: 100%; } .additional-style.additional-style-52 .additional-style-review .stars { color: #fff; margin-bottom: 10px; } .additional-style.additional-style-52 .additional-style-review p { font-size: 20px; } .additional-style.additional-style-52 .additional-style-review .name { font-size: 14px; text-transform: uppercase; letter-spacing: 0.25px; margin-top: 15px; } @media screen and (max-width: 47.9988em) { .additional-style.additional-style-52 .additional-style-review { margin-bottom: 20px; } } @media screen and (min-width: 48em) { .additional-style.additional-style-52 h3 { font-size: 42px; line-height: 1; } .additional-style.additional-style-52 p { font-size: 20px; } .additional-style.additional-style-52 { padding: 60px 0; } .additional-style.additional-style-52 .additional-style-wrap { display: flex; align-items: stretch; } .additional-style.additional-style-52 .additional-style-title h3 { font-size: 32px; max-width: 80%; margin-left: auto; margin-right: auto; } .additional-style.additional-style-52 .read-reviews { position: absolute; top: 0; right: 15px; } .additional-style.additional-style-52 .additional-style-half { width: 50%; } } </style> <div class="additional-style additional-style-52 clearfix"> <div class="additional-style-wrap"> <div class="additional-style-title"> <h3>See What Our Customers Have to Say</h3> <a href="/reviews/" class="read-reviews">Read Reviews</a> </div> </div> <div class="additional-style-wrap"> <div class="additional-style-half"> <div class="additional-style-review"> <div class="additional-style-text"> <div class="stars">★★★★★</div> <p>“Our fantastic team are passionate about delivering outstanding customer experiences and our mission is to ensure that you love both the FN car buying experience and the car”</p> <p class="name">Numan, CEO FN Motors</p> </div></div> </div> <div class="additional-style-half"> <div class="additional-style-review"> <div class="additional-style-text"> <div class="stars">★★★★★</div> <p>“Our fantastic team are passionate about delivering outstanding customer experiences and our mission is to ensure that you love both the FN car buying experience and the car”</p> <p class="name">Numan, CEO FN Motors</p> </div></div> </div> </div> </div>
4.5
- premier-9
<style> .additional-style.additional-style-52 h2, .additional-style.additional-style-52 h3, .additional-style.additional-style-52 p, .additional-style.additional-style-52 ul { color: #fff; margin-bottom: 0; } .additional-style.additional-style-52 h3 { font-weight: 500; font-size: 30px; } .additional-style.additional-style-52 a:hover { opacity: 0.8; } .additional-style.additional-style-52 { text-align: center; margin-right: auto; margin-left: auto; max-width: 1920px; padding-left: 15px; padding-right: 15px; } @media screen and (min-width: 75em) { .additional-style.additional-style-52 { padding-left: 50px; padding-right: 50px; } } @media screen and (min-width: 90em) { .additional-style.additional-style-52 { padding-left: 70px; padding-right: 70px; } } .additional-style.additional-style-52 .additional-style-wrap { max-width: 1200px; margin-right: auto; margin-left: auto; text-align: center; } .additional-style.additional-style-52 .additional-style-bg { background-image: url(https://img.spidersnet.co.uk/code-snippets/style-52-bg.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; background-color: #3A3E49; background-blend-mode: color-burn; padding: 20px 0; border-radius: 20px; } .additional-style.additional-style-52 .additional-style-title { width: 100%; float: left; padding-right: 0.9375rem; padding-left: 0.9375rem; margin-bottom: 20px; text-align: center; position: relative; } .additional-style.additional-style-52 .additional-style-title h3 { margin-bottom: 20px; position: relative; } .additional-style.additional-style-52 .read-reviews { color: #fff; text-transform: uppercase; } .additional-style.additional-style-52 .additional-style-half { width: 100%; float: left; padding-right: 0.9375rem; padding-left: 0.9375rem; } .additional-style.additional-style-52 .additional-style-review { border-radius: 8px; border: 1px solid #FFF; padding: 30px; height: 100%; } .additional-style.additional-style-52 .additional-style-review .stars { color: #fff; margin-bottom: 10px; } .additional-style.additional-style-52 .additional-style-review p { font-size: 20px; } .additional-style.additional-style-52 .additional-style-review .name { font-size: 14px; text-transform: uppercase; letter-spacing: 0.25px; margin-top: 15px; } @media screen and (max-width: 47.9988em) { .additional-style.additional-style-52 .additional-style-review { margin-bottom: 20px; } } @media screen and (min-width: 48em) { .additional-style.additional-style-52 h3 { font-size: 42px; line-height: 1; } .additional-style.additional-style-52 p { font-size: 20px; } .additional-style.additional-style-52 .additional-style-bg { padding: 60px 0; } .additional-style.additional-style-52 .additional-style-wrap { display: flex; align-items: stretch; } .additional-style.additional-style-52 .additional-style-title h3 { font-size: 32px; margin-left: 140px; margin-right: 140px; } .additional-style.additional-style-52 .read-reviews { position: absolute; top: 0; right: 15px; } .additional-style.additional-style-52 .additional-style-half { width: 50%; } } </style> <div class="additional-style additional-style-52 clearfix"> <div class="additional-style-bg"> <div class="additional-style-wrap"> <div class="additional-style-title"> <h3>See What Our Customers Have to Say</h3> <a href="/reviews/" class="read-reviews">Read Reviews</a> </div> </div> <div class="additional-style-wrap"> <div class="additional-style-half"> <div class="additional-style-review"> <div class="additional-style-text"> <div class="stars">★★★★★</div> <p>“Our fantastic team are passionate about delivering outstanding customer experiences and our mission is to ensure that you love both the FN car buying experience and the car”</p> <p class="name">Numan, CEO FN Motors</p> </div></div> </div> <div class="additional-style-half"> <div class="additional-style-review"> <div class="additional-style-text"> <div class="stars">★★★★★</div> <p>“Our fantastic team are passionate about delivering outstanding customer experiences and our mission is to ensure that you love both the FN car buying experience and the car”</p> <p class="name">Numan, CEO FN Motors</p> </div></div> </div> </div> </div> </div>
4.5
- premier-1
- premier-2
- premier-3
- premier-4
- premier-5
- premier-6
- premier-7
- premier-8
- essential-1
- essential-2
<style> .additional-style.additional-style-52 h2, .additional-style.additional-style-52 h3, .additional-style.additional-style-52 p, .additional-style.additional-style-52 ul { color: #fff; margin-bottom: 0; } .additional-style.additional-style-52 h3 { font-weight: 500; font-size: 30px; } .additional-style.additional-style-52 a:hover { opacity: 0.8; } .additional-style.additional-style-52 { background-image: url(https://img.spidersnet.co.uk/code-snippets/style-52-bg.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; background-color: #1597F4; background-blend-mode: multiply; padding: 20px 0; } .additional-style.additional-style-52 .additional-style-wrap { max-width: 1200px; margin-right: auto; margin-left: auto; text-align: center; } .additional-style.additional-style-52 .additional-style-title { width: 100%; float: left; padding-right: 0.9375rem; padding-left: 0.9375rem; margin-bottom: 20px; text-align: center; position: relative; } .additional-style.additional-style-52 .additional-style-title h3 { margin-bottom: 20px; position: relative; } .additional-style.additional-style-52 .additional-style-title h3:after { content: ''; height: 4px; width: 70px; background: #fff; display: block; margin: 0 auto; margin-top: 20px; } .additional-style.additional-style-52 .read-reviews { color: #fff; text-transform: uppercase; } .additional-style.additional-style-52 .additional-style-half { width: 100%; float: left; padding-right: 0.9375rem; padding-left: 0.9375rem; } .additional-style.additional-style-52 .additional-style-review { border-radius: 8px; border: 1px solid #FFF; padding: 30px; height: 100%; } .additional-style.additional-style-52 .additional-style-review .stars { color: #fff; margin-bottom: 10px; } .additional-style.additional-style-52 .additional-style-review p { font-size: 20px; } .additional-style.additional-style-52 .additional-style-review .name { font-size: 14px; text-transform: uppercase; letter-spacing: 0.25px; margin-top: 15px; } @media screen and (max-width: 47.9988em) { .additional-style.additional-style-52 .additional-style-review { margin-bottom: 20px; } } @media screen and (min-width: 48em) { .additional-style.additional-style-52 h3 { font-size: 42px; line-height: 1; } .additional-style.additional-style-52 p { font-size: 20px; } .additional-style.additional-style-52 { padding: 60px 0; } .additional-style.additional-style-52 .additional-style-wrap { display: flex; align-items: stretch; } .additional-style.additional-style-52 .additional-style-title h3 { font-size: 32px; padding: 0 135px; } .additional-style.additional-style-52 .read-reviews { position: absolute; top: 0; right: 15px; } .additional-style.additional-style-52 .additional-style-half { width: 50%; } } </style> <div class="additional-style additional-style-52 clearfix"> <div class="additional-style-wrap"> <div class="additional-style-title"> <h3>See What Our Customers Have to Say</h3> <a href="/reviews/" class="read-reviews">Read Reviews</a> </div> </div> <div class="additional-style-wrap"> <div class="additional-style-half"> <div class="additional-style-review"> <div class="additional-style-text"> <div class="stars">★★★★★</div> <p>“Our fantastic team are passionate about delivering outstanding customer experiences and our mission is to ensure that you love both the FN car buying experience and the car”</p> <p class="name">Numan, CEO FN Motors</p> </div></div> </div> <div class="additional-style-half"> <div class="additional-style-review"> <div class="additional-style-text"> <div class="stars">★★★★★</div> <p>“Our fantastic team are passionate about delivering outstanding customer experiences and our mission is to ensure that you love both the FN car buying experience and the car”</p> <p class="name">Numan, CEO FN Motors</p> </div></div> </div> </div> </div>
3.6
- premier-9
<style> .additional-style.additional-style-blocks { margin-top: 30px; margin-bottom: 30px; } .additional-style.additional-style-blocks .additional-style-wrap { clear: both; margin-right: auto; margin-left: auto; width: 100%; max-width: 1920px; } @media screen and (min-width: 75em) { .additional-style.additional-style-blocks .additional-style-wrap { padding-left: 50px; padding-right: 50px; } } @media screen and (min-width: 90em) { .additional-style.additional-style-blocks .additional-style-wrap { padding-left: 70px; padding-right: 70px; } } .additional-style.additional-style-blocks .additional-style-inner { width: 100%; float: left; padding-right: 0.9375rem; padding-left: 0.9375rem; position: relative; } .additional-style.additional-style-blocks .additional-style-inner ul li img { display: block; height: 100px; width: 100px; padding: 35px; background: #991b1b; border-radius: 10px; margin-bottom: 30px; margin-top: -100px; margin-left: 0; } .additional-style.additional-style-blocks .additional-style-inner ul { list-style-type: none; margin: 0; margin-bottom: 15px; } .additional-style.additional-style-blocks .additional-style-inner ul li { box-shadow: 0px 4px 25px 2px rgba(0, 0, 0, 0.2); background: #fff; border-radius: 20px; flex: 1; padding: 30px; padding-top: 50px; margin-top: 70px; } @media screen and (min-width: 48em) { .additional-style.additional-style-blocks .additional-style-inner ul { display: flex; flex-wrap: nowrap; justify-content: center; gap: 20px; } .additional-style.additional-style-blocks .additional-style-inner ul li { margin-top: 50px; } } </style> <div class="additional-style additional-style-blocks clearfix"> <div class="additional-style-wrap"> <div class="additional-style-inner"> <ul> <li><img src="https://s3-eu-west-1.amazonaws.com/files.autopromotor/12578/websiteMedia/4972/1747304711-shield-ban.png" class="fr-fic fr-dib" data-id="73723"> <h4>Safety Check</h4> <p>Vehicle inspected for key safety issues</p> </li> <li><img src="https://s3-eu-west-1.amazonaws.com/files.autopromotor/12578/websiteMedia/4972/1747304676-handshake.png" class="fr-fic fr-dib" data-id="73720"> <h4>Service where due</h4> <p>Providing a wide array of car servicing options</p> </li> <li><img src="https://s3-eu-west-1.amazonaws.com/files.autopromotor/12578/websiteMedia/4972/1747304517-settings.png" class="fr-fic fr-dib" data-id="73714"> <h4>Minimum 6 months MOT</h4> <p>Guaranteed MOT for at least 6 months</p> </li> <li><img src="https://s3-eu-west-1.amazonaws.com/files.autopromotor/12578/websiteMedia/4972/1747304510-key-square.png" class="fr-fic fr-dib" data-id="73711"> <h4>Professional Valet</h4> <p>Thorough interior and exterior cleaning done</p> </li> </ul> </div> </div> </div>
3.5
<div class="additional-style additional-style-51 clearfix"> <div class="additional-style-wrap"> <div class="additional-style-inner"> <div class="additional-style-text"> <h2>Why Choose Us</h2> <p>Experience premium automotive excellence with our comprehensive services and exceptional customer care.</p> </div> <ul> <li> <img src="https://img.spidersnet.co.uk/code-snippets/circle-check-regular-white.svg"> <div class="block-content"> <h3>FCA Registered</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </li> <li> <img src="https://img.spidersnet.co.uk/code-snippets/circle-check-regular-white.svg"> <div class="block-content"> <h3>Great choice of premium brands</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </li> <li> <img src="https://img.spidersnet.co.uk/code-snippets/circle-check-regular-white.svg"> <div class="block-content"> <h3>12 Month MOT</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </li> <li> <img src="https://img.spidersnet.co.uk/code-snippets/circle-check-regular-white.svg"> <div class="block-content"> <h3>12 Month MOT</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </li> <li> <img src="https://img.spidersnet.co.uk/code-snippets/circle-check-regular-white.svg"> <div class="block-content"> <h3>12 Month MOT</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </li> <li> <img src="https://img.spidersnet.co.uk/code-snippets/circle-check-regular-white.svg"> <div class="block-content"> <h3>12 Month MOT</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> </li> </ul> </div> </div> </div>
Colour changes
Add to custom css
.additional-style.additional-style-51 { background: BACKGROUND_COLOUR; } .additional-style.additional-style-51 .additional-style-inner ul li { background: BLOCK_BACKGROUND_COLOUR; } .additional-style.additional-style-51 h2, .additional-style.additional-style-51 h3, .additional-style.additional-style-51 h4 { color: TITLE_COLOUR; border-color: TITLE_COLOUR; } .additional-style.additional-style-51 { color: TEXT_COLOUR; }
4.4
- essential-4
<style> .additional-style.additional-style-50 h2, .additional-style.additional-style-50 h3, .additional-style.additional-style-50 p, .additional-style.additional-style-50 ul { margin-bottom: 0; } .additional-style.additional-style-50 h3 { font-weight: 500; font-size: 30px; margin-bottom: 20px; } .additional-style.additional-style-50 a:hover { opacity: 0.8; } .additional-style.additional-style-50 { text-align: center; margin-right: auto; margin-left: auto; max-width: 1300px; } .additional-style.additional-style-50 .additional-style-inner { border-radius: 20px; border: 5px solid #FFF; background: #F3F3F3; box-shadow: 0px 0px 60px 0px rgba(50, 52, 55, 0.20); padding: 20px 0; max-width: 100%; border-radius: 20px; } .additional-style.additional-style-50 .additional-style-wrap { width: 100%; float: left; padding-right: 0.9375rem; padding-left: 0.9375rem; position: relative; } .additional-style.additional-style-50 .additional-style-half { width: 100%; float: left; padding-right: 0.9375rem; padding-left: 0.9375rem; position: relative; } .additional-style.additional-style-50 .button { margin-bottom: 25px; } .additional-style.additional-style-50 .rating-wrap { display: flex; align-items: center; justify-content: center; gap: 20px; } .additional-style.additional-style-50 .rating-wrap .rating { flex-shrink: 0; } .additional-style.additional-style-50 .rating-wrap .rating span { font-size: 50px; font-weight: bold; line-height: 1; } .additional-style.additional-style-50 .rating-wrap .rating .stars { font-size: 20px; } .additional-style.additional-style-50 .rating-wrap .images { display: flex; gap: 10px; } .additional-style.additional-style-50 .rating-wrap .images img { max-width: 30%; } .additional-style.additional-style-50 .additional-style-review { padding: 30px; } .additional-style.additional-style-50 .additional-style-review .stars { margin-bottom: 10px; color: #F4DC7C; } .additional-style.additional-style-50 .additional-style-review p { font-size: 20px; } .additional-style.additional-style-50 .additional-style-review .name { font-size: 14px; text-transform: uppercase; letter-spacing: 0.25px; margin-top: 15px; } @media screen and (max-width: 47.9988em) { .additional-style.additional-style-50 .additional-style-review { margin-bottom: 20px; } } @media screen and (min-width: 48em) { .additional-style.additional-style-50 h3 { font-size: 32px; line-height: 1; } .additional-style.additional-style-50 p { font-size: 20px; } .additional-style.additional-style-50 .additional-style-inner { display: flex; align-items: center; padding: 60px 20px; } .additional-style.additional-style-50 .additional-style-half { width: 50%; } .additional-style.additional-style-50 .rating-wrap { gap: 40px; } .additional-style.additional-style-50 .rating-wrap .rating span { font-size: 90px; } } </style> <div class="additional-style additional-style-50 clearfix"> <div class="additional-style-wrap"> <div class="additional-style-inner"> <div class="additional-style-half"> <div class="additional-style-review"> <div class="additional-style-text"> <div class="stars">★★★★★</div> <p>“Our fantastic team are passionate about delivering outstanding customer experiences and our mission is to ensure that you love both the FN car buying experience and the car”</p> <p class="name">Numan, CEO FN Motors</p> </div></div> </div> <div class="additional-style-half"> <h3>See What Our Customers Have to Say</h3> <a href="/reviews/" class="button">Read More</a> <div class="rating-wrap"> <div class="rating"> <span>4.8</span> <div class="stars">★★★★★</div> </div> <div class="images"> <img src="https://img.spidersnet.co.uk/code-snippets/at-award-2023.svg"> <img src="https://img.spidersnet.co.uk/code-snippets/at-award-2024.svg"> <img src="https://img.spidersnet.co.uk/code-snippets/at-award-2025.svg"> </div> </div> </div> </div> </div> </div>
4.4
- essential-3
<style> .additional-style.additional-style-50 h2, .additional-style.additional-style-50 h3, .additional-style.additional-style-50 p, .additional-style.additional-style-50 ul { color: #fff; margin-bottom: 0; } .additional-style.additional-style-50 h3 { font-weight: 500; font-size: 30px; margin-bottom: 20px; } .additional-style.additional-style-50 a:hover { opacity: 0.8; } .additional-style.additional-style-50 { text-align: center; margin-right: auto; margin-left: auto; max-width: 1280px; } .additional-style.additional-style-50 .additional-style-inner { background: url(https://img.spidersnet.co.uk/code-snippets/style-50-bg.jpg) no-repeat center; background-size: cover; padding: 20px 0; max-width: 100%; border-radius: 20px; } .additional-style.additional-style-50 .additional-style-wrap { width: 100%; float: left; padding-right: 0.9375rem; padding-left: 0.9375rem; position: relative; } .additional-style.additional-style-50 .additional-style-half { width: 100%; float: left; padding-right: 0.9375rem; padding-left: 0.9375rem; position: relative; } .additional-style.additional-style-50 .button { margin-bottom: 25px; } .additional-style.additional-style-50 .rating-wrap { display: flex; align-items: center; justify-content: center; gap: 20px; } .additional-style.additional-style-50 .rating-wrap .rating { color: #fff; flex-shrink: 0; } .additional-style.additional-style-50 .rating-wrap .rating span { font-size: 50px; font-weight: bold; line-height: 1; } .additional-style.additional-style-50 .rating-wrap .rating .stars { font-size: 20px; } .additional-style.additional-style-50 .rating-wrap .images { display: flex; gap: 10px; } .additional-style.additional-style-50 .rating-wrap .images img { max-width: 30%; } .additional-style.additional-style-50 .additional-style-review { border-radius: 60px 0px; border: 1px solid #FFF; padding: 30px; } .additional-style.additional-style-50 .additional-style-review .stars { color: #fff; margin-bottom: 10px; } .additional-style.additional-style-50 .additional-style-review p { font-size: 20px; } .additional-style.additional-style-50 .additional-style-review .name { font-size: 14px; text-transform: uppercase; letter-spacing: 0.25px; margin-top: 15px; } @media screen and (max-width: 47.9988em) { .additional-style.additional-style-50 .additional-style-review { margin-bottom: 20px; } } @media screen and (min-width: 48em) { .additional-style.additional-style-50 h3 { font-size: 32px; line-height: 1; } .additional-style.additional-style-50 p { font-size: 20px; } .additional-style.additional-style-50 .additional-style-inner { display: flex; align-items: center; padding: 60px 20px; } .additional-style.additional-style-50 .additional-style-half { width: 50%; } .additional-style.additional-style-50 .rating-wrap { gap: 40px; } .additional-style.additional-style-50 .rating-wrap .rating span { font-size: 90px; } } </style> <div class="additional-style additional-style-50 clearfix"> <div class="additional-style-wrap"> <div class="additional-style-inner"> <div class="additional-style-half"> <div class="additional-style-review"> <div class="additional-style-text"> <div class="stars">★★★★★</div> <p>“Our fantastic team are passionate about delivering outstanding customer experiences and our mission is to ensure that you love both the FN car buying experience and the car”</p> <p class="name">Numan, CEO FN Motors</p> </div></div> </div> <div class="additional-style-half"> <h3>See What Our Customers Have to Say</h3> <a href="/reviews/" class="button">Read More</a> <div class="rating-wrap"> <div class="rating"> <span>1.0</span> <div class="stars">★★★★★</div> </div> <div class="images"> <img src="https://img.spidersnet.co.uk/code-snippets/at-award-2023.svg"> <img src="https://img.spidersnet.co.uk/code-snippets/at-award-2024.svg"> <img src="https://img.spidersnet.co.uk/code-snippets/at-award-2025.svg"> </div> </div> </div> </div> </div> </div>
4.4
- premier-11
<style> .additional-style.additional-style-50 h2, .additional-style.additional-style-50 h3, .additional-style.additional-style-50 p, .additional-style.additional-style-50 ul { color: #fff; margin-bottom: 0; } .additional-style.additional-style-50 h3 { font-weight: 500; font-size: 30px; margin-bottom: 20px; } .additional-style.additional-style-50 a:hover { opacity: 0.8; } .additional-style.additional-style-50 { padding: 20px 0; } .additional-style.additional-style-50 .additional-style-wrap { text-align: center; } .additional-style.additional-style-50 .additional-style-half { width: 100%; float: left; padding-right: 0.9375rem; padding-left: 0.9375rem; position: relative; } .additional-style.additional-style-50 .button { margin-bottom: 25px; } .additional-style.additional-style-50 .rating-wrap { display: flex; align-items: center; justify-content: center; gap: 20px; } .additional-style.additional-style-50 .rating-wrap .rating { color: #fff; flex-shrink: 0; } .additional-style.additional-style-50 .rating-wrap .rating span { font-size: 50px; font-weight: bold; line-height: 1; } .additional-style.additional-style-50 .rating-wrap .rating .stars { font-size: 20px; } .additional-style.additional-style-50 .rating-wrap .images { display: flex; gap: 10px; } .additional-style.additional-style-50 .rating-wrap .images img { max-width: 30%; } .additional-style.additional-style-50 .additional-style-review { border: 1px solid #FFF; padding: 30px; } .additional-style.additional-style-50 .additional-style-review .stars { color: #fff; margin-bottom: 10px; } .additional-style.additional-style-50 .additional-style-review p { font-size: 20px; } .additional-style.additional-style-50 .additional-style-review .name { font-size: 14px; text-transform: uppercase; letter-spacing: 0.25px; margin-top: 15px; } @media screen and (max-width: 47.9988em) { .additional-style.additional-style-50 .additional-style-review { margin-bottom: 20px; } } @media screen and (min-width: 48em) { .additional-style.additional-style-50 h3 { font-size: 32px; line-height: 1; } .additional-style.additional-style-50 p { font-size: 20px; } .additional-style.additional-style-50 { padding: 60px 0; } .additional-style.additional-style-50 .additional-style-wrap { display: flex; align-items: center; } .additional-style.additional-style-50 .additional-style-half { width: 50%; } .additional-style.additional-style-50 .rating-wrap { gap: 40px; } .additional-style.additional-style-50 .rating-wrap .rating span { font-size: 90px; } } </style> <div class="additional-style additional-style-50 clearfix"> <div class="additional-style-wrap"> <div class="additional-style-half"> <div class="additional-style-review"> <div class="additional-style-text"> <div class="stars">★★★★★</div> <p>“Our fantastic team are passionate about delivering outstanding customer experiences and our mission is to ensure that you love both the FN car buying experience and the car”</p> <p class="name">Numan, CEO FN Motors</p> </div></div> </div> <div class="additional-style-half"> <h3>See What Our Customers Have to Say</h3> <a href="/reviews/" class="button">Read More</a> <div class="rating-wrap"> <div class="rating"> <span>1.0</span> <div class="stars">★★★★★</div> </div> <div class="images"> <img src="https://img.spidersnet.co.uk/code-snippets/at-award-2023.svg"> <img src="https://img.spidersnet.co.uk/code-snippets/at-award-2024.svg"> <img src="https://img.spidersnet.co.uk/code-snippets/at-award-2025.svg"> </div> </div> </div> </div> </div>
4.4
- premier-10
<style> .additional-style.additional-style-50 h2, .additional-style.additional-style-50 h3, .additional-style.additional-style-50 ul { color: #fff; margin-bottom: 0; } .additional-style.additional-style-50 p { margin-bottom: 0; } .additional-style.additional-style-50 h3 { font-weight: 500; font-size: 30px; margin-bottom: 20px; } .additional-style.additional-style-50 a:hover { opacity: 0.8; } .additional-style.additional-style-50 { background: #2B63D9; background-size: cover; padding: 20px 0; } .additional-style.additional-style-50 .additional-style-wrap { text-align: center; } .additional-style.additional-style-50 .additional-style-half { width: 100%; float: left; padding-right: 0.9375rem; padding-left: 0.9375rem; position: relative; } .additional-style.additional-style-50 .button { background: transparent; color: #fff; border: 1px solid #fff; margin-bottom: 25px; } .additional-style.additional-style-50 .rating-wrap { display: flex; align-items: center; justify-content: center; gap: 20px; } .additional-style.additional-style-50 .rating-wrap .rating { color: #fff; flex-shrink: 0; } .additional-style.additional-style-50 .rating-wrap .rating span { font-size: 50px; font-weight: bold; line-height: 1; } .additional-style.additional-style-50 .rating-wrap .rating .stars { font-size: 20px; } .additional-style.additional-style-50 .rating-wrap .images { display: flex; gap: 10px; } .additional-style.additional-style-50 .rating-wrap .images img { max-width: 30%; } .additional-style.additional-style-50 .additional-style-review { border-radius: 8px; background: #fff; padding: 30px; } .additional-style.additional-style-50 .additional-style-review .stars { margin-bottom: 10px; } .additional-style.additional-style-50 .additional-style-review p { font-size: 20px; } .additional-style.additional-style-50 .additional-style-review .name { font-size: 14px; text-transform: uppercase; letter-spacing: 0.25px; margin-top: 15px; } @media screen and (max-width: 47.9988em) { .additional-style.additional-style-50 .additional-style-review { margin-bottom: 20px; } } @media screen and (min-width: 48em) { .additional-style.additional-style-50 h3 { font-size: 32px; line-height: 1; } .additional-style.additional-style-50 p { font-size: 20px; } .additional-style.additional-style-50 { padding: 60px 0; } .additional-style.additional-style-50 .additional-style-wrap { display: flex; align-items: center; } .additional-style.additional-style-50 .additional-style-half { width: 50%; } .additional-style.additional-style-50 .rating-wrap { gap: 40px; } .additional-style.additional-style-50 .rating-wrap .rating span { font-size: 90px; } } </style> <div class="additional-style additional-style-50 clearfix"> <div class="additional-style-wrap"> <div class="additional-style-half"> <div class="additional-style-review"> <div class="additional-style-text"> <div class="stars">★★★★★</div> <p>“Our fantastic team are passionate about delivering outstanding customer experiences and our mission is to ensure that you love both the FN car buying experience and the car”</p> <p class="name">Numan, CEO FN Motors</p> </div></div> </div> <div class="additional-style-half"> <h3>See What Our Customers Have to Say</h3> <a href="/reviews/" class="button">Read More</a> <div class="rating-wrap"> <div class="rating"> <span>1.0</span> <div class="stars">★★★★★</div> </div> <div class="images"> <img src="https://img.spidersnet.co.uk/code-snippets/at-award-2023.svg"> <img src="https://img.spidersnet.co.uk/code-snippets/at-award-2024.svg"> <img src="https://img.spidersnet.co.uk/code-snippets/at-award-2025.svg"> </div> </div> </div> </div> </div>
4.4
- premier-9
<style> .additional-style.additional-style-50 h2, .additional-style.additional-style-50 h3, .additional-style.additional-style-50 p, .additional-style.additional-style-50 ul { color: #fff; margin-bottom: 0; } .additional-style.additional-style-50 h3 { font-weight: 500; font-size: 30px; margin-bottom: 20px; } .additional-style.additional-style-50 a:hover { opacity: 0.8; } .additional-style.additional-style-50 { text-align: center; margin-right: auto; margin-left: auto; max-width: 1920px; padding-left: 15px; padding-right: 15px; } @media screen and (min-width: 75em) { .additional-style.additional-style-50 { padding-left: 50px; padding-right: 50px; } } @media screen and (min-width: 90em) { .additional-style.additional-style-50 { padding-left: 70px; padding-right: 70px; } } .additional-style.additional-style-50 .additional-style-wrap { background: url(https://img.spidersnet.co.uk/code-snippets/style-50-bg.jpg) no-repeat center; background-size: cover; padding: 20px 0; max-width: 100%; border-radius: 20px; } .additional-style.additional-style-50 .additional-style-half { width: 100%; float: left; padding-right: 0.9375rem; padding-left: 0.9375rem; position: relative; } .additional-style.additional-style-50 .button { background: transparent; color: #fff; border: 1px solid #fff; margin-bottom: 25px; } .additional-style.additional-style-50 .rating-wrap { display: flex; align-items: center; justify-content: center; gap: 20px; } .additional-style.additional-style-50 .rating-wrap .rating { color: #fff; flex-shrink: 0; } .additional-style.additional-style-50 .rating-wrap .rating span { font-size: 50px; font-weight: bold; line-height: 1; } .additional-style.additional-style-50 .rating-wrap .rating .stars { font-size: 20px; } .additional-style.additional-style-50 .rating-wrap .images { display: flex; gap: 10px; } .additional-style.additional-style-50 .rating-wrap .images img { max-width: 30%; } .additional-style.additional-style-50 .additional-style-review { border-radius: 8px; border: 1px solid #FFF; padding: 30px; } .additional-style.additional-style-50 .additional-style-review .stars { color: #fff; margin-bottom: 10px; } .additional-style.additional-style-50 .additional-style-review p { font-size: 20px; } .additional-style.additional-style-50 .additional-style-review .name { font-size: 14px; text-transform: uppercase; letter-spacing: 0.25px; margin-top: 15px; } @media screen and (max-width: 47.9988em) { .additional-style.additional-style-50 .additional-style-review { margin-bottom: 20px; } } @media screen and (min-width: 48em) { .additional-style.additional-style-50 h3 { font-size: 32px; line-height: 1; } .additional-style.additional-style-50 p { font-size: 20px; } .additional-style.additional-style-50 .additional-style-wrap { display: flex; align-items: center; padding: 60px 20px; } .additional-style.additional-style-50 .additional-style-half { width: 50%; } .additional-style.additional-style-50 .rating-wrap { gap: 40px; } .additional-style.additional-style-50 .rating-wrap .rating span { font-size: 90px; } } </style> <div class="additional-style additional-style-50 clearfix"> <div class="additional-style-wrap"> <div class="additional-style-half"> <div class="additional-style-review"> <div class="additional-style-text"> <div class="stars">★★★★★</div> <p>“Our fantastic team are passionate about delivering outstanding customer experiences and our mission is to ensure that you love both the FN car buying experience and the car”</p> <p class="name">Numan, CEO FN Motors</p> </div></div> </div> <div class="additional-style-half"> <h3>See What Our Customers Have to Say</h3> <a href="/reviews/" class="button">Read More</a> <div class="rating-wrap"> <div class="rating"> <span>1.0</span> <div class="stars">★★★★★</div> </div> <div class="images"> <img src="https://img.spidersnet.co.uk/code-snippets/at-award-2023.svg"> <img src="https://img.spidersnet.co.uk/code-snippets/at-award-2024.svg"> <img src="https://img.spidersnet.co.uk/code-snippets/at-award-2025.svg"> </div> </div> </div> </div> </div>
4.4
- premier-1
- premier-2
- premier-3
- premier-4
- premier-5
- premier-6
- premier-7
- premier-8
- essential-1
- essential-2
<style> .additional-style.additional-style-50 h2, .additional-style.additional-style-50 h3, .additional-style.additional-style-50 p, .additional-style.additional-style-50 ul { color: #fff; margin-bottom: 0; } .additional-style.additional-style-50 h3 { font-weight: 500; font-size: 30px; margin-bottom: 20px; } .additional-style.additional-style-50 a:hover { opacity: 0.8; } .additional-style.additional-style-50 { background: url(https://img.spidersnet.co.uk/code-snippets/style-50-bg.png) no-repeat center; background-size: cover; padding: 20px 0; } .additional-style.additional-style-50 .additional-style-wrap { text-align: center; } .additional-style.additional-style-50 .additional-style-half { width: 100%; float: left; padding-right: 0.9375rem; padding-left: 0.9375rem; position: relative; } .additional-style.additional-style-50 .button { background: transparent; color: #fff; border: 1px solid #fff; margin-bottom: 25px; } .additional-style.additional-style-50 .rating-wrap { display: flex; align-items: center; justify-content: center; gap: 20px; } .additional-style.additional-style-50 .rating-wrap .rating { color: #fff; flex-shrink: 0; } .additional-style.additional-style-50 .rating-wrap .rating span { font-size: 50px; font-weight: bold; line-height: 1; } .additional-style.additional-style-50 .rating-wrap .rating .stars { font-size: 20px; } .additional-style.additional-style-50 .rating-wrap .images { display: flex; gap: 10px; } .additional-style.additional-style-50 .rating-wrap .images img { max-width: 30%; } .additional-style.additional-style-50 .additional-style-review { border-radius: 8px; border: 1px solid #FFF; padding: 30px; } .additional-style.additional-style-50 .additional-style-review .stars { color: #fff; margin-bottom: 10px; } .additional-style.additional-style-50 .additional-style-review p { font-size: 20px; } .additional-style.additional-style-50 .additional-style-review .name { font-size: 14px; text-transform: uppercase; letter-spacing: 0.25px; margin-top: 15px; } @media screen and (max-width: 47.9988em) { .additional-style.additional-style-50 .additional-style-review { margin-bottom: 20px; } } @media screen and (min-width: 48em) { .additional-style.additional-style-50 h3 { font-size: 32px; line-height: 1; } .additional-style.additional-style-50 p { font-size: 20px; } .additional-style.additional-style-50 { padding: 60px 0; } .additional-style.additional-style-50 .additional-style-wrap { display: flex; align-items: center; } .additional-style.additional-style-50 .additional-style-half { width: 50%; } .additional-style.additional-style-50 .rating-wrap { gap: 40px; } .additional-style.additional-style-50 .rating-wrap .rating span { font-size: 90px; } } </style> <div class="additional-style additional-style-50 clearfix"> <div class="additional-style-wrap"> <div class="additional-style-half"> <div class="additional-style-review"> <div class="additional-style-text"> <div class="stars">★★★★★</div> <p>“Our fantastic team are passionate about delivering outstanding customer experiences and our mission is to ensure that you love both the FN car buying experience and the car”</p> <p class="name">Numan, CEO FN Motors</p> </div></div> </div> <div class="additional-style-half"> <h3>See What Our Customers Have to Say</h3> <a href="/reviews/" class="button">Read More</a> <div class="rating-wrap"> <div class="rating"> <span>1.0</span> <div class="stars">★★★★★</div> </div> <div class="images"> <img src="https://img.spidersnet.co.uk/code-snippets/at-award-2023.svg"> <img src="https://img.spidersnet.co.uk/code-snippets/at-award-2024.svg"> <img src="https://img.spidersnet.co.uk/code-snippets/at-award-2025.svg"> </div> </div> </div> </div> </div>
4.3
- essential-4
<style> .additional-style.additional-style-49 { clear: both; margin-right: auto; margin-left: auto; max-width: 1300px; } .additional-style.additional-style-49 .additional-style-wrap { width: 100%; float: left; padding-right: 0.9375rem; padding-left: 0.9375rem; position: relative; } .additional-style.additional-style-49 .additional-style-inner { } .additional-style.additional-style-49 .additional-style-49__block { border-radius: 20px; border: 5px solid #FFF; background: #F3F3F3; box-shadow: 0px 0px 60px 0px rgba(50, 52, 55, 0.20); padding: 20px; flex: 1; text-align: center; margin-bottom: 10px; } .additional-style.additional-style-49 .additional-style-49__block .review-logo { height: 40px; } .additional-style.additional-style-49 .additional-style-49__block .stars { color: #1597F4; font-size: 23px; } .additional-style.additional-style-49 .additional-style-49__block .rating { color: #000; font-size: 20px; line-height: 1; margin-bottom: 25px; } .additional-style.additional-style-49 .additional-style-49__block .rating span { font-size: 58px; } .additional-style.additional-style-49 .additional-style-49__block .button { margin-bottom: 0; } @media screen and (min-width: 48em) { .additional-style.additional-style-49 { } .additional-style.additional-style-49 .additional-style-inner { display: flex; justify-content: space-between; gap: 42px; } .additional-style.additional-style-49 .additional-style-49__block { padding: 40px; } } </style> <div class="additional-style additional-style-49 clearfix"> <div class="additional-style-wrap"> <div class="additional-style-inner"> <div class="additional-style-49__block"> <div class="review-logo"><img src="https://img.spidersnet.co.uk/code-snippets/google-logo.svg"></div> <p class="stars">★ ★ ★ ★ ★</p> <p class="rating">Rated <span>4.8</span> out of 5</p> <a href="PUT_LINK_HERE" target="_blank" class="button">Read More</a> </div> <div class="additional-style-49__block"> <div class="review-logo"><img src="https://img.spidersnet.co.uk/code-snippets/at-logo.svg"></div> <p class="stars">★ ★ ★ ★ ★</p> <p class="rating">Rated <span>4.8</span> out of 5</p> <a href="PUT_LINK_HERE" target="_blank" class="button">Read More</a> </div> <div class="additional-style-49__block"> <div class="review-logo"><img src="https://img.spidersnet.co.uk/code-snippets/facebook-logo.svg"></div> <p class="stars">★ ★ ★ ★ ★</p> <p class="rating">Rated <span>4.8</span> out of 5</p> <a href="PUT_LINK_HERE" target="_blank" class="button">Read More</a> </div> </div> </div> </div>
4.3
- essential-3
<style> .additional-style.additional-style-49 { clear: both; margin-right: auto; margin-left: auto; max-width: 1280px; } .additional-style.additional-style-49 .additional-style-wrap { width: 100%; float: left; padding-right: 0.9375rem; padding-left: 0.9375rem; position: relative; } .additional-style.additional-style-49 .additional-style-inner { background: url(https://img.spidersnet.co.uk/code-snippets/style-49-bg.jpg) no-repeat center; background-size: cover; padding: 60px; border-radius: 30px; } .additional-style.additional-style-49 .additional-style-49__block { background: rgba(255, 255, 255, 0.75); border-radius: 55px 0px; padding: 20px; flex: 1; text-align: center; margin-bottom: 10px; } .additional-style.additional-style-49 .additional-style-49__block .review-logo { height: 40px; } .additional-style.additional-style-49 .additional-style-49__block .stars { color: #1597F4; font-size: 23px; } .additional-style.additional-style-49 .additional-style-49__block .rating { color: #000; font-size: 20px; line-height: 1; margin-bottom: 25px; } .additional-style.additional-style-49 .additional-style-49__block .rating span { font-size: 58px; } .additional-style.additional-style-49 .additional-style-49__block .button { margin-bottom: 0; } @media screen and (min-width: 48em) { .additional-style.additional-style-49 .additional-style-inner { display: flex; justify-content: space-between; gap: 42px; padding: 60px; } } </style> <div class="additional-style additional-style-49 clearfix"> <div class="additional-style-wrap"> <div class="additional-style-inner"> <div class="additional-style-49__block"> <div class="review-logo"><img src="https://img.spidersnet.co.uk/code-snippets/google-logo.svg"></div> <p class="stars">★ ★ ★ ★ ★</p> <p class="rating">Rated <span>4.8</span> out of 5</p> <a href="PUT_LINK_HERE" target="_blank" class="button">Read More</a> </div> <div class="additional-style-49__block"> <div class="review-logo"><img src="https://img.spidersnet.co.uk/code-snippets/at-logo.svg"></div> <p class="stars">★ ★ ★ ★ ★</p> <p class="rating">Rated <span>4.8</span> out of 5</p> <a href="PUT_LINK_HERE" target="_blank" class="button">Read More</a> </div> <div class="additional-style-49__block"> <div class="review-logo"><img src="https://img.spidersnet.co.uk/code-snippets/facebook-logo.svg"></div> <p class="stars">★ ★ ★ ★ ★</p> <p class="rating">Rated <span>4.8</span> out of 5</p> <a href="PUT_LINK_HERE" target="_blank" class="button">Read More</a> </div> </div> </div> </div>
4.3
- essential-2
<style> .additional-style.additional-style-49 { background: url(https://img.spidersnet.co.uk/code-snippets/style-49-bg.jpg) no-repeat center; background-size: cover; padding: 20px 0; } .additional-style.additional-style-49 .additional-style-wrap { clear: both; margin-right: auto; margin-left: auto; max-width: 1200px; } .additional-style.additional-style-49 .additional-style-inner { width: 100%; float: left; padding-right: 0.9375rem; padding-left: 0.9375rem; position: relative; } .additional-style.additional-style-49 .additional-style-49__block { background: rgba(255, 255, 255, 0.75); padding: 20px; flex: 1; text-align: center; margin-bottom: 10px; } .additional-style.additional-style-49 .additional-style-49__block .review-logo { height: 40px; } .additional-style.additional-style-49 .additional-style-49__block .stars { color: #1597F4; font-size: 23px; } .additional-style.additional-style-49 .additional-style-49__block .rating { color: #000; font-size: 20px; line-height: 1; margin-bottom: 25px; } .additional-style.additional-style-49 .additional-style-49__block .rating span { font-size: 58px; } .additional-style.additional-style-49 .additional-style-49__block .button { margin-bottom: 0; position: relative; } .additional-style.additional-style-49 .additional-style-49__block .button:before { content: ''; background: #f7901e; position: absolute; top: 0; right: calc(10% + -25px); bottom: 0; width: 25px; transform: skewX(-20deg); } @media screen and (min-width: 48em) { .additional-style.additional-style-49 { padding: 60px 0; } .additional-style.additional-style-49 .additional-style-inner { display: flex; justify-content: space-between; gap: 42px; } .additional-style.additional-style-49 .additional-style-49__block { padding: 40px; } } </style> <div class="additional-style additional-style-49 clearfix"> <div class="additional-style-wrap"> <div class="additional-style-inner"> <div class="additional-style-49__block"> <div class="review-logo"><img src="https://img.spidersnet.co.uk/code-snippets/google-logo.svg"></div> <p class="stars">★ ★ ★ ★ ★</p> <p class="rating">Rated <span>4.8</span> out of 5</p> <a href="PUT_LINK_HERE" target="_blank" class="button">Read More</a> </div> <div class="additional-style-49__block"> <div class="review-logo"><img src="https://img.spidersnet.co.uk/code-snippets/at-logo.svg"></div> <p class="stars">★ ★ ★ ★ ★</p> <p class="rating">Rated <span>4.8</span> out of 5</p> <a href="PUT_LINK_HERE" target="_blank" class="button">Read More</a> </div> <div class="additional-style-49__block"> <div class="review-logo"><img src="https://img.spidersnet.co.uk/code-snippets/facebook-logo.svg"></div> <p class="stars">★ ★ ★ ★ ★</p> <p class="rating">Rated <span>4.8</span> out of 5</p> <a href="PUT_LINK_HERE" target="_blank" class="button">Read More</a> </div> </div> </div> </div>
4.3
- premier-11
<style> .additional-style.additional-style-49 { padding: 20px 0; } .additional-style.additional-style-49 .additional-style-wrap { clear: both; margin-right: auto; margin-left: auto; max-width: 1300px; } .additional-style.additional-style-49 .additional-style-inner { width: 100%; float: left; padding-right: 0.9375rem; padding-left: 0.9375rem; position: relative; } .additional-style.additional-style-49 .additional-style-49__block { border: 1px solid #1597F4; padding: 20px; flex: 1; text-align: center; margin-bottom: 10px; } .additional-style.additional-style-49 .additional-style-49__block .review-logo { height: 40px; } .additional-style.additional-style-49 .additional-style-49__block .stars { color: #1597F4; font-size: 23px; } .additional-style.additional-style-49 .additional-style-49__block .rating { font-size: 20px; line-height: 1; margin-bottom: 25px; } .additional-style.additional-style-49 .additional-style-49__block .rating span { font-size: 58px; } .additional-style.additional-style-49 .additional-style-49__block .button { margin-bottom: 0; } @media screen and (min-width: 48em) { .additional-style.additional-style-49 { padding: 60px 0; } .additional-style.additional-style-49 .additional-style-inner { display: flex; justify-content: space-between; gap: 42px; } .additional-style.additional-style-49 .additional-style-49__block { padding: 40px; } } </style> <div class="additional-style additional-style-49 clearfix"> <div class="additional-style-wrap"> <div class="additional-style-inner"> <div class="additional-style-49__block"> <div class="review-logo"><img src="https://img.spidersnet.co.uk/code-snippets/google-logo.svg"></div> <p class="stars">★ ★ ★ ★ ★</p> <p class="rating">Rated <span>4.8</span> out of 5</p> <a href="PUT_LINK_HERE" target="_blank" class="button">Read More</a> </div> <div class="additional-style-49__block"> <div class="review-logo"><img src="https://img.spidersnet.co.uk/code-snippets/at-logo.svg"></div> <p class="stars">★ ★ ★ ★ ★</p> <p class="rating">Rated <span>4.8</span> out of 5</p> <a href="PUT_LINK_HERE" target="_blank" class="button">Read More</a> </div> <div class="additional-style-49__block"> <div class="review-logo"><img src="https://img.spidersnet.co.uk/code-snippets/facebook-logo.svg"></div> <p class="stars">★ ★ ★ ★ ★</p> <p class="rating">Rated <span>4.8</span> out of 5</p> <a href="PUT_LINK_HERE" target="_blank" class="button">Read More</a> </div> </div> </div> </div>
4.3
- premier-10
<style> .additional-style.additional-style-49 { background: url(https://img.spidersnet.co.uk/code-snippets/style-49-bg.jpg) no-repeat center; background-size: cover; padding: 20px 0; } .additional-style.additional-style-49 .additional-style-wrap { clear: both; margin-right: auto; margin-left: auto; max-width: 1300px; } .additional-style.additional-style-49 .additional-style-inner { width: 100%; float: left; padding-right: 0.9375rem; padding-left: 0.9375rem; position: relative; } .additional-style.additional-style-49 .additional-style-49__block { border-radius: 6px; background: #fff; padding: 20px; flex: 1; text-align: center; margin-bottom: 10px; } .additional-style.additional-style-49 .additional-style-49__block .review-logo { height: 40px; } .additional-style.additional-style-49 .additional-style-49__block .stars { color: #1597F4; font-size: 23px; } .additional-style.additional-style-49 .additional-style-49__block .rating { color: #000; font-size: 20px; line-height: 1; margin-bottom: 25px; } .additional-style.additional-style-49 .additional-style-49__block .rating span { font-size: 58px; } .additional-style.additional-style-49 .additional-style-49__block .button { margin-bottom: 0; } @media screen and (min-width: 48em) { .additional-style.additional-style-49 { padding: 60px 0; } .additional-style.additional-style-49 .additional-style-inner { display: flex; justify-content: space-between; gap: 42px; } .additional-style.additional-style-49 .additional-style-49__block { padding: 40px; } } </style> <div class="additional-style additional-style-49 clearfix"> <div class="additional-style-wrap"> <div class="additional-style-inner"> <div class="additional-style-49__block"> <div class="review-logo"><img src="https://img.spidersnet.co.uk/code-snippets/google-logo.svg"></div> <p class="stars">★ ★ ★ ★ ★</p> <p class="rating">Rated <span>4.8</span> out of 5</p> <a href="PUT_LINK_HERE" target="_blank" class="button">Read More</a> </div> <div class="additional-style-49__block"> <div class="review-logo"><img src="https://img.spidersnet.co.uk/code-snippets/at-logo.svg"></div> <p class="stars">★ ★ ★ ★ ★</p> <p class="rating">Rated <span>4.8</span> out of 5</p> <a href="PUT_LINK_HERE" target="_blank" class="button">Read More</a> </div> <div class="additional-style-49__block"> <div class="review-logo"><img src="https://img.spidersnet.co.uk/code-snippets/facebook-logo.svg"></div> <p class="stars">★ ★ ★ ★ ★</p> <p class="rating">Rated <span>4.8</span> out of 5</p> <a href="PUT_LINK_HERE" target="_blank" class="button">Read More</a> </div> </div> </div> </div>
4.3
- premier-9
<style> .additional-style.additional-style-49 { background: url(https://img.spidersnet.co.uk/code-snippets/style-49-bg.jpg) no-repeat center; background-size: cover; padding: 20px 0; filter: drop-shadow(0px 4px 25px rgba(0, 0, 0, 0.2)); border-radius: 20px; margin-left: 15px; margin-right: 15px; position: relative; } .additional-style.additional-style-49 .additional-style-wrap { clear: both; margin-right: auto; margin-left: auto; max-width: 1920px; } @media screen and (min-width: 75em) { .additional-style.additional-style-49 .additional-style-wrap { padding-left: 50px; padding-right: 50px; } } @media screen and (min-width: 90em) { .additional-style.additional-style-49 .additional-style-wrap { padding-left: 70px; padding-right: 70px; } } .additional-style.additional-style-49 .additional-style-inner { width: 100%; float: left; padding-right: 0.9375rem; padding-left: 0.9375rem; position: relative; } .additional-style.additional-style-49 .additional-style-49__block { border-radius: 6px; background: rgba(255, 255, 255, 0.75); padding: 20px; flex: 1; text-align: center; margin-bottom: 10px; } .additional-style.additional-style-49 .additional-style-49__block .review-logo { height: 40px; } .additional-style.additional-style-49 .additional-style-49__block .stars { color: #1597F4; font-size: 23px; } .additional-style.additional-style-49 .additional-style-49__block .rating { color: #000; font-size: 20px; line-height: 1; margin-bottom: 25px; } .additional-style.additional-style-49 .additional-style-49__block .rating span { font-size: 58px; } .additional-style.additional-style-49 .additional-style-49__block .button { margin-bottom: 0; } @media screen and (min-width: 48em) { .additional-style.additional-style-49 { padding: 60px 0; } .additional-style.additional-style-49 .additional-style-inner { display: flex; justify-content: space-between; gap: 42px; } .additional-style.additional-style-49 .additional-style-49__block { padding: 40px; } } </style> <div class="additional-style additional-style-49 clearfix"> <div class="additional-style-wrap"> <div class="additional-style-inner"> <div class="additional-style-49__block"> <div class="review-logo"><img src="https://img.spidersnet.co.uk/code-snippets/google-logo.svg"></div> <p class="stars">★ ★ ★ ★ ★</p> <p class="rating">Rated <span>4.8</span> out of 5</p> <a href="PUT_LINK_HERE" target="_blank" class="button">Read More</a> </div> <div class="additional-style-49__block"> <div class="review-logo"><img src="https://img.spidersnet.co.uk/code-snippets/at-logo.svg"></div> <p class="stars">★ ★ ★ ★ ★</p> <p class="rating">Rated <span>4.8</span> out of 5</p> <a href="PUT_LINK_HERE" target="_blank" class="button">Read More</a> </div> <div class="additional-style-49__block"> <div class="review-logo"><img src="https://img.spidersnet.co.uk/code-snippets/facebook-logo.svg"></div> <p class="stars">★ ★ ★ ★ ★</p> <p class="rating">Rated <span>4.8</span> out of 5</p> <a href="PUT_LINK_HERE" target="_blank" class="button">Read More</a> </div> </div> </div> </div>
4.3
- premier-1
- premier-2
- premier-3
- premier-4
- premier-5
- premier-6
- premier-7
- premier-8
- essential-1
<style> .additional-style.additional-style-49 { background: url(https://img.spidersnet.co.uk/code-snippets/style-49-bg.jpg) no-repeat center; background-size: cover; padding: 20px 0; } .additional-style.additional-style-49 .additional-style-wrap { clear: both; margin-right: auto; margin-left: auto; max-width: 1200px; } .additional-style.additional-style-49 .additional-style-inner { width: 100%; float: left; padding-right: 0.9375rem; padding-left: 0.9375rem; position: relative; } .additional-style.additional-style-49 .additional-style-49__block { border-radius: 6px; background: rgba(255, 255, 255, 0.75); padding: 20px; flex: 1; text-align: center; margin-bottom: 10px; } .additional-style.additional-style-49 .additional-style-49__block .review-logo { height: 40px; } .additional-style.additional-style-49 .additional-style-49__block .stars { color: #1597F4; font-size: 23px; } .additional-style.additional-style-49 .additional-style-49__block .rating { color: #000; font-size: 20px; line-height: 1; margin-bottom: 25px; } .additional-style.additional-style-49 .additional-style-49__block .rating span { font-size: 58px; } .additional-style.additional-style-49 .additional-style-49__block .button { margin-bottom: 0; } @media screen and (min-width: 48em) { .additional-style.additional-style-49 { padding: 60px 0; } .additional-style.additional-style-49 .additional-style-inner { display: flex; justify-content: space-between; gap: 42px; } .additional-style.additional-style-49 .additional-style-49__block { padding: 40px; } } </style> <div class="additional-style additional-style-49 clearfix"> <div class="additional-style-wrap"> <div class="additional-style-inner"> <div class="additional-style-49__block"> <div class="review-logo"><img src="https://img.spidersnet.co.uk/code-snippets/google-logo.svg"></div> <p class="stars">★ ★ ★ ★ ★</p> <p class="rating">Rated <span>4.8</span> out of 5</p> <a href="PUT_LINK_HERE" target="_blank" class="button">Read More</a> </div> <div class="additional-style-49__block"> <div class="review-logo"><img src="https://img.spidersnet.co.uk/code-snippets/at-logo.svg"></div> <p class="stars">★ ★ ★ ★ ★</p> <p class="rating">Rated <span>4.8</span> out of 5</p> <a href="PUT_LINK_HERE" target="_blank" class="button">Read More</a> </div> <div class="additional-style-49__block"> <div class="review-logo"><img src="https://img.spidersnet.co.uk/code-snippets/facebook-logo.svg"></div> <p class="stars">★ ★ ★ ★ ★</p> <p class="rating">Rated <span>4.8</span> out of 5</p> <a href="PUT_LINK_HERE" target="_blank" class="button">Read More</a> </div> </div> </div> </div>
4.2
- essential-4
<style> .additional-style.additional-style-48 { position: relative; } .additional-style.additional-style-48 .additional-style-wrap { clear: both; margin-right: auto; margin-left: auto; max-width: 1300px; } .additional-style.additional-style-48 .additional-style-inner { width: 100%; float: left; padding-right: 0.9375rem; padding-left: 0.9375rem; position: relative; text-align: center; } .additional-style.additional-style-48 .additional-style-bg { border-radius: 20px; border: 5px solid #FFF; background: #F3F3F3; box-shadow: 0px 0px 60px 0px rgba(50, 52, 55, 0.20); padding-top: 30px; padding-bottom: 30px; } @media screen and (min-width: 48em) { .additional-style.additional-style-48 .additional-style-bg { @media screen and (min-width: 48em) { display: flex; align-items: center; justify-content: space-between; gap: 30px; text-align: left; padding: 50px; } } } @media screen and (max-width: 47.9988em) { .additional-style.additional-style-48__left { margin-bottom: 20px; } } .additional-style.additional-style-48__right { display: flex; gap: 10px; } @media screen and (min-width: 48em) { .additional-style.additional-style-48__right { text-align: right; } } .additional-style.additional-style-48 .additional-style-48__right img { margin: 5px; } .additional-style.additional-style-48 h2, .additional-style.additional-style-48 h3, .additional-style.additional-style-48 p, .additional-style.additional-style-48 ul { margin-bottom: 0; } .additional-style.additional-style-48 h3 { font-weight: 500; font-size: 30px; } @media screen and (min-width: 48em) { .additional-style.additional-style-48 h3 { font-size: 42px; line-height: 1; } } @media screen and (min-width: 48em) { .additional-style.additional-style-48 p { font-size: 20px; } } .additional-style.additional-style-48 a:hover { opacity: 0.8; } </style> <div class="additional-style additional-style-48 clearfix"> <div class="additional-style-wrap"> <div class="additional-style-inner"> <div class="additional-style-bg"> <div class="additional-style-48__left"> <img src="/basemedia/star.svg" class="fr-fic fr-dii"> <img src="/basemedia/star.svg" class="fr-fic fr-dii"> <img src="/basemedia/star.svg" class="fr-fic fr-dii"> <img src="/basemedia/star.svg" class="fr-fic fr-dii"> <img src="/basemedia/star.svg" class="fr-fic fr-dii"> <h3>Customer Reviews</h3> <p>See what our customers have to say...</p> </div> <div class="additional-style-48__right"> <a href="PUT_LINK_HERE" target="_blank"><img src="https://img.spidersnet.co.uk/code-snippets/google-button.svg"></a> <a href="PUT_LINK_HERE" target="_blank"><img src="https://img.spidersnet.co.uk/code-snippets/autotrader-button.svg"></a> <a href="PUT_LINK_HERE" target="_blank"><img src="https://img.spidersnet.co.uk/code-snippets/facebook-button.svg"></a> </div> </div> </div> </div> </div>
4.2
- premier-9
- essential-3
<style> .additional-style.additional-style-48 { background: #363636; filter: drop-shadow(0px 4px 25px rgba(0, 0, 0, 0.2)); border-radius: 20px; margin-left: 15px; margin-right: 15px; position: relative; padding: 50px 0; } .additional-style.additional-style-48 .additional-style-wrap { clear: both; margin-right: auto; margin-left: auto; max-width: 1920px; } @media screen and (min-width: 75em) { .additional-style.additional-style-48 .additional-style-wrap { padding-left: 50px; padding-right: 50px; } } @media screen and (min-width: 90em) { .additional-style.additional-style-48 .additional-style-wrap { padding-left: 70px; padding-right: 70px; } } .additional-style.additional-style-48 .additional-style-inner { width: 100%; float: left; padding-right: 0.9375rem; padding-left: 0.9375rem; position: relative; text-align: center; } @media screen and (min-width: 48em) { .additional-style.additional-style-48 .additional-style-inner { @media screen and (min-width: 48em) { display: flex; align-items: center; justify-content: space-between; gap: 30px; text-align: left; } } } @media screen and (max-width: 47.9988em) { .additional-style.additional-style-48__left { margin-bottom: 20px; } } .additional-style.additional-style-48__right { display: flex; gap: 10px; } @media screen and (min-width: 48em) { .additional-style.additional-style-48__right { text-align: right; } } .additional-style.additional-style-48 h2, .additional-style.additional-style-48 h3, .additional-style.additional-style-48 p, .additional-style.additional-style-48 ul { color: #fff; margin-bottom: 0; } .additional-style.additional-style-48 h3 { font-weight: 500; font-size: 30px; } @media screen and (min-width: 48em) { .additional-style.additional-style-48 h3 { font-size: 42px; line-height: 1; } } @media screen and (min-width: 48em) { .additional-style.additional-style-48 p { font-size: 20px; } } .additional-style.additional-style-48 a:hover { opacity: 0.8; } </style> <div class="additional-style additional-style-48 clearfix"> <div class="additional-style-wrap"> <div class="additional-style-inner"> <div class="additional-style-48__left"> <img src="/basemedia/star.svg" class="fr-fic fr-dii"> <img src="/basemedia/star.svg" class="fr-fic fr-dii"> <img src="/basemedia/star.svg" class="fr-fic fr-dii"> <img src="/basemedia/star.svg" class="fr-fic fr-dii"> <img src="/basemedia/star.svg" class="fr-fic fr-dii"> <h3>Customer Reviews</h3> <p>See what our customers have to say...</p> </div> <div class="additional-style-48__right"> <a href="PUT_LINK_HERE" target="_blank"><img src="https://img.spidersnet.co.uk/code-snippets/google-button.svg"></a> <a href="PUT_LINK_HERE" target="_blank"><img src="https://img.spidersnet.co.uk/code-snippets/autotrader-button.svg"></a> <a href="PUT_LINK_HERE" target="_blank"><img src="https://img.spidersnet.co.uk/code-snippets/facebook-button.svg"></a> </div> </div> </div> </div>
4.2
- premier-1
- premier-2
- premier-3
- premier-4
- premier-5
- premier-6
- premier-7
- premier-8
- premier-10
- premier-11
- essential-1
- essential-2
<style> .additional-style.additional-style-48 { background: #1597F4; position: relative; padding: 50px 0; } .additional-style.additional-style-48 .additional-style-inner { width: 100%; float: left; padding-right: 0.9375rem; padding-left: 0.9375rem; position: relative; text-align: center; } @media screen and (min-width: 48em) { .additional-style.additional-style-48 .additional-style-inner { @media screen and (min-width: 48em) { display: flex; align-items: center; justify-content: space-between; gap: 30px; text-align: left; } } } @media screen and (max-width: 47.9988em) { .additional-style.additional-style-48__left { margin-bottom: 20px; } } .additional-style.additional-style-48__right { display: flex; gap: 10px; } @media screen and (min-width: 48em) { .additional-style.additional-style-48__right { text-align: right; } } .additional-style.additional-style-48 h2, .additional-style.additional-style-48 h3, .additional-style.additional-style-48 p, .additional-style.additional-style-48 ul { color: #fff; margin-bottom: 0; } .additional-style.additional-style-48 img { margin: 5px; } .additional-style.additional-style-48 h3 { font-weight: 500; font-size: 30px; } @media screen and (min-width: 48em) { .additional-style.additional-style-48 h3 { font-size: 42px; line-height: 1; } } @media screen and (min-width: 48em) { .additional-style.additional-style-48 p { font-size: 20px; } } .additional-style.additional-style-48 a:hover { opacity: 0.8; } </style> <div class="additional-style additional-style-48 clearfix"> <div class="additional-style-wrap"> <div class="additional-style-inner"> <div class="additional-style-48__left"> <img src="/basemedia/star.svg" class="fr-fic fr-dii"> <img src="/basemedia/star.svg" class="fr-fic fr-dii"> <img src="/basemedia/star.svg" class="fr-fic fr-dii"> <img src="/basemedia/star.svg" class="fr-fic fr-dii"> <img src="/basemedia/star.svg" class="fr-fic fr-dii"> <h3>Customer Reviews</h3> <p>See what our customers have to say...</p> </div> <div class="additional-style-48__right"> <a href="PUT_LINK_HERE" target="_blank"><img src="https://img.spidersnet.co.uk/code-snippets/google-button.svg"></a> <a href="PUT_LINK_HERE" target="_blank"><img src="https://img.spidersnet.co.uk/code-snippets/autotrader-button.svg"></a> <a href="PUT_LINK_HERE" target="_blank"><img src="https://img.spidersnet.co.uk/code-snippets/facebook-button.svg"></a> </div> </div> </div> </div>
5.17
<div class="additional-style additional-style-47 clearfix"> <div class="additional-style-wrap"> <div class="additional-style-inner"> <div class="additional-style-47__logo"> <img src="https://img.spidersnet.co.uk/code-snippets/rac-approved.svg"> </div> <div class="additional-style-47__divider"></div> <div class="additional-style-47__element"> <h3>Why an RAC Warranty?</h3> <ul> <li>12 months free breakdown cover*</li> <li>No excess to pay</li> <li>Monthly payments to spread costsd</li> <span>*May require activation</span> </ul> </div> </div> </div> </div> <link rel="stylesheet" href="https://use.typekit.net/xhn1zlo.css">
5.16
<div class="additional-style additional-style-46 clearfix"> <div class="additional-style-wrap"> <div class="additional-style-inner"> <div class="additional-style-46__logo"> <img src="https://img.spidersnet.co.uk/code-snippets/rac-approved.svg"> </div> <div class="additional-style-46__divider"></div> <div class="additional-style-46__element"> <h3>Why an RAC Warranty?</h3> <ul> <li>12 months free breakdown cover*</li> <li>No excess to pay</li> <li>Monthly payments to spread costsd</li> <span>*May require activation</span> </ul> </div> </div> </div> </div> <link rel="stylesheet" href="https://use.typekit.net/xhn1zlo.css">
5.15
<div class="additional-style additional-style-45 clearfix"> <div class="additional-style-wrap"> <div class="additional-style-inner"> <div class="additional-style-45__logo"> <img src="https://img.spidersnet.co.uk/code-snippets/rac-approved.svg"> </div> <div class="additional-style-45__divider"></div> <div class="additional-style-45__element"> <ul> <li>Minimum 12 months RAC Warranty</li> <li>12 months free RAC Roadside Cover*</li> <li>Prepared to the RAC 82 point Approved Vehicle Standard</li> <span>*Vehicle-based Roadside Cover</span> </ul> </div> </div> </div> </div> <link rel="stylesheet" href="https://use.typekit.net/xhn1zlo.css">
5.14
<div class="additional-style additional-style-44 clearfix"> <div class="additional-style-wrap"> <div class="additional-style-inner"> <div class="additional-style-44__logo"> <img src="https://img.spidersnet.co.uk/code-snippets/rac-approved.svg"> </div> <div class="additional-style-44__divider"></div> <div class="additional-style-44__element"> <ul> <li>Minimum 12 months RAC Warranty</li> <li>12 months free RAC Roadside Cover*</li> <li>Prepared to the RAC 82 point Approved Vehicle Standard</li> <span>*Vehicle-based Roadside Cover</span> </ul> </div> </div> </div> </div> <link rel="stylesheet" href="https://use.typekit.net/xhn1zlo.css">
5.13
<div class="additional-style additional-style-43 clearfix"> <div class="additional-style-wrap"> <div class="additional-style-inner"> <div class="additional-style-43__logo"> <img src="https://img.spidersnet.co.uk/code-snippets/rac-approved.svg"> </div> <div class="additional-style-43__arrows"> <img src="https://img.spidersnet.co.uk/code-snippets/rac-arrow-orange.png"> </div> <div class="additional-style-43__element"> <h3>Proud to be an <span>RAC Approved Dealer</span></h3> </div> </div> </div> </div> <link rel="stylesheet" href="https://use.typekit.net/xhn1zlo.css">
5.12
<div class="additional-style additional-style-42 clearfix"> <div class="additional-style-wrap"> <div class="additional-style-inner"> <div class="additional-style-42__logo"> <img src="https://img.spidersnet.co.uk/code-snippets/rac-warranty.svg"> </div> <div class="additional-style-42__arrows"> <img src="https://img.spidersnet.co.uk/code-snippets/rac-arrow-grey.png"> </div> <div class="additional-style-42__element"> <h3>Drive away with peace of mind</h3> <p>Our simple claims procedure means vehicles are back on the road as soon as possible</p> </div> </div> </div> </div> <link rel="stylesheet" href="https://use.typekit.net/xhn1zlo.css">
5.11
<div class="additional-style additional-style-41 clearfix"> <div class="additional-style-wrap"> <div class="additional-style-inner"> <div class="additional-style-41__logo"> <img src="https://img.spidersnet.co.uk/code-snippets/rac-warranty.svg"> </div> <div class="additional-style-41__arrows"> <img src="https://img.spidersnet.co.uk/code-snippets/rac-arrow-orange.png"> </div> <div class="additional-style-41__element"> <h3>Drive away with <span>peace of mind</span></h3> <p>Our simple claims procedure means vehicles are back on the road as soon as possible</p> </div> </div> </div> </div> <link rel="stylesheet" href="https://use.typekit.net/xhn1zlo.css">
4.1
Add to additional text area
<div class="additional-style additional-style-38 clearfix"> <div class="additional-style-wrap"> <div class="additional-style-inner"> <div class="additional-style-header"> <div class="reviews-title"><img src="/basemedia/star.svg" class="fr-fic fr-dii"> <img src="/basemedia/star.svg" class="fr-fic fr-dii"> <img src="/basemedia/star.svg" class="fr-fic fr-dii"> <img src="/basemedia/star.svg" class="fr-fic fr-dii"> <img src="/basemedia/star.svg" class="fr-fic fr-dii"> <h3>What our customers say about us</h3> </div> <div class="reviews-button"><a class="button" href="PUT_LINK_HERE">View Reviews</a></div></div> <ul class="additional-style-reviews"> <li> <div class="additional-style-review"> <div class="additional-style-text"> <p>“Our fantastic team are passionate about delivering outstanding customer experiences and our mission is to ensure that you love both the FN car buying experience and the car”</p> <p class="name">Numan, CEO FN Motors</p> </div></div> </li> <li> <div class="additional-style-review"> <div class="additional-style-text"> <p>“Our fantastic team are passionate about delivering outstanding customer experiences and our mission is to ensure that you love both the FN car buying experience and the car”</p> <p class="name">Numan, CEO FN Motors</p> </div></div> </li> <li> <div class="additional-style-review"> <div class="additional-style-text"> <p>“Our fantastic team are passionate about delivering outstanding customer experiences and our mission is to ensure that you love both the FN car buying experience and the car”</p> <p class="name">Numan, CEO FN Motors</p> </div></div> </li> </ul> </div></div></div>
Change quote mark colour
Add to custom script
.additional-style.additional-style-38 .additional-style-inner .additional-style-reviews .additional-style-review:after { background: YOUR_COLOUR; }
1.5
<div class="additional-style additional-style-35 clearfix"> <div class="additional-style-wrap"> <div class="additional-style-inner"> <div class="additional-style-35__title"> <h3 style="margin-bottom: 15px;">Looking to quickly sell your car online?</h3> <p style="margin-bottom: 0;"><a class="button" href="/sell-your-car/" style="margin-bottom: 0;">Sell Your Car</a></p> </div></div></div></div>
5.10
<div class="additional-style additional-style-33 clearfix"> <div class="additional-style-wrap"> <div class="additional-style-inner"> <div class="additional-style-33__image"><img src="https://img.spidersnet.co.uk/code-snippets/autotrader-logo.svg" class="fr-fic fr-dib" data-id="13522"></div> <div class="additional-style-33__title"> <h3><span>Highly Rated</span> for our customer service 2023</h3> </div> <div class="additional-style-33__button"><a class="button" href="PUT_LINK_HERE">Read More</a></div></div></div></div>
5.9
<div class="additional-style additional-style-32 clearfix"> <div class="additional-style-wrap"> <div class="additional-style-inner"> <div class="additional-style-32__logo"> <img src="https://img.spidersnet.co.uk/code-snippets/aa-cars.png"> </div> <div class="additional-style-32__text"> <h2>Driveaway</h2> <p>Quick and affordable short-term insurance</p> </div> </div> </div> </div> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
5.8
<div class="additional-style additional-style-31 clearfix"> <div class="additional-style-wrap"> <div class="additional-style-inner"> <div class="additional-style-31__logo"> <img src="https://img.spidersnet.co.uk/code-snippets/aa-cars.png"> </div> <div class="additional-style-31__text"> <h2>Driveaway</h2> <p>Quick and affordable short-term insurance</p> </div> </div> </div> </div> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
1.3
<div class="additional-style additional-style-28 clearfix"> <div class="additional-style-wrap"> <div class="additional-style-inner"> <div class="additional-style-bg" style="background: #F5F5F5;"> <h2>Looking to quickly sell your car online? You've come to the right place!</h2> <a class="button" href="PUT_LINK_HERE">Read More</a> </div> </div> </div> </div>
5.6
<div class="additional-style additional-style-27 clearfix"> <div class="additional-style-wrap"> <div class="additional-style-inner"> <div class="additional-style-27__logo"> <img src="https://s3-eu-west-1.amazonaws.com/files.autopromotor/3736/websiteMedia/3263/1713191202-logo-cargurus.svg" class="fr-fic fr-dib" data-id="60153" style="max-width:212px;"> </div> <div class="additional-style-27__right"> <h2><span style="font-weight: 300;">Cargurus 2023</span> Top Rated Dealer</h2> <p>We are proud to be recognized for exceptional customer service!</p> </div> </div> </div> </div>
5.5
No Background
<div class="additional-style additional-style-26 clearfix"> <div class="additional-style-wrap"> <div class="additional-style-inner"> <div class="additional-style-26__logo"> <img src="https://s3-eu-west-1.amazonaws.com/files.autopromotor/3736/websiteMedia/3263/1713191202-logo-cargurus.svg" class="fr-fic fr-dib" data-id="60153" style="max-width:212px;"> </div> <div class="additional-style-26__text"> <h3><span style="font-weight: 300;">Proud to be a</span> Top Rated Dealer 2022</h3> </div> <div class="additional-style-26__button"> <a href="PUT_LINK_HERE" class="button">Read More</a> </div> </div> </div> </div>
With Background
<div class="additional-style additional-style-26 clearfix" style="background: #F5F5F5;"> <div class="additional-style-wrap"> <div class="additional-style-inner"> <div class="additional-style-26__logo"> <img src="https://s3-eu-west-1.amazonaws.com/files.autopromotor/3736/websiteMedia/3263/1713191202-logo-cargurus.svg" class="fr-fic fr-dib" data-id="60153" style="max-width:212px;"> </div> <div class="additional-style-26__text"> <h3><span style="font-weight: 300;">Proud to be a</span> Top Rated Dealer 2022</h3> </div> <div class="additional-style-26__button"> <a href="PUT_LINK_HERE" class="button">Read More</a> </div> </div> </div> </div>
3.3
<div class="additional-style additional-style-21 clearfix"> <div class="additional-style-wrap"> <div class="additional-style-inner"> <ul> <li><img src="https://s3-eu-west-1.amazonaws.com/files.autopromotor/11933/websiteMedia/4224/1726500172-tire_repair.svg" class="fr-fic fr-dib" data-id="65532"> <h4>Garage Services</h4> <p>Providing a wide array of car servicing options</p> </li> <li><img src="https://s3-eu-west-1.amazonaws.com/files.autopromotor/11933/websiteMedia/4224/1726500179-build.svg" class="fr-fic fr-dib" data-id="65535"> <h4>Repairs</h4> <p>One-stop destination for professional car repairs</p> </li> <li><img src="https://s3-eu-west-1.amazonaws.com/files.autopromotor/11933/websiteMedia/4224/1726500189-inventory.svg" class="fr-fic fr-dib" data-id="65538"> <h4>Independent MOT</h4> <p>Proud to offer comprehensive MOT services</p> </li> </ul> </div> </div> </div>
2.2
No Background
<div class="additional-style additional-style-20 clearfix"> <div class="additional-style-wrap"> <div class="additional-style-inner"> <div class="additional-style-20__title"> <h2>Proud To Work With</h2> </div> <div class="additional-style-20__images"> <ul> <li><img src="https://s3.eu-west-1.amazonaws.com/processed-files.autopromotor.co.uk/shared/assets/add-text-icon-1.png" class="fr-fic fr-dib" data-id="13498"></li> <li><img src="https://s3.eu-west-1.amazonaws.com/processed-files.autopromotor.co.uk/shared/assets/add-text-icon-1.png" class="fr-fic fr-dib" data-id="13498"></li> <li><img src="https://s3.eu-west-1.amazonaws.com/processed-files.autopromotor.co.uk/shared/assets/add-text-icon-1.png" class="fr-fic fr-dib" data-id="13498"></li> </ul> </div> </div> </div> </div>
With Background
<div class="additional-style additional-style-20 clearfix" style="background-color: PUT_COLOUR_HERE;"> <div class="additional-style-wrap"> <div class="additional-style-inner"> <div class="additional-style-20__title"> <h2>Proud To Work With</h2> </div> <div class="additional-style-20__images"> <ul> <li><img src="https://s3.eu-west-1.amazonaws.com/processed-files.autopromotor.co.uk/shared/assets/add-text-icon-1.png" class="fr-fic fr-dib" data-id="13498"></li> <li><img src="https://s3.eu-west-1.amazonaws.com/processed-files.autopromotor.co.uk/shared/assets/add-text-icon-1.png" class="fr-fic fr-dib" data-id="13498"></li> <li><img src="https://s3.eu-west-1.amazonaws.com/processed-files.autopromotor.co.uk/shared/assets/add-text-icon-1.png" class="fr-fic fr-dib" data-id="13498"></li> </ul> </div> </div> </div> </div>
6.1
<div class="additional-style additional-style-16 clearfix"> <div class="additional-style-wrap"> <div class="additional-style-inner"> <h3><span>FOLLOW US ON INSTAGRAM</span> / @spidersnetuk</h3><a class="button" href="PUT_LINK_HERE"target="_blank">Follow</a></div></div></div>
2.1
Without Links
<div class="additional-style additional-style-3 clearfix"> <div class="additional-style-wrap"> <div class="additional-style-inner"> <ul> <li><img src="https://s3.eu-west-1.amazonaws.com/processed-files.autopromotor.co.uk/shared/assets/add-text-icon-1.png" class="fr-fic fr-dib" data-id="13498"></li> <li><img src="https://s3.eu-west-1.amazonaws.com/processed-files.autopromotor.co.uk/shared/assets/add-text-icon-1.png" class="fr-fic fr-dib" data-id="13498"></li> <li><img src="https://s3.eu-west-1.amazonaws.com/processed-files.autopromotor.co.uk/shared/assets/add-text-icon-1.png" class="fr-fic fr-dib" data-id="13498"></li> <li><img src="https://s3.eu-west-1.amazonaws.com/processed-files.autopromotor.co.uk/shared/assets/add-text-icon-1.png" class="fr-fic fr-dib" data-id="13498"></li> <li><img src="https://s3.eu-west-1.amazonaws.com/processed-files.autopromotor.co.uk/shared/assets/add-text-icon-1.png" class="fr-fic fr-dib" data-id="13498"></li> </ul> </div></div></div>
With Links
<div class="additional-style additional-style-3 clearfix"> <div class="additional-style-wrap"> <div class="additional-style-inner"> <ul> <li><a href="PUT_LINK_HERE"><img src="https://s3.eu-west-1.amazonaws.com/processed-files.autopromotor.co.uk/shared/assets/add-text-icon-1.png" class="fr-fic fr-dib" data-id="13498"></a></li> <li><a href="PUT_LINK_HERE"><img src="https://s3.eu-west-1.amazonaws.com/processed-files.autopromotor.co.uk/shared/assets/add-text-icon-1.png" class="fr-fic fr-dib" data-id="13498"></a></li> <li><a href="PUT_LINK_HERE"><img src="https://s3.eu-west-1.amazonaws.com/processed-files.autopromotor.co.uk/shared/assets/add-text-icon-1.png" class="fr-fic fr-dib" data-id="13498"></a></li> <li><a href="PUT_LINK_HERE"><img src="https://s3.eu-west-1.amazonaws.com/processed-files.autopromotor.co.uk/shared/assets/add-text-icon-1.png" class="fr-fic fr-dib" data-id="13498"></a></li> <li><a href="PUT_LINK_HERE"><img src="https://s3.eu-west-1.amazonaws.com/processed-files.autopromotor.co.uk/shared/assets/add-text-icon-1.png" class="fr-fic fr-dib" data-id="13498"></a></li> </ul> </div></div></div>
With Text (no links)
<div class="additional-style additional-style-3 clearfix"> <div class="additional-style-wrap"> <div class="additional-style-inner"> <div class="additional-style-text"> <p>We really value your feedback, therefore we’d be super grateful if you could take a minute to leave us a review!</p> </div> <ul> <li><img src="https://s3.eu-west-1.amazonaws.com/processed-files.autopromotor.co.uk/shared/assets/add-text-icon-1.png" class="fr-fic fr-dib" data-id="13498"></li> <li><img src="https://s3.eu-west-1.amazonaws.com/processed-files.autopromotor.co.uk/shared/assets/add-text-icon-1.png" class="fr-fic fr-dib" data-id="13498"></li> <li><img src="https://s3.eu-west-1.amazonaws.com/processed-files.autopromotor.co.uk/shared/assets/add-text-icon-1.png" class="fr-fic fr-dib" data-id="13498"></li> <li><img src="https://s3.eu-west-1.amazonaws.com/processed-files.autopromotor.co.uk/shared/assets/add-text-icon-1.png" class="fr-fic fr-dib" data-id="13498"></li> <li><img src="https://s3.eu-west-1.amazonaws.com/processed-files.autopromotor.co.uk/shared/assets/add-text-icon-1.png" class="fr-fic fr-dib" data-id="13498"></li> </ul> </div></div></div>
E
- essential-1
- essential-2
- essential-3
- essential-4
Default (Centre aligned)
<div class="hero-caption"> <h2>Buy Your Next Car From The Comfort of Your Home</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</p> </div>
Right aligned
<div class="hero-caption right"> <h2>Buy Your Next Car From The Comfort of Your Home</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</p> </div>
Left aligned
<div class="hero-caption left"> <h2>Buy Your Next Car From The Comfort of Your Home</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</p> </div>
P11
- premier-11
<h2>Best Choice of Body Kit Exhaust</h2> <h3>New Arrivals</h3> <p><a class="button" href="/used/cars/">Stocklist</a></p>
P10
- premier-10
<div class="hero-caption"> <p>Welcome to Spidersnet</p> <h2>We can help you find your perfect car</h2> <p><a class="button" href="/used/cars/" tabindex="0">View Stock</a></p> </div>
P7
- premier-7
Default (line above and below)
<div class="hero-caption style"> <h2>We can help you to</h2> <p>Finance your next car</p> </div>
Right aligned
<div class="hero-caption style right"> <h2>We can help you to</h2> <p>Finance your next car</p> </div>
Centre aligned
<div class="hero-caption style center"> <h2>We can help you to</h2> <p>Finance your next car</p> </div>
Plain
<div class="hero-caption"> <h2>We can help you to</h2> <p>Finance your next car</p> </div>
With Icon
<div class="hero-caption style icon"> <img src="https://s3.eu-west-1.amazonaws.com/processed-files.autopromotor.co.uk/shared/assets/hero-icon-p7.png" class="fr-fic fr-dib" data-id="13495"> <h2>Buy Your Next Car From The Comfort of Your Home</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</p> </div>
With title, text and button
<div class="hero-caption style"> <h2>Find your next van today</h2> <p>Check out our latest used vans for sale</p> <a style="margin-top: 20px; margin-bottom: 10px;"class="button" href="/used/vans/">View Stock</a> </div>
P6
- premier-6
Default (Left aligned)
<div class="hero-caption"> <h2>Buy Your Next Car From The Comfort of Your Home</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</p> </div>
Right aligned
<div class="hero-caption right"> <h2>Buy Your Next Car From The Comfort of Your Home</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</p> </div>
Centre aligned
<div class="hero-caption center"> <h2>Buy Your Next Car From The Comfort of Your Home</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</p> </div>
P5
- premier-5
Default (Left aligned)
<div class="hero-caption"> <h2>Buy Your Next Car From The Comfort of Your Home</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</p> </div>
Right aligned
<div class="hero-caption right"> <h2>Buy Your Next Car From The Comfort of Your Home</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</p> </div>
Centre aligned
<div class="hero-caption center"> <h2>Buy Your Next Car From The Comfort of Your Home</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</p> </div>
P4
- premier-4
Default (Left aligned)
<div class="hero-caption"> <h2>Buy Your Next Car From The Comfort of Your Home</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</p> </div>
Right aligned
<div class="hero-caption right"> <h2>Buy Your Next Car From The Comfort of Your Home</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</p> </div>
Centre aligned
<div class="hero-caption center"> <h2>Buy Your Next Car From The Comfort of Your Home</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</p> </div>
P3
- premier-3
<div class="hero-caption"> <h2>Buy Your Next Car From The Comfort of Your Home</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</p> </div>
P2
- premier-2
Default (Left aligned)
<div class="hero-caption"> <h2>Buy Your Next Car From The Comfort of Your Home</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</p> </div>
Right aligned
<div class="hero-caption right"> <h2>Buy Your Next Car From The Comfort of Your Home</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</p> </div>
Centre aligned
<div class="hero-caption center"> <h2>Buy Your Next Car From The Comfort of Your Home</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</p> </div>
P1
- premier-1
Default (Centre aligned)
<div class="hero-caption"> <h2>Buy Your Next Car From The Comfort of Your Home</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</p> </div>
Right aligned
<div class="hero-caption right"> <h2>Buy Your Next Car From The Comfort of Your Home</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</p> </div>
Left aligned
<div class="hero-caption left"> <h2>Buy Your Next Car From The Comfort of Your Home</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do</p> </div>

Snippet Site

6.10

6.9

6.8

6.7

5.24

5.23

5.22

3.9

3.10

6.6

6.5

6.4

6.3

6.2

3.9

3.8

3.8

3.7

5.21

5.20

5.19

5.18

2.3

4.7

4.7

4.7

4.6

4.6

4.6

4.6

4.6

4.5

4.5

4.5

4.5

4.5

3.6

3.5

Colour changes

4.4

4.4

4.4

4.4

4.4

4.4

4.3

4.3

4.3

4.3

4.3