cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

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.

            
              <header>
  <h1 class="title">Understanding Writing Technologies</h2>
  <div id="toc" class="row">
    <div class="container">
      <div id="toc-img" class="col-md-4">
        <img src="https://placeholdit.imgix.net/~text?txtsize=13&txt=icon&w=75&h=75" />
        <p>
          Using a Vygotskian theory and a grounded theory methodology, I explore the uses of old and new technologies of three contemporary work sites to ground claims that (a) competing visions of what technology is and what it can do are operative in contemporary workplaces, (b) multiple literacy technologies are copresent in the conduct of work, and (c) more advanced literacy technologies are not necessarily the most powerful within work cultures.
        </p>
      </div>
      
      <div id="toc-list" class="col-md-8">
        <ol>
          <li>
            <a href="#">Old &amp; New Tech</a>
          <li>
            <a href="#">Mediational Means</a>
          <li>
            <a href="#">Historical-Genetic Method</a>
          <li>
            <a href="#">A Case-Study</a>
            <ol>
              <li>
                <a href="#">Level 2</a>
              <li>
                <a href="#">Level 2</a>
            </ol>
          <li>
            <a href="#">Conclusion</a>
        </ol>
      </div>
    </div>
  </div>
</header>
<article class="container">
  <h1>Old &amp; New Tech</h1>
  <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et vestibulum lacus. Nullam ac tellus ut neque ullamcorper fringilla. Fusce pulvinar condimentum ultricies. Nullam blandit ligula nec congue congue. Sed blandit hendrerit eros, in hendrerit tellus interdum non. Praesent condimentum nunc non nisi vulputate vehicula eu non ipsum. Vivamus finibus diam id elit aliquet rutrum. Maecenas sagittis vitae metus et feugiat. Phasellus ac felis nunc. Donec risus felis, dignissim a sollicitudin et, tempus nec lorem. Nam egestas lectus eu dolor dapibus auctor.
    </p>
  <section id="1">
    <h2>Mediational Means</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et vestibulum lacus. Nullam ac tellus ut neque ullamcorper fringilla. Fusce pulvinar condimentum ultricies. Nullam blandit ligula nec congue congue. Sed blandit hendrerit eros, in hendrerit tellus interdum non. Praesent condimentum nunc non nisi vulputate vehicula eu non ipsum. Vivamus finibus diam id elit aliquet rutrum. Maecenas sagittis vitae metus et feugiat. Phasellus ac felis nunc. Donec risus felis, dignissim a sollicitudin et, tempus nec lorem. Nam egestas lectus eu dolor dapibus auctor.
    </p>
    <p>
      Integer vitae mauris ex. Donec quis nisl non libero mattis semper. Cras non ultrices dui. Sed ullamcorper urna et nulla aliquam luctus. Ut libero urna, molestie quis ultricies sit amet, sollicitudin eget diam. Donec congue sed nisl ac gravida. In viverra, justo sed congue sodales, neque elit pretium erat, in laoreet leo nunc ac nibh. Nunc consequat id tellus quis facilisis. Sed sagittis lectus in urna sodales malesuada et dictum sem. Nullam venenatis sapien sed metus faucibus, nec vehicula felis ornare. Nulla porttitor sed felis vel vulputate.
    </p>
    <p>
      Aliquam blandit placerat nulla sit amet ultricies. Integer quis libero a erat blandit maximus id eu diam. Pellentesque ut volutpat nisl. Pellentesque et libero venenatis nisi faucibus sollicitudin. Nunc fermentum lobortis lacinia. Integer non neque ut lectus egestas malesuada. Donec nibh ex, feugiat venenatis mattis eget, faucibus sed diam. Donec in nisi enim. Sed eleifend finibus risus, non consequat magna ullamcorper in. Morbi vitae facilisis lacus. Sed non convallis ligula. Curabitur et aliquam quam. Phasellus eu enim eu mi imperdiet egestas at vel dui. Curabitur condimentum nisl at vehicula sagittis. Duis varius pharetra lorem, ac tempus mi tempus at.
    </p>
  </section>
  <section id="2">
    <h2>Historical-Genetic Method</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et vestibulum lacus. Nullam ac tellus ut neque ullamcorper fringilla. Fusce pulvinar condimentum ultricies. Nullam blandit ligula nec congue congue. Sed blandit hendrerit eros, in hendrerit tellus interdum non. Praesent condimentum nunc non nisi vulputate vehicula eu non ipsum. Vivamus finibus diam id elit aliquet rutrum. Maecenas sagittis vitae metus et feugiat. Phasellus ac felis nunc. Donec risus felis, dignissim a sollicitudin et, tempus nec lorem. Nam egestas lectus eu dolor dapibus auctor.
    </p>
    <p>
      Integer vitae mauris ex. Donec quis nisl non libero mattis semper. Cras non ultrices dui. Sed ullamcorper urna et nulla aliquam luctus. Ut libero urna, molestie quis ultricies sit amet, sollicitudin eget diam. Donec congue sed nisl ac gravida. In viverra, justo sed congue sodales, neque elit pretium erat, in laoreet leo nunc ac nibh. Nunc consequat id tellus quis facilisis. Sed sagittis lectus in urna sodales malesuada et dictum sem. Nullam venenatis sapien sed metus faucibus, nec vehicula felis ornare. Nulla porttitor sed felis vel vulputate.
    </p>
    <p>
      Aliquam blandit placerat nulla sit amet ultricies. Integer quis libero a erat blandit maximus id eu diam. Pellentesque ut volutpat nisl. Pellentesque et libero venenatis nisi faucibus sollicitudin. Nunc fermentum lobortis lacinia. Integer non neque ut lectus egestas malesuada. Donec nibh ex, feugiat venenatis mattis eget, faucibus sed diam. Donec in nisi enim. Sed eleifend finibus risus, non consequat magna ullamcorper in. Morbi vitae facilisis lacus. Sed non convallis ligula. Curabitur et aliquam quam. Phasellus eu enim eu mi imperdiet egestas at vel dui. Curabitur condimentum nisl at vehicula sagittis. Duis varius pharetra lorem, ac tempus mi tempus at.
    </p>
  </section>
  <section id="3">
    <h2>A case study</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et vestibulum lacus. Nullam ac tellus ut neque ullamcorper fringilla. Fusce pulvinar condimentum ultricies. Nullam blandit ligula nec congue congue. Sed blandit hendrerit eros, in hendrerit tellus interdum non. Praesent condimentum nunc non nisi vulputate vehicula eu non ipsum. Vivamus finibus diam id elit aliquet rutrum. Maecenas sagittis vitae metus et feugiat. Phasellus ac felis nunc. Donec risus felis, dignissim a sollicitudin et, tempus nec lorem. Nam egestas lectus eu dolor dapibus auctor.
    </p>
    <p>
      Integer vitae mauris ex. Donec quis nisl non libero mattis semper. Cras non ultrices dui. Sed ullamcorper urna et nulla aliquam luctus. Ut libero urna, molestie quis ultricies sit amet, sollicitudin eget diam. Donec congue sed nisl ac gravida. In viverra, justo sed congue sodales, neque elit pretium erat, in laoreet leo nunc ac nibh. Nunc consequat id tellus quis facilisis. Sed sagittis lectus in urna sodales malesuada et dictum sem. Nullam venenatis sapien sed metus faucibus, nec vehicula felis ornare. Nulla porttitor sed felis vel vulputate.
    </p>
    <p>
      Aliquam blandit placerat nulla sit amet ultricies. Integer quis libero a erat blandit maximus id eu diam. Pellentesque ut volutpat nisl. Pellentesque et libero venenatis nisi faucibus sollicitudin. Nunc fermentum lobortis lacinia. Integer non neque ut lectus egestas malesuada. Donec nibh ex, feugiat venenatis mattis eget, faucibus sed diam. Donec in nisi enim. Sed eleifend finibus risus, non consequat magna ullamcorper in. Morbi vitae facilisis lacus. Sed non convallis ligula. Curabitur et aliquam quam. Phasellus eu enim eu mi imperdiet egestas at vel dui. Curabitur condimentum nisl at vehicula sagittis. Duis varius pharetra lorem, ac tempus mi tempus at.
    </p>
  </section>
  <section id="4">
    <h2>Conclusion</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et vestibulum lacus. Nullam ac tellus ut neque ullamcorper fringilla. Fusce pulvinar condimentum ultricies. Nullam blandit ligula nec congue congue. Sed blandit hendrerit eros, in hendrerit tellus interdum non. Praesent condimentum nunc non nisi vulputate vehicula eu non ipsum. Vivamus finibus diam id elit aliquet rutrum. Maecenas sagittis vitae metus et feugiat. Phasellus ac felis nunc. Donec risus felis, dignissim a sollicitudin et, tempus nec lorem. Nam egestas lectus eu dolor dapibus auctor.
    </p>
    <p>
      Integer vitae mauris ex. Donec quis nisl non libero mattis semper. Cras non ultrices dui. Sed ullamcorper urna et nulla aliquam luctus. Ut libero urna, molestie quis ultricies sit amet, sollicitudin eget diam. Donec congue sed nisl ac gravida. In viverra, justo sed congue sodales, neque elit pretium erat, in laoreet leo nunc ac nibh. Nunc consequat id tellus quis facilisis. Sed sagittis lectus in urna sodales malesuada et dictum sem. Nullam venenatis sapien sed metus faucibus, nec vehicula felis ornare. Nulla porttitor sed felis vel vulputate.
    </p>
    <p>
      Aliquam blandit placerat nulla sit amet ultricies. Integer quis libero a erat blandit maximus id eu diam. Pellentesque ut volutpat nisl. Pellentesque et libero venenatis nisi faucibus sollicitudin. Nunc fermentum lobortis lacinia. Integer non neque ut lectus egestas malesuada. Donec nibh ex, feugiat venenatis mattis eget, faucibus sed diam. Donec in nisi enim. Sed eleifend finibus risus, non consequat magna ullamcorper in. Morbi vitae facilisis lacus. Sed non convallis ligula. Curabitur et aliquam quam. Phasellus eu enim eu mi imperdiet egestas at vel dui. Curabitur condimentum nisl at vehicula sagittis. Duis varius pharetra lorem, ac tempus mi tempus at.
    </p>
  </section>
</article>

            
          
!
            
              html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
body {
  background-color: #b2dccc;
}
h1,h2,h3 {
  font-family: 'RailwayRegular';
  font-style: normal; 
}
p,ul,ol { 
   font-family: 'AileronRegular'; 
   font-weight: normal; 
   font-style: normal; 
}

/* HEADER / TOC */
h1.title {
  padding: 20px 0px 0px 18px;
}
div#toc {
  background-color: #b2dccc;
}
.container {
  font-size: 18px;
  width: inherit;
  height: inherit;
  padding: 15px;
  margin: 15px;
}
div#toc-list,div#toc-img {
  padding: 15px;
  border: 2px aliceblue solid;
}
div#toc-list,div#toc-img {
  /*computed based on font-size*/
  /*good for default large screens */
  height: 16em;
}
  /* Adaptive queries for HEADER TOC children elements */
  /* x-small breakpoint */
  @media only screen 
    and (min-width: 0px) 
    and (max-width: 580px) {
    div#toc-list,div#toc-img {
      font-size: 16px;
      height: auto;
    }
  }
  /* small breakpoint */
  @media only screen 
    and (min-width: 581px) 
    and (max-width: 699px) {
    div#toc-list,div#toc-img {
      font-size: 16px;
      height: auto;
    }
  }
  /* medium breakpoint */
  @media only screen 
    and (min-width: 700px) 
    and (max-width: 991px) {
    div#toc-list,div#toc-img {
      height: auto;
    }
  }
  /* medium-large breakpoint */
  @media only screen 
    and (min-width: 991px) 
    and (max-width: 1350px) {
    div#toc-list,div#toc-img {
      height: 24em;
    }
  }
div#toc-img img {
  float: left;
  padding-right: 10px;
}

/* ARTICLE and SECTION */
article {
  background-color: aliceblue;
}
article h1, article p {
  margin: 15px;
}
section {
  padding: 15px;
  border: 2px #b2dccc solid;
}
            
          
!
            
              /*
- Uses Bootstrap + some custom CSS
- Not complete/x-browser- & screen-proof, but a decent start
*/
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console