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.

            
              
<body>
  <header>
    <div class="container">
      <div class="text-center">
        <h1>The strange case of Wilhelm Reich</h1>
        <h2>Who is afraid of him?</h2>
      </div>
    </div>
  </header>
<div class="container-fluid">
  <div class="jumbotron">
    <figure>
    <a href="http://www.wilhelmreichtrust.org/" target="_blank">
      <img class="img-responsive img-news center"  src="https://s3.amazonaws.com/auteurs_production/images/film/whos-afraid-of-wilhelm-reich/w1280/whos-afraid-of-wilhelm-reich.jpg" alt="Wilhelm Reich at Orgonon"  /></a>
      <figcaption class="text-center caption">Wilhelm Reich in his research center</figcaption>
    </figure><!-- Picture with the link to Orgonon -->
  </div><!-- End of jumbotron -->
  <img class="center img-responsive separator" src="http://www.museresources.com/images/soft%20slit%20separator.png" alt="separator image" />
</div><!-- End of container fluid -->
<div class="container">
  <div class="row">
      <div class="col-sm-3">
        <h3 class="text-center">Wilhelm Reich</h3>
        <p>was an Austrian psychoanalyst, a member of the second generation of analysts after Sigmund Freud. The author of several influential books, most notably Character Analysis (1933), The Mass Psychology of Fascism (1933) and The Sexual Revolution (1936). Reich became known as one of the most radical figures in the history of psychiatry. Reich's work on character contributed to the development of Anna Freud's The Ego and the Mechanisms of Defence (1936), and his idea of muscular armour – the expression of the personality in the way the body moves – shaped innovations such as body psychotherapy, Gestalt therapy, bioenergetic analysis and primal therapy. His writing influenced generations of intellectuals; he coined the phrase <q>the sexual revolution</q> and according to one historian acted as its midwife. </p>
      </div>
      <div class="col-sm-3">
        <p>During the 1968 student uprisings in Paris and Berlin, students scrawled his name on walls and threw copies of The Mass Psychology of Fascism at police. After graduating in medicine from the University of Vienna in 1922, Reich became deputy director of Freud's outpatient clinic, the Vienna Ambulatorium. Described by Elizabeth Danto as a large man with a cantankerous style who managed to look scruffy and elegant at the same time, he tried to reconcile psychoanalysis with Marxism, arguing that neurosis is rooted in sexual and socio-economic conditions, and in particular in a lack of what he called <q>orgastic potency.</q> He visited patients in their homes to see how they lived, and took to the streets in a mobile clinic, promoting adolescent sexuality and the availability of contraceptives, abortion and divorce, a provocative message in Catholic Austria.</p>
      </div>
      <div class="col-sm-3">
        <p>He said he wanted to <q>attack the neurosis by its prevention rather than treatment.</q> From the 1930s he became an increasingly controversial figure, and from 1932 until his death in 1957 all his work was self-published. His message of sexual liberation disturbed the psychoanalytic community and his political associates, and his vegetotherapy, in which he massaged his disrobed patients to dissolve their <q>muscular armour,</q> violated the key taboos of psychoanalysis. He moved to New York in 1939, in part to escape the Nazis, and shortly after arriving coined the term <q>orgone</q> – from <q>orgasm</q> and <q>organism</q> – for a biological energy he said he had discovered, which he said others called God. In 1940 he started building orgone accumulators, devices that his patients sat inside to harness the reputed health benefits, leading to newspaper stories about sex boxes that cured cancer.</p>
      </div><!-- End of text div -->
    <div class="col-sm-3">
      <img class="img-responsive img-news image" src="https://67.media.tumblr.com/20cda32bb8caac2a1ba2defb79a761a7/tumblr_niwm4dDadI1qzoziho2_1280.jpg" alt="Reich" />
      
      <h4 class="text-center text">Flow of the Orgone energy</br>through the body</h4>
      <img class="img-responsive img-news2 image" src="http://image.slidesharecdn.com/securedbydesignlegibility-1214400974122784-8/95/jacobs-newman-and-the-orgone-accumulator-20-728.jpg?cb=1214376456" alt="Orgone" />
    </div><!-- End of Image div -->
  </div><!-- End of first row -->
  
  <!-- Second section of the Tribute page -->
  
  <div class="row">
    <img style="width:100%;" src="http://www.drbbq.com/wp-content/uploads/2014/03/green-line-150.png" alt="devider" />
    <div class="col-md-4">
      <div class="card">
        <h4 class="text-center">Hover to see mugshot</h4>
  <img class="card-img-top img-responsive typed" src="https://upload.wikimedia.org/wikipedia/commons/9/9d/Associate_Warden's_Record_Card_for_Wilhelm_Reich.JPG" alt="Reich" />  
  <img class="card-img-top img-responsive type" src="https://upload.wikimedia.org/wikipedia/en/7/7a/The_Strange_Case_of_Wilhelm_Reich.JPG" alt="Strange case of Wilhelm Reich" />
        
        
  <div class="card-block">
    <h4 class="card-title text-center"><strong>Strange Case</strong></h4>
    <p class="card-text">Wilhelm Reich unfortunately became one of the crushed-down victims of a deadly mid-20th Century medical-academic assault upon unorthodox scientific discovery. Significant social forces were at work, but not according to the usual <q>politically correct</q> narratives. In the decades since his death, many publications spread the misconception that Reich was destroyed by American conservatism, <q>right-wing McCarthy-ites</q> and such. Historical research has shown that to be untrue. Reich was persecuted and attacked by both Nazis and Stalinists in Europe. In the USA, however, he was brought down by a combination of Comintern (Communist International) Stalinist agents, pestilent journalists and MDs, and finally by the US Food and Drug Administration (FDA). Scholarly books and articles are now available referencing newly-exposed Soviet files from long-closed archives, and internal FDA and FBI files using the Freedom of Information Act and other sources. These are cited in the Reference section. Here is a summary of what they reveal. - See more at: <a href="http://www.orgonelab.org/ReichPersecution.htm#sthash.M5pVWyLp.dpuf" target="_blank">&nbsp&nbsp Here</a></p>
    <a href="https://www.youtube.com/watch?v=i7KpOwYRh_s" target="_blank" class="btn btn-block btn-primary"><span class="glyphicon glyphicon-film"></span>&nbsp&nbsp Watch trailer</a>
  </div>
</div>
    </div>
    <div class="col-md-8">
      <div class="about"></div>
      <div class="statics">
        <img class="img-responsive statics" src="http://maineanencyclopedia.com/wp-content/uploads/reichw01.jpg" alt="Orgonon" />
      </div>
    </div>
  </div><!-- End of second row -->
</div><!-- End of container -->
  <footer>
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-3">
        <img class="img-responsive images" src="https://upload.wikimedia.org/wikipedia/commons/5/55/Healing_Devices_(FDA_138)_(8224052279).jpg" alt="Orgone accumulator" />
      </div>
          <div class="col-md-3">
        <img class="img-responsive images" src="http://www.skeptic.com/eskeptic/10-12-29images/orgone-accumulators.png" alt="accumulator" />
      </div>
      
      <div class="col-md-3">
        <img class="img-responsive images" src="http://www.bibliotecapleyades.net/imagenes_ciencia/reich05_02a.jpg" alt="Cloud buster" />
      </div>
      
      <div class="col-md-3">
        <img class="img-responsive images" src="http://www.reich-derfilm.at/downloads/01_DER%20FALL%20WILHELM%20REICH_Klaus%20Maria%20Brandauer-Shaun%20Nicholas%20Aylward.jpg" alt="Cloud buster" />
      </div>
    </div>
    </div>
    <h5 class="text-center">Coded by: Nenad</h5>
  </footer>
</body>


            
          
!
            
              body{
  background-image: url("http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/cork-wallet.png");
  background-repeat: repeat;
}
@import 'https://fonts.googleapis.com/css?family=PT+Mono'; /* Main font */
h1{
  font-family: "PT+Mono";
  text-transform: uppercase;
  letter-spacing: 4px;
  text-shadow: 2px 2px 4px #000000;
}
h2{
  font-family: "PT+Mono";
  letter-spacing: 3px;
  text-shadow: 1px 1px 2px #000000;
}
h3{
  font-family: "PT+Mono";
  letter-spacing: 1.3px;
  margin-top: -1px;
}
h4{
  font-family: "PT+Mono";
  letter-spacing: 1.3px;
}
p{
  font-family: "PT+Mono";
  letter-spacing: 1.3px;
  text-align: justify;
}
.container{
  margin-top: 20px!important;
  margin-bottom: 20px!important;
}
.center{
  max-width: 100%;
  width: auto;
  height: auto;
  margin: 0 auto;
}
.caption{
  margin-top: 15px;
  margin-bottom: -25px;
  font-weight: bold;
  text-shadow: 0.4px 0.4px 1px #000000;
}
.separator{
  width: 100%;
  height: 80px;
}
.img-news{
  border: 2px solid #adad85;
  box-shadow: -1px 2px 5px 5px  #ccccb3;
}
.img-news2{
  border: 2px solid #75a3a3;
  box-shadow: -1px 2px 5px 5px #c2d6d6;
}
.text{
  margin-top: 45px;
}
.image{
  margin-top: 10px;
  max-width: 100%;
}
.images{
  height: 376px;
}
.about{
  font-size: 20px;
  font-family: "PT+Mono";
  height: 500px;
  text-align: justify;
}
.type{
  height: 244px;
}
.typed{
  display: none;
  height: 244px;
}
.statics{
  width: 100%;
  height: 285px;
}



/* Typed plugin */
.typed-cursor{
    opacity: 1;
    -webkit-animation: blink 0.7s infinite;
    -moz-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
}
@keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-webkit-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
@-moz-keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}
            
          
!
            
              $(document).ready(function(){
  $(".about").typed({
      strings: ["You differ from a great man in only one respect: the great man was once a very little man, but he developed one important quality: he recognized the smallness and narrowness of his thoughts and actions. Under the pressure of some task that meant a great deal to him, he learned to see how his smallness, his pettiness endangered his happiness. In other words, a great man knows when and in what way he is a little man. A little man does not know he is little and is afraid to know. He hides his pettiness and narrowness behind illusions of strength and greatness, someone else's strength and greatness. He's proud of his great generals but not of himself. He admires an idea he has not had, not one he has had. The less he understands something, the more firmly he believes in it. And the better he understands an idea, the less he believes in it. You'll have a good, secure life when being alive means more to you than security, love more than money, your freedom more than public or partisan opinion, when the mood of Beethoven's or Bach's music becomes the mood of your whole life … when your thinking is in harmony, and no longer in conflict, with your feelings … when you let yourself be guided by the thoughts of great sages and no longer by the crimes of great warriors … when you pay the men and women who teach your children better than the politicians; when truths inspire you and empty formulas repel you; when you communicate with your fellow workers in foreign countries directly, and no longer through diplomats..."],
        typeSpeed: 0
  });

   $(".type").mouseover(function(){ 
     $(this).hide();
     $(".typed").show();
   });
  $(".typed").hover(function(){
     $(this).show();
     $(".type").hide();
  });
  $(".typed").mouseleave(function(){
     $(this).hide();
     $(".type").show();
  });

});

            
          
!
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