Scribd
Upload
9 views3 pages

Stylish Unordered List Example

The document is an HTML template that includes a styled unordered list within a container. It features custom CSS for styling the list items, including hover effects and a specific font and color scheme. The list contains four items labeled 'First item', 'Second item', 'Third item', and 'Fourth item'.

Uploaded by

Abdulwaheed Toheeb Olanrewaju
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
9 views3 pages

Stylish Unordered List Example

The document is an HTML template that includes a styled unordered list within a container. It features custom CSS for styling the list items, including hover effects and a specific font and color scheme. The list contains four items labeled 'First item', 'Second item', 'Third item', and 'Fourth item'.

Uploaded by

Abdulwaheed Toheeb Olanrewaju
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

<!

DOCTYPE html>

<html lang="en">

<head>

<style>

.container {

font-family: Arial, sans-serif;

background-color: #f9f9f9;

color: #333;

margin: 20px;

display: flex;

justify-content: space-around;

h2 {

color: #2c3e50;

.styled-list {

list-style-type: none;

padding: 0;

margin: 20px 0;

.styled-list li {

background-color: #e3f2fd;

margin: 5px 0;

padding: 10px;

border-radius: 5px;
transition: background-color 0.3s ease;

display: flex;

align-items: center;

.styled-list li::before {

content: "";

color: #3498db;

font-weight: bold;

margin-right: 10px;

.styled-list ol li::before {

content: counter(list-item) ". ";

font-weight: bold;

color: #3498db;

.styled-list li:hover {

background-color: #bbdefb;

</style>

</head>

<body>

<div class="container">

<div class="ul">

<h2>Unordered List</h2>
<ul class="styled-list">

<li>First item</li>

<li>Second item</li>

<li>Third item</li>

<li>Fourth item</li>

</ul>

</div>

</div>

</body>

You might also like