Codepen Header

codepen-header.markdown

Codepen Header

A Pen by TinyMCE on CodePen.

License.

index.html

<header class="polygons">
  <a class="logo" href="//www.tinymce.com"></a>

  <h2>
    Full featured web editing.<br>
    <b>Featherweight</b> download.
  </h2>

  <div class="demo">
    <textarea>
      <p style="text-align: center;">
        <img src="//www.tinymce.com/images/[email protected]" alt="TinyMCE" width="110" height="97">
      </p>
      <p style="text-align: center; color: #7E7E7E; font-size: 15px; font-family: avenir; font-weight: 400;">
        TinyMCE is a platform independent web-based JavaScript HTML WYSIWYG<br>
        editor control released as open source under LGPL.
      </p>
      <p style="text-align: center; color: #868686; font-size: 15px; font-family: avenir; font-weight: 400;">
        <i>TinyMCE enables you to convert HTML textarea fields or other HTML elements to editor instances.</i>
      </p>
    </textarea>
  </div>
</header>

<section class="download-top"></section>

script.js

tinymce.init({
  selector: '.demo textarea',
  width: 754 - 2,
  height: 372 - 99,
  plugins: [
    'advlist',
    'autolink',
    'lists',
    'link',
    'image',
    'charmap',
    'print',
    'preview',
    'anchor',
    'searchreplace',
    'visualblocks',
    'code',
    'fullscreen',
    'insertdatetime',
    'media',
    'table',
    'contextmenu',
    'paste',
    'imagetools'
  ],
  toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist | link image',
  content_css: [
    '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
    '//www.tinymce.com/css/codepen.min.css'    
  ]
})

scripts

<script src="https://cloud.tinymce.com/stable/tinymce.min.js?apiKey=qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc"></script>

style.css

.profile-name {
  display: none;
}

.profile-header {
  height: 800px;
}

a.logo {
  display: inline-block;
  margin-top: -50px;
  margin-bottom: 50px;
  width: 128px;
  height: 31px;
  background-image: url("//www.tinymce.com/images/[email protected]");
  background-size: 128px 31px;
  background-repeat: no-repeat;
  background-position: 50%;
}

styles

<link href="//www.tinymce.com/css/common.min.css" rel="stylesheet" />
<link href="//www.tinymce.com/css/home.min.css" rel="stylesheet" />