Spesm/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<!-- Head of document -->
  <head>
    <!-- Meta tags -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Page title -->
    <title>Sem van Lent</title>
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
    <!-- Web fonts -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Fahkwang">
    <!-- Custom styles CSS -->
    <link rel="stylesheet" href="css/styles.css">
    <!-- Owl Carousel links -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css">
    <!-- Script for Twitter Follow Button -->
    <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
  </head>
  <!-- End of head -->
  <!-- Body of document -->
  <body data-spy="scroll" data-target="#navbar-example">
    <!-- Navigation bar -->
    <nav class="navbar fixed-top navbar-expand-md navbar-dark" role="navigation" id="navbar-example" style="background-color: #012622;">
      <a class="navbar-brand" href="#">
        <img src="img/svl-logo-white.png" width="40" height="40" class="d-inline-block align-top" alt="logo">
        <span class="navbar-brand mb-0 h0">Sem van Lent</span>
      </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#home">Home<span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#work">Work</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#about">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#contact">Contact</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#faq">FAQ</a>
          </li>
        </ul>
      </div>
    </nav>
    <!-- Ends navigation bar -->
    <!-- Starts jumbotron splash image -->
    <div class="jumbotron jumbotron-fluid top-image">
      <div class="container main-header">
        <h1 class="display-4">Sem van Lent</h1>
        <p class="lead">Student Portfolio</p>
      </div>
    </div>
    <!-- Starts inner body -->
    <div class="inner-body">
      <!-- Starts portfolio section -->
      <section class="portfolio">
        <a id="home"></a>
        <!-- Portfolio header -->
        <div class="header">
          <h2>Student Portfolio</h2>
        </div>
        <div class="container-fluid portfolio-info">
          <div class="row">
            <!-- Portfolio column -->
            <div class="col-lg-4 vertical-space">
              <div class="portfolio split-block">
                <h3>Portfolio</h3>
                <p>Welcome to my portfolio website! As a Web Development student at CareerFoundry, I have created this website from scratch to try and see how my code works and to implement the practical skills I’ve acquired along the way. I’ll be looking to share a selection of work and links to different projects here, in order to demonstrate my understanding of various development tools and to showcase the progress I’ll be making on my journey to become a professional developer. Stay tuned if you’re interested!</P>
              </div>
            </div>
            <!-- Project column -->
            <div class="col-lg-4 vertical-space">
              <div class="project split-block">
                <h3>Project</h3>
                <p>This portfolio is the first project I’ve been working on for the Web Development course. The goal is to create a single-page, smooth scrolling website using HTML, CSS and Bootstrap. The site has to be responsive on various screen sizes, should feature a fixed, responsive navigation bar and a design styled with fonts, links and colours customized in CSS. It should contain a working FAQ and About section, as well as a Contact section with glyphicons. Don’t worry about those - they don’t bite - but do feel free to contact me if you have any questions, comments or information to share!</p>
              </div>
            </div>
            <!-- Course column -->
            <div class="col-lg-4 vertical-space">
              <div class="course split-block">
                <h3>Course</h3>
                <p>The online structured course is modelled to take me from beginner level to a fully qualified developer within six months, with 1-on-1 mentorship from industry experts. The first of six achievements is to produce this portfolio site from scratch. Next, I’ll learn how to implement interactive HTML5 elements, how to set up a Rails application and how to write Ruby code. For the final achievement I will create a production-ready e-commerce web app, using AJAX, JavaScript, jQuery, Angular and CoffeeScript. With the skills acquired I’m looking to kickstart a career as a professional developer.</p>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- Ends portfolio section -->
      <!-- Starts work section -->
      <section class="work">
        <a id="work"></a>
        <!-- Work header -->
        <div class="header">
          <h2>Selected Work</h2>
        </div>
        <div class="work-carousel">
          <div class="owl-carousel owl-stage owl-theme" id="selected-work"</div>
        </div>
      </section>
      <!-- Ends work section -->
      <!-- Starts about section -->
      <section class="about">
        <a id="about"></a>
        <!-- About header -->
        <div class="header">
          <h2>About Me</h2>
        </div>
        <!-- About grid with 3 columns -->
        <div class="container-fluid">
          <div class="row">
            <!-- Image column -->
            <div class="col-md-6 col-xl-4 vertical-space">
              <div class="image split-block">
                <img src="img/sem tara.jpg" class="img-fluid" alt="Sem on Tara mountain viewpoint">
              </div>
            </div>
            <!-- Intro column -->
            <div class="col-md-6 col-xl-4 vertical-space">
              <div class="intro split-block">
                <h4>Hello!</h4>
                <p>How nice of youto come and take a look at my portfolio website! I had a little update recently, but it's still early days and work in progress of course. However, feel free to take a look around and don't hesitate to contact me if there's anything you'd like to discuss :)</p>
              </div>
            </div>
            <!-- Skill column -->
            <div class="col-xl-4 vertical-space">
              <div class="skills split-block">
                <h4>Skills</h4>
                <ul id="skill-list">
                  <li>Create on request a website from scratch with elemens all functional in HTML</li>
                  <li>Add custom styling through CSS and make your website look personal and awesome</li>
                  <li>Apply Bootstrap and other frameworks to enhance your visitors' user experience</li>
                  <li>Employ Google Analytics and optimize your digital environment for exposure and revenue</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="learn-more">
          <div class="container-fluid more-about-me" id="extra">
            <h4>More About Me</h4>
            <p>So, my name is Sem, I'm 35 years old and I currently live in Zaandam, a cute old town in the periphery of Amsterdam in the Netherlands.
              <br>I studied sociology at the University of Amsterdam, graduated as a Bachelor in 2012 and landed a job at Gall & Gall, the biggest retailer of wines and spirits in the Netherlands. I've worked in two different shops as a manager since 2015, but with a growing awareness that maybe retail is not a good place for my skills and ambition.
              <br>As I've always enjoyed scrutinizing data, solving puzzles and creating elaborate Excel sheets with multiple embedded conditional formulae, and as I've always liked the design element in creating environments for data to become meaningful in, I feel that a career in programming and development would suit me much better.
              <br>Together with the knowledge and understanding of data I've gained through academic social research, I think that the ability to write code in relevant Web Development languages should create some splendid opportunities to start a career that I can truly be passionate about.
            </p>
            <!-- Modal button -->
            <button type="button" class="btn btn-dark" data-toggle="modal" data-target=".bd-example-modal-lg" data-placement="right" title="View Resume">
              Resume &raquo
            </button>
          </div>
        </div>
        <!-- Modal -->
        <div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
          <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Curriculum Vitae</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body">
                <embed id="resume" src="img/cv-2018-eng.jpg">
              </div>
              <!-- <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
              </div> -->
            </div>
          </div>
        </div>
      </section>
      <!-- Ends about section -->
    </div>
    <!-- Ends inner body -->
    <!-- Starts telephone background image -->
    <div class="parallax-image">
      <div class="inner-body">
        <!-- Starts contact section -->
        <section class="contact">
          <a id="contact"></a>
          <!-- Contact header -->
          <div class="header">
            <h2>Contact</h2>
          </div>
          <div class="container-fluid contact-info">
            <div class="row">
              <div class="col-md-5 col-xl-3 vertical-space">
                <div class="details form-block">
                  <h3>Contact Details</h3>
                  <ul id="details">
                    <li><i class="fas fa-user"></i> Sem van Lent</li>
                    <li><i class="fas fa-home"></i> Bouwmanspad 29</li>
                    <li><i class="fas fa-globe"></i> 1506 HA Zaandam</li>
                    <li><i class="far fa-envelope"></i> semvlent@gmail.com</li>
                    <li><i class="fas fa-phone"></i> +31 6 41636365</li>
                  </ul>
                </div>
              </div>
              <div class="col-md-7 col-xl-5 vertical-space">
                <div class="form form-block">
                  <h3>Contact Form</h3>
                  <form>
                    <div class="form-group">
                      <label for="name">Full name*</label>
                      <input type="text" class="form-control" required="required" placeholder="Enter your name" id="name">
                      <p class="input-sent" id="visible-name"></p>
                    </div>
                    <div class="form-group">
                      <label for="email">Email address*</label>
                      <input type="email" class="form-control" required="required" placeholder="Enter your email" id="email">
                      <p class="input-sent" id="visible-email"></p>
                    </div>
                    <div class="form-group">
                      <label for="message">Your message*</label>
                      <textarea type="text" style="resize:none" cols="40" rows="5" class="form-control message-box" required="required" placeholder="Enter your message" id="message"></textarea>
                      <p class="input-sent" id="visible-comment"></p>
                      <div class="counter">
                        <p>Character Count:</p>
                        <p id="char-count">0</p>
                      </div>
                      <button type="submit" class="btn btn-dark" data-toggle="tooltip" data-placement="right" title="Send Message" id="button">Submit</button>
                    </div>
                  </form>
                </div>
              </div>
              <div class="col-xl-4 vertical-space">
                <div class="details form-block">
                  <h3>Google Map</h3>
                  <div class="map">
                    <div id="map"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
        <!-- Ends contact section -->
      </div>
      <!-- Ends inner body -->
    </div>
    <!-- Ends telephone bockground image -->
    <div class="inner-body">
      <!-- Starts faq section -->
      <section class="faq">
        <a id="faq"></a>
        <!-- FAQ header -->
        <div class="header">
          <h2>Frequently Asked Questions</h2>
        </div>
        <!-- FAQ accordion -->
        <div class="container-fluid accordion" id="accordion">
          <div class="card">
            <button class="card-header btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne" id="headingOne">
              <h5 class="mb-0">
                Why did you decide to become a developer?
              </h5>
            </button>
            <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
              <div class="card-body">
                I’ve always liked to create things. Design and make stuff that looks good and works well. After I graduated from high school, I briefly studied Industrial Design at the Technical University of Delft. I had to give up after half a year, because I ran out of money - and while I had classes for over 40 hours per week and 4 hours of travelling each day - there was no time left to work. I took up sociology instead and learned to satisfy my creative needs by designing spreadsheets and developing databases for scientific analysis. Meanwhile I had some jobs where I worked on websites and databases. Now I’m in my mid-thirties and I feel it’s time to get out of retail and start a serious career in online development.
              </div>
            </div>
          </div>
          <div class="card">
            <button class="card-header btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" id="headingTwo">
              <h5 class="mb-0">
                What is your design process?
              </h5>
            </button>
            <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
              <div class="card-body">
                I first like to get a clear idea of what the purpose of a website is and what it should technically be able to do. During this orientation, I try to get the feel of how my client wants his business represented. I may inquire about logos, photos, colour-schemes and other media that should be used and implemented in the design. With these I make a first draft for the website and its functions. From thereon I start an iterative process of fine-tuning elements in close collaboration with my clients.
              </div>
            </div>
          </div>
          <div class="card">
            <button class="card-header btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree" id="headingThree">
              <h5 class="mb-0">
                Who are your clients?
              </h5>
            </button>
            <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
              <div class="card-body">
                As I’ve just started the development course, I haven’t had any real clients yet. For now, I just like to learn as much as possible and gain all the necessary experience to become a professional developer. I’ll be doing this while working on course projects and taking up as many pastime and freelance projects as I can handle. If you like my approach and feel that you have a project we could mutually benefit from working together on, than don’t hesitate to contact me and send your proposal!
              </div>
            </div>
          </div>
          <div class="card">
            <button class="card-header btn btn-link collapsed" data-toggle="collapse" data-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour" id="headingFour">
              <h5 class="mb-0">
                Are you more into front-end or back-end development?
              </h5>
            </button>
            <div id="collapseFour" class="collapse" aria-labelledby="headingFour" data-parent="#accordion">
              <div class="card-body">
                So far, it’s more front-end. But this may very well change during the course of my studies. My goal is to be a qualified full-stack developer by the time I finish the course, so I hope to be able and enjoy working on both ends of the developer spectrum with similar enthusiasm in just a few months’ time.
              </div>
            </div>
          </div>
          <div class="card">
            <button class="card-header btn btn-link collapsed" data-toggle="collapse" data-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive" id="headingFive">
              <h5 class="mb-0">
                What products or industries are you passionate about?
              </h5>
            </button>
            <div id="collapseFive" class="collapse" aria-labelledby="headingFive" data-parent="#accordion">
              <div class="card-body">
                My big dream is to re-integrate my knowledge and experience from social scientific research with my newly acquired skills as a web developer. But this ambition is not so clearly outlined yet, and probably quite far away still. In the meantime, I’m passionate about music, cooking, wine and spirits, interior design, architecture, vintage furniture, audio-equipment, cars and motorsport. Just to name a few. But I’m willing to work on anything that can help me become a more experienced developer.
              </div>
            </div>
          </div>
          <div class="card">
            <button class="card-header btn btn-link collapsed" data-toggle="collapse" data-target="#collapseSix" aria-expanded="false" aria-controls="collapseSix" id="headingSix">
              <h5 class="mb-0">
                Are you willing to relocate?
              </h5>
            </button>
            <div id="collapseSix" class="collapse" aria-labelledby="headingSix" data-parent="#accordion">
              <div class="card-body">
                There’s nothing that money can’t buy, but I bought a house only year ago in Zaandam, where I moved in early this year with my girlfriend, who is quite comfortable in a new job she landed in Amsterdam. As we’re also looking to maybe have a child in the near future, I’m not eager to relocate in this stage of my life. But as said, there’s nothing that money can’t buy.
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- Ends faq section -->
    </div>
    <!-- Ends inner-body -->
    <footer class="container-fluid footer" id="footer">
      <div class="footer-content">
        <h3>Credits</h3>
        <p>Thumbs up to <a href="https://careerfoundry.com/en/home" title="Visit Page" id="CareerFoundry">CareerFoundry</a> for offering the guidelines to help me create this website. Special thanks to Mohamed Osama and Shan Gardezi for their support as my mentor and tutor.</p>
        <p>Thanks to Henry Daubrez for sharing the background pattern at <a href="http://thepatternlibrary.com/#wild-sea" title="Visit Page" id="PatternLibrary">thepatternlibrary.com</a> and to Eckhard Hoehmann for sharing the telephone picture on <a href="https://unsplash.com/@ecki77" title="Visit Page" id="Unsplash">Unsplash</a>.</p>
        <p>And of course lots of thanks to my dear parents, beautiful sisters, great friends, lovely girlfriend, almighty God and grumpy tortoise for their general support and good care ;)</p>
        <p>&copy; Sem van Lent 2018</p>
        <div class="social-media">
          <a href="https://twitter.com/LentSem?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-size="large" data-show-screen-name="false" data-lang="en" data-show-count="false">Follow @LentSem</a>
          <iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&width=450&layout=standard&action=like&size=large&show_faces=false&share=true&height=35&appId=325668981568930" width="450" height="35" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>
        </div>
      </div>
    </footer>
    <!-- Script tags with JavaScript files -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
    <script src="js/scripts.js"></script>
    <script async defer
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAMU16tcfyiyCCaQEP-7zS6tWdsXbElczU&callback=initMap">
    </script>
  </body>
  <!-- Ends body -->
</html>
	<!DOCTYPE html>
	<html lang="en">
	<!-- Head of document -->
	<head>
	<!-- Meta tags -->
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- Page title -->
	<title>Sem van Lent</title>
	<!-- Bootstrap core CSS -->
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
	<!-- Font Awesome Icons -->
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
	<!-- Web fonts -->
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Fahkwang">
	<!-- Custom styles CSS -->
	<link rel="stylesheet" href="css/styles.css">
	<!-- Owl Carousel links -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css">
	<!-- Script for Twitter Follow Button -->
	<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
	</head>
	<!-- End of head -->
	<!-- Body of document -->
	<body data-spy="scroll" data-target="#navbar-example">
	<!-- Navigation bar -->
	<nav class="navbar fixed-top navbar-expand-md navbar-dark" role="navigation" id="navbar-example" style="background-color: #012622;">
	<a class="navbar-brand" href="#">
	<img src="img/svl-logo-white.png" width="40" height="40" class="d-inline-block align-top" alt="logo">
	<span class="navbar-brand mb-0 h0">Sem van Lent</span>
	</a>
	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
	<span class="navbar-toggler-icon"></span>
	</button>
	<div class="collapse navbar-collapse" id="navbarSupportedContent">
	<ul class="navbar-nav ml-auto">
	<li class="nav-item active">
	<a class="nav-link" href="#home">Home<span class="sr-only">(current)</span></a>
	</li>
	<li class="nav-item">
	<a class="nav-link" href="#work">Work</a>
	</li>
	<li class="nav-item">
	<a class="nav-link" href="#about">About</a>
	</li>
	<li class="nav-item">
	<a class="nav-link" href="#contact">Contact</a>
	</li>
	<li class="nav-item">
	<a class="nav-link" href="#faq">FAQ</a>
	</li>
	</ul>
	</div>
	</nav>
	<!-- Ends navigation bar -->
	<!-- Starts jumbotron splash image -->
	<div class="jumbotron jumbotron-fluid top-image">
	<div class="container main-header">
	<h1 class="display-4">Sem van Lent</h1>
	<p class="lead">Student Portfolio</p>
	</div>
	</div>
	<!-- Starts inner body -->
	<div class="inner-body">
	<!-- Starts portfolio section -->
	<section class="portfolio">
	<a id="home"></a>
	<!-- Portfolio header -->
	<div class="header">
	<h2>Student Portfolio</h2>
	</div>
	<div class="container-fluid portfolio-info">
	<div class="row">
	<!-- Portfolio column -->
	<div class="col-lg-4 vertical-space">
	<div class="portfolio split-block">
	<h3>Portfolio</h3>
	<p>Welcome to my portfolio website! As a Web Development student at CareerFoundry, I have created this website from scratch to try and see how my code works and to implement the practical skills I’ve acquired along the way. I’ll be looking to share a selection of work and links to different projects here, in order to demonstrate my understanding of various development tools and to showcase the progress I’ll be making on my journey to become a professional developer. Stay tuned if you’re interested!</P>
	</div>
	</div>
	<!-- Project column -->
	<div class="col-lg-4 vertical-space">
	<div class="project split-block">
	<h3>Project</h3>
	<p>This portfolio is the first project I’ve been working on for the Web Development course. The goal is to create a single-page, smooth scrolling website using HTML, CSS and Bootstrap. The site has to be responsive on various screen sizes, should feature a fixed, responsive navigation bar and a design styled with fonts, links and colours customized in CSS. It should contain a working FAQ and About section, as well as a Contact section with glyphicons. Don’t worry about those - they don’t bite - but do feel free to contact me if you have any questions, comments or information to share!</p>
	</div>
	</div>
	<!-- Course column -->
	<div class="col-lg-4 vertical-space">
	<div class="course split-block">
	<h3>Course</h3>
	<p>The online structured course is modelled to take me from beginner level to a fully qualified developer within six months, with 1-on-1 mentorship from industry experts. The first of six achievements is to produce this portfolio site from scratch. Next, I’ll learn how to implement interactive HTML5 elements, how to set up a Rails application and how to write Ruby code. For the final achievement I will create a production-ready e-commerce web app, using AJAX, JavaScript, jQuery, Angular and CoffeeScript. With the skills acquired I’m looking to kickstart a career as a professional developer.</p>
	</div>
	</div>
	</div>
	</div>
	</section>
	<!-- Ends portfolio section -->
	<!-- Starts work section -->
	<section class="work">
	<a id="work"></a>
	<!-- Work header -->
	<div class="header">
	<h2>Selected Work</h2>
	</div>
	<div class="work-carousel">
	<div class="owl-carousel owl-stage owl-theme" id="selected-work"</div>
	</div>
	</section>
	<!-- Ends work section -->
	<!-- Starts about section -->
	<section class="about">
	<a id="about"></a>
	<!-- About header -->
	<div class="header">
	<h2>About Me</h2>
	</div>
	<!-- About grid with 3 columns -->
	<div class="container-fluid">
	<div class="row">
	<!-- Image column -->
	<div class="col-md-6 col-xl-4 vertical-space">
	<div class="image split-block">
	<img src="img/sem tara.jpg" class="img-fluid" alt="Sem on Tara mountain viewpoint">
	</div>
	</div>
	<!-- Intro column -->
	<div class="col-md-6 col-xl-4 vertical-space">
	<div class="intro split-block">
	<h4>Hello!</h4>
	<p>How nice of youto come and take a look at my portfolio website! I had a little update recently, but it's still early days and work in progress of course. However, feel free to take a look around and don't hesitate to contact me if there's anything you'd like to discuss :)</p>
	</div>
	</div>
	<!-- Skill column -->
	<div class="col-xl-4 vertical-space">
	<div class="skills split-block">
	<h4>Skills</h4>
	<ul id="skill-list">
	<li>Create on request a website from scratch with elemens all functional in HTML</li>
	<li>Add custom styling through CSS and make your website look personal and awesome</li>
	<li>Apply Bootstrap and other frameworks to enhance your visitors' user experience</li>
	<li>Employ Google Analytics and optimize your digital environment for exposure and revenue</li>
	</ul>
	</div>
	</div>
	</div>
	</div>
	<div class="learn-more">
	<div class="container-fluid more-about-me" id="extra">
	<h4>More About Me</h4>
	<p>So, my name is Sem, I'm 35 years old and I currently live in Zaandam, a cute old town in the periphery of Amsterdam in the Netherlands.
	<br>I studied sociology at the University of Amsterdam, graduated as a Bachelor in 2012 and landed a job at Gall & Gall, the biggest retailer of wines and spirits in the Netherlands. I've worked in two different shops as a manager since 2015, but with a growing awareness that maybe retail is not a good place for my skills and ambition.
	<br>As I've always enjoyed scrutinizing data, solving puzzles and creating elaborate Excel sheets with multiple embedded conditional formulae, and as I've always liked the design element in creating environments for data to become meaningful in, I feel that a career in programming and development would suit me much better.
	<br>Together with the knowledge and understanding of data I've gained through academic social research, I think that the ability to write code in relevant Web Development languages should create some splendid opportunities to start a career that I can truly be passionate about.
	</p>
	<!-- Modal button -->
	<button type="button" class="btn btn-dark" data-toggle="modal" data-target=".bd-example-modal-lg" data-placement="right" title="View Resume">
	Resume &raquo
	</button>
	</div>
	</div>
	<!-- Modal -->
	<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-lg" role="document">
	<div class="modal-content">
	<div class="modal-header">
	<h5 class="modal-title" id="exampleModalLongTitle">Curriculum Vitae</h5>
	<button type="button" class="close" data-dismiss="modal" aria-label="Close">
	<span aria-hidden="true">×</span>
	</button>
	</div>
	<div class="modal-body">
	<embed id="resume" src="img/cv-2018-eng.jpg">
	</div>
	<!-- <div class="modal-footer">
	<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
	<button type="button" class="btn btn-primary">Save changes</button>
	</div> -->
	</div>
	</div>
	</div>
	</section>
	<!-- Ends about section -->
	</div>
	<!-- Ends inner body -->
	<!-- Starts telephone background image -->
	<div class="parallax-image">
	<div class="inner-body">
	<!-- Starts contact section -->
	<section class="contact">
	<a id="contact"></a>
	<!-- Contact header -->
	<div class="header">
	<h2>Contact</h2>
	</div>
	<div class="container-fluid contact-info">
	<div class="row">
	<div class="col-md-5 col-xl-3 vertical-space">
	<div class="details form-block">
	<h3>Contact Details</h3>
	<ul id="details">
	<li><i class="fas fa-user"></i> Sem van Lent</li>
	<li><i class="fas fa-home"></i> Bouwmanspad 29</li>
	<li><i class="fas fa-globe"></i> 1506 HA Zaandam</li>
	<li><i class="far fa-envelope"></i> semvlent@gmail.com</li>
	<li><i class="fas fa-phone"></i> +31 6 41636365</li>
	</ul>
	</div>
	</div>
	<div class="col-md-7 col-xl-5 vertical-space">
	<div class="form form-block">
	<h3>Contact Form</h3>
	<form>
	<div class="form-group">
	<label for="name">Full name*</label>
	<input type="text" class="form-control" required="required" placeholder="Enter your name" id="name">
	<p class="input-sent" id="visible-name"></p>
	</div>
	<div class="form-group">
	<label for="email">Email address*</label>
	<input type="email" class="form-control" required="required" placeholder="Enter your email" id="email">
	<p class="input-sent" id="visible-email"></p>
	</div>
	<div class="form-group">
	<label for="message">Your message*</label>
	<textarea type="text" style="resize:none" cols="40" rows="5" class="form-control message-box" required="required" placeholder="Enter your message" id="message"></textarea>
	<p class="input-sent" id="visible-comment"></p>
	<div class="counter">
	<p>Character Count:</p>
	<p id="char-count">0</p>
	</div>
	<button type="submit" class="btn btn-dark" data-toggle="tooltip" data-placement="right" title="Send Message" id="button">Submit</button>
	</div>
	</form>
	</div>
	</div>
	<div class="col-xl-4 vertical-space">
	<div class="details form-block">
	<h3>Google Map</h3>
	<div class="map">
	<div id="map"></div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</section>
	<!-- Ends contact section -->
	</div>
	<!-- Ends inner body -->
	</div>
	<!-- Ends telephone bockground image -->
	<div class="inner-body">
	<!-- Starts faq section -->
	<section class="faq">
	<a id="faq"></a>
	<!-- FAQ header -->
	<div class="header">
	<h2>Frequently Asked Questions</h2>
	</div>
	<!-- FAQ accordion -->
	<div class="container-fluid accordion" id="accordion">
	<div class="card">
	<button class="card-header btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne" id="headingOne">
	<h5 class="mb-0">
	Why did you decide to become a developer?
	</h5>
	</button>
	<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
	<div class="card-body">
	I’ve always liked to create things. Design and make stuff that looks good and works well. After I graduated from high school, I briefly studied Industrial Design at the Technical University of Delft. I had to give up after half a year, because I ran out of money - and while I had classes for over 40 hours per week and 4 hours of travelling each day - there was no time left to work. I took up sociology instead and learned to satisfy my creative needs by designing spreadsheets and developing databases for scientific analysis. Meanwhile I had some jobs where I worked on websites and databases. Now I’m in my mid-thirties and I feel it’s time to get out of retail and start a serious career in online development.
	</div>
	</div>
	</div>
	<div class="card">
	<button class="card-header btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" id="headingTwo">
	<h5 class="mb-0">
	What is your design process?
	</h5>
	</button>
	<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
	<div class="card-body">
	I first like to get a clear idea of what the purpose of a website is and what it should technically be able to do. During this orientation, I try to get the feel of how my client wants his business represented. I may inquire about logos, photos, colour-schemes and other media that should be used and implemented in the design. With these I make a first draft for the website and its functions. From thereon I start an iterative process of fine-tuning elements in close collaboration with my clients.
	</div>
	</div>
	</div>
	<div class="card">
	<button class="card-header btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree" id="headingThree">
	<h5 class="mb-0">
	Who are your clients?
	</h5>
	</button>
	<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
	<div class="card-body">
	As I’ve just started the development course, I haven’t had any real clients yet. For now, I just like to learn as much as possible and gain all the necessary experience to become a professional developer. I’ll be doing this while working on course projects and taking up as many pastime and freelance projects as I can handle. If you like my approach and feel that you have a project we could mutually benefit from working together on, than don’t hesitate to contact me and send your proposal!
	</div>
	</div>
	</div>
	<div class="card">
	<button class="card-header btn btn-link collapsed" data-toggle="collapse" data-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour" id="headingFour">
	<h5 class="mb-0">
	Are you more into front-end or back-end development?
	</h5>
	</button>
	<div id="collapseFour" class="collapse" aria-labelledby="headingFour" data-parent="#accordion">
	<div class="card-body">
	So far, it’s more front-end. But this may very well change during the course of my studies. My goal is to be a qualified full-stack developer by the time I finish the course, so I hope to be able and enjoy working on both ends of the developer spectrum with similar enthusiasm in just a few months’ time.
	</div>
	</div>
	</div>
	<div class="card">
	<button class="card-header btn btn-link collapsed" data-toggle="collapse" data-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive" id="headingFive">
	<h5 class="mb-0">
	What products or industries are you passionate about?
	</h5>
	</button>
	<div id="collapseFive" class="collapse" aria-labelledby="headingFive" data-parent="#accordion">
	<div class="card-body">
	My big dream is to re-integrate my knowledge and experience from social scientific research with my newly acquired skills as a web developer. But this ambition is not so clearly outlined yet, and probably quite far away still. In the meantime, I’m passionate about music, cooking, wine and spirits, interior design, architecture, vintage furniture, audio-equipment, cars and motorsport. Just to name a few. But I’m willing to work on anything that can help me become a more experienced developer.
	</div>
	</div>
	</div>
	<div class="card">
	<button class="card-header btn btn-link collapsed" data-toggle="collapse" data-target="#collapseSix" aria-expanded="false" aria-controls="collapseSix" id="headingSix">
	<h5 class="mb-0">
	Are you willing to relocate?
	</h5>
	</button>
	<div id="collapseSix" class="collapse" aria-labelledby="headingSix" data-parent="#accordion">
	<div class="card-body">
	There’s nothing that money can’t buy, but I bought a house only year ago in Zaandam, where I moved in early this year with my girlfriend, who is quite comfortable in a new job she landed in Amsterdam. As we’re also looking to maybe have a child in the near future, I’m not eager to relocate in this stage of my life. But as said, there’s nothing that money can’t buy.
	</div>
	</div>
	</div>
	</div>
	</section>
	<!-- Ends faq section -->
	</div>
	<!-- Ends inner-body -->
	<footer class="container-fluid footer" id="footer">
	<div class="footer-content">
	<h3>Credits</h3>
	<p>Thumbs up to <a href="https://careerfoundry.com/en/home" title="Visit Page" id="CareerFoundry">CareerFoundry</a> for offering the guidelines to help me create this website. Special thanks to Mohamed Osama and Shan Gardezi for their support as my mentor and tutor.</p>
	<p>Thanks to Henry Daubrez for sharing the background pattern at <a href="http://thepatternlibrary.com/#wild-sea" title="Visit Page" id="PatternLibrary">thepatternlibrary.com</a> and to Eckhard Hoehmann for sharing the telephone picture on <a href="https://unsplash.com/@ecki77" title="Visit Page" id="Unsplash">Unsplash</a>.</p>
	<p>And of course lots of thanks to my dear parents, beautiful sisters, great friends, lovely girlfriend, almighty God and grumpy tortoise for their general support and good care ;)</p>
	<p>© Sem van Lent 2018</p>
	<div class="social-media">
	<a href="https://twitter.com/LentSem?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-size="large" data-show-screen-name="false" data-lang="en" data-show-count="false">Follow @LentSem</a>
	<iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&width=450&layout=standard&action=like&size=large&show_faces=false&share=true&height=35&appId=325668981568930" width="450" height="35" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>
	</div>
	</div>
	</footer>
	<!-- Script tags with JavaScript files -->
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
	<script src="js/scripts.js"></script>
	<script async defer
	src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAMU16tcfyiyCCaQEP-7zS6tWdsXbElczU&callback=initMap">
	</script>
	</body>
	<!-- Ends body -->
	</html>