Skip to content

Instantly share code, notes, and snippets.

@aliasadidev

aliasadidev/index.html

Last active June 24, 2020 18:23
Show Gist options
  • Save aliasadidev/9844dccbe980059c5389786b5d81d2db to your computer and use it in GitHub Desktop.
Save aliasadidev/9844dccbe980059c5389786b5d81d2db to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. aliasadidev revised this gist Jun 24, 2020. 3 changed files with 0 additions and 8 deletions.
    8 changes: 0 additions & 8 deletions fiddle.manifest
    View file
    Original file line number Diff line number Diff line change
    @@ -1,8 +0,0 @@
    name: Horizontal line with words in the middle CSS
    description: Horizontal line with words in the middle CSS
    authors:
    - Ali Asadi
    normalize_css: no
    wrap: b
    panel_js: 1
    panel_css: 1
    0 fiddle.html → index.html
    View file
    File renamed without changes.
    0 fiddle.css → style.css
    View file
    File renamed without changes.
  2. aliasadidev revised this gist Jun 24, 2020. 1 changed file with 8 additions and 0 deletions.
    8 changes: 8 additions & 0 deletions fiddle.manifest
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,8 @@
    name: Horizontal line with words in the middle CSS
    description: Horizontal line with words in the middle CSS
    authors:
    - Ali Asadi
    normalize_css: no
    wrap: b
    panel_js: 1
    panel_css: 1
  3. aliasadidev revised this gist Jun 24, 2020. 1 changed file with 46 additions and 0 deletions.
    46 changes: 46 additions & 0 deletions fiddle.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,46 @@
    .left-line {
    float: left;
    color: black;
    background: white;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    min-width: 8%;
    flex: 1;
    }

    .right-line {
    color: black;
    background: white;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    min-width: 8%;
    flex: 1;
    }

    hr {
    display: inline-block;
    width: 100%;
    }

    .middle {
    display: block;
    background: #FFEB3B;
    color: #212529;
    font-family: Tahoma, sans-serif;
    direction: rtl;
    text-align: center;
    padding: 10px 10px;
    border-radius: 20px;
    min-width: 180px;
    width: fit-content;
    }

    .spliter {
    display: flex;
    }

    span {
    font-size: 14px;
    }
  4. aliasadidev revised this gist Jun 24, 2020. 2 changed files with 23 additions and 73 deletions.
    23 changes: 23 additions & 0 deletions fiddle.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,23 @@
    <div class="spliter">
    <span class="left-line">
    <hr>
    </span>
    <span class="middle">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium accusamus impedit omnis. Expedita iure voluptatum ut, maxime veritatis est architecto tempora animi similique. Harum perferendis suscipit tempora sint, hic inventore!
    </span>
    <span class="right-line">
    <hr>
    </span>
    </div>

    <div class="spliter">
    <span class="left-line">
    <hr>
    </span>
    <span class="middle">
    Lorem ipsum dolor sit amet consectetur adipisicing elit.
    </span>
    <span class="right-line">
    <hr>
    </span>
    </div>
    73 changes: 0 additions & 73 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,73 +0,0 @@
    <!DOCTYPE html>
    <html lang="en">

    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    .left-line {
    float: left;
    color: black;
    background: white;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    min-width: 8%;
    flex: 1;
    }

    .right-line {
    color: black;
    background: white;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    min-width: 8%;
    flex: 1;
    }

    hr {
    display: inline-block;
    width: 100%;
    }

    .middle {
    display: block;
    background: #FFEB3B;
    color: #212529;
    font-family: Tahoma, sans-serif;
    direction: rtl;
    text-align: center;
    padding: 10px 10px;
    border-radius: 20px;
    min-width: 180px;
    width: fit-content;
    }

    .spliter {
    display: flex;
    }

    span {
    font-size: 14px;
    }
    </style>
    </head>

    <body>
    <div class="spliter">
    <span class="left-line">
    <hr>
    </span>
    <span class="middle">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium accusamus impedit omnis. Expedita iure voluptatum ut, maxime veritatis est architecto tempora animi similique. Harum perferendis suscipit tempora sint, hic inventore!
    </span>
    <span class="right-line">
    <hr>
    </span>
    </div>

    </body>

    </html>
  5. aliasadidev renamed this gist Jun 24, 2020. 1 changed file with 0 additions and 0 deletions.
    0 gistfile1.txt → index.html
    View file
    File renamed without changes.
  6. aliasadidev created this gist Jun 24, 2020.
    73 changes: 73 additions & 0 deletions gistfile1.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,73 @@
    <!DOCTYPE html>
    <html lang="en">

    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    .left-line {
    float: left;
    color: black;
    background: white;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    min-width: 8%;
    flex: 1;
    }

    .right-line {
    color: black;
    background: white;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    min-width: 8%;
    flex: 1;
    }

    hr {
    display: inline-block;
    width: 100%;
    }

    .middle {
    display: block;
    background: #FFEB3B;
    color: #212529;
    font-family: Tahoma, sans-serif;
    direction: rtl;
    text-align: center;
    padding: 10px 10px;
    border-radius: 20px;
    min-width: 180px;
    width: fit-content;
    }

    .spliter {
    display: flex;
    }

    span {
    font-size: 14px;
    }
    </style>
    </head>

    <body>
    <div class="spliter">
    <span class="left-line">
    <hr>
    </span>
    <span class="middle">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium accusamus impedit omnis. Expedita iure voluptatum ut, maxime veritatis est architecto tempora animi similique. Harum perferendis suscipit tempora sint, hic inventore!
    </span>
    <span class="right-line">
    <hr>
    </span>
    </div>

    </body>

    </html>