kajatiger/gist:3f19dea12470c33de54b6b5abebc2575

## gistfile1.txt
<!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>Kaja</title>


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


    <!-- Custom styles for this template go here -->
    <link rel="stylesheet" href="css/style_about.css">

    <link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet">


    <!-- 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">
    <div id="fb-root"></div>
    <script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/de_DE/sdk.js#xfbml=1&version=v2.7";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>

    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container-fluid" id="customnav">
      <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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="#" id="homebutton"><span class="glyphicon glyphicon-home"></span>home</a>
        </div> <!-- navbar-header end -->


        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#work">work</a></li>
            <li><a href="#about">about</a></li>
            <li><a href="#contact">contact</a></li>
            <li><a href="#faq">faq</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">More <span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li><a href="http://lifeofkaja.blogspot.de/">Blog</a></li>
                  <li><a href="https://www.instagram.com/kaja_tiger/">Instagram</a></li>
                  <li><a href="https://github.com/kajatiger">Github</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="#video">Video</a></li>
                </ul>
            </li>
          </ul>
        </div><!-- /.navbar-collapse -->


      </div><!-- /.container-fluid -->
    </nav> <!-- navbar-inverse fixtop end -->


    <!-- <div class="navbar">
      <a href="index.html" id="home"><span class="glyphicon glyphicon-home"></span> home</a>

      <ul>
        <li><a href="#about">about</a>
        </li>
        <li><a href="#contact">contact</a>
        </li>
        <li><a href="#work">work</a>
        </li>
        <li><a href="#faq">faq</a>
        </li>
      </ul>
    </div> --> <!-- nav end -->


<div class="hidden-xs"> <!-- div hides carousel on small phones -->
  <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/desk.jpg" alt="workplace">
          <div class="carousel-caption" id="tree">
            <h2>Turn Ideas into Projects</h2>
            <p>You want to put your project online and reach out to many people? Don't just dream about it, let's make it happen!</p>
          </div> <!-- tree end -->
        </div> <!-- item active end -->

        <div class="item">
          <img src="img/methodkit.jpg" alt="methodkit showing the project management cards">
          <div class="carousel-caption">
            <h2>It all begins with your Story</h2>
            <p>What is it, that you want to create? Let's take the next steps together to make things real.</p>
          </div> <!-- carousel caption end -->
        </div> <!-- item end -->

        <div class="item">
          <img src="img/code.jpg" alt="desk with mac showing code">
          <div class="carousel-caption">
            <h2>The Magic of good Coding</h2>
            <p>Don't hesitate to think big. Everything is possible!</p>
          </div> <!-- carousel caption end -->
        </div> <!-- item end -->

        ...
      </div> <!-- carousel-inner end -->

      <!-- 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> <!-- carousel slide end -->


  </div> <!-- container fluid end -->
</div> <!-- hidden xs end -->


    <div class="container">
      <!-- Example row of columns -->
      <div class="row">
        <div class="col-md-4 col-xs-6">
          <h2>Coding Goals</h2>
          <p>Every Project I work on, is a wisely chosen content. I make sure to code for sustainable and green projects, to work with social companies and NGOs in order to contribute to a healthier economy. We all have the choice. It empowers us to make it. </p>
          <p><a class="btn btn-default" href="https://drahthaus.at/" role="button">Surprise &raquo;</a></p>
        </div><!-- /col -->
        <div class="col-md-4 col-xs-6">
          <h2>ediblehood</h2>
          <p>This is a website I started creating to visualize all the spaces with urban gardening on an interactive map. Our dream is to connect all people in their areas who want to grow their own food and do urban gardening together with their neighbors. The map should not only show spaces that are already used as gardens, but also show potential areas and informations about them. We want to connect with the government as well in order to create legal gardening spaces.</p>
          <p><a class="btn btn-default" href="#" role="button">go to the website &raquo;</a></p>
       </div><!-- /col -->
        <div class="col-md-4 col-xs-6">
          <h2>Portfolio Concept</h2>
          <p>I want to create a nice overview that will be visible online for everyone and that shows all my developer skills. It should be very simple to understand and nice to look at. It should also be fun to use.</p>
          <p><a class="btn btn-default" href="#" role="button">See more &raquo;</a></p>
        </div><!-- /col -->
      </div><!-- /row -->

      <hr>
    </div> <!-- /container -->


    <div class="container" id="work">
      <h2>My Work</h2>
      <div class="row" id="work">
        <div class="col-xs-6 col-md-3">
          <img src="img/ediblehoodhome.jpg" class="img-responsive" alt="ediblehood app homepage">
        </div>

        <div class="col-xs-6 col-md-3">
          <img src="img/aboutediblehood.jpg" class="img-responsive">
        </div>

        <div class="col-xs-6 col-md-3">
          <img src="img/locations.jpg" class="img-responsive">
        </div>

        <div class="col-xs-6 col-md-3">
          <img src="img/addlocation.jpg" class="img-responsive">
        </div>

        <div class="col-xs-6 col-md-3">
          <img src="img/pumpkinediblehood.jpg" class="img-responsive">
        </div>

        <div class="col-xs-6 col-md-3">
          <img src="img/aboutkaja.jpg" class="img-responsive">
        </div>

        <div class="col-xs-6 col-md-3">
          <img src="img/magicofcoding.png" class="img-responsive">
        </div>

        <div class="col-xs-6 col-md-3">
          <img src="img/sunny.jpg" class="img-responsive" id="main">
        </div>

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


    <div class="container" id="about">

      <div class="header">
        <h1>About Kaja</h1>
      </div> <!--   header end -->

      <div class="row" id="about-me">

        <div class="col-xs-6 col-md-4">
          <img src="img/kajamusic.jpg" alt="kaja with headphones working" class="pic">
        </div>

        <div class="col-xs-6 col-md-4">
          <h2>Introducing myself</h2>
          <p>Hello! I am Kaja from Berlin and I am a Web Developer and a Philosopher. I like coding, but it is not the only thing I like to do. Sometimes I go surfing in Morocco or snowboarding in France. And I am a total foody. Doesn't everyone love good food?</p>
          <p>If you need an awesome Website just get in touch with me and we can talk about the your Concepts and Visions. I am full of Motivation and new Ideas.</p>
        </div>

        <div class="col-xs-6 col-md-4">
          <img src="img/working.jpg" alt="working" class="pic">
        </div>


        <div class="col-xs-6 col-md-4">
          <h2>My skills</h2>
          <ul id="skills list">
            <li>HTML</li>
            <li>CSS</li>
            <li>Ruby</li>
            <li>Rails</li>
            <li>Javascript</li>
            <li>scrum</li>
            <li>pivotle</li>
            <li>an eye for aethetics</li>
            <li>many more...</li>
          </ul>
        </div>

        <div class="col-xs-6 col-md-4">
          <img src="img/kajapalette.jpg" alt="die ganze palette" class="pic">
        </div>


        <div class="col-xs-6 col-md-4">
          <h2>What I've done so far</h2>
          <p>My first Application is ediblehood (check out above). I've taken part in many Events of the RailsGirlsBerlin and the OpenTechSchool in Berlin. If you want to see the code that I have produced so far, make sure to check out my GitHub account.</p>
        </div>

      </div> <!-- about me row end -->


      <div class="main-text">
        <h3>My Story</h3>

        <p>I grew up in Berlin Kreuzberg with two languages: German and Croatian. When I was eleven years old, my family moved to San Francisco for a year, where I went to middle school and picked up English as my third language. Back in Berlin I also took Latin and French in highschool. While being very interested in languages I also took Arts and Mathematics as my other two graduation subjects. Back then I didn't know what coding was, otherwise I would have already took Informatics as my main subject, since it combines the fun things about languages and mathematics.</p>
        <p>Still not knowing about Coding I studied Philosophy and Historical Linguistics and it satisfied some of my curiousity about Syntax and Logics. But soon after graduating from University I realized that I still wanted more, I wanted to learn something that I really could create cool things with, useful things. So I got interested in Coding</p>
        <p>I heard about a huge community of girls who teach coding in Berlin: RailsGirlsBerlin. And when I went to their first Beginner's Workshop, I got totally hooked. I fell in love with Ruby on Rails and took a Web Developer Course at the CareerFoundry.</p>
        <p>In the meantime I started my first Project: ediblehood. An Application that connects all urban gardening projects in the area to give the community a chance creating green cities with neighborhood gardens and local grown food.</p>

      </div> <!--   main text end -->

    </div> <!-- container about end -->


    <div class="container" id="contact">

      <h1>Contact Kaja</h1>
      <p>If you have a question, please feel free to write me a message or contact me on facebook. Or leave your message in the contact form below.</p>

      <div class="row">
        <div class="col-xs-6 col-md-4">
          <div class="contact-poster">
            <div class="contact info">
              <p><span class="glyphicon glyphicon-envelope"></span>  Email me to:</p>
              <a href="k.santro@posteo.de" id="link">k.santro@posteo.de</a>

              <p><span class="glyphicon glyphicon-comment"></span>  If you want to contact me via Facebook, just add me as a friend</p>
              <a href="https://www.facebook.com/kaja.noe" id="link">My Facebook Profile</a>
            </div> <!-- contact info end -->
          </div> <!-- contact poster end -->
        </div> <!-- col-xs-6 end -->


        <div class="col-xs-12 col-md-8">
          <form action=”/login” method=”post” name=”login”>
            <div class="form-group">
              <label for="message" class="sr-only">Message *</label>
              <textarea style="resize:none" cols="40" rows="5" class="form-control" placeholder="Write me a message here..." id="message" required="required" minlength=10 name="message" title="enter your message"></textarea>
            </div> <!-- form group end -->
            <div class="form-group">
              <label for="email" class="sr-only">Email *</label>
              <input type="email" name="email" title="enter your email" class="form-control" placeholder="for.example@mail.de" id="email" required="required" minlength=5>
            </div> <!-- form group end -->
            <div class="form-group">
              <label for="name" class="sr-only">Name *</label>
              <input type="name" class="form-control" placeholder="Name" id="name" required="required" minlength=1 name="name" title="enter your name">
            </div> <!-- form group end -->
            <input class="btn btn-default" type="submit" value="Submit">
      </form>

        </div> <!-- col-xs-12 end -->

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

      <div class="stalker-poster">
        <h3><span class="glyphicon glyphicon-map-marker"></span>  Where can you find me?</h3>
        <p>If you need to meet me in person, you can find me at the <strong>Amerika-Gedenk-Bibliothek</strong> in Kreuzberg</p>
        <div class="maps">
          <img src="img/bibliothek.png" alt="map" class="location">
        </div> <!-- maps end -->

      </div> <!-- stalker poster end -->


    </div> <!-- contact container end -->


    <div class="container" id="faq">

      <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="headingOne">
            <h4 class="panel-title">
            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">Which Coding tools do you prefer?</a>
            </h4>
          </div>

          <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
            <div class="panel-body">
              I started my passion for coding with the <a href="#" title="More information" id="item1">RailsGirlsBerlin</a> , so I feel very comfortable working mostly with Ruby and Rails Apps. But I discovered of course that it makes sense to have a good knowledge of Javascript functions as well, since most of the APIs contain Javascript functions and these often must be adjusted to the Rails Application. I am very open to learn new things and enjoying both frontend and backend coding. But mostly I want to specialise in backend problems, because they really trigger my curiousity.
            </div>
          </div>
        </div>

        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="headingTwo">
            <h4 class="panel-title">
            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">What did you do before coding?</a>
            </h4>
          </div>
          <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
            <div class="panel-body">
              I studied philosophie and historical linguistics. At some point I had to start working as a German teacher in order to survive, but it did't really challenge me enough. I also travelled a lot to Morocco and picked up surfing there. I also started to take Arabic classes in Morocco and played football in a local football team. The other thing that I started there was blogging and helping a friend with his Wordpress website. That was actually the point where I realized that I want to learn how to code in order to be more flexible when I structure a website.
            </div> <!-- panel body end -->
          </div> <!-- collapseTwo end -->
        </div>

        <div class="panel panel-default">
          <div class="panel-heading" role="tab" id="headingThree">
            <h4 class="panel-title">
              <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
              Who did you already work for?
              </a>
            </h4>
          </div>
          <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
            <div class="panel-body">
              I built my own App (ediblehood) and helped out at betterplace.org. They are an online App for charity fundraising and are built with Ruby on Rails. The developer team at betterplace is really friendly and fun and they were happy to teach me some of their magic.
            </div> <!-- panel body end -->
          </div> <!-- collapseThree end -->
        </div>
      </div>
    </div>    <!-- faq container end -->

    <div class="row">
      <h2 class="learn-more">Learn more...</h2>

      <div class="modal-button">
        <button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">View CV</button>
        <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" data-backdrop="static"  data-keyboard="false">
          <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">My CV</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              </div> <!-- header end -->
              <div class="modal-body">
                <embed id="CV" src="cvKajaSantroEngl.pdf">
              </div> <!-- body end -->
            </div> <!-- modal content end -->
          </div> <!-- modal dialog end -->
        </div> <!-- modal fade end -->
      </div> <!-- modal button end -->

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


    <div class="video" id="video">
      <h2 class="video-header">One of my favorite Surf Videos</h2>

      <!-- 16:9 aspect ratio -->
      <div class="embed-responsive embed-responsive-16by9">
        <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/h60g9kYUCo0?rel=0" allowfullscreen></iframe>
      </div>
    </div> <!-- video end -->


    <!-- ============================= -->
    <!-- All your JavaScript comes now -->
    <!-- ============================= -->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>


    <!-- Bootstrap core JS -->
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>


    <!-- Can place script tags with JavaScript files here -->
    <script type="text/javascript">
  var $root = $('html, body');
    $('.navbar-nav a').click(function() {
        var href = $.attr(this, 'href');
        $root.animate({
            scrollTop: $(href).offset().top
        }, 500, function () {
            window.location.hash = href;
        });
        return false;
    });
    </script>

    <script src="js/jquery.stellar.min.js"></script>
    <script type="$(window).stellar();
    // or:
    $('#main').stellar();">
    </script>

    <script>
    $(function () {
    $('#[insert ID your tooltip here]').tooltip();
    });
    </script>


<footer>
  <div class="follow-twitter">
    <a href="https://twitter.com/AlizeNero" class="twitter-follow-button" data-show-count="false" data-size="large" data-show-screen-name="false">Follow @AlizeNero
    </a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
    </script>
  </div> <!-- follow twitter end -->
  <div class="fb-like" data-href="http://kaja.bitballoon.com/" data-width="40px" data-layout="button" data-action="like" data-show-faces="true" data-share="false">
  </div>
  <div class="copyright">
    <p>&copy; 2016 Kaja Santro. All rights reserved.</p>
  </div> <!-- copyright end -->
</footer>

  </body>
</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>Kaja</title>



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


	<!-- Custom styles for this template go here -->
	<link rel="stylesheet" href="css/style_about.css">

	<link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet">



	<!-- 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">
	<div id="fb-root"></div>
	<script>(function(d, s, id) {
	var js, fjs = d.getElementsByTagName(s)[0];
	if (d.getElementById(id)) return;
	js = d.createElement(s); js.id = id;
	js.src = "//connect.facebook.net/de_DE/sdk.js#xfbml=1&version=v2.7";
	fjs.parentNode.insertBefore(js, fjs);
	}(document, 'script', 'facebook-jssdk'));</script>

	<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
	<div class="container-fluid" id="customnav">
	<!-- Brand and toggle get grouped for better mobile display -->
	<div class="navbar-header">
	<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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="#" id="homebutton"><span class="glyphicon glyphicon-home"></span>home</a>
	</div> <!-- navbar-header end -->



	<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
	<ul class="nav navbar-nav navbar-right">
	<li><a href="#work">work</a></li>
	<li><a href="#about">about</a></li>
	<li><a href="#contact">contact</a></li>
	<li><a href="#faq">faq</a></li>
	<li class="dropdown">
	<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">More <span class="caret"></span></a>
	<ul class="dropdown-menu">
	<li><a href="http://lifeofkaja.blogspot.de/">Blog</a></li>
	<li><a href="https://www.instagram.com/kaja_tiger/">Instagram</a></li>
	<li><a href="https://github.com/kajatiger">Github</a></li>
	<li role="separator" class="divider"></li>
	<li><a href="#video">Video</a></li>
	</ul>
	</li>
	</ul>
	</div><!-- /.navbar-collapse -->


	</div><!-- /.container-fluid -->
	</nav> <!-- navbar-inverse fixtop end -->



	<!-- <div class="navbar">
	<a href="index.html" id="home"><span class="glyphicon glyphicon-home"></span> home</a>

	<ul>
	<li><a href="#about">about</a>
	</li>
	<li><a href="#contact">contact</a>
	</li>
	<li><a href="#work">work</a>
	</li>
	<li><a href="#faq">faq</a>
	</li>
	</ul>
	</div> --> <!-- nav end -->



	<div class="hidden-xs"> <!-- div hides carousel on small phones -->
	<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/desk.jpg" alt="workplace">
	<div class="carousel-caption" id="tree">
	<h2>Turn Ideas into Projects</h2>
	<p>You want to put your project online and reach out to many people? Don't just dream about it, let's make it happen!</p>
	</div> <!-- tree end -->
	</div> <!-- item active end -->

	<div class="item">
	<img src="img/methodkit.jpg" alt="methodkit showing the project management cards">
	<div class="carousel-caption">
	<h2>It all begins with your Story</h2>
	<p>What is it, that you want to create? Let's take the next steps together to make things real.</p>
	</div> <!-- carousel caption end -->
	</div> <!-- item end -->

	<div class="item">
	<img src="img/code.jpg" alt="desk with mac showing code">
	<div class="carousel-caption">
	<h2>The Magic of good Coding</h2>
	<p>Don't hesitate to think big. Everything is possible!</p>
	</div> <!-- carousel caption end -->
	</div> <!-- item end -->

	...
	</div> <!-- carousel-inner end -->

	<!-- 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> <!-- carousel slide end -->


	</div> <!-- container fluid end -->
	</div> <!-- hidden xs end -->




	<div class="container">
	<!-- Example row of columns -->
	<div class="row">
	<div class="col-md-4 col-xs-6">
	<h2>Coding Goals</h2>
	<p>Every Project I work on, is a wisely chosen content. I make sure to code for sustainable and green projects, to work with social companies and NGOs in order to contribute to a healthier economy. We all have the choice. It empowers us to make it. </p>
	<p><a class="btn btn-default" href="https://drahthaus.at/" role="button">Surprise »</a></p>
	</div><!-- /col -->
	<div class="col-md-4 col-xs-6">
	<h2>ediblehood</h2>
	<p>This is a website I started creating to visualize all the spaces with urban gardening on an interactive map. Our dream is to connect all people in their areas who want to grow their own food and do urban gardening together with their neighbors. The map should not only show spaces that are already used as gardens, but also show potential areas and informations about them. We want to connect with the government as well in order to create legal gardening spaces.</p>
	<p><a class="btn btn-default" href="#" role="button">go to the website »</a></p>
	</div><!-- /col -->
	<div class="col-md-4 col-xs-6">
	<h2>Portfolio Concept</h2>
	<p>I want to create a nice overview that will be visible online for everyone and that shows all my developer skills. It should be very simple to understand and nice to look at. It should also be fun to use.</p>
	<p><a class="btn btn-default" href="#" role="button">See more »</a></p>
	</div><!-- /col -->
	</div><!-- /row -->

	<hr>
	</div> <!-- /container -->



	<div class="container" id="work">
	<h2>My Work</h2>
	<div class="row" id="work">
	<div class="col-xs-6 col-md-3">
	<img src="img/ediblehoodhome.jpg" class="img-responsive" alt="ediblehood app homepage">
	</div>

	<div class="col-xs-6 col-md-3">
	<img src="img/aboutediblehood.jpg" class="img-responsive">
	</div>

	<div class="col-xs-6 col-md-3">
	<img src="img/locations.jpg" class="img-responsive">
	</div>

	<div class="col-xs-6 col-md-3">
	<img src="img/addlocation.jpg" class="img-responsive">
	</div>

	<div class="col-xs-6 col-md-3">
	<img src="img/pumpkinediblehood.jpg" class="img-responsive">
	</div>

	<div class="col-xs-6 col-md-3">
	<img src="img/aboutkaja.jpg" class="img-responsive">
	</div>

	<div class="col-xs-6 col-md-3">
	<img src="img/magicofcoding.png" class="img-responsive">
	</div>

	<div class="col-xs-6 col-md-3">
	<img src="img/sunny.jpg" class="img-responsive" id="main">
	</div>

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





	<div class="container" id="about">

	<div class="header">
	<h1>About Kaja</h1>
	</div> <!-- header end -->

	<div class="row" id="about-me">

	<div class="col-xs-6 col-md-4">
	<img src="img/kajamusic.jpg" alt="kaja with headphones working" class="pic">
	</div>

	<div class="col-xs-6 col-md-4">
	<h2>Introducing myself</h2>
	<p>Hello! I am Kaja from Berlin and I am a Web Developer and a Philosopher. I like coding, but it is not the only thing I like to do. Sometimes I go surfing in Morocco or snowboarding in France. And I am a total foody. Doesn't everyone love good food?</p>
	<p>If you need an awesome Website just get in touch with me and we can talk about the your Concepts and Visions. I am full of Motivation and new Ideas.</p>
	</div>

	<div class="col-xs-6 col-md-4">
	<img src="img/working.jpg" alt="working" class="pic">
	</div>


	<div class="col-xs-6 col-md-4">
	<h2>My skills</h2>
	<ul id="skills list">
	<li>HTML</li>
	<li>CSS</li>
	<li>Ruby</li>
	<li>Rails</li>
	<li>Javascript</li>
	<li>scrum</li>
	<li>pivotle</li>
	<li>an eye for aethetics</li>
	<li>many more...</li>
	</ul>
	</div>

	<div class="col-xs-6 col-md-4">
	<img src="img/kajapalette.jpg" alt="die ganze palette" class="pic">
	</div>


	<div class="col-xs-6 col-md-4">
	<h2>What I've done so far</h2>
	<p>My first Application is ediblehood (check out above). I've taken part in many Events of the RailsGirlsBerlin and the OpenTechSchool in Berlin. If you want to see the code that I have produced so far, make sure to check out my GitHub account.</p>
	</div>

	</div> <!-- about me row end -->


	<div class="main-text">
	<h3>My Story</h3>

	<p>I grew up in Berlin Kreuzberg with two languages: German and Croatian. When I was eleven years old, my family moved to San Francisco for a year, where I went to middle school and picked up English as my third language. Back in Berlin I also took Latin and French in highschool. While being very interested in languages I also took Arts and Mathematics as my other two graduation subjects. Back then I didn't know what coding was, otherwise I would have already took Informatics as my main subject, since it combines the fun things about languages and mathematics.</p>
	<p>Still not knowing about Coding I studied Philosophy and Historical Linguistics and it satisfied some of my curiousity about Syntax and Logics. But soon after graduating from University I realized that I still wanted more, I wanted to learn something that I really could create cool things with, useful things. So I got interested in Coding</p>
	<p>I heard about a huge community of girls who teach coding in Berlin: RailsGirlsBerlin. And when I went to their first Beginner's Workshop, I got totally hooked. I fell in love with Ruby on Rails and took a Web Developer Course at the CareerFoundry.</p>
	<p>In the meantime I started my first Project: ediblehood. An Application that connects all urban gardening projects in the area to give the community a chance creating green cities with neighborhood gardens and local grown food.</p>

	</div> <!-- main text end -->

	</div> <!-- container about end -->







	<div class="container" id="contact">

	<h1>Contact Kaja</h1>
	<p>If you have a question, please feel free to write me a message or contact me on facebook. Or leave your message in the contact form below.</p>

	<div class="row">
	<div class="col-xs-6 col-md-4">
	<div class="contact-poster">
	<div class="contact info">
	<p><span class="glyphicon glyphicon-envelope"></span> Email me to:</p>
	<a href="k.santro@posteo.de" id="link">k.santro@posteo.de</a>

	<p><span class="glyphicon glyphicon-comment"></span> If you want to contact me via Facebook, just add me as a friend</p>
	<a href="https://www.facebook.com/kaja.noe" id="link">My Facebook Profile</a>
	</div> <!-- contact info end -->
	</div> <!-- contact poster end -->
	</div> <!-- col-xs-6 end -->


	<div class="col-xs-12 col-md-8">
	<form action=”/login” method=”post” name=”login”>
	<div class="form-group">
	<label for="message" class="sr-only">Message *</label>
	<textarea style="resize:none" cols="40" rows="5" class="form-control" placeholder="Write me a message here..." id="message" required="required" minlength=10 name="message" title="enter your message"></textarea>
	</div> <!-- form group end -->
	<div class="form-group">
	<label for="email" class="sr-only">Email *</label>
	<input type="email" name="email" title="enter your email" class="form-control" placeholder="for.example@mail.de" id="email" required="required" minlength=5>
	</div> <!-- form group end -->
	<div class="form-group">
	<label for="name" class="sr-only">Name *</label>
	<input type="name" class="form-control" placeholder="Name" id="name" required="required" minlength=1 name="name" title="enter your name">
	</div> <!-- form group end -->
	<input class="btn btn-default" type="submit" value="Submit">
	</form>

	</div> <!-- col-xs-12 end -->

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

	<div class="stalker-poster">
	<h3><span class="glyphicon glyphicon-map-marker"></span> Where can you find me?</h3>
	<p>If you need to meet me in person, you can find me at the <strong>Amerika-Gedenk-Bibliothek</strong> in Kreuzberg</p>
	<div class="maps">
	<img src="img/bibliothek.png" alt="map" class="location">
	</div> <!-- maps end -->

	</div> <!-- stalker poster end -->


	</div> <!-- contact container end -->





	<div class="container" id="faq">

	<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
	<div class="panel panel-default">
	<div class="panel-heading" role="tab" id="headingOne">
	<h4 class="panel-title">
	<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">Which Coding tools do you prefer?</a>
	</h4>
	</div>

	<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
	<div class="panel-body">
	I started my passion for coding with the <a href="#" title="More information" id="item1">RailsGirlsBerlin</a> , so I feel very comfortable working mostly with Ruby and Rails Apps. But I discovered of course that it makes sense to have a good knowledge of Javascript functions as well, since most of the APIs contain Javascript functions and these often must be adjusted to the Rails Application. I am very open to learn new things and enjoying both frontend and backend coding. But mostly I want to specialise in backend problems, because they really trigger my curiousity.
	</div>
	</div>
	</div>

	<div class="panel panel-default">
	<div class="panel-heading" role="tab" id="headingTwo">
	<h4 class="panel-title">
	<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">What did you do before coding?</a>
	</h4>
	</div>
	<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
	<div class="panel-body">
	I studied philosophie and historical linguistics. At some point I had to start working as a German teacher in order to survive, but it did't really challenge me enough. I also travelled a lot to Morocco and picked up surfing there. I also started to take Arabic classes in Morocco and played football in a local football team. The other thing that I started there was blogging and helping a friend with his Wordpress website. That was actually the point where I realized that I want to learn how to code in order to be more flexible when I structure a website.
	</div> <!-- panel body end -->
	</div> <!-- collapseTwo end -->
	</div>

	<div class="panel panel-default">
	<div class="panel-heading" role="tab" id="headingThree">
	<h4 class="panel-title">
	<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
	Who did you already work for?
	</a>
	</h4>
	</div>
	<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
	<div class="panel-body">
	I built my own App (ediblehood) and helped out at betterplace.org. They are an online App for charity fundraising and are built with Ruby on Rails. The developer team at betterplace is really friendly and fun and they were happy to teach me some of their magic.
	</div> <!-- panel body end -->
	</div> <!-- collapseThree end -->
	</div>
	</div>
	</div> <!-- faq container end -->

	<div class="row">
	<h2 class="learn-more">Learn more...</h2>

	<div class="modal-button">
	<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">View CV</button>
	<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" data-backdrop="static" data-keyboard="false">
	<div class="modal-dialog modal-lg" role="document">
	<div class="modal-content">
	<div class="modal-header">
	<h4 class="modal-title" id="myModalLabel">My CV</h4>
	<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
	</div> <!-- header end -->
	<div class="modal-body">
	<embed id="CV" src="cvKajaSantroEngl.pdf">
	</div> <!-- body end -->
	</div> <!-- modal content end -->
	</div> <!-- modal dialog end -->
	</div> <!-- modal fade end -->
	</div> <!-- modal button end -->

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




	<div class="video" id="video">
	<h2 class="video-header">One of my favorite Surf Videos</h2>

	<!-- 16:9 aspect ratio -->
	<div class="embed-responsive embed-responsive-16by9">
	<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/h60g9kYUCo0?rel=0" allowfullscreen></iframe>
	</div>
	</div> <!-- video end -->




	<!-- ============================= -->
	<!-- All your JavaScript comes now -->
	<!-- ============================= -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>


	<!-- Bootstrap core JS -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>


	<!-- Can place script tags with JavaScript files here -->
	<script type="text/javascript">
	var $root = $('html, body');
	$('.navbar-nav a').click(function() {
	var href = $.attr(this, 'href');
	$root.animate({
	scrollTop: $(href).offset().top
	}, 500, function () {
	window.location.hash = href;
	});
	return false;
	});
	</script>

	<script src="js/jquery.stellar.min.js"></script>
	<script type="$(window).stellar();
	// or:
	$('#main').stellar();">
	</script>

	<script>
	$(function () {
	$('#[insert ID your tooltip here]').tooltip();
	});
	</script>


	<footer>
	<div class="follow-twitter">
	<a href="https://twitter.com/AlizeNero" class="twitter-follow-button" data-show-count="false" data-size="large" data-show-screen-name="false">Follow @AlizeNero
	</a>
	<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
	</script>
	</div> <!-- follow twitter end -->
	<div class="fb-like" data-href="http://kaja.bitballoon.com/" data-width="40px" data-layout="button" data-action="like" data-show-faces="true" data-share="false">
	</div>
	<div class="copyright">
	<p>© 2016 Kaja Santro. All rights reserved.</p>
	</div> <!-- copyright end -->
	</footer>

	</body>
	</html>