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 is required to process package imports. If you need a different preprocessor remove all packages first.

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

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

              
                <!DOCTYPE html>
<html lang="en">

<head>

  <!-- Meta -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>dmichaeljones.com</title>

  <!-- Styles -->
  <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
  <link rel="stylesheet" href="styles/index.processed.css">
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto'>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css">

  <!-- Scripts -->
  <script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script>

</head>

<body class="w3-light-gray">
  <div class="w3-container w3-card w3-white w3-padding-16 w3-section">
    <div class="w3-bar w3-white">
      <a href="http://dmichaeljones.com" class="w3-bar-item"><img src="logoSmall.png" style="width: 40px;" class="rounded w3-hover-grayscale" alt="dMichaelJones" onClick="myFunction()"></a>
      <a href="http://dmichaeljones.com" class="w3-bar-item w3-button w3-section w3-hover-none w3-border-white w3-bottombar w3-hover-border-black">Home</a>
            <div class="w3-dropdown-hover w3-section w3-hover-none w3-border-white w3-bottombar w3-hover-border-black">
        <button class="w3-button" onClick="myFunction()">Preview<i class="fa fa-caret-down"></i></button>
        <div id="preview" class="w3-dropdown-content w3-bar-block w3-card-4">
          <a href="http://dmichaeljones.com/dmichaeljones" class="w3-bar-item w3-button"><i class="fa fa-user"> </i> dMichaelJones</a>
          <a href="http://dmichaeljones.com/firebase" class="w3-bar-item w3-button"><i class="fa fa-fire"></i> firebase</a>
        </div>
      </div>
      <div class="w3-dropdown-hover w3-section w3-hover-none w3-border-white w3-bottombar w3-hover-border-black">
        <button class="w3-button" onClick="myFunction()">Blog<i class="fa fa-caret-down"></i></button>
        <div id="blog" class="w3-dropdown-content w3-bar-block w3-card-4">
          <a href="#" class="w3-bar-item w3-button"><i class="fa fa-flash"></i> Robotics</a>
          <a href="#" class="w3-bar-item w3-button"><i class="fa fa-microchip"></i> RPi % Arduino</a>
          <a href="#" class="w3-bar-item w3-button"><i class="fa fa-code"></i> Web Dev</a>
        </div>
      </div>
      </div>
    </div>
    <div class="w3-card">
          <!-- Left Column -->
    <div class="w3-twothird">
      <div class="w3-container w3-card w3-white w3-margin-bottom">
        <h2 class="w3-text-grey w3-padding-16"><i class="fa fa-bolt fa-fw w3-margin-right w3-xxlarge w3-text-green"></i>Robotics</h2>
          <div>
          <div class="w3-container">
          <h4 class="w3-opacity"><span href>T-Shirt Cannon - March 5th</span></h4>
          <h6 class="w3-text-green w3-padding">
            <span class="w3-tag w3-blue w3-round">2018</span><span class="w3-tag w3-green w3-round">Cannon</span>
          </h6>
          <div><a href="https://imgur.com/dsQ4vqe"><img src="https://i.imgur.com/dsQ4vqe.jpg" width="100%"/></a>
            <p>The spark for this project started last year. I got the initial concept of the drive working and Joshua Bingham got the rest of drive working. We then went on to build a team and completely redesign the entire cannon. More coming soon.</p>
          </div>
          <hr>
        </div>
        <div class="w3-container">
          <h4 class="w3-opacity"><b>Business Competition - April 7th</b></h4>
          <h6 class="w3-text-green">
            <!--<i class="fa fa-calendar fa-fw w3-margin-right"></i>Mar 2012 - Dec 2014--><span class="w3-tag w3-red w3-round">Business</span><span class="w3-tag w3-blue w3-round">2018</span></h6>
          <div><a href="https://imgur.com/vOERzJI"><img src="https://i.imgur.com/vOERzJI.png" title="business" width="100%"/></a>
            <p>We are a squad of aspring teenagers from a Utah. We are trying to make our ideas real. Our crowning business is Castable: An Innovative Podcast Expirence. More info on what we did for our business competition we did coming soon.</p>
          </div>
          <hr>
        </div>
      </div>
    </div>    
    </div>
    <!-- End Left Column -->

    <!-- Right Column -->
    <div class="w3-third">
      <div class="w3-white w3-text-grey w3-card-4">
        <div class="w3-display-container w3-margin-bottom">
          <a href="https://imgur.com/eln6REJ">
            <img src="https://i.imgur.com/eln6REJ.jpg" title="source: imgur.com" width="100%"/>
          </a>
          <div class="w3-display-bottomleft w3-container w3-text-white">
            <h2>Michael Jones</h2>
          </div>
        </div>
        <div class="w3-container">
          <p><i class="fa fa-microchip fa-fw w3-margin-right w3-large w3-text-green"></i>Roboticist</p>
          <p><i class="fa fa-hand-peace-o fa-fw w3-margin-right w3-large w3-text-green"></i>Love the Outdoors</p>
          <p><i class="fa fa-envelope fa-fw w3-margin-right w3-large w3-text-green"></i><a href="mailto:acetousk@gmail.com">Email Me</a></button></p>
          <hr>

          <p class="w3-large"><b><i class="fa fa-asterisk fa-fw w3-margin-right w3-text-green"></i>Skills</b></p>
          <p>Circuitry</p>
          <div class="w3-light-grey w3-round-xlarge w3-small">
            <div class="w3-container w3-center w3-round-xlarge w3-green" style="width:85%">85%</div>
          </div>
          <p>Programming</p>
          <div class="w3-light-grey w3-round-xlarge w3-small">
            <div class="w3-container w3-center w3-round-xlarge w3-green" style="width:75%">
              <div class="w3-center w3-text-white">75%</div>
            </div>
          </div>
          <p>Team Leadership</p>
          <div class="w3-light-grey w3-round-xlarge w3-small">
            <div class="w3-container w3-center w3-round-xlarge w3-green" style="width:60%">60%</div>
          </div>
          <p>Building</p>
          <div class="w3-light-grey w3-round-xlarge w3-small">
            <div class="w3-container w3-center w3-round-xlarge w3-green" style="width:45%">45%</div>
          </div>
          <br>
          <p class="w3-large w3-text-theme"><b><i class="fa fa-wrench fa-fw w3-margin-right w3-text-green"></i>Projects</b></p>
          <p>Entrepreneur Competition</p>
          <div class="w3-light-grey w3-round-xlarge">
            <div class="w3-round-xlarge w3-green" style="height:24px;width:95%"></div>
          </div>
          <p>T-Shirt Cannon</p>
          <div class="w3-light-grey w3-round-xlarge">
            <div class="w3-round-xlarge w3-green" style="height:24px;width:70%"></div>
          </div>
          <p>Vex Robotics Team</p>
          <div class="w3-light-grey w3-round-xlarge">
            <div class="w3-round-xlarge w3-green" style="height:24px;width:30%"></div>
          </div>
          <br>
        </div>
      </div><br>

      <!-- End Right Column -->
      
    </div>
    <div class="w3-row">
      <footer class="w3-container w3-green w3-center w3-margin-top">
        <p>
          <i class="fa fa-thumbs-up w3-large"></i> Thanks for Checking out My Site
          <i class="fa fa-thumbs-up w3-large"></i>
        </p>
        <a href="https://github.com/acetousk" target="_blank"><i class="fa w3-large fa-github w3-hover-opacity"></a></i>
        <a href="https://facebook.com/acetousk" target="_blank"><i class="fa w3-large fa-facebook-official w3-hover-opacity"></a></i>
        <a href="https://instagram.com/michaeljonesinsta" target="_blank"><i class="fa w3-large fa-instagram w3-hover-opacity"></a></i>
        <p>Check out <a href="https://moqui.org" target="_blank w3-hover-opacity">Moqui</a></p>
      </footer>
    </div>  
  </div>
  </div>
</div>

  
</body>
</html>
              
            
!

CSS

              
                
              
            
!

JS

              
                /**
 * index.js
 * - All our useful JS goes here, awesome!
 */


// Init Vue!
var app = new Vue({
  el: '#demo',
	mounted: function () {
    window.addEventListener('scroll', this.onScroll);
  },
  methods: {
    onScroll: function(e) {
      if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) {
				this.addMoreColors();
      }
    },
    addMoreColors: function() {
      // Simple dummy function to add more data.
      this.colors = this.colors.concat([{ hex: "#f6d258"}, { hex: "#efcec5" }, { hex: "#d1af94" },{ hex: "#97d5e0" }, { hex: "#f6d258" }, { hex: "#efcec5"  }]);
    }
  },
  data: function() {
    return {
      colors: [
        { hex: "#f6d258" },
        { hex: "#efcec5" },
        { hex: "#d1af94" },
        { hex: "#97d5e0" },
        { hex: "#f6d258" },
        { hex: "#efcec5" },
        { hex: "#97d5e0" },
        { hex: "#f6d258" },
        { hex: "#efcec5" },
        { hex: "#d1af94" },
        { hex: "#97d5e0" },   
      ]
    }
  }
})

/**
 * Register Vue Components
 */

// register the grid component
Vue.component('page', {
  template: '#page'
})


Vue.component('page-head', {
  template: '#page-head'
})

Vue.component('page-left', {
  template: '#page-left'
})

Vue.component('page-right', {
  template: '#page-right'
})

Vue.component('category', {
  template: '#category'
})


Vue.component('page-footer', {
  template: '#page-footer'
})


Vue.component('grid', {
  template: '#grid',
  props: ['colors']

})
              
            
!
999px

Console