Get a Route - Draft v02

Developer
Colm Hewson
Size
6,979 Kb
Views
10,120
  1. Get a Route - Draft v02 Previews
  2. Get a Route - Draft v02 HTML Codes
  3. Get a Route - Draft v02 CSS Codes

How do I make an get a route - draft v02?

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

Get a Route - Draft v02 Previews
IQ Test

Get a Route - Draft v02 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Get a Route - Draft v02</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> &nbsp;Routeplanner </logo> </div> <!-- Routeplanner Sidebar --> <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="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="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 valid" type='reset' height='50' width='50'> </input> <input class="input-box valid" placeholder="Dublin, Ireland"> </input> </form> <div class="icon valid"> <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-10"> </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 valid" type='reset' height='50' width='50'> </input> <input class="input-box valid" placeholder="Cork, Ireland"> </input> </form> <div class="icon valid"> <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"> <div class="loader"></div> </div> </div> </div> <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 invalid" type='reset' height='50' width='50'> </input> <input type="text" class="input-box invalid" placeholder="Choose your starting point"> </input> </form> <div class="icon invalid"> <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-10"> </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 invalid" type='reset' height='50' width='50'> </input> <input type="text" class="input-box invalid" placeholder="sdgdft4wrwefsfs"> </input> </form> <div class="icon invalid"> <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="container light-container"> <div class="buttons-container"> <svg class="thedottedline" height='180'> <g fill="none" stroke-width="5px"> <polyline points="25,50 25,90 55,90 55,110 25,110 25, 170" stroke-dasharray="8,8" /> </g> </svg> <form> <input class="x-clear invalid" type='reset' height='50' width='50'> </input> <input type="text" class="input-box invalid" placeholder="Choose your starting point"> </input> </form> <div class="icon invalid"> <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> <form> <input class="x-clear via-spacer invalid" type='reset' height='50' width='50'> </input> <input type="text" class="input-box via-spacer invalid" placeholder="Choose your via point" style="width: 230px;"> </input> </form> <div class="icon via-spacer invalid"> <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-10"> </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 invalid" type='reset' height='50' width='50'> </input> <input type="text" class="input-box invalid" placeholder="sdgdft4wrwefsfs"> </input> </form> <div class="icon invalid"> <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="toggle-holder"> <div class="content-box-toggle"> </div> <div class="content-box-toggle restaurant"> </div> <div class="content-box-toggle garage"> </div> <div class="content-box-toggle fuel"> </div> <div class="content-box-toggle parking"> </div>
</div> <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script>
</body>
</html>

Get a Route - Draft v02 - 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); margin: 0; font-family: 'Open Sans'; width: 100%; height: 100%; -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; z-index: -4;
}
.header { min-height: 60px; background: #272822; box-shadow: 0px 0px 10px 2px #272822; padding: 0px 20px; position: relative; z-index: 1;
}
.logo { display: table-cell; vertical-align: middle; font-size: 18px; line-height: 18px; font-weight: 400; height: 60px; color: white;
}
.holder { position: absolute; display: block; left: 0px; height: 100vh; font-size: 14px; background: #272822; box-shadow: 3px 5px 10px 0px rgba(0, 0, 0, 0.2); z-index: -3;
}
.content-box { left: 400px; height: 100vh; width: 400px; background: #f1f1f1; display: block; position: absolute; z-index: -10; box-shadow: 3px 5px 10px 0px rgba(0, 0, 0, 0.2); transition: all ease 0.3s;
}
.content-box:active { left: 400px;
}
.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: center;
}
.content-box-toggle { display: inline-block; position: relative; margin-top: 10px; text-align: center; background-color: #f1f1f1; color: #272822; width: 30px; height: 30px; border-style: solid; border-radius: 40px; border-width: 5px; padding: 15px; font-weight: 700; user-select: none; font-size: 14px; line-height: 14px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; transition: all ease 0.3s;
}
.hotel { border-color: red;
}
.restaurant { border-color: blue;
}
.garage { border-color: yellow;
}
.fuel { border-color: orange;
}
.parking { border-color: green;
}
.content-box-toggle:hover { cursor: pointer;
}
.content-box-toggle:active { box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.2);
}
.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 v02 - Script Codes
Get a Route - Draft v02 - Script Codes
Home Page Home
Developer Colm Hewson
Username legofsalmon
Uploaded November 28, 2022
Rating 3
Size 6,979 Kb
Views 10,120
Do you need developer help for Get a Route - Draft v02?

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.
Brens thing
Information Icon
SVG Animate Test
Des1gnon Logo - Testing the Wave Pattern
SVG Icons Template - Event
Map Marker Test
A Pen by Colm Hewson
Create amazing video scripts 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!