Scribd
Upload
27 views13 pages

Project

Uploaded by

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

Project

Uploaded by

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

Arniko Secondary school Biratnagar-10, Nepal

Submitted by Submitted to

Nitya Nidhi Abhay sir


<!DOCTYPE html>

<html>

<head>

<title>Simple Complaint Form</title>

<link href=https://fonts.googleapis.com/css?family=Roboto:300,400,500,700 rel=”stylesheet”>

<link rel=”stylesheet” href=https://use.fontawesome.com/releases/v5.5.0/css/all.css


integrity=”sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU”
crossorigin=”anonymous”>

<style>

Html, body {

Min-height: 100%;

Body, div, form, input, select, p {

Padding: 0;

Margin: 0;

Outline: none;

Font-family: Roboto, Arial, sans-serif;

Font-size: 14px;

Color: #666;

Line-height: 22px;

H1 {

Margin: 15px 0;

Font-weight: 400;

H4 {

Margin-bottom: 4px;

.testbox {

Display: flex;

Justify-content: center;

Align-items: center;
Height: inherit;

Padding: 3px;

Form {

Width: 100%;

Padding: 20px;

Background: #fff;

Box-shadow: 0 2px 5px #ccc;

Input, select, textarea {

Width: 100%;

Margin-bottom: 10px;

Border: 1px solid #ccc;

Border-radius: 3px;

Input {

Width: calc(100% - 10px);

Padding: 5px;

Input:hover, textarea:hover, select:hover {

Outline: none;

Border: 1px solid #095484;

Select {

Padding: 7px 0;

Background: transparent;

Textarea {

Margin-bottom: 3px;

.item {
Position: relative;

Display: flex;

Flex-direction: column;

Margin: 10px 0;

Input[type=”date”]::-webkit-inner-spin-button {

Display: none;

.item i, input[type=”date”]::-webkit-calendar-picker-indicator {

Position: absolute;

Font-size: 20px;

Color: #a9a9a9;

.item i {

Left: 94%;

Top: 30px;

z-index: 1;

[type=”date”]::-webkit-calendar-picker-indicator {

Left: 93%;

z-index: 2;

opacity: 0;

cursor: pointer;

.street, .desired-outcome-item, .complaint-details-item {

Display: flex;

Flex-wrap: wrap;

.street input {

Margin-bottom: 10px;

}
Small {

Display: block;

Line-height: 16px;

Opacity: 0.7;

.btn-block {

Margin-top: 20px;

Text-align: center;

Button {

Width: 150px;

Padding: 10px;

Border: none;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

Border-radius: 5px;

Background-color: #095484;

Font-size: 16px;

Color: #fff;

Cursor: pointer;

Button:hover {

Background-color: #0666a3;

@media (min-width: 568px) {

Input {

Width: calc(35% - 20px);

Margin: 0 0 0 8px;

Select {

Width: calc(50% - 8px);


Margin: 0 0 10px 8px;

.item {

Flex-direction: row;

Align-items: center;

.item p {

Width: 30%;

.item i {

Left: 61%;

Top: 25%;

[type=”date”]::-webkit-calendar-picker-indicator {

Left: 60%;

.street, .desired-outcome-item, .complaint-details-item {

Width: 70%;

.street input {

Width: calc(50% - 20px);

.street .street-item {

Width: 100%;

.address p, .desired-outcome p, .complaint-details p {

Align-self: flex-start;

Margin-top: 6px;

.desired-outcome-item, .complaint-details-item {

Margin-left: 12px;
}

Textarea {

Width: calc(100% - 6px);

</style>

</head>

<body>

<div class=”testbox”>

<form action=”/”>

<h1>Complaint Form</h1>

<p>Please send us details about the incident you would like to report. Our Complaint Center will
analyze your complaint and take the appropriate measures in order that the reported situation will
not occur at any other time in the future.</p>

<hr/>

<div class=”item”>

<p>Date of complaint</p>

<input type=”date” name=”name” required/>

<i class=”fas fa-calendar-alt”></i>

</div>

<div class=”item”>

<p>Name</p>

<input type=”text” name=”name” placeholder=”First” />

<input type=”text” name=”name” placeholder=”Last” />

</div>

<div class=”item”>

<p>Email</p>

<input type=”text” name=”name”/>

</div>

<div class=”item address”>

<p>Address</p>

<div class=”street”>
<input class=”street-item” type=”text” name=”name” placeholder=”Street address” />

<input class=”street-item” type=”text” name=”name” placeholder=”Street addres line 2” />

<input type=”text” name=”name” placeholder=”City” />

<input type=”text” name=”name” placeholder=”Region” />

<input type=”text” name=”name” placeholder=”Postal / zip code” />

<select>

<option value=””>Country</option>

<option value=”1”>Russia</option>

<option value=”2”>Germany</option>

<option value=”3”>France</option>

<option value=”4”>Armenia</option>

<option value=”5”>USA</option>

</select>

</div>

</div>

<div class=”item”>

<p>Date of the reported incident</p>

<input type=”date” name=”name” required/>

<i class=”fas fa-calendar-alt”></i>

</div>

<div class=”item location”>

<p>Incident location</p>

<input type=”text” name=”name”/>

</div>

<div class=”item complaint-details”>

<p>Complaint details</p>

<div class=”complaint-details-item”>

<textarea rows=”5”></textarea>

</div>

</div>

<div class=”item desired-outcome”>


<p>Desired outcome</p>

<div class=”desired-outcome-item”>

<textarea rows=”5”></textarea>

<small>By signing you declare that all information you have entered is truthful and
accurate.</small>

</div>

</div>

<h4>Your signature</h4>

<textarea rows=”5”></textarea>

<small>By signing you declare that all information you have entered is truthful and
accurate.</small>

<div class=”btn-block”>

<button type=”submit” href=”/”>Send</button>

</div>

</form>

</div>

</body>

</html>

You might also like