Item Display

Developer
Patrick
Size
1,872 Kb
Views
10,120
  1. Item Display Previews
  2. Item Display HTML Codes
  3. Item Display CSS Codes

How do I make an item display?

Just replicating something I saw somewhere sometime. Using a data attribute for content.. What is a item display? How do you make a item display? This script and codes were developed by Patrick on 21 November 2022, Monday.

Item Display Previews
IQ Test

Item Display - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Item Display</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="item"> <div class="itemHead" data-category="Random">This is a header.</div> <div class="itemBody"> <em>yo.</em> </div>
</div>
</body>
</html>

Item Display - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Roboto:100,300|Satisfy);
* { box-sizing: border-box; }
body { margin: 50px; font-family: Roboto; background: whiteSmoke; }
.item { width: 400px; margin: 0 auto; box-shadow: rgba(0,0,0,.1) 0 0 6px; } .itemHead { position: relative; padding: 20px; background: #fff; font-size: 14px; color: #999; } .itemHead:before { content: ""; position: absolute; z-index: 1; top: 100%; right: 10%; border-top: 15px solid #fff; border-left: 15px solid transparent; border-right: 15px solid transparent; } .itemHead:after { content: attr(data-category); position: absolute; right: 20px; text-align: right; font-style: italic; text-transform: uppercase; } .itemBody { padding: 20px; height: 300px; background: salmon; color: #fff; }
.itemBody em { display: block; text-align: center; font: 150px Satisfy; letter-spacing: -.05em;}
Item Display - Script Codes
Item Display - Script Codes
Home Page Home
Developer Patrick
Username hinducows
Uploaded November 21, 2022
Rating 3
Size 1,872 Kb
Views 10,120
Do you need developer help for Item Display?

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!

Patrick (hinducows) Script Codes
Name
Flat-ish UI Login Element
3D Transforms
3D Transforms Flip
Overlay Drop Description
Hexagon v2
Fixed Scrolling Backgrounds
Menu Overlay
Log In Modal
JQuery CSS Transition Content Slide-In
Flat UI Element
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!