sebastianbachmann/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

    <title>Sebastian Bachmann - Web Developer</title>

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/styles.css">


    <!-- Custom styles for this template go here -->


    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body data-spy="scroll" data-target=".navbar">

    <!-- Fixed navbar -->
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <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="#">Sebastian Bachmann</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="index.html">Home</a></li>
            <li><a href="#projects">Projects</a></li>
            <li><a href="#portfolio">Portfolio</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#faqs">FAQs</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <div class="container-fluid">

      <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
          <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
          <li data-target="#carousel-example-generic" data-slide-to="1"></li>
          <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">

          <div class="item active">
            <img src="img/carousel-00-scaled.jpg" alt="A backpacker looking into a valley" class="img-responsive">
          </div>

          <div class="item">
            <img src="img/carousel-01-scaled.jpg" alt="A woman raising her hand linke Rocky Balboa" class="img-responsive">
          </div>

          <div class="item">
            <img src="img/carousel-02-scaled.jpg" alt="A Macbook Pro with workhard anywhere slogan" class="img-responsive">
          </div>
        </div> <!-- END .carousel-inner -->

        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div> <!-- END .carousel-example-generic -->

    </div><!-- .container-fluid -->

    <div class="container anchor" id="portfolio">
      <!-- Example row of columns -->
      <div class="row">
        <div class="header"><h1>tl;dr</h1></div>
        <div class="col-md-4">
          <h2>Portfolio Concept</h2>
          <p>I was working as an <strong>App-Developer</strong> the past years, so i only have experience building native iOS App. I can not share the Apps publicly, but you can hit me up and i will send you App-Store links.</p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
        </div><!-- /col -->

        <div class="col-md-4">
          <h2>Project Goals</h2>
          <p>So. Since i am doing this <strong>Fulltime</strong> i can commit upto 40h per Week. I am very keen on learning everything i need to know to call myself a <strong>Fullstack-Developer</strong> </p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
        </div><!-- /col -->

        <div class="col-md-4">
          <h2>Course Goals</h2>
          <p>As mentioed above, i was working as an App Developer the past years. I want to change career paths, which is why i am taking this <strong>Web Developer</strong> course. I hope to work as a Digital Nomad some day. </p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
        </div><!-- /col -->

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

    <hr>

    <div class="container anchor" id="projects">
      <!-- Example row of columns -->
      <div class="row">
        <div class="header"><h1>Projects</h1></div>
        <div class="col-md-2 col-xs-12">
          <h2>Project Heisenberg</h2>
          <p>No speeches. Short speech. You lost your partner today. What's his name - Emilio? Emilio is going to prison. The DEA took all your money, your lab. You got nothing.</p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
        </div><!-- /col -->

        <div class="col-md-2 col-xs-12">
          <h2>Project Pinkman</h2>
          <p>Four pounds... foooour pounds as if two pounds wasn't bad enough. we're talking two three hundred boxes of sinus pills there ain't that many Smurfs in the world. So no </p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
        </div><!-- /col -->

        <div class="col-md-2 col-xs-12">
          <h2>Project Schrader</h2>
          <p>Sorry, buddy. No can do. Pain is my foot in your ass. Ooh, heyo... pool party! Hey, I don't get the gag, jackoff. Who is this? So...</p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
        </div><!-- /col -->

        <div class="col-md-2 col-xs-12">
          <h2>Project Godman</h2>
          <p>Today's your lucky day. Look around, kiddo - it's all yours. You are now the owner of this fine establishment. Free? Oh ladies, cover your ears. No... not free. Look,</p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
        </div><!-- /col -->

        <div class="col-md-2 col-xs-12">
          <h2>Project White</h2>
          <p>A tiara... a white gold tiara for a newborn baby. Yeah... you know, I think she got that at Gertrude Zachary's in Nob Hill. I mean that thing must have</p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
        </div><!-- /col -->

        <div class="col-md-2 col-xs-12">
          <h2>Project Salamanca</h2>
          <p>What's your name? Have a seat, Heisenberg. What is this shit? This is blue. TIGHT! Tight, tight, YEAH! Oh, blue, yellow, pink. Whatever, man. Just keep bringing me that. Alright.</p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
        </div><!-- /col -->

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

    <div class="container anchor" id="faqs">
      <div class="row">
        <div class="header"><h1>FAQs</h1></div>
        <div class="col-md-12">
          <div class="panel-group" id="accordion">
            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title">
                  <a data-toggle="collapse" data-parent="#missingcode" href="#collapseOne">
                    Why did you quit App development?
                  </a>
                </h4>
              </div>
              <div id="collapseOne" class="panel-collapse collapse">
                <div class="panel-body">
                  Because i was a bit frustrated with the complete Appl Ecosystem. If your app passes the review is kind of a gamble, the Hard- and Software is not like on the old days. Long story short, i needed a change in technology.
                </div>
              </div>
            </div>
            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title">
                  <a data-toggle="collapse" data-parent="#missingcode" href="#collapseTwo">
                    Why do you want to become a Web-Developer?
                  </a>
                </h4>
              </div>
              <div id="collapseTwo" class="panel-collapse collapse">
                <div class="panel-body">
                  I like Web-Development. You immediately see your changes. You can push your Web-App where ever you want in short time. Probably everyone can use your app.

                </div>
              </div>
            </div>
            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title">
                  <a data-toggle="collapse" data-parent="#missingcode" href="#collapseThree">
                    Why do you want to be a digital Nomad?
                  </a>
                </h4>
              </div>
              <div id="collapseThree" class="panel-collapse collapse">
                <div class="panel-body">
                  I like to travel around the world and work remotely on different things. I want to meet different kind of people. I think this is necessary to make the world a better place.
                </div>
              </div>
            </div>
          </div>
      </div>
    </div>

    <div class="container anchor" id="about">
      <div class="row">
        <div class="header"><h1>About Me</h1></div>

        <div class="col-md-4">
          <div class="image ">
            <img src="img/me.jpg" alt="Kitten" class="img-responsive">
          </div><!-- end image -->
          <div class="intro">
            <p>Hi, i am Sebastian</p>
          </div><!-- end intro column -->
        </div>

        <div class="col-md-4">
          <div class="skills">
            <h3>My Skills</h3>
            <ul id="skill-list">
              <li>Swift</li>
              <li>ObjC</li>
            </ul>
          </div><!-- end skill column -->
        </div>

        <div class="col-md-4" id="moreaboutme">
          <h3>More About Me</h3>
          <p>
            So. If you want to know more about me, you can ask me anything on my <a href="https://github.com/sebastianbachmann/ama"><strong>Ask Me Anything</strong></a> Github page.
          </p>
      </div>
      </div>
    </div>
  </div>

    <div class="container anchor" id="contact">
      <div class="row">
        <div class="col-md-12">
          <div class="header"><h1>Contact Me</h1></div>
        </div>
        <div class="col-md-4">
        </div>
        <div class="col-md-4">
          <span class="glyphicon glyphicon-thumbs-up"><a href="https://github.com/sebastianbachmann" target="_blank"> Github</a></span><br>
          <span class="glyphicon glyphicon-bullhorn"><a href="https://twitter.com/buk" target="_blank"> Twitter</a></span> <br />
          <span class="glyphicon glyphicon-envelope"><a href="mailto:sebastian.bachmann@gmail.com?subject=[CareerFoundry] Please contact me"> Drop me an Email</a></span>
        </div>
        <div class="col-md-4">
        </div>
          </div>
        </div>
      </div>


    <!-- ============================= -->
    <!-- All your JavaScript comes now -->
    <!-- ============================= -->

    <!-- Bootstrap core JS -->

    <!-- Can place script tags with JavaScript files here -->

    <!-- BOOTSTRAP CORE JS FIlES -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <!-- SMOOTH SCROLLING -->

    <script type="text/javascript">
      var $root = $('html, body');
      $('.navbar-nav a').click(function() {
        var href = $.attr(this, 'href');
        if (href != undefined && href != '#') {
          $root.animate({
            scrollTop: $(href).offset().top
          }, 500, function () {
            window.location.hash = href;
          });
        }
        return false;
      });
    </script>

  </body>
</html>

## styles.css
* {
  box-sizing: border-box;
}

body {
  background-color: #fffeea;
  color: #34495e;
  padding-top: 65px;
  position: relative;
}


.jumbotron {
  background-image: url("../img/alejandro-escamilla-5-scaled.jpg");
  padding-top: 65px;
  background-position: center;
  background-size: cover;
}

.jumbotron {
  color: #202020;
}

.jumbotron p {
  color: #202020;
}

/* NAVIGATION */
.navbar {
  top: 0;
  height: 65px;
  position: fixed;
  width: 100%;
  background-color: black;
}

#navbar a {
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
}

#navbar ul li {
  /*display: inline-block;*/
}


.navbar-default .navbar-brand {
  color: white;
  text-align: center;
  line-height: 20px;
}

/* ANCHOR */
.anchor {
  padding-top: 50px;
}


/* Carousel */

.container-fluid {
  padding-left: 0px;
  padding-right: 0px;
}

.container {
  margin: 0 auto;
  width: 80%;
}

.header h1 {
  text-align: center;
}

.column {
  display: inline-block;
  float: left;
  width: 33.33333333333333%;
  padding-right: 20px;
}

.main-text {
  padding-top: 60px;
  clear: both;
}

.image img {
  width: 100%;
  position: static;
}

.skills {
  /*background-color: #5AD4C2;*/
  color: black;
}

#skill-list {
  margin-left: 50px;
}

/* Typography */
h1, h2, h3 {
  font-family: Futura, Helvetica, Arial, sans-serif;
}

p, li {
  font-family: Georgia, sans-serif;
}

.intro p {
  font-size: 3em;
  font-weight: 100;
  font-family: Futura, Helvetica, Arial, sans-serif;
  -webkit-margin-before: 0;
}

.skills h3 {
  text-align: center;
  text-transform: uppercase;
}


/* CONTACT PAGE */

.column {
  display: inline-block;
  float: left;
  width: 33%;
  padding-right: 20px;
}

.location {
  padding-top: 60px;
  clear: both;
}

.location img {
  width: 50%;
  position: static;
}

.offline {
  color: #000;
}

#offline-list {
  margin-left: 200px;
}

/* Typography */
h1, h2, h3 {
  font-family: Futura, Helvetica, Arial, sans-serif;
}

p, li {
  font-family: Georgia, sans-serif;
}

#moreaboutme a {
  color: black;
}

.online p {
  font-size: 3em;
  font-weight: 100;
  font-family: Futura, Helvetica, Arial, sans-serif;
  -webkit-margin-before: 0;
}

.offline h2 {
  text-align: center;
}

/* IMAGES Responsive */

.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
  background-color: yellow;
}

/* CONTACT SECTION */

#contact {
  background-image: url("../img/contact-parallax.jpg");
  background-attachment: fixed;
  background-size: cover;
  padding: 100px;
  height: 500px;
  width: 100%;
}

#contact .header, a, .glyphicon {
  color: white;
}

/* MEDIA QUERRIES */

@media (max-width: 480px) {
  body {
    background-color: red;
  }
}

@media (max-width: 768px) {
.navbar-collapse {
  padding-left: 10px;
  padding-right: 10px;
  float: right;
  border: none;
  background-color: lightgrey;
  vertical-align: center;
}

}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- The above 3 meta tags must come first in the head; any other head content must come after these tags -->

	<title>Sebastian Bachmann - Web Developer</title>

	<!-- Bootstrap core CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
	<link rel="stylesheet" href="css/styles.css">


	<!-- Custom styles for this template go here -->


	<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
	<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->
	</head>

	<body data-spy="scroll" data-target=".navbar">

	<!-- Fixed navbar -->
	<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
	<div class="container-fluid">
	<div class="navbar-header">
	<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
	<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="#">Sebastian Bachmann</a>
	</div>
	<div id="navbar" class="navbar-collapse collapse">
	<ul class="nav navbar-nav navbar-right">
	<li><a href="index.html">Home</a></li>
	<li><a href="#projects">Projects</a></li>
	<li><a href="#portfolio">Portfolio</a></li>
	<li><a href="#about">About</a></li>
	<li><a href="#faqs">FAQs</a></li>
	<li><a href="#contact">Contact</a></li>
	</ul>
	</div><!--/.nav-collapse -->
	</div>
	</nav>

	<div class="container-fluid">

	<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
	<!-- Indicators -->
	<ol class="carousel-indicators">
	<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
	<li data-target="#carousel-example-generic" data-slide-to="1"></li>
	<li data-target="#carousel-example-generic" data-slide-to="2"></li>
	</ol>

	<!-- Wrapper for slides -->
	<div class="carousel-inner" role="listbox">

	<div class="item active">
	<img src="img/carousel-00-scaled.jpg" alt="A backpacker looking into a valley" class="img-responsive">
	</div>

	<div class="item">
	<img src="img/carousel-01-scaled.jpg" alt="A woman raising her hand linke Rocky Balboa" class="img-responsive">
	</div>

	<div class="item">
	<img src="img/carousel-02-scaled.jpg" alt="A Macbook Pro with workhard anywhere slogan" class="img-responsive">
	</div>
	</div> <!-- END .carousel-inner -->

	<!-- Controls -->
	<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
	<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
	<span class="sr-only">Previous</span>
	</a>
	<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
	<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
	<span class="sr-only">Next</span>
	</a>
	</div> <!-- END .carousel-example-generic -->

	</div><!-- .container-fluid -->

	<div class="container anchor" id="portfolio">
	<!-- Example row of columns -->
	<div class="row">
	<div class="header"><h1>tl;dr</h1></div>
	<div class="col-md-4">
	<h2>Portfolio Concept</h2>
	<p>I was working as an <strong>App-Developer</strong> the past years, so i only have experience building native iOS App. I can not share the Apps publicly, but you can hit me up and i will send you App-Store links.</p>
	<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
	</div><!-- /col -->

	<div class="col-md-4">
	<h2>Project Goals</h2>
	<p>So. Since i am doing this <strong>Fulltime</strong> i can commit upto 40h per Week. I am very keen on learning everything i need to know to call myself a <strong>Fullstack-Developer</strong> </p>
	<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
	</div><!-- /col -->

	<div class="col-md-4">
	<h2>Course Goals</h2>
	<p>As mentioed above, i was working as an App Developer the past years. I want to change career paths, which is why i am taking this <strong>Web Developer</strong> course. I hope to work as a Digital Nomad some day. </p>
	<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
	</div><!-- /col -->

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

	<hr>

	<div class="container anchor" id="projects">
	<!-- Example row of columns -->
	<div class="row">
	<div class="header"><h1>Projects</h1></div>
	<div class="col-md-2 col-xs-12">
	<h2>Project Heisenberg</h2>
	<p>No speeches. Short speech. You lost your partner today. What's his name - Emilio? Emilio is going to prison. The DEA took all your money, your lab. You got nothing.</p>
	<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
	</div><!-- /col -->

	<div class="col-md-2 col-xs-12">
	<h2>Project Pinkman</h2>
	<p>Four pounds... foooour pounds as if two pounds wasn't bad enough. we're talking two three hundred boxes of sinus pills there ain't that many Smurfs in the world. So no </p>
	<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
	</div><!-- /col -->

	<div class="col-md-2 col-xs-12">
	<h2>Project Schrader</h2>
	<p>Sorry, buddy. No can do. Pain is my foot in your ass. Ooh, heyo... pool party! Hey, I don't get the gag, jackoff. Who is this? So...</p>
	<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
	</div><!-- /col -->

	<div class="col-md-2 col-xs-12">
	<h2>Project Godman</h2>
	<p>Today's your lucky day. Look around, kiddo - it's all yours. You are now the owner of this fine establishment. Free? Oh ladies, cover your ears. No... not free. Look,</p>
	<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
	</div><!-- /col -->

	<div class="col-md-2 col-xs-12">
	<h2>Project White</h2>
	<p>A tiara... a white gold tiara for a newborn baby. Yeah... you know, I think she got that at Gertrude Zachary's in Nob Hill. I mean that thing must have</p>
	<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
	</div><!-- /col -->

	<div class="col-md-2 col-xs-12">
	<h2>Project Salamanca</h2>
	<p>What's your name? Have a seat, Heisenberg. What is this shit? This is blue. TIGHT! Tight, tight, YEAH! Oh, blue, yellow, pink. Whatever, man. Just keep bringing me that. Alright.</p>
	<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
	</div><!-- /col -->

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

	<div class="container anchor" id="faqs">
	<div class="row">
	<div class="header"><h1>FAQs</h1></div>
	<div class="col-md-12">
	<div class="panel-group" id="accordion">
	<div class="panel panel-default">
	<div class="panel-heading">
	<h4 class="panel-title">
	<a data-toggle="collapse" data-parent="#missingcode" href="#collapseOne">
	Why did you quit App development?
	</a>
	</h4>
	</div>
	<div id="collapseOne" class="panel-collapse collapse">
	<div class="panel-body">
	Because i was a bit frustrated with the complete Appl Ecosystem. If your app passes the review is kind of a gamble, the Hard- and Software is not like on the old days. Long story short, i needed a change in technology.
	</div>
	</div>
	</div>
	<div class="panel panel-default">
	<div class="panel-heading">
	<h4 class="panel-title">
	<a data-toggle="collapse" data-parent="#missingcode" href="#collapseTwo">
	Why do you want to become a Web-Developer?
	</a>
	</h4>
	</div>
	<div id="collapseTwo" class="panel-collapse collapse">
	<div class="panel-body">
	I like Web-Development. You immediately see your changes. You can push your Web-App where ever you want in short time. Probably everyone can use your app.

	</div>
	</div>
	</div>
	<div class="panel panel-default">
	<div class="panel-heading">
	<h4 class="panel-title">
	<a data-toggle="collapse" data-parent="#missingcode" href="#collapseThree">
	Why do you want to be a digital Nomad?
	</a>
	</h4>
	</div>
	<div id="collapseThree" class="panel-collapse collapse">
	<div class="panel-body">
	I like to travel around the world and work remotely on different things. I want to meet different kind of people. I think this is necessary to make the world a better place.
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>

	<div class="container anchor" id="about">
	<div class="row">
	<div class="header"><h1>About Me</h1></div>

	<div class="col-md-4">
	<div class="image ">
	<img src="img/me.jpg" alt="Kitten" class="img-responsive">
	</div><!-- end image -->
	<div class="intro">
	<p>Hi, i am Sebastian</p>
	</div><!-- end intro column -->
	</div>

	<div class="col-md-4">
	<div class="skills">
	<h3>My Skills</h3>
	<ul id="skill-list">
	<li>Swift</li>
	<li>ObjC</li>
	</ul>
	</div><!-- end skill column -->
	</div>

	<div class="col-md-4" id="moreaboutme">
	<h3>More About Me</h3>
	<p>
	So. If you want to know more about me, you can ask me anything on my <a href="https://github.com/sebastianbachmann/ama"><strong>Ask Me Anything</strong></a> Github page.
	</p>
	</div>
	</div>
	</div>
	</div>

	<div class="container anchor" id="contact">
	<div class="row">
	<div class="col-md-12">
	<div class="header"><h1>Contact Me</h1></div>
	</div>
	<div class="col-md-4">
	</div>
	<div class="col-md-4">
	<span class="glyphicon glyphicon-thumbs-up"><a href="https://github.com/sebastianbachmann" target="_blank"> Github</a></span><br>
	<span class="glyphicon glyphicon-bullhorn"><a href="https://twitter.com/buk" target="_blank"> Twitter</a></span> <br />
	<span class="glyphicon glyphicon-envelope"><a href="mailto:sebastian.bachmann@gmail.com?subject=[CareerFoundry] Please contact me"> Drop me an Email</a></span>
	</div>
	<div class="col-md-4">
	</div>
	</div>
	</div>
	</div>



	<!-- ============================= -->
	<!-- All your JavaScript comes now -->
	<!-- ============================= -->

	<!-- Bootstrap core JS -->

	<!-- Can place script tags with JavaScript files here -->

	<!-- BOOTSTRAP CORE JS FIlES -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

	<!-- SMOOTH SCROLLING -->

	<script type="text/javascript">
	var $root = $('html, body');
	$('.navbar-nav a').click(function() {
	var href = $.attr(this, 'href');
	if (href != undefined && href != '#') {
	$root.animate({
	scrollTop: $(href).offset().top
	}, 500, function () {
	window.location.hash = href;
	});
	}
	return false;
	});
	</script>

	</body>
	</html>
	* {
	box-sizing: border-box;
	}

	body {
	background-color: #fffeea;
	color: #34495e;
	padding-top: 65px;
	position: relative;
	}


	.jumbotron {
	background-image: url("../img/alejandro-escamilla-5-scaled.jpg");
	padding-top: 65px;
	background-position: center;
	background-size: cover;
	}

	.jumbotron {
	color: #202020;
	}

	.jumbotron p {
	color: #202020;
	}

	/* NAVIGATION */
	.navbar {
	top: 0;
	height: 65px;
	position: fixed;
	width: 100%;
	background-color: black;
	}

	#navbar a {
	color: white;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-decoration: none;
	}

	#navbar ul li {
	/display: inline-block;/
	}


	.navbar-default .navbar-brand {
	color: white;
	text-align: center;
	line-height: 20px;
	}

	/* ANCHOR */
	.anchor {
	padding-top: 50px;
	}


	/* Carousel */

	.container-fluid {
	padding-left: 0px;
	padding-right: 0px;
	}

	.container {
	margin: 0 auto;
	width: 80%;
	}

	.header h1 {
	text-align: center;
	}

	.column {
	display: inline-block;
	float: left;
	width: 33.33333333333333%;
	padding-right: 20px;
	}

	.main-text {
	padding-top: 60px;
	clear: both;
	}

	.image img {
	width: 100%;
	position: static;
	}

	.skills {
	/background-color: #5AD4C2;/
	color: black;
	}

	#skill-list {
	margin-left: 50px;
	}

	/* Typography */
	h1, h2, h3 {
	font-family: Futura, Helvetica, Arial, sans-serif;
	}

	p, li {
	font-family: Georgia, sans-serif;
	}

	.intro p {
	font-size: 3em;
	font-weight: 100;
	font-family: Futura, Helvetica, Arial, sans-serif;
	-webkit-margin-before: 0;
	}

	.skills h3 {
	text-align: center;
	text-transform: uppercase;
	}


	/* CONTACT PAGE */

	.column {
	display: inline-block;
	float: left;
	width: 33%;
	padding-right: 20px;
	}

	.location {
	padding-top: 60px;
	clear: both;
	}

	.location img {
	width: 50%;
	position: static;
	}

	.offline {
	color: #000;
	}

	#offline-list {
	margin-left: 200px;
	}

	/* Typography */
	h1, h2, h3 {
	font-family: Futura, Helvetica, Arial, sans-serif;
	}

	p, li {
	font-family: Georgia, sans-serif;
	}

	#moreaboutme a {
	color: black;
	}

	.online p {
	font-size: 3em;
	font-weight: 100;
	font-family: Futura, Helvetica, Arial, sans-serif;
	-webkit-margin-before: 0;
	}

	.offline h2 {
	text-align: center;
	}

	/* IMAGES Responsive */

	.img-responsive {
	display: block;
	max-width: 100%;
	height: auto;
	background-color: yellow;
	}

	/* CONTACT SECTION */

	#contact {
	background-image: url("../img/contact-parallax.jpg");
	background-attachment: fixed;
	background-size: cover;
	padding: 100px;
	height: 500px;
	width: 100%;
	}

	#contact .header, a, .glyphicon {
	color: white;
	}

	/* MEDIA QUERRIES */

	@media (max-width: 480px) {
	body {
	background-color: red;
	}
	}

	@media (max-width: 768px) {
	.navbar-collapse {
	padding-left: 10px;
	padding-right: 10px;
	float: right;
	border: none;
	background-color: lightgrey;
	vertical-align: center;
	}

	}