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 1 year ago

Next > < Previous

Related Solutions

Create an “About Me” HTML webpage. Use the <h2> Tag to give the page a header...

Create an “About Me” HTML webpage. Use the <h2> Tag to give the page a header with your Full name. The header needs to be in Plum color(Any color other than black, blue – Make the page look good). The webpage should have a background color that compliments the header color. Set the content(Anything about yourself!) of the page inside <p> tags and use a different color for it. Save your file as “AboutMe.html” and upload the file to BB...

In html create a Watchlist page in which a user can create as many watchlist as...

In html create a Watchlist page in which a user can create as many watchlist as they wish. This page will contain the list of watchlist, allow the user to create a new watchlist, and delete an existing one. You have to implement the following: a) A list of all the watchlist that a user has created. For now, you can randomly create few. b) An option to create a new watchlist. Make sure you ask the user what the...

Create a webpage with HTML and JAVA Script that takes a user's 4 inputs (first name,...

Create a webpage with HTML and JAVA Script that takes a user's 4 inputs (first name, last name, phone number, and sex[using checkbox, must set on load and change whenever the checkbox is selected, only 1 box can be selected, selecting the other automatically deselects the latter]) The first button saves all the inputs into LOCAL STORAGE The Second button retrieves all the data in LOCAL STORAGE and displays them on the same page. Alert box to inform the user...

Create 1 HTML page and 1 CSS file for all the styles. Your html page will...

Create 1 HTML page and 1 CSS file for all the styles. Your html page will be a small gallery of images using the Polaroid style. The page should have at least 1 row of 3 images. You can choose any theme of images. Don't pick random images, make them all have a theme. Add an h1 tag for the header of your page. Style the h1 tag with a color, size, and font family. Include a paragraph tag under...

Write an HTML file that create the following web page. my first nested list steps of...

Write an HTML file that create the following web page. my first nested list steps of backing a cake Important notes: You should have to copy and paste the “HTML script” as your answer for this question. DON’T take screen shot for your HTML script. It must be editable script. Take a screen shot for your output web page and paste it as a part of your answer.

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

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.

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?

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...

Subjects