Skip to content

Instantly share code, notes, and snippets.

@timchenkomo

timchenkomo/index.html

Created January 5, 2021 16:07
Show Gist options
  • Save timchenkomo/544a876eda8ca83287a64c58eb220d2c to your computer and use it in GitHub Desktop.
Save timchenkomo/544a876eda8ca83287a64c58eb220d2c to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. timchenkomo created this gist Jan 5, 2021.
    8 changes: 8 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,8 @@
    <div>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, iste iusto quas eligendi corporis id eius corrupti temporibus velit? Molestias harum voluptatibus veritatis explicabo ut velit deserunt, saepe sit commodi?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, iste iusto quas eligendi corporis id eius corrupti temporibus velit? Molestias harum voluptatibus veritatis explicabo ut velit deserunt, saepe sit commodi?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, iste iusto quas eligendi corporis id eius corrupti temporibus velit? Molestias harum voluptatibus veritatis explicabo ut velit deserunt, saepe sit commodi?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, iste iusto quas eligendi corporis id eius corrupti temporibus velit? Molestias harum voluptatibus veritatis explicabo ut velit deserunt, saepe sit commodi?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, iste iusto quas eligendi corporis id eius corrupti temporibus velit? Molestias harum voluptatibus veritatis explicabo ut velit deserunt, saepe sit commodi?</p>

    </div>
    75 changes: 75 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,75 @@
    body { font-family: Helvetica; }

    div {
    width: 300px;
    margin: auto;
    }

    p {
    border-top: 2px dashed;
    border-color: blue !important;
    margin:0; padding: 30px;
    counter-increment: section;
    position: relative;
    }



    p:nth-child(even):before {
    content: counter(section);
    right: 100%;
    margin-right: -20px;
    position: absolute;
    border-radius: 50%;
    padding: 10px;
    height: 20px;
    width: 20px;
    background-color: blue;
    text-align:center;
    color: white;
    font-size: 110%;
    }

    p:nth-child(odd):before {
    content: counter(section);
    left: 100%;
    margin-left: -20px;
    position: absolute;
    border-radius: 50%;
    padding: 10px;
    height: 20px;
    width: 20px;
    background-color: blue;
    text-align:center;
    color: white;
    font-size: 110%;
    }



    p:nth-child(even) {
    border-left: 2px dashed;
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
    margin-right: 30px;
    padding-right: 0;
    }

    p:nth-child(odd) {
    border-right: 2px dashed;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    margin-left: 30px;
    padding-left: 0;
    }

    p:first-child {
    border-top: 0;
    border-top-right-radius:0;
    border-top-left-radius:0;
    }

    p:last-child {
    border-bottom-right-radius:0;
    border-bottom-left-radius:0;
    }
    7 changes: 7 additions & 0 deletions timeline-css-with-counters.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    Timeline CSS with Counters
    --------------------------


    A [Pen](https://codepen.io/snookca/pen/qYoLaq) by [Jonathan Snook](https://codepen.io/snookca) on [CodePen](https://codepen.io).

    [License](https://codepen.io/snookca/pen/qYoLaq/license).