Scribd
Upload
11 views

Tasks in HTML

Uploaded by

kingdevil837
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
11 views

Tasks in HTML

Uploaded by

kingdevil837
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 16

HTML TASK:

<header>
<h1>Cat Fancy Event</h1>
<p>The fanciest cat event.</p>
</header>
<br>
<nav id="topnav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Locations</a></li>
<li><a href="#">RSVP</a></li>
</ul>
</nav>
<div id="content">
<h1>Cat Fancy Event 2012</h1>
<p>The 115th annual Cat Fancy Event is being held in New York City on December
21st. This is the fanciest cat event of the year, starring over 300 different cats.
This event was made to show America how great cats really are. There will be treats
at the walk in, and for the cat owners there will be a buffet in the lounge. We
thank you for coming to our event site, and hope to see you on December 21st. Thank
you.</p>
<br>
<img src="cat.jpg" alt="Cat being fancy" />
<h2>Featured Cats</h2>
<ul>
<li>George C.</li>
<li>Sam F.</li>
<li>Doug T.</li>
<li>Sally Z.</li>
</ul>
<br>
<div id="pic1"><img src="cat1.jpg" alt="George" /></div>
<div id="pic2"><img src="cat2.jpg" alt="Sam" /></div>
<div id="pic3"><img src="cat.jpg" alt="Doug" /></div>
<div id="pic4"><img src="cat1.jpg" alt="Sally" /></div>
<br>
<p>These cats will be the showrunners this year. George has a long history in cat
events, and is looking forward to this year's Cat Fancy Event. Sam is a world-class
runner, and will be showing his new techniques. Doug likes to lay around, and will
practice his abilities. Sally was invited because her mom made a fit about not
coming.</p>
</div>
<br>
<footer>
<nav class="footernav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Locations</a></li>
<li><a href="#">RSVP</a></li>
</ul>
</nav>
<p>&copy; - Copyright 2012</p>
</footer>

HTML Task2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/style.css">
<title>Photography project</title>
</head>

<body>
<main>
<!--Landing Area-->
<div id="landing">
<div id="landing-text">
<div id="landing-text-inner">
<h1>My Photography Website</h1>
<h2>Beatyful Images</h2>
<a href="#images" class="btn" id="view-work">
View Work
</a>
</div>
</div>
<div id="landing-image"></div>
</div>
<div id="images">
<div id="header">
<h2>My Work</h2>
</div>

<img src="https://source.unsplash.com/1600x900/?nature,water
" alt="nature image">
<div class="caption">
<h3>Photo One</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Provident, error!</p>
</div>
<img src="https://source.unsplash.com/1600x900/?nature,trees
" alt="nature image">
<div class="caption">
<h3>Photo Two</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Provident, error!</p>
</div>
<img src="https://source.unsplash.com/1600x900/?nature,flowers
" alt="nature image">
<div class="caption">
<h3>Photo Three</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Provident, error!</p>
</div>
<img src="https://source.unsplash.com/1600x900/?nature,animals
" alt="nature image">
<div class="caption">
<h3>Photo Four</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Provident, error!</p>
</div>
<img src="https://source.unsplash.com/1600x900/?nature,clouds
" alt="nature image">
<div class="caption">
<h3>Photo Five</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Provident, error!</p>
</div>
</div>
</main>

<footer>
<h3>Get In Touch</h3>
<p>Email or call us to set up a consult</p>
<p>Email: <strong>[email protected]</strong></p>
<p>Phone:
<a href="+9999111991">
<strong>(+359) 666-9999</strong>
</a>
</p>
</footer>

</body>

</html>

HTML Intro TASK3:


<body>
<nav id="sidebar">
<h2>HTML</h2>
<ul>
<li><a class="nav-item" href="#Introduction">Introduction</a></li>
<li>
<a class="nav-item" href="#html_editors">HTML Editors</a>
</li>
<li>
<a class="nav-item" href="#html_elements">HTML Elements</a>
</li>
<li><a class="nav-item" href="#html_attributes">HTML Attributes</a></li>
<li><a class="nav-item" href="#html_heading">HTML Heading</a></li>
<li>
<a class="nav-item" href="#html_paragraph">HTML Paragraph</a>
</li>
<li><a class="nav-item" href="#html_style">HTML Style</a></li>
<li><a class="nav-item" href="#html_formatting">HTML Formatting</a></li>
<li><a class="nav-item" href="#reference">Reference</a></li>
</ul>
</nav>
<main id="documentation">
<section id="Introduction">
<h2>Introduction</h2>
<article>
<p>
HTML is an acronym for HyperText Markup Language, and it is the
standard language for creating web-pages. Every web page you surf on
your browser is built using HTML. The primary use of HTML to provide
a proper structure to the web-page so all the content or data of the
page could represent adequately. A stand-alone HTML can create only
static and skeleton looking black and white pages, but with the help
of CSS and JavaScript , we can create a more interactive and
intuitive web-page. When we try to visit a website or click on the
link, we basically request the server to show us the page, then the
server acts on our request and sends us an appropriate HTML document
as a response. Then this HTML document parsed by browse, and we able
to see the content.
</p>
<h3>HTML Document</h3>
<pre>
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Page Title&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;h1&gt;This is a Heading&lt;/h1&gt;
&lt;p&gt;This is a paragraph.&lt;/p&gt;

&lt;/body&gt;
&lt;/html&gt;</pre>
</article>
</section>
<section id="html_editors">
<h2>HTML Editors</h2>
<article>
<p>
However, you can use notepad to create and edit HTML documents, but
we recommend to install an open-source editor. There are many free
to use text-editor software present on the internet, which provides
a better interactive User interface and some add-on functionality
which you miss on a notepad.
</p>
<p>Here is the list of top 4 HTML text editors you can pick:</p>

<ul>
<li>Sublime Text Editor</li>
<li>Notepad++</li>
<li>Visual Studio Code</li>
<li>Atom</li>
</ul>
</article>
</section>
<section id="html_elements">
<h2>HTML Elements</h2>
<article>
<p>
The HTML elements provide the semantic meaning to the web-page
content. We usually interchangeably use the term HTML elements and
tags, but technically both are different. An HTML tag is just a
character inside the angle bracket<>, whereas the HTML element is a
collection of starting tag, its attribute, content and end tag. For
example:
</p>
<pre>&lt;p class= "para"&gt; Hello World &lt;/p&gt;</pre>
</article>
</section>
<section id="html_attributes">
<h2>HTML Attributes</h2>
<article>
<p>
In HTML, the attributes are used to provide additional information
about the elements. For most of the HTML elements, attributes are
optional, but there are some elements where we have to deliver the
attributes. Attributes always specified within the opening tag of
the HTML element and they specified in a name and value pair.
<strong> Example </strong>
</p>
<pre>&lt;image src= "cat.jpg" alt ="cat image"&gt;</pre>
<p>
In this example src ="cat.jpg" and alt="cat image" are two
attributes where src and alt are attributes name and "cat.jpg" and
"cat image" are attributes values. Here alt attribute is optional,
but src is mandatory because src specify which image to show. There
should be at least one space gap between two attributes, and the
value of the attributes must have resided in the double inverted
comma. Some most important HTML
</p>
</article>
</section>
<section id="html_heading">
<h2>HTML Heading</h2>
<p>
To display the section heading, title or subtitle we can use the HTML
heading tags. In HTML 5 we have 6 heading tags start from &lt;h1&gt;
up to &lt;h6&gt;, where &lt;h1&gt; specify the largest heading and
&lt;h6&gt; represent the smallest or sub heading. If the content is
specified by heading tags, then it would be displayed large and bold
as compared to other text content present on the web-page.
<strong> Example </strong>
</p>
<pre>
&lt;h1&gt;First Heading &lt;/h1&gt;
&lt;h2&gt;Second Heading &lt;/h2&gt;
&lt;h3&gt;Third Heading &lt;/h3&gt;
&lt;h4&gt;Forth Heading &lt;/h4&gt;
&lt;h5&gt;Fifth Heading &lt;/h5&gt;
&lt;h6&gt;Sixth Heading &lt;/h6&gt;</pre>
</section>
<section id="html_paragraph">
<h2>HTML Paragraph</h2>
<article>
<p>
In HTML paragraphs can be defined using &lt;p&gt; element. Paragraph
text always starts from a new line, the browser parsed the &lt;p&gt;
tag and automatically add some margin and white space after the end
&lt;/p&gt; tag.
</p>
<pre>
&lt;p&gt; Hello! and Welcome to FLM &lt;/p&gt;
&lt;p&gt; Here you get to know all about the latest technology.
&lt;/p&gt;</pre>
</article>
</section>
<section id="html_style">
<h2>HTML Style</h2>
<article>
<p>
Every browser has a specific engine that parses the HTML document and
displays a default style of the page content.
</p>
<pre>&lt;body style="background-color:yellow;"&gt;

&lt;h1&gt;FLM&lt;/h1&gt;
&lt;p&gt;Welcome to FLM.&lt;/p&gt;

&lt;/body&gt;</pre>
</article>
</section>
<section id="html_formatting">
<h2>HTML Formatting</h2>
<article>
<p>
In HTML, we have many special elements that can provide special meaning
to text content.
</p>
<div class="hscroll">
<table>
<tbody>
<tr>
<td>
<a href="https://www.google.com/">
HTML Elements
</a>
</td>
<td>
Description
</td>
</tr>
<tr>
<td>
&lt;b&gt;
</td>
<td>
Bold the text
</td>
</tr>
<tr>
<td>
&lt;strong&gt;
</td>
<td>
An alternative for &lt;b&gt;, which tell that this text is
essential.
</td>
</tr>
<tr>
<td>
&lt;i&gt;
</td>
<td>
Italic the text
</td>
</tr>
<tr>
<td>
&lt;em&gt;
</td>
<td>
Similar to italic but used when we want to emphasize the text.
</td>
</tr>
<tr>
<td>
&lt;mark&gt;
</td>
<td>
It marks the text with a default "yellow" background colour
</td>
</tr>
<tr>
<td>
&lt;small&gt;
</td>
<td>
Decrease the text size
</td>
</tr>
<tr>
<td>
&lt;del&gt;
</td>
<td>
It prints a cross line over the text.
</td>
</tr>
<tr>
<td>
&lt;ins&gt;
</td>
<td>
Represents the inserted text by putting an underline.
</td>
</tr>
<tr>
<td>
&lt;sub&gt;
</td>
<td>
This element is used to display the subscript.
</td>
</tr>
<tr>
<td>
&lt;sup&gt;
</td>
<td>
It can make a text superscript.
</td>
</tr>
</tbody>
</table>
</div>
</article>
</section>

<section id="reference">
<h2>Reference</h2>
<article>
<ul>
<li>
All the documentation in this page is taken from
<a href="https://www.google.com/" target="_blank">HTML Tutorial</a>
</li>
</ul>
</article>
</section>
</main>
</body>

TASK4
Survey Form: Only HTML CODE:
<!-- form container -->
<div class="container">
<h1 class="main-heading">Survey Form:</h1>
<hr>
<!-- form start -->
<form class="form-class">

<!-- Name -->


<div class="form-control">

<div class="heading-field">
<h3 class="field-head">Customer Name </h3>
</div>
<div class="field-inputs">
<div class="input-div">
<input type="text" class="form-control-input" id="first-name" name="first
name" required>
<div id="first-name-help" class="help-text">Enter Your First Name</div>
</div>
<div class="input-div">
<input type="text" class="form-control-input" id="last-name" name="last
name" required>
<div id="last-name-help" class="help-text">Enter last First Name</div>
</div>
</div>
</div>
<!-- Name Ends -->

<!-- Address -->


<div class="form-control">

<div class="heading-field">
<h3 class="field-head">Address</h3>
</div>

<div>
<div class="input-div">
<input type="text" class="form-control-input" id="street-address"
name="address" required>
<div id="street-address-help" class="help-text">Street Address</div>
</div>
</div>
<div>
<div class="input-div">
<input type="text" class="form-control-input" id="street-address-2"
name="street" required>
<div id="street-address-2-help" class="help-text">Street Address Line
2</div>
</div>
</div>

<div class="field-inputs">
<div class="input-div">
<input type="text" class="form-control-input" id="city-name" name="city"
required>
<div id="city-help" class="help-text">City</div>
</div>
<div class="input-div">
<input type="text" class="form-control-input" id="state-name"
name="state" required>
<div id="state-name-help" class="help-text">State</div>
</div>
</div>

<div class="field-inputs">
<div class="input-div">
<input type="number" class="form-control-input" id="zip-code" name="zip"
required>
<div id="zip-code-help" class="help-text">Zip</div>
</div>
<div class="input-div">
<select class="form-control-input" name="country" required>
<option value="Afghanistan">Afghanistan</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="American Samoa">American Samoa</option>
<option value="Andorra">Andorra</option>
<option value="Angola">Angola</option>
<option value="Anguilla">Anguilla</option>
<option value="Antartica">Antarctica</option>
<option value="Antigua and Barbuda">Antigua and Barbuda</option>
<option value="Argentina">Argentina</option>
<option value="Armenia">Armenia</option>
<option value="Aruba">Aruba</option>
<option value="Australia">Australia</option>
<option value="Austria">Austria</option>
<option value="Azerbaijan">Azerbaijan</option>
<option value="Bahamas">Bahamas</option>
<option value="Bahrain">Bahrain</option>
<option value="Bangladesh">Bangladesh</option>
<option value="Barbados">Barbados</option>
<option value="Belarus">Belarus</option>
<option value="Belgium">Belgium</option>
<option value="Belize">Belize</option>
<option value="Benin">Benin</option>
<option value="Bermuda">Bermuda</option>
<option value="Bhutan">Bhutan</option>
<option value="Bolivia">Bolivia</option>
<option value="Bosnia and Herzegowina">Bosnia and Herzegowina</option>
<option value="Botswana">Botswana</option>
<option value="Bouvet Island">Bouvet Island</option>
<option value="Brazil">Brazil</option>
<option value="British Indian Ocean Territory">British Indian Ocean
Territory</option>
<option value="Brunei Darussalam">Brunei Darussalam</option>
<option value="Bulgaria">Bulgaria</option>
<option value="Burkina Faso">Burkina Faso</option>
<option value="Burundi">Burundi</option>
<option value="Cambodia">Cambodia</option>
<option value="Cameroon">Cameroon</option>
<option value="Canada">Canada</option>
<option value="Cape Verde">Cape Verde</option>
<option value="Cayman Islands">Cayman Islands</option>
<option value="Central African Republic">Central African
Republic</option>
<option value="Chad">Chad</option>
<option value="Chile">Chile</option>
<option value="China">China</option>
<option value="Christmas Island">Christmas Island</option>
<option value="Cocos Islands">Cocos (Keeling) Islands</option>
<option value="Colombia">Colombia</option>
<option value="Comoros">Comoros</option>
<option value="Congo">Congo</option>
<option value="Congo">Congo, the Democratic Republic of the</option>
<option value="Cook Islands">Cook Islands</option>
<option value="Costa Rica">Costa Rica</option>
<option value="Cota D'Ivoire">Cote d'Ivoire</option>
<option value="Croatia">Croatia (Hrvatska)</option>
<option value="Cuba">Cuba</option>
<option value="Cyprus">Cyprus</option>
<option value="Czech Republic">Czech Republic</option>
<option value="Denmark">Denmark</option>
<option value="Djibouti">Djibouti</option>
<option value="Dominica">Dominica</option>
<option value="Dominican Republic">Dominican Republic</option>
<option value="East Timor">East Timor</option>
<option value="Ecuador">Ecuador</option>
<option value="Egypt">Egypt</option>
<option value="El Salvador">El Salvador</option>
<option value="Equatorial Guinea">Equatorial Guinea</option>
<option value="Eritrea">Eritrea</option>
<option value="Estonia">Estonia</option>
<option value="Ethiopia">Ethiopia</option>
<option value="Falkland Islands">Falkland Islands (Malvinas)</option>
<option value="Faroe Islands">Faroe Islands</option>
<option value="Fiji">Fiji</option>
<option value="Finland">Finland</option>
<option value="France">France</option>
<option value="France Metropolitan">France, Metropolitan</option>
<option value="French Guiana">French Guiana</option>
<option value="French Polynesia">French Polynesia</option>
<option value="French Southern Territories">French Southern
Territories</option>
<option value="Gabon">Gabon</option>
<option value="Gambia">Gambia</option>
<option value="Georgia">Georgia</option>
<option value="Germany">Germany</option>
<option value="Ghana">Ghana</option>
<option value="Gibraltar">Gibraltar</option>
<option value="Greece">Greece</option>
<option value="Greenland">Greenland</option>
<option value="Grenada">Grenada</option>
<option value="Guadeloupe">Guadeloupe</option>
<option value="Guam">Guam</option>
<option value="Guatemala">Guatemala</option>
<option value="Guinea">Guinea</option>
<option value="Guinea-Bissau">Guinea-Bissau</option>
<option value="Guyana">Guyana</option>
<option value="Haiti">Haiti</option>
<option value="Heard and McDonald Islands">Heard and Mc Donald
Islands</option>
<option value="Holy See">Holy See (Vatican City State)</option>
<option value="Honduras">Honduras</option>
<option value="Hong Kong">Hong Kong</option>
<option value="Hungary">Hungary</option>
<option value="Iceland">Iceland</option>
<option value="India">India</option>
<option value="Indonesia">Indonesia</option>
<option value="Iran">Iran (Islamic Republic of)</option>
<option value="Iraq">Iraq</option>
<option value="Ireland">Ireland</option>
<option value="Israel">Israel</option>
<option value="Italy">Italy</option>
<option value="Jamaica">Jamaica</option>
<option value="Japan">Japan</option>
<option value="Jordan">Jordan</option>
<option value="Kazakhstan">Kazakhstan</option>
<option value="Kenya">Kenya</option>
<option value="Kiribati">Kiribati</option>
<option value="Democratic People's Republic of Korea">Korea, Democratic
People's Republic of</option>
<option value="Korea">Korea, Republic of</option>
<option value="Kuwait">Kuwait</option>
<option value="Kyrgyzstan">Kyrgyzstan</option>
<option value="Lao">Lao People's Democratic Republic</option>
<option value="Latvia">Latvia</option>
<option value="Lebanon" selected>Lebanon</option>
<option value="Lesotho">Lesotho</option>
<option value="Liberia">Liberia</option>
<option value="Libyan Arab Jamahiriya">Libyan Arab Jamahiriya</option>
<option value="Liechtenstein">Liechtenstein</option>
<option value="Lithuania">Lithuania</option>
<option value="Luxembourg">Luxembourg</option>
<option value="Macau">Macau</option>
<option value="Macedonia">Macedonia, The Former Yugoslav Republic
of</option>
<option value="Madagascar">Madagascar</option>
<option value="Malawi">Malawi</option>
<option value="Malaysia">Malaysia</option>
<option value="Maldives">Maldives</option>
<option value="Mali">Mali</option>
<option value="Malta">Malta</option>
<option value="Marshall Islands">Marshall Islands</option>
<option value="Martinique">Martinique</option>
<option value="Mauritania">Mauritania</option>
<option value="Mauritius">Mauritius</option>
<option value="Mayotte">Mayotte</option>
<option value="Mexico">Mexico</option>
<option value="Micronesia">Micronesia, Federated States of</option>
<option value="Moldova">Moldova, Republic of</option>
<option value="Monaco">Monaco</option>
<option value="Mongolia">Mongolia</option>
<option value="Montserrat">Montserrat</option>
<option value="Morocco">Morocco</option>
<option value="Mozambique">Mozambique</option>
<option value="Myanmar">Myanmar</option>
<option value="Namibia">Namibia</option>
<option value="Nauru">Nauru</option>
<option value="Nepal">Nepal</option>
<option value="Netherlands">Netherlands</option>
<option value="Netherlands Antilles">Netherlands Antilles</option>
<option value="New Caledonia">New Caledonia</option>
<option value="New Zealand">New Zealand</option>
<option value="Nicaragua">Nicaragua</option>
<option value="Niger">Niger</option>
<option value="Nigeria">Nigeria</option>
<option value="Niue">Niue</option>
<option value="Norfolk Island">Norfolk Island</option>
<option value="Northern Mariana Islands">Northern Mariana
Islands</option>
<option value="Norway">Norway</option>
<option value="Oman">Oman</option>
<option value="Pakistan">Pakistan</option>
<option value="Palau">Palau</option>
<option value="Panama">Panama</option>
<option value="Papua New Guinea">Papua New Guinea</option>
<option value="Paraguay">Paraguay</option>
<option value="Peru">Peru</option>
<option value="Philippines">Philippines</option>
<option value="Pitcairn">Pitcairn</option>
<option value="Poland">Poland</option>
<option value="Portugal">Portugal</option>
<option value="Puerto Rico">Puerto Rico</option>
<option value="Qatar">Qatar</option>
<option value="Reunion">Reunion</option>
<option value="Romania">Romania</option>
<option value="Russia">Russian Federation</option>
<option value="Rwanda">Rwanda</option>
<option value="Saint Kitts and Nevis">Saint Kitts and Nevis</option>
<option value="Saint LUCIA">Saint LUCIA</option>
<option value="Saint Vincent">Saint Vincent and the Grenadines</option>
<option value="Samoa">Samoa</option>
<option value="San Marino">San Marino</option>
<option value="Sao Tome and Principe">Sao Tome and Principe</option>
<option value="Saudi Arabia">Saudi Arabia</option>
<option value="Senegal">Senegal</option>
<option value="Seychelles">Seychelles</option>
<option value="Sierra">Sierra Leone</option>
<option value="Singapore">Singapore</option>
<option value="Slovakia">Slovakia (Slovak Republic)</option>
<option value="Slovenia">Slovenia</option>
<option value="Solomon Islands">Solomon Islands</option>
<option value="Somalia">Somalia</option>
<option value="South Africa">South Africa</option>
<option value="South Georgia">South Georgia and the South Sandwich
Islands</option>
<option value="Span">Spain</option>
<option value="SriLanka">Sri Lanka</option>
<option value="St. Helena">St. Helena</option>
<option value="St. Pierre and Miguelon">St. Pierre and
Miquelon</option>
<option value="Sudan">Sudan</option>
<option value="Suriname">Suriname</option>
<option value="Svalbard">Svalbard and Jan Mayen Islands</option>
<option value="Swaziland">Swaziland</option>
<option value="Sweden">Sweden</option>
<option value="Switzerland">Switzerland</option>
<option value="Syria">Syrian Arab Republic</option>
<option value="Taiwan">Taiwan, Province of China</option>
<option value="Tajikistan">Tajikistan</option>
<option value="Tanzania">Tanzania, United Republic of</option>
<option value="Thailand">Thailand</option>
<option value="Togo">Togo</option>
<option value="Tokelau">Tokelau</option>
<option value="Tonga">Tonga</option>
<option value="Trinidad and Tobago">Trinidad and Tobago</option>
<option value="Tunisia">Tunisia</option>
<option value="Turkey">Turkey</option>
<option value="Turkmenistan">Turkmenistan</option>
<option value="Turks and Caicos">Turks and Caicos Islands</option>
<option value="Tuvalu">Tuvalu</option>
<option value="Uganda">Uganda</option>
<option value="Ukraine">Ukraine</option>
<option value="United Arab Emirates">United Arab Emirates</option>
<option value="United Kingdom">United Kingdom</option>
<option value="United States">United States</option>
<option value="United States Minor Outlying Islands">United States
Minor Outlying Islands</option>
<option value="Uruguay">Uruguay</option>
<option value="Uzbekistan">Uzbekistan</option>
<option value="Vanuatu">Vanuatu</option>
<option value="Venezuela">Venezuela</option>
<option value="Vietnam">Viet Nam</option>
<option value="Virgin Islands (British)">Virgin Islands
(British)</option>
<option value="Virgin Islands (U.S)">Virgin Islands (U.S.)</option>
<option value="Wallis and Futana Islands">Wallis and Futuna
Islands</option>
<option value="Western Sahara">Western Sahara</option>
<option value="Yemen">Yemen</option>
<option value="Serbia">Serbia</option>
<option value="Zambia">Zambia</option>
<option value="Zimbabwe">Zimbabwe</option>
</select>
<div id="country-help" class="help-text">Select Country</div>
</div>
</div>

</div>
<!-- Address ends -->

<!-- contact -->


<div class="form-control">

<div class="heading-field">
<h3 class="field-head">Contact </h3>
</div>
<div class="field-inputs">
<div class="input-div">
<input type="tel" class="form-control-input" id="first-name"
name="contact" required>
<div id="tel-name-help" class="help-text">Phone</div>
</div>
<div class="input-div">
<input type="email" class="form-control-input" id="email" name="email"
required>
<div id="last-name-help" class="help-text">Email</div>
</div>
</div>
</div>
<!-- contanct ends -->

<!-- person detail -->


<div class="form-control">
<div class="heading-field">
<h3 class="field-head">Personal Details </h3>
</div>
<div class="field-inputs">
<div class="input-div">
<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><br>
</div>
</div>
</div>
<!-- personal detail ends -->

<!-- Rate -->


<div class="form-control">
<div class="heading-field">
<h3 class="field-head">Ratings </h3>
</div>
<div class="field-inputs" style="margin:0.5rem 0px ;">
<h5>Rating 1:</h5>
<div class="input-div" style="display: flex; gap:10px;">
<input type="radio" id="bad" name="rating1" value="bad">
<label for="bad">Bad</label><br>
<input type="radio" id="good" name="rating1" value="good">
<label for="good">Good</label><br>
<input type="radio" id="excelent" name="rating1" value="other">
<label for="excelent">Excelent</label><br>
</div>
</div>
<div class="field-inputs" style="margin:0.5rem 0px ;">
<h5>Rating 2:</h5>
<div class="input-div" style="display: flex; gap:10px;">
<input type="radio" id="bad2" name="rating2" value="bad">
<label for="bad2">Bad</label><br>
<input type="radio" id="good2" name="rating2" value="good">
<label for="good2">Good</label><br>
<input type="radio" id="excelent2" name="rating2" value="excelent">
<label for="excelent2">Excelent</label><br>
</div>
</div>
<div class="field-inputs" style="margin:0.5rem 0px ;">
<h5>Rating 3 :</h5>
<div class="input-div" style="display: flex; gap:10px;">
<input type="radio" id="bad3" name="rating3" value="bad">
<label for="bad3">Bad</label><br>
<input type="radio" id="good3" name="rating3" value="good">
<label for="good3">Good</label><br>
<input type="radio" id="excelent3" name="rating3" value="excelent">
<label for="excelent3">Excelent</label><br>
</div>
</div>
<div class="field-inputs" style="margin:0.5rem 0px ;">
<h5>Rating 4:</h5>
<div class="input-div" style="display: flex; gap:10px;">
<input type="radio" id="bad4" name="rating4" value="bad">
<label for="bad">Bad</label><br>
<input type="radio" id="good4" name="rating4" value="good">
<label for="good4">Good</label><br>
<input type="radio" id="excelent4" name="rating4" value="excelent">
<label for="excelent4">Excelent</label><br>
</div>
</div>
<div class="field-inputs" style="margin:0.5rem 0px ;">
<h5>Rating 5:</h5>
<div class="input-div" style="display: flex; gap:10px;">
<input type="radio" id="bad5" name="rating5" value="bad">
<label for="bad">Bad</label><br>
<input type="radio" id="good5" name="rating5" value="good">
<label for="good5">Good</label><br>
<input type="radio" id="excelent5" name="rating5" value="excelent">
<label for="excelent5">Excelent</label><br>
</div>
</div>
<div class="field-inputs" style="margin:0.5rem 0px ;">
<h5>Rating 6:</h5>
<div class="input-div" style="display: flex; gap:10px;">
<input type="radio" id="bad6" name="rating6" value="bad">
<label for="bad6">Bad</label><br>
<input type="radio" id="good6" name="rating6" value="good">
<label for="good">Good</label><br>
<input type="radio" id="excelent6" name="rating6" value="excelent">
<label for="excelent6">Excelent</label><br>
</div>
</div>
<div class="field-inputs" style="margin:0.5rem 0px ;">
<h5>Rating 7:</h5>
<div class="input-div" style="display: flex; gap:10px;">
<input type="radio" id="bad7" name="rating7" value="bad">
<label for="bad7">Bad</label><br>
<input type="radio" id="good7" name="rating7" value="good">
<label for="good7">Good</label><br>
<input type="radio" id="excelent7" name="rating7" value="excelent">
<label for="excelent7">Excelent</label><br>
</div>
</div>
</div>
<!-- Rate ends -->
<button type="submit"> Submit </button>
</form>
<!-- form ends -->
</div>
<!-- form container ends -->

You might also like