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 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...
Using brackets you will need to create the HTML page and CSS style sheet for the...
Using brackets you will need to create the HTML page and CSS style sheet for the given Form example. Form 1: create an HTML page with a form that contains a text input field. The label for the text field should be “City”. Beneath it should be a submit button “Lookup”. Place a horizontal line beneath the Lookup button and add three radio buttons labeled “Beginner”, “Intermediate”, and “Advanced”. Your page should have a title and a header in the...
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
Develop a personal web page for yourself using HTML, CSS, and Javascript Use the following HTML...
Develop a personal web page for yourself using HTML, CSS, and Javascript Use the following HTML tags to design your webpage: <h1>...</h1>,<h3>...</h3>, <h6>...</h6>, <p>...</p>, <b>...</b>, <i>...</i>, <a>...</a>, <img...>, <table>... </table>, <div>...</div>, <form>...</form>, <input type="text">, and <input type= "submit"> Use an external css to change the default style of your webpage. You must use at least one element selector, one id selector, and one class selector Using text input and submit button, allow the user to change the background color of...
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...
Project 2c (Javascript/HTML/CSS)– Mouse Chase: Create a page with a nice, shiny, pretty button on it....
Project 2c (Javascript/HTML/CSS)– Mouse Chase: Create a page with a nice, shiny, pretty button on it. The button should say ‘Click to receive $10!’ However, any time the user’s mouse cursor gets over the button, the button should move to a random location on the page, making the button essentially impossible to click! However, if they do somehow manage to click the button, redirect the user to an image of a 10 trillion Zimbabwe Dollar. Finally, the background color of...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT