Get a Route - Draft

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

How do I make an get a route - draft?

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

Get a Route - Draft Previews
IQ Test

Get a Route - Draft - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Get a Route - Draft</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="bg"> <!-- 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="holder"> <div class="container light-container"> <div class="buttons-container"> <input class="input-box" placeholder="Choose your starting point"> </input> <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> <input class="input-box" placeholder="Choose your destination"> </input> <div class="button-spacer-15"> </div> <div class="button secondary-button-lightbg"> get a route </div> </div>
</div>
<div class="container light-container"> <div class="buttons-container"> <input class="input-box valid" placeholder="Dublin, Ireland"> </input> <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> <input class="input-box valid" placeholder="Cork, Ireland"> </input> <div class="button-spacer-15"> </div> <div class="button secondary-button-lightbg"> <div class="loader"></div> </div> </div> </div>
<div class="container light-container"> <div class="buttons-container"> <input type="text" class="input-box valid" placeholder="Dublin, Ireland" > </input> <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> <input type="text" class="input-box valid" placeholder="60 Handel House"> </input> <div class="button-spacer-15"> </div> <div class="button secondary-button-lightbg"> get a route </div> </div> </div>
<div class="container light-container"> <div class="buttons-container"> <input type="text" class="input-box invalid" placeholder="Choose your starting point" > </input> <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> <input type="text" class="input-box invalid" placeholder="sdgdft4wrwefsfs"> </input> <div class="button-spacer-15"> </div> <div class="button secondary-button-lightbg"> get a route </div> </div> </div> </div>
</body>
</html>

Get a Route - Draft - 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: 100vw; height: 100vh; -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; overflow: hidden;
}
.header { min-height: 60px; background: #272822; box-shadow: 0px 0px 10px 2px #272822; padding: 0px 20px; position: relative; z-index: 999;
}
.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: -1;
}
.input-box { display: block; color: #6e6e6c; border: 0px; color: #6e6e6c; border-radius: 0px; box-shadow: none; height: 50px; width: 100%; line-height: 1.42857143; font-size: 14px; padding: 6px 12px; background-image: none; background-color: #f1f1f1; box-sizing: border-box; -webkit-rtl-ordering: logical; -webkit-user-select: text; transition: all ease 0.3s;
}
input:focus { outline: 0px;
}
.invalid { border-bottom: solid 4px #e64e3c;
}
.valid { border-bottom: solid 4px #00aa99;
}
.container { width: 400px;
}
.light-container { background-color: #f8d247;
}
.dark-container { background-color: #272822;
}
.buttons-container { padding: 20px;
}
.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;
}
.via { 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: #f8d247; 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; /* Box Shadow used rather than border so it retains a max width of 100% - padding */ 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%; /* Doing it this way so the edge of both buttons line up nicely. Can't use box-shadow inset because we're using that for the button active state, and you can't jump from outset to inset box-shadow with an nice transition.*/ 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);
}
/* 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); }
}
.loader-02:before,
.loader-02:after { position: absolute; content: '';
}
.loader-02 { margin: 0 auto; position: relative; width: 100%; height: 50px;
}
.loader-02:after { width: 600px; height: 100px; top: 0px; background: #00aa99; -webkit-animation: load3 5s infinite ease; animation: load3 5s infinite ease;
}
@-webkit-keyframes load3 { 0% { left: -600px; } 100% { left: 600px; }
}
@keyframes load3 { 0% { left: -600px; } 100% { left: 600px; }
}
Get a Route - Draft - Script Codes
Get a Route - Draft - Script Codes
Home Page Home
Developer Colm Hewson
Username legofsalmon
Uploaded November 28, 2022
Rating 3
Size 5,279 Kb
Views 10,120
Do you need developer help for Get a Route - Draft?

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
Des1gnon Logo - Testing the Wave Pattern
Get a Route - Draft v04 - Flexbox Test
Information Icon
SVG Icons Template
Breadcrumbs for motor journey top bar thing.
A Pen by Colm Hewson
SVG Icons Template - Event
SVG Animate Test
Map Marker Test
Get a Route - Draft v02
Create amazing art & images 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!