Scribd
Upload
27 views12 pages

Arniko Secondary School +2 Science Program Tintoliya, Biratnagar-10, Morning, Nepal

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 views12 pages

Arniko Secondary School +2 Science Program Tintoliya, Biratnagar-10, Morning, Nepal

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/ 12

Arniko Secondary School +2 Science Program Tintoliya, Biratnagar-10, Morning, Nepal

PROJECT WORK

OF

Computer

Submitted BY: Submitted To:

Samragi Neupane Mr Abhay Karn

Euclid
ACKNOWLEDGEMENT

I would like to express my special thanks of gratitude to my teacher Abhay karn who gave me the
golden opportunity to do this wonderful project , which also helped me in doing a lot of Research
and I came to know about so many new things I am really thankful to them.

Secondly i would also like to thank my parents and friends who helped me a lot in finalizing this
project within the limited time frame.
<!DOCTYPE html>

<html>

<head>

<title>Account registration form</title>

<link href=’https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600’
rel=’stylesheet’ type=’text/css’>

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

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

H1 {

Margin: 0;

Font-weight: 400;

H3 {

Margin: 12px 0;

Color: #8ebf42;

.main-block {

Display: flex;
Justify-content: center;

Align-items: center;

Background: #fff;

Form {

Width: 100%;

Padding: 20px;

Fieldset {

Border: none;

Border-top: 1px solid #8ebf42;

.account-details, .personal-details {

Display: flex;

Flex-wrap: wrap;

Justify-content: space-between;

.account-details >div, .personal-details >div >div {

Display: flex;

Align-items: center;

Margin-bottom: 10px;

.account-details >div, .personal-details >div, input, label {

Width: 100%;

Label {

Padding: 0 5px;

Text-align: right;

Vertical-align: middle;

Input {
Padding: 5px;

Vertical-align: middle;

.checkbox {

Margin-bottom: 10px;

Select, .children, .gender, .bdate-block {

Width: calc(100% + 26px);

Padding: 5px 0;

Select {

Background: transparent;

.gender input {

Width: auto;

.gender label {

Padding: 0 5px 0 0;

.bdate-block {

Display: flex;

Justify-content: space-between;

.birthdate select.day {

Width: 35px;

.birthdate select.mounth {

Width: calc(100% - 94px);

.birthdate input {

Width: 38px;
Vertical-align: unset;

.checkbox input, .children input {

Width: auto;

Margin: -2px 10px 0 0;

.checkbox a {

Color: #8ebf42;

.checkbox a:hover {

Color: #82b534;

Button {

Width: 100%;

Padding: 10px 0;

Margin: 10px auto;

Border-radius: 5px;

Border: none;

Background: #8ebf42;

Font-size: 14px;

Font-weight: 600;

Color: #fff;

Button:hover {

Background: #82b534;

@media (min-width: 568px) {

.account-details >div, .personal-details >div {

Width: 50%;

Label {
Width: 40%;

Input {

Width: 60%;

Select, .children, .gender, .bdate-block {

Width: calc(60% + 16px);

</style>

</head>

<body>

<div class=”main-block”>

<form action=”/”>

<h1>Create a free account</h1>

<fieldset>

<legend>

<h3>Account Details</h3>

</legend>

<div class=”account-details”>

<div><label>Email*</label><input type=”text” name=”name” required></div>

<div><label>Password*</label><input type=”password” name=”name” required></div>

<div><label>Repeat email*</label><input type=”text” name=”name” required></div>

<div><label>Repeat password*</label><input type=”password” name=”name”


required></div>

</div>

</fieldset>

<fieldset>

<legend>

<h3>Personal Details</h3>

</legend>
<div class=”personal-details”>

<div>

<div><label>Name*</label><input type=”text” name=”name” required></div>

<div><label>Phone*</label><input type=”text” name=”name” required></div>

<div><label>Street</label><input type=”text” name=”name”></div>

<div><label>City*</label><input type=”text” name=”name” required></div>

<div>

<label>Country*</label>

<select>

<option value=””></option>

<option value=”Nepal”>Nepal</option>

<option value=”India”>India</option>

<option value=”Pakistan”>Pakistan</option>

<option value=”Bhutan”>Bhutan</option>

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

<option value=”UK”>UK</option>

</select>

</div>

<div><label>Website</label><input type=”text” name=”name”></div>

</div>

<div>

<div>

<label>Gender*</label>

<div class=”gender”>

<input type=”radio” value=”none” id=”male” name=”gender” required/>

<label for=”male” class=”radio”>Male</label>

<input type=”radio” value=”none” id=”female” name=”gender” required/>

<label for=”female” class=”radio”>Female</label>

</div>

</div>

<div class=”birthdate”>
<label>Birthdate*</label>

<div class=”bdate-block”>

<select class=”day” required>

<option value=””></option>

<option value=”01”>01</option>

<option value=”02”>02</option>

<option value=”03”>03</option>

<option value=”04”>04</option>

<option value=”05”>05</option>

<option value=”06”>06</option>

<option value=”07”>07</option>

<option value=”08”>08</option>

<option value=”09”>09</option>

<option value=”10”>10</option>

<option value=”11”>11</option>

<option value=”12”>12</option>

<option value=”13”>13</option>

<option value=”14”>14</option>

<option value=”15”>15</option>

<option value=”16”>16</option>

<option value=”17”>17</option>

<option value=”18”>18</option>

<option value=”19”>19</option>

<option value=”20”>20</option>

<option value=”21”>21</option>

<option value=”22”>22</option>

<option value=”23”>23</option>

<option value=”24”>24</option>

<option value=”25”>25</option>

<option value=”26”>26</option>

<option value=”27”>27</option>
<option value=”28”>28</option>

<option value=”29”>29</option>

<option value=”30”>30</option>

<option value=”31”>31</option>

</select>

<select class=”month” required>

<option value=””></option>

<option value=”January”>January</option>

<option value=”February”>February</option>

<option value=”March”>March</option>

<option value=”April”>April</option>

<option value=”May”>May</option>

<option value=”June”>June</option>

<option value=”July”>July</option>

<option value=”August”>August</option>

<option value=”September”>September</option>

<option value=”October”>October</option>

<option value=”November”>November</option>

<option value=”December”>December</option>

</select>

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

</div>

</div>

<div>

<label>Nationality*</label>

<select required>

<option value=””></option>

<option value=”Nepali”>Nepali</option>

<option value=”Indian”>Indian</option>

<option value=”Pakistani”>Pakistani</option>

<option value=”Bhutanese”>Bhutanese</option>
<option value=”American”>American</option>

<option value=”British”>British</option>

</select>

</div>

<div>

<label>Children*</label>

<div class=”children”><input type=”checkbox” name=”name” required></div>

</div>

</div>

</div>

</fieldset>

<fieldset>

<legend>

<h3>Terms and Mailing</h3>

</legend>

<div class=”terms-mailing”>

<div class=”checkbox”>

<input type=”checkbox” name=”checkbox”><span>I accept the <a


href=https://www.abcd.com/privacy-policy>Privacy Policy for abcd.</a></span>

</div>

<div class=”checkbox”>

<input type=”checkbox” name=”checkbox”><span>I want to recelve personallzed offers by


your site</span>

</div>

</fieldset>

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

</form>

</div>

</body>

</html>
Output:

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy