Want to create exactly like this any idea’s?
Hi, ngautam4622. Welcome to the forums.
ideas!
Take a class in HTML and CSS.
Hire a consultant.
Seriously, your request is too vague. It would be very helpful to know where this vertical line will be used on a page, what is around it, and how should it behave on desktops as well as mobile devices.
Please read our posting guidelines.
Hi there ngautam4622,
here is a basic example…
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<link rel="stylesheet" href="screen.css" media="screen">
<style media="screen">
body {
background-color: #f9f9f9;
font: 100% / 162% verdana, arial, helvetica, sans-serif;
}
#circled-line {
width: 100%;
max-width: 20em;
margin: auto;
border: 1px solid #ccc;
background-image: linear-gradient( to right, #f0f3f8 49.5%, #999 50.5%, #f0f3f8 50.5% );
}
#circled-line div {
margin: 4em auto;
background-image: linear-gradient( to bottom, #f0f3f8 45%, #999 55%, #f0f3f8 55% );
}
#circled-line span {
display: block;
width: 2em;
padding-top: 2em;
margin: auto;
border: 1px solid #999;
border-radius: 50%;
background-color: #fff;
}
</style>
</head>
<body>
<div id="circled-line">
<div><span></span></div>
<div><span></span></div>
<div><span></span></div>
</div>
</body>
</html>
coothead
3 Likes
@coothead seems to have given you exactly what you asked for but I have an old demo here in answer to a similar question on the forums.
Or a more stylised version here.
7 Likes
@PaulOB, I really like your Spirals so much so I modified the source and made it into a Todo List to help me keep track while rewriting an old site:
Combined two files to render output:
Modifications were mainly adding a PHP array and replacing the hard-coded scripts, far easier and flexible than trying to update the individual scripts IMHO 
File: index.php
<?php
/*
file: index.php
*/
$title = $title ?? 'John_Betong\'s ToDo list';
$xs = array(
array(
'Common', // <a href="/home"> Home </a>',
'Common',
'ToDo',
'AmpProject, Top Menu, SVG Diagaonal, Sub Menus, Pagination, Footer ',
),
array(
'<a href="/home"> Home </a>',
'Home Page',
'ToDo',
'AmpProject, Home Page with Top Menu, SVG Diagaonal, Sub Menus, Content, Pagination, Footer ',
),
array(
'<a href="/pictures"> Pictures </a>',
'Pictures',
'ToDo',
'Thumbs, Links to Pages',
),
array(
'<a href="/videos"> Videos </a>',
'Videos',
'ToDo',
'Videos, Links to YouTube ',
),
array(
'<a href="/games"> Games </a>',
'Games',
'ToDo',
'Companies must lodge annual reports within 3 months of the end of the financial year',
),
array(
'<a href="/oddballs"> Odd Balls </a>',
'Odd Balls',
'ToDo',
'Draft explanatory statements and a notice of meeting to shareholders',
),
array(
'Google Stuff',
'Google Stuff',
'ToDo',
'Analytics, Analysis, Adsense',
),
array(
'Promotion', // ''Heading 7',
'Promotion',
'ToDo',
'Let everyone know including the cat and dog',
),
array(
'Heading 8',
'7 Explanatory',
'ToDo',
'Companies must lodge annual reports within 3 months of the end of the financial year',
),
array(
'Heading 9',
'8 Explanatory',
'ToDo',
'Companies must lodge annual reports within 3 months of the end of the financial year',
),
);
include 'index-spirals.php';
### file: Index-spirals.php ``` <?php /* file: index-spirals.php */
?>
Title goes here <?php # echo $style_spirals; ?> <?php # echo file_get_contents('incs/style-spirals.css'); ?> /* style_spirals.css SitePoint: Paul O'Brien */ html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } .col h3 {margin: 0;} .circle { position: relative; margin: 0; width: 125px; height: 125px; border: 15px solid transparent; border-radius: 50%; } .circle1 { border-color: #29bdcc; border-left-color: transparent; border-top-color: transparent; } .circle2 {border-color: #17556f; border-right-color: transparent;} .circle3 {border-color: #f58c31; border-left-color: transparent;} .circle4 {border-color: #ed4565; border-right-color: transparent;} .circle5 {border-color: #f0b224; border-left-color: transparent;} .circle6 {border-color: #1eb473; border-right-color: transparent;} .circle7 {border-color: #93288d; border-left-color: transparent;} .circle8 {border-color: #1b5f8c; border-right-color: transparent;} .circle h2 {display: table; margin: 5px 0 0 5px; width: 85px; height: 85px; background: #29bdcc; border-radius: 50%; } .circle2 h2 {background: #17556f;} .circle3 h2 {background: #f58c31;} .circle4 h2 {background: #ed4565;} .circle5 h2 {background: #f0b224;} .circle6 h2 {background: #1eb473;} .circle7 h2 {background: #93288d;} .circle8 h2 {background: #1b5f8c;} .circle span {font-size: 12px; color: #fff; display: table-cell; vertical-align: middle;text-align: center;} .circle i, .circle b {font-weight: bold; font-style: normal; display: block;} .circle i {font-size: 24px;} .wrap { display: flex; flex-wrap: wrap; max-width: 980px; margin: auto;} .col { flex: 1 0 50%; display: flex; align-items: center; margin-bottom: -47px; position: relative; left: 23px; } .col2 {left: -24px;} .col1 {text-align: right; align-content: flex-end;} .col1 .content {order: -1;} .content {flex: 1 0 0%; padding: 1px 10px; margin:-20px 0;} .content h2 {font-size: 1 rem;} .content p {margin: 0.5em 0 0 0; font-size: 0.8rem; color: #666;} .circle1:before { content: ""; height: 15px; width: 250px; position: absolute; right: 46px; top: -15px; background: #29bdcc; background:linear-gradient(to left, #29bdcc 0%, white 100%); z-index: -1; animation:shimmer 10s infinite forwards;} @keyframes shimmer{ 0% {width: 0;} 5% {width: 250px;} 100%{width: 250px;} } .circle1:after, .circle8:after { content: ""; position: absolute; left: -15px; top: -15px; width: 125px; height: 125px; border: 15px solid transparent; border-color: #29bdcc; border-left-color: transparent; border-top-color: transparent; transform: rotate(-45deg); border-radius: 50%; z-index: -1; } .circle8:after { border-color: #1b5f8c; border-right-color: transparent; border-bottom-color: transparent; transform: rotate(-45deg); } .circle8:before { content: ""; height: 15px; width: 250px; position: absolute; right: -202px; bottom: -15px; background: #1b5f8c; background:linear-gradient(to right, #1b5f8c 0%, white 100%); z-index: -1; } .circle8 {border-bottom-color: transparent;} @media screen and (max-width: 600px) { .wrap { display: block; } .content{margin:0;} .col { margin: 10px 0; position: static; } .circle8:before, .circle8:after, .circle1:before, .circle2:after { display: none; } .circle1 {border-color: #29bdcc;} .circle2 {border-color: #17556f;} .circle3 {border-color: #f58c31;} .circle4 {border-color: #ed4565;} .circle5 {border-color: #f0b224;} .circle6 {border-color: #1eb473;} .circle7 {border-color: #93288d;} .circle8 {border-color: #1b5f8c;} }.home {position:fixed; top:4px; left:4px; margin:0; padding:0;}
.bge {background-color:#eee; color:#000;}
.ftr {position:absolute; bottom: 0; left:0; width:100%;}
.hg2 {height:2em;}
.lh2 {line-height:2em;}
.tac {text-align:center;}
div {outline:solid 0px red;}
Home
<?= $title; ?>
<?= $xs[0][1]; ?> <?= $xs[0][2]; ?>
<?= $xs[0][0]; ?>
<?= $xs[0][3]; ?>
<?= $xs[1][1]; ?> <?= $xs[1][2] ?>
<?= $xs[1][0]; ?>
<?= $xs[1][3]; ?>
<?= $xs[2][1]; ?> <?= $xs[2][2]; ?>
<?= $xs[2][0]; ?>
<?= $xs[2][3]; ?>
<?= $xs[3][1]; ?> <?= $xs[3][2]; ?>
<?= $xs[3][0]; ?>
<?= $xs[3][3]; ?>
<?= $xs[4][1]; ?> <?= $xs[4][2]; ?>
<?= $xs[4][0]; ?>
<?= $xs[4][3]; ?>
<?= $xs[5][1]; ?> <?= $xs[5][2]; ?>
<?= $xs[5][0]; ?>
<?= $xs[5][3]; ?>
<?= $xs[6][1]; ?> <?= $xs[6][2]; ?>
<?= $xs[6][0]; ?>
<?= $xs[6][3]; ?>
<?= $xs[7][1]; ?> <?= $xs[7][2]; ?>
<?= $xs[7][0]; ?>
<?= $xs[7][3]; ?>
Wonderful place for a footer
```
5 Likes
Looks good
2 Likes
Me Too. Mr @PaulOB has created such a wonderful spirals. I am thinking when and where can I use them.
2 Likes
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.