Steps List

Developer
Alex Pate
Size
2,653 Kb
Views
16,192
  1. Steps List Previews
  2. Steps List HTML Codes
  3. Steps List CSS Codes

How do I make an steps list?

What is a steps list? How do you make a steps list? This script and codes were developed by Alex Pate on 24 November 2022, Thursday.

Steps List Previews
IQ Test

Steps List - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Steps List</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <ul class="steps"> <li> Step 1 <span class="copy">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span> </li> <li> Step 2 <span class="copy">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span> </li> <li> Step 3 <span class="copy">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span> </li> <li> Step 4 <span class="copy">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</span> </li>
</ul>
</body>
</html>

Steps List - Script Codes CSS Codes

* { box-sizing: border-box; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
body,
html { width: 100%; height: 100%; background: #f8f8f8; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
.steps { list-style: none; margin: 0; padding: 0; width: 300px;
}
.steps li { position: relative; padding: 0px 0 40px 30px; border-left: 4px solid #fff; font-weight: bold;
}
.steps li:before { width: 12px; height: 12px; border-radius: 50%; display: block; position: absolute; left: -12px; content: " "; background: #f8f8f8; border-color: inherit; border-style: solid; border-width: 4px;
}
.steps li:last-of-type { padding-bottom: 20px;
}
.steps li:nth-of-type(1) { border-color: #f9c80e;
}
.steps li:nth-of-type(2) { border-color: #84c318;
}
.steps li:nth-of-type(3) { border-color: #3e92cc;
}
.steps li:nth-of-type(4) { border-color: #db2763;
}
.copy { font-size: 14px; color: #333; display: block; font-weight: 400; margin-top: 5px;
}
Steps List - Script Codes
Steps List - Script Codes
Home Page Home
Developer Alex Pate
Username alexpate
Uploaded November 24, 2022
Rating 3.5
Size 2,653 Kb
Views 16,192
Do you need developer help for Steps List?

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 Pate (alexpate) Script Codes
Name
Smock Gradient Button
Pulse Animation
Stats Animation
Notifier Pulse
SVG Progress Circle JS
Whatthehack Pusher
Subtle Draw Nav Animation
Button Animation
SVG Circle progress
A Pen by Alex Pate
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!