Railroad markers

Developer
Rico Sta. Cruz
Size
1,777 Kb
Views
4,048
  1. Railroad markers Previews
  2. Railroad markers HTML Codes
  3. Railroad markers CSS Codes

How do I make an railroad markers?

What is a railroad markers? How do you make a railroad markers? This script and codes were developed by Rico Sta. Cruz on 19 January 2023, Thursday.

Railroad markers Previews
IQ Test

Railroad markers - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Railroad markers</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='sprint-progress'> <span class='sprint'></span> <span class='sprint -mark'></span> <span class='sprint -mark'></span> <span class='sprint'></span> <span class='sprint'></span> <span class='marker'></span>
</div>
</body>
</html>

Railroad markers - Script Codes CSS Codes

.sprint-progress { position: relative; display: inline-block; padding: 0 0px;
}
/* Track */
.sprint-progress::before { content: ''; display: block; position: absolute; z-index: 1; background: #80DEEA; opacity: 0.2; /* hmm */ height: 8px; left: 9px; right: 9px; top: 50%; margin-top: -4px; border-radius: 4px;
}
/* Sprint marker */
.sprint-progress > .sprint { position: relative; z-index: 5; display: block; float: left; width: 4px; height: 4px; background: #81D4FA; border-radius: 50%; margin: 3px 12px;
}
.sprint-progress > .sprint.-mark { background: white;
}
.sprint-progress > .marker { position: absolute; z-index: 2; left: calc(100% * 1/5); right: calc(100% * (1 - 3/5)); top: 50%; padding: 0 4px; box-sizing: content-box;
}
.sprint-progress > .marker::before { content: ''; display: block; height: 10px; margin-top: -5px; background: #4FC3F7; opacity: .75; border-radius: 5px;
}
/* Debug */
/*.sprint, .marker, .sprint-progress { outline: dotted 1px red;
}*/
Railroad markers - Script Codes
Railroad markers - Script Codes
Home Page Home
Developer Rico Sta. Cruz
Username rstacruz
Uploaded January 19, 2023
Rating 3
Size 1,777 Kb
Views 4,048
Do you need developer help for Railroad markers?

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!

Rico Sta. Cruz (rstacruz) Script Codes
Name
Password strength meter
A Pen by Rico Sta. Cruz
Coffee image card
Diff-based typing test
Background blur hack
Styled file input
React template
Cookie notice snippet
Gradient washing
Daily UI 6
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!