Create following webpage in HTML : 1. Login Page This is the first page the user...

Create following webpage in HTML :

1. Login Page This is the first page the user should see. The user can login, signup, or continue as a guest. Your task is to implement the following features: a) Signup form This form should collect the information required for creating a new account on your movie database website. At the least, it should collect an email address, username, avatar image/graphic, first name, last name, and a password. You can ask for more user details in the form such as date of birth. The form should ask the user to enter their password twice, to ensure that it is entered properly. After the signup, the user should be redirected to the same page (login page). The purpose of this is to let the user login after signup.

b) Login form This form should collect the user’s email and password to login. We will implement the logic to login in future assignments. After login, the user should be redirected to the Home page.

c) Continue as guest option This option should redirect the user to the Home page.

Solutions

Expert Solution

Home Page :-

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
form {border: 3px solid #f1f1f1;}

input[type=text], input[type=password] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

button {
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
}

button:hover {
  opacity: 0.8;
}

.cancelbtn {
  width: auto;
  padding: 10px 18px;
  background-color: #f44336;
}

.imgcontainer {
  text-align: center;
  margin: 24px 0 12px 0;
}

img.avatar {
  width: 40%;
  border-radius: 50%;
}

.container {
  padding: 16px;
}

span.psw {
  float: right;
  padding-top: 16px;
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
  span.psw {
     display: block;
     float: none;
  }
  .cancelbtn {
     width: 100%;
  }
}
</style>
</head>
<body>

<h2>Login Form</h2>

<form action="/action_page.php" method="post">
  <div class="imgcontainer">
    <img src="img_avatar2.png"  class="avatar">
  </div>

  <div class="container">
    <label for="uname"><b>Username</b></label>
    <input type="text" placeholder="Enter Username" name="uname" required>

    <label for="psw"><b>Password</b></label>
    <input type="password" placeholder="Enter Password" name="psw" required>
        
    <button type="submit"><a href="Movie.html">Login</button>/a>
    <button type="submit"><a href="web1.html">Sign up</button>/a>
    <button type="submit"><a href="Movie.html">Guest Login</button>/a>
    <label>
      <input type="checkbox" checked="checked" name="remember"> Remember me
    </label>
  </div>

  <div class="container" style="background-color:#f1f1f1">
    <button type="button" class="cancelbtn">Cancel</button>
    <span class="psw">Forgot <a href="#">password?</a></span>
  </div>
</form>

</body>
</html>

Signup Page :-

<!DOCTYPE html>
<html>
<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box}

/* Full-width input fields */
input[type=text], input[type=password] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  display: inline-block;
  border: none;
  background: #f1f1f1;
}

input[type=text]:focus, input[type=password]:focus {
  background-color: #ddd;
  outline: none;
}

hr {
  border: 1px solid #f1f1f1;
  margin-bottom: 25px;
}

/* Set a style for all buttons */
button {
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 0.9;
}

button:hover {
  opacity:1;
}

/* Extra styles for the cancel button */
.cancelbtn {
  padding: 14px 20px;
  background-color: #f44336;
}

/* Float cancel and signup buttons and add an equal width */
.cancelbtn, .signupbtn {
  float: left;
  width: 50%;
}

/* Add padding to container elements */
.container {
  padding: 16px;
}

/* Clear floats */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

/* Change styles for cancel button and signup button on extra small screens */
@media screen and (max-width: 300px) {
  .cancelbtn, .signupbtn {
     width: 100%;
  }
}
</style>
<body>

<form action="/action_page.php" style="border:1px solid #ccc">
  <div class="container">
    <h1>Sign Up</h1>
    <p>Please fill in this form to create an account.</p>
    <hr>

    <label for="email"><b>Email</b></label>
    <input type="text" placeholder="Enter Email" name="email" required>

    <label for="psw"><b>Password</b></label>
    <input type="password" placeholder="Enter Password" name="psw" required>

    <label for="psw-repeat"><b>Repeat Password</b></label>
    <input type="password" placeholder="Repeat Password" name="psw-repeat" required>
    
     <label for="first-name "><b>First Name</b></label>
    <input type="text" placeholder="First Name" name="First-Name" required>
    
     <label for="Last-name "><b>Last Name</b></label>
    <input type="text" placeholder="Last Name" name="Last-Name" required>
    
     <label for="Date Of Birth "><b>Date Of Birth </b></label>
    <input type="date" placeholder="Date Of Birth " name="Date Of Birth " required>
    
    <label>
      <input type="checkbox" checked="checked" name="remember" style="margin-bottom:15px"> Remember me
    </label>
    
    <p>By creating an account you agree to our <a href="#" style="color:dodgerblue">Terms & Privacy</a>.</p>

    <div class="clearfix">
      <button type="button" class="cancelbtn">Cancel</button>
      <button type="submit" class="signupbtn">Sign Up</button>
    </div>
  </div>
</form>

</body>
</html>

Movie Page :-

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Movie Website</title>
    <!-- Bootstrap 3 -->
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap-theme.min.css">
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
    <style type="text/css" media="screen">
        body {
            padding-top: 80px;
            bgcolor: blue;
        }
        #trailer .modal-dialog {
            margin-top: 200px;
            width: 640px;
            height: 480px;
        }
        .hanging-close {
            position: absolute;
            top: -12px;
            right: -12px;
            z-index: 9001;
        }
        #trailer-video {
            width: 100%;
            height: 100%;
        }
        .movie-tile {
            margin-bottom: 20px;
            padding-top: 20px;
        }
        .movie-tile:hover {
            background-color: #3E8383;
            cursor: pointer;
            text: white;
        }
        .scale-media {
            padding-bottom: 56.25%;
            position: relative;
        }
        .scale-media iframe {
            border: none;
            height: 100%;
            position: absolute;
            width: 100%;
            left: 0;
            top: 0;
            background-color: black;
        }
    </style>
    <script type="text/javascript" charset="utf-8">
        // Pause the video when the modal is closed
        $(document).on('click', '.hanging-close, .modal-backdrop, .modal', function (event) {
            // Remove the src so the player itself gets removed, as this is the only
            // reliable way to ensure the video stops playing in IE
            $("#trailer-video-container").empty();
        });
        // Start playing the video whenever the trailer modal is opened
        $(document).on('click', '.movie-tile', function (event) {
            var trailerYouTubeId = $(this).attr('data-trailer-youtube-id')
            var sourceUrl = 'http://www.youtube.com/embed/' + trailerYouTubeId + '?autoplay=1&html5=1';
            $("#trailer-video-container").empty().append($("<iframe></iframe>", {
              'id': 'trailer-video',
              'type': 'text-html',
              'src': sourceUrl,
              'frameborder': 0
            }));
        });
        // Animate in the movies when the page loads
        $(document).ready(function () {
          $('.movie-tile').hide().first().show("fast", function showNext() {
            $(this).next("div").show("fast", showNext);
          });
        });
    </script>
</head>

  <body>
    <!-- Trailer Video Modal -->
    <div class="modal" id="trailer">
      <div class="modal-dialog">
        <div class="modal-content">
          <a href="#" class="hanging-close" data-dismiss="modal" aria-hidden="true">
            <img src="https://lh5.ggpht.com/v4-628SilF0HtHuHdu5EzxD7WRqOrrTIDi_MhEG6_qkNtUK5Wg7KPkofp_VJoF7RS2LhxwEFCO1ICHZlc-o_=s0#w=24&h=24"/>
          </a>
          <div class="scale-media" id="trailer-video-container">
          </div>
        </div>
      </div>
    </div>
    <!-- Main Page Content -->
    <div class="container">
      <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
          <div class="navbar-header">
            <a class="navbar-brand" href="#">Movie Trailers</a>
          </div>
        </div>
      </div>
    </div>
    <div class="container">
      
<div class="col-md-6 col-lg-4 movie-tile text-center" data-trailer-youtube-id="a80x06Wn91U" data-toggle="modal" data-target="#trailer">
    <img src="http://www.hollywoodmoviejerseys.com/uploads/1/0/2/3/10237892/3921667.jpg" width="220" height="342">
    <h2>Mystery, Alaska</h2>
    <h5><b>Director: </b> Jay Roach </h5>
    <h5><b>Category: </b> Drama/Sport </h5>
</div>

<div class="col-md-6 col-lg-4 movie-tile text-center" data-trailer-youtube-id="VG5MtenlP-A" data-toggle="modal" data-target="#trailer">
    <img src="https://upload.wikimedia.org/wikipedia/en/thumb/a/af/The_BFG_poster.jpg/220px-The_BFG_poster.jpg" width="220" height="342">
    <h2>The BFG</h2>
    <h5><b>Director: </b> Steven Spielberg </h5>
    <h5><b>Category: </b> Fantasy </h5>
</div>

<div class="col-md-6 col-lg-4 movie-tile text-center" data-trailer-youtube-id="2gCbnwavkKc" data-toggle="modal" data-target="#trailer">
    <img src="http://ia.media-imdb.com/images/M/MV5BOTAzODEzNDAzMl5BMl5BanBnXkFtZTgwMDU1MTgzNzE@._V1_UY1200_CR91,0,630,1200_AL_.jpg" width="220" height="342">
    <h2>Star Wars</h2>
    <h5><b>Director: </b> George Lucas </h5>
    <h5><b>Category: </b> Science Fiction </h5>
</div>

<div class="col-md-6 col-lg-4 movie-tile text-center" data-trailer-youtube-id="NTya9A4O9Ws" data-toggle="modal" data-target="#trailer">
    <img src="http://wp.production.patheos.com/blogs/lookingcloser/files/2015/02/american-sniper-poster.jpg" width="220" height="342">
    <h2>American Sniper</h2>
    <h5><b>Director: </b> Clint Eastwood </h5>
    <h5><b>Category: </b> Drama Film </h5>
</div>

<div class="col-md-6 col-lg-4 movie-tile text-center" data-trailer-youtube-id="JzZh8kJJwe4" data-toggle="modal" data-target="#trailer">
    <img src="http://www.impawards.com/2016/posters/now_you_see_me_two_ver17.jpg" width="220" height="342">
    <h2>NOW YOU CAN SEE ME 2</h2>
    <h5><b>Director: </b> Jon M. Chu </h5>
    <h5><b>Category: </b> Thriller </h5>
</div>

<div class="col-md-6 col-lg-4 movie-tile text-center" data-trailer-youtube-id="1UXWIVAIimU" data-toggle="modal" data-target="#trailer">
    <img src="http://www.birthdaydirect.com/images/59902-the-secret-life-of-pets-tote-bag.jpg" width="220" height="342">
    <h2>The Secret Life of Pets</h2>
    <h5><b>Director: </b> Chris Renaud </h5>
    <h5><b>Category: </b> Comedy </h5>
</div>

    </div>
  </body>
</html>

venereology answered 2 weeks ago

Next > < Previous

Related Solutions

Make a working good looking webpage (Home page) of a PAYROLL website using CSS, HTML, and...

Make a working good looking webpage (Home page) of a PAYROLL website using CSS, HTML, and JavaScript # Sign in/SignUp page should work # CSS HTML and javaScript should be in separate files # Add images # post a picture of your output and code as well

using PDO, MYSQL, and Html, how can i create a simple registration and login form for...

using PDO, MYSQL, and Html, how can i create a simple registration and login form for cPanel?

Please provide HTML code for the following: - Create a page that lists a set of...

Please provide HTML code for the following: - Create a page that lists a set of audio files and shows their duration - Create a page that lists a set of video files and plays a different video when you click on the play icon

The code to create a Search/Filter Data with Javascript or html from html page.

Create a HTML webpage for the film Avatar (2009). You can use the content (text, images)...

Create a HTML webpage for the film Avatar (2009). You can use the content (text, images) from this Wikipedia page: https://en.wikipedia.org/wiki/Avatar_(2009_film) Besides the basic HTML document elements, the html document should have the following components or meet the requirements: Use <header><section><nav><article><div><footer> to arrange the layout of the page h1, h2 At least 1 table At least1 image At least 2 links, one link opens the target page with a new window Several paragraphs with formatted text (use at least 3...

lab3 exercise 5 html <!DOCTYPE html> <!-- Webpage HTML document for Lab 03. Author: Amir H...

lab3 exercise 5 html <!DOCTYPE html>  <html lang="En"> <head> <meta charset="UTF-8"> <title> EECS1012: Lab 3 - My Kit </title>  <link rel="stylesheet" type="text/css" href="myLearningKit_ex2.css"> <script src="myLearningKit_ex4.js"></script>  ...

Create a Home Page using HTML and CSS Part 1 • Contain an image or logo...

Create a Home Page using HTML and CSS Part 1 • Contain an image or logo about your website. • Must contain three navigation links. Home link. Registration link. Animations link. • Footer will contain links to web pages to any other site you wish (just be outside your webpage, like YouTube,etc.) Open links in new tab, not current tab. Create a Registration page: • Registration Fields: 1) User Name - Input Text 2) Password - Input Password 3) Repeat...

HTML Create a page of texts that uses inline elements. The page should contain a citation,...

HTML Create a page of texts that uses inline elements. The page should contain a citation, a term definition, a subscript, a superscript and some highlighted texts.

(a) Create a HTML page for a single faceted search selector. It will include the name...

(a) Create a HTML page for a single faceted search selector. It will include the name of the facet and a list of radio buttons or tick boxes for each category. (b) Add a button called filter. When the button is clicked the radio button or tick boxes will be read to determine if a selection has been made. The selection will be written to a div element located under the filterbutton. If no selection was made, then an appropriate...

Given the html below, create css to produce the following illustrated color page output: Red for...

Given the html below, create css to produce the following illustrated color page output: Red for outer paragraph and outer list Green and italic for first inner div paragraph, green for second div paragraph, blue for inner list HTML File <html> <head> <link rel="stylesheet" type="text/css" href="mystyle98_d.css"> </head> <body> <p> I'm a paragraph, what color am I ? </p> <ul> <li id = "fix"> I'm a list item;what color am I? </li> </ul> <div class = "central1"> <p class ="above"> I'm...

Subjects