CINXE.COM
Submarine Guernsey | Website Design | Application Development | Business Systems
<!DOCTYPE html> <!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]--> <!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]--> <!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]--> <!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]--> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> <link rel="canonical" href="https://www.submarine.gg/"/> <title>Submarine Guernsey | Website Design | Application Development | Business Systems</title> <meta name="description" content="Website design, bespoke systems, mobile app and software application development in Guernsey."> <meta property="og:type" content="website"> <meta property="og:title" content="Submarine Guernsey | Website Design | Application Development | Business Systems" /> <meta property="og:image" content="https://www.submarine.gg/media/1452/main-sub-og.png" /> <meta property="og:url" content="https://www.submarine.gg/" /> <meta property="og:description" content="Website design, bespoke systems, mobile app and software application development in Guernsey." /> <meta property="og:site_name" content="Submarine" /> <meta name="twitter:card" content="summary" /> <meta name="twitter:site" content="@http://www.twitter.com/submarinegy" /> <meta name="twitter:creator" content="@@SubmarineGY" /> <link href="https://goo.gl/maps/cm1PDpQbH6J2" rel="publisher" /> <!-- WEB FONT --> <link href='//fonts.googleapis.com/css?family=Poppins:400,300,500,600,700' rel="stylesheet" media="none" onload="this.media='all';"> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" media="none" onload="this.media='all';"> <link href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" media="none" onload="this.media='all';"> <!-- STYLESHEETS --> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- COMPILED STYLESHEETS --> <link rel="stylesheet" href="/scss/usn-global.min.css" /> <!-- INTERNAL STYLES --> <style> header #logo { width: 166px; height: 40px; } header #logo a { width: 166px; height: 40px; background-image: url('/media/1031/submarine_white.png?width=166&height=40'); background-repeat:no-repeat; background-position:center; } @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5), only screen and (-webkit-min-device-pixel-ratio : 2), only screen and (min-device-pixel-ratio : 2) { header #logo a { background-image: url('/media/1031/submarine_white.png'); background-size: 166px 40px; } } </style> <!--[if IE]> <link rel="stylesheet" href="~/css/ie.css"> <![endif]--> <!-- SCRIPTS --> <script src="//code.jquery.com/jquery-2.2.2.min.js" integrity="sha256-36cp2Co+/62rEAAYHLmRCPIych47CvdM+uTBJwSzWjI=" crossorigin="anonymous"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.6/jquery.validate.unobtrusive.min.js"></script> <script src="/scripts/plugins.js"></script> <script src="/scripts/application.js"></script> <script src="/scripts/jquery.unobtrusive-ajax.min.js"></script> <script src="/scripts/ThreeCanvas.js"></script> <script src="/scripts/Snow.js"></script> <script src="/scripts/misc.js"></script> <script src="/scripts/cookies.js"></script> <!-- ICONS --> <link rel="shortcut icon" href="/media/1001/logo.png?width=32&height=32" type="image/png"> <link rel="apple-touch-icon" sizes="57x57" href="/media/1001/logo.png?width=57&height=57"> <link rel="apple-touch-icon" sizes="60x60" href="/media/1001/logo.png?width=60&height=60"> <link rel="apple-touch-icon" sizes="72x72" href="/media/1001/logo.png?width=72&height=72"> <link rel="apple-touch-icon" sizes="76x76" href="/media/1001/logo.png?width=76&height=76"> <link rel="apple-touch-icon" sizes="114x114" href="/media/1001/logo.png?width=114&height=114"> <link rel="apple-touch-icon" sizes="120x120" href="/media/1001/logo.png?width=120&height=120"> <link rel="apple-touch-icon" sizes="144x144" href="/media/1001/logo.png?width=144&height=144"> <link rel="apple-touch-icon" sizes="152x152" href="/media/1001/logo.png?width=152&height=152"> <link rel="apple-touch-icon" sizes="180x180" href="/media/1001/logo.png?width=180&height=180"> <link rel="icon" type="image/png" href="/media/1001/logo.png?width=16&height=16" sizes="16x16"> <link rel="icon" type="image/png" href="/media/1001/logo.png?width=32&height=32" sizes="32x32"> <link rel="icon" type="image/png" href="/media/1001/logo.png?width=96&height=96" sizes="96x96"> <link rel="icon" type="image/png" href="/media/1001/logo.png?width=192&height=192" sizes="192x192"> <meta name="msapplication-square70x70logo" content="/media/1001/logo.png?width=70&height=70" /> <meta name="msapplication-square150x150logo" content="/media/1001/logo.png?width=150&height=150" /> <meta name="msapplication-wide310x150logo" content="/media/1001/logo.png?width=310&height=150" /> <meta name="msapplication-square310x310logo" content="/media/1001/logo.png?width=310&height=310" /> <script>var exdays = 365;</script> <script src="https://www.google.com/recaptcha/api.js"></script> <meta name="msvalidate.01" content="617EEF8AAAF51F3B82AE3DB8FD8BA93D" /> <!-- Google tag (gtag.js) --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-GY6BX4CW00"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-GY6BX4CW00'); </script> <!-- Hotjar Tracking Code for https://submarine.gg/ --> <script> (function(h,o,t,j,a,r){ h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)}; h._hjSettings={hjid:2385558,hjsv:6}; a=o.getElementsByTagName('head')[0]; r=o.createElement('script');r.async=1; r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv; a.appendChild(r); })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv='); </script><style>a.customicon { max-width: 250px; width: 100%; } @media (max-width: 725px){ .apc.banner h3 { margin-top: 0px; } } </style> </head> <body class="advanced-page banner-top " > <!-- Google Tag Manager (noscript) --> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5BBQC46" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <!-- End Google Tag Manager (noscript) --> <a class="skip-to-content sr-only" href="#content">Skip to the content</a> <!-- SITE --> <div id="site"> <!-- HEADER --> <header> <div class="container"> <!-- ROW --> <div class="row"> <!-- LOGO --> <div id="logo" ><a href="/">Submarine</a></div> <!--// LOGO --> <!-- EXPAND --> <a class="expand"><span>Menu</span></a> <!--// EXPAND --> <!-- NAVIGATION --> <div class="navigation"> <!-- REVEAL --> <div class="reveal"> <nav class="cta-link"> <a target="_blank" href="https://www.linkedin.com/company/submarine-limited"><img class="lnkdInIcon" src="/images/linkedin.svg"></a> <a class="c5-text icon-facebook" target="_blank" href="http://www.facebook.com/submarinegy"></a> <a class="c5-text icon-twitter_2" target="_blank" href="http://www.twitter.com/submarinegy"></a> <a class="c5-text icon-intagram" target="_blank" href="https://www.instagram.com/submarinelimited/"></a> </nav> <style> img.lnkdInIcon { width: 48px; margin-top: -30px; filter: contrast(0) brightness(2); } </style> <nav class="main"> <ul> <li > <span > <a href="/why-choose-us/" > Why Choose Us? </a> </span> </li> <li > <span > <a href="/services/" > Services </a> </span> </li> <li > <span > <a href="/case-studies/" > Case Studies </a> </span> </li> <li > <span > <a href="/news/" > News </a> </span> </li> <li > <span > <a href="/contact/" > Contact </a> </span> </li> </ul> </nav> </div> <!--// REVEAL --> </div> <!--// NAVIGATION --> </div> <!--// ROW --> </div> </header> <!--// HEADER --> <div id="content"> <section class="content apc banner no-padding " id="pos_1203"> <div class="slides" data-slick='{"dots": true ,"arrows": true }'> <div class="item takeover parallax c3-bg"> <!-- IMAGE --> <div class="image lazyload" style="background-image:url('/media/1034/sub_backdrop.jpg?crop=0,0,0,0&cropmode=percentage&width=150&height=110&rnd=132194219360000000')" data-bg="/media/1034/sub_backdrop.jpg?crop=0,0,0,0&cropmode=percentage&width=2000&height=1800&rnd=132194219360000000"> </div> <!--// IMAGE --> <div class="info"> <canvas id="c" style="position:fixed; top:0; left:0; width:100%; height:100%; z-index:-1;"></canvas> <script type="text/javascript"> $(document).ready(function () { bubbles(); /* var c = document.getElementById("c"); var ctx = c.getContext("2d"); var cw = c.width = window.innerWidth; var ch = c.height = window.innerHeight; var howMany = 8; var rad = (Math.PI / 180); var kappa = 0.5522847498; var a = 3 * Math.PI / 4; var Rgrd = Math.sqrt(ch * ch + (cw / 2) * (cw / 2)) var grd = ctx.createRadialGradient(cw / 2, 0, 0, cw / 2, 0, Rgrd); // x0, y0, r0, x1, y1, r1 grd.addColorStop(0, "#badbf5"); grd.addColorStop(.35, "#53a5dd"); grd.addColorStop(.75, "#306eab"); grd.addColorStop(1, "#22417a"); //ctx.fillStyle = grd; // Don't want gradient - use webpage bg ctx.fillStyle = 'rgba(255,255,255,0)'; ctx.strokeStyle = 'rgba(200,200,200,.3)'; function elementArray() { this.cx = Math.round(Math.random() * cw) + 1; this.cy = Math.round(Math.random() * ch) + 1; this.x = this.cx; this.y = this.cy; //this.rw = randomIntFromInterval(20, 25); this.rw = randomIntFromInterval(10, 20); // bubble size var deformation = randomIntFromInterval(95, 99) / 100; this.rh = ~~(this.rw * deformation); this.a = (Math.round(Math.random() * 360) + 1) * rad; this.driftFlag = Math.random() < 0.5 ? false : true; this.lift = randomIntFromInterval(2, 10) / 10; this.grd = Grd(this.cx, this.cy, this.rw); } var e1 = []; //ellipses for (var i = 0; i < howMany; i++) { e1[i] = new elementArray(); } function ellipse(cx, cy, w, h, a, fill) { var ox = w * kappa; // desplasamiento horizontal (offset) var oy = h * kappa; // desplazamiento vertical (offset) var rw = Math.sqrt(oy * oy + w * w); var rh = Math.sqrt(ox * ox + h * h); var aw = Math.atan(oy / w); var ah = Math.atan(ox / h); var x0 = cx + w * Math.cos(a); var y0 = cy + w * Math.sin(a); var x1 = cx + h * Math.cos(Math.PI / 2 + a); var y1 = cy + h * Math.sin(Math.PI / 2 + a); var x2 = cx + w * Math.cos(Math.PI + a); var y2 = cy + w * Math.sin(Math.PI + a); var x3 = cx + h * Math.cos((3 * Math.PI / 2) + a); var y3 = cy + h * Math.sin((3 * Math.PI / 2) + a); var px1 = cx + rw * Math.cos(aw + a); var py1 = cy + rw * Math.sin(aw + a); var px2 = cx + rh * Math.cos((Math.PI / 2 - ah) + a); var py2 = cy + rh * Math.sin((Math.PI / 2 - ah) + a); var px3 = cx + rh * Math.cos((Math.PI / 2 + ah) + a); var py3 = cy + rh * Math.sin((Math.PI / 2 + ah) + a); var px4 = cx + rw * Math.cos((Math.PI - aw) + a); var py4 = cy + rw * Math.sin((Math.PI - aw) + a); var px5 = cx + rw * Math.cos((Math.PI + aw) + a); var py5 = cy + rw * Math.sin((Math.PI + aw) + a); var px6 = cx + rh * Math.cos((3 * Math.PI / 2 - ah) + a); var py6 = cy + rh * Math.sin((3 * Math.PI / 2 - ah) + a); var px7 = cx + rh * Math.cos((3 * Math.PI / 2 + ah) + a); var py7 = cy + rh * Math.sin((3 * Math.PI / 2 + ah) + a); var px8 = cx + rw * Math.cos((-aw) + a); var py8 = cy + rw * Math.sin((-aw) + a); ctx.save(); ctx.fillStyle = fill; ctx.beginPath(); ctx.moveTo(x0, y0) ctx.bezierCurveTo(px1, py1, px2, py2, x1, y1); ctx.bezierCurveTo(px3, py3, px4, py4, x2, y2); ctx.bezierCurveTo(px5, py5, px6, py6, x3, y3); ctx.bezierCurveTo(px7, py7, px8, py8, x0, y0); ctx.fill(); ctx.stroke(); ctx.restore(); } function Grd(x, y, r) { grd = ctx.createRadialGradient(x, y - r / 20 * r, 0, x, y - r / 20 * r, r); grd.addColorStop(0, 'rgba(186,219,245,.9)'); grd.addColorStop(1, 'rgba(186,219,245,0.1)'); return grd; } function randomIntFromInterval(mn, mx) { return Math.floor(Math.random() * (mx - mn + 1) + mn); } function Draw() { ctx.clearRect(0, 0, cw, ch); // NEW CLEAR //ctx.fillRect(0, 0, cw, ch); // OLD DRAW for (var j = 0; j < e1.length; j++) { // rotation e1[j].a += .1; // lift if (e1[j].cy < -1 * e1[j].rw) { e1[j].cy = ch + e1[j].rw; } else { e1[j].cy -= e1[j].lift; } // drift if (e1[j].cx <= e1[j].x - 10) { e1[j].driftFlag = true; } else if (e1[j].cx >= e1[j].x + 10) { e1[j].driftFlag = false; } if (e1[j].driftFlag) { e1[j].cx += .15; } else { e1[j].cx -= .15; } // grd e1[j].grd = Grd(e1[j].cx, e1[j].cy, e1[j].rw); ellipse(e1[j].cx, e1[j].cy, e1[j].rw, e1[j].rh, e1[j].a, e1[j].grd); } requestId = window.requestAnimationFrame(Draw); } //Draw() requestId = window.requestAnimationFrame(Draw);*/ }); </script> <div class="container"> <!-- ROW --> <div class="row"> <div class="table"> <div class="table-cell"> <div class="col-md-10 col-md-offset-1 col-sm-10 col-sm-offset-1 col-xs-12 text-center"> <div class="text c5-text os-animation" data-os-animation="fadeInUp" data-os-animation-delay="0.2s"> <h3>We can help you with...</h3> <p>聽</p> <a class="customicon icon-icon_1" href="/services/application-development/"><i>Application development</i></a> <a class="customicon icon-icon_2" href="/services/website-development/"><i>Websites and mobile apps</i></a> <a class="customicon icon-icon_3" href="/services/digital-marketing/"><i>Creative, digital marketing & SEO</i></a> <h3><strong>Tailor made systems...<br>designed for human beings</strong></h3> <p><span class="intro">We are an agile team of developers who combine technology with design to create powerful solutions.<br></span><span class="intro">We are focused on solving problems. We improve the operations, communication and market opportunities of our clients.<br><br></span><span class="intro"></span></p> </div> <p class="link os-animation" data-os-animation="fadeInUp" data-os-animation-delay="0.3s"> <a class="btn c5-borders c5-text" href="/services/" >Discover more</a> </p> </div> </div> </div> </div> <!--// ROW --> </div> </div> </div> </div> </section> <section class="content apc standard-components c5-bg" id="pos_6130"> <div class="container-fluid"><div class="row"><div class="wide-col col-xs-12"> <!-- PAGE COMPONENT GALLERY --> <div class="spc gallery " data-os-animation="fadeIn" data-os-animation-delay="0s" > <!-- ROW - OVERVIEW --> <div class="row overview text-center " data-os-animation="fadeIn" data-os-animation-delay="0s"> <div class="info col-md-8 col-xs-12"> <h2 class="heading main c3-text">Our Work</h2> </div> </div> <!--// ROW - OVERVIEW --> <div class="row slides" data-slick='{"dots": false ,"arrows": true ,"slidesToShow": 4, "responsive": [{"breakpoint": 992,"settings": {"slidesToShow": 3}},{"breakpoint": 768,"settings": {"slidesToShow": 2}},{"breakpoint": 480,"settings": {"slidesToShow": 1}}]}'> <div class="item "> <div class="image "> <a href="/case-studies/liberation-day/" target="" > <img class=" lazyload" src="/media/1375/liberation-site.png?anchor=center&mode=crop&width=8&height=6&rnd=133053028180000000" data-src="/media/1375/liberation-site.png?anchor=center&mode=crop&width=800&height=600&rnd=133053028180000000" alt="Liberation Day"> <div class="overlayicon ion-link c5-text"></div> </a> <div class="caption">Liberation Day</div> </div> </div> <div class="item "> <div class="image "> <a href="/news/posts/2023/august/a-collaboration-to-create-bowel-cancer-guernsey-website/" target="" > <img class=" lazyload" src="/media/1405/bowel_cancer_portfolio.jpg?anchor=center&mode=crop&width=8&height=6&rnd=133347605900000000" data-src="/media/1405/bowel_cancer_portfolio.jpg?anchor=center&mode=crop&width=800&height=600&rnd=133347605900000000" alt="A collaboration to create Bowel Cancer Guernsey website"> <div class="overlayicon ion-link c5-text"></div> </a> <div class="caption">Bowel Cancer Guernsey website</div> </div> </div> <div class="item "> <div class="image "> <a href="/news/posts/2023/september/the-terrace-garden-café-new-website/" target="" > <img class=" lazyload" src="/media/1449/terrace.png?anchor=center&mode=crop&width=8&height=6&rnd=133403785550000000" data-src="/media/1449/terrace.png?anchor=center&mode=crop&width=800&height=600&rnd=133403785550000000" alt="Terrace Garden Cafe"> <div class="overlayicon ion-link c5-text"></div> </a> <div class="caption">Terrace Garden Cafe</div> </div> </div> <div class="item "> <div class="image "> <a href="/news/posts/2023/august/a-new-website-for-the-avril-earl-dance-theatre-centre-website/" target="" > <img class=" lazyload" src="/media/1407/avril_earl_portfilio.jpg?anchor=center&mode=crop&width=8&height=6&rnd=133347616210000000" data-src="/media/1407/avril_earl_portfilio.jpg?anchor=center&mode=crop&width=800&height=600&rnd=133347616210000000" alt="The Avril Earl Dance & Theatre Centre website"> <div class="overlayicon ion-link c5-text"></div> </a> <div class="caption">The Avril Earl Dance & Theatre Centre website</div> </div> </div> <div class="item "> <div class="image "> <a href="https://www.guernseylegalresources.gg/" target="target="_blank"" > <img class=" lazyload" src="/media/1372/glr-site.png?anchor=center&mode=crop&width=8&height=6&rnd=133056452380000000" data-src="/media/1372/glr-site.png?anchor=center&mode=crop&width=800&height=600&rnd=133056452380000000" alt="Guernsey Legal Resources "> <div class="overlayicon ion-android-open c5-text"></div> </a> <div class="caption">Guernsey Legal Resources </div> </div> </div> <div class="item "> <div class="image "> <a href="https://keepbalanceinyourlife.gg/" target="target="_blank"" > <img class=" lazyload" src="/media/1371/gn-site.png?anchor=center&mode=crop&width=8&height=6&rnd=133056516870000000" data-src="/media/1371/gn-site.png?anchor=center&mode=crop&width=800&height=600&rnd=133056516870000000" alt="G&N PT Studio"> <div class="overlayicon ion-android-open c5-text"></div> </a> <div class="caption">G&N PT Studio</div> </div> </div> <div class="item "> <div class="image "> <a href="/news/posts/2023/july/a-new-website-for-royal-british-legion-guernsey/" target="" > <img class=" lazyload" src="/media/1406/royal_british_legion_portfolio.jpg?anchor=center&mode=crop&width=8&height=6&rnd=133347611470000000" data-src="/media/1406/royal_british_legion_portfolio.jpg?anchor=center&mode=crop&width=800&height=600&rnd=133347611470000000" alt="A website for Royal British Legion Guernsey"> <div class="overlayicon ion-link c5-text"></div> </a> <div class="caption">Royal British Legion Guernsey</div> </div> </div> <div class="item "> <div class="image "> <a href="https://atan.gg/" target="target="_blank"" > <img class=" lazyload" src="/media/1370/atan.png?anchor=center&mode=crop&width=8&height=6&rnd=133053005720000000" data-src="/media/1370/atan.png?anchor=center&mode=crop&width=800&height=600&rnd=133053005720000000" alt="Atan Ahan"> <div class="overlayicon ion-android-open c5-text"></div> </a> <div class="caption">Atan Ahan</div> </div> </div> <div class="item "> <div class="image "> <a href="http://harbours.gg/" target="target="_blank"" > <img class=" lazyload" src="/media/1373/harboursgg.png?anchor=center&mode=crop&width=8&height=6&rnd=132646873250000000" data-src="/media/1373/harboursgg.png?anchor=center&mode=crop&width=800&height=600&rnd=132646873250000000" alt="Guernsey Harbours"> <div class="overlayicon ion-android-open c5-text"></div> </a> <div class="caption">Guernsey Harbours</div> </div> </div> <div class="item "> <div class="image "> <a href="/case-studies/itchyfeet-recruitment-online-process-improvement/" target="" > <img class=" lazyload" src="/media/1376/itchyfeet.png?anchor=center&mode=crop&width=8&height=6&rnd=133056432970000000" data-src="/media/1376/itchyfeet.png?anchor=center&mode=crop&width=800&height=600&rnd=133056432970000000" alt="Itchyfeet"> <div class="overlayicon ion-link c5-text"></div> </a> <div class="caption">Itchyfeet</div> </div> </div> <div class="item "> <div class="image "> <a href="/case-studies/pauls-motors-business-process-improvement/" target="" > <img class=" lazyload" src="/media/1378/pauls-motors.png?anchor=center&mode=crop&width=8&height=6&rnd=133056425180000000" data-src="/media/1378/pauls-motors.png?anchor=center&mode=crop&width=800&height=600&rnd=133056425180000000" alt="Pauls Motors"> <div class="overlayicon ion-link c5-text"></div> </a> <div class="caption">Pauls Motors</div> </div> </div> <div class="item "> <div class="image "> <a href="/case-studies/troupa-database-application/" target="" > <img class=" lazyload" src="/media/1377/pauls-motors-2.png?anchor=center&mode=crop&width=8&height=6&rnd=132647049250000000" data-src="/media/1377/pauls-motors-2.png?anchor=center&mode=crop&width=800&height=600&rnd=132647049250000000" alt="Troupa"> <div class="overlayicon ion-link c5-text"></div> </a> <div class="caption">Troupa</div> </div> </div> <div class="item "> <div class="image "> <a href="/news/posts/2023/august/willow-tree-beauty-and-relaxation-new-website/" target="" > <img class=" lazyload" src="/media/1421/willow-tree.png?anchor=center&mode=crop&width=8&height=6&rnd=133364866420000000" data-src="/media/1421/willow-tree.png?anchor=center&mode=crop&width=800&height=600&rnd=133364866420000000" alt="Willow Tree Beauty and Relaxation "> <div class="overlayicon ion-link c5-text"></div> </a> <div class="caption">Willow Tree Beauty and Relaxation </div> </div> </div> <div class="item "> <div class="image "> <a href="/news/posts/2023/august/edge-osteopathy-a-new-website/" target="" > <img class=" lazyload" src="/media/1420/edge-portfolio.png?anchor=center&mode=crop&width=8&height=6&rnd=133364866290000000" data-src="/media/1420/edge-portfolio.png?anchor=center&mode=crop&width=800&height=600&rnd=133364866290000000" alt="Edge Osteopathy "> <div class="overlayicon ion-link c5-text"></div> </a> <div class="caption">Edge Osteopathy </div> </div> </div> <div class="item "> <div class="image "> <a href="/news/posts/2023/august/a-new-website-for-asr-ltd/" target="" > <img class=" lazyload" src="/media/1422/asr-guernsey.png?anchor=center&mode=crop&width=8&height=6&rnd=133365691900000000" data-src="/media/1422/asr-guernsey.png?anchor=center&mode=crop&width=800&height=600&rnd=133365691900000000" alt="ASR Ltd "> <div class="overlayicon ion-link c5-text"></div> </a> <div class="caption">ASR Ltd </div> </div> </div> <div class="item "> <div class="image "> <a href="/news/posts/2023/august/copcoy-health-and-safety-specialist-in-the-channel-islands/" target="" > <img class=" lazyload" src="/media/1424/copcoy-portfolio.png?anchor=center&mode=crop&width=8&height=6&rnd=133366558920000000" data-src="/media/1424/copcoy-portfolio.png?anchor=center&mode=crop&width=800&height=600&rnd=133366558920000000" alt="Copcoy - Health and safety specialist in the Channel Islands"> <div class="overlayicon ion-link c5-text"></div> </a> <div class="caption">Copcoy -Health and safety specialist in the Channel Islands</div> </div> </div> <div class="item "> <div class="image "> <a href="/case-studies/oddfellows-guernsey/" target="" > <img class=" lazyload" src="/media/1427/oddfellows_portfolio.png?anchor=center&mode=crop&width=8&height=6&rnd=133367398660000000" data-src="/media/1427/oddfellows_portfolio.png?anchor=center&mode=crop&width=800&height=600&rnd=133367398660000000" alt="The Oddfellows"> <div class="overlayicon ion-link c5-text"></div> </a> <div class="caption">The Oddfellows</div> </div> </div> <div class="item "> <div class="image "> <a href="/news/posts/2021/december/tour-de-submariner-new-website/" target="" > <img class=" lazyload" src="/media/1428/tour_de_submariner_portfolio.png?anchor=center&mode=crop&width=8&height=6&rnd=133367405380000000" data-src="/media/1428/tour_de_submariner_portfolio.png?anchor=center&mode=crop&width=800&height=600&rnd=133367405380000000" alt="Tour de Submariner"> <div class="overlayicon ion-link c5-text"></div> </a> <div class="caption">Tour de Submariner</div> </div> </div> <div class="item "> <div class="image "> <a href="/news/posts/2020/november/new-website-for-guernsey-walking-football-club/" target="" > <img class=" lazyload" src="/media/1429/gwfc-porfolio.png?anchor=center&mode=crop&width=8&height=6&rnd=133367439510000000" data-src="/media/1429/gwfc-porfolio.png?anchor=center&mode=crop&width=800&height=600&rnd=133367439510000000" alt="GWFC"> <div class="overlayicon ion-link c5-text"></div> </a> <div class="caption">GWFC</div> </div> </div> <div class="item "> <div class="image "> <a href="/news/posts/2020/december/independent-safety-services-new-website/" target="" > <img class=" lazyload" src="/media/1430/iss_portfolio.png?anchor=center&mode=crop&width=8&height=6&rnd=133367494590000000" data-src="/media/1430/iss_portfolio.png?anchor=center&mode=crop&width=800&height=600&rnd=133367494590000000" alt="Independent Safety Services"> <div class="overlayicon ion-link c5-text"></div> </a> <div class="caption">Independent Safety Services</div> </div> </div> <div class="item "> <div class="image "> <a href="/news/posts/2022/april/new-website-for-st-martins-parish-guernsey/" target="" > <img class=" lazyload" src="/media/1431/stmartin-portfolio.png?anchor=center&mode=crop&width=8&height=6&rnd=133367501480000000" data-src="/media/1431/stmartin-portfolio.png?anchor=center&mode=crop&width=800&height=600&rnd=133367501480000000" alt="Constables of St. Martin"> <div class="overlayicon ion-link c5-text"></div> </a> <div class="caption">Constables of St. Martin</div> </div> </div> <div class="item "> <div class="image "> <a href="/news/posts/2019/november/new-site-for-cardiac-action-group/" target="" > <img class=" lazyload" src="/media/1432/cag_portfolio.png?anchor=center&mode=crop&width=8&height=6&rnd=133367507040000000" data-src="/media/1432/cag_portfolio.png?anchor=center&mode=crop&width=800&height=600&rnd=133367507040000000" alt="Cardiac Action Group"> <div class="overlayicon ion-link c5-text"></div> </a> <div class="caption">Cardiac Action Group</div> </div> </div> </div> <!-- ROW - OVERVIEW --> <div class="row outro text-center " data-os-animation="fadeIn" data-os-animation-delay="0s"> <div class="info col-md-8 col-xs-12"> <p class="link"> <a role="button" class="btn c1-borders c1-text" href="/case-studies/" >View more</a> </p> </div> </div> <!--// ROW - OVERVIEW --> </div> <!--// PAGE COMPONENT GALLERY --> </div></div></div> </section> </div> <!-- BREADCRUMB --> <!--// BREADCRUMB --> <!-- FOOTER --> <footer> <div class="container"> <!-- ROW --> <div class="row"> <div class="col-md-4 col-xs-12"> <nav class="quick-links"> <p class="heading">Quick links</p> <ul class="row"> <li class="col-xs-6"> <a href="/" >Home</a> </li> <li class="col-xs-6"> <a href="/services/" >Services</a> </li> <li class="col-xs-6"> <a href="/case-studies/" >Case Studies</a> </li> <li class="col-xs-6"> <a href="/news/" >News</a> </li> <li class="col-xs-6"> <a href="/why-choose-us/" >Why choose us?</a> </li> <li class="col-xs-6"> <a href="/contact/" >Say Hello</a> </li> </ul> </nav> </div> <div class="col-md-3 col-md-offset-1 col-xs-12"> </div> <div class="col-md-3 col-md-offset-1 col-xs-12"> <!-- COMPANY DETAILS --> <div class="company-details"> <style> .company-details { position: relative; } a.toY { position: absolute; left: -220px; top: 0; } a.toY > img { max-width: 200px; width: 100%; } @media(max-width:991px){ a.toY { position: relative; left: 0; } } </style> <p class="heading">Submarine Ltd</p> <address> <p><span>Bromley House<br /></span><span>Bulwer Avenue<br />St Sampson<br /></span><span>Guernsey<br />Channel Islands<br />GY2 4LQ<br /><br /><a rel="noopener" href="mailto:nemo@submarine.gg" target="_blank" title="Contact Submarine">nemo@submarine.gg</a><br /></span><span></span><a href="tel:01481 711296">01481 711296</a></p> <p>Office hours.<br />Mon - Fri聽 <br />9am - 5pm</p> </address> </div> <!--// COMPANY DETAILS --> </div> </div> <!--// ROW --> <!-- ROW --> <div class="row"> <div class="col-xs-12"> <nav class="footer"> <ul> <li class="copyright"><div>© 2025</div></li> <li> <a href="/privacy-policy/" >Privacy Policy</a> </li> <li> <a href="/legal/" >Legal</a> </li> <li> <a href="/sitemap/" >Sitemap</a> </li> <li> <a href="https://www.facebook.com/submarinegy" target="_blank" title="Link will open in a new window/tab" >Join us on Facebook<i class="ion-android-open after"></i></a> </li> <li> <a href="https://twitter.com/submarinegy" target="_blank" title="Link will open in a new window/tab" >X<i class="ion-android-open after"></i></a> </li> <li> <a href="https://www.linkedin.com/company/submarine-limited" target="_blank" title="Link will open in a new window/tab" >LinkedIn<i class="ion-android-open after"></i></a> </li> <li> <a href="https://www.instagram.com/submarinelimited/" target="_blank" title="Link will open in a new window/tab" >Instagram<i class="ion-android-open after"></i></a> </li> </ul> </nav> </div> </div> <!--// ROW --> </div> </footer> <!--// FOOTER --> <!-- BACK TO TOP --> <span id="top-link-block"> <a class="btn c1-bg c5-text" href="#top" onclick="$('html,body').animate({scrollTop:0},'slow');return false;"> <i class="ion-chevron-up"></i> </a> </span> <!--// BACK TO TOP --> </div> <!--// SITE --> <!-- COOKIE NOTICE --> <div class="cookie-notice c5-bg closed"> <div class="inner"> <p class="heading c3-text">Cookie Notice</p> <div class="text base-text"> <p>This website uses cookies to enhance your browsing experience. <a data-udi="umb://document/d94cd0916e7d41dcbc3517741cc2bdae" href="/privacy-policy/" title="Privacy Policy">Privacy statement</a>.</p> </div> <p class="link"><a class="btn btn-xs c1-borders c1-text accept-cookies" href="#">Accept Cookies</a></p> </div> </div> <!--// COOKIE NOTICE --> <script src="https://apps.elfsight.com/p/platform.js" defer></script> <div class="elfsight-app-05a4b93c-69de-4165-a1fd-756594ef8ab6"></div> <script>$("footer .company-details").append('<a href="https://ecologi.com/submarineltd" target="_blank" rel="noopener noreferrer" title="View our Ecologi profile" style="width:200px;display:inline-block;" class="toY"><img alt="We offset our carbon footprint via Ecologi" src="https://api.ecologi.com/badges/cpw/5f897d185aeb39001d7aab6e?white=true&landscape=true" style="width:200px;" /></a>')</script> <style> span#top-link-block{ display:none !important; position: absolute; top: 0; right: 280px; } </style><script>$(".site-search").html(' <form role="search" action="/search-results/" method="get" name="searchForm"><fieldset><div class="form-group" style="max-width: 700px;margin: 0 auto;"><label class="control-label" id="hoverTitle" for="search_field">Search the site</label><input type="search" class="form-control" id="search_field" name="search_field" placeholder="Search the site" autocomplete="off" style="background: transparent;border: 0;border-bottom: solid 2px rgba(255, 255, 255, 0.3);box-shadow: 0px 0px 0px transparent;text-align: center;max-width: 700px;margin: 0 auto;width: 100%;color: #fff;font-size: 2.5rem;"></div><button type="submit" class="btn no-bg c1-text" style="color: #fff;"><i class="ion-search"></i></button></fieldset></form><div id="tags"><a href="/search-results/?search_field=Business+Applications" class="tag">Business Applications</a><a href="/search-results/?search_field=Websites" class="tag">Websites</a><a href="/search-results/?search_field=Hosting" class="tag">Hosting</a><a href="/search-results/?search_field=Digital+Marketing" class="tag">Digital Marketing</a></div>'); $('input#search_field').attr('placeholder',''); var i = 0; var txt = 'Search the site'; var speed = 50; function typeWriter() { if (i < txt.length) { $('input#search_field').attr('placeholder',$("input#search_field").attr('placeholder') + txt.charAt(i)); i++; setTimeout(typeWriter, speed); } } function searchAnimation() { $('input#search_field').attr('placeholder',''); typeWriter(); } setTimeout(function(){ searchAnimation(); }, 1500); $( "input#search_field" ).focusin(function() { $('input#search_field').attr('placeholder',''); $('#hoverTitle').fadeIn(); $('#tags').fadeIn('slow'); }); $( "input#search_field" ).focusout(function() { $('#hoverTitle').hide(); i = 0; searchAnimation(); $('#tags').fadeOut('slow'); }); </script> <style> .site-search .form-control::-webkit-input-placeholder { color: #fff; } #tags{ display: none; margin: 0.7em 0; text-align: left; font-size: 0.9em;} .tag { color: #fff; } .tag:before { content: "#"; display: inline-block; } .tag:not(:last-of-type):after { content: '|'; margin: 0 10px; } div#tags:before { content: 'Top Searches: '; margin-right: 10px; } #hoverTitle { position: absolute; pointer-events: none; left: 5px; top: -10px; transition: 0.2s ease all; display:none; opacity: 1 !important; } @media(max-width: 725px){ #tags { margin: 3em 0; } } </style> </body> </html>