cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-personicon-teamoctocatpop-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.

            
              <div class="container">


      <div class="row">
        <div class="col-sm-12">
          <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
            <div class="container-fluid">

              <div class="col-md-12">
                <div class="navbar-header">
                  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsible-navbar" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                  </button>
                  <a class="navbar-brand" href="#">MythrilCo</a>
                </div>

                <div class="collapse navbar-collapse" id="collapsible-navbar">
                  <ul class="nav navbar-nav navbar-right">
                    <li>
                      <a href="#aboutme">About Me</a>
                    </li>
                    <li>
                      <a href="#portfolio">Portfolio</a>
                    </li>
                    <li>
                      <a href="#projects">Projects</a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </nav>
        </div>
      </div>



      <div class="jumbotron">
        <h1>Mythril co.</h1>
        <!--<h3>-->
        <!--  <span class="create">Create</span>-->
        <!--  <span class="">+</span>-->
        <!--  <span class="play">Play</span>-->
        <!--  <span class="">+</span>-->
        <!--  <span class="read">Read</span>-->
        <!--</h3>-->
        <hr>
        <h2>
          A Most Creative Studio
        </h2>
        <h5>Population: 1</h5>

        <br />

        <div class="row social">
          <div class="col-xs-6 col-sm-3 col-md-3">
            <a href="https://twitter.com/mythrilco" target="_blank">
              <button class="btn btn-block" >Twitter</button>
            </a>
          </div>
          <div class="col-xs-6 col-sm-3 col-md-3">
            <a href="https://www.linkedin.com/in/gustavo-suarez-4692a462" target="_blank">
              <button class="btn btn-block" >LinkedIn</button>
            </a>
          </div>
          <div class="col-xs-6 col-sm-3 col-md-3">
            <a href="https://github.com/aerze" target="_blank">
              <button class="btn btn-block">GitHub</button>
            </a>
          </div>
          <div class="col-xs-6 col-sm-3 col-md-3">
            <a href="https://www.freecodecamp.com/aerze" target="_blank">
              <button class="btn btn-block" >Free Code Camp</button>
            </a>
          </div>
        </div>
      </div>



      <div class="row about">
        <div id="aboutme" class="col-xs-12 about-me">
          <h2 class="section-header"> About Me </h2>
          <hr />
          <div class="row">
            <div class="col-md-7">
              <h3 class="create"></h3>
              <img class="img-responsive" src="http://mythril.co/img/profileHero_b&w.jpg">
            </div>

            <div class="col-md-5">
              <h3 class="create"><span>Hello, I'm</span> Gus Suarez</h3>
              <p>
                I'm a JavaScript Enthusiast and Developer. It's simply amazing what you can do with JS these days, from robots to video games, to full-stack solutions. I taught myself to program back in 2013 and haven't stopped since.
              </p>
              <p>
                It started with websites, but with the rise of Node.js I quickly learned how to work in the backend as well. Now I work on all kinds of things JS related: webpages, Node.js APIs, SPAs, games, and HTML5 apps.
              </p>
            </div>
          </div>

        </div>

        <div id="portfolio" class="col-xs-12 portfolio">
          <h2 class="section-header text-right"> Portfolio Work </h2>
          <hr />

          <div class="row">
            <div class="col-xs-12">
              <a href="http://www.royalblueinc.com" target="_blank">
                <h3 >RoyalBlueInc.com - <span>Web Design + Code</span></h3>
              </a>
            </div>
            <div class="col-sm-5">
              <h3>Design</h3>
              <p>
                The design here is pretty basic since it's only a single page. This was my first bit of professional web work. The page is responsive and includes a form at the bottom. Not much else to say, I started coding almost immediately with only a basic layout in mind.
              </p>
              <h3>Code</h3>
              <p>
                This page was built with, PureCSS, Stylus, and jQuery; with Node.js + Express powering the backend. The responsiveness was the most difficult thing to work with, I ended up having to use JS to try to make it more responsive when I probably could have just used Bootstrap to get the same effects. As far as interactivity there's and simple form at the bottom that uses jQuery for validation and error states.
              </p>
            </div>
            <div class="col-sm-7">
              <h3></h3>
              <img class="img-responsive" src="http://mythril.co/img/royalblue_pc.png">
            </div>
          </div>
        </div>



        <div id="projects" class="col-xs-12 projects">
          <h2 class="section-header"> Personal Projects </h2>
          <hr />

          <div class="row">
            <div class="col-sm-12">
              <a href="http://mobilemayhem.mythril.co" target="_blank">
                <h3>Mobile Mayhem - <span>Game Design + Code</span></h3>
              </a>
            </div>
            <div class="col-sm-7">
              <h3></h3>
              <img class="img-responsive" src="http://mythril.co/img/mobilemayhem.png">
            </div>
            <div class="col-sm-5">
              <h3>Code</h3>
              <p>
                This is my most recent project in progress. This uses the PhaserJS engine and Ludei's CocoonJS for exporting to android. I rencently tried using Intel's XDK but the overwhelming poor reviews concerning framerate and audio playback issues from other developers has me turning back to PhaserJS. You can follow the link to play the latest demo version on your browser.
              </p>
              <h3>Design</h3>
              <p>
                The idea is to make a Mario-Party/Wario-Ware like game while keeping the game play simple. It's also important to not punish the players for ending/leaving games early or joining in halfway through. The player should decide if they have time to play for 5 minutes or 30.
              </p>
            </div>

            <div class="col-sm-12">
              <a href="http://flyleaf.co" target="_blank">
                <h3 class="text-right">Flyleaf.co - <span>Fullstack, Design + Code</span></h3>
              </a>
            </div>
            <div class="col-sm-5">
              <h3>Design</h3>
              <p>
                Though I haven't been recently, I once was an avid reader of manga (Japanese comics). While reading I noticed that several sites still have a very lame UI experience that's closer to a gallery than a real reading application. So I set out to improve what I could by making a mobile-friendly manga reading webapp. I used the Materialize library to get the clean android, look though it works on iPhones as well.
              </p>
              <h3>Code <span class="github"><a href="https://github.com/aerze/flyleaf">View on Github</a></span></h3>
              <p>
                This project has been particularly fun because I challenged myself to use as few large libraries as possible (no Backbone, no Angular, no React) in an effort to learn more about how things work at the 'vanilla' level. Suffice to say it's been a bit of a pain and I did end up having to use jQuery for animation. Though I was able to create my own 'renderer', akin to my idea of what React is, I built an XHR library and I used Page.js for routing. I was even able to implement a login system using Firebase and only a bit of server-side Node.js. Overall I started mimicking Express' design adapting the way routing works for the front end.
           framwork   </p>
            </div>
            <div class="col-sm-7">
              <h3></h3>
              <img class="img-responsive" src="http://mythril.co/img/flyleaf.png">
            </div>
          </div>
        </div>
      </div>

    </div>
    <hr />

    <div class="jumbotron">
      <h2 class="text-center">Contact me</h2>
      <div class="row social">
        <div class="col-sm-3">
          <button class="btn btn-block" href="https://twitter.com/mythrilco" target="_blank">Twitter</button>
        </div>
        <div class="col-sm-3">
          <button class="btn btn-block" href="https://www.linkedin.com/in/gustavo-suarez-4692a462" target="_blank">LinkedIn</button>
        </div>
        <div class="col-sm-3">
          <button class="btn btn-block" href="https://github.com/aerze" target="_blank">GitHub</button>
        </div>
        <div class="col-sm-3">
          <button class="btn btn-block" href="https://www.freecodecamp.com/aerze" target="_blank">Free Code Camp</button>
        </div>
      </div>
    </div>

            
          
!
            
              /* colors */
color-primary = #4392c1;
color-create = #40b577;
color-play = #4670c4;
color-read = #FF4A6F;
/* color-plus = #E67DAD; */
color-dark = #343434;
color-light = white;

/* fonts */
roboto = 'Roboto', sans-serif;
oswald = 'Oswald', sans-serif;
lato = 'Lato', sans-serif;
shortStack = 'Short Stack', cursive;
arvo = 'Arvo', serif;
sanchez = 'Sanchez', serif;


/* http://colourco.de/analogic/5/%2342c07d */
/* http://colourco.de/analogic/5/%234c76c3 */

body
  font-family: roboto;
  h2
    font-family: oswald;
    font-size: 1.5em;


nav
  color: color-dark;
  .navbar-brand
    font-family: lato;
    font-weight: 400;
    font-size: 1.2em;

  &.navbar
    background: color-light;
    border: none;
    border-bottom: 2px solid color-dark;
    border-radius: 0;

.navbar-default
  .navbar-nav
    > li
      > a:hover
        color: color-primary;

.container
  .jumbotron
    margin-top: 6rem;
    background: color-dark;
    border-radius: 0px;
    color: color-light;
    text-align: center;

    h1
      font-family: lato;
      font-weight: 300;
      font-size: 2.5em;

    .create
      /* font-family: oswald; */

    .play
      font-size: 1.1em;
      /* font-family: shortStack */

    .read:
      /* font-family: sanchez */


    hr
      border-color: color-light;

    .social
      margin: auto;

      button
        margin-bottom: 1em;
        background: color-light;
        color: color-dark;
        text-align: center;

        &:hover
          background: color-primary;
          color: color-light;

  .about
    /* border-top: 1px solid color-dark; */
    background: color-light;

    hr
      border-color: color-dark;

    h2
      font-size: 2.5em;

    h1, h2, h3, h4, h5, h6
      font-family: oswald;
      span
        font-size: 400;
        font-family: lato;
        color: color-dark;
        font-style: italic;
        
        &.github
          font-size: 0.8em;

      /* border-bottom: 1px solid color-dark; */
    .section-header
      padding-top: 1.5em;

  .create
    font-family: oswald;
    color: color-create;

  .play
    font-family: shortStack;
    color: color-play;

  .read
    font-family: sanchez;
    color: color-read;


  .text-right
    text-align: right;

            
          
!
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