Get a Route - Draft v04 - Flexbox Test
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 - 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"> </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 ");
}
.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" );
});
Developer | Colm Hewson |
Username | legofsalmon |
Uploaded | November 28, 2022 |
Rating | 3 |
Size | 8,592 Kb |
Views | 14,168 |
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!
Name | Size |
Get a Route - Draft | 5,279 Kb |
A Pen by Colm Hewson | 12,521 Kb |
Des1gnon Logo - Testing the Wave Pattern | 2,201 Kb |
SVG Icons Template | 2,618 Kb |
SVG Icons Template - Event | 5,373 Kb |
Brens thing | 4,542 Kb |
Get a Route - Draft v02 | 6,979 Kb |
Map Marker Test | 2,330 Kb |
Breadcrumbs for motor journey top bar thing. | 8,548 Kb |
Information Icon | 3,613 Kb |
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!
Name | Username | Size |
Improve | Gavra | 1,652 Kb |
Css Rotating 3d cubes different speed | Dghez | 2,364 Kb |
Transition | Shayhowe | 1,632 Kb |
Save for later... | Victorfreire | 1,359 Kb |
React JS Movie Info App | MTushar | 4,870 Kb |
Flat UI Button | Honchoman | 2,289 Kb |
Wave Lines | Mikehobizal | 4,023 Kb |
CSS3 Selectables with information rollover | Jasonmayes | 9,565 Kb |
Sass Get Function | Lukewatts | 2,155 Kb |
Slider css only | Armandobau | 2,161 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!