Question

In: Computer Science

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 Password - Input Password

4) First Name - Input Text

5) Last Name - Input Text

6) Address line 1 - Input Text

7) Address line 2 - Input Text

8) City - Input Text

9) State - Drop Down of Options

10) Zip Code - Input Text

11) Phone Number - Input Text

12) Email - Input Text

13) Gender - Radio buttons

14) Marital Status - Radio buttons

15) Date of Birth - Input Text, must have a calendar pop up (date picker)

16) Submit Button - Form submit button

17) Reset Button - Clears form fields to default settings (normally empty)

Create an Animation page:

• Use CSS3 animations to make an animation that matches your web site theme.


Part 2

• Add client side HTML5 and JavaScript form validation for user input

• Validation Rules for Registration Fields (do not change the input types from Project 1, these validation character lengths are going to be the database column sizes, so for radio/drop down options, just do not give the user a value under/over the limit):
1) User Name

a. Required Field

b. Max length 50 characters, minimum length 6 characters

2) Password

a. Required Field

b. Max length 50 characters, minimum length 8 characters

c. Enforce 1 capital, 1 lowercase, 1 digit, 1 special character

3) Repeat Password

a. Required Field

b. Max length 50 characters, minimum length 8 characters

c. Enforce 1 capital, 1 lowercase, 1 digit, 1 special character

d. Ensure password fields match

4) First Name

a. Required Field

b. Max length 50 characters

5) Last Name

a. Required Field

b. Max length 50 characters

6) Address line 1

a. Required Field

b. Max length 100 characters

7) Address line 2

a. Optional Field

b. Max length 100 characters

8) City

a. Required Field

b. Max length 50 characters

9) State

a. Required Field

b. Max length 52 characters

10) Zip Code

a. Required Field

b. Max length 10 characters, minimum length 5 digits

c. Use jQuery/JavaScript to dynamically adjust user input to match either xxxxx or xxxxx-xxxx format (this should be done either as the user is typing or after leaving the field)

11) Phone Number

a. Required Field

b. Max length 12 characters

c. Use jQuery/JavaScript to dynamically adjust user input to match xxx-xxx-xxxx (this should be done either as the user is typing or after leaving the field)
format

12) Email

a. Required Field

b. Email format, [email protected] format, where x is a placeholder for valid alphanumeric characters

13) Gender

a. Required Field

b. Max length 50 characters

14) Marital Status

a. Required Field

b. Max length 50 characters

15) Date of Birth

a. Required Field

b. MM/dd/yyyy format

16) Submit Button

a. Submits valid user data only

17) Reset Button

a. Resets all fields to default value (empty, for most fields)

Solutions

Expert Solution

PART A :

Note : Make sure you have all the files in one single folder. Check if the html files have links of the css files. Also check the name of the css files that are linked to html

There will be 5 files

website.html, registration.html, animations.html and style.css ,animation.css

Make your website home page according to what you want to

I have created a navbar and a footer with links (add the links of your choice)

You can choose the themes and age image according to you

Also i have placed some pictures and done some animations you can choose your own pictures accordingly

1. website.html

!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Home Page</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="style.css">

</head>

<body>

<header>

<nav class="navbar navbar-default">

<div class="container-fluid">

<div class="navbar-header">

<a class="navbar-brand" href="#">Travel Website</a>

</div>

<ul class="nav navbar-nav">

<li><a href="website.html">Home</a></li>

<li><a href="registration.html" target="_blank">Register</a></li>

<li><a href="animations.html" target="_blank">Animations</a></li>

</ul>

</div>

</nav>

</header>

<footer>

<div class="links">

<a target="_blank" href="https://www.youtube.com/">youtube</a>

<br>

<a target="_blank "href="https://wwww.facebookk.com/"> Facebook</a>

</div>

</footer>

</body>

</html>

2.

registration.html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="style.css">

<title>Regstration Page</title>

</head>

<body class="body>

<div class="container wrapper" >

<div class="heading">

<h1 class="title">Register</h1>

<h4>Kindly fill your details</h4>

</div>

<br>

<form class="form-horizontal" action="">

<div class="form-group">

<label for="username"><b>Username</b></label>

<input type="text" placeholder="Enter Username" name="username" id="username" required>

</div>

<div class="form-group">

<label for="psw"><b>Password</b></label>

<input type="password" placeholder="Enter Password" name="psw" id="psw" required>

</div>

<div class="form-group">

<label for="psw-repeat"><b>Repeat Password</b></label>

<input type="password" placeholder="Repeat Password" name="psw-repeat" id="psw-repeat" required>

</div>

<!-- fname -->

<div class="form-group">

<label for="firstname"><b>Firstname</b></label>

<input type="text" placeholder="Enter Firstname" name="firstname" id="firstname" required>

</div>

<!-- lname -->

<div class="form-group">

<label for="lastname"><b>Lastname</b></label>

<input type="text" placeholder="Enter Lastname" name="lastname" id="lastname" required>

</div>

<!-- addresss 1 -->

<div class="form-group">

<label for="address1"><b>Address Line 1</b></label>

<textarea cols="80" rows="5" placeholder="Address Line 1" value="address1" required>

</textarea>

</div>

<div class="form-group">

<label for="address1=2"><b>Address Line 2</b></label>

<textarea cols="80" rows="5" placeholder="Address Line 2" value="address2" required>

</textarea>

</div>

<div class="form-group">

<label for="city"><b>City</b></label>

<input type="text" placeholder="Enter City" name="city" id="city" required>

</div>

<!-- state dropdown -->

<div class="form-group">

<label for="cars">Choose your state:</label>

<select name="states" id="states">

<option value="Punjab">Punjab</option>

<option value="Haryana">Haryana</option>

<option value="Himachal">Himachal</option>

<option value="Delhi">New Delhi</option>

</select>

</div>

<!-- zip code -->

<div class="form-group">

<label for="zip code"><b>Zip code</b></label>

<input type="text" placeholder="Ziop Code" name="zip" id="zip" required>

<!-- number -->

</div>

<div class="form-group">

<label for="phone"><b>Phone Number</b></label>

<input type="number" placeholder="Enter Phone Number" name="number" id="number" required>

</div>

<!-- email -->

<div class="form-group">

<label for="email"><b>Email</b></label>

<input type="email" placeholder="Enter Email" name="email" id="email" required>

</div>

<!-- gender -->

<div class="form-group">

<input type="radio" id="male" name="gender" value="male">

<label for="male">Male</label><br>

<input type="radio" id="female" name="gender" value="female">

<label for="female">Female</label><br>

<input type="radio" id="other" name="gender" value="other">

<label for="other">Other</label>

</div>

<!-- maritial status -->

<div class="form-group">

<input type="radio" id="status" name="status" value="status">

<label for="married">Married</label><br>

<input type="radio" id="female" name="gender" value="female">

<label for="Single">Single</label><br>

</div>

<!-- DOB -->

<div class="form-group">

<label for="birthday">Enter Birth date:</label>

<input type="date" id="birthday" name="birthday">

</div>

<!-- Submit -->

<div class="form-group">

<input class="button btn-primary" type="submit" value="Submit">

</div>

<!-- reset -->

<div class="form-group">

<input type="reset" value="Reset" />

</div>

</form>

</div>

</body>

</html>

3.

style.css

.body{

background: #fec107;

padding: 0 10px;

}

.wrapper{

max-width: 600px;

width: 100%;

background: #fff;

margin: 50px auto;

box-shadow: 2px 2px 4px rgba(0,0,0,0.125);

padding: 30px;

}

.wrapper .title{

font-size: 24px;

font-weight: 700;

margin-bottom: 25px;

color: #fec107;

text-transform: uppercase;

text-align: center;

}

label{

margin-left: 4px;

margin-right: 4px;

width: 8rem;

}

footer{

margin-top: 500px;

text-align: center;

padding: 3px;

background-color: DarkSalmon;

color: Red;

}

animations.html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="animation.css">

<title>Document</title>

</head>

<body>

<div class="images-selector">

<input type="radio" id="duck" name="image" value="duck">

<label for="duck" class="img-card img1"></label>

<input type="radio" id="dog" name="image" value="dog">

<label for="dog" class="img-card img2"></label>

<input type="radio" id="cat" name="image" value="cat">

<label for="cat" class="img-card img3"></label>

<input type="radio" id="cow" name="image" value="cow">

<label for="cow" class="img-card img4"></label>

</div></body>

</html>

animation.css

body {

margin: 0;

padding: 0;

box-sizing: border-box;

position: relative;

width: 100%;

height: 90vh;

display: flex;

justify-content: center;

align-items: center;

background-color: #F5F5F5;

}

.images-selector input {

position: absolute;

z-index: 10;

}

.images-selector input:checked + .img-card {

filter: none;

transform: scaleY(1);

}

.img-card {

display: inline-block;

width: 250px;

height: 200px;

background-size: contain;

background-repeat: no-repeat;

cursor: pointer;

transition: all 200ms ease-in;

filter: grayscale(1) opacity(.8);

}

.img-card:hover {

filter: grayscale(0) opacity(1);

/* box-shadow: 0px 8px 4px rgba(0, 0, 0, 0.3),

0px 10px 2px rgba(0, 0, 0, 0.1); */

}

.img-card::before,

.img-card::after {

transform: scaleY(-1);

}

/*reflection*/

.img-card:hover::after {

content: '';

background-image: inherit;

background-repeat: no-repeat;

background-position: bottom;

background-size: cover;

width: inherit;

height: 40%;

position: absolute;

bottom: -25%;

}

/*fade reflection*/

.img-card:hover::before {

content: '';

width: inherit;

height: 42%;

position: absolute;

bottom: -25%;

background: linear-gradient(to bottom, rgba(255, 255, 255, .9),rgba(255, 255, 255, .5));

z-index: 1;

}

.img1 {

background-image: url(https://images.unsplash.com/photo-1442689859438-97407280183f?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ);

}

.img2 {

background-image: url(https://images.unsplash.com/photo-1548199973-03cce0bbc87b?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ);

}

.img3 {

background-image: url(https://images.unsplash.com/photo-1513360371669-4adf3dd7dff8?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ);

}

.img4 {

background-image: url(https://images.unsplash.com/photo-1549488235-42996ae3b650?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ);

}

venereology answered 1 year ago
Next > < Previous

Related Solutions

Create a Home Page: Part 1 • Contain an image or logo about your website. •...
Create a Home Page: 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 Password - Input Password...
Create a Web Page Using HTML, CSS, JS, jQuery • Create a web profile, including any...
Create a Web Page Using HTML, CSS, JS, jQuery • Create a web profile, including any of the following: • Your hobbies, likes/dislikes, career aspirations, dream job, favorite animals/ pets, favorite superhero, etc. • You do not have to share personal information that you are uncomfortable with sharing. Follow these guidelines when creating your page: • Include at least one heading (h1, h2, etc.) in your web page. • Provide a quote from a book, movie, etc. • Include at...
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 write "my account" page program by using HTML and CSS
Please write "my account" page program by using HTML and CSS
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.
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...
Debug3-4.css You’ve been given the initial HTML and CSS code for this web page, but there...
Debug3-4.css You’ve been given the initial HTML and CSS code for this web page, but there are several errors in the CSS stylesheet. Use your knowledge of CSS to locate and fix the errors. The body element should have a width that is 90% of the width of the browser window ranging from a minimum of 600 pixels up to a maximum of 1024 pixels. Fix the syntax errors in the body style rule that defines the width of the...
use CSS, java and HTML to make a charity admin page. It's a web page after...
use CSS, java and HTML to make a charity admin page. It's a web page after you log in to your account. I can have personal information, the amount of money donated, the children who have received charity, and some blogs. In fact, all the things are what I want. But you are free to do whatever You like, even if you don't say what I say. I just need a charity Admin page for charity User.Don't ask me for...
use CSS, java and HTML to make a charity admin page. It's a web page after...
use CSS, java and HTML to make a charity admin page. It's a web page after you log in to your account. I can have personal information, the amount of money donated, the children who have received charity, and some blogs. In fact, all the things are what I want. But you are free to do whatever You like, even if you don't say what I say. I just need a charity Admin page for charity User.Don't ask me for...
use CSS, java and HTML to make a charity admin page. It's a web page after...
use CSS, java and HTML to make a charity admin page. It's a web page after you log in to your account. I can have personal information, the amount of money donated, the children who have received charity, and some blogs. In fact, all the things are what I want. But you are free to do whatever You like, even if you don't say what I say. I just need a charity Admin page for charity User.Don't ask me for...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT