List Item

Developer
Shayne Trosdahl
Size
3,241 Kb
Views
8,096
  1. List Item Previews
  2. List Item HTML Codes
  3. List Item CSS Codes

How do I make an list item?

Just doing some prototype design for something. What is a list item? How do you make a list item? This script and codes were developed by Shayne Trosdahl on 18 November 2022, Friday.

List Item Previews
IQ Test

List Item - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>List Item</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="iphone-5"> <div class="list"> <div class="list-item list-header hbox"> <span class="listitem label" >List Header</div> </div> <div class="list-item hbox"> <span class="listitem icon"> &#10102; </span> <span class="listitem label"> Bear, Yogi </span> <span class="listitem icon"> &#10103; </span> <span class="listitem icon"> &#10104; </span> <span class="listitem icon"> &#10095; </span> </div> <div class="list-item hbox"> <span class="listitem icon"> &#10102; </span> <span class="listitem label"> Rogers, Shaggy </span> <span class="listitem icon"> &#10103; </span> <span class="listitem icon"> &#10104; </span> <span class="listitem icon"> &#10095; </span> </div> <div class="list-item hbox"> <span class="listitem icon"> &#10102; </span> <span class="listitem label"> Flinstone, Fred </span> <span class="listitem icon"> &#10103; </span> <span class="listitem icon"> &#10104; </span> <span class="listitem icon"> &#10095; </span> </div> <div class="list-item hbox"> <span class="listitem icon"> &#10102; </span> <span class="listitem label"> Quest, Benton </span> <span class="listitem icon"> &#10103; </span> <span class="listitem icon"> &#10104; </span> <span class="listitem icon"> &#10095; </span> </div> </div>
</div>
</body>
</html>

List Item - Script Codes CSS Codes

.flexbox, .hbox, .vbox { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex;
}
.hbox { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row;
}
.vbox { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td { margin: 0; padding: 0; box-sizing: border-box;
}
body { background: #C7D6E2; font-size: 114%; font-family: "RobotoCondensed-Light","Helvetica-Neue",Helvetica,"BBAlpha Sans",sans-serif; font-weight: normal; -webkit-text-size-adjust: none; margin: 0; cursor: default;
}
.iphone-5 { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; background-color: #fff; border: 1px solid #a5bdd1; width: 320px; height: 579px; overflow: hidden;
}
.list { display: block;
}
.list-header { background: #4292E0; border-top: none !important; border-bottom: 1px solid #1a5fa2; color: #fff;
}
.list-header .label { padding: 0 .6em;
}
.list-item { width: 100%; min-height: 42px; line-height: 42px; border-top: 1px solid #dedede; position: relative !important;
}
.listitem.icon { color: white; text-align: center; width: 42px; height: 42px; -webkit-clip-path: polygon(90% 0, 100% 50%, 90% 100%, 0 100%, 10% 50%, 0 0); clip-path: polygon(90% 0, 100% 50%, 90% 100%, 0 100%, 10% 50%, 0 0);
}
.listitem.icon:nth-child(+5) { background: #4292E0; margin: 0 -5px 0 0;
}
.listitem.icon:nth-child(+4) { background: #84b8eb; margin: 0 -5px 0 0;
}
.listitem.icon:nth-child(+3) { background: #c5def6; margin: 0 -5px 0 0;
}
.listitem.icon:nth-child(+1) { color: black;
}
.listitem.label { -webkit-box-flex: 1; -ms-flex: 1; flex: 1;
}
List Item - Script Codes
List Item - Script Codes
Home Page Home
Developer Shayne Trosdahl
Username Trozdol
Uploaded November 18, 2022
Rating 3
Size 3,241 Kb
Views 8,096
Do you need developer help for List Item?

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!

Shayne Trosdahl (Trozdol) Script Codes
Name
Turn Off Smart Quotes in Mac OS X
1em Sizing Side-by-Side Comparison
Push to Nested Array
Bounce in from off screen CSS animation
Sencha Touch Bar Chart Add ons
Sencha Touch 2.3.1 Basic Grid Example
Varied Size Text Centered Vertically
A Pen by Shayne Trosdahl
Sencha Touch Grid Text Wrap Test
Simple Photo Button Example for Friends Reference
Create amazing blog posts 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!