Scribd
Upload
129 views49 pages

HTML CC

The document is a form for making appointments at a beauty care center. It collects personal information and asks the user to select a service. It also includes fields for date and time of appointment and has terms that must be accepted along with a submit button to book the appointment

Uploaded by

Arul Raj
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
129 views49 pages

HTML CC

The document is a form for making appointments at a beauty care center. It collects personal information and asks the user to select a service. It also includes fields for date and time of appointment and has terms that must be accepted along with a submit button to book the appointment

Uploaded by

Arul Raj
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 49

ELITE

<!DOCTYPE html>
<html>
<head>
<!-- Remove the Comments and fill up the relevant code -->
<!-- Write necessary code wherever needed to complete this code challenge -->
<!-- Do specify all the component-ids correctly for your code to get evaluated successfully -->

<title>Elite Travel Management</title>


<style>

input[type="number"] {
width:98%;
}
input[type="text"] {
width:98%;
}
input[type="date"] {
width: 98%;
}
input[type="email"] {
width:98%;
}
input[type="tel"] {
width: 98%;
}
select {
width: 98%;
}

.split {
height: 100%;
width: 50%;
position: fixed;
overflow: scroll;
z-index: 1;
top: 0;
}

.left {
left: 0;
}

.right{
right: 0;
background-color: #74B14E;
width:60%;
padding: 10px;

}
#image{
width: 120%;
height: 90%;
}

h3{
text-align: center;
font-size: 20px;
font-family: Georgia;
border-radius: 6px;
padding: 5px;
}

table, h3{
border: 3px solid #FFFFFF;
border-spacing: 2px;
width:97%;
}

td{
border: 1px solid #FFFFFF;
color:#FFFFFF;
background-color: #6698FF ;
border-spacing : 5px;
}

#submit,h3{
color: #C21807;
font-weight: bold ;
background-color: #FFFFFF ;
}

table,td,#submit{
font-family: Georgia;
font-size: 15px;
border-radius:6px;
padding: 5px ;
}

#submit:hover {
background-color: #C21807;
color:#FFFFFF;
}

#offers:hover {
color: #C21807;
}

.b{
color: #FFFFFF;
}

.c{
color:#C21807;
font-size: 15px;
font-family: Georgia;
font-weight: bold;
}

.d{
border: 0px;;
}
</style>
</head>

<body>
<script>

function show_value(x)
{
document.getElementById("demo").innerHTML=x;
}
</script>

<div class="split left"><img src="ELITE.png " id="image"></div>


<div class="split right">

<h3> ELITE TRAVEL MANAGEMENT </h3>


<table>
<tr class="d">
<td class="d"><a href="#travel" id="travel_info" class="b">Travel-info</a></td>
<td class="d"><a href="#personal" id="personal_info" class="b">Personal-info</a></td>
<td class="d"><a href="#preferences" id="preferences_info" class="b">Activities
Preferences</a></td>
</tr>

<tr>
<td colspan="3" class="c" id="travel">Travel Information</td>
</tr>

<tr>
<td>Select your travel destination : <br/>
<select id="destination">
<option value="Select.." required>Select..</option>
<option value="London">London</option>
<option value="Canada">Canada</option>
<option value="Mauritius">Mauritius</option>
<option value="Switzerland">Switzerland</option>
</select>
</td>
<td>Date of departure : <br/>
<input type="date" id="dateofdeparture" placeholder="dd-mm-yyyy" required>
</td>
<td>Date of arrival : <br/>
<input type="date" id="dateofarrival" placeholder="dd-mm-yyyy" required>
</td>
</tr>

<tr>
<td><input type="number" id="kids" placeholder="No of kids" required></td>
<td><input type="number" id="teens" placeholder="No of teens" required></td>
<td><input type="number" id="adults" placeholder="No of adults" required></td>
</tr>

<tr>
<td>Visa Assistance</td>
<td class="d"><input type="radio" name ="visa" id="yes" required>Yes</td>
<td class="d"><input type="radio" name ="visa" id="no" required>No</td>
</tr>

<tr>
<td colspan="3" class="c" id="personal">Personal Information</td>
</tr>

<tr>
<td>Customer Name</td>
<td><input type="text" id="cname" placeholder="Enter the customer name" pattern="^[a-zA-
Z\s]+$" required></td>
</tr>

<tr>
<td>Phone Number</td>
<td><input type="tel" id="phno" placeholder="Enter the phone number" pattern="[7-
9]{1}[0-9]{9}" required></td>
</tr>

<tr>
<td>Email ID</td>
<td><input type="email" id="email" placeholder="Enter the email id" required></td>
</tr>

<tr>
<td colspan="3" class="c" id="preferences">Activities Preferences</td>
</tr>

<tr class="d">
<td class="d"><input type="checkbox" name="charges"
id="museumsAndHistoricSites">Museums & Historic Sites</td>
<td class="d"><input type="checkbox" name="charges" id="culture">Culture</td>
<td class="d"><input type="checkbox" name="charges" id="beaches">Beaches</td>
</tr>
<tr>
<td class="d"><input type="checkbox" name="charges"
id="shopping">Shopping</td>
<td class="d"><input type="checkbox" name="charges" id="wildlife">Wildlife</td>
<td class="d"><input type="checkbox" name="charges" id="relaxing">Relaxing</td>

</tr>
<tr>
<td colspan="3" ><a href="#submit" class="b" id="offers">**Click here to unlock
exclusive offers</a></td>
</tr>

</table>
<br>
<p><input type="button" id="submit" value="BUILD PACKAGE"></p>
</div>

</body>
</html>
///BEAUTY CARE

<!DOCTYPE html>
<html>
<head>
<!-- Remove the Comments and fill up the relevant code -->
<!-- Write necessary code wherever needed to complete this code challenge -->
<!-- Do specify all the component-ids correctly for your code to get evaluated successfully -->
<title>Beauty Care Center</title>
<style>

::placeholder {
color: #6A5ACD;
opacity: 2;
}

input[type="email"], input[type="tel"], input[type="number"], input[type="text"],


input[type="date"], textarea, select, #services {
width: 85%;
color: #6A5ACD;
font-weight: bold;
background: transparent;
border-radius: 6px;
border-style: solid;
border-width: 2px;
border-color: #FFA07A;
}

input[type="button"] {
background-color: #08088A;
}

input[type="checkbox"]#terms:checked+a {
color: #40ff00;
}

body {
/* Fill the attribute and value */
background-color: #000000;
}

h3 {
/* Fill the attributes and values */
color: #FFFFFF;
background-color: #2F4F4F;
margin-left: auto;
margin-right:auto;
text-align: center;
width: 35%;
font-family: Verdana;
border-style: 1px solid;
border-radius: 6px;

label span{
color: #F0F8FF;
}

table {
/* Fill the attributes and values */
width: 30%;
border-style: 3px groove;
margin-left: auto;
margin-right: auto;
border-spacing: 5px;
border-radius: 6px;
}

#appointment td {
/* Fill the attributes and values */
border-width: 1px;
border-style: solid;
border-color: #F4A460;
padding: 8px;
}

#terms_ref {
color: #00bfff;
}

#submit {
/* Fill the attributes and values */
color:#FFEFD5;
font-weight: bold;
background-color: transparent;
border-radius: 6px;
}

#submit:hover {
background-color: #2E8B57;
color: #FFFFFF;
}

.b {
/* Fill the attributes and values */
width: 50%;
margin-left: auto;
margin-right: 14em;

}
</style>
</head>

<body>

<h3><!-- Fill the heading text -->Beauty Care Center-Appointment</h3>


<table id="appointment">
<tr>
<th id="details" colspan="2"></th>
</tr>
<tr>
<td>
<label><span><b>Name*</b></span>:</label>
</td>
<td>
<input type="text" name="name" id="name" placeholder="Enter your name" required/>
<!-- Fill the code for Name -->
</td>
</tr>

<tr>
<td>
<label><span><b>Gender*</b></span>:</label>
</td>
<td>
<!-- Fill the code for Gender -->
<input type="radio" id="male" name="gender" value="Male" ><label><span><b> Male
</b></span></label>
<input type="radio" id="female" name="gender" value="Female" ><label><span><b>
Female</b></span></label>
<input type="radio" id="others" name="gender" value="Others" > <label><span><b>
Others</b></span></label>
</td>
</tr>

<tr>
<td>
<label><span><b>E-mail address</b></span>:</label>
</td>
<td>
<input type="email" name="email" id="email" placeholder="Example:[email protected]"
required/>
<!-- Fill the code for E-mail address -->

</td>
</tr>
<tr>
<td>
<label><span><b>Mobile No*</b></span>:</label>
</td>
<td>
<input type="tel" name="mobileNo" id="mobileNo" placeholder="Enter your mobile no"
required/>

<!-- Fill the code for Mobile No -->

</td>
</tr>

<tr>
<td>
<label><span><b>Services*</b></span>:</label>
</td>
<td>
<!-- Fill the code for Services and its Data list -->
<input list="serviceList" id="services" name="services" required>
<datalist id="serviceList" required>
<option value="Manicure">Manicure</option>
<option value="Pedicure">Pedicure</option>
<option value="Facial">Facial</option>
<option value="Threading">Threading</option>
<option value="Waxing">Waxing</option>
<option value="Hair Spa">Hair Spa</option>
<option value="Body Massage">Body Massage</option>
<option value="Others">Others</option>
</datalist>
</td>
</tr>

<tr>
<td>

<label><span><b>Date*</b></span>:</label>
</td>
<td>

<!-- Fill the code for Date -->


<input type="date" name="date" id="date" required/>

</td>
</tr>

<tr>
<td>
<label><span><b>Time*</b></span>:</label>
</td>
<td>

<!-- Fill the code for Time -->


<select name="time" id="time">
<option value="10.00 AM">10.00 AM</option>
<option value="10.30 AM">10.30 AM</option>
<option value="11.00 AM">11.00 AM</option>
<option value="11.30 AM">11.30 AM</option>
<option value="12.00 PM">12.00 PM</option>
<option value="12.30 PM">12.30 PM</option>
<option value="01.00 PM">01.00 PM</option>
<option value="01.30 AM">01.30 PM</option>
<option value="02.00 PM">02.00 PM</option>
</select>

</td>
</tr>

<tr>
<td>
<label><span><b>Address</b></span>:</label>
</td>
<td>
<!-- Fill the code for Address -->
<textarea name="address" id="address" rows="5" cols="25" placeholder="Enter your address"
required></textarea>
</td>
</tr>

</table>
<p class="b"><!-- Fill the code for checkbox --><input type="checkbox" name="terms"
id="terms"/><a href="#submit" id="terms_ref"><!-- Fill the text -->I agree to the terms of service
and privacy policy</a></p>
<p class="b"><!-- Fill the code for submit --><input type="button" name="submit" id="submit"
value="Submit"/></p>

</body>
</html>
//Mercury drug
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<title>Mercury Drug Delivery Service</title>
</head>
<style>
input[type="file"] {
background: transparent;
width: 100%;
}

input[type="text"] {
background: transparent;
width: 100%;
}

input[type="number"] {
background: transparent;
width: 100%;
}

input[type="email"] {
background: transparent;
width: 100%;
}

input[type="tel"] {
background: transparent;
width: 100%;
}

input[type="url"] {
background: transparent;
width: 100%;
}

input[type="checkbox"] {
background: transparent;

input[type="button"] {
background: transparent;
}

input[type="checkbox"] /* Fill here */ :checked + a {


/* Fill the attribute and value */
}

body{
font-weight: bold;
margin-left: auto;
margin-right: auto;
}

h3{
color: #FFFFFF;
background-color: #800000;
margin-left: auto;
margin-right: auto;
text-align: center;
width: 60%;
font-family: Verdana;
padding: 3px;
border-radius: 6px;
}

table{
width: 60%;
border-style:3px solid;
margin-left: auto;
margin-right: auto;
border-spacing: 5px;
border-radius: 6px;
}

td{
font-size: 15px;
}

#submit{
color:#800000;
font-weight: bold;
background: transparent;
border-radius: 6px;
}

#submit:hover {
background-color:#800000 ;
color: #FFFFFF;
}

.a{
width: 50%;
}

.b{
width: 60%;
}

::-webkit-input-placeholder {
color: #dcdcdc;
}
</style>
<body>

<h3> Mercury Drug Delivery Service-Partner Invite </h3>


<table style="text-align: left;">

<tr>
<td colspan="2"><input type="text" required id="pharmacyName" placeholder="Pharmacy
name*"></td>
</tr>
<tr>
<td class="a"><input type="number" id="pin" placeholder="Pin(PrimaryLocation)*"
required></td>
<td><input type="text" id="city" placeholder="City*"></td>
</tr>
<tr>
<td class="a"><input type="text" id="oname" placeholder="Pharmacy owner*" required</td>
<td><input type="tel" id="phno" placeholder="Phone number*" pattern="[7-9]{1}[0-9]{9}"
required></td>
</tr>
<tr>
<td colspan="2"><input type="email" id="email" placeholder="Email*"></td>
</tr>
<tr>
<td colspan="2"><input type="url" id="link" placeholder="Website Link/ online listing
link"></td>
</tr>
<tr>
<td><input type="text" id="noOfOutlets" min="1" placeholder="Number of outlets*"
required></td>
<td class="a"><input type="text" id="primaryArea" placeholder="Primary Area of outlet*"
required></td>
</tr>
<tr>
<td><input type="text" min="200" id="cost" placeholder="Minimum purchase cost*"
required></td>
<td class="a"><input list="establishmentType" id="type" placeholder="Establishment :
Independant/Chain*"
required>
<datalist id="establishmentType">
<option value="Independant"></option>
<option value="Chain"></option>
</datalist>
</td>
</tr>
<tr>
<td colspan="2">Medicines available :
<input type="checkbox" id="gsl" name="items">General Sales List Medicines(GSL)
<input type="checkbox" id="p" name="items">Pharmacy Medicines(P)<br>
<input type="checkbox" id="pom" name="items">Prescription Only Medicines (POM)
<input type="checkbox" id="cds" name="items">Controlled Drugs (CDs)
</td>
</tr>
<tr>
<td>Retail Drug License(Jpeg/PDF)*<br>
<input type="file" id="license"></td>
<td>GSTIN/PAN*<br>
<input type="file" id="pan"></td>
</tr>
<tr>
<td>FSSAI(Jpeg/PDF)*<br>
<input type="file" id="fssai"></td>
<td>Facade/Pharmacy-shelves/Refridgerator(Jpeg)* <br>
<input type="file" id="others" multiple></td>
</tr>
</table>

<p class="b"><input type="checkbox"><a href="#submit" id="terms_ref" style="color: blue;"><b>I


agree to terms of
services</b></a></p>
<p class="b"><input type="button" id="submit" value="submit"></p>

</body>

</html>
//shine clinic

<!DOCTYPE html>
<html>
<head>
<!-- Remove the Comments and fill up the relevant code -->
<!-- Write necessary code wherever needed to complete this code challenge -->
<!-- Do specify all the component-ids correctly for your code to get evaluated successfully -->

<title>Shine Clinic</title>
<style>

input[type="number"], input[type="text"], input[type="date"], input[type="email"],


input[type="tel"], select {
width:98%;
}

.split {
height: 100%;
width: 50%;
position: fixed;
overflow: scroll;
z-index: 1;
top: 0;
}

.left {
left: 0;
/* Fill the attribute and value */
}

.right {
right: 0;
background-color: #1AA3FF;
width: 60%;
padding: 10px;
/* Fill the attribute and value */
}

#image{
width: 90%;
height: 50%;
margin-top: 25%;

/* Fill the attribute and value */


}
h3{
text-align: center;
font-size: 20px;
font-family: Georgia;
border-radius: 6px;
padding: 5px;

/* Fill the attribute and value */


}

table, h3{
/* Fill the attribute and value */
border: 3px solid #ffffff;
border-spacing: 2px;
width: 97%;
}

td{
/* Fill the attribute and value */
border: 1px solid #ffffff;
border-spacing: 5px;
color: #6600FF;
background-color: #E6E6E6;

#submit,h3{
color: #C21807;
font-weight: bold;
background-color: #FFFFFF;
/* Fill the attribute and value */
}

table,td,#submit{
font-family: Georgia;
font-size: 15px;
border-radius: 6px;
padding: 5px;

/* Fill the attribute and value */


}

#submit:hover {
background-color: #C21807;
color:#FFFFFF;
}

.b{
color: #6600FF;
/* Fill the attribute and value */
}

.c{
color: #C21807;
font-size: 15px;
font-family: Georgia;
font-weight: bold;
/* Fill the attribute and value */
}

.d{
border: 0px;;
}
</style>
</head>

<body>
<script>
function show_value(x){
document.getElementById("demo").innerHTML=x;
}
function setDisable(){
if(document.getElementById('cash').checked==true){
document.getElementById('cnumber').disabled=true;
document.getElementById('cvvnumber').disabled=true;
}
else if(document.getElementById('card').checked==true){
document.getElementById('cnumber').disabled=false;
document.getElementById('cvvnumber').disabled=false;
}
}
</script>

<div class="split left"><img src="SHINE.png" id="image"></div>


<div class="split right">

<h3>Shine Clinic</h3>
<table>
<tr class="d">
<td class="d"><a href="#admission" id="admission_info" class="b">Admission-
info</a></td>
<td class="d"><a href="#personal" id="personal_info" class="b">Personal-info</a></td>
<td class="d"><a href="#payment" id="payment_info" class="b">Payment-info</a></td>
</tr>

<tr>
<td colspan="3" class="c" id="admission">Admission Information</td>
</tr>

<tr>
<td>Date of Admission: <br/><input type="date" id="dateofadmission"
required="required"><!-- Fill the code for date of admission --></td>
<td>Select the admission type<br/><select id="adtype" required>
<option value="Select..">Select..</option>
<option value="New Admission">New Admission</option>
<option value="Already Have">Already Have</option>
</select><!-- Fill the code for dropdown to select admission type --></td>
<td>Admission For<br/><select id="adfor" required>
<option value="Select..">Select..</option>
<option value="Ear">Ear</option>
<option value="Nose">Nose</option>
<option value="Throat">Throat</option>
<option value="General Checkup">General Checkup</option>

</select><!-- Fill the code for dropdown to select admission for --></td>
</tr>

<tr>
<td colspan="3" >**Select if you have any of the following below</td>
</tr>
<tr>
<td class="d"><input type="checkbox" id="cold" name="health">Cold</td>
<td class="d"><input type="checkbox" id="fever" name="health">Fever</td>
<td class="d"><input type="checkbox" id="cough" name="health">Cough</td>
</tr>
<tr>
<td class="d"><input type="checkbox" id="diapedesis"
name="health">Diapedesis</td>
<td class="d"><input type="checkbox" id="blood pressure" name="health">Blood
Pressure</td>
<td class="d"><input type="checkbox" id="heavy surgery" name="health">Heavy
Surgery</td>
</tr>
<tr>
<td colspan="3" class="c" id="personal">Personal Information</td>
</tr>

<tr>
<td>Patient Name</td>
<td colspan="2"><input type="text" id="pname" placeholder="Enter the patient name"
pattern="[a-zA-Z\s]" required="required"></td>
</tr>

<tr>
<td>Phone Number</td>
<td colspan="2"><input type="text" id="phno" placeholder="Enter the phone number"
pattern="[789]{1}[0-9]{9}" maxlength="10" minlength="10" required="required"><!-- Fill the code
for Phone Number --></td>
</tr>

<tr>
<td>Email ID</td>
<td colspan="2"><input type="email" id="email" placeholder="Enter the email id"
required="required"></td>
</tr>
<tr>
<td>Age</td>
<td colspan="2"><input type="number" id="age" placeholder="Enter the age"
required="required"></td>
</tr>

<tr>
<td>Address</td>
<td colspan="2"><textarea id="address" rows="4" cols="80" placeholder="Enter the age"
required="required"></textarea></td>
</tr>

<tr>
<td colspan="3" class="c" id="payment">Payment Information</td>
</tr>

<tr class="d">
<td>Select the payment type:</td>
<td class="d"><input type="radio" id="card" name="ptype" onclick="setDisable()"
required/>Card</td>
<td class="d"><input type="radio" id="cash" name="ptype" onclick="setDisable()"
required/>Cash</td>
</tr>
<tr>
<td>Card Number</td>
<td colspan="2"><input type="text" placeholder="Enter the card number"
id="cnumber" minlength="16" maxlength="16" required></td>
</tr>
<tr>
<td>Cvv Number</td>
<td colspan="2"><input type="text" id="cvvnumber" placeholder="Enter the cvv
number" minlength="3" maxlength="3" required></td>
</tr>

</table>
<br/>
<p><input type="button" value="CONFIRM" id="submit"></p>
</div>

</body>
</html>
//xchange

<!DOCTYPE html>
<html>
<head>
<!-- Remove the Comments and fill up the relevant code -->
<!-- Write necessary code wherever needed to complete this code challenge -->
<!-- Do specify all the component-ids correctly for your code to get evaluated successfully -->

<title> Xchange - One Stop for Mobile-Accessories</title>


<style>

*{
background-color: #C2A1A1;
color:#FFFFFF;
font-family: Georgia;
}

input[type="text"] , input[type="number"], input[type="date"], select, textarea{


width: 98%;
}

input[type="range"] {
width: 60%;
}

::placeholder{
color:#FFFFFF;
}

h3{
border: 2px solid #FFFFFF;
/* Fill the attributes and values */
margin-left: auto;
margin-right: auto;
text-align: center ;
width: 60%;
color: #5D4079;
background-color: #FFFFFF;
border-radius: 6px;
border-spacing: 2px;
font-size: 30px;

table{
/* Fill the attributes and values */
width:60%;
margin-right: auto;
margin-left: auto;
}
td{
border: 2px solid #FFFFFF;
color:#FFFFFF;
/* Fill the attributes and values */
color: #FFFFFF;
padding: 5px;
border-radius: 6px;
border-spacing: 5px;
}

#submit {
margin-left:45%;
/* Fill the attributes and values */
color: #FFFFFF;
background-color: #5D4079;
border-radius: 6px;
padding: 3px;
font-weight: bold;
}

#submit:hover {
background-color: #FFFFFF;
color:#5D4079;
}

.d{
color:#000000;
}

.c{
/* Fill the attributes and values */
color: #5D4079;
background-color: #FFFFFF;
font-weight: bold ;
}

</style>
</head>

<body >

<script>
function show_value(x)
{
document.getElementById("demo").innerHTML=x;
}
</script>

<h3>Xchange - One Stop for Mobile-Accessories</h3>


<table>
<tr>
<td class="c">Furnish Details</td>
</tr>

<tr>

<td><input type="text" name="mtype" id="mtype" placeholder="Enter the mobile


type*" required/></td>
<td><input type="text" name="atype" id="atype" placeholder="Enter the accessory
type*" required/></td>
</tr>

<tr>
<td>Purchase date :<br/><input type="date" name="pdate" id="pdate"
placeholder="mm/dd/yyyy" required /></td>
<td>Available from :<br/><input type="date" name="availablefrom"
id="availablefrom" placeholder="mm/dd/yyyy" required /></td>
</tr>

<tr>
<td>Location :</td>
<td><input type="text" name="location" id="location" placeholder="City,State*"
required/></td>

</tr>

<tr>
<td colspan="2">Reason for selling : <textarea rows="4" columns="50" id="reason"
required></textarea></td>
</tr>

<tr>
<td>Price Quoted : </td>
<td> <input type="range" name="price" id="price" min="500" max="20000"
required onchange="show_value(this.value);" >
<span id="demo"></span></td>
</tr>

<tr>
<td colspan="2">Upload pics (in .png format) : <input type="file" name="pic"
id="pic" value="Choose Files" multiple required></td>
</tr>

<tr>
<td><input type="text" name="name" id="name" placeholder="Enter your name*"
required/></td>
<td><input type="tel" id="phno" placeholder="Contact number*" max="10"
pattern="[789]{1}[0-9]{9}" required ></td>
</tr>
</table>
<br/>

<p><input type="button" name="submit" id="submit" value="POST PRODUCT" /></p>

</body>
</html>

Agape Food Delivery Service

<!DOCTYPE html>
<html>
<head>
<!-- Remove the Comments and fill up the relevant code -->
<!-- Write necessary code wherever needed to complete this code challenge -->
<!-- Do specify ALL the component-ids correctly for your code to get evaluated successfully -->
<title>Agape Food Delivery Service</title>

<style type="text/css">
input[type="file"] {
/* Fill the attributes and values */
background: transparent;
width: 100%;
color: #08088A;
}

input[type="text"] {
/* Fill the attributes and values */
background: transparent;
width: 100%;
}

input[type="number"] {
/* Fill the attributes and values */
background: transparent;
width: 100%;
}

input[type="email"] {
/* Fill the attributes and values */
background: transparent;
width: 100%;
}

input[type="tel"] {
/* Fill the attributes and values */
background: transparent;
width: 100%;
}

input[type="url"] {
/* Fill the attributes and values */
background: transparent;
width: 100%;
}

input[type="checkbox"] {
/* Fill the attribute and value */
background: transparent;
}

input[type="button"] {
/* Fill the attribute and value */
background: transparent;
}

input[type="checkbox"]#terms:checked + a {
/* Fill the attribute and value */
color: #00800A;
}

body{
background-image: url('foodmitho.png');
}

h3{
border:1px solid;
/* Fill the attributes and values */
color: #E6ADAD;
background-color: #08088A;
margin-left: auto;
margin-right: auto;
text-align: center;
width: 60%;
font-family: Verdana;
border-radius: 6px;
}

table{
border:3px solid;
/* Fill the attributes and values */
width: 60%;
margin-right: auto;
margin-left: auto;
border-spacing: 5px;
border-radius: 6px;
}

td{
font-size: 15px;
}

#submit{
/* Fill the attributes and values */
color: #08088A;
font-weight: bold;
background: transparent;
border-radius: 6px;

#submit:hover {
/* Fill the attributes and values */
background-color: #CD5C5C;
color: #ffffff;
}

.a{
/* Fill the attribute and value */
width:50%;
}

.b{
/* Fill the attributes and values */
width: 60%;
margin-right: auto;
margin-left: auto;
}

::-webkit-input-placeholder {
color: #CD5C5C;
}
</style>

</head>
<body>

<h3> Agape Food Delivery Service - Partner Invite</h3>


<table>

<tr>
<td colspan=" " ><input type="text" id="restaurantName" placeholder="Restaurant
Name*" required pattern="[a-zA-Z0-9\\s]*"></td>
</tr>

<tr>
<td class="a"><input type="text" id="pin" placeholder="Pin (Primary Location)*"
max="6" pattern="[1-9]{1}[0-9]{5}" required/></td>
<td class="a"><input type="text" name="city" id="city" value="" placeholder="City*"
required/></td>
</tr>

<tr>
<td class="a"><input type="text" name="oname" id="oname" value=""
placeholder="Restaurant Owner*" pattern="[A-Za-z\\s]*" required/></td>
<td class="a"><input type="tel" name="phno" id="phno" pattern="[7-9]{1}[0-9]{9}"
placeholder="Phone number*" required></td>
</tr>

<tr>
<td colspan=" "><input type="email" name="email" id="email" value=""
placeholder="Email*" required /></td>
</tr>

<tr>
<td colspan=" "><input type="url" name="link" id="link" value="" placeholder="Website Link/
online listing link" /></td>
</tr>

<tr>
<td class="a"><input type="number" min="1" placeholder="No of outlets*"
id="noOfOutlets" required></td>
<td class="a"><input type="text" placeholder="Primary Area of outlet*" required
id="primaryArea"></td>
</tr>

<tr>
<td class="a"><input type="number" name="cost" id="cost" value="" min="200" required
placeholder="Cost for two*" /></td>
<td class="a"><input list="establishmentType" id="type" required
placeholder="Establishment : Independant/Chain*">
<datalist id="establishmentType">
<option>Independant</option>
<option>Chain</option>
</datalist></td>
</tr>

<tr>
<td colspan=" ">Cusine type :
<input type="checkbox" name="cusineType" required id="indianVeg"><label
for="indianVeg">Indian-veg</label>
<input type="checkbox" name="cusineType" id="indianVegNonVeg"><label
for="indianVegNonVeg">Indian-veg & Non-veg</label>
<input type="checkbox" name="cusineType" id="chinese"><label
for="chinese">Chinese</label>
<input type="checkbox" name="cusineType" id="continental"><label
for="continental">Continental</label>
</td>
</tr>

<tr>
<td><label>Licence(Jpeg/PDF)*</label><input type="file" id="license"
accept="image/jpeg,application/pdf" required></td>
<td><label>GSTIN/PAN*</label><input type="file" id="pan"
accept="image/jpeg,application/pdf" required></td>
</tr>

<tr>
<td><label>FSSAI(Jpeg/PDF)*</label><input type="file" id="fssai"
accept="image/jpeg,application/pdf" required></td>
<td><label>Facade/Kitchen/Dining-Packaging/Locality(Jpeg)*</label><input
type="file" multiple id="others" accept="image/jpeg" required></td>
</tr>
</table>
<p class="b"><input type="checkbox" id="terms"><a id="terms_ref" href="#submit">I agree to
terms of services</a></p>
<p class="b"><input type="button" id="submit" value="SUBMIT"></p>
</body>
</html>

//ATLAS PACKERS AND MOVERS

<!DOCTYPE html>
<html>
<head>
<!-- Remove the Comments and fill up the relevant code -->
<!-- Write necessary code wherever needed to complete this code challenge -->
<!-- Do specify ALL the component-ids (incl. div ids) correctly for your code to get evaluated
successfully -->
<title>Atlas Packers and Movers</title>
<style>
.left:0:
}
.right
right:0;
background-color:#548AE3;
width:60%;
padding:10px;
}

.b{
color:#21807;
font-size:15px;
font-family:"georgia";
}
#image{
width:80%;
height:90%;
}
h3{
margin-right:auto;
margin-left:auto;
text-align:center;
width:50%;
font-family:"Georgia";
border-radius:6px;
}
table th,td{
border-spacing:2px;
font-size:15px;
font family:"Georgia";
border-radius:6px;
padding:3px;
border: 1px solid white;
}
td{
color:#FFFFFF;
background-color:#548EA3;
border-spacing: 5px;
}
#submit{
color:#c21807;
font-weight:bold;
background-color:#ffffff;
font-size:15px;
font-family:"Georgia";
border-radius:6px;
padding:3px;
}
#submit:hover{
background-color:FFOOOO;
color:#ffffff;
}
h3{
color:#c21807;
font-weight:bold;
background-color:#ffffff;
font-size:15px;
font-family:"Georgia";
border-radius:6px;
padding:3px;
}
</stle>
</head>
<body>
<div>
<table>
<tr>
<td><div>img src="packers.jpg"
id="image"/></div></td>
<td>
<div>
<center><h3>ATLAS PACKERS AND MOVERS</h3>/center>
<form>
<table>
<tr><td colspan=2>
<a href="#reloc" id="reloc_info"
class="b">Relocation-info</a><br/>
<a href="#personal"
id="personal_info"
class="b">personal-info</a></br>
<a href="#quote"id="quote_info"
class="b">get a quote!</a><br/>
</td>
</tr>
<tr><td colspan=2><label
id="reloc" class="c">Relocation
Information</label></td></tr>
<tr>
<td>
<select id="city"required>
<option value="select your current city">select your current city option>
<option value="Chennai">Chennai</option>
<option value="Bngalore">Bngalore</option>
<option value="Hyderabad">Hyderabad</option>
<option value="Mumbai">Mumbai</option>
</list>
<td>
<td>input type="date" id="date"required></td>
</tr>
<tr>
<td>label>select category</label></td><td>
<input type="radio"name="category"id="home"required>
<label for="home">home relocation</label>
<input type="radio" name="category"id="factory"required>
<label for="factory">factory/office relocation</label>
</td>
</tr>
<tr>
<td>
<td> <textarea id="faddress"
placeholder="from address"
rows="4" cols="50" required>
</text textarea> </td>
</td>
</tr>
<td><label distance in km>
</td>
<td> <input id="distance"
type=range min=0 max=2000 required><td>
</tr>
<tr><td>colspan=2>
<label id="personal"
class="c">personal
information</label>
</td>
</tr>
<tr>
<td><label>customer name</label>
</td>input type ="text"
id="cname"pattern=[A-Za=z\\s]*'placeholder="enter the customer name" required> </td>
</tr>
<tr>
<td><label>phone number</label>
</td><td><input type="tel"
pattern=[7,8,9]{1}[0-9]{9}"
id="phno"placeholder="enter the phone number"required></td>
</tr>
<tr>
<td><label><Email ID</label></td>
<td> <input type="email"
id="email"placeholder="enter the emailid required"></td>
</tr>
<tr>
<td colspan=2>
<label id="quote"class="c">get a quote:</label>
</td>
</tr>
<tr>
<td><label>possible charges involves</label></td>
<td>
<input type="checkbox"
name="category"id="packing">
<label for ="packing">packing charges</label>
<input type="checkbox"
name="category"id="loading">
<label for "loading">loading charges</label>
<input type ="checkbox"
name="category"
id="transportation"><label for transportation charges</label>
<input type="checkbox"
name="category"id="unloading">
<label for ="unloading">unloading charges</label>
</td>
</tr>
<td colspan=2><label>**quote you receive will include service tax of 12.3%<label></td>
</tr>
</table>"
<button type="submit" id="submit"
value="GET A QUOTE">GET A QUOTE</button>
</form>
</div>
</td></tr>
</table>
</div>
</body>
</html>

//BOOK A SHOW ONLINE TICKET

<!DOCTYPE HTML>
<html>
<head>
<title>
BOOK A SHOW- TICKET </title>
<style>
body{
background-color: #00CED1;
color: #0C1584;
}
h1{
color: #0000FF;
font-family: Monospace;
text-align: center;
}
form{
display: grid;
place-items: center;
}
table{
font-weight: bold;
font-family: Monospace;
}
</style>
</head>
<body>
<h1> BOOK A SHOW - TICKET BOOKING</h1>
<form onsubmit="alert('Booking Successful');
return false; " >
<table>
<tr><td>
<label for="name"> Name </label </td>
<td>
<input type="text" id="name" name="name" pattern="^[a-zA-Z]+$" placeholder="Enter the
name" required>
</td>
</tr>
<tr> <td>
<label >Movie Name</label></td>
<td>
<input list="movies" name="moviename" id="moviename" placeholder="Movie Name" required>
<datalist id="movies" name="movies">
<option value="Iranda">Iranda</option>
<option value="Logan">Logan</option>
<option value="Fist Fight">Fist Fight</option>
</datalist>
</td>
</tr>
<tr>
<td>
<label> circle</label>
</td>
<td>
<input list="circles" name="circle" id="circle" required>
<datalist id="circles" name="circles">
<option value="Silver" > Silver</option>
<option value="Gold" > Gold</option>
<option value="Plantinium" > Plantinium</option>
</datalist>
</td>
</tr>
<tr>
<td>
<label>Phone no </label>
</td>
<td>
<input type="number" name="phone" id="phone" pattern="^\d{}$" placeholder="Enter
Mobile Number" required>
</td>
</tr>
<tr>
<td>
<label> Show date and time</label
</td>
<td>
<input type="datetime-local" name="showdate" id="showdate" name="showdate"
required>
</td>
</tr>
<tr>
<td>
<label for="adults" >No of Adults</label>
</td>
<td>
<input type="number" id="tickets" name="tickets" min="1" max="10" required>
</td>
</tr>
<tr>
<td>
<label for="children" >No of children</label>
</td>
<td>
<input type="number" id="children" name="children" min="1" max="5" required>
</td>
</tr>
<tr>
<td>
<input type="submit" name="submit" id="submit" value="Book My Show">
</td>
<td>
<input type="reset" name="reset" id="reset" value="reset"
</td>
</tr>
</table>
</form>
</body>
</html>

//bookform

<html>
<head>
<script>
function test(){
alert("You have successfully submitted the Book Form");
return false;
}
</script>
</head>
<body>
<h1>A Simple Form</h1>

<h2>Form Fundamentals</h2>
<form name="form" autocomplete="on" onsubmit="return test()">
<fieldset>
<legend>Customer Info</legend>
<label for="cusname">Name:</label>
<input type="text" id="cusname" name="cusname" placeholder="Enter your name"
autofocus required><br><br>
<label for="telephone">Telephone:</label>
<input type="tel" name="telephone" id="telephone" placeholder="Pattern: 234-567-8910"
pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required>
<br><br>
<label for="mail" >Email address:</label>
<input type="email" id="mail" name="mail" placeholder="Enter your email address"
required>
</fieldset>
<fieldset>
<legend>Books</legend>

<input name="quantity" type="number" max="5" min="1">


<label for="quantity">Quantity: {Maximum 5}</label>
<input list="books" id="book" name="book">
<datalist id="books">
<option value="HTML5 - Bruce Lawson and Remy Sharp">
<option value="HTML5 - Up and Running - Mark Pilgrim">
<option value="Head First HTML5 Programming - Eric Freeman">
<option value="Mastering HTML, CSS and JavaScript - Laura Lemay">
</datalist>
</fieldset>
<input type="submit" id="submit" name="submit">
</form>
</body>

</form>
</body>
</html>
//HEALTH CARE CENTRE

<!DOCTYPE html>
<html>
<head>
<!-- Remove the Comments and fill up the relevant code -->
<!-- Write necessary code wherever needed to complete this code challenge -->
<!-- Do specify ALL the component-ids correctly for your code to get evaluated successfully -->
<title>Health Care Center</title>
<style type="text/css">

::placeholder {
color: #40E0D0;
opacity: 2;
}

input[type="email"], input[type="tel"], input[type="number"], input[type="text"],


input[type="date"], textarea, select, #services {
width: 85%;
color: #40E0D0;
font-weight: bold;
background: transparent;
border-radius: 6px;
border-style: solid;
border-width: 2px;
border-color: #FFA07A;
}

input[type="button"] {
background-color: #08088A;
}

input[type="checkbox"]#terms:checked+a {
color: #FFFF00;
}

body {
/* Fill the attribute and value */
background-color: #191970;

h3 {
/* Fill the attributes and values */
color: #FFFFFF;
background-color: #696969;
margin-left: auto;
margin-right: auto;
text-align: center;
width: 40%;
font-family: Verdana;
border-style: 1px solid;
border-radius: 6px;
}

label span{
color: #F0F8FF;
}
table {
/* Fill the attributes and values */
width: 30%;
border-style: 3px groove;
margin-left: auto;
margin-right: auto;
border-spacing: 5px;
border-radius: 6px;
}

#appointment td {
/* Fill the attributes and values */
border-width: 1px;
border-style: solid;
border-color: #F4A460;
font-size: 15px;
padding: 8px;

#terms_ref {
color: #9ACD32;
}

#submit {
/* Fill the attributes and values */
color: #FFEFD5;
font-weight: bold;
background-color: transparent;
border-radius: 6px;
}

#submit:hover {
background-color: #8B4513;
color: #FFFFFF;
}

.b {
/* Fill the attributes and values */
width: 50%;
margin-left: auto;
margin-right: 14em;
}
</style>
</head>

<body>

<h3>Health Care Center-Appointment</h3>


<table id="appointment">
<tr>
<th id="details" colspan="2"></th>
</tr>
<tr>
<td>
<label><span><b>Name*</b></span>:</label>
</td>
<td>
<!-- Fill the code for Name -->
<input type="text" name="name" id="name" placeholder="Enter
your name" required />
</td>
</tr>

<tr>
<td>
<label><span><b>Gender*</b></span>:</label>
</td>
<td>
<!-- Fill the code for Gender -->
<input type="radio" id="male " name="gender" value="Male"
required ><label><span><b>Male</b></span></label>
<input type="radio" id="female " name="gender" value="Female"
required ><label><span><b>Female</b></span></label>
<input type="radio" id="others " name="gender" value="Others"
required ><label><span><b>Others</b></span></label>
</td>
</tr>

<tr>
<td>
<label><span><b>E-mail address</b></span>:</label>
</td>
<td>
<!-- Fill the code for E-mail address -->
<input type="email" name="email" id="email"
placeholder="Example:[email protected]" required />
</td>
</tr>
<tr>
<td>
<label><span><b>Mobile No*</b></span>:</label>
</td>
<td>
<!-- Fill the code for Mobile No -->
<input type="tel" name="mobileNo" id="mobileNo"
placeholder="Enter your mobile no" required />

</td>
</tr>

<tr>
<td>
<label><span><b>Services*</b></span>:</label>
</td>
<td>
<!-- Fill the code for Services and its Data list -->
<input list="serviceList" id="services" name="services" required >
<datalist id="serviceList" required >
<option value="Dentistry">Dentistry</option>
<option value="Midwifery">Midwifery</option>
<option value="Nursing">Nursing</option>
<option value="Medicine">Medicine</option>
<option value="Optometry">Optometry</option>
<option value="Psychology">Psychology</option>
<option value="Physical therapy">Physical therapy</option>
<option value="Others">Others</option>
</datalist>
</td>
</tr>

<tr>
<td>
<label><span><b>Date*</b></span>:</label>
</td>
<td>
<!-- Fill the code for Date -->
<input type="date" name="date" id="date" required />
</td>
</tr>

<tr>
<td>
<label><span><b>Time*</b></span>:</label>
</td>
<td>
<!-- Fill the code for Time -->
<select name="time" id="time">
<option value="10.00AM">10.00AM</option>
<option value="10.30AM">10.30AM</option>
<option value="11.00AM">11.00AM</option>
<option value="11.30AM">11.30AM</option>
<option value="12.00PM">12.00PM</option>
<option value="12.30PM">12.30PM</option>
<option value="01.00PM">01.00PM</option>
<option value="01.30PM">01.30PM</option>
<option value="02.00PM">02.00PM</option>
</select>
</td>
</tr>

<tr>
<td>
<label><span><b>Address</b></span>:</label>
</td>
<td>
<!-- Fill the code for Address -->
<textarea name="address" id=address rows="5" cols="25"
placeholder="Enter your address" required ></textarea>
</td>
</tr>

</table>
<p class="b"><input type="checkbox" name="terms" id="terms" /><a href="#submit"
id="terms_ref">I agree to the terms of service and privacy policy</a></p>
<p class="b"><input type="button" name="submit" id="submit" value="Submit" /></p>

</body>
</html>

//palindrome check

<html>
<head>
<script type="text/javascript">
function CheckPalindrome()
{
var str=document.getElementById("Palin").value;
str=str.toLowerCase();
str=str.replace(/\s/g,'');
var rev=str.split('').reverse().join('');
if(str==rev)
alert("The entry is a palindrome.");
else
alert("The entry is not a palindrome.");
}
</script>
</head>
<body>
<form>
<table>
<tr>
<td>Enter word/sentence to check for palindrome:</td>
<td><input type="text" id="Palin" name="Palin"></td>
</tr>
<tr>
<td>
<Input type="button" name="palinbtn" value="CheckPalindrome"
onclick="CheckPalindrome()">
</td>
</tr>
</table>
</form>
</body>
</html>

//PLATINUM PROPERTIES

<!DOCTYPE html>
<html>
<head>
<!-- Remove the Comments and fill up the relevant code -->
<!-- Write necessary code wherever needed to complete this code challenge -->
<!-- Do specify ALL the component-ids correctly for your code to get evaluated successfully -->
<title>Platinum Properties</title>
<style>

input[type="number"] {
width:98%;
}
input[type="text"] {
width:98%;
}
input[type="date"] {
width: 98%;
}
input[type="email"] {
width:98%;
}
input[type="tel"] {
width: 98%;
}
select {
width: 98%;
}

.split {
height: 100%;
width: 50%;
position: fixed;
overflow: scroll;
z-index: 1;
top: 0;
}
.left {
/* Fill the attribute and value */
left: 0;
}

.right {
/* Fill the attribute and value */
right: 0;
background-color: #74B14E;
width: 60%;
padding: 10px;
}

#image{
/* Fill the attribute and value */
width: 170%;
height: 100%;
}
h3{
/* Fill the attribute and value */
text-align: center;
font-size: 20px;
font-family: Georgia;
border-radius: 6px;
padding: 5px;
}

table, h3{
/* Fill the attribute and value */
border: 3px solid #ffffff;
border-spacing: 2px;
width: 97%;
}

td{
/* Fill the attribute and value */
border: 1px solid #ffffff;
color: #6600FF;
background-color: #DFBF9F;
border-spacing: 5px;
}

#submit,h3{
/* Fill the attribute and value */
color: #C21807;
font-weight: bold;
background-color: #FFFFFF;
}

table,td,#submit{
/* Fill the attribute and value */
font-size: 15px;
font-family: Georgia;
border-radius: 6px;
padding: 5px;
}

#submit:hover {
background-color: #C21807;
color:#FFFFFF;
}

#offers:hover {
color: #C21807;
}

.b{
/* Fill the attribute and value */
color: #6600FF;
}

.c{
/* Fill the attribute and value */
color: #C21807;
font-size: 15px;
font-family: Georgia;
font-weight: bold;
}

.d{
border: 0px;;
}
</style>
</head>

<body>
<script>

function show_value(x)
{
document.getElementById("demo").innerHTML=x;
}
</script>

<div class="split left"><img src="PLATINUM.png" id="image"></div>


<div class="split right">
<h3><!-- Fill the heading text -->Platinum Properties</h3>
<table>
<tr class="d">
<td class="d"><a id="property_info" class="b" href="#property">Property-info</a></td>
<td class="d"><a id="personal_info" class="b" href="#personal">Personal-info</a></td>
<td class="d"><a id="features_info" class="b" href="#features">Extra Features</a></td>
</tr>

<tr>
<td colspan="3" class="c" id="property">Property Information</td>
</tr>

<tr>
<td>Select property Type: <br/>
<select id="ptype" required>
<option value="Select..">Select..</option>
<option value="Apartment">Apartment</option>
<option value="Independent House">Independent House</option>
<option value="Vila">Vila</option>
<option value="Compact Home">Compact Home</option>
</select><!-- Fill the code for dropdown to select property type --></td>
<td>BHK Type <br/>
<select id="bhk" required>
<option value="Select..">Select..</option>
<option value="1BHK">1BHK</option>
<option value="2BHK">2BHK</option>
<option value="3BHK">3BHK</option>
<option value="4BHK">4BHK</option>
</select><!-- Fill the code for dropdown to select BHK type --></td>
<td>Select the possession status <br/>
<select id="status" required>
<option value="Select..">Select..</option>
<option value="Plot">Plot</option>
<option value="Under Construction">Under Construction</option>
<option value="Semi Furnished">Semi Furnished</option>
<option value="Ready To Move">Ready To Move</option>
</select><!-- Fill the code for dropdown to select possession status --></td>
</tr>

<tr>
<td>Price Range:</td>
<td class="d"><input type="number" id="from" placeholder="From" required><!-- Fill the
code for price range from --></td>
<td class="d"><input type="number" id="to" placeholder="To" required><!-- Fill the code
for price range to --></td>
</tr>

<tr>
<td>Location:</td>
<td class="d" colspan="2"><input type="text" id="location" placeholder="Enter the
location" required><!-- Fill the code for location --></td>
</tr>

<tr>
<td colspan="3" class="c" id="personal">Personal Information</td>
</tr>
<tr>
<td>Customer Name</td>
<td colspan="2"><input type="text" id="cname" pattern="[A-Za-z ]{1,100}" placeholder="Enter
the customer name" required><!-- Fill the code for Customer Name --></td>
</tr>

<tr>
<td>Phone Number</td>
<td colspan="2"><input type="tel" id="phno" pattern="[987]{1}[0-9]{9}"
placeholder="Enter the phone number" required><!-- Fill the code for Phone Number --></td>
</tr>

<tr>
<td>Email ID</td>
<td colspan="2"><input type="email" id="email" placeholder="Enter the email id"
required><!-- Fill the code for Email ID --></td>
</tr>

<tr>
<td colspan="3" class="c" id="features">Extra Features</td>
</tr>

<tr class="d">
<td class="d"><input type="checkbox" id="parking" name="optional"><!-- Fill the
code for Parking-->Parking</td>
<td class="d"><input type="checkbox" id="swimming pool" name="optional"><!--
Fill the code for Swimming Pool-->Swimming Pool</td>
<td class="d"><input type="checkbox" id="super market" name="optional"><!-- Fill
the code for Super Market-->Super Market</td>
</tr>

<tr>
<td class="d"><input type="checkbox" id="park" name="optional"><!-- Fill the code
for Park-->Park</td>
<td class="d"><input type="checkbox" id="library" name="optional"><!-- Fill the
code for Library-->Library</td>
<td class="d"><input type="checkbox" id="playground" name="optional"><!-- Fill
the code for Play Ground-->Play Ground</td>
</tr>

<tr>
<td colspan="3" ><a id="offers" class="b" href="#submit">**Click here to unlock
exclusive offers</a></td>
</tr>

</table>
<br/>
<p><!-- Fill the code for Submit --><input type="button" id="submit" value="CHECK
AVAILABILITY"></p>
</div>
</body>
</html>

//Royal wedding planners

<!DOCTYPE html>
<html>
<head>

<title>Royal Wedding Planners</title>


<style>

input[type="number"] {
width:98%;
}
input[type="range"] {
width:95%;
}
input[type="text"] {
width:98%;
}
input[type="date"] {
width: 98%;
}
input[type="email"] {
width:98%;
}
input[type="tel"] {
width: 98%;
}
textarea {
width: 98%;
}
select {
width: 98%;
}

.split {
height: 100%;
width: 50%;
position: fixed;
overflow: scroll;
z-index: 1;
top: 0;
}

.left {
left: 0;
}
.right {
/* Fill the attributes and values */
right: 0;
background-color: #CA9499;
width:60%;
padding: 10px;
}

#image{
/* Fill the attributes and values */
width: 90%;
height: 90%;
}

h3{
/* Fill the attributes and values */
text-align: center;
font-size: 20px;
font-family: Georgia;
border-radius: 6px;
padding: 2px;
}

table, h3{
/* Fill the attribute and value */
border-spacing: 2px;
width: 97%;
border: 3px solid #FFFFFF;
}

td{
/* Fill the attributes and values */
color: #FFFFFF ;
background-color: #A9A9A9;
border-spacing: 5px;
border: 1px solid #FFFFFF;
}

#submit,h3{
/* Fill the attributes and values */
color: #C21807;
font-weight: bold;
background-color: #FFFFFF;
}

table,td,#submit{
/* Fill the attributes and values */
font-size: 15px;
font-family: Georgia;
border-radius: 6px;
padding: 5px;
}

#submit:hover {
background-color: #C21807;
color:#FFFFFF;
}

#offers:hover {
color: #C21807;
}

.b{
/* Fill the attribute and value */
color: #FFFFFF;
}

#condition:hover {
color: #C21807;
}

.c{
/* Fill the attributes and values */
color: #C21807;
font-size: 15px;
font-family: Georgia;
font-weight: bold;
}

.d{
border: 0px;
}
</style>
</head>

<body>
<script>

function show_value(x)
{
document.getElementById("demo").innerHTML=x;
}
</script>

<div class="split left"><img src="ROYAL.png" id="image"></div>


<div class="split right">
<h3>ROYAL WEDDING PLANNERS </h3>
<table>
<tr class="d">
<td class="d"><a id ="wedding_info" href="#wedding" class="b">Wedding-info</a></td>
<td class="d"><a id ="contact_info" href="#contact" class="b">Contact-info</a></td>
<td class="d"><a id ="services_info" href="#services" class="b">Services required</a></td>
</tr>

<tr>
<td colspan="3" class="c" id="wedding">Wedding Information</td>
</tr>

<tr>
<td>Select your city : <br/><select id="city" required="required">
<option>Select..</option>
<option>Chennai</option>
<option>Bangalore</option>
<option>Hyderabad</option>
<option>Mumbai</option>

</select></td>
<td>Wedding date : <br/><input type="date" id="date" required></td>
<td>No of guests <br/> <input type="number" id="guests" required></td>
</tr>

<tr>
<td>Venue</td>
<td colspan="2"><textarea id="venue" placeholder="Wedding venue" rows="4"
cols="50" required></textarea></td>
</tr>

<tr>
<td>Budget (approx)</td>
<td colspan="2"><input id="budget" value="0" type="range"min="200000"
max="5000000" required onchange="show_value(this.value)">
<span id="demo"></span></td>
</tr>

<tr>
<td colspan="3" class="c" id="contact">Contact Information</a></td>
</tr>

<tr>
<td>Customer Name</td>
<td colspan="2"><input id=cname type="text" placeholder="Enter the customer name"
pattern="[A-Z][a-z]"required></td>
</tr>

<tr>
<td>Phone Number</td>
<td colspan="2"><input id="phno" type="tel" placeholder="Enter the phone number"
pattern="[789]{1}[0-9]{9}" required></td>
</tr>

<tr>
<td>Email ID</td>
<td colspan="2"><input id="email" type="email" placeholder="Enter the email id"
required></td>
</tr>

<tr>
<td colspan="3" class="c" id="services">Services Required</td>
</tr>

<tr class="d">
<td class="d"><input type="checkbox" id="invitation"
name="charges">Invitation</td>
<td class="d"><input type="checkbox" id="decorators" name="charges">Decorators
</td>
<td class="d"><input type="checkbox" id="makeupArtists"
name="charges">Makeup artists</td>
</tr>

<tr>
<td class="d"><input type="checkbox" id="photo_video"
name="charges">Photographers & Videographers</td>
<td class="d"><input type="checkbox" id="ls_support" name="charges">Live
streaming support</td>
<td class="d"><input type="checkbox" id="caterers" name="charges">Caterers</td>

</tr>

<tr>
<td class="d"><input type="checkbox" id="transportation"
name="charges">Transportation</td>
<td class="d"><input type="checkbox" id="accomodation"
name="charges">Accomodation</td>
<td class="d"><input type="checkbox" id="theme" name="charges">Theme-
based</td>
</tr>

<tr>
<td colspan="3" id="condition">**Quote you receive will include service tax of
5.0%</td>
</tr>

</table>
<br/>
<p><input id="submit" type="button" value="GET A QUOTE"</p>
</div>

</body>
</html>

You might also like