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>Title</title>
    <style>
        #picture{float: left; width: 33%}
        img{width: 100%}
        a{padding-left: 30%}
        .nav-tabs {  border-bottom: none; }
        footer {background-color: #ffee10}
        #specs_p{display: none}
        #regis_p{display: none}

    </style>

</head>

<body>

<header>
    <h1>Header</h1>
</header>

<div id="picture">
    <img src="http://techfaqs.net/wp-content/uploads/2016/05/ft4CBTdAThZ8frzjffWqw.png" alt="samsung">
    <a href="http://www.samsung.com/ca/consumer/mobile-devices/smartphones/galaxy-note/SM-N920WZKAXAC">link</a>
</div>

<div id="tabs">
    <ul class="nav nav-tabs">
        <li id="intro" class="active"><a href="#">Intro</a>
            <p id="intro_p">text Intro</p> <!--WRITE THE INTRO OF THE PHONE INSIDE THERE-->
        </li>

        <li id="specs"><a href="#">Specs</a>
            <p id="specs_p">
<class= "font1">Battery</class><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 Camer<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 id="regis_p" action="index.html" method="POST" autocomplete="on" onsubmit="form_validation()"><br>
                Username:<input type="text" name="username" required><br>
                Password:<input type="password" name="password" required><br>
                First Name:<input type="text" name="fname" required><br>
                Last Name:<input type="text" name="lname" required><br>
                Email:<input type="email" name="email" required><br>
                Address:<input type="text" name="add" required><br>
                Postal code:<input type="text" name="postal" required ><br>
                City:<input type="text" name="city" required ><br>
                Province: <select id = "province" required>
                    <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>Footer</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 form_validation()
    {
        if (true)
        {   alert("Username: "+document.getElementsByName("username") [0].value+"\n"+
            "Password: "+document.getElementsByName("password") [0].value+"\n"+
            "First Name: "+document.getElementsByName("fname") [0].value+"\n"+
            "Last Name: "+document.getElementsByName("lname") [0].value+"\n"+
            "Email: "+document.getElementsByName("email") [0].value+"\n"+
            "Address: "+document.getElementsByName("add") [0].value+"\n"+
            "Postal Code: "+document.getElementsByName("postal") [0].value+"\n"+
            "City: "+document.getElementsByName("city") [0].value+"\n"

// still have to fix province and date of birth to be able to select and get an output
// ,we have to make sure also how to validade postal code and province

        );
            return true
        }

        else
        {return false}
    }


</script>
</body>
</html>