Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <title>Samsung Galaxy Note 5</title>
    <style>
        #picture{float: left; width: 33%}
        img{width: 100%}
        a{padding-left: 30%}
        .nav-tabs {  border-bottom: none; }
        footer {}
        #specs_p{display: none}
        #regis_p{display: none}

        body {
            background-image: url("http://science-all.com/images/wallpapers/samsung-hd-wallpaper/samsung-hd-wallpaper-20.jpg");
            background-repeat: no-repeat;
        }
        .border1{
            padding-right: 30px;
            padding-left: 15px;
        }
        .border2{
            padding-bottom: 65px;
            padding-left:65px;
        }
        .border3{
            padding-top:15px;
            padding-left:45px;
        }
    </style>

</head>

<body>

<header>
    <h1 class= "border2"><b>Your World Just Getting Bigger By Using Samsung Galaxy Note 5</b></h1>
</header>

<div id="picture">
    <p class="border1" ><img src="http://www.vodafone.co.nz/cms/images/sam-gal-note-5-intro/" alt="samsung"><br> </p>
    <p class="border3"><b> <a href="http://www.samsung.com/ca/consumer/mobile-devices/smartphones/galaxy-note/SM-N920WZKAXAC">here</a> is the official link</b></p>
</div>

<div id="tabs">
    <ul class="nav nav-tabs">
        <li id="intro" class="active"><a href="#">Intro</a>
            <p id="intro_p">The new Samsung Galaxy note <br>
                series Note 5 has released on 13 August 2015. <br>
                Note 5 is the bigest size of all Galaxy series, <br>
                and and faster. The Galaxy note 5 with <br>
                out the S-pen is just like a huge phone as other.<br>
                Therefore Note 5 has improve the tradition<br>
                feature of note 5, S-pen. The S-pen has faster response, <br>
                reaction, and more accurate.<br>
                Also added more functions to work with the <br>
                S-pen and makes note 5 more outstaning and unique.<br>
                On the Galaxy note 5. Not just the S-pen got uptaded, <br>
                also the camera, battery, cpu, and note 5<br>
                can support the newest android OS.<br>
                For more information check out our specs tab.
            </p> <!--WRITE THE INTRO OF THE PHONE INSIDE THERE-->
        </li>

        <li id="specs"><a href="#">Specs</a>
            <p id="specs_p">
                Battery<br>
                Li-Po 3020 mAh<br>
                Talk Time:Up to 28 hours<br>
                Standby time:Up to 1 week<br>
                Music Playback:Up to 57 hours<br><br>

                Rear Camera<br>
                16 megapixel Sony Exmor RS IMX240<br><br>

                Front Camera<br>
                5 megapixel, 1440p@30fps, dual video call, Auto HDR<br><br>

                Processor<br>
                CPU: Octa-Core (Exynos 7420)<br>
                GPU: Mali-T760 MP8<br>
                RAM: 4 GB LPDDR4<br><br>

                Operating System:<br>
                Android v5.1 Lolipop</p> <!--WRITE THE SPECS OF THE PHONE INSIDE THERE-->

        </li>

        <li id="regis"><a href="#">Registration Form</a>
            <form name="myForm" id="regis_p"  method="POST" autocomplete="on" onsubmit="submitFunction()"><br>
                Username:<input type="text" name="username" ><br>
                Password:<input type="password" name="password" ><br>
                First Name:<input type="text" name="fname" ><br>
                Last Name:<input type="text" name="lname" ><br>
                Email:<input type="email" name="email" ><br>
                Address:<input type="text" name="add" ><br>
                Postal code:<input type="text" name="postal"  ><br>
                City:<input type="text" name="city"  ><br>
                Province: <select id = "province" >
                    <option Value="Ontario">Ontario</option>
                    <option Value="Quebec">Quebec</option>
                    <option Value="Nova Scotia">Nova Scotia</option>
                    <option Value="New Brunswick">New Brunswick</option>
                    <option Value="Manitoba">Manitoba</option>
                    <option Value="British Columbia">British Columbia</option>
                    <option Value="Prince Edward Island">Prince Edward Island</option>
                    <option Value="Saskatchewan">Saskatchewan</option>
                    <option Value="Alberta">Alberta</option>
                    <option Value="Newfoundland and Labrador">Newfoundland and Labrador</option>
                </select><br>
                Birthday: <input type="date" name="bday" max="2000-01-01"><br>
                <br>
                <input type="submit" value="Register Now!">
            </form>
        </li>

    </ul>

</div>


<footer>
    <h3><p>&copy; 2016-Carlos and Hao Jie Cao</P></h3>
</footer>

<script>
    document.getElementById("intro").addEventListener("click", display_intro);
    document.getElementById("specs").addEventListener("click", display_specs);
    document.getElementById("regis").addEventListener("click", display_regis);

    function display_intro()
    {
        document.getElementById("intro").setAttribute("class", "active");
        document.getElementById("specs").setAttribute("class", "");
        document.getElementById("regis").setAttribute("class", "");
        document.getElementById("intro_p").style.display = "inline-block";
        document.getElementById("regis_p").style.display = "none";
        document.getElementById("specs_p").style.display = "none";
    }

    function display_specs()
    {
        document.getElementById("intro").setAttribute("class", "");
        document.getElementById("specs").setAttribute("class", "active");
        document.getElementById("regis").setAttribute("class", "");
        document.getElementById("intro_p").style.display = "none";
        document.getElementById("regis_p").style.display = "none";
        document.getElementById("specs_p").style.display = "inline-block";
    }

    function display_regis()
    {
        document.getElementById("intro").setAttribute("class", "");
        document.getElementById("specs").setAttribute("class", "");
        document.getElementById("regis").setAttribute("class", "active");
        document.getElementById("intro_p").style.display = "none";
        document.getElementById("regis_p").style.display = "inline-block";
        document.getElementById("specs_p").style.display = "none";
    }


    function submitFunction() {
        var fistandlastname = document.forms["myForm"] ["fname"] + ["lname"].value;
        var alertstring = "";
        if (fistandlastname == "") {
            alertstring += "First or/and last name are missing <br>";
        }

        var Username = document.forms["myForm"] ["username"].value;
        if (Username == "") {
            alertstring+="the username cannot be empty <br>";
        }

        var Password = document.forms["myForm"] ["password"].value;
        if(Password=="")
        {
            alertstring+="the password cannot be empty <br>";
        }
        var Postal = document.forms["myForm"] ["postal"].value;
        if( Postal == "")
        {
            alertstring+="the postal code cannot be empty <br>";
        }
        var  addres = document.forms["myForm"] ["add"].value;
        if( addres == "")
        {
            alertstring+="The address cannot be empty <br>";
        }
        var city123 = document.forms["myForm"] ["city"].value;
        if( city123 == "")
        {
            alertstring+="The city cannot be empty <br>";
        }

        var email = document.forms["myForm"] ["email"].value;
        if(email == "")
        {
            alertstring+="The email cannot be empty <br>";
        }
        alert(alertstring);
    }

</script>
<script src=http://my.gblearn.com/js/loadscript.js></script>
</body>
</body>
</html>