Marine Traffic Map Web App - Lakeplace Design

Marine Traffic Map Web App

POC (concept) for another ABS project. Clickable prototype design in Adobe XD. Details cannot be shared.

Client Name

ABS Group

Used Skills

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form have suffered alteration in some form.

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration.

Adobe XD
Adobe Photoshop

img:is([sizes="auto" i]){contain-intrinsic-size:3000px 1500px;}img.wp-smiley,img.emoji{display:inline !important;border:none !important;box-shadow:none !important;height:1em !important;width:1em !important;margin:0 .07em !important;vertical-align:-.1em !important;background:none !important;padding:0 !important;}.wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em;}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none;}:where(.is-layout-flex){gap:.5em;}:where(.is-layout-grid){gap:.5em;}body .is-layout-flex{display:flex;}.is-layout-flex{flex-wrap:wrap;align-items:center;}.is-layout-flex > :is(*,div){margin:0;}body .is-layout-grid{display:grid;}.is-layout-grid > :is(*,div){margin:0;}:where(.wp-block-columns.is-layout-flex){gap:2em;}:where(.wp-block-columns.is-layout-grid){gap:2em;}:where(.wp-block-post-template.is-layout-flex){gap:1.25em;}:where(.wp-block-post-template.is-layout-grid){gap:1.25em;}.has-black-color{color:var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color:var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color:var(--wp--preset--color--white) !important;}.has-pale-pink-color{color:var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color:var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color:var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color:var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color:var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color:var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color:var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color:var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color:var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color:var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color:var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color:var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color:var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color:var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color:var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color:var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color:var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color:var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color:var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color:var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color:var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color:var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color:var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color:var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color:var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color:var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color:var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color:var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color:var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color:var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color:var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color:var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color:var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background:var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background:var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background:var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background:var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background:var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background:var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background:var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background:var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background:var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background:var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background:var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background:var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size:var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size:var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size:var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size:var(--wp--preset--font-size--x-large) !important;}:where(.wp-block-post-template.is-layout-flex){gap:1.25em;}:where(.wp-block-post-template.is-layout-grid){gap:1.25em;}:where(.wp-block-columns.is-layout-flex){gap:2em;}:where(.wp-block-columns.is-layout-grid){gap:2em;}:root :where(.wp-block-pullquote){font-size:1.5em;line-height:1.6;}.epyt-gallery-thumb{width:33.333%;}.contact-form-wpcf input,.contact-form-wpcf textarea{display:block;width:100%;padding:0 20px;border:var(--border-width) solid var(--color-border);border-radius:var(--radius);-webkit-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease;height:50px;line-height:46px;margin-bottom:20px;outline:none;color:var(--color-body);font-size:15px;letter-spacing:.1px;}body.active-dark-mode .contact-form-wpcf input,body.active-dark-mode .contact-form-wpcf textarea{border:var(--border-width) solid var(--color-dark-border);color:var(--color-dark-body);}body.active-dark-mode .contact-form-wpcf input::placeholder,body.active-dark-mode .contact-form-wpcf textarea::placeholder{color:var(--color-dark-body);}body.active-dark-mode .contact-form-wpcf input:focus,body.active-dark-mode .contact-form-wpcf textarea:focus{border-color:var(--color-primary);}.contact-form-wpcf input:focus,.contact-form-wpcf textarea:focus{border-color:var(--color-primary);}.contact-form-wpcf textarea{height:120px;}.contact-form-wpcf input[type=submit],.contact-form--1 textarea[type=submit]{color:var(--color-white) !important;width:auto;border-color:transparent !important;}.contact-form-wpcf input[type=submit]:hover,.contact-form-wpcf textarea[type=submit]:hover{border-color:var(--color-primary) !important;color:var(--color-primary) !important;}.contact-form-wpcf input:focus,.contact-form-wpcf textarea:focus{border-color:var(--color-primary);}.contact-form-wpcf .wpcf7-list-item,.contact-form-wpcf label{display:flex;margin:0;}.contact-form-wpcf .wpcf7-list-label-custom{margin-top:20px;margin-bottom:10px;cursor:default;}.contact-form-wpcf .wpcf7-list-item{margin:0;}.contact-form-wpcf .wpcf7-list-item{margin-bottom:10px;}.contact-form-wpcf .wpcf7-list-item label{cursor:pointer;color:var(--color-gray);}.contact-form-wpcf .wpcf7-list-item label:hover .wpcf7-list-item-label::before{border:2px solid var(--color-primary) !important;transition:all 100ms;}body.active-dark-mode .contact-form-wpcf label{color:var(--color-dark-body);}.contact-form-wpcf .wpcf7-list-item-label{font-size:15px;}.contact-form-wpcf [type="radio"],.contact-form-wpcf [type="checkbox"]{position:absolute;left:-9999px;}.contact-form-wpcf [type="radio"] + .wpcf7-list-item-label,.contact-form-wpcf [type="checkbox"] + .wpcf7-list-item-label{position:relative;padding-left:30px;line-height:20px;}.contact-form-wpcf [type="radio"] + .wpcf7-list-item-label::before,.contact-form-wpcf [type="checkbox"] + .wpcf7-list-item-label::before,.contact-form-wpcf [type="radio"] + .wpcf7-list-item-label::after,.contact-form-wpcf [type="checkbox"] + .wpcf7-list-item-label::after{content:"";position:absolute;box-sizing:border-box;}.contact-form-wpcf [type="radio"] + .wpcf7-list-item-label::before,.contact-form-wpcf [type="radio"] + .wpcf7-list-item-label::after{border-radius:50%;}.contact-form-wpcf [type="radio"] + .wpcf7-list-item-label::before,.contact-form-wpcf [type="checkbox"] + .wpcf7-list-item-label::before{top:0;left:0;width:20px;height:20px;border:2px solid var(--color-border);}body.active-dark-mode .contact-form-wpcf [type="radio"] + .wpcf7-list-item-label::before,body.active-dark-mode .contact-form-wpcf [type="checkbox"] + .wpcf7-list-item-label::before{border:2px solid var(--color-dark-border);}.contact-form-wpcf [type="radio"] + .wpcf7-list-item-label::after,.contact-form-wpcf [type="checkbox"] + .wpcf7-list-item-label::after{top:5px;left:5px;width:10px;height:10px;background:var(--color-primary);border:2px solid var(--color-primary) !important;transition:all 100ms;}.contact-form-wpcf [type="radio"]:not(:checked) + .wpcf7-list-item-label::after,.contact-form-wpcf [type="checkbox"]:not(:checked) + .wpcf7-list-item-label::after{opacity:0;transform:scale(.01);}.contact-form-wpcf [type="radio"]:checked + .wpcf7-list-item-label::after,.contact-form-wpcf [type="checkbox"]:checked + .wpcf7-list-item-label::after{opacity:1;transform:scale(1);}.contact-form-wpcf [type="radio"]:focus + .wpcf7-list-item-label::before,.contact-form-wpcf [type="checkbox"]:focus + .wpcf7-list-item-label::before{border:2px solid var(--color-primary) !important;}.contact-form-wpcf .wpcf7-range-custom{-webkit-appearance:none;padding:0;width:100%;height:8px;border:none;-webkit-border-radius:15px;border-radius:15px;background:var(--color-primary-light);outline:0;opacity:.8;-webkit-transition:.2s;-webkit-transition:opacity .2s;-o-transition:opacity .2s;transition:opacity .2s;}.contact-form-wpcf .wpcf7-values-custom{display:flex;flex-direction:row;justify-content:space-between;align-items:center;}.contact-form-wpcf .wpcf7-values-custom p{display:flex;flex-direction:row;align-items:center;font-size:15px;margin:0;color:var(--color-gray);}body.active-dark-mode .contact-form-wpcf .wpcf7-values-custom p{display:flex;flex-direction:row;color:var(--color-dark-body);margin:0;padding:0;}.contact-form-wpcf .wpcf7-val-custom{display:flex;flex-direction:row;justify-content:center;align-items:center;}.contact-form-wpcf input[type=range]{-webkit-appearance:none;width:100%;}input[type=range]:focus{outline:none;border:none !important;}input[type=range]::-webkit-slider-runnable-track{width:100%;height:100%;cursor:pointer;}input[type=range]::-webkit-slider-thumb{height:20px;width:20px;border-radius:50%;background:var(--color-primary);cursor:pointer;-webkit-appearance:none;margin-top:-7px;}input[type=range]::-moz-range-track{width:100%;height:100%;cursor:pointer;}input[type=range]::-moz-range-thumb{height:20px;width:20px;border-radius:50%;background:var(--color-primary);cursor:pointer;-webkit-appearance:none;margin-top:-7px;}input[type=range]::-ms-track{width:100%;height:8.4px;cursor:pointer;background:transparent;border-color:transparent;color:transparent;}input[type=range]::-ms-fill-lower{background:#2a6495;border:.2px solid #010101;border-radius:2.6px;box-shadow:1px 1px 1px #000,0px 0px 1px #0d0d0d;}input[type=range]::-ms-fill-upper{background:#3071a9;border:.2px solid #010101;border-radius:2.6px;box-shadow:1px 1px 1px #000,0px 0px 1px #0d0d0d;}input[type=range]::-ms-thumb{box-shadow:1px 1px 1px #000,0px 0px 1px #0d0d0d;border:1px solid #000;height:36px;height:8.4px;width:16px;border-radius:3px;background:#fff;cursor:pointer;}input[type=range]:focus::-ms-fill-lower{background:#3071a9;}input[type=range]:focus::-ms-fill-upper{background:#367ebd;}button.rn-button-style--2:hover,a.rn-button-style--2:hover,a.wp-block-button__link:hover,input[type=submit]:hover{box-shadow:0 10px 15px 0 rgba(33,135,104,.1) !important;}.section-title .sub-title,a.btn-transparent{background:linear-gradient(120deg,#218768 20.69%,#218776 50.19%,#218787 79.69%);-webkit-background-clip:text;}.bg-theme-gradient,a.btn-transparent::after,.im-hover::after,.footer-style-01 .ft-text p a::after{background:linear-gradient(120deg,#218768 20.69%,#218776 50.19%,#218787 79.69%);}.breadcrumb-area::before{background:linear-gradient(90deg,#218768 20.69%,#218776 50.19%,#218787 79.69%);}.header-area.header--sticky.sticky ul.social-share.social-style--2.color-black li a:hover,.header-area.header--sticky.sticky ul.social-share.social-style--2.color-black li a:hover,.header-area.header-style-two.header--sticky.sticky .mainmenunav ul.mainmenu > li:hover > a,.active-dark ul.social-share.social-style--2.color-black li a:hover{color:#218768;}.e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload),.e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload) *{background-image:none !important;}@media screen and (max-height: 1024px){.e-con.e-parent:nth-of-type(n+3):not(.e-lazyloaded):not(.e-no-lazyload),.e-con.e-parent:nth-of-type(n+3):not(.e-lazyloaded):not(.e-no-lazyload) *{background-image:none !important;}.e-con.e-parent:nth-of-type(n+3):not(.e-lazyloaded):not(.e-no-lazyload).nitro-lazy,.e-con.e-parent:nth-of-type(n+3):not(.e-lazyloaded):not(.e-no-lazyload) *.nitro-lazy{background-image:none !important;}}@media screen and (max-height: 640px){.e-con.e-parent:nth-of-type(n+2):not(.e-lazyloaded):not(.e-no-lazyload),.e-con.e-parent:nth-of-type(n+2):not(.e-lazyloaded):not(.e-no-lazyload) *{background-image:none !important;}.e-con.e-parent:nth-of-type(n+2):not(.e-lazyloaded):not(.e-no-lazyload).nitro-lazy,.e-con.e-parent:nth-of-type(n+2):not(.e-lazyloaded):not(.e-no-lazyload) *.nitro-lazy{background-image:none !important;}}.e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload).nitro-lazy,.e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload) *.nitro-lazy{background-image:none !important;}