gioiatravels/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 -->

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

    <link rel="stylesheet" href="css/styles.css">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">

    <title>Hello World!</title>

    <!-- Bootstrap core CSS -->

    <!-- 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">

    <nav id="nav" class="nav navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container-fluid">

      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>

        <div class="projectName">
          <a href="#">Gioia Travels</a>
        </div> <!--end projectName -->
      </div> <!--end navbar-header -->

        <div class="navbar-collapse collapse" class="navbar">
        <ul class="nav navbar-nav navbar-right" role="tablist">
            <li><a href="#faq">FAQ</a></li>
            <li><a href="#contact">Contact</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#work">Work</a></li>
            <li><a href="#">Home</a></li>
        </ul>
      </div>

    </div>
  </nav>


    <div class="" id="index">
    <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 class="img-responsive" src="img/Atacama.jpg" alt="Atacama">
        <div class="carousel-caption">
        <h3>Los Flamencos, Atacama, Chile</h3>
        <p>23°17'08.4"S 68°10'30.0"W</p>
        </div>
    </div>

    <div class="item">
      <img class="img-responsive" src="img/Cuba.jpg" alt="Cuba">
        <div class="carousel-caption">
        <h3>Havana, Cuba</h3>
        <p>23°7'58"N -82°22'58"W</p>
        </div>
      </div>

    <div class="item">
      <img class="img-responsive" src="img/Lion.jpg" alt="Lion">
      <div class="carousel-caption">
      <h3>Kruger National Park, South Africa</h3>
      <p>24°0'41"S 31°29'7"O</p>
      </div>
    </div>
  </div>
  <!-- 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>
</div>


    <div class="container mainpage" id="index">
      <!-- Example row of columns -->
      <div class="row">
        <div class="col-xs-12 col-md-4 col-sm-6">
          <h2><strong>Portfolio Concept</h2></strong>
          <p align="justify">The portfolio concept shall include pictures I took while traveling in combination with experience reports. My focus lies on a balanced and appealing look. A travel blog would be the ideal result. The design should be clean and clearly structured with a great focus on the pictures. I am thinking about a lot of free space in block colors like white or black. I have no previous experience in implementing website development but designed some ideas for websites during my first bachelor.</p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
        </div><!-- /col -->

        <div class="col-xs-12 col-md-4 col-sm-6">
          <h2><strong>Project Goals</h2></strong>
          <p align="justify">I want to work steadily on the given tasks and can commit up to 8-10 hours a week. For my own development, I want to focus on not working last minute. Working on the course once a day would be perfect.</p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
       </div><!-- /col -->

        <div class="col-xs-12 col-md-4 col-sm-6">
          <h2><strong>Course Goals</h2></strong>
          <p align="justify">My goal is to get an idea of website development to be prepared for future jobs. Coding is getting more relevant and not being able to adapt to this evolution can have a negative impact on a career. Achieving a level as an entry level developer is my biggest wish.</p>
          <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
        </div><!-- /col -->
      </div><!-- /row -->
      <hr>
      </div>

  <div class="work-container">
      <div class="header">
          <h1>Internships & Education</h1>
    <div class="container" class=”row” id="work">
      <div class="col-md-4 col-sm-6 col-xs-12 image-column"><img class="img-responsive" id="work-img" src="img/a.jpg" alt="EBS">
      </div>
      <div class="col-md-4 col-sm-6 col-xs-12 image-column"><img class="img-responsive" id="work-img" src="img/b.jpg" alt="BMW">
      </div>
      <div class="col-md-4 col-sm-6 col-xs-12 image-column"><img class="img-responsive" id="work-img" src="img/c.jpg" alt="Lenicura">
      </div>
      <div class="col-md-4 col-sm-6 col-xs-12 image-column"><img class="img-responsive" id="work-img" src="img/d.jpg" alt="MRM">
      </div>
      <div class="col-md-4 col-sm-6 col-xs-12 image-column"><img class="img-responsive" id="work-img" src="img/e.jpg" alt="FDL">
      </div>
      <div class="col-md-4 col-sm-6 col-xs-12 image-column"><img class="img-responsive" id="work-img" src="img/f.jpg" alt="doug+partners">
      </div>
      <div class="col-md-4 col-sm-6 col-xs-12 image-column"><img class="img-responsive" id="work-img" src="img/g.jpg" alt="wunderman">
      </div>
      <div class="col-md-4 col-sm-6 col-xs-12 image-column"><img class="img-responsive" id="work-img" src="img/h.jpg" alt="mansard">
      </div>
      <div class="col-md-4 col-sm-6 col-xs-12 image-column"><img class="img-responsive" id="work-img" src="img/i.jpg" alt="HMKW">
      </div>
    </div>
  </div>
  <hr />

<!--About-->


  <div class="aboutcontainer" id="about">
    <div class="header">
       <h1>About Me</h1>
    </div>
    <!-- end header -->


  <div class="row">
    <div class="image col-md-4 col-sm-6 col-xs-12">
      <img class="img-responsive" id="image" src="img/UNADJUSTEDNONRAW_thumb_3447.jpg" alt="Gioia">
    </div>

    <div class="intro col-md-4 col-sm-6 col-xs-12">
       <h2 id="Introduction">Introduction</h2>
       <p id="text"> My name is Gioia, 25 years old, and currently studying General Management at EBS University. I am in my final semester at EBS. I own a bachelor degree in Graphic Design.
       </p>
    </div>


    <!-- end intro -->

    <div class="skills col-md-4 col-sm-6 col-xs-12">
       <h3 id="skill-header">My Skills</h3>
       <ul id="skill-list">
         <li>Adobe Photoshop</li>
         <li>Adobe Illustrator</li>
         <li>Adobe InDesign</li>
         <li>Microsoft Office Word</li>
         <li>Microsoft Office Powerpoint</li>
         <li>Microsoft Office Excel</li>
         <li>Photography</li>
       </ul>
       <h3 id="skill-header">Languages</h3>
       <ul id="skill-list">
        <li>German</li>
        <li>English</li>
        <li>Spanish</li>
       </ul>
    </div><!-- end skill -->
          <br>
  </div> <!-- end row-->

    <div class="row">
      <div class="main-text" class="col-md-3 col-sm-6 col-xs-12">
         <h3>More about me</h3>
         <p align="justify">Crucifix cliche put a bird on it, man braid hammock vexillologist pabst skateboard salvia occupy. Schlitz offal polaroid, pinterest fap selfies leggings hashtag godard kinfolk pug. Tumeric lumbersexual man braid cliche direct trade, hella taxidermy hexagon. Bitters lo-fi distillery kickstarter, poke keffiyeh shabby chic echo park tacos flannel butcher humblebrag. Fap squid kickstarter, cliche pinterest four loko scenester. Microdosing meggings craft beer, artisan succulents brooklyn chambray bespoke. Edison bulb subway tile mustache letterpress lyft meh.
         </p>
      </div><!-- end main text -->
    </div> <!-- end row-->
  </div>
<hr />

<!-- Contact-->

      <div class="contactcontainer" id="contact">
        <div class="header">
          <h1>Contact Info</h1>
          <div>
          <div class="contactContact">
        </div>
      </div>
      <!-- end header -->

    <div class="row">
      <div class="image col-md-4 col-sm-6 col-xs-12">
      <img class="img-responsive" id="image" src="img/Karte.jpg" alt="Map">

    </div>

      <div class="intro col-md-4 col-sm-6 col-xs-12">
        <h2 id="Address">Address</h2>
        <p><span class="glyphicon glyphicon-home"></span>&nbsp;  Rheingaustrasse 1,
        </p>
        <br>
        <p id="text"> 65375 Oestrich-Winkel
        </p>
        <br>
        <p><span class="glyphicon glyphicon-phone-alt"></span> &nbsp;  Tel.: +49-161-90708122
        </p>
        <br>
        <span class="glyphicon glyphicon-envelope"></span>
        <a href="mailto:gioia.travels@gmail.com" style="color:grey">&nbsp;gioia.travels@gmail.com </a>
        </p>
      </div>
      <!-- end intro -->

      <div  class="intro col-md-4 col-sm-6 col-xs-12">
        <h2>Me</h2>
        <p id="text"> I’m Gioia, a roaming blogger who’s lucky enough to call the world home. I fill these pages with my life and adventures. It all started as a way to stay in touch with friends and family everywhere.
        </p>
      </div>
      <!-- end me -->
      </div>
        </div>
        <!-- end box -->

    <hr />

<!--FAQ-->


    <div class="faq" id="faq">
    <div class="header">
          <h1>FAQ</h1>
    <div class="cc">
    <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">
         Is your first name Italian?
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Yes, it is Italian for joy. But I'm originally from Germany as well as my parents. Still I got a temperament that fits an Italian lady. ;)
      </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">
          Is Kitty your pseudonym?
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        No, and my parents are no "Hello Kitty" fans. It is after my great grandmother. But: "nomen est omen" - I'm the biggest cat fan and love my 5 beautiful kittens who unfortunatly live at my mums. They are purr-fect!
      </div>
    </div>
  </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">
          Whats your favourite place in the world?
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        Tough question. I can't answer that. <br>
        If we go by continent (and I haven't been to Australia yet) I would say the following are my favorites: <br>
        Europe: Frankfurt (my home town); London, UK; Rome, Italy <br>
        Africa: Cape Town, South Africa; Okavango Delta, Botsuana <br>
        North America: Toronto, Canada; Washington, USA <br>
        South America: Buenos Aires, Argentina; Patagonia, Argentina & Chile <br>
        Asia: Hong Kong, China; Bali, Indonesia
      </div>
    </div>
  </div>
</div>
</div>
<hr />


    </div>


  <!-- ============================= -->
  <!-- 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');
    if(href != undefined) {
        $root.animate({
            scrollTop: $(href).offset().top
        }, 500, function () {
        window.location.hash = href;
        });
    }
        return false;
    });
</script>


  </body>
</html>

## styles.css
.jumbotron{
background-image: url( "../img/IMG_5290 2.jpg");
background-size: cover;
padding-left: 3%;
font-family: 'Open Sans Condensed', sans-serif;
font-style: light;
}

body{
font-family: 'Open Sans Condensed', sans-serif;
font-style: light;
position: relative;
}
.jumbotron p {color: white;}
.jumbotron h1 {color: white;}
.jumbotron a {color: white;}

.carousel {
  margin-left: -15px;
  margin-right: -15px;
}


 .img-responsive {display: block;
  width: 100%;
  height: auto;
}

/**** Work ****/
#work {width: 100%;}


/**** Contact page ****/


* { box-sizing: border-box; }

.header h1 {
  text-align: center;
  font-size: 2.4em;
}

.contactcontainer {
  width: 80%;
  margin: 0 auto;
  font-size: 1.2em;
  padding-left: 5%;
}

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


p {
  	display: inline;
}

selector {
    	position: relative;
}

.image {
    border-width: 3px;
    border-color: #121F30;
}

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


.intro-collum {
	margin-bottom: 40px
	padding-bottom: 20px
}

.skill-collum {
	margin-bottom: 40px
	padding-bottom: 20px
}

#contact{
    background-image: url("../img/rose.jpg");
/*Add a background image*/
    background-attachment: fixed;
/*Give the background a fixed position does it not scroll when you scroll*/
    background-size: cover;
/*Have the background cover the entire div section*/
    color: white;
/*Change the color of the text on top so it is readable, and adjust the padding as needed.*/
    padding:100px;
    padding-top: 50px;
    height: 400px;
}

/*Typography*/

.box {
  font-family: 'Open Sans Condensed', sans-serif;
  font-style: light;

}

/*Colour*/

#contactbody {
  background-color: #FFF7C4;
  color: #121F30;
  font-family: 'Open Sans Condensed', sans-serif;
  font-style: light;
}


#contactbody {
  color: #121F30;
  padding-top: 2.5%;
}

.projectName {
  text-transform: uppercase;
  margin: 15px;
}

.projectName a {
  color: white;
  text-decoration: none;
  z-index: 3;
}

.projectName a:hover {
  color: white;
}

.nav {
  background-color: #121F30;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 2;
}
.nav ul li {
  display: inline-block;
  float: right;
  z-index: 1;
}

.nav ul li a {
   color: #FFF;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   font-family: 'Open Sans Condensed', sans-serif;
   font-style: light;
   text-decoration: none;
   z-index: 1;
 }

.nav a:hover {
  color: #fff7c4;
  transition: color 300ms;
  -webkit-transition: color 300ms;
  text-decoration: underline;
}


/**** FAQ ****/

#faq{
    color: #121F30;

}

body {background-color: #fff7c4}

.cc{
  display: block;
  padding-top: 10px;
  width: 80%;
  display:flex;
  flex-direction: column;
  justify-content: center;

  position: relative;
  margin-right: auto;
  margin-left: auto;
}

.panel {
  border-style: none;
  box-shadow: none;
  background-color: transparent;
}

#headingOne{
  background-color: #121F30;
  color: white;
}
#headingTwo{
  background-color: #121F30;
  color: white;
}
#headingThree{
  background-color: #121F30;
  color: white;
}


.accordion {
  font-family: 'Open Sans Condensed', sans-serif;
  font-style: light;
}

/**Portfolio**/

#work-img {
    padding-bottom: 10%;
}


/*** About ***/

* { box-sizing: border-box; }


.header h1 {
  text-align: center;
  font-size: 3.2em;
  color: }


#skill-header {
  padding-left: 24px;
}


.column {
  font-family: 'Open Sans Condensed', sans-serif;
  font-style: light;
  display: inline-block;
  float: left;
  width: 30%;
  padding: 0 20px;
}

.main-text {
  font-family: 'Open Sans Condensed', sans-serif;
  font-style: light;
  clear: both;
  padding-top: 30px;
  padding: top right bottom left;
  border-bottom: solid;
  border-width: 1px;
  padding-bottom: 20px;
  margin-bottom: 10px;
  font-size: 1.1em;
}

#intro p {
  font-family: 'Open Sans Condensed', sans-serif;
  font-style: light;
  font-size: 1.1em;
  font-weight: 100;
  -webkit-margin-before: 0;
  padding-left: 20px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  padding-bottom: 20px;
}


#body {
  background-color: #FFF7C4;
  color: #121F30;
  padding-top: 2.5%;
}
.skills {
  background-color: #121F30;
  color: #FFF;
  float: right;
  padding: 0 65px;
}
.aboutcontainer {
  font-family: 'Open Sans Condensed', sans-serif;
  font-style: light;
  width: 80%;
  margin: 0 auto;
  padding-top: 40px;
}
.contact{
  display: inline;
  margin-left: 70px;
}

/*** Index Page ***/

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

.body {
  position: relative;
}


@media (min-width: 1200px) {
  .intro {
    margin-top: 25px;
  }

.image-column {padding-bottom: 3%;}
	<!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 -->

	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

	<link rel="stylesheet" href="css/styles.css">
	<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">

	<title>Hello World!</title>

	<!-- Bootstrap core CSS -->

	<!-- 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">

	<nav id="nav" class="nav navbar-inverse navbar-fixed-top" role="navigation">
	<div class="container-fluid">

	<div class="navbar-header">
	<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
	<span class="sr-only">Toggle navigation</span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	<span class="icon-bar"></span>
	</button>

	<div class="projectName">
	<a href="#">Gioia Travels</a>
	</div> <!--end projectName -->
	</div> <!--end navbar-header -->

	<div class="navbar-collapse collapse" class="navbar">
	<ul class="nav navbar-nav navbar-right" role="tablist">
	<li><a href="#faq">FAQ</a></li>
	<li><a href="#contact">Contact</a></li>
	<li><a href="#about">About</a></li>
	<li><a href="#work">Work</a></li>
	<li><a href="#">Home</a></li>
	</ul>
	</div>

	</div>
	</nav>



	<div class="" id="index">
	<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 class="img-responsive" src="img/Atacama.jpg" alt="Atacama">
	<div class="carousel-caption">
	<h3>Los Flamencos, Atacama, Chile</h3>
	<p>23°17'08.4"S 68°10'30.0"W</p>
	</div>
	</div>

	<div class="item">
	<img class="img-responsive" src="img/Cuba.jpg" alt="Cuba">
	<div class="carousel-caption">
	<h3>Havana, Cuba</h3>
	<p>23°7'58"N -82°22'58"W</p>
	</div>
	</div>

	<div class="item">
	<img class="img-responsive" src="img/Lion.jpg" alt="Lion">
	<div class="carousel-caption">
	<h3>Kruger National Park, South Africa</h3>
	<p>24°0'41"S 31°29'7"O</p>
	</div>
	</div>
	</div>
	<!-- 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>
	</div>


	<div class="container mainpage" id="index">
	<!-- Example row of columns -->
	<div class="row">
	<div class="col-xs-12 col-md-4 col-sm-6">
	<h2><strong>Portfolio Concept</h2></strong>
	<p align="justify">The portfolio concept shall include pictures I took while traveling in combination with experience reports. My focus lies on a balanced and appealing look. A travel blog would be the ideal result. The design should be clean and clearly structured with a great focus on the pictures. I am thinking about a lot of free space in block colors like white or black. I have no previous experience in implementing website development but designed some ideas for websites during my first bachelor.</p>
	<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
	</div><!-- /col -->

	<div class="col-xs-12 col-md-4 col-sm-6">
	<h2><strong>Project Goals</h2></strong>
	<p align="justify">I want to work steadily on the given tasks and can commit up to 8-10 hours a week. For my own development, I want to focus on not working last minute. Working on the course once a day would be perfect.</p>
	<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
	</div><!-- /col -->

	<div class="col-xs-12 col-md-4 col-sm-6">
	<h2><strong>Course Goals</h2></strong>
	<p align="justify">My goal is to get an idea of website development to be prepared for future jobs. Coding is getting more relevant and not being able to adapt to this evolution can have a negative impact on a career. Achieving a level as an entry level developer is my biggest wish.</p>
	<p><a class="btn btn-default" href="#" role="button">View details »</a></p>
	</div><!-- /col -->
	</div><!-- /row -->
	<hr>
	</div>

	<div class="work-container">
	<div class="header">
	<h1>Internships & Education</h1>
	<div class="container" class=”row” id="work">
	<div class="col-md-4 col-sm-6 col-xs-12 image-column"><img class="img-responsive" id="work-img" src="img/a.jpg" alt="EBS">
	</div>
	<div class="col-md-4 col-sm-6 col-xs-12 image-column"><img class="img-responsive" id="work-img" src="img/b.jpg" alt="BMW">
	</div>
	<div class="col-md-4 col-sm-6 col-xs-12 image-column"><img class="img-responsive" id="work-img" src="img/c.jpg" alt="Lenicura">
	</div>
	<div class="col-md-4 col-sm-6 col-xs-12 image-column"><img class="img-responsive" id="work-img" src="img/d.jpg" alt="MRM">
	</div>
	<div class="col-md-4 col-sm-6 col-xs-12 image-column"><img class="img-responsive" id="work-img" src="img/e.jpg" alt="FDL">
	</div>
	<div class="col-md-4 col-sm-6 col-xs-12 image-column"><img class="img-responsive" id="work-img" src="img/f.jpg" alt="doug+partners">
	</div>
	<div class="col-md-4 col-sm-6 col-xs-12 image-column"><img class="img-responsive" id="work-img" src="img/g.jpg" alt="wunderman">
	</div>
	<div class="col-md-4 col-sm-6 col-xs-12 image-column"><img class="img-responsive" id="work-img" src="img/h.jpg" alt="mansard">
	</div>
	<div class="col-md-4 col-sm-6 col-xs-12 image-column"><img class="img-responsive" id="work-img" src="img/i.jpg" alt="HMKW">
	</div>
	</div>
	</div>
	<hr />

	<!--About-->


	<div class="aboutcontainer" id="about">
	<div class="header">
	<h1>About Me</h1>
	</div>
	<!-- end header -->



	<div class="row">
	<div class="image col-md-4 col-sm-6 col-xs-12">
	<img class="img-responsive" id="image" src="img/UNADJUSTEDNONRAW_thumb_3447.jpg" alt="Gioia">
	</div>

	<div class="intro col-md-4 col-sm-6 col-xs-12">
	<h2 id="Introduction">Introduction</h2>
	<p id="text"> My name is Gioia, 25 years old, and currently studying General Management at EBS University. I am in my final semester at EBS. I own a bachelor degree in Graphic Design.
	</p>
	</div>


	<!-- end intro -->

	<div class="skills col-md-4 col-sm-6 col-xs-12">
	<h3 id="skill-header">My Skills</h3>
	<ul id="skill-list">
	<li>Adobe Photoshop</li>
	<li>Adobe Illustrator</li>
	<li>Adobe InDesign</li>
	<li>Microsoft Office Word</li>
	<li>Microsoft Office Powerpoint</li>
	<li>Microsoft Office Excel</li>
	<li>Photography</li>
	</ul>
	<h3 id="skill-header">Languages</h3>
	<ul id="skill-list">
	<li>German</li>
	<li>English</li>
	<li>Spanish</li>
	</ul>
	</div><!-- end skill -->
	<br>
	</div> <!-- end row-->

	<div class="row">
	<div class="main-text" class="col-md-3 col-sm-6 col-xs-12">
	<h3>More about me</h3>
	<p align="justify">Crucifix cliche put a bird on it, man braid hammock vexillologist pabst skateboard salvia occupy. Schlitz offal polaroid, pinterest fap selfies leggings hashtag godard kinfolk pug. Tumeric lumbersexual man braid cliche direct trade, hella taxidermy hexagon. Bitters lo-fi distillery kickstarter, poke keffiyeh shabby chic echo park tacos flannel butcher humblebrag. Fap squid kickstarter, cliche pinterest four loko scenester. Microdosing meggings craft beer, artisan succulents brooklyn chambray bespoke. Edison bulb subway tile mustache letterpress lyft meh.
	</p>
	</div><!-- end main text -->
	</div> <!-- end row-->
	</div>
	<hr />

	<!-- Contact-->

	<div class="contactcontainer" id="contact">
	<div class="header">
	<h1>Contact Info</h1>
	<div>
	<div class="contactContact">
	</div>
	</div>
	<!-- end header -->

	<div class="row">
	<div class="image col-md-4 col-sm-6 col-xs-12">
	<img class="img-responsive" id="image" src="img/Karte.jpg" alt="Map">

	</div>

	<div class="intro col-md-4 col-sm-6 col-xs-12">
	<h2 id="Address">Address</h2>
	<p><span class="glyphicon glyphicon-home"></span>  Rheingaustrasse 1,
	</p>
	<br>
	<p id="text"> 65375 Oestrich-Winkel
	</p>
	<br>
	<p><span class="glyphicon glyphicon-phone-alt"></span>   Tel.: +49-161-90708122
	</p>
	<br>
	<span class="glyphicon glyphicon-envelope"></span>
	<a href="mailto:gioia.travels@gmail.com" style="color:grey"> gioia.travels@gmail.com </a>
	</p>
	</div>
	<!-- end intro -->

	<div class="intro col-md-4 col-sm-6 col-xs-12">
	<h2>Me</h2>
	<p id="text"> I’m Gioia, a roaming blogger who’s lucky enough to call the world home. I fill these pages with my life and adventures. It all started as a way to stay in touch with friends and family everywhere.
	</p>
	</div>
	<!-- end me -->
	</div>
	</div>
	<!-- end box -->

	<hr />

	<!--FAQ-->


	<div class="faq" id="faq">
	<div class="header">
	<h1>FAQ</h1>
	<div class="cc">
	<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">
	Is your first name Italian?
	</a>
	</h4>
	</div>
	<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
	<div class="panel-body">
	Yes, it is Italian for joy. But I'm originally from Germany as well as my parents. Still I got a temperament that fits an Italian lady. ;)
	</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">
	Is Kitty your pseudonym?
	</a>
	</h4>
	</div>
	<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
	<div class="panel-body">
	No, and my parents are no "Hello Kitty" fans. It is after my great grandmother. But: "nomen est omen" - I'm the biggest cat fan and love my 5 beautiful kittens who unfortunatly live at my mums. They are purr-fect!
	</div>
	</div>
	</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">
	Whats your favourite place in the world?
	</a>
	</h4>
	</div>
	<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
	<div class="panel-body">
	Tough question. I can't answer that. <br>
	If we go by continent (and I haven't been to Australia yet) I would say the following are my favorites: <br>
	Europe: Frankfurt (my home town); London, UK; Rome, Italy <br>
	Africa: Cape Town, South Africa; Okavango Delta, Botsuana <br>
	North America: Toronto, Canada; Washington, USA <br>
	South America: Buenos Aires, Argentina; Patagonia, Argentina & Chile <br>
	Asia: Hong Kong, China; Bali, Indonesia
	</div>
	</div>
	</div>
	</div>
	</div>
	<hr />


	</div>



	<!-- ============================= -->
	<!-- 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');
	if(href != undefined) {
	$root.animate({
	scrollTop: $(href).offset().top
	}, 500, function () {
	window.location.hash = href;
	});
	}
	return false;
	});
	</script>


	</body>
	</html>
	.jumbotron{
	background-image: url( "../img/IMG_5290 2.jpg");
	background-size: cover;
	padding-left: 3%;
	font-family: 'Open Sans Condensed', sans-serif;
	font-style: light;
	}

	body{
	font-family: 'Open Sans Condensed', sans-serif;
	font-style: light;
	position: relative;
	}
	.jumbotron p {color: white;}
	.jumbotron h1 {color: white;}
	.jumbotron a {color: white;}

	.carousel {
	margin-left: -15px;
	margin-right: -15px;
	}


	.img-responsive {display: block;
	width: 100%;
	height: auto;
	}

	/** Work **/
	#work {width: 100%;}



	/** Contact page **/


	* { box-sizing: border-box; }

	.header h1 {
	text-align: center;
	font-size: 2.4em;
	}

	.contactcontainer {
	width: 80%;
	margin: 0 auto;
	font-size: 1.2em;
	padding-left: 5%;
	}

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


	p {
	display: inline;
	}

	selector {
	position: relative;
	}

	.image {
	border-width: 3px;
	border-color: #121F30;
	}

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


	.intro-collum {
	margin-bottom: 40px
	padding-bottom: 20px
	}

	.skill-collum {
	margin-bottom: 40px
	padding-bottom: 20px
	}

	#contact{
	background-image: url("../img/rose.jpg");
	/Add a background image/
	background-attachment: fixed;
	/Give the background a fixed position does it not scroll when you scroll/
	background-size: cover;
	/Have the background cover the entire div section/
	color: white;
	/Change the color of the text on top so it is readable, and adjust the padding as needed./
	padding:100px;
	padding-top: 50px;
	height: 400px;
	}

	/Typography/

	.box {
	font-family: 'Open Sans Condensed', sans-serif;
	font-style: light;

	}

	/Colour/

	#contactbody {
	background-color: #FFF7C4;
	color: #121F30;
	font-family: 'Open Sans Condensed', sans-serif;
	font-style: light;
	}


	#contactbody {
	color: #121F30;
	padding-top: 2.5%;
	}

	.projectName {
	text-transform: uppercase;
	margin: 15px;
	}

	.projectName a {
	color: white;
	text-decoration: none;
	z-index: 3;
	}

	.projectName a:hover {
	color: white;
	}

	.nav {
	background-color: #121F30;
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 2;
	}
	.nav ul li {
	display: inline-block;
	float: right;
	z-index: 1;
	}

	.nav ul li a {
	color: #FFF;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-family: 'Open Sans Condensed', sans-serif;
	font-style: light;
	text-decoration: none;
	z-index: 1;
	}

	.nav a:hover {
	color: #fff7c4;
	transition: color 300ms;
	-webkit-transition: color 300ms;
	text-decoration: underline;
	}


	/** FAQ **/

	#faq{
	color: #121F30;

	}

	body {background-color: #fff7c4}

	.cc{
	display: block;
	padding-top: 10px;
	width: 80%;
	display:flex;
	flex-direction: column;
	justify-content: center;

	position: relative;
	margin-right: auto;
	margin-left: auto;
	}

	.panel {
	border-style: none;
	box-shadow: none;
	background-color: transparent;
	}

	#headingOne{
	background-color: #121F30;
	color: white;
	}
	#headingTwo{
	background-color: #121F30;
	color: white;
	}
	#headingThree{
	background-color: #121F30;
	color: white;
	}


	.accordion {
	font-family: 'Open Sans Condensed', sans-serif;
	font-style: light;
	}

	/Portfolio/

	#work-img {
	padding-bottom: 10%;
	}


	/* About */

	* { box-sizing: border-box; }


	.header h1 {
	text-align: center;
	font-size: 3.2em;
	color: }


	#skill-header {
	padding-left: 24px;
	}


	.column {
	font-family: 'Open Sans Condensed', sans-serif;
	font-style: light;
	display: inline-block;
	float: left;
	width: 30%;
	padding: 0 20px;
	}

	.main-text {
	font-family: 'Open Sans Condensed', sans-serif;
	font-style: light;
	clear: both;
	padding-top: 30px;
	padding: top right bottom left;
	border-bottom: solid;
	border-width: 1px;
	padding-bottom: 20px;
	margin-bottom: 10px;
	font-size: 1.1em;
	}

	#intro p {
	font-family: 'Open Sans Condensed', sans-serif;
	font-style: light;
	font-size: 1.1em;
	font-weight: 100;
	-webkit-margin-before: 0;
	padding-left: 20px;
	padding-bottom: 20px;
	margin-bottom: 20px;
	padding-bottom: 20px;
	}


	#body {
	background-color: #FFF7C4;
	color: #121F30;
	padding-top: 2.5%;
	}
	.skills {
	background-color: #121F30;
	color: #FFF;
	float: right;
	padding: 0 65px;
	}
	.aboutcontainer {
	font-family: 'Open Sans Condensed', sans-serif;
	font-style: light;
	width: 80%;
	margin: 0 auto;
	padding-top: 40px;
	}
	.contact{
	display: inline;
	margin-left: 70px;
	}

	/* Index Page */

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

	.body {
	position: relative;
	}



	@media (min-width: 1200px) {
	.intro {
	margin-top: 25px;
	}

	.image-column {padding-bottom: 3%;}