List Sections
How do I make an list sections?
Influence from reddit.com/r/askreddit sidebar. What is a list sections? How do you make a list sections? This script and codes were developed by Event Horizon on 30 July 2022, Saturday.
List Sections Previews
List Sections - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>List Sections</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<h3>Rollover for animations</h3>
<div class="rollout" data-mark="1"> <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu sapien id ipsum sagittis finibus. Donec sed aliquet nunc. Vivamus ut laoreet lorem, sed sollicitudin metus. Nulla volutpat tortor arcu, vitae commodo dui placerat vitae. Integer eget egestas odio, id interdum velit. Vivamus arcu lectus, venenatis elementum nisi et, vestibulum pellentesque dui. Fusce quis libero vitae tellus ultrices commodo eu eu eros. Donec elementum sapien massa, gravida consectetur odio fermentum et. Nunc neque nibh, sollicitudin ac mollis in, rhoncus ut nibh. Sed porta ipsum ac felis facilisis rutrum. Donec eget posuere mauris, tincidunt semper quam.</div>
</div>
<div class="rollout" data-mark="2"> <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu sapien id ipsum sagittis finibus. Donec sed aliquet nunc. Vivamus ut laoreet lorem, sed sollicitudin metus. Nulla volutpat tortor arcu, vitae commodo dui placerat vitae. Integer eget egestas odio, id interdum velit. Vivamus arcu lectus, venenatis elementum nisi et, vestibulum pellentesque dui. Fusce quis libero vitae tellus ultrices commodo eu eu eros. Donec elementum sapien massa, gravida consectetur odio fermentum et. Nunc neque nibh, sollicitudin ac mollis in, rhoncus ut nibh. Sed porta ipsum ac felis facilisis rutrum. Donec eget posuere mauris, tincidunt semper quam.</div>
</div>
<div class="rollout" data-mark="3"> <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu sapien id ipsum sagittis finibus. Donec sed aliquet nunc. Vivamus ut laoreet lorem, sed sollicitudin metus. Nulla volutpat tortor arcu, vitae commodo dui placerat vitae. Integer eget egestas odio, id interdum velit. Vivamus arcu lectus, venenatis elementum nisi et, vestibulum pellentesque dui. Fusce quis libero vitae tellus ultrices commodo eu eu eros. Donec elementum sapien massa, gravida consectetur odio fermentum et. Nunc neque nibh, sollicitudin ac mollis in, rhoncus ut nibh. Sed porta ipsum ac felis facilisis rutrum. Donec eget posuere mauris, tincidunt semper quam.</div>
</div>
</body>
</html>
List Sections - Script Codes CSS Codes
h3{ font-size:1.5em; font-weight:bold; padding:8px 16px;
}
.rollout{ position:relative; background-color:#d3d3d3; width:256px; height:128px; margin:4px; padding:8px; padding-left:24px; margin-left:48px; border:1px solid #aaa; -webkit-transition:background-color 700ms, margin-left 500ms; transition:background-color 700ms, margin-left 500ms;
}
.rollout div{ overflow:hidden; width:256px; height:128px;
}
.rollout:hover{ background-color:#eee; border-style:dotted; border-color:#333; margin-left:24px;
}
.rollout:before{ position:absolute; top:44px; left:-20px; content:attr(data-mark); display:inline-block; background-color:#156797; color:#fff; border-radius: 32px; width:32px; height:32px; text-align:center; line-height:32px; font-weight:bold; font-size:1.5em; border:4px solid #000; -webkit-transition:background-color 700ms,font-size 300ms, top 300ms; transition:background-color 700ms,font-size 300ms, top 300ms;
}
.rollout:hover:before{ background-color:#2bc; font-size:2.1em; top:12px;
}
| Developer | Event Horizon |
| Username | Event_Horizon |
| Uploaded | July 30, 2022 |
| Rating | 3 |
| Size | 2,721 Kb |
| Views | 36,432 |
Do you need developer help for List Sections?
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!
Event Horizon (Event_Horizon) Script Codes
| Name | Size |
| Simple Drag and Drop | 3,208 Kb |
| Mastermind Word Game | 2,815 Kb |
| Gaming UI | 3,024 Kb |
| Confetti | 3,734 Kb |
| Table Generation | 3,609 Kb |
| Slider Colorpicker | 6,130 Kb |
| Tabs | 3,065 Kb |
| Pure CSS mail icon | 1,776 Kb |
| Music Player | 4,413 Kb |
| Very Animated Loading Bar | 2,246 Kb |
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!
Similar Scripts & Codes
| Name | Username | Size |
| A Pen by Paul Sullivan | Pwsm50 | 2,349 Kb |
| Expandable Left Side Bar with jQuery animate | Retrofuturistic | 2,483 Kb |
| Sticky Navbar | Phantomesse | 5,106 Kb |
| A Pen by Eka Risyana | Risyana | 3,705 Kb |
| Pure CSS Menu | Bronsrobin | 3,321 Kb |
| Contact | GanNichiHa | 2,514 Kb |
| JQuery AJAX reddit Exercise | Btholt | 1,777 Kb |
| Simple Linear Regression with Editable Table | Melatonind | 3,264 Kb |
| Coming Soon | MariamMassadeh | 1,680 Kb |
| Kut D3 | Jellevrswk | 3,687 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!