Untitled


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>APW-Design:Andrew Paul Wilson</title>
    <link rel="stylesheet" type="text/css" href="css/styles.css" />
    <link rel="stylesheet" href="bjqs.css">


<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.delay.js"></script>
<script type="text/javascript" src="js/jquery.backgroundPosition.js"></script>
<script type="text/javascript" src="js/bjqs-1.3.min.js"></script>


<script>
    $(document).ready(function() {
        $("#menu, #white_line, #logo, #social").css("opacity","0");
        $("#menu").stop().animate({
                opacity: 1,
                marginLeft: '50px'
        }, 600, 'easeInSine');
        $("#social").stop().animate({
                opacity: 0.7,
        }, 600, 'easeInSine');
        $("#logo").stop().animate({
                opacity: 1.0,
                marginLeft: '50px'
        }, 600, 'easeInSine');
        $('#white_line').stop().animate(
            {opacity: 0.5},
            {duration:600,easing: 'easeInSine'
        });
    $('#help').mouseenter(function(element) {
        $("#help").css("background","#cecece")
        $("#help a").css("color","#000")
        });
        $('#help').mouseleave(function(element) {
        $("#help").css("background","#000")
        $("#help a").css("color","#fff")
        });


        $('#social').mouseenter(function(element) {
        $("#social").stop().animate(
                {right:0,opacity:1 },
                {duration:500,easing: 'easeOutBack'}
        )
        });

        $('#social').mouseleave(function(element) {
        $("#social").stop().animate(
                {right:-280,opacity:0.7 },
                {duration:500,easing: 'easeOutBack'}
        )
        });


    $('#logo').mouseenter(function(element) {
        $("#white_line").css("background-color","#3F9");
            $('#white_line').stop().animate(
                {top: 0, height:234,left:49, width:166,opacity:1 },
                {duration:500,easing: 'easeOutBack'}
            )
    })
    $('#logo').mouseleave(function(element) {
        $("#white_line").css("background","#000");
            $('#white_line').stop().animate(
                {top: 79, height:2, width:1920, left:0, opacity:0.5},
                {duration:500,easing: 'easeOutBack'}
            )
    })

        $('#menu span').mouseenter(function(element) {
            $("#menu ul li").css("opacity","1");
            $("#menu").css("background","url(images/menuwhite.png) no-repeat 0px top");
            $('#white_line').stop().animate(
                {top: 100, height:310,left:49, width:166, opacity:0.5 },
                {duration:500,easing: 'easeOutBack'}
            )
            $("#menu ul li").eachDelay(function(){
                $(this).stop().animate({
                opacity: 1,
                marginLeft: '0px',
                backgroundPosition: "150px 0px"
                }, 600, 'easeOutBack');
            }, 30);
        });

        $('#menu').mouseleave(function(element) {
            $("#menu ul li").eachDelay(function(index){
                $(this).stop().animate({
                opacity: 0,
                marginLeft: '-200px',
                backgroundPosition: "150px 0px"
                }, 600, 'linear');
                $("#menu").css("background","url(images/menu.png) no-repeat 0px top");
                if(index == $("#menu ul li").size() -1){
                    $('#white_line').stop().animate(
                        {top: 79, height:2, width:1600, left:0, opcacity:0.5},
                        {duration:600,easing: 'easeInBack'
                    })
                }
            }, 30);


        });


        $('#menu ul li').mouseenter(function(element) {
            $('#menu ul li').not(this).stop().animate({
                backgroundPosition: "150px 0px",
                opacity: '0.5'
            }, 500, 'linear');
            $(this).stop().animate({
                backgroundPosition: "300px 0px",
                opacity: '1'
            }, 600, 'easeOutBounce');
            $(this).find('a').css("color","#fff");
        });

        $('#menu ul li').mouseleave(function(element) {
            $(this).stop().animate({
                backgroundPosition: "150px 0px",
                opacity: '1'
            }, 200, 'linear');
            $(this).find('a').css("color","#000");
        });


    });
</script>
<script type="text/javascript">
            $(function() {
                $('#menu ul li a').bind('click',function(event){
                    var $anchor = $(this);
                    /*
                    if you want to use one of the easing effects:
                    $('html, body').stop().animate({
                        scrollLeft: $($anchor.attr('href')).offset().left
                    }, 1500,'easeOutQuad');
                     */
                     $('html, body').stop().animate({
                        scrollLeft: $($anchor.attr('href')).offset().left, scrollTop: $($anchor.attr('href')).offset().top
                    }, 1500,'easeInOutExpo');
                    event.preventDefault();
                });
            });
        </script>
</head>
<body>
<!--[if lt IE 9]><div id="IENotice" div class="IENotice"><p>Your web browser is a little old for this site, update it here: <a href="http://www.browserchoice.eu">upgrade your browser</a> to the latest version if you want to properly see this site.</p></div><![endif]-->
<div class="section white" id="section1">
            <div class="maincontent">
            <h1>Welcome</h1>
            <p>My name is Andrew Paul Wilson. I am a student designer currently based in <a href="https://maps.google.co.uk/maps?q=google+maps+leeds&ie=UTF-8&hq=&hnear=0x48793e4ada64bd99:0x51adbafd0213dca9,Leeds,+West+Yorkshire&gl=uk&ei=8XPBULCDDMOx0AXm2YGwBg&ved=0CC8Q8gEwAA" target="_blank">Leeds</a>. I am studying my second year of product design at Leeds Metropolitan University in The Leeds School of Art, Architecture and Design. </p>
            </div>
        </div>
<div class="section white" id="section2">
            <div class="maincontent">
            <h1>Profile</h1>
            <p>Name: Andrew Paul Wilson
            Age:20</p>
            </div>
        </div>
<div class="section white" id="section2a">
<div class="section maincontent"><h1>Section 2a</h1></div>

            <ul class="nav">
                <li><a href="#section1">1</a></li>
                <li><a href="#section2">2</a></li>
                <li>3</li>
            </ul>
        </div>
<div class="section white" id="section3">
<div class="workcontent">
<div class="workbox">
<div class="workboximage" div id="workboximage1"></div>
                    <div class="workboxdescription" div id="workboxdescription1">
                        <p>Bamboo Project - This project was about.</p>
                    </div>
                </div>
                <div class="workbox"><div class="workboximage"></div><div class="workboxdescription"></div></div>
                <div class="workbox"><div class="workboximage"></div><div class="workboxdescription"></div></div>
                <div class="workbox"><div class="workboximage"></div><div class="workboxdescription"></div></div>
                <div class="workbox"><div class="workboximage"></div><div class="workboxdescription"></div></div>
                <div class="workbox"><div class="workboximage"></div><div class="workboxdescription"></div></div>
                <div class="workbox"><div class="workboximage"></div><div class="workboxdescription"></div></div>
                <div class="workbox"><div class="workboximage"></div><div class="workboxdescription"></div></div>
                <div class="workbox"><div class="workboximage"></div><div class="workboxdescription"></div></div>
                <div class="workbox"><div class="workboximage"></div><div class="workboxdescription"></div></div>
                <div class="workbox"><div class="workboximage"></div><div class="workboxdescription"></div></div>
                <div class="workbox"><div class="workboximage"></div><div class="workboxdescription"></div></div>
            </div>
        </div>
<div class="section white" id="section4">
<div style="background-color: rgba(0, 255, 0, 0.1);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7F00FF00', EndColorStr='#7F00FF00');position:relative; top:300px; left:300px;">
            <h2>Section 4</h2>
            <p>
                Mur
            </p>
            </div>
<ul class="nav">
                <li>1</li>
                <li><a href="#section2">2</a></li>
                <li><a href="#section3">3</a></li>
            </ul>
        </div>
        <div id="logo" onclick="location.href='index.html'"></div>
        <div id="help"><a href="help.html">Help</a></div>
        <div id="white_line"></div>
        <div id="menu">
            <span></span>
            <ul>
                <li class="item1"><a href="#section1">Home</a></li>
                <li class="item2"><a href="#section2">Profile</a></li>
                <li class="item3"><a href="#section2a">Work</a></li>
                <li class="item4"><a href="#section3">Connect</a></li>
                <li class="item5"><a href="#section4">Contact</a></li>
            </ul>
        </div>
      <div id="social"></div>


</body>
</html>