Mike F. Ziethlow's Portfolio Page

In this example below you will see how to do a Mike F. Ziethlow's Portfolio Page with some HTML / CSS and Javascript

https://www.freecodecamp.com/challenges/build-a-personal-portfolio-webpage

Thumbnail
This awesome code was written by 149203, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 149203 ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Mike F. Ziethlow's Portfolio Page</title>
  <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>Mike F. Ziethlow</title>

    <!-- Metadata -->
    <link rel="canonical" href="http://mikeziethlow.com">
    <meta name="description" content="Mike F. Ziethlow | Makes stuff. Gets stuff done.">
    <meta name="keywords" content="mike,ziethlow,vegasonthemic,las vegas,busker,audio,video,producer,production">

    <!-- Facebook metadata -->
    <meta property="og:locale" content="en_US">
    <meta property="og:type" content="website">
    <meta property="og:title" content="Mike F. Ziethlow">
    <meta property="og:description" content="Makes stuff. Gets stuff done.">
    <meta property="og:url" content="http://mikeziethlow.com"/>
    <meta property="og:site_name" content="Mike F. Ziethlow">
    <meta property="og:image" content="http://mikeziethlow.com/mike-f-ziethlow-portfolio-wiki-image.png">

    <!-- Twitter metadata -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:description" content="Makes stuff. Gets stuff done.">
    <meta name="twitter:title" content="Mike F. Ziethlow">
    <meta name="twitter:domain" content="Mike F. Ziethlow">
    <meta name="twitter:image" content="mike-f-ziethlow-portfolio-wiki-image.png">
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/cyborg/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='http://mikeziethlow.com/breakpoints.css'>
<link rel='stylesheet prefetch' href='http://mikeziethlow.com/colors.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <body>

<div class="video-container">
    <video preload autoplay loop muted poster="http://mikeziethlow.com/mike-f-ziethlow-portfolio-wiki-image.png">
        <source src="http://mikeziethlow.com/mike-f-ziethlow-portfolio-wiki-video.mp4" type="video/mp4">
        <img src="http://mikeziethlow.com/mike-f-ziethlow-portfolio-wiki-image.png">
        Your browser does not support the video tag.
    </video>
    <div class="overlay-desc">
        <h1>Mike F. Ziethlow</h1>
    </div>
</div>

<main class="container">
    <div class="row">
        <div class="col-xs-12">
            <a name="portfolio"></a>
            <h2 class="text-center">Makes stuff. Gets stuff done.</h2>
            <br>
        </div> <!--col-->
    </div> <!--row-->

    <!-- navigation row -->
    <nav class="row">
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
            <a href="#web-development" style="text-decoration: none;">
                <button class="btn btn-magenta btn-block btn-portfolio" id="tgt-web">Web Dev</button>
            </a>
        </div> <!--col-->
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
            <a href="#audio-engineering" style="text-decoration: none;">
                <button class="btn btn-red btn-block btn-portfolio" id="tgt-audio">Audio</button>
            </a>
        </div> <!--col-->
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
            <a href="#video-production" style="text-decoration: none;">
                <button class="btn btn-orange btn-block btn-portfolio" id="tgt-video">Video</button>
            </a>
        </div> <!--col-->
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
            <a href="#writing" style="text-decoration: none;">
                <button class="btn btn-yellow btn-block btn-portfolio" id="tgt-writing">Writing</button>
        </div> <!--col-->
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
            <a href="#photography" style="text-decoration: none;">
                <button class="btn btn-green btn-block btn-portfolio" id="tgt-photo">Photo</button>
        </div> <!--col-->
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
            <a href="#fundraising" style="text-decoration: none;">
                <button class="btn btn-cyan btn-block btn-portfolio" id="tgt-fundraising">Crowdfunding</button>
        </div> <!--col-->
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
            <a href="#press" style="text-decoration: none;">
                <button class="btn btn-blue btn-block btn-portfolio" id="tgt-press">Press</button>
        </div> <!--col-->
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3">
            <a href="#social-media" style="text-decoration: none;">
                <button class="btn btn-purple btn-block btn-portfolio" id="tgt-social">Social Media</button>
        </div> <!--col-->
    </nav> <!--navigation row-->

    <a name="web-development"></a>
    <h4 class="tgt-web tgt-web-desc">Web Development</h4>
    <p class="tgt-web tgt-web-desc">BOOM. The screen flashed and I had just blown up my grandma. I was in 4th grade, had programmed
        my first BASIC game, and was excited for my whole family to play it - a text-based bomb-diffusion simulator.
        Since then, I've had a love of programming
        that seemed to cross over into any other field I entered. I coded and sold a statistics suite for online poker
        software, wrote scripts to exploit Facebook messaging, and built websites for the businesses I founded. For me,
        the future is in cross-platform web apps - building things that people around the world use and love.</p>

    <a name="audio-engineering"></a>
    <h4 class="tgt-audio tgt-audio-desc">Audio Engineering</h4>
    <p class="tgt-audio tgt-audio-desc">I've lived in a recording studio for the past 16 years. From my first apartment with blankets
        nailed to the walls, to my weekends in college spent sleeping overnight in Michigan State University's Studio F
        control room, to building my own home studio with anechoic-like properties, I've literally lived in a studio for
        the past 16 years.</p>

    <a name="video-production"></a>
    <h4 class="tgt-video tgt-video-desc">Video Production</h4>
    <p class="tgt-video tgt-video-desc">Wayne's World planted the idea in my 10-year-old brain that I might someday be able to have my
        own TV show. Twenty years later, I filmed thousands of music and comedy acts for my Las Vegas TV program, Vegas
        On The Mic. I worked with international sponsors like Shure, as well as local partners to bring the best of Las
        Vegas talent to broadcast television.</p>

    <a name="writing"></a>
    <h4 class="tgt-writing tgt-writing-desc">Writing</h4>
    <p class="tgt-writing tgt-writing-desc">"My hand is the boss of my pencil," fourth grade Mike wrote in his journal, and no truer
        words hath he ever spake. From cold emails to websites to scripts, I've written whatever needed to be written in
        as clean and professional a fashion as I know. I achieved a perfect American College Testing score in
        English.</p>

    <a name="photography"></a>
    <h4 class="tgt-photo tgt-photo-desc">Photography</h4>
    <p class="tgt-photo tgt-photo-desc">Before everyone had a camera in their pocket, I was the guy that developed your photos. I
        worked for all the big photo retailers, selling cameras and teaching photography. As a freelancer, I shot
        products, headshots, weddings, live music, you name it. I enjoy the technical aspects of photography most -
        which probably comes from my background developing film and teaching the how-tos of lighting and
        composition.</p>

    <a name="fundraising"></a>
    <h4 class="tgt-fundraising tgt-fundraising-desc">Crowdfunding</h4>
    <p class="tgt-fundraising tgt-fundraising-desc">Raising money is easy. All you have to do is ask; and most people are simply too afraid.
        That being said, I have a core philosophy on fundraising that also makes it easier: provide an exceptional
        value. And value doesn't have to cost you a lot to supply it. Value is anything meaningful to the recipient. So,
        successful fundraising means showing empathy and putting yourself in someone else's shoes. I've raised tens of
        thousands of dollars for myself and others with this belief.</p>

    <a name="press"></a>
    <h4 class="tgt-press tgt-press-desc">Press</h4>
    <p class="tgt-press tgt-press-desc">My wife Claire is a former reporter and gave me the best advice on how to get press: "Email
        everyone." Sure, she also said to tell an interesting tale, be considerate, and frame the story in such a way
        that it has value for their audience... but the most important piece of advice was to email everyone. I once
        emailed 2 editors and 5 reporters at the same paper. One editor and one reporter said no, the other reporters
        didn't respond, but the other editor said yes... and ultimately assigned the story to the reporter that said
        no.</p>

    <a name="social-media"></a>
    <h4 class="tgt-social tgt-social-desc">Social Media</h4>
    <p class="tgt-social tgt-social-desc">I moved to Las Vegas knowing relatively no one, no clients, no connections. But within one
        year I built a core audience of several thousand people in the industry dedicated to my brand by programming a
        Facebook messaging and posting bot. This wasn't a spam bot, but rather an "introduction bot" that introduced me
        to people who would be happy to hear about my services. After the bot made the introduction, I took over and
        cultivated a strong brand following. We had organic engagement rates of around 30% and email open rates of an
        astounding 51%. This online engagement meant real-world traffic and spending. When I shut down the brand, these
        dedicated followers wrote touching public eulogies.</p>

    <br>
    <div class="row">

        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 tgt-web">
            <div class="panel panel-magenta">
                <div class="panel-heading">
                    <h3 class="panel-title shadow-text"><a href="http://busker.fm" target="_blank">Busker</a></h3>
                </div>
                <div class="panel-body">
                    <a href="http://busker.fm" target="_blank"><img
                            src="http://mikeziethlow.com/thumbs/busker-mike-f-ziethlow-las-vegas-full-stack-web-developer.JPG"
                            class="img-responsive"></a>
                    <p>Founder, Front-End, Design, UX, Functionality, Growth, Product, Risk Management</p>
                </div>
            </div> <!--panel-->
        </div> <!--col-->

        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 tgt-web">
            <div class="panel panel-magenta">
                <div class="panel-heading">
                    <h3 class="panel-title shadow-text"><a href="http://blog.busker.fm" target="_blank">Standing On a
                        Milkcrate</a></h3>
                </div>
                <div class="panel-body">
                    <a href="http://blog.busker.fm" target="_blank"><img
                            src="http://mikeziethlow.com/thumbs/blog-busker-mike-f-ziethlow-las-vegas-full-stack-web-developer.JPG"
                            class="img-responsive"></a>
                    <p>Founder, Front-End, Design, Content</p>
                </div>
            </div> <!--panel-->
        </div> <!--col-->

        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 tgt-web">
            <div class="panel panel-magenta">
                <div class="panel-heading">
                    <h3 class="panel-title shadow-text"><a href="http://vegasonthemic.com" target="_blank">Vegas On The
                        Mic</a></h3>
                </div>
                <div class="panel-body">
                    <a href="http://vegasonthemic.com" target="_blank"><img
                            src="http://mikeziethlow.com/thumbs/vegasonthemic-mike-f-ziethlow-las-vegas-web-development-video-production.jpg"
                            class="img-responsive"></a>
                    <p>Founder, Front-End, Content, Video Production, Sponsor Partnerships</p>
                </div>
            </div> <!--panel-->
        </div> <!--col-->

        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 tgt-web">
            <div class="panel panel-magenta">
                <div class="panel-heading">
                    <h3 class="panel-title shadow-text"><a
                            href="https://web.archive.org/web/20110128155239/http://crushthegame.com/" target="_blank">Crush
                        The Game</a></h3>
                </div>
                <div class="panel-body">
                    <a href="https://web.archive.org/web/20110128155239/http://crushthegame.com/" target="_blank"><img
                            src="http://mikeziethlow.com/thumbs/crushthegame-mike-f-ziethlow-las-vegas-full-stack-web-developer.JPG"
                            class="img-responsive"></a>
                    <p>Founder, Front-End, Content, MySQL, Statistics, Sales</p>
                </div>
            </div> <!--panel-->
        </div> <!--col-->


        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 tgt-audio">
            <div class="panel panel-red">
                <div class="panel-heading">
                    <h3 class="panel-title shadow-text"><a href="http://joeyhines.bandcamp.com/album/i-used-to-dream"
                                                           target="_blank">I Used To Dream</a></h3>
                </div>
                <div class="panel-body">
                    <a href="http://joeyhines.bandcamp.com/album/i-used-to-dream" target="_blank"><img
                            src="http://mikeziethlow.com/thumbs/joey-hines-i-used-to-dream-mike-f-ziethlow-las-vegas-audio-engineer-recording-studio-producer.JPG"
                            class="img-responsive"></a>
                    <p>Mixing, Mastering, Engineering</p>
                </div>
            </div> <!--panel-->
        </div> <!--col-->

        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 tgt-audio">
            <div class="panel panel-red">
                <div class="panel-heading">
                    <h3 class="panel-title shadow-text"><a href="http://joshgreenwaymusic.bandcamp.com/album/eulalia"
                                                           target="_blank">Eulalia</a></h3>
                </div>
                <div class="panel-body">
                    <a href="http://joshgreenwaymusic.bandcamp.com/album/eulalia" target="_blank"><img
                            src="http://mikeziethlow.com/thumbs/josh-greenway-eulalia-mike-f-ziethlow-las-vegas-audio-engineer-recording-studio-producer.JPG"
                            class="img-responsive"></a>
                    <p>Mixing, Mastering, Engineering</p>
                </div>
            </div> <!--panel-->
        </div> <!--col-->

        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 tgt-audio">
            <div class="panel panel-red">
                <div class="panel-heading">
                    <h3 class="panel-title shadow-text"><a href="https://canibehappy.bandcamp.com/releases"
                                                           target="_blank">Can I Be Happy?</a></h3>
                </div>
                <div class="panel-body">
                    <a href="https://canibehappy.bandcamp.com/releases" target="_blank"><img
                            src="http://mikeziethlow.com/thumbs/can-i-be-happy-mike-f-ziethlow-las-vegas-audio-engineer-recording-studio-producer.JPG"
                            class="img-responsive"></a>
                    <p>Mixing, Mastering, Engineering, Production, Management, Fundraising</p>
                </div>
            </div> <!--panel-->
        </div> <!--col-->

        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 tgt-audio">
            <div class="panel panel-red">
                <div class="panel-heading">
                    <h3 class="panel-title shadow-text"><a href="https://aislingg.bandcamp.com/releases"
                                                           target="_blank">Honesty + Bravery</a></h3>
                </div>
                <div class="panel-body">
                    <a href="https://aislingg.bandcamp.com/releases" target="_blank"><img
                            src="http://mikeziethlow.com/thumbs/aisling-honesty-bravery-mike-f-ziethlow-las-vegas-audio-engineer-recording-studio-producer.JPG"
                            class="img-responsive"></a>
                    <p>Mixing, Mastering, Engineering</p>
                </div>
            </div> <!--panel-->
        </div> <!--col-->

        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 tgt-audio">
            <div class="panel panel-red">
                <div class="panel-heading">
                    <h3 class="panel-title shadow-text"><a href="http://soniaseelinger.bandcamp.com/album/dont-wait"
                                                           target="_blank">Don't Wait</a></h3>
                </div>
                <div class="panel-body">
                    <a href="http://soniaseelinger.bandcamp.com/album/dont-wait" target="_blank"><img
                            src="http://mikeziethlow.com/thumbs/sonia-seelinger-dont-wait-mike-f-ziethlow-las-vegas-audio-engineer-recording-studio-producer.JPG"
                            class="img-responsive"></a>
                    <p>Mixing, Mastering, Engineering</p>
                </div>
            </div> <!--panel-->
        </div> <!--col-->

        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 tgt-audio">
            <div class="panel panel-red">
                <div class="panel-heading">
                    <h3 class="panel-title shadow-text"><a href="http://shutthehellup.bandcamp.com/releases"
                                                           target="_blank">Shut The Hell Up</a></h3>
                </div>
                <div class="panel-body">
                    <a href="http://shutthehellup.bandcamp.com/releases" target="_blank"><img
                            src="http://mikeziethlow.com/thumbs/shut-the-hell-up-mike-f-ziethlow-las-vegas-audio-engineer-recording-studio-producer.JPG"
                            class="img-responsive"></a>
                    <p>Mixing, Mastering, Engineering, Production, Management, Fundraising</p>
                </div>
            </div> <!--panel-->
        </div> <!--col-->

        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 tgt-audio">
            <div class="panel panel-red">
                <div class="panel-heading">
                    <h3 class="panel-title shadow-text"><a
                            href="https://www.youtube.com/watch?v=6V0-U8gF6WM&list=PL03A1F3DE1B3A6033" target="_blank">Selfish
                        Bastard</a></h3>
                </div>
                <div class="panel-body">
                    <a href="https://www.youtube.com/watch?v=6V0-U8gF6WM&list=PL03A1F3DE1B3A6033" target="_blank"><img
                            src="http://mikeziethlow.com/thumbs/james-shahan-selfish-bastard-mike-f-ziethlow-las-vegas-audio-engineer-recording-studio-producer.JPG"
                            class="img-responsive"></a>
                    <p>Mixing, Mastering, Engineering, Production</p>
                </div>
            </div> <!--panel-->
        </div> <!--col-->

        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 tgt-audio">
            <div class="panel panel-red">
                <div class="panel-heading">
                    <h3 class="panel-title shadow-text"><a href="http://thedeadlanguages.com/" target="_blank">Sharpest
                        Words</a></h3>
                </div>
                <div class="panel-body">
                    <a href="http://thedeadlanguages.com/" target="_blank"><img
                            src="http://mikeziethlow.com/thumbs/dead-languages-sharpest-words-mike-f-ziethlow-las-vegas-audio-engineer-recording-studio-producer.JPG"
                            class="img-responsive"></a>
                    <p>Mixing, Mastering, Engineering, Production, Songwriting, Performance, Fundraising</p>
                </div>
            </div> <!--panel-->
        </div> <!--col-->

        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 tgt-audio">
            <div class="panel panel-red">
                <div class="panel-heading">
                    <h3 class="panel-title shadow-text"><a href="http://thebandmeridian.bandcamp.com/" target="_blank">Listen
                        To Your Breaking Heart</a></h3>
                </div>
                <div class="panel-body">
                    <a href="http://thebandmeridian.bandcamp.com/" target="_blank"><img
                            src="http://mikeziethlow.com/thumbs/meridian-listen-to-your-breaking-heart-mike-f-ziethlow-las-vegas-audio-engineer-recording-studio-producer.JPG"
                            class="img-responsive"></a>
                    <p>Engineering, Production, Songwriting, Performance</p>
                </div>
            </div> <!--panel-->
        </div> <!--col-->

        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 tgt-audio">
            <div class="panel panel-red">
                <div class="panel-heading">
                    <h3 class="panel-title shadow-text"><a
                            href="http://hawksandsnakes.bandcamp.com/album/unweakend-weekend-wolves" target="_blank">Unweakened
                        Weekend Wolves</a></h3>
                </div>
                <div class="panel-body">
                    <a href="http://hawksandsnakes.bandcamp.com/album/unweakend-weekend-wolves" target="_blank"><img
                            src="http://mikeziethlow.com/thumbs/hawks-and-snakes-unweakened-weekend-wolves-mike-f-ziethlow-las-vegas-audio-engineer-recording-studio-producer.JPG"
                            class="img-responsive"></a>
                    <p>Engineering, Production, Performance</p>
                </div>
            </div> <!--panel-->
        </div> <!--col-->

        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 tgt-audio">
            <div class="panel panel-red">
                <div class="panel-heading">
                    <h3 class="panel-title shadow-text"><a
                            href="https://westrinandmowry.bandcamp.com/album/one-week-epiphany" target="_blank">One Week
                        Epiphany</a></h3>
                </div>
                <div class="panel-body">
                    <a href="https://westrinandmowry.bandcamp.com/album/one-week-epiphany" target="_blank"><img
                            src="http://mikeziethlow.com/thumbs/westrin-and-mowry-one-week-epiphany-mike-f-ziethlow-las-vegas-audio-engineer-recording-studio-producer.JPG"
                            class="img-responsive"></a>
                    <p>Mixing, Mastering, Engineering, Production, Songwriting, Performance</p>
                </div>
            </div> <!--panel-->
        </div> <!--col-->

        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 tgt-video">
            <div class="panel panel-orange">
                <div class="panel-heading">
                    <h3 class="panel-title shadow-text"><a href="http://vegasonthemic.com" target="_blank">Vegas On The
                        Mic</a></h3>
                </div>
                <div class="panel-body">
                    <a href="http://vegasonthemic.com" target="_blank"><img
                            src="http://mikeziethlow.com/thumbs/vegasonthemic-mike-f-ziethlow-las-vegas-web-development-video-production.jpg"
                            class="img-responsive"></a>
                    <p>Founder, Direction, Lighting, Production, Scripting, Camera, Editing, Post</p>
                </div>
            </div> <!--panel-->
        </div> <!--col-->

        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 tgt-writing">
            <div class="panel panel-yellow">
                <div class="panel-heading">
                    <h3 class="panel-title shadow-text"><a href="http://blog.busker.fm" target="_blank">Standing On a
                        Milkcrate</a></h3>
                </div>
                <div class="panel-body">
                    <a href="http://blog.busker.fm" target="_blank"><img
                            src="http://mikeziethlow.com/thumbs/blog-busker-mike-f-ziethlow-las-vegas-full-stack-web-developer.JPG"
                            class="img-responsive"></a>
                    <p>Founder, Content, Editing, Web publishing</p>
                </div>
            </div> <!--panel-->
        </div> <!--col-->

        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 tgt-writing">
            <div class="panel panel-yellow">
                <div class="panel-heading">
                    <h3 class="panel-title shadow-text"><a
                            href="https://medium.com/@mikefziethlow/how-facebook-made-me-an-atheist-a5d0e19046c6#.2v2kengib"
                            target="_blank">Medium</a></h3>
                </div>
                <div class="panel-body">
                    <a href="https://medium.com/@mikefziethlow/how-facebook-made-me-an-atheist-a5d0e19046c6#.2v2kengib"
                       target="_blank"><img
                            src="http://mikeziethlow.com/thumbs/how-facebook-made-me-an-atheist-mike-f-ziethlow-las-vegas-author-webmaster-developer.JPG"
                            class="img-responsive"></a>
                    <p>Content, Editing, Blogging</p>
                </div>
            </div> <!--panel-->
        </div> <!--col-->

        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 tgt-photo">
            <div class="panel panel-green">
                <div class="panel-heading">
                    <h3 class="panel-title shadow-text"><a href="https://www.facebook.com/VegasOnTheMic/photos"
                                                           target="_blank">Vegas On The Mic</a></h3>
                </div>
                <div class="panel-body">
                    <a href="https://www.facebook.com/VegasOnTheMic/photos" target="_blank"><img
                            src="http://mikeziethlow.com/thumbs/vegasonthemic-mike-f-ziethlow-las-vegas-photographer-photography.jpg"
                            class="img-responsive"></a>
                    <p>Founder, Photography, Lighting, Photoshop</p>
                </div>
            </div> <!--panel-->
        </div> <!--col-->

        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 tgt-fundraising">
            <div class="panel panel-cyan">
                <div class="panel-heading">
                    <h3 class="panel-title shadow-text"><a
                            href="https://www.kickstarter.com/projects/1392610736/love-lust-and-loneliness/description"
                            target="_blank">Love Lust and Loneliness</a></h3>
                </div>
                <div class="panel-body">
                    <a href="https://www.kickstarter.com/projects/1392610736/love-lust-and-loneliness/description"
                       target="_blank"><img
                            src="http://mikeziethlow.com/thumbs/joshua-jaymz-deezy-love-lust-loneliness-mike-f-ziethlow-las-vegas-kickstarter-fundraising.png"
                            class="img-responsive"></a>
                    <p>Adviser, Video production</p>
                </div>
            </div> <!--panel-->
        </div> <!--col-->

        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 tgt-fundraising">
            <div class="panel panel-cyan">
                <div class="panel-heading">
                    <h3 class="panel-title shadow-text"><a
                            href="https://www.kickstarter.com/projects/2069899012/can-i-be-happy-a-kickstarter-by-josh-joey-and-anna/description"
                            target="_blank">Can I Be Happy?</a></h3>
                </div>
                <div class="panel-body">
                    <a href="https://www.kickstarter.com/projects/2069899012/can-i-be-happy-a-kickstarter-by-josh-joey-and-anna/description"
                       target="_blank"><img
                            src="http://mikeziethlow.com/thumbs/can-i-be-happy-mike-f-ziethlow-las-vegas-audio-engineer-recording-studio-producer.JPG"
                            class="img-responsive"></a>
                    <p>Adviser, Video production, Project management, Fulfillment</p>
                </div>
            </div> <!--panel-->
        </div> <!--col-->

        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 tgt-fundraising">
            <div class="panel panel-cyan">
                <div class="panel-heading">
                    <h3 class="panel-title shadow-text"><a
                            href="https://www.kickstarter.com/projects/candywarpop/candy-warpops-first-full-length-album/description"
                            target="_blank">Transdecadence</a></h3>
                </div>
                <div class="panel-body">
                    <a href="https://www.kickstarter.com/projects/candywarpop/candy-warpops-first-full-length-album/description"
                       target="_blank"><img
                            src="http://mikeziethlow.com/thumbs/candy-warpop-transdecadence-mike-f-ziethlow-las-vegas-kickstarter-fundraising.png"
                            class="img-responsive"></a>
                    <p>Adviser, Video production</p>
                </div>
            </div> <!--panel-->
        </div> <!--col-->

        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 tgt-fundraising">
            <div class="panel panel-cyan">
                <div class="panel-heading">
                    <h3 class="panel-title shadow-text"><a
                            href="https://www.kickstarter.com/projects/291972653/shut-the-hell-up-cd-release/description"
                            target="_blank">Shut The Hell Up</a></h3>
                </div>
                <div class="panel-body">
                    <a href="https://www.kickstarter.com/projects/291972653/shut-the-hell-up-cd-release/description"
                       target="_blank"><img
                            src="http://mikeziethlow.com/thumbs/shut-the-hell-up-mike-f-ziethlow-las-vegas-kickstarter-fundraising.png"
                            class="img-responsive"></a>
                    <p>Adviser, Video production, Project management, Fulfillment</p>
                </div>
            </div> <!--panel-->
        </div> <!--col-->

        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 tgt-fundraising">
            <div class="panel panel-cyan">
                <div class="panel-heading">
                    <h3 class="panel-title shadow-text"><a
                            href="https://www.kickstarter.com/projects/108048105/professionally-printed-terrible-figures-ep/description"
                            target="_blank">The Terrible Figures</a></h3>
                </div>
                <div class="panel-body">
                    <a href="https://www.kickstarter.com/projects/108048105/professionally-printed-terrible-figures-ep/description"
                       target="_blank"><img
                            src="http://mikeziethlow.com/thumbs/terrible-figures-mike-f-ziethlow-las-vegas-kickstarter-fundraising.jpg"
                            class="img-responsive"></a>
                    <p>Adviser</p>
                </div>
            </div> <!--panel-->
        </div> <!--col-->

        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 tgt-fundraising">
            <div class="panel panel-cyan">
                <div class="panel-heading">
                    <h3 class="panel-title shadow-text"><a href="https://www.indiegogo.com/projects/vegasonthemic-com#/"
                                                           target="_blank">Vegas On The Mic</a></h3>
                </div>
                <div class="panel-body">
                    <a href="https://www.indiegogo.com/projects/vegasonthemic-com#/" target="_blank"><img
                            src="http://mikeziethlow.com/thumbs/vegas-on-the-mic-indiegogo-mike-f-ziethlow-las-vegas-kickstarter-fundraising.jpg"
                            class="img-responsive"></a>
                    <p>Campaigning, Video production, Project management, Fulfillment</p>
                </div>
            </div> <!--panel-->
        </div> <!--col-->

        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 tgt-fundraising">
            <div class="panel panel-cyan">
                <div class="panel-heading">
                    <h3 class="panel-title shadow-text"><a
                            href="https://www.kickstarter.com/projects/ziethlow/the-dead-languages-recording-a-debut-5-song-album/description"
                            target="_blank">The Dead Languages</a></h3>
                </div>
                <div class="panel-body">
                    <a href="https://www.kickstarter.com/projects/ziethlow/the-dead-languages-recording-a-debut-5-song-album/description"
                       target="_blank"><img
                            src="http://mikeziethlow.com/thumbs/dead-languages-mike-f-ziethlow-las-vegas-kickstarter-fundraising.jpg"
                            class="img-responsive"></a>
                    <p>Campaigning, Video production, Project management, Fulfillment</p>
                </div>
            </div> <!--panel-->
        </div> <!--col-->

        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 tgt-press">
            <div class="panel panel-blue">
                <div class="panel-heading">
                    <h3 class="panel-title shadow-text"><a
                            href="http://www.reviewjournal.com/view/southwest/valley-resident-puts-his-all-making-music-free"
                            target="_blank">Review-Journal</a></h3>
                </div>
                <div class="panel-body">
                    <a href="http://www.reviewjournal.com/view/southwest/valley-resident-puts-his-all-making-music-free"
                       target="_blank"><img
                            src="http://mikeziethlow.com/thumbs/review-journal-open-mic-mike-f-ziethlow-las-vegas-press-media-public-relations.jpg"
                            class="img-responsive"></a>
                    <p>"Valley resident puts his all into making music for free"</p>
                </div>
            </div> <!--panel-->
        </div> <!--col-->

        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 tgt-press">
            <div class="panel panel-blue">
                <div class="panel-heading">
                    <h3 class="panel-title shadow-text"><a
                            href="http://www.reviewjournal.com/trending/silver-state/vegas-tv-show-wants-boost-locals-national-stage"
                            target="_blank">Review-Journal</a></h3>
                </div>
                <div class="panel-body">
                    <a href="http://www.reviewjournal.com/trending/silver-state/vegas-tv-show-wants-boost-locals-national-stage"
                       target="_blank"><img
                            src="http://mikeziethlow.com/thumbs/review-journal-open-mic-mike-f-ziethlow-las-vegas-press-media-public-relations.jpg"
                            class="img-responsive"></a>
                    <p>"Vegas TV show wants to boost locals to the national stage"</p>
                </div>
            </div> <!--panel-->
        </div> <!--col-->

        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 tgt-press">
            <div class="panel panel-blue">
                <div class="panel-heading">
                    <h3 class="panel-title shadow-text"><a
                            href="http://lasvegasweekly.com/as-we-see-it/2014/jan/17/local-musicians-find-their-tribe-vegas-mic/"
                            target="_blank">Las Vegas Weekly</a></h3>
                </div>
                <div class="panel-body">
                    <a href="http://lasvegasweekly.com/as-we-see-it/2014/jan/17/local-musicians-find-their-tribe-vegas-mic/"
                       target="_blank"><img
                            src="http://mikeziethlow.com/thumbs/las-vegas-weekly-tribe-mike-f-ziethlow-las-vegas-press-media-public-relations.jpg"
                            class="img-responsive"></a>
                    <p>"Local musicians find their tribe with Vegas On The Mic"</p>
                </div>
            </div> <!--panel-->
        </div> <!--col-->

        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 tgt-press">
            <div class="panel panel-blue">
                <div class="panel-heading">
                    <h3 class="panel-title shadow-text"><a
                            href="http://artslammag.com/interviews/aisling-gammill-behind-the-album-honesty-bravery/"
                            target="_blank">SLAM</a></h3>
                </div>
                <div class="panel-body">
                    <a href="http://artslammag.com/interviews/aisling-gammill-behind-the-album-honesty-bravery/"
                       target="_blank"><img
                            src="http://mikeziethlow.com/thumbs/support-local-arts-magazine-mike-f-ziethlow-las-vegas-press-media-public-relations.jpg"
                            class="img-responsive"></a>
                    <p>"Musician Aisling Gammill: behind the album Honesty + Bravery"</p>
                </div>
            </div> <!--panel-->
        </div> <!--col-->

        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 tgt-press">
            <div class="panel panel-blue">
                <div class="panel-heading">
                    <h3 class="panel-title shadow-text"><a
                            href="http://www.reviewjournal.com/view/spring-valley/comedian-s-alien-act-morphed-after-gig-klingon"
                            target="_blank">Review-Journal</a></h3>
                </div>
                <div class="panel-body">
                    <a href="http://www.reviewjournal.com/view/spring-valley/comedian-s-alien-act-morphed-after-gig-klingon"
                       target="_blank"><img
                            src="http://mikeziethlow.com/thumbs/review-journal-alien-warrior-mike-f-ziethlow-las-vegas-press-media-public-relations.jpg"
                            class="img-responsive"></a>
                    <p>"Comedian’s alien act morphed after gig as Klingon"</p>
                </div>
            </div> <!--panel-->
        </div> <!--col-->

        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 tgt-press">
            <div class="panel panel-blue">
                <div class="panel-heading">
                    <h3 class="panel-title shadow-text"><a
                            href="http://lasvegasweekly.com/ae/music/2012/feb/08/local-open-mics-musicians-writers-visual-artists-a/"
                            target="_blank">Las Vegas Weekly</a></h3>
                </div>
                <div class="panel-body">
                    <a href="http://lasvegasweekly.com/ae/music/2012/feb/08/local-open-mics-musicians-writers-visual-artists-a/"
                       target="_blank"><img
                            src="http://mikeziethlow.com/thumbs/las-vegas-weekly-open-mic-night-mike-f-ziethlow-las-vegas-press-media-public-relations.jpg"
                            class="img-responsive"></a>
                    <p>"Local open mics for musicians, writers, visual artists and their groupies"</p>
                </div>
            </div> <!--panel-->
        </div> <!--col-->

        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 tgt-press">
            <div class="panel panel-blue">
                <div class="panel-heading">
                    <h3 class="panel-title shadow-text"><a href="http://knpr.org/desert-companion/53-great-bars"
                                                           target="_blank">Desert Companion</a></h3>
                </div>
                <div class="panel-body">
                    <a href="http://knpr.org/desert-companion/53-great-bars" target="_blank"><img
                            src="http://mikeziethlow.com/thumbs/desert-companion-53-great-bars-mike-f-ziethlow-las-vegas-press-media-public-relations.jpg"
                            class="img-responsive"></a>
                    <p>"53 great bars: Money Plays"</p>
                </div>
            </div> <!--panel-->
        </div> <!--col-->

        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 tgt-press">
            <div class="panel panel-blue">
                <div class="panel-heading">
                    <h3 class="panel-title shadow-text"><a
                            href="http://lasvegasweekly.com/as-we-see-it/2011/may/11/high-tech-savvy/" target="_blank">Las
                        Vegas Weekly</a></h3>
                </div>
                <div class="panel-body">
                    <a href="http://lasvegasweekly.com/as-we-see-it/2011/may/11/high-tech-savvy/" target="_blank"><img
                            src="http://mikeziethlow.com/thumbs/las-vegas-weekly-musical-dreams-high-tech-savvy-mike-f-ziethlow-las-vegas-press-media-public-relations.jpg"
                            class="img-responsive"></a>
                    <p>"Musical dreams and high tech savvy"</p>
                </div>
            </div> <!--panel-->
        </div> <!--col-->

        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 tgt-press">
            <div class="panel panel-blue">
                <div class="panel-heading">
                    <h3 class="panel-title shadow-text"><a
                            href="http://www.reviewjournal.com/business/casinos-gaming/shutdown-internet-poker-hurts-players"
                            target="_blank">Review-Journal</a></h3>
                </div>
                <div class="panel-body">
                    <a href="http://www.reviewjournal.com/business/casinos-gaming/shutdown-internet-poker-hurts-players"
                       target="_blank"><img
                            src="http://mikeziethlow.com/thumbs/review-journal-shutdown-internet-poker-mike-f-ziethlow-las-vegas-press-media-public-relations.jpg"
                            class="img-responsive"></a>
                    <p>"Shutdown of Internet poker hurts players"</p>
                </div>
            </div> <!--panel-->
        </div> <!--col-->

        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 tgt-social">
            <div class="panel panel-purple">
                <div class="panel-heading">
                    <h3 class="panel-title shadow-text"><a href="https://www.facebook.com/VegasOnTheMic/"
                                                           target="_blank">Facebook</a></h3>
                </div>
                <div class="panel-body">
                    <a href="https://www.facebook.com/VegasOnTheMic/" target="_blank"><img
                            src="http://mikeziethlow.com/thumbs/facebook-vegas-on-the-mic-mike-f-ziethlow-las-vegas-social-media.JPG"
                            class="img-responsive"></a>
                    <p>Content, Marketing, Strategy, Engagement, Photography</p>
                </div>
            </div> <!--panel-->
        </div> <!--col-->

        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 tgt-social">
            <div class="panel panel-purple">
                <div class="panel-heading">
                    <h3 class="panel-title shadow-text"><a href="https://www.youtube.com/user/VegasOnTheMic"
                                                           target="_blank">YouTube</a></h3>
                </div>
                <div class="panel-body">
                    <a href="https://www.youtube.com/user/VegasOnTheMic" target="_blank"><img
                            src="http://mikeziethlow.com/thumbs/youtube-vegas-on-the-mic-mike-f-ziethlow-las-vegas-social-media.JPG"
                            class="img-responsive"></a>
                    <p>Content, Marketing, Strategy, Virality, Video Production</p>
                </div>
            </div> <!--panel-->
        </div> <!--col-->

    </div> <!--row-->

</main>

<footer class="navbar-default navbar-fixed-bottom">
    <div class="container-fluid">
        <div class="row">
            <div class="hidden-xs col-sm-6 visible-sm visible-md visible-lg">
                <p style="padding-top: 16px;">&copy; 2016 Mike F. Ziethlow</p>
            </div>
            <div class="col-xs-12 col-sm-6">
                <p class="pull-right" style="margin-top: 8px;"><a href="https://www.facebook.com/MikeFZiethlow" target="_blank"><i class="fa fa-facebook-official fa-2x" aria-hidden="true"></i></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://www.linkedin.com/in/mikefziethlow" target="_blank"><i class="fa fa-linkedin fa-2x" aria-hidden="true"></i></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://github.com/149203" target="_blank"><i class="fa fa-github fa-2x" aria-hidden="true"></i></a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://codepen.io/149203/" target="_blank"><i class="fa fa-codepen fa-2x" aria-hidden="true"></i></a></p>
            </div>
        </div>
    </div>
</footer>

</body>
  <script src='https://code.jquery.com/jquery-2.2.3.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/149203/mike-f-ziethlowandaposs-portfolio-page-reRdXP */
.video-container {
    position: relative;
}

video {
    height: auto;
    vertical-align: middle;
    width: 100%;
}

.overlay-desc {
    background: rgba(0, 0, 0, 0);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

h1 {
    font-size: 9vw;
    text-align: center;
}

button.btn-portfolio {
    margin-bottom: 20px;
}

@media (max-width: 959px) and (min-width: 800px) {
    h2 {
        font-size: 4vw;
    }
}

@media (max-width: 799px) {
    h2 {
        font-size: 5vw;
    }
}

.shadow-text {
    color: #ffffff;
    text-shadow: 1px 1px 9px rgba(0, 0, 0, 0.7);
    letter-spacing: .7px;
}

html {
    overflow-y: scroll;
}

.panel-body p {
    margin-top: 10px;
}

.panel-heading h3 {
    line-height: normal;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: block;
}

@media (min-width: 960px) { /* col-lg */
    .panel-body {
        min-height: 216px;
        max-height: 216px;
    }
}

@media (max-width: 959px) and (min-width: 600px) { /* col-md */
    .panel-body {
        min-height: 230px;
        max-height: 230px;
    }
}

@media (max-width: 599px) and (min-width: 480px) { /* col-sm */
    .panel-body {
        min-height: 216px;
        max-height: 216px;
    }
}

main {
    margin-bottom: 30px;
}

i.fa {
    color: #888888;
}

i.fa:hover {
    color: #ffffff;
}

i.fa:active {
    color: #ffffff;
}

/*Downloaded from https://www.codeseek.co/149203/mike-f-ziethlowandaposs-portfolio-page-reRdXP */
$(document).ready(function(){
   
   // First hide everything
   
   $('.tgt-web-desc').hide();
   $('.tgt-audio-desc').hide();
   $('.tgt-video-desc').hide();
   $('.tgt-writing-desc').hide();
   $('.tgt-photo-desc').hide();
   $('.tgt-fundraising-desc').hide();
   $('.tgt-press-desc').hide();
   $('.tgt-social-desc').hide();

   // Clicking a portfolio button will display that portfolio
      
   $('#tgt-web').click(function() {
      $('.tgt-web').show();
      $('.tgt-audio').hide();
      $('.tgt-video').hide();
      $('.tgt-writing').hide();
      $('.tgt-photo').hide();
      $('.tgt-fundraising').hide();
      $('.tgt-press').hide();
      $('.tgt-social').hide();
   });

   $('#tgt-audio').click(function() {
      $('.tgt-web').hide();
      $('.tgt-audio').show();
      $('.tgt-video').hide();
      $('.tgt-writing').hide();
      $('.tgt-photo').hide();
      $('.tgt-fundraising').hide();
      $('.tgt-press').hide();
      $('.tgt-social').hide();
   });

   $('#tgt-video').click(function() {
      $('.tgt-web').hide();
      $('.tgt-audio').hide();
      $('.tgt-video').show();
      $('.tgt-writing').hide();
      $('.tgt-photo').hide();
      $('.tgt-fundraising').hide();
      $('.tgt-press').hide();
      $('.tgt-social').hide();
   });

   $('#tgt-writing').click(function() {
      $('.tgt-web').hide();
      $('.tgt-audio').hide();
      $('.tgt-video').hide();
      $('.tgt-writing').show();
      $('.tgt-photo').hide();
      $('.tgt-fundraising').hide();
      $('.tgt-press').hide();
      $('.tgt-social').hide();
   });

   $('#tgt-photo').click(function() {
      $('.tgt-web').hide();
      $('.tgt-audio').hide();
      $('.tgt-video').hide();
      $('.tgt-writing').hide();
      $('.tgt-photo').show();
      $('.tgt-fundraising').hide();
      $('.tgt-press').hide();
      $('.tgt-social').hide();
   });

   $('#tgt-fundraising').click(function() {
      $('.tgt-web').hide();
      $('.tgt-audio').hide();
      $('.tgt-video').hide();
      $('.tgt-writing').hide();
      $('.tgt-photo').hide();
      $('.tgt-fundraising').show();
      $('.tgt-press').hide();
      $('.tgt-social').hide();
   });

   $('#tgt-press').click(function() {
      $('.tgt-web').hide();
      $('.tgt-audio').hide();
      $('.tgt-video').hide();
      $('.tgt-writing').hide();
      $('.tgt-photo').hide();
      $('.tgt-fundraising').hide();
      $('.tgt-press').show();
      $('.tgt-social').hide();
   });

   $('#tgt-social').click(function() {
      $('.tgt-web').hide();
      $('.tgt-audio').hide();
      $('.tgt-video').hide();
      $('.tgt-writing').hide();
      $('.tgt-photo').hide();
      $('.tgt-fundraising').hide();
      $('.tgt-press').hide();
      $('.tgt-social').show();
   });

});

Comments