Pen Settings

HTML

CSS

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

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <head>
  <style>
    @import url('https://fonts.googleapis.com/css?family=Libre+Baskerville|Cormorant+Garamond|Roboto');
    .carousel-inner > .item > p,
    .carousel-inner > .item > a > p {
      width: 100%;
      margin: 100;
    }
  </style>
</head>

<body>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script src="js/main.js"></script>

  <!-- Home Container-->
  <div class="container-fluid" id="HOME">
    <div class="row">
      <div class="col-md-7">
        <h3 style="text-transform: lowercase; color: #4A6556; font-size: 30px; font-family: 'Cormorant Garamond';">a curious character</h3>
        <h1 style="text-transform: uppercase; color: #4A6556; font-size: 120px; font-family: 'Roboto';">Richard Feynman</h1>
      </div>

      <!-- Feature Image -->
      <div class="featurepic">
        <img src="http://www.orefind.com/images/default-source/blog-figures/richard_feynman_1965.jpg?sfvrsn=4" width="100%">

        <div class="col-md-8 col-md-offset-1 caption" width="50%">
          <p>Princess of Sweden (left) and Richard Feynman (Right) during the 1965 Nobel Prize ceremony.</p>
        </div>

      </div>
      <!-- Feature Image -->
      
      <!-- Start Quotes -->
      <div class='row'>
      <div class='col-md-offset-2 col-md-8'>
        <div class="carousel slide" data-ride="carousel" id="quote-carousel">
          <!-- Bottom Carousel Indicators -->
          <ol class="carousel-indicators">
            <li data-target="#quote-carousel" data-slide-to="0" class="active"></li>
            <li data-target="#quote-carousel" data-slide-to="1"></li>
            <li data-target="#quote-carousel" data-slide-to="2"></li>
          </ol>

          <!-- Carousel Slides / Quotes -->
          <div class="carousel-inner">

            <!-- Quote 1 -->
            <div class="item active">
              <blockquote>
                <div class="row">
                  <div class="col-sm-9">
                    <p>“Nobody ever figures out what life is all about, and it doesn't matter. Explore the world. Nearly everything is really interesting if you go into it deeply enough.” ― Richard Feynman</p>
                  </div>
                </div>
              </blockquote>
            </div>
            
            <!-- Quote 2 -->
            <div class="item">
              <blockquote>
                <div class="row">
                  <div class="col-sm-9">
                    <p>“Physics is like sex: sure, it may give some practical results, but that's not why we do it.” ― Richard Feynman</p>
                  </div>
                </div>
              </blockquote>
            </div>
            
            <!-- Quote 3 -->
            <div class="item">
              <blockquote>
                <div class="row">
                  <div class="col-sm-9">
                    <p>“The first principle is that you must not fool yourself and you are the easiest person to fool.” ― Richard Feynman</p>
                  </div>
                </div>
              </blockquote>
            </div>
          </div>

          <!-- Carousel Buttons Next/Prev -->
          <a data-slide="prev" href="#quote-carousel" class="left carousel-control"><i class="fa fa-chevron-left"></i></a>
          <a data-slide="next" href="#quote-carousel" class="right carousel-control"><i class="fa fa-chevron-right"></i></a>
        </div>
      </div>
    </div>
  </div>
      <!-- End Quotes-->
    
    </div>
    

  <!-- Feynman Container-->

  <div class="row">
    <div class="col-md-8">
      <div class="container-fluid" id="FEYNMAN">
        <h3>Remembering Feynman</h3>
        <p class="pWhite" style="margin-top: 20px; width: 530px;">
          Richard P. Feynman was an American physicist widely known for ''Feynman diagrams''. He indirectly served as a mentor to many through his lectures and seminars. Nowadays, Feyman is remembered for his facetious attitude, except when discussing physics,
          his mathematical brilliance, and his enthralling stories. His legacy and influence remains with us through his lectures, publications, and books. See Feynman's <a href="https://en.wikipedia.org/wiki/Richard_Feynman">Wikipedia</a> page for more information.</p>

        <!-- Start: Image of Feynman -->

        <div>
          <img class="feynmancut" src='https://raw.githubusercontent.com/Hosini/CodePen/master/FeynmanCut.png' />
        </div>
        <!-- End: Image of Feynman -->

      </div>
    </div>
  </div>

  <!-- Timeline Heading Container -->

  <div class="container-fluid" id="TIMELINE">
    <h2>Adventures of a curious character</h2>
  </div>

  <!-- Timeline Container -->
  <div class="container-fluid" id="TIMELINE2">
    <div class="row">
      <div class="col-md-7">
        <!--
        <h2>Adventures of a curious character</h2>
-->
      </div>

      <!-- Start: Timeline Badges -->
      <ul class="timeline">
        <!-- Timeline item 1 : 1918 -->
        <li>
          <div class="timeline-badge">1918</div>
          <div class="timeline-panel">
            <div class="timeline-heading">
              <h4 class="timeline-title">Birth</h4>
            </div>
            <div class="timeline-body">
              <p>Born in Manhattan to Melville and Lucille Feynman. Melville was a uniform salesman, and Lucille was a homemaker.</p>
              <hr>
              <blockquote>
                <p>''I was born not knowing and have had only a little time to change that here and there.''</p>
                <footer>
                  <cite>Richard Feynman, <a href="#">Letter to Armando Garcia J, December 11, 1985</a></cite>
                </footer>
              </blockquote>
            </div>
          </div>
        </li>

        <!-- Timeline item 2 : 1939 -->
        <li class="timeline-inverted">
          <div class="timeline-badge">1939</div>
          <div class="timeline-panel">
            <div class="timeline-heading">
              <h4 class="timeline-title">Academics</h4>
            </div>
            <div class="timeline-body">
              <p>Graduated from MIT and applied to Princeton for their PhD program. Feynman produced the highest math and physics GRE scores that the school has ever seen.</p>
              <hr>
              <div>
                <img src="https://s-media-cache-ak0.pinimg.com/originals/23/40/ce/2340ce6a966fc14859fa7f9554dc2415.jpg" width="100%" alt="Feynman after the Princeton commencement ceremony, where he was award his PhD.">
                <div class="caption">
                  <p>Feynman after the Princeton commencement ceremony, where he was award his PhD.</p>
                </div>
              </div>
            </div>
          </div>
        </li>

        <!-- Timeline item 3 : 1947 -->
        <li>
          <div class="timeline-badge">1947</div>
          <div class="timeline-panel">
            <div class="timeline-heading">
              <h4 class="timeline-title">Cornell</h4>
            </div>
            <div class="timeline-body">
              <p>Feynman lost his interest in physics and decided to start "playing" with physics again.</p>
              <blockquote>
                <p>''Within a week I was in the cafeteria and some guy, fooling around, throws a plate in the air. As the plate went up in the air I saw it wobble, and I noticed the red medallion of Cornell on the plate going around. It was pretty obvious
                  to me that the medallion went around faster than the wobbling.''<br><br>''I had nothing to do, so I start to figure out the motion of the rotating plate. I discover that when the angle is very slight, the medallion rotates twice as fast
                  as the wobble rate - two to one [Note: Feynman mis-remembers here &#8211 the factor of 2 is the other way]. It came out of a complicated equation! Then I thought, 'Is there some way I can see in a more fundamental way, by looking at
                  the forces or the dynamics, why it's two to one?'''</p>
                <footer>Richard Feynman,
                  <cite>
                    From <a href="https://www.amazon.com/Surely-Feynman-Adventures-Curious-Character/dp/0393316041">``Surely you're joking, Mr. Feynman''</a>, Copyright 1985, pg. 157-158.</cite>
                </footer>
              </blockquote>
              <hr>
              <div>
                <img src="http://media.univcomm.cornell.edu/photos/360x360/0A2B6742-D76A-40AB-C2D0926A7B0DA1F4.jpg" width="100%" alt="Iconic image of Feynman."><cite><a href="http://www.nobelprize.org/nobel_prizes/physics/laureates/1965/feynman-bio.html">source: <em>nobelprize.org</em></a></cite>
              </div>
            </div>
          </div>
        </li>

        <!-- Timeline item 4 : 1949 -->
        <li class="timeline-inverted">
          <div class="timeline-badge">1949</div>
          <div class="timeline-panel">
            <div class="timeline-heading">
              <h4 class="timeline-title">Quantum Electrodynamics</h4>
            </div>
            <div class="timeline-body">
              <p>Feynman presented his version of QED at Oldstone-on-the-Hudson. He also published his work in Physical Review, <a href="http://authors.library.caltech.edu/3523/1/FEYpr49c.pdf">''Space-Time Approach to Quantum Electrodynamics.''</a> At the
                time, two other physicists, Julian Schwinger and Tomanaga Shin'ichiro, were working on similar ideas with slightly different approaches. </p>
            </div>
          </div>
        </li>

        <!-- Timeline item 5 : 1961 -->
        <li>
          <div class="timeline-badge">1961</div>
          <div class="timeline-panel">
            <div class="timeline-heading">
              <h4 class="timeline-title">The Feynman Lectures</h4>
            </div>
            <div class="timeline-body">
              <p>As a way to promote and revitalize the physics cirriculum, Feynman concedes two years of research to teach freshman physics. The notes for these classes were recorded and developed into the <em>The Feynman Lectures on Physics</em>.</p>
            </div>
          </div>
        </li>

        <!-- Timeline item 7 : 1965 -->
        <li class="timeline-inverted">
          <div class="timeline-badge">1965</div>
          <div class="timeline-panel">
            <div class="timeline-heading">
              <h4 class="timeline-title">Nobel Prize</h4>
            </div>
            <div class="timeline-body">
              <p>Feynman is awarded the Nobel Prize in physics for his work on QED, which he shares with Julian Schwinger and Shin'ichiro Tomanaga.
              </p>
              <hr>
              <div>
                <img src="https://raw.githubusercontent.com/Hosini/CodePen/master/FeynmanNobelPrize.jpg" width="100%" alt="Feynman accepting the 1965 Nobel Prize in Physics">
                <div class="caption">
                  <p>Feynman accepting the 1965 Nobel Prize in Physics.</p>
                </div>
              </div>
            </div>
        </li>

        <!-- Timeline item 8 : 1986 -->
        <li>
          <div class="timeline-badge">1986</div>
          <div class="timeline-panel">
            <div class="timeline-heading">
              <h4 class="timeline-title">NASA: Space Shuttle Challenger</h4>
            </div>
            <div class="timeline-body">
              <p>Feynman joins the Rogers Commission to investigate the explosion of the Challenger space shuttle. During a live press conference, Feynman performs an experiment to show the likely cause of the explosion, which was the compromised resilency
                of an o-ring at freezing temperatures.</p>
            </div>
          </div>
        </li>

        <!-- Timeline item 9 : 1988 -->
        <li class="timeline-inverted">
          <div class="timeline-badge">1988</div>
          <div class="timeline-panel">
            <div class="timeline-heading">
              <h4 class="timeline-title">Death</h4>
            </div>
            <div class="timeline-body">
              <p>Feynman dies of cancer.</p>
              <hr>
              <blockquote>
                <p>''I'd hate to die twice. It's so boring."</p>
                <footer>
                  <cite>Richard Feynman</cite>
                </footer>
              </blockquote>
            </div>
          </div>
        </li>

        <!-- Timeline item 8 : 1986 -->
        <li>
          <div class="timeline-badge"><span class="glyphicon glyphicon-globe" aria-hidden="true"></span></div>
          <div class="timeline-panel">
            <div class="timeline-heading">
              <h4 class="timeline-title">Legacy</h4>
            </div>
            <div class="timeline-body">
              <p>Feynman's legacy lives on through his many recorded lectures, his influences on scientists, and many books.</p>
            </div>
          </div>
        </li>

      </ul>
      <!-- End: Timeline Badges -->

      </div>
    </div>

  <!-- Publications Container -->
    <div class="container-fluid" id="PUBLICATIONS">
      <div class="row" style="float: left !important;">
  
  <!-- Start Publications -->

        <!-- Pub 1 -->
        <div class="pubs" id="PUB0">
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/368633/1963_mainly_mechanics.jpg" alt="Mainly Mechanics - 1963" class="img-responsive" />
          <p>Mainly Mechanics, Radiation, and Heat. 1963 Lectures to freshman & sophomore undergraduate students at Caltech during the first few years of 1960 on basic Quantum Physics.</p>
        </div>

        <!-- Pub 2 -->
        <div class="pubs" id="PUB1">
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/368633/1965_quantum.jpg" alt="Quantum Mechanics - 1965" class="img-responsive" />
          <p>Quantum Mechanics and Path Integrals. 1965 Feynman and Hibbs present some of the fundamental principles of quantum mechanics and the mathematics to understand them.</p>
        </div>

        <!-- Pub 3 -->
        <div class="pubs" id="PUB2">
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/368633/1965_physical_law.jpg" alt="The Character of Physical Law - 1965" class="img-responsive" />
          <p>The Character of Physical Law. 1965 contains the text of seven brilliant lectures, originally delivered to standing-room-only audiences at Cornell University, that demonstrate Feyman's unique ability to bring his subject to life to the non-physicist.</p>
        </div>

        <!-- Pub 4 -->
        <div class="pubs" id="PUB3">
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/368633/1985QED.jpg" alt="QED: The Strange Theory of Light and Matter - 1985" class="img-responsive" />
          <p>QED: The Strange Theory of Light and Matter. 1985 edited version of four lectures on quantum electrodynamics that Feynman gave to the general public at UCLA as part of the Alix G. Mautner Memorial Lecture series--is perhaps the best example
            of his ability to communicate both the substance and the spirit of science to the layperson.</p>
        </div>

        <!-- Pub 5 -->
        <div class="pubs" id="PUB4">
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/368633/Joking.jpg" alt="Surely You're Joking - 1985" class="img-responsive" />
          <p>Surely You're Joking, Mr. Feynman. 1985 Richard Feynman, winner of the Nobel Prize in physics, thrived on outrageous adventures. Here he recounts in his inimitable voice his experience trading ideas on atomic physics with Einstein and Bohr and
            ideas on gambling with Nick the Greek.</p>
        </div>

        <!-- Pub 6 -->
        <div class="pubs" id="PUB5">
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/368633/1987_elementary.jpg" alt="Elementary Particles and the Laws of Physics - 1987" class="img-responsive" />
          <p>Elementary Particles and the Laws of Physics. 1987 The talks were directed at an advanced audience, one that was familiar with quantum mechanics. Unlike many popular presentations by Feynman and Weinberg, these lectures are not suitable for
            the general layman.</p>
        </div>

        <!-- Pub 7 -->
        <div class="pubs" id="PUB6">
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/368633/1988_what_do_you_care.jpg" alt="What Do You Care What Other People Think - 1988" class="img-responsive" />
          <p>What Do You Care What Other People Think. 1988 A thoughtful companion volume to the earlier Surely You Are Joking Mr. Feynman!.</p>
        </div>

        <!-- End Publications -->
    </div>
    </div>
    

    <!-- Footer -->
    <div class="container-fluid" id="FOOTER">
      <div class="row">
        <p>Influenced by - <a href="https://codepen.io/celenajasmin/" target="_blank">Celena Jasmin</a>, <a href="https://codepen.io/davi3blu3/" target="_blank">Dave Harned</a>, <a href="https://codepen.io/leogonzalez/" target="_blank">Leo Gonzalez</a>
          <br><br>Constructed by – <a href="http://www.brandontouchet.com" target="_blank">Brandon Touchet</a></p>
      </div>
    </div>

    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
		</button>
          <a class="navbar-brand" href="#">Richard Feynman Tribute</a>
        </div>

        <div class="collapse navbar-collapse" id="myNavbar">

          <ul class="nav navbar-nav navbar-right">
            <li><a href="#HOME">HOME</a></li>
            <li><a href="#FEYNMAN">FEYNMAN</a></li>
            <li><a href="#TIMELINE">TIMELINE</a></li>
            <li><a href="#PUBLICATIONS">PUBLICATIONS</a></li>
            <li class="dropdown">
              <a class="dropdown-toggle" data-toggle="dropdown" href="#">MORE
            <span class="caret"></span>
          </a>
              <ul class="dropdown-menu">
                <li><a href="#">Free Code Camp</a></li>
              </ul>
            </li>
          </ul>


        </div>
      </div>
    </nav>

</body>
              
            
!

CSS

              
                /* Containers */

#FEYNMAN {
  background-color: #4A6556;
  height: 400px;
  padding-top: 40px;
  padding-bottom: 40px;
  /* Allows me to put img in abs. pos. */
}

#FEYNMAN p{
  margin: 0px 40px 20px 40px;
}

#FEYNMAN li {
  font-family: 'Libre Baskerville', serif;
  font-weight: lighter;
  color: #EDEDE8;
  line-height: 2;
  font-size: 16px;
}

#FOOTER {
  color: #4A6556;
  background-color: #EDEDE8;
  font-family: 'Libre Baskerville', serif;
  font-size: 16px;
  text-align: center;
  padding: 18px 0 10px 0;
}

#HOME {
  background-color: #EDEDE8;
  background-image: linear-gradient(white 2px, transparent 2px),
  linear-gradient(90deg, white 2px, transparent 2px),
  linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px);
  background-size:100px 100px, 100px 100px, 20px 20px, 20px 20px;
  background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px;
  height: 800px;
  padding: 40px;
}

#PUBLICATIONS{
  background-color: #4A6556;
  height: 300px;
  padding: 40px;
  
}

#TIMELINE {
  height: 100px;
  background-color: #938653; 
}

#TIMELINE2 {
  text-align: center;
  background-image: url('https://raw.githubusercontent.com/Hosini/Learning/master/feynmanfabric.png');
}

/* Classes & Styles */

.caption{
  position: relative;
  z-index: 1;
  margin-top: -35px;
  background-color: #938653;
  text-align: center;
  padding: 10px;
  box-shadow: 0 15px 30px -8px rgba(147, 134, 83, 0.9);
  width: 75%;
  margin-left: 12.5%;
}

.caption p {
  font-family: 'Libre Baskerville', serif !important;
  color: #EDEDE8 !important;
  line-height: 1.6;
}

.featurepic{
  position: relative;
  z-index: 0;
  margin-top: 20px;
  left: 20%;
  width: 60%;
}

.feynmancut {
  height: 300px;
  width: 280px;
  position: absolute;
  bottom: 0px;
  /* Img base at bottom of container*/
  right: 40px;
  margin-right: 40px !important;
}

#FEYNMAN h3{
  position: relative;
  text-align: center;
  text-transform: uppercase; 
  /*
  color: #EDEDE8;
  */
  color: #938653;
  font-size: 40px;
}

.navbar {
  /*
	margin-bottom:0;
	background-color: #4A6556;
  color: #EDEDE8;
  */
  border: 0;
  font-size: 12px;
  letter-spacing: 2px;
	opacity:0.6;
	font-family: 'Libre Baskerville', serif !important;
}

.pubs {
  float: left !important;
  font-family: 'Libre Baskerville', serif;
  font-weight: lighter;
  color: #EDEDE8;
  line-height: 2;
  font-size: 14px;
  
}

.pWhite {
  font-family: 'Libre Baskerville', serif;
  font-weight: lighter;
  color: #EDEDE8;
  line-height: 2;
  font-size: 16px;
}

.timeline {
  list-style: none;
  padding: 100px;
  position: relative;
  /*
  background-color: #fcf5e6;
  */
  font-family: 'Libre Baskerville', serif !important;
  color: #938653;
}

#TIMELINE h2{
  position: relative;
  margin: 30px 40px;
  text-transform: uppercase; 
  text-align: center; 
  background-color: #938653; 
  color: #EDEDE8;
  font-size: 40px;
}

 /* Timeline box titles */

.timeline:before {
  top: 0;
  bottom: 0;
  position: absolute;
  content: " ";
  width: 3px;
  background-color: #938653; /* vertical line for timeline */
  left: 50%;
  margin-left: -1.5px;
}

.timeline > li {
  margin-bottom: 20px;
  position: relative;
}

.timeline > li:before,
.timeline > li:after {
  content: " ";
  display: table;
}

.timeline > li:after {
  clear: both;
}

.timeline > li:before,
.timeline > li:after {
  content: " ";
  display: table;
}

.timeline > li:after {
  clear: both;
}

/* Timeline Boxes */
.timeline > li > .timeline-panel {
  width: 46%;
  float: left;
  background: #EDEDE8;
  border: 1px solid #d4d4d4;
  border-radius: 2px;
  padding: 20px;
  position: relative;
  -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
}

.timeline > li > .timeline-panel:before {
  position: absolute;
  top: 26px;
  right: -15px;
  display: inline-block;
  border-top: 15px solid transparent;
  border-left: 15px solid #ccc;
  border-right: 0 solid #ccc;
  border-bottom: 15px solid transparent;
  content: " ";
}

.timeline > li > .timeline-panel:after {
  position: absolute;
  top: 27px;
  right: -14px;
  display: inline-block;
  border-top: 14px solid transparent;
  border-left: 14px solid #fff;
  border-right: 0 solid #fff;
  border-bottom: 14px solid transparent;
  content: " ";
}

.timeline > li > .timeline-badge {
  /*
  color: #EDEDE8;
  */
  color: #4A6556;
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 1.4em;
  text-align: center;
  position: absolute;
  top: 16px;
  left: 50%;
  margin-left: -25px;
  /*
  background-color: #4A6556;
  */
  background-color: #938653;
  z-index: 100;
  border-top-right-radius: 50%;
  border-top-left-radius: 50%;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
}

.timeline > li.timeline-inverted > .timeline-panel {
  float: right;
}

.timeline > li.timeline-inverted > .timeline-panel:before {
  border-left-width: 0;
  border-right-width: 15px;
  left: -15px;
  right: auto;
}

.timeline > li.timeline-inverted > .timeline-panel:after {
  border-left-width: 0;
  border-right-width: 14px;
  left: -14px;
  right: auto;
}

.timeline-title {
  margin-top: 0;
  color: #4A6556;
}

.timeline-body > p,
.timeline-body > ul {
  margin-bottom: 0;
}

.timeline-body > p + p {
  margin-top: 5px;
}

/* Quotes */

/* carousel */
#quote-carousel 
{
  background: none !important;
  margin-top: 30px;
  width: 500px;
  position: absolute;
  left: 575px;
  margin-top: -700px;
  color: #4A6556;
}

/* Quote-Carousel Control buttons  */
#quote-carousel .carousel-control
{
  background: none;
  color: #222;
  font-size: 2.3em;
  text-shadow: none;
  margin-top: 30px;
}
/* Previous button  */
#quote-carousel .carousel-control.left 
{
  left: -12px;
}
/* Next button  */
#quote-carousel .carousel-control.right 
{
  right: -12px !important;
}
/* Changes the position of the indicators */
#quote-carousel .carousel-indicators 
{
  right: 50%;
  top: auto;
  bottom: 0px;
  margin-right: -19px;
}
/* Changes the color of the indicators */
#quote-carousel .carousel-indicators li 
{
  background: #c0c0c0;
}
#quote-carousel .carousel-indicators .active 
{
  background: #333333;
}
#quote-carousel img
{
  width: 250px;
  height: 100px
}

/* Media Sizing */

@media (min-width: 992px) and (max-width: 1199px) {
  #quote-carousel {
    position: absolute;
    left: 450px;
  }
}

@media (max-width: 991px) {
  .featurepic {
    margin-top: 30px;
    height: auto;
    position: relative;
    left: 10;
  }
  .feynmancut {
    position: absolute;
    bottom: 0px;
    left: 650px;
    width: 250px;
    height: auto;
  }
    #quote-carousel {
    position: relative;
    left: 70%;
    top: 70%;
    width: 30%
  }
}

@media (max-width: 890px) {
  #FEYNMAN p {
  width: 100%;  
  }
  
  .feynmancut {
    display: none;
  }
    #quote-carousel {
    position: relative;
    left: 70%;
    top: 70%;
    width: 30%
  }
}

@media (max-width: 767px) {
  .featurepic {
    margin-top: 30px;
  }
  .feynmancut {
    bottom: 0px;
  }
  #quote-carousel{
    display: none;
  }
}

@media (max-width: 571px) {
  .feynmancut {
    left: 22%;
  }
    #quote-carousel{
    display: none;
  }
}

@media (max-width: 400px) {
  .feynmancut {
    left: 12%;
  }
}

              
            
!

JS

              
                (function () {
	"use strict";
	var numberBooks = 7;           // number of publications to be viewed.
	var indexCurrentViewing = 1;
	var indexLastViewing = 0;
	var timeBetweenFlips = 7500;   // time before changing to next publication.

	for(var i = 1; i < numberBooks; i++) {  // initialize all publications to hidden, except first.
		document.getElementById("PUB" + i).style.zIndex = -1;
		document.getElementById("PUB" + i).style.display = "none";
	}
	window.setInterval(function(){
		indexLastViewing = indexCurrentViewing - 1;
		if(indexCurrentViewing === numberBooks) {    //test if last book in sequence viewed.
			indexCurrentViewing = 0;                 // if last, set back to first.
		}
		document.getElementById("PUB" + indexLastViewing).style.zIndex = -1;        // hide current book.
		document.getElementById("PUB" + indexLastViewing).style.display = "none";
		document.getElementById("PUB" + indexCurrentViewing).style.zIndex = 1;      // show next book.
		document.getElementById("PUB" + indexCurrentViewing).style.display = "block";
		indexCurrentViewing++;
	}, timeBetweenFlips);
})();

$(document).ready(function() {
  //Set the carousel options
  $('#quote-carousel').carousel({
    pause: true,
    interval: 3000,
  });
});

              
            
!
999px

Console