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.

            
              <html>
  <link href="https://fonts.googleapis.com/css?family=David+Libre" rel="stylesheet"> 
  <link href="https://fonts.googleapis.com/css?family=Athiti" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Mitr" rel="stylesheet"> 
  
    <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
           
  <body>
        <div class="main-content">
        <h1> Tao </h1>               
        
          <button id="getMessage" class="button" > <img src="https://morethansweetpotatoes.files.wordpress.com/2015/03/2000px-tao-svg.png" alt="TAO" style="margin:auto; width:50px"></button>
                 <p class="quote">""</p>
           <p class="author">
        </p>
           <button class="accordion">?</button>
<div class="panel">
  <p>Taoism, also known as Daoism, is a religious, philosophical and ritual tradition of Chinese origin which emphasizes living in harmony with the Tao (道, literally "Way"). The roots of Taoism go back at least to the 4th century BCE. Early Taoism drew its cosmological notions from the School of Yinyang (Naturalists), and was deeply influenced by one of the oldest text of Chinese culture, the Yijing, which expounds a philosophical system about how to keep human behavior in accordance with the alternating cycles of nature. The Tao Te Ching, a compact book containing teachings attributed to Laozi (Chinese: 老子; pinyin: Lǎozǐ; Wade–Giles: Lao Tzu), is widely considered the keystone work of the Taoist tradition, together with the later writings of Zhuangzi.</p>
</div>
    </body>
     
     
</html>
            
          
!
            
                    body {
        /*background-color: random;*/
      }
      
      h1 {
        font-family: 'Athiti', sans-serif;
        text-align: center;
        font-weight: bold;
        font-size: 40px;
      }
      
      .author {
        font-family: 'Mitr', sans-serif;
        font-weight: bold;
        text-align: left;
        font-size: 30px;
        float: left;
      }
      
      .quote {
        text-align: center;
        font-family: 'David Libre', serif;
        font-size: 40px;
      }
      
      p {
        font-family: 'Athiti', sans-serif;
        padding: 0 10% 0 10%;
        font-size: 18px;
      }
      
      .main-content {
        padding: 10px 20px 10px 20px;
        background-color: #e6ffe6;
        border-radius: 10px;
        margin: 20px 20px 20px 20px;
      }
      
      .button {
        background-color: #66ffcc;
        /* Green */
        border: none;
        border-radius: 5px;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: block;
        margin: auto;
        font-size: 16px;
        cursor: pointer;
        -webkit-transition-duration: 0.4s;
        /* Safari */
        transition-duration: 0.4s;
      }
      
      .button:hover {
        box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
      }
      
      .button:active {
        transform: scale(0.95);
      }
      
      button.accordion {
        background-color: #669900;
        border: none;
        border-radius: 5px;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: block;
        font-size: 16px;
        cursor: pointer;
        -webkit-transition-duration: 0.4s;
        transition-duration: 0.4s;
        float: right;
        position: relative;
        bottom: 60px;
      }
      
      button.accordion.active,
      button.accordion:hover {
        background-color: #ddd;
      }
      
      div.panel {
        padding: 18px;
        display: none;
      }
      
      div.panel.show {
        display: block;
      }
            
          
!
            
              // script for accordion button

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){
        this.classList.toggle("active");
        this.nextElementSibling.classList.toggle("show");
  }
}

// script for quote generator

$(document).ready(function() {
   $("#getMessage").on("click", function() {

     var randNum = Math.floor((Math.random() * 9)); // generates the number 0,1 or 2.
     var items = [
       ["Lao Tzu, Tao Te Ching ", "Simplicity, patience, compassion. These three are your greatest treasures. Simple in actions and thoughts, you return to the source of being. Patient with both friends and enemies, you accord with the way things are. Compassionate toward yourself, you reconcile all beings in the world."],
       ["Lao Tzu, Tao Teh Ching ", "When you are content to be simply yourself and don't compare or compete, everyone will respect you."],
       ["Lao Tzu, Tao Teh Ching ", "A man with outward courage dares to die; a man with inner courage dares to live."],
       ["Tsjwang Tse", "Dat wat mijn leven goed maakt, maakt ook mijn dood goed."],
       ["Lao Tzu, Tao Teh Ching ", "Bestaat mooi dankzij lelijk? Is er goed dankzij kwaad? Iets en niets brengen elkaar voort. Moeilijk en makkelijk vullen elkaar aan.Lang en kort nemen elkaar de maat. Hoog berust op laag. Toon en volume bepalen de harmonie De eersten zullen de laatsten zijn. Daarom kun je handelen door te wachten. Je kunt praten door te zwijgen. Leven zonder te nemen. Genieten zonder te bezitten. Werken zonder te heersen. Handelen zonder te verstoren. Dan maak je deel uit van de rivier. "],
       ["Lao Tzu, Tao Teh Ching ", "Verhef getalenteerden niet, dan voorkom je rivaliteit en ruzie. Wek geen begeerte op naar schaarse goederen, dan voorkom je diefstal. Toon niet waarnaar men kan verlangen, dan blijven de harten van de mensen rustig. Daarom regeert de wijze door de harten te luchten en de magen te vullen, door de wil te verzachten en het lichaam te sterken. Zo blijven de mensen eenvoudig en je voorkomt onrust. ls je niets verstoort, blijft alles in orde. "],
       ["Lao Tzu, Tao Teh Ching ", "De Tao is leeg, als een kom.Nooit raakt de Tao vol, want er wordt altijd uit gedronken.De Tao schijnt onuitputtelijk, nooit komt de bodem in zicht.Daarom lijkt het de bron van al het leven.De Tao brengt vrede door scherpe kanten af te vlakken,door knopen te ontwarren en het licht te temperen.De Tao verenigt alle werelden tot één geheel.Verborgen in de diepte, overal altijd aanwezig.Wiens kind het is, dat weet ik niet.Voorvader van alles wat we zien. "],
    
       ["Lao Tzu, Tao Teh Ching ", "Those who know do not speak. Those who speak do not know."],

     ];

     var authorRandQuote = items[randNum][0];
     var randQuote = items[randNum][1];

     $(".author").html( authorRandQuote);
     $(".quote").html( randQuote);

   })
 });
            
          
!
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