Questionniare_01_test

by Joe Young

HTML

<div id="welcome">
    <div class="title01">Congratulations</div>
    <div class="exp_content">You just took the most important step towards bringing your Business to life! Completing this questionnaire will give us a solid foundation for building your Company Image and eliminate the guess work in regards to what type of designs will best suit your Company. There's a total of 8 sections which hone in on the most vital parts of ensuring effectiveness and success with every action performed under your roof.
        <br />
        <br />
        <br />
        <br />
        <div class="sub_title01">1. Contact and Location</div>This section outlines your general contact info and location of your Business.
        <br />
        <br />
        <div class="sub_title01">2. General Business Info</div>This section outlines the basics of where you currently are with running/starting your business.
        <br />
        <br />
        <div class="sub_title01">3. You as an Entrepreneur</div>This section sheds light onto what type of Entrepreneur you are which helps determine the methods of Business you're most likely to pursue. Establishing this will help with custom tailoring your material to suit your unique ways of doing Business.
        <br />
        <br />
        <div class="sub_title01">4. Where Your Business Fits Into the Market</div>This section is to outline the specifics of what you have to offer and how it effects people in order to identify which type of playing field you're rooted in.
        <br />
        <br />
        <div class="sub_title01">5. How People Relate to Your Business</div>This section outlines the Customer's perspective of what you have to offer and how they feel about the way you do things in particular.
        <br />
        <br />
        <div class="sub_title01">6. Customer Profiles</div>This section allows you to provide detailed information about the different types of Customers you have/plan to cater to.
        <br />
        <br...

CSS

body {
    width:1266px;
    height:612px;
    background-color:#1B1B1B;
    background-image:url(Optiq%20Vision%20Questionnaire/Background.png);
    background-position:top 40px center;
    background-repeat:no-repeat;
    background-attachment:fixed;
    margin:auto;
    position:relative;
    top:40px;
    z-index:1;
}
header {
    width:1266px;
    height:40px;
    margin:auto;
    display:block;
    background-image:url(Optiq%20Vision%20Questionnaire/header.png);
    position:fixed;
    z-index:4;
}
footer {
    width:1266px;
    height:40px;
    margin:auto;
    display:block;
    background-image:url(Optiq%20Vision%20Questionnaire/footer.png);
    z-index:4;
}
#welcome {
    width:888px;
    height:1600px;
    margin:auto;
    display:block;
    border-radius:11px;
    background-color:#1B1B1B;
}
#page01 {
    width:888px;
    height:8600px;
    margin:auto;
    display:none;
}
#background {
    width:888px;
    height:100%;
    background-color:#fff;
    opacity:.44;
    display:block;
    border-radius:11px;
    position:relative;
    top:0px;
    z-index:2;
}
#p01content {
    width:888px;
    height:auto;
    display:block;
    position:absolute;
    top:0;
    z-index:3;
}
.exp_content {
    width:92%;
    height:auto;
    font-family:'Poiret One', cursive;
    font-size:13pt;
    color:#ffb500;
    text-align:center;
    margin:auto;
    padding:12px;
    display:block;
}
.title01 {
    width:100%;
    height:auto;
    font-family:'Oswald', sans-serif;
    ;
    font-size:72pt;
    color:#ffff00;
    text-align:center;
    display:block;
}
.sub_title01 {
    width:100%;
    height:auto;
    font-family:'Oswald', sans-serif;
    ;
    font-size:16pt;
    color:#ffff00;
    text-align:center;
    display:block;
}

JavaScript

//function PageChange(){ //removed this bit

    var welc_p = document.getElementById("welcome");/**gathers page DIVs**/
    var page01 = document.getElementById("page01");
    var page02 = document.getElementById("page02");

    var start = document.getElementById("start_btn");/**gathers buttons**/
    var p1_back = document.getElementById("p1_back");
    var p1_next = document.getElementById("p1_back");

    var p2_back = document.getElementById("p2_back");
    var p2_next = document.getElementById("p2_back");

    start.onclick=function(){
        page01.style.display="block";
        welc_p.style.display="none";
        window.location="#page01";
        };

    //}/**function**/ //and this bit