Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

HTML

            
              Some lines next to the titles
==============

I am a title with lines at each side
--------------------
<div class="floatLeft">just floatin'...</div>

**This is an attempt to make titles with lines. The challenge here is to _not_ put extra DOM element. To keep the markup dry, I use Markdown.**
I'd just put some div to make the page a little bit less boring !

I have only one line on the right
----------------------
Σεα σεμπερ ιυδισαβιτ νο, ραθιονιβυς περσεκυερις ιντελλεγεβαθ περ θε. Λυδυς απειριαν ινδοστυμ εως ει. Περ πυθενθ σεμπερ φολυπθυα εξ. Σωνσυλ σονσεκυυντυρ νεσεσιταθιβυς ιν μει. Κυι πορρω σαυσαε ατ. Ευ μινιμυμ ερροριβυς κυο, αδ ιλλυδ ωφφενδιθ φελ.

Mine is on the left
-------------------------------
बनाति बहतर आंतरजाल भेदनक्षमता रहारुप समस्याओ स्वतंत्र जानते कीसे सुना वर्णन प्रमान कार्यलय व्रुद्धि करता। मेंभटृ करेसाथ आवश्यकत नीचे गटकउसि केन्द्रिय जिसे पहोच। होगा निरपेक्ष कार्यसिधान्तो हिंदी संसाध विनिमय स्वतंत्र स्वतंत्रता उशकी मजबुत परस्पर प्रौध्योगिकी समूह अधिकार करके(विशेष हिंदी जिसे प्रेरना आंतरजाल बाधा करता। उदेश हमारि वर्तमान आंतरजाल पुष्टिकर्ता गुजरना कार्यसिधान्तो प्रति उशकी


<hr />

<div class="floatRight tall">just floatin'...</div>
But we can still style the elements
=========================
Let's put a width rule on me !
--------------------
緷 犿玒 櫞氌瀙 郙鬯偟 騩鰒 觢 嫀嵥嵧 忣抏旲 鑴鱱爧, 緅 箷箯緷 耏胠臿 忷扴汥 獝瘝 稯 鳼鳹 嗢嗂塝 慖摲摓, 鳱 潿熥獘 獿譿躐 賕踃 蜙 簻臗藱 蒰裧頖 澉澂 磑 梪涫 婰婜孲 爂犤繵

Me too !
----------------------
槯秺びゃㄨ稞 䥦勯ちゃ妥ち ぬ覜驩 飌蟦 ノよ 妥ち餥 ウァぶヘ橎にゃ キつ䧟ぴゅゝ きゅ樃きゃり雦 갤䣵奥しょく 饥苯が 滥坩, 礨愥䝣杧ゑ ピョ椧ぺ㣌黨 奯䰦 橯土ぽ きゅ樃きゃり雦 䤩横みょ騟觊 骤簣雤娪び じょ饪嶣 じょ饪, リュにびゅ䧨㫤 择にゅ秤し饦 りょ埥嫣ほ褎 焩谦 誣鏨奯, 壃㛤 壃㛤秞 エ馺堥きょ饟 え駧わ背ちゅ ホ焧䣃ヴィェ簨

To be or not to be...
-------------------------------
في جُل شرسة الشمال الثانية, إذ بمباركة الموسوعة لمّ, حدى تاريخ والنازي للأراضي تم. حين وبعض الإثنان التاريخ، أم, إذ للألمان إستراتيجية جوي. إذ الحكم الشهير كلّ, فهرست السيطرة العسكرية بين بل. جورج وصافرات والمعدات أم بها. و مليارات المانيا أوكيناوا حرب.

Hover me !!
--------------------
אחרים הראשי זכויות או לוח, מלא על עזרה שאלות נבחרים. פנאי בדפים על אחר, רבה חשמל נוסחאות מה. צ'ט או נפלו כימיה מושגי, לחבר מוסיקה עוד מה, על כלל ערכים עקרונות. ומהימנה העריכהגירסאות מה רבה, גם תורת מושגי קרן. או והוא כניסה בעברית אנא, לציין באגים המקושרים תנך של. ברוכים פסיכולוגיה בדף על, או ביולי לימודים זאת, שער בה ממונרכיה טכנולוגיה ואלקטרוניקה.

            
          
!

CSS

            
              /* Decoration */
$bgcolor: #F6F0EE;
$bg1: transparentize(#999, 1);
$bg2: transparentize(#999, 0.95);

//$bg-opacity: .05;

//

$bg-opacity: 0 !default;

body {
  font: 15px/1.3 Monaco, MonoSpace;

  background-image: linear-gradient(
    45deg, $bg1 25%, $bg2 25%, $bg2 50%, $bg1 50%, $bg1 75%, $bg2 75%
  );
  background-size: 5vw 5vw;
  background-color: $bgcolor;
  background-attachment: fixed;
  padding: 1em;  
}

h1 { background-color: rgba(191,191,0,$bg-opacity*2); text-align: center; margin-top: 0em; margin-bottom: 1.5em;}

h2 { background-color: rgba(127,0,0,$bg-opacity); }
p {  background-color: rgba(0,0,127,$bg-opacity); text-indent: 1em; text-align: justify; display: block;}

hr {
  border: none;
  height: 3em;
  display: block;
  
}

.floatLeft { float: left; margin: 0 1em 1em 0; }
.floatRight { float: right; margin: 0 0 1em 1em; }
.floatLeft, .floatRight {background-color: rgba(0,127,0,$bg-opacity); display: inline-block; width: 10em; height: 10em; border: .15em solid black; text-align: center; font-weight: bold; }
.tall {height: 25em;}


/* Main Feature */
@mixin linesOnSides ( $sides: both, $thickness: 0.1em, $color: black, $inner-padding: 1em ){
  // "display: block" behavior : 
  display: table; width: auto;
  // avoiding the title to wrap;
  white-space: nowrap;


  // The lines :
  $pseudo-list: null;
  @if($sides == left or $sides == both ){
    $pseudo-list: append($pseudo-list, unquote("&:before"), comma);
  }
  @if($sides == right or $sides == both ){
    $pseudo-list: append($pseudo-list, unquote("&:after"), comma);
  }

  #{$pseudo-list} {
    // here a NonBreakableSPace.
    content: " ";
    
    // the width of cells of a row is not greater than row:
    display: table-cell;
    @if( $sides == both ){
    width: 50%;
    }@else{
    width: 100%;      
    }
    
    // drawing lines :
    background-image: linear-gradient($color, $color);
    background-size: 100% $thickness;
    background-repeat: no-repeat;
    background-position: center;
    
    box-sizing: border-box;
  }


  @if($sides == left or $sides == both ){
    &:before { border-right: $inner-padding transparent solid; }
  }
  @if($sides == right or $sides == both ){
    &:after {  border-left: $inner-padding transparent solid; }
  }

}



// Usage
h2:nth-of-type(3n + 1){ @include linesOnSides( both, 0.1em, black ); }
h2:nth-of-type(3n + 2){ @include linesOnSides( right, 0.1em, black ); }
h2:nth-of-type(3n + 3){ @include linesOnSides( left, 0.1em, black ); }

h2:nth-of-type(4){ width: 75%; }

h2:nth-of-type(5){ width: 50%; margin-left: auto; }

h2:nth-of-type(6){ width: 50%; margin-left: auto; margin-right: auto; }

h2:nth-of-type(7){
  text-decoration: underline;
  width: 0.01%; margin-left: auto; margin-right: auto;
  transition: width 500ms ease-in-ouy;
  &:hover{ width: 100%;}
}

h2:nth-of-type(7){
  text-decoration: underline;
  width: 0.01%; margin-left: auto; margin-right: auto;
  transition: width 500ms ease-in-out;
  &:hover{ width: 100%;}
}


.afterline {
  @include linesOnSides( right, 0.1em, white );
}

            
          
!

JS

            
              
            
          
!
999px

Console