Get a Route - Draft v04 - Flexbox Test

Developer
Colm Hewson
Size
8,592 Kb
Views
14,168
  1. Get a Route - Draft v04 - Flexbox Test Previews
  2. Get a Route - Draft v04 - Flexbox Test HTML Codes
  3. Get a Route - Draft v04 - Flexbox Test CSS Codes
  4. Get a Route - Draft v04 - Flexbox Test JS Codes

How do I make an get a route - draft v04 - flexbox test?

What is a get a route - draft v04 - flexbox test? How do you make a get a route - draft v04 - flexbox test? This script and codes were developed by Colm Hewson on 28 November 2022, Monday.

Get a Route - Draft v04 - Flexbox Test Previews
IQ Test

Get a Route - Draft v04 - Flexbox Test - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Get a Route - Draft v04 - Flexbox Test</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Header Bar -->
<div class="header"> <div class="logo"> <svg x='0px' y='0px' width='40px' height='40px' viewBox='0 0 400 400'> <rect x='0' fill='#F8D346' width='400' height='400' /> <path d='M133.973,87.063L36.491,298.776h47.183l18.567-40.108h45.586l-0.02,40.108h40.831V87.063H133.973z M121.83,216.203 l26.05-56.353l-0.017,56.353H121.83z' /> <path d='M284.299,87.063l-97.462,211.713h47.143l18.587-40.108h45.567l-0.037,40.108h40.831V87.063H284.299z M272.174,216.203 l25.996-56.353v56.353H272.174z' /> </svg> </div> <div class="logo-text"> Routeplanner </div>
</div>
<!-- Routeplanner Sidebar -->
<div class="sub-header-container">
<div class="holder"> <div class="container light-container"> <div class="buttons-container"> <svg class="thedottedline"> <g fill="none" stroke="#ffffff" stroke-width="5px"> <line x1="25" y1="0" x2="25" y2="100" stroke-dasharray="8,8" /> </g> </svg> <form> <input class="x-clear blank" type='reset' height='50' width='50'> </input> <input class="input-box blank" placeholder="Choose your starting point"> </input> </form> <div class="icon blank"> <svg id="move-icon" width="50" height="50"> <g> <rect x="14" y="22" width="2" height="2" /> <rect x="19" y="22" width="2" height="2" /> <rect x="24" y="22" width="2" height="2" /> <rect x="29" y="22" width="2" height="2" /> <rect x="34" y="22" width="2" height="2" /> <rect x="14" y="26" width="2" height="2" /> <rect x="19" y="26" width="2" height="2" /> <rect x="24" y="26" width="2" height="2" /> <rect x="29" y="26" width="2" height="2" /> <rect x="34" y="26" width="2" height="2" /> </g> </svg> </div> <div class="via"> <div class="via-icon"> <svg width="25" height="25" viewBox="0 0 25 25"> <line id="X" x1="12" y1="6" x2="12" y2="18" /> <line id="Y" x1="6" y1="12" x2="18" y2="12" /> </svg> </div> <div class="via-text"> ADD VIA </div> </div> <div class="button-spacer-10"> </div> <form> <input class="x-clear blank" type='reset' height='50' width='50'> </input> <input class="input-box blank" placeholder="Choose your destination"> </input> </form> <div class="icon blank"> <svg id="move-icon" width="50" height="50"> <g> <rect x="14" y="22" width="2" height="2" /> <rect x="19" y="22" width="2" height="2" /> <rect x="24" y="22" width="2" height="2" /> <rect x="29" y="22" width="2" height="2" /> <rect x="34" y="22" width="2" height="2" /> <rect x="14" y="26" width="2" height="2" /> <rect x="19" y="26" width="2" height="2" /> <rect x="24" y="26" width="2" height="2" /> <rect x="29" y="26" width="2" height="2" /> <rect x="34" y="26" width="2" height="2" /> </g> </svg> </div> <div class="button-spacer-15"> &nbsp; </div> <div class="button primary-button-lightbg"> get a route </div> </div> </div> <div class="options-bar"> <div class="options-icon"> <svg class="layer-icon" style="width:50px; height:50px; display: block;"> <polygon class="bottom-layer-icon" points="24 9 47 19 24 29 1 19 24 9" /> <polygon class="middle-layer-icon" points="24 5 47 15 24 25 1 15 24 5" /> <polygon class="top-layer-icon" points="24 1 47 11 24 21 1 11 24 1" /> </svg> </div> </div> <div class="options-container"> <div class="toggle-header"> Motor Services </div> <div class="toggle-holder"> <div class="content-box-toggle garage"> </div> <div class="content-box-toggle fuel"> </div> <div class="content-box-toggle parking"> </div> <div class="content-box-toggle traffic-cams"> </div> </div> <div class="toggle-header"> Public Transport </div> <div class="toggle-holder"> <div class="content-box-toggle bus"> </div> <div class="content-box-toggle rail"> </div> <div class="content-box-toggle luas"> </div> <div class="content-box-toggle dublinbikes"> </div> <div class="content-box-toggle gocar"> </div> </div> <div class="toggle-header"> AA Hospitality </div> <div class="toggle-holder"> <div class="content-box-toggle Accomodation"> </div> <div class="content-box-toggle Restaurants"> </div> </div> </div>
</div>
<div class="content-box"> <div class="title-bar"> <div class="title-bar-icon"> </div> <div class="title-bar-headline"> </div> <div class="title-bar-subheading"> </div> <div class="title-bar-dynamic"> </div> </div> <div class="text"> Sed hendrerit. Phasellus dolor. Sed lectus. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Pellentesque egestas, neque sit amet convallis pulvinar, justo nulla eleifend augue, ac auctor orci leo non est. Mauris turpis nunc, blandit et, volutpat molestie, porta ut, ligula. Nam at tortor in tellus interdum sagittis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla porta dolor. Phasellus gravida semper nisi. </div> <div class="action-bar"> </div>
</div>
<div class="map">
<!-- Map Markers -->
<div class="map-markers"> <svg class="petrol-02" width="300px" height="300px"> <title>Petrol Station Map Marker</title> <g class="map-marker"> <g> <defs> <clipPath id="mask"> <path d="M0 250 L0 0 L300 0 L300 250 L150 150" /> <circle cx="150" cy="150" r="80" /> </clipPath> </defs> <circle class="hover-circle" cx="150" cy="150" r="105" clip-Path="url(#mask)" /> </g> <path class="petrol-pin" d="m181.38,0c0,74.16 -90.69,155.23 -90.69,155.23s-90.69,-87.06 -90.69,-155.23a90.69,90.69 0 1 1 181.38,0z" transform="translate(59 149)" /> <circle class="white-circle" cx="150" cy="150" r="80" /> <path class="petrol-icon" d="M155.54,48.2l-4.9,4.9L160,62.49v15.9H167v45.27c0,1.49-.68,3.26-3.47,3.26s-3.43-1.91-3.47-3.47V88.78c0-7.63-6.22-10.4-10.4-10.4h-6.93V43.72H87.23v86.66H80.3v6.93h69.33v-6.93h-6.93V85.31h6.89c1.6,0,3.51.68,3.51,3.47v34.66c0,4.18,2.77,10.4,10.4,10.4a10,10,0,0,0,10.4-10.15V66.55ZM135.76,74.92H94.16V50.65h41.6V74.92Z" transform="translate(27 54)" /> </g> </svg>
</div>
</div>
</div> <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Get a Route - Draft v04 - Flexbox Test - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
/* Using SCSS so we can set a width attribute, and then minus the border width for the ghost button */
body { background: #1D976C; background: -webkit-linear-gradient(to left, #1D976C, #93F9B9); background: linear-gradient(to left, #1D976C, #93F9B9); font-family: 'Open Sans'; -webkit-font-smoothing: antialiased; text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px; -webkit-text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px; margin: 0; max-height: 100%; overflow: hidden;
}
.header { min-height: 60px; display: block; flex-direction: row; align-items: center; background: #272822; box-shadow: 0px 0px 10px 2px #272822; padding: 0px 20px; position: relative; z-index: 9999;
}
.logo { height: 40px;
}
.logo-text { font-size: 18px; font-weight: 400; color: #f1f1f1; margin-left: 8px;
}
.sub-header-container { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; align-content: stretch;
}
.holder { order: 1; flex-grow: 1; flex-basis: 400px; max-width: 400px; min-height: 100%; font-size: 14px; background: #272822; box-shadow: 3px 5px 10px 0px rgba(0, 0, 0, 0.2); z-index: -3;
}
.map { order: 3; flex-grow: 1; flex-basis: 100%; background: url(http://www.orangesmile.com/common/img_city_maps/kaunas-map-1.jpg); background-position: 50% 40%; height: 100vh; z-index: -20; overflow: hidden;
}
.petrol-pin { fill: #455c7b;
}
.white-circle { fill: #f1f1f1;
}
.hover-circle { fill: white; stroke: #272822; transform: scale(0.5); transform-origin: 50% 50%; stroke-width: 0; transition: all ease 0.3s;
}
.petrol-icon { fill: #272822;
}
.map-marker { transform: scale(0.2);
}
.petrol-02 { width: 60px; height: 70px; margin: auto 0; z-index: 9; top: 400px; left: 50%;
}
.map-marker:hover .hover-circle { transform: scale(1.1);
}
.content-box { order: 2; flex-grow: 0.000001; background: #f1f1f1; z-index: -10; box-shadow: 3px 5px 10px 0px rgba(0, 0, 0, 0.2); transition: all ease 0.5s;
}
.content-box-active { flex-grow: 1;
}
.title-bar { width: 100%; height: 50px; background: #f8d249; position: relative; padding-top: 10px; padding-bottom: 10px; margin: 0 auto; z-index: 1;
}
.text { width: 350px; height: 100%; color: #272822; position: relative; z-index: 1; padding: 25px; display: block; text-align: justify; overflow: scroll;
}
.action-bar { width: 400px; height: 50px; display: block; position: absolute; background: #3e3e3e; bottom: 0px; z-index: 2;
}
.toggle-holder { width: 100%; text-align: left; margin-left: 15px; margin-right: 15px; display: inline-block;
}
.toggle-header { width: calc($width - 30px); color: #f1f1f1; font-size: 16px; font-weight: bold; text-transform: uppercase; padding-top: 15px; padding-bottom: 5px; margin-left: 15px; margin-right: 15px; margin-bottom: 10px; border-style: solid; border-width: 0px 0px 2px 0px; border-color: #f1f1f1;
}
.content-box-toggle { display: inline-block; position: relative; text-align: center; background-color: #f1f1f1; color: #272822; width: 50px; height: 50px; margin-right: 10px; border-style: solid; border-radius: 40px; border-width: 4px; transition: all ease 0.3s;
}
.content-box-toggle:hover { background-color: green;
}
.highlight { background-color: red;
}
.content-box-toggle:hover { cursor: pointer;
}
.content-box-toggle:active { box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.2);
}
.options-bar { width: 100%; height: 50px; display: block; background: #f8d247;
}
.options-icon { float: right; display: block; width: 50px; height: 50px; margin-right: 15px; overflow: hidden;
}
.layer-icon { transition: all ease 0.3s;
}
.bottom-layer-icon { fill: #272822; stroke: #f8d247; stroke-miterlimit: 10; stroke-width: 1px; transform: translateY(10px); transition: all ease 0.3s;
}
.bottom-layer-icon-hover { transform: translateY(15px);
}
.middle-layer-icon { fill: #272822; stroke: #f8d247; stroke-miterlimit: 10; stroke-width: 1px; transform: translateY(10px);
}
.top-layer-icon { fill: #272822; stroke: #f8d247; stroke-miterlimit: 10; stroke-width: 1px; transform: translateY(10px); transition: all ease 0.3s;
}
.top-layer-icon-hover { transform: translateY(5px);
}
.icon { display: block; float: right; width: 40px; height: 46px; background: #ffffff;
}
#move-icon { fill: #272822;
}
#move-icon:hover { cursor: pointer;
}
#move-icon:active { cursor: ns-resize;
}
.input-box { display: block; float: right; color: #272822; border: 0px; border-radius: 0px; box-shadow: none; height: 50px; width: 280px; line-height: 1.42857143; font-size: 14px; padding: 6px 12px; background-image: none; background-color: #fff; box-sizing: border-box; -webkit-rtl-ordering: logical; -webkit-user-select: text; transition: all ease 0.3s; z-index: 1;
}
input:focus { outline: 0px;
}
.x-clear { display: block; float: right; position: relative; background: white; width: 50px; height: 50px; border: solid 0px; padding: 0px; margin: 0px; font-size: 0; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml;utf8,\a \a \a \a ");
}
.x-clear:hover { cursor: pointer; stroke: red;
}
.x-clear:active { cursor: pointer;
}
.via-spacer { margin-top: 25px;
}
.invalid { border-bottom: solid 4px #e64e3c;
}
.valid { border-bottom: solid 4px #00aa99;
}
.blank { border-bottom: solid 4px #999999;
}
.container { width: 400px; z-index: -2; position: relative;
}
.light-container { background-color: #f1f1f1;
}
.dark-container { background-color: #272822;
}
.buttons-container { padding: 15px; z-index: -10;
}
.button-spacer-10 { padding-top: 10px;
}
.button-spacer-15 { padding-top: 15px;
}
.button { height: 50px; line-height: 50px; text-align: center; font-weight: 700; text-transform: uppercase; cursor: pointer; transition: all ease 0.2s; overflow: hidden; -webkit-user-select: none; user-select: none;
}
.via { margin-top: 10px; margin-bottom: 10px; float: right; height: 24px; width: 100%;
}
.via-text { display: block; height: 24px; line-height: 24px; position: relative; font-weight: bold; color: #272822; float: right; width: 80px; text-align: center;
}
.via-icon { display: block; position: relative; width: 24px; height: 24px; border-radius: 20px; background-color: #272822; stroke: #f1f1f1; stroke-width: 2px; float: right; transition: all ease 0.2s;
}
.via-icon:hover { cursor: pointer;
}
.via-icon:active { box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.2);
}
.primary-button-lightbg { background-color: #f8d247; color: #272822; width: 100%;
}
.primary-button-lightbg:active { box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.2);
}
.secondary-button-lightbg { width: 99.5%; color: #272822; background: transparent; border-style: solid; border-color: #272822; border-width: 2px;
}
.secondary-button-lightbg:active { box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.2);
}
.thedottedline { position: absolute; z-index: -1; stroke: #ffffff; -webkit-animation: marchingants 10s linear infinite reverse; animation: marchingants 10s linear infinite reverse;
}
@-webkit-keyframes marchingants { from { stroke-dashoffet: 0; } to { stroke-dashoffset: 95; }
}
@keyframes marchingants { from { stroke-dashoffet: 0; } to { stroke-dashoffset: 95; }
}
/* Don't have a final loader we're super happy with here. I'd say stick with the rotating circle for now. The finalised loader will be in the full design assets pack.*/
.loader,
.loader:before,
.loader:after { border-radius: 50%;
}
.loader:before,
.loader:after { position: absolute; content: '';
}
.loader { margin: 0 auto; position: relative; width: 100%; height: 20px;
}
.loader:after { width: 10px; height: 10px; top: 25px; background: #272822; border-radius: 5px; -webkit-transform-origin: 0px 2px; transform-origin: 0px 2px; -webkit-animation: load2 1.5s infinite ease; animation: load2 1.5s infinite ease;
}
@-webkit-keyframes load2 { 0% { -webkit-transform: rotate(30deg); transform: rotate(30deg); } 100% { -webkit-transform: rotate(390deg); transform: rotate(390deg); }
}
@keyframes load2 { 0% { -webkit-transform: rotate(30deg); transform: rotate(30deg); } 100% { -webkit-transform: rotate(390deg); transform: rotate(390deg); }
}

Get a Route - Draft v04 - Flexbox Test - Script Codes JS Codes

$( ".content-box-toggle" ).click(function() { $( this ).toggleClass( "highlight" ); $( ".content-box" ).toggleClass( "content-box-active" );
});
$( ".layer-icon" ).click(function() { $( ".bottom-layer-icon" ).toggleClass( ".bottom-layer-icon-hover" ); $( ".top-layer-icon" ).toggleClass( ".top-layer-icon-hover" );
});
Get a Route - Draft v04 - Flexbox Test - Script Codes
Get a Route - Draft v04 - Flexbox Test - Script Codes
Home Page Home
Developer Colm Hewson
Username legofsalmon
Uploaded November 28, 2022
Rating 3
Size 8,592 Kb
Views 14,168
Do you need developer help for Get a Route - Draft v04 - Flexbox Test?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Colm Hewson (legofsalmon) Script Codes
Name
Listy - Version 1
SVG Icons Template
Breadcrumbs for motor journey top bar thing.
Map Marker Test
SVG Animate Test
Get a Route - Draft
Get a Route - Draft v02
Brens thing
A Pen by Colm Hewson
SVG Icons Template - Event
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!