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.

              <div class="container-fluid">
<div class="jumbotron well">
  <h1 class="text-center">BE WATER MY FRIEND
  <h4 class="text-center"><em>A Tribute to Bruce Lee</em>
<img src="http://cdn-maf3.heartyhosting.com/sites/muscleandfitness.com/files/styles/full_node_image_1090x614/public/bruce-lee-legend_0.jpg?itok=FH4LEUwC" class="img-responsive center-block"/>
  <h4 class="text-center">Written & Coded By:
   <h4 class="text-center">
     <a href="https://codepen.io/erickstirlingpro/" style="color:red">Erick Stirling
  <div class="container well">
    <img src="http://www.dreamsare4real.com/wp-content/uploads/2015/08/brucelee-2-.jpg" id="flow" class="img-responsive"/>
    <u><h4 style="color:red">Intro</u></h4>
      <p>As you may know already, Bruce Lee is one of my all time favorite people. Although he died long before my time, his spirit lives on through his work and the people who knew him. I have studied his work since I was in high school, and he continues to be a guiding light throughout my life.<p>

<p>Bruce Lee first and foremost was a philosopher. He was deeply into philosophy and then incorporated his beliefs into martial arts.<p>

<p>He saw all technique-based forms of martial arts as limiting because they were all built upon rigid standards, and superfluous movements.</p>

<h4 class="blockquote"><em>All fixed, set patterns are incapable of adaptability or pliability. The truth is outside of all fixed patterns.</em></h4>

<p>He is well-known for creating his own fighting "style" called Jeet Kune Do, or Way Of The Intercepting Fist, which was widely criticized at the time of its inception.</p>

<p>But Bruce proved it's utility to the critics, and his philosophy and martial arts are taught all around the world today.</p>

  <u><h4 style="color:red">Jeet Kune Do</u></h4>

<p>There are two major deviations in Bruce's methods from the widely accepted ancient techniques passed down from China and Japan.<p>

    <p>First, he emphasized <span style="color:red">offense </span>instead of defense. This may sound elementary if you don't study martial arts. But most people think all the punching, kicking, and grappling we commonly see is basically offense. They think you simply size up your adversary and let loose. But this is not how fighting really is.<p>

<p>Most fighting styles are built on a foundation of defense. They emphasize effectively countering your opponents strikes and movements. What Bruce found wrong with this is that you have to take a submissive stance. You let your opponent dictate the tempo of the fight. While this is method works in arenas, and often looks cool, Bruce had a different idea about the effectiveness of this approach when it came to real life.</p>

<p>He taught his students to take the offensive in the fight, and the focus was win the fight as quickly as possible. This ideology stems from the fact that most fights take place away from an arena. He always taught his students martial arts with the intention of being rooted in reality.</p>

<p>Basically the idea is, on the streets there are no rules. There are no fancy moves like we see in the movies. It is a messy fight to the death. So the shorter you can make the fight, the better off you will be. You can possibly avoid dying as a result of a stabbing, shooting, etc. Bruce made this point exceptionally clear and this ideology even dictated his physical training regime.</p>

<p>He taught his students to train as hard as possible, but to never push yourself to the limit. This is because you do not know what will happen to you after your training session! You may need to fight as soon as you leave the dojo, and so having the strength to always "be at the ready" to fight was ingrained in every student.</p>

<p>Bruce's offense could simply be called, directness. He sought to find the quickest, most efficient way of ending a fight. He trained himself to fight in the most efficient way possible and avoided any superfluous movements. Through his training he developed what is famously known as, "The Three Inch Punch." He was able to send a man flying backward, and into a chair after punching him from only three inches away.</p>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/P_LCs1eTZ9I" frameborder="0" allowfullscreen></iframe>
<p>There are many reasons why he was able to deliver such powerful punch, including practicing it 10,000 times at least. But mainly, it has to do with directing unimpeded energy to a single point. To do this you must be very, very relaxed up until the point of impact.</p>

<blockquote><em>"I fear not the man who has practiced 10,000 kicks once, but I fear the man who has practiced one kick 10,000 times."</em></blockquote>

<p>The second deviation is that in reality, Jeet Kune Do is "formless." Bruce made it clear to everyone that his "style" wasn't a true style at all.<p>

<strong>Jeet Kune Do is three parts philosophy, and only one part technique.</strong>

<p>The first three teach the student to "become like water." As famously quoted by the master himself, Bruce gives his explanation of what Jeet Kune Do actually is.</p>

<iframe width="420" height="315" src="https://www.youtube.com/embed/cJMwBwFj5nQ?autoplay=1" frameborder="0" allowfullscreen></iframe>
<p>Being formless is essential to winning fights because it frees your mind, which in turn allows your body to react naturally, and with directness.</p>

<blockquote><em>"Take things as they are. Punch when you have to punch. Kick when you have to kick."</em></blockquote>

<p>To Bruce, trying to calculate your way through a fight is a sure-fire way of finding yourself knocked on the ground. It adds unnecessary extra steps and limitations in the process, which can get you killed.</p>

<p>In the older styles, first you have to get into a stance, which may or may not be best suited to you, or the situation. Next, you have to determine the style of the other fighter. Then if you have a style counter to it, you can use the techniques within and win the fight. Theoretically.</p>

<p>If you don't have a counter style, you must then counter their movements by allowing them to control the tempo, while looking for weak spots. To Bruce, this is mentally and energetically wasteful, and draws fights on longer than necessary.</p>

<p>Jeet Kune Do allows you to simply fight. It doesn't require you to enter into your own mind while in the fight. To Bruce, the mind should be calm during a fight, and the body relaxed and ready for whatever comes.</p>

<p>In Jeet Kune Do, there is no "stance" only what is comfortable and appropriate for the situation. And whatever that happens to be in that moment, is your Jeet Kune Do.</p>

<p>This allows you to truly be like water, because your mind and body are free to adapt to the situation. It is absolutely fluid and thus, the most effective "style" of fighting.</p>

    <h4><u style="color:red">A True Martial Art</u></h4>

<p>Bruce Lee'S Jeet Kune Do's principles can be applied to daily life, as well as fighting, which are the marks of a true martial arts teaching. The martial arts are supposed to make the practitioner himself more virtuous, and their life more fulfilling. Jeet Kune Do exceeds these expectations exponentially.</p>
<li>Directness: Don't take a passive role in life. Put yourself in the driver's seat. Many people let external things dictate their happiness. Stand up for what you believe in and live life deliberately. Speak with confidence, tell others like it is, and never settle for less than you deserve. Always strive to find the most direct route in a situation. Avoid clutter, over-complication, and sloppiness at all costs.</li>

<blockquote><em>"It's not the daily increase but daily decrease. Hack away at the unessential."</blockquote></em>

<li>Relaxation: It goes without saying, that stress is the enemy of a healthy mind and body. Do not let your emotions cloud your vision. A calm mind can be obtained through deep-breath techniques, meditation, and avoiding known stressors. Always simplify and declutter, as a messy environment leads to a stressed mind. There are hundred of ways to relax yourself, so find out what helps you the most and implement it daily.</li>

<li>Adaptability: Change is part of life, and so it is essential to be flexible when life throws you a curveball. Keeping an open mind will help you when things get hard or come up unexpectedly. Always be "at the ready" for change, and you will find you can handle a lot more than you thought previously.</li>

<li>Technique: No discipline is complete without action. This applies to anything you do in life. So practice. Mastery comes after you have done the same thing 10,000 times. Don't try to be a jack of all trades. It is much better to focus on one or two things that your truly enjoy, and practice them to perfection. Focusing on too much at once stresses the mind and the body, and quality suffers.</li>

    <h4><u style="color:red">Final Thoughts</u></h4>

<p>Bruce Lee was indeed a master of his craft, and a great human being, and I am grateful that I am able to share with you some of the invaluable principles he has taught me and countless others.</p>
  <h2 class="text-center"><strong>R.I.P. Bruce Lee</strong><h2>
              h1, h2, h4 {
  color: black;
  font-family: monospace;
img {
  margin-bottom: 60px;
  margin-top: 30px;
body {
  margin-top: 30px;
  margin-bottom: 30px;

body {
  background-color: gray;
.container {
  background-color: white;
  border-radius: 5px;
  margin-top: 5px;
  margin-bottom: 20px;
  border: black;
  border-style: double;
  background: #f9f9f9;
  border-left: 10px solid #ccc;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
blockquote:before {
  color: #ccc;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;

blockquote p {
  display: inline;

iframe {
  max-width: 100%;
  margin-bottom: 10px;

🕑 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.