html pagina

<!DOCTYPE html>
<html>
<head>
<title>Portfolio - Thijmen Peters</title>

<meta name = "keywords" content = "SMINT jQuery Plugin, SMINT, jQuery Plugin, One Page Website, Sticky Navigation" />
<meta name = "description" content = "SMINT is a simple plugin for lovers of one page websites, which helps with sticky menus and page scrolling." />
<meta name="viewport" content="width=device-width">


<link href="portfolio.css" rel="stylesheet" type="text/css">


<script type="text/javascript" src="js/jquery.min.js"></script>

<script	src="js/jquery.smint.js" type="text/javascript" ></script>

/-------------------------------------------------------------------------/


<script type="text/javascript">


$(document).ready( function() {
    $('.subMenu').smint({
    	'scrollSpeed' : 1000
    });
});

var ypos,header_1;
	function parallex () {
		ypos = window.pageYOffset;
		image = document.getElementById('header_1');
		image.style.top = ypos * .8 +'px';
	}


                var ypos,me;
	function parallex () {
		ypos = window.pageYOffset;
		image = document.getElementById('me');
		image.style.top = ypos * .4 +'px';
	}


        window.addEventListener('scroll',parallex);


</script>


</head>
<body>


<div class="wrap ">


	<div class="subMenu" >
	 	<div class="inner">

	 		<a href="#s1" class="subNavBtn">Home</a>
			<a href="#s2" class="subNavBtn">Graphic Design</a>
			<a href="#s3" class="subNavBtn">Photographic</a>
			<a href="#s4" class="subNavBtn">Art</a>
                        <a href="#s5" class="subNavBtn">Film</a>

		</div>
	</div>

	<div class="section s1">
		<div class="inner ">
                        <div id="logo"    src="portfolio/1/title.png"></div>
                        <div id="me"      src="1/me.png" ></div>
			<img id="header_1" src="1/header.jpg" height="710px" width="100%" />


		</div>
	</div>

	<div class="section s2">
		<div class="inner">
                        <div id="text_1" >
                            <p>
                                <h1>Graphic Design</h1>

                                <h6>Sometimes I work on projects for school,</br>
                                    music and sport clubs or just for myself. </br>
                                    For example, I made flyers for the ‘solisten </br>
                                    concours 2015’. At school, I am member of </br>
                                    the team that makes the school paper and </br>
                                    I am designing the cover and back of the paper.</br>
                                    In 2013, I made a Monopoly board game of </br>
                                    my hometown and I am really happy with </br>
                                    the result. I like projects and hope to do </br>
                                    more of them in the future. </br>
                                    Projects are always welcome. </br>
                                    Tab on the photos for a enlarge. </h6>
                            </p>
                        </div>
                <ul class="slides">
    <input type="radio" name="radio-btn" id="img-1" checked />
    <li class="slide-container">
		<div class="slide">
			<img src="portfolio/2/img_1.jpg" />
        </div>
		<div class="nav">
			<label for="img-6" class="prev">&#x2039;</label>
			<label for="img-2" class="next">&#x203a;</label>
		</div>
    </li>

    <input type="radio" name="radio-btn" id="img-2" />
    <li class="slide-container">
        <div class="slide">
          <img src="portfolio/2/img_2.jpg" />
        </div>
		<div class="nav">
			<label for="img-1" class="prev">&#x2039;</label>
			<label for="img-3" class="next">&#x203a;</label>
		</div>
    </li>

    <input type="radio" name="radio-btn" id="img-3" />
    <li class="slide-container">
        <div class="slide">
        <img src="portfolio/2/img_3.jpg" />
        </div>
		<div class="nav">
			<label for="img-2" class="prev">&#x2039;</label>
			<label for="img-4" class="next">&#x203a;</label>
		</div>
    </li>

    <input type="radio" name="radio-btn" id="img-4" />
    <li class="slide-container">
        <div class="slide">
          <img src="portfolio/2/img_4.jpg" />
        </div>
		<div class="nav">
			<label for="img-3" class="prev">&#x2039;</label>
			<label for="img-5" class="next">&#x203a;</label>
		</div>
    </li>

    <input type="radio" name="radio-btn" id="img-5" />
    <li class="slide-container">
        <div class="slide">
          <img src="portfolio/2/img_5.jpg" />
        </div>
		<div class="nav">
			<label for="img-4" class="prev">&#x2039;</label>
			<label for="img-6" class="next">&#x203a;</label>
		</div>
    </li>

    <input type="radio" name="radio-btn" id="img-6" />
    <li class="slide-container">
        <div class="slide">
          <img src="portfolio/2/img_6.jpg" />
        </div>
		<div class="nav">
			<label for="img-5" class="prev">&#x2039;</label>
			<label for="img-7" class="next">&#x203a;</label>
		</div>
    </li>

        <input type="radio" name="radio-btn" id="img-7" />
    <li class="slide-container">
        <div class="slide">
          <img src="portfolio/2/img_7.jpg" />
        </div>
		<div class="nav">
			<label for="img-6" class="prev">&#x2039;</label>
			<label for="img-8" class="next">&#x203a;</label>
		</div>
    </li>

                <input type="radio" name="radio-btn" id="img-8" />
    <li class="slide-container">
        <div class="slide">
          <img src="portfolio/2/img_8.jpg" />
        </div>
		<div class="nav">
			<label for="img-7" class="prev">&#x2039;</label>
			<label for="img-1" class="next">&#x203a;</label>
		</div>
    </li>


    <li class="nav-dots">
      <label for="img-1" class="nav-dot" id="img-dot-1"></label>
      <label for="img-2" class="nav-dot" id="img-dot-2"></label>
      <label for="img-3" class="nav-dot" id="img-dot-3"></label>
      <label for="img-4" class="nav-dot" id="img-dot-4"></label>
      <label for="img-5" class="nav-dot" id="img-dot-5"></label>
      <label for="img-6" class="nav-dot" id="img-dot-6"></label>
      <label for="img-7" class="nav-dot" id="img-dot-7"></label>
      <label for="img-8" class="nav-dot" id="img-dot-8"></label>
    </li>
</ul>


			<div id="header_2" src="portfolio/2/header.jpg" height="710px" width="100%" ></div>

		</div>
	</div>


	<div class="section s3">
		<div class="inner">

            <div id="text_2">

                 <p>
                    <h1>Photographic</h1>

                    <h6> Since this year, I started experimenting with</br>
                        photography. I have mainly </br>
                        learned this at school.</br>
                        I mostly enjoy making pictures </br>
                        of ‘light painting’ and fireworks. </br>
                        My camera is a Canon eos 1200d. </h6>


                </p>

            </div>
            <ul class="slides">
    <input type="radio" name="radio-btn" id="img-1" checked />
    <li class="slide-container">
		<div class="slide">
			<img src="portfolio/3/img_1.jpg" />
        </div>
		<div class="nav">
			<label for="img-6" class="prev">&#x2039;</label>
			<label for="img-2" class="next">&#x203a;</label>
		</div>
    </li>

    <input type="radio" name="radio-btn" id="img-2" />
    <li class="slide-container">
        <div class="slide">
          <img src="portfolio/3/img_2.jpg" />
        </div>
		<div class="nav">
			<label for="img-1" class="prev">&#x2039;</label>
			<label for="img-3" class="next">&#x203a;</label>
		</div>
    </li>

    <input type="radio" name="radio-btn" id="img-3" />
    <li class="slide-container">
        <div class="slide">
        <img src="portfolio/3/img_3.jpg" />
        </div>
		<div class="nav">
			<label for="img-2" class="prev">&#x2039;</label>
			<label for="img-4" class="next">&#x203a;</label>
		</div>
    </li>

    <input type="radio" name="radio-btn" id="img-4" />
    <li class="slide-container">
        <div class="slide">
          <img src="portfolio/3/img_4.jpg" />
        </div>
		<div class="nav">
			<label for="img-3" class="prev">&#x2039;</label>
			<label for="img-5" class="next">&#x203a;</label>
		</div>
    </li>

    <input type="radio" name="radio-btn" id="img-5" />
    <li class="slide-container">
        <div class="slide">
          <img src="portfolio/3/img_5.jpg" />
        </div>
		<div class="nav">
			<label for="img-4" class="prev">&#x2039;</label>
			<label for="img-6" class="next">&#x203a;</label>
		</div>
    </li>

    <input type="radio" name="radio-btn" id="img-6" />
    <li class="slide-container">
        <div class="slide">
          <img src="portfolio/3/img_6.jpg" />
        </div>
		<div class="nav">
			<label for="img-5" class="prev">&#x2039;</label>
			<label for="img-1" class="next">&#x203a;</label>
		</div>
    </li>


    <li class="nav-dots_portfolio">
      <label for="img-1" class="nav-dot" id="img-dot-1"></label>
      <label for="img-2" class="nav-dot" id="img-dot-2"></label>
      <label for="img-3" class="nav-dot" id="img-dot-3"></label>
      <label for="img-4" class="nav-dot" id="img-dot-4"></label>
      <label for="img-5" class="nav-dot" id="img-dot-5"></label>
      <label for="img-6" class="nav-dot" id="img-dot-6"></label>

    </li>


</ul>


			<div id="header_3" src="portfolio/3/header.png" height="800px" width="175%"></div>
		</div>
	</div>

	<div class="section s4">

            <div id="text_3">
                <p>
                    <h1>Art</h1>
                    <h6>I don’ t know exactly when I started to paint,</br>
                        but I know I have been doing it for a long time. </br>
                        Recently, I paint less because I started experimenting </br>
                        with design programs like Photoshop. My paintings often </br>
                        involve animals and I mostly paint with acrylic paint. </br>
                        Although I used to paint very realistic and detailed, </br>
                        I now enjoy using a more expressive style with </br>
                        bright colors. </h6>
                </p>

            </div>

		<div class="inner">
			<div id="header_4" src="portfolio/4/header.png" height="800px" width="175%"></div>
		</div>
	</div>


	<div class="section s5">
		<div class="inner">

            <div id="text_4">

                 <p>
                    <h1>Film</h1>

                        <h6>Coming Soon.....</br> </h6>

                </p>

            </div>


		<div id="header_5" src="portfolio/5/header.png" height="710px" width="125%"></div>
	    </div>
	</div>


</div>


</body>
</html>