Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!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>chec</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">
- <h3>BatteryBattery</h3><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>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement