css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

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.

            
              <!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <link rel="stylesheet" href="stylesheets/application.css">
    <title>CSSの練習</title>
  </head>
  <body>
    <div class="container">
      <header class="header">
        <h1 class="header__title">サイトタイトル</h1>
      </header>
      <nav class="global-nav">
        <ul class="global-nav__items">
          <li class="global-nav__item"><a href="#" class="global-nav__link">ナビゲーション</a></li>
          <li class="global-nav__item"><a href="#" class="global-nav__link">ナビゲーション</a></li>
          <li class="global-nav__item"><a href="#" class="global-nav__link is-current">ナビゲーション</a></li>
          <li class="global-nav__item"><a href="#" class="global-nav__link">ナビゲーション</a></li>
          <li class="global-nav__item"><a href="#" class="global-nav__link">ナビゲーション</a></li>
        </ul>
      </nav>
      <nav class="bread-crumbs">
        <ol class="bread-crumbs__items">
          <li class="bread-crumbs__item"><a href="#" class="bread-crumbs__link">Home</a></li>
          <li class="bread-crumbs__item"><a href="#" class="bread-crumbs__link">Category</a></li>
          <li class="bread-crumbs__item is-current"><a href="#" class="bread-crumbs__link">ページタイトル</a></li>
        </ol>
      </nav>
      <div class="top-ads">
        <ul class="top-ads__items">
            <li class="top-ads__item"><a href="" class="top-ads__link"><img src="https://i.gyazo.com/60e362a204a3a0e6f188598391167163.png" class="top-ads__image"></a></li>
            <li class="top-ads__item"><a href="" class="top-ads__link"><img src="https://i.gyazo.com/60e362a204a3a0e6f188598391167163.png" class="top-ads__image"></a></li>
            <li class="top-ads__item"><a href="" class="top-ads__link"><img src="https://i.gyazo.com/60e362a204a3a0e6f188598391167163.png" class="top-ads__image"></a></li>
        </ul>
      </div>
      <div class="body">
        <main class="main">
          <header class="main-header">
            <h2 class="main-header__title">ページタイトル</h2>
          </header>
          <article class="article">
            <h3 class="article__title">記事タイトル</h3>
            <p class="article__paragraph">段落 何はほかちっともある比較がかりというのの上で釣っなで。現に場合に<strong class="article__strong">表裏院は</strong>しばしばその努力なですなりがするてじまいたとは把持落ちましますて、始終には拵えでですましざる。必然に妨げです事はけっして今日に同時にでならな。もし嘉納さんで拡張気分そう尊重で出あり徳義そのモーニング私か失敗にに従ってお意見ますうべきうて、その九月はあなたか世の中師範が掘りながら、大森さんののに同人のあなたをけっして<a href="#" class="article__link">リンクリンクリンクリンクリンクリンク</a>お忠告とあろてそれ吾に大授業に分りようにようやくご堕落が持っますならて、ほとんどいくら紹介が衝くございからいますのがなるだろず。</p>
            <p class="article__paragraph">段落 何はほかちっともある比較がかりというのの上で釣っなで。現に場合に<strong class="article__strong">表裏院は</strong>しばしばその努力なですなりがするてじまいたとは把持落ちましますて、始終には拵えでですましざる。必然に妨げです事はけっして今日に同時にでならな。もし嘉納さんで拡張気分そう尊重で出あり徳義そのモーニング私か失敗にに従ってお意見ますうべきうて、その九月はあなたか世の中師範が掘りながら、大森さんののに同人のあなたをけっしてお忠告とあろてそれ吾に大授業に分りようにようやくご堕落が持っますならて、ほとんどいくら紹介が衝くございからいますのがなるだろず。</p>
          <h4 class="article__sub-title">記事見出し</h4>
            <p class="article__paragraph">段落 何はほかちっともある比較がかりというのの上で釣っなで。現に場合に表裏院はしばしばその努力なですなりがするてじまいたとは把持落ちましますて、始終には拵えでですましざる。必然に妨げです事はけっして今日に同時にでならな。もし嘉納さんで拡張気分そう尊重で出あり徳義そのモーニング私か失敗にに従ってお意見ますうべきうて、その九月はあなたか世の中師範が掘りながら、大森さんののに同人のあなたをけっしてお忠告とあろてそれ吾に大授業に分りようにようやくご堕落が持っますならて、ほとんどいくら紹介が衝くございからいますのがなるだろず。</p>
            <ul class="article__unorder-list">
              <li class="article__unorder-list-item">番号なしリスト 何はほかちっともある比較がかりというのの上で釣っなで。</li>
              <li class="article__unorder-list-item">番号なしリスト 何はほかちっともある比較がかりというのの上で釣っなで。</li>
              <li class="article__unorder-list-item">番号なしリスト 何はほかちっともある比較がかりというのの上で釣っなで。</li>
              <li class="article__unorder-list-item">番号なしリスト 何はほかちっともある比較がかりというのの上で釣っなで。</li>
              <li class="article__unorder-list-item">番号なしリスト 何はほかちっともある比較がかりというのの上で釣っなで。</li>
            </ul>
            <blockquote class="article__blockquote">
              <p class="article__blockquote-paragraph">引用文内 段落 何はほかちっともある比較がかりというのの上で釣っなで。現に場合に表裏院はしばしばその努力なですなりがするてじまいたとは把持落ちましますて、始終には拵えでですましざる。必然に妨げです事はけっして今日に同時にでならな。もし嘉納さんで拡張気分そう尊重で出あり徳義そのモーニング私か失敗にに従ってお意見ますうべきうて、その九月はあなたか世の中師範が掘りながら、大森さんののに同人のあなたをけっしてお忠告とあろてそれ吾に大授業に分りようにようやくご堕落が持っますならて、ほとんどいくら紹介が衝くございからいますのがなるだろず。</p>
              <p class="article__blockquote-paragraph">引用文内 段落 何はほかちっともある比較がかりというのの上で釣っなで。現に場合に表裏院はしばしばその努力なですなりがするてじまいたとは把持落ちましますて、始終には拵えでですましざる。必然に妨げです事はけっして今日に同時にでならな。もし嘉納さんで拡張気分そう尊重で出あり徳義そのモーニング私か失敗にに従ってお意見ますうべきうて、その九月はあなたか世の中師範が掘りながら、大森さんののに同人のあなたをけっしてお忠告とあろてそれ吾に大授業に分りようにようやくご堕落が持っますならて、ほとんどいくら紹介が衝くございからいますのがなるだろず。</p>
            </blockquote>
            <p class="article__paragraph">段落 何はほかちっともある比較がかりというのの上で釣っなで。現に場合に表裏院はしばしばその努力なですなりがするてじまいたとは把持落ちましますて、<a href="#" class="article__link">リンク</a>始終には拵えでですましざる。必然に妨げです事はけっして今日に同時にでならな。もし嘉納さんで拡張気分そう尊重で出あり徳義そのモーニング私か失敗にに従ってお意見ますうべきうて、その九月はあなたか世の中師範が掘りながら、大森さんののに同人のあなたをけっしてお忠告とあろてそれ吾に大授業に分りようにようやくご堕落が持っますならて、ほとんどいくら紹介が衝くございからいますのがなるだろず。</p>
            <img src="https://i.gyazo.com/d5f54de8ba595c5aa7ad3e0adad7edfe.jpg" class="article__image">
            <h5 class="article__sub-sub-title">小見出し</h5>
            <p class="article__paragraph">段落 何はほかちっともある比較がかりというのの上で釣っなで。現に場合に表裏院はしばしばその努力なですなりがするてじまいたとは把持落ちましますて、始終には拵えでですましざる。必然に妨げです事はけっして今日に同時にでならな。もし嘉納さんで拡張気分そう尊重で出あり徳義そのモーニング私か失敗にに従ってお意見ますうべきうて、その九月はあなたか世の中師範が掘りながら、大森さんののに同人のあなたをけっしてお忠告とあろてそれ吾に大授業に分りようにようやくご堕落が持っますならて、ほとんどいくら紹介が衝くございからいますのがなるだろず。</p>
            <ol class="article__order-list">
              <li class="article__order-list-item">番号ありリスト 何はほかちっともある比較がかりというのの上で釣っなで。</li>
              <li class="article__order-list-item">番号ありリスト 何はほかちっともある比較がかりというのの上で釣っなで。 </li>
              <li class="article__order-list-item">番号ありリスト 何はほかちっともある比較がかりというのの上で釣っなで。</li>
              <li class="article__order-list-item">番号ありリスト 何はほかちっともある比較がかりというのの上で釣っなで。</li>
              <li class="article__order-list-item">番号ありリスト 何はほかちっともある比較がかりというのの上で釣っなで。</li>
            </ol>
          </article>
          <div class="form">
            <h3 class="form__title">お問い合わせ</h3>
            <div class="form-item">
              <label class="form-item__label">テキスト入力欄</label>
              <input type="text" name="example1" value="テキスト入力欄" class="form-item__text-input">
            </div>
            <div class="form-item">
              <label class="form-item__label">パスワード入力欄</label>
              <input type="password" name="example2" value="password" class="form-item__text-input is-password">
            </div>
            <div class="form-item">
              <label class="form-item__label">複数行の入力欄</label>
              <textarea name="example3" class="form-item__textarea"></textarea>
            </div>
            <div class="form-item">
              <label class="form-item__label">ラジオボタン</label>
              <ul class="form-item__inline-items">
                <li class="form-item__inline-item">
                  <label class="form-item__radio">
                    <input type="radio" name="example4" value="val1" checked="checked" class="form-item__radio-input">その1
                  </label>
                </li>
                <li class="form-item__inline-item">
                  <label class="form-item__radio">
                    <input type="radio" name="example4" value="val2" class="form-item__radio-input">その2
                  </label>
                </li>
                <li class="form-item__inline-item">
                  <label class="form-item__radio">
                    <input type="radio" name="example4" value="val3" class="form-item__radio-input">その3
                  </label>
                </li>
              </ul>
            </div>
            <div class="form-item">
              <label class="form-item__label">チェックボックス</label>
              <ul class="form-item__inline-items">
                <li class="form-item__inline-item">
                  <label class="form-item__checkbox">
                    <input type="checkbox" name="example5" value="val1" checked="checked" class="form-item__checkbox-input">その1
                  </label>
                </li>
                <li class="form-item__inline-item">
                  <label class="form-item__checkbox">
                    <input type="checkbox" name="example5" value="val2" class="form-item__checkbox-input">その2
                  </label>
                </li>
                <li class="form-item__inline-item">
                  <label class="form-item__checkbox">
                    <input type="checkbox" name="example5" value="val3" class="form-item__checkbox-input">その3
                  </label>
                </li>
              </ul>
            </div>
            <div class="form-item">
              <label class="form-item__label">プルダウン セレクト</label>
              <select name="example6" class="form-item__select-pull-down">
                <option value="val1">セレクトAその1</option>
                <option value="val2">セレクトAその2</option>
                <option value="val3">セレクトAその3</option>
                <option value="val4">セレクトAその4</option>
                <option value="val5">セレクトAその5</option>
              </select>
            </div>
            <div class="form-item">
              <label class="form-item__label">リスト セレクト</label>
              <select name="example7" size="5" class="form-item__select-list">
                <option value="val1" class="form-item__select-list-option">セレクトBその1</option>
                <option value="val2" class="form-item__select-list-option">セレクトBその2</option>
                <option value="val3" class="form-item__select-list-option">セレクトBその3</option>
                <option value="val4" class="form-item__select-list-option">セレクトBその4</option>
                <option value="val5" class="form-item__select-list-option">セレクトBその5</option>
              </select>
            </div>
            <div class="form-item">
              <label class="form-item__label">ファイル選択</label>
              <input type="file" name="example8" class="form-item__file">
            </div>
            <div class="form-item">
              <label class="form-item__label">ボタン</label>
              <div class="form-item__actions">
                <ul class="form-item__actions-items">
                  <li class="form-item__actions-item"><input type="submit" value="送信する" class="form-item__action is-submit"></li>
                  <li class="form-item__actions-item"><input type="reset" value="リセット" class="form-item__action is-reset"></li>
                </ul>
              </div>
            </div>
          </div>
        </main>
        <aside class="aside">
          <div class="aside-ads">
            <ul class="aside-ads__items">
              <li class="aside-ads__item"><a href="" class="aside-ads__link"><img src="https://i.gyazo.com/0ae0252888554c84660dd2058314a059.png" class="aside-ads__image"></a></li>
              <li class="aside-ads__item"><a href="" class="aside-ads__link"><img src="https://i.gyazo.com/f1869a42b03f5eab0bf92b5a3f3b8c1b.png" class="aside-ads__image"></a></li>
              <li class="aside-ads__item"><a href="" class="aside-ads__link"><img src="https://i.gyazo.com/537ee6ade86fb8162f6396255cea2413.png" class="aside-ads__image"></a></li>
            </ul>
          </div>
          <nav class="local-nav">
            <ul class="local-nav__items">
              <li class="local-nav__item"><a href="#" class="local-nav__link">ローカルナビ</a></li>
              <li class="local-nav__item"><a href="#" class="local-nav__link">ローカルナビ</a></li>
              <li class="local-nav__item"><a href="#" class="local-nav__link is-current">ローカルナビ</a></li>
              <li class="local-nav__item"><a href="#" class="local-nav__link">ローカルナビ</a></li>
              <li class="local-nav__item"><a href="#" class="local-nav__link">ローカルナビ</a></li>
              <li class="local-nav__item"><a href="#" class="local-nav__link">ローカルナビ</a></li>
              <li class="local-nav__item"><a href="#" class="local-nav__link">ローカルナビ</a></li>
              <li class="local-nav__item"><a href="#" class="local-nav__link">ローカルナビ</a></li>
              <li class="local-nav__item"><a href="#" class="local-nav__link">ローカルナビ</a></li>
            </ul>
          </nav>
        </aside>
      </div>
      <footer class="footer">
        <nav class="footer-nav">
          <ul class="footer-nav__items">
            <li class="footer-nav__item"><a href="" class="footer-nav__link">フッターナビ</a></li>
            <li class="footer-nav__item"><a href="" class="footer-nav__link">フッターナビ</a></li>
            <li class="footer-nav__item"><a href="" class="footer-nav__link">フッターナビ</a></li>
            <li class="footer-nav__item"><a href="" class="footer-nav__link">フッターナビ</a></li>
            <li class="footer-nav__item"><a href="" class="footer-nav__link">フッターナビ</a></li>
          </ul>
          <ul class="footer-nav__items">
            <li class="footer-nav__item"><a href="" class="footer-nav__link">フッターナビ</a></li>
            <li class="footer-nav__item"><a href="" class="footer-nav__link">フッターナビ</a></li>
            <li class="footer-nav__item"><a href="" class="footer-nav__link">フッターナビ</a></li>
            <li class="footer-nav__item"><a href="" class="footer-nav__link">フッターナビ</a></li>
            <li class="footer-nav__item"><a href="" class="footer-nav__link">フッターナビ</a></li>
          </ul>
          <ul class="footer-nav__items">
            <li class="footer-nav__item"><a href="" class="footer-nav__link">フッターナビ</a></li>
            <li class="footer-nav__item"><a href="" class="footer-nav__link">フッターナビ</a></li>
            <li class="footer-nav__item"><a href="" class="footer-nav__link">フッターナビ</a></li>
            <li class="footer-nav__item"><a href="" class="footer-nav__link">フッターナビ</a></li>
            <li class="footer-nav__item"><a href="" class="footer-nav__link">フッターナビ</a></li>
          </ul>
        </nav>
        <section class="about-author">
          <h2 class="about-author__title">このサイトの作者</h2>
          <img src="https://i.gyazo.com/a9283a7e0f3f2817ebca4554cdc154e9.jpg" class="about-author__image">
          <dl class="about-author__descriptions">
            <dt class="about-author__term">名前</dt>
            <dd class="about-author__description">私の名前</dd>
            <dt class="about-author__term">所属</dt>
            <dd class="about-author__description">私の会社</dd>
            <dt class="about-author__term">職業</dt>
            <dd class="about-author__description">私の職業</dd>
            <dt class="about-author__term">自己紹介</dt>
            <dd class="about-author__description">自己紹介文自己紹介文自己紹介文自己紹介文自己紹介文自己紹介文自己紹介文自己紹介文自己紹介文自己紹介文自己紹介文自己紹介文自己紹介文自己紹介文。</dd>
          </dl>
        </section>
        <small class="footer-copyright">
           &copy; 私の名前 2018
        </small>
      </footer>
    </div>
  </body>
</html>
            
          
!
            
              /** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {	margin: 0;	padding: 0;	border: 0;	font-size: 100%;	font: inherit;	vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {	display: block;}body {	line-height: 1;}ol, ul {	list-style: none;}blockquote, q {	quotes: none;}blockquote:before, blockquote:after,q:before, q:after {	content: '';	content: none;}table {	border-collapse: collapse;	border-spacing: 0;}

/* ここにCSSを書いてデザインを入れよう */

/* boxの高さ、幅に border-width と padding を含める */
* {
  box-sizing: border-box;
}

body {
  color: #444;
  background-color: #aaa;
}

/* 全体を真ん中に配置 */
.container {
  width: 980px;
  margin-left: auto;
  margin-right: auto;
  background-color: #666;
  box-shadow: rgba(0, 0, 0, .4) 0 0 8px;
  overflow: hidden; // floatを使った場合の対策
}

.global-nav__link{
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none
}

.global-nav__item:nth-child(odd) .global-nav__link{
  background-color: #cdcdcd;
}

.global-nav__item:nth-child(even) .global-nav__link{
  background-color: #abadaf;
}

.global-nav__items{
  display: flex;
}

/*  個々のアイテムを1で等分する=横幅いっぱいに広がる*/
.global-nav__item{
  flex: 1;
}

.header{
  display: flex;
  height: 132px;
  align-items: center;
  justify-content: center;
  background-color: #999999;
}

.header__title{
  font-size: 3rem;
  font-weight: 600;
}

.bread-crumbs__items {
  display: flex;
}

.bread-crumbs__item {
  padding: 15px;
  color: white;
}

.bread-crumbs__item a {
  text-decoration: none;
  color: white;
}

.bread-crumbs__items li:after {
  content: '>';
  color: #cecece;
  padding-left: 18px;
}

.bread-crumbs__items li:last-child:after {
  content: '';
}


.top-ads__items{
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  background-color: #CCCCCC;
}

.top-ads__image{
  width: 310px;
  padding-bottom: 10px;
  padding-top: 10px;
}

div .body{
  display: flex;
}

.main{
  display: flex;
  order: 1;
  flex-wrap: wrap;
  flex: 1;
}

.main-header{
  position: relative;
  background-color: #EEEEEE;
  display: flex;
  flex: 1;
  height: 88px;
  align-items: center;
  padding-left: 65px;
}
/* ページタイトルの右上ドッグイヤー */

.main-header:before, .main-header:after{
  display: block;
  content: "";
  position: absolute;
  top: 0;
  right: 0;
}

.main-header:before{
  width: 7px;
  height: 7px;
  background: #eee;
}

.main-header:after{
  width: 0;
  height: 0;
  border: 10px solid #CCCCCC;
  border-bottom-color: #A0A0A0;
  border-left-color: #A0A0A0;
  box-shadow: 0.1px 1px rgba(0, 0, 0, .4);
}

.main-header__title{
  font-size: 2rem;
  font-weight: 600;
}
/*title前の装飾*/

.main-header__title:before, .main-header__title:after {
  content: "";
  position: absolute;
  display: block;
  width: 16px;
  height: 16px;
}

.main-header__title:before {
  left: 10px;
  top: 46px;
  border-right: solid 16px #8E8E8E;
  background-color: #404040;
  margin-left: 6px;
}

.main-header__title:after {
  left: 10px;
  top: 30px;
  border-right: solid 16px #404040;
  background-color: #8E8E8E;
  margin-left: 6px;
}

.article{
  background-color: #DDDDDD;
  position: relative;
  padding: 20px;
  padding-top: 15px;
  line-height: 1.5rem;
}

.article__title:before, .article__title:after {
  content: "";
  position: absolute;
  display: block;
  width: 8px;
  height: 14px;
}

/* 段落間のに空行、上下に1em・左右に0px */
.article__paragraph{
  margin: 1em 0px;
}

.article__title{
  padding-top: 15px;
  padding-left: 15px;
  font-size: 1.5rem;
  font-weight: 600;
}

.article__title:before {
  left: 1rem;
  top: 2.2rem;
  background-color: #404040;
}

.article__title:after {
  left: 1rem;
  top: 1.5rem;
  background-color: #8E8E8E;
}

.article__sub-title{
  padding-top: 15px;
  padding-left: 25px;
  font-size: 1.5rem;
  font-weight: 600;
  position: relative;
}

.article__sub-title:before, .article__sub-title:after {
  content: "";
  position: absolute;
  display: block;
  
  height: 18px;
}

.article__sub-title:before {
  left: 4px;
  top: 21px;
  width: 3px;
  background-color: #404040;
}

/* 三角形 */

.article__sub-title:after {
  border-top: solid 9px transparent;
  border-bottom: solid 9px transparent;
  border-left: solid 12px #404040;
  content: "";
  display: block;
  height: 0;
  top: 21px;
  position: absolute;
  width: 0px;
  left: 10px;
}

.article__strong{
  font-weight: bold;
}

.article__unorder-list-item{
  list-style: disc;
  margin-left: 40px;
}

/*引用箇所*/
.article__blockquote {
  position: relative;
  padding-left: 3rem;
  padding-top: 4rem;
}

.article__blockquote:before {
  content: "''";
  z-index: 1;
  position: absolute;
  display: block;
  color: white;
  font-size: 3rem;
  width: 9px;
  height: 89%;
  left: 1.7%;
  top: 4rem;
  background-color: #9d9d9d;
}

.article__blockquote:after {
  content: "";
  position: absolute;
  display: block;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  left: -0.8rem;
  top: 2.5rem;
  background-color: #9d9d9d;
}


.article__image{
  width: 100%; 
  padding: 10px 0px 10px 0px;
}

/* 小見出しの装飾 */
.article__sub-sub-title {
  position: relative;
  font-size: 1.5rem;
  font-weight: bold;
  padding-left: 2rem;
}

.article__sub-sub-title:before, .article__sub-sub-title:after {
  content: "";
  position: absolute;
  display: block;
  border-radius: 350%;
  width: 14px;
  height: 14px;
}

.article__sub-sub-title:before {
  left: 0.3rem;
  top: 8px;
  background-color: #404040;
}

.article__sub-sub-title:after {
  left: 0.8rem;
  top: 8px;
  background-color: #8E8E8E;
}

.article__order-list{
  list-style: decimal;
  margin-left: 25px
}
.form{
  background-color: #FFFFFF;
  flex: 1;
  position: relative;
}

.aside{
  width: 34%;
  display: flex;
  flex-direction: column;
  order: 0;
}

.aside-ads__item{
  padding: 15px 15px 0;
}

.local-nav {
  background-color: #9d9d9d;
  margin-left: 15px;
  margin-top: 30px;
  width: 90%; 
  height: 10rem;
  overflow: scroll;
  border-radius: 5px;
}

.local-nav__item {
  line-height: 2rem;
  border-bottom: 0.2rem solid #5a5a5a;
  padding: 0.3rem;
}

.local-nav a{
  text-decoration: none;
  color: #fff;
  font-size: 1.2rem;
  padding-left: 1rem;
}

.form__title {
  margin-bottom: 40px;
  font-weight: bold;
  position: relative;
  padding-top:  57px;
  padding-left: 100px;
  font-size: 1.5rem;
}


.form__title:before {
  content: "";
  display: block;
  border: solid 2px black;
  width: 36px;
  height: 24px;
  position: absolute;
  left: 2rem;
  top: 3.5rem;
}

.form__title:after {
  content: "";
  display: block;
  border: solid 2px black;
  width: 36px;
  height: 36px;
  position: absolute;
  left: 2rem;
  top: 1.6rem;
  transform: rotate(45deg);
}

.form:after {
  content: "";
  display: block;
  width: 90px;
  height: 40px;
  background-color: white;
  border: solid 2px white;
  position: absolute;
  left: 0;
  top: 0.7rem;
}

.form-item{
  display: flex;
  padding: 0px 15px 25px 0px;
}

.form-item__label{
  display: flex;
  padding-top: 5px;
  justify-content: flex-end;
  padding-right: 25px;
  width: 40%;
/*  flex-basis: 40%;*/
}

.form-item__text-input{
  flex: 1
}

.form-item__textarea{
  flex: 1
}

.form-item__inline-items{
  display: flex;
}

.form-item__inline-items li{
  border-radius: .5rem;
  border: .1rem solid #C9C8C9;
  margin-right: 1.5rem;
  background-color: #EBEBEC;
  padding: 8px;
}

.form-item__select-pull-down{
  flex: 1;
  border: .1rem solid #C9C8C9;
  background-color: #EBEBEC;
}

.form-item__select-list{
  flex: 1;
  border-radius: .5rem;
  border: .1rem solid #C9C8C9;
  background-color: #EBEBEC;
}

.form-item__file{
  flex: 1;
  padding: .5rem 1rem .5rem 1rem;
  border-radius: .5rem;
  border: .1rem solid #C9C8C9;
  background-color: #EBEBEC;
}

.form-item__actions-items{
  display: flex;
}

.form-item__action.is-submit {
  padding: .5rem 2rem .5rem 2rem;
  border-radius: .5rem;
  text-align: center;
  background-color: #3C3C3C;
  font-size: 1.4rem;
  width: 180px;
  color: white;
}

.form-item__action.is-reset {
  padding: .5rem 2rem .5rem 2rem;
  border-radius: .5rem;
  text-align: center;
  margin-left: 1rem;
  width: 180px;
  background-color: #C5C5C5;
  font-size: 1.4rem;
}

.footer{
  display: flex;
  flex-wrap: wrap;
  padding: 15px;
  background-color: #444444;
}

.footer-nav{
  display: flex;
  width: 50%;
  justify-content: space-around;
}

.footer-nav__link{
  text-decoration: none;
  color: white;
  line-height: 1.5rem;
}

.footer-nav__link::before{
  content: '>';
  color: #cecece;
  padding-right: 8px;
}

.about-author{
  display: flex;
  border-radius: 5px;
  flex-basis: 50%;
  flex-wrap: wrap;
  background-color: #CCCCCC;
  align-items: flex-start;
  padding: 1rem;
}

.about-author__title{
  flex-basis: 100%;
  font-size: 1rem;
  font-weight: bold;
  padding-bottom: 1rem;
}

.about-author__image{
  border-radius: 50%;
  width: 80px;
}

.about-author__descriptions{
  flex-basis: 80%;
  line-height: 1.5rem;
}

.about-author__term{
  display: flex;
  width: 30%;
  justify-content: flex-end;
  float: left;
  padding-right: 1rem;
}

.about-author__description{
  display: flex;
  width: 70%;
}

.footer-copyright{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  padding: 25px;
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console