WIP - Checkout Flow Steps Progress mobile concept

Developer
Alex Rodrigues
Size
3,960 Kb
Views
22,264
  1. WIP - Checkout Flow Steps Progress mobile concept Previews
  2. WIP - Checkout Flow Steps Progress mobile concept HTML Codes
  3. WIP - Checkout Flow Steps Progress mobile concept CSS Codes
  4. WIP - Checkout Flow Steps Progress mobile concept JS Codes

How do I make an wip - checkout flow steps progress mobile concept?

What is a wip - checkout flow steps progress mobile concept? How do you make a wip - checkout flow steps progress mobile concept? This script and codes were developed by Alex Rodrigues on 13 August 2022, Saturday.

WIP - Checkout Flow Steps Progress mobile concept Previews
IQ Test

WIP - Checkout Flow Steps Progress mobile concept - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>WIP - Checkout Flow Steps Progress mobile concept</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrap"> <div class="horizontal"> <ul class="item__wrap"> <li class="items complete">ITEM 1</li> <li class="items complete">ITEM 2</li> <li class="items complete">ITEM 3</li> <li class="items complete">ITEM 4</li> <li class="items active">ITEM 5</li> <li class="items inactive">ITEM 6</li> <li class="items inactive">ITEM 7</li> <li class="items inactive">ITEM 8</li> </ul>
</div> </div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

WIP - Checkout Flow Steps Progress mobile concept - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Droid+Serif:400,400italic|Montserrat:400,700);
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline;
}
html { line-height: 1;
}
ol, ul { list-style: none;
}
table { border-collapse: collapse; border-spacing: 0;
}
caption, th, td { text-align: left; font-weight: normal; vertical-align: middle;
}
q, blockquote { quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none;
}
a img { border: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block;
}
* { box-sizing: border-box;
}
.wrap { width: 15em; overflow-x: hidden; position: relative; margin: 0 auto;
}
.wrap:before, .wrap:after { content: " "; position: absolute; width: 20%; z-index: 1; display: block; background: #000; height: 90%; left: 0; top: 0; background: -moz-linear-gradient(left, white 0%, rgba(255, 255, 255, 0) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%, white), color-stop(100%, rgba(255, 255, 255, 0))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, white 0%, rgba(255, 255, 255, 0) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, white 0%, rgba(255, 255, 255, 0) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, white 0%, rgba(255, 255, 255, 0) 100%); /* IE10+ */ background: linear-gradient(to right, #ffffff 0%, rgba(255, 255, 255, 0) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-8 */
}
.wrap:after { right: 0; left: auto; background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, white 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, white)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, white 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, white 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, white 100%); /* IE10+ */ background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #ffffff 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-8 */
}
.horizontal { width: 15em; font-family: "Montserrat", sans-serif; overflow-x: scroll; overflow-y: hidden; margin: 2em auto; position: relative; border: solid #bebebe; border-width: 1px 0; -webkit-overflow-scrolling: touch;
}
.item__wrap { width: 45em;
}
.items { width: 5em; display: inline-block; text-align: center; padding: 1em 0;
}
.items.complete { color: #676767;
}
.items.active { color: #f30;
}
.items.inactive { color: #bebebe;
}

WIP - Checkout Flow Steps Progress mobile concept - Script Codes JS Codes


var active = $('.items.active').position().left,	itemWidth = $('.items').outerWidth(), scroll = active - itemWidth ;	$( ".horizontal" ).animate({scrollLeft: scroll }, 800);
WIP - Checkout Flow Steps Progress mobile concept - Script Codes
WIP - Checkout Flow Steps Progress mobile concept - Script Codes
Home Page Home
Developer Alex Rodrigues
Username alex_rodrigues
Uploaded August 13, 2022
Rating 3
Size 3,960 Kb
Views 22,264
Do you need developer help for WIP - Checkout Flow Steps Progress mobile concept?

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!

Alex Rodrigues (alex_rodrigues) Script Codes
Name
Responsive Checkout Concept WIP
Learning FlexBox
SA_testing
Responsive Table-less Shopping Cart
Animated Bar Graphs
A Pen by alex rodrigues
Jquery Scroll test
Transition Demo
Playing with Grid
Toying With Flexslider
Create amazing web 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!