Using brackets you will need to create the HTML page and CSS style sheet for the...

Using brackets you will need to create the HTML page and CSS style sheet for the given Form example.

Form 1: create an HTML page with a form that contains a text input field. The label for the text field should be “City”. Beneath it should be a submit button “Lookup”. Place a horizontal line beneath the Lookup button and add three radio buttons labeled “Beginner”, “Intermediate”, and “Advanced”.

Your page should have a title and a header in the body.

Requirements for styling:
1. The form should have a light grey background color (#eee).
2. The form font should be 10pt Arial
3. The form padding should be 10px
4. For the text field <label> tag, set display to inline-block, use a width of 55px, align the text to the left, and add a margin on the right of 9px.
5. For the text input, add a 290px width, 14px padding, and 8px margin on top.
6. For the button, add a 1px solid gray border, 190px width, 12px padding, and 6px margin on top. The button should change color when the mouse is hovering over it.
7. For all labels and adjacent radio buttons, use a pointer cursor, a margin of 25px to the right, and font size of 15pt.

Expert Solution

hey there ! i am done with the code .. Please give me a like to appreciate my work and efforts...

here is the code -

<!DOCTYPE html>
<html>
<head>
<title>City</title>

<style>

form
{
background-color: #eeeeee;
font: 10pt;
font-family: sans-serif ;
padding: 10px;
}
#citylabel
{
display: inline-block;
width: 55px;
text-align: left;
margin: 9px;
}
#city
{
width: 290px;
padding: 14px;
margin-top: 8px;
}

#button
{
border: 1px solid gray;
width: 190px;
padding: 12px;
margin-top: 6px;
}
#button:hover
{
background-color: aqua;
}
radio,label
{
margin-right: 25px;
font: 15pt;

}

</style>

</head>
<body>

<form>
<label id = "citylabel" for="city">City:</label><br>
<input type="text" id="city" name="city"><br>

<hr>
<input type="radio" id="beginner" name="citycheck" value="beginner">
<label for="beginner">Beginner</label><br>
<input type="radio" id="intermediate" name="citycheck" value="intermediate">
<label for="intermediate">Intermediate</label><br>
<input type="radio" id="advanced" name="citycheck" value="advanced">
<label for="advanced">Advanced</label>
<hr>
<input type="submit" id="button" value="LoolUp"/>
</form>

</body>
</html>

and the snapshot of the output is -

Thank You ! dONT forget to like !

venereology answered 3 months ago

Create 1 HTML page and 1 CSS file for all the styles. Your html page will...

Create 1 HTML page and 1 CSS file for all the styles. Your html page will be a small gallery of images using the Polaroid style. The page should have at least 1 row of 3 images. You can choose any theme of images. Don't pick random images, make them all have a theme. Add an h1 tag for the header of your page. Style the h1 tag with a color, size, and font family. Include a paragraph tag under...

Create a Home Page using HTML and CSS Part 1 • Contain an image or logo...

Create a Home Page using HTML and CSS Part 1 • Contain an image or logo about your website. • Must contain three navigation links. Home link. Registration link. Animations link. • Footer will contain links to web pages to any other site you wish (just be outside your webpage, like YouTube,etc.) Open links in new tab, not current tab. Create a Registration page: • Registration Fields: 1) User Name - Input Text 2) Password - Input Password 3) Repeat...

Create a Web Page Using HTML, CSS, JS, jQuery • Create a web profile, including any...

Create a Web Page Using HTML, CSS, JS, jQuery • Create a web profile, including any of the following: • Your hobbies, likes/dislikes, career aspirations, dream job, favorite animals/ pets, favorite superhero, etc. • You do not have to share personal information that you are uncomfortable with sharing. Follow these guidelines when creating your page: • Include at least one heading (h1, h2, etc.) in your web page. • Provide a quote from a book, movie, etc. • Include at...

Please write "my account" page program by using HTML and CSS

Develop a personal web page for yourself using HTML, CSS, and Javascript Use the following HTML...

Develop a personal web page for yourself using HTML, CSS, and Javascript Use the following HTML tags to design your webpage: <h1>...</h1>,<h3>...</h3>, <h6>...</h6>, <p>...</p>, <b>...</b>, <i>...</i>, <a>...</a>, <img...>, <table>... </table>, <div>...</div>, <form>...</form>, <input type="text">, and <input type= "submit"> Use an external css to change the default style of your webpage. You must use at least one element selector, one id selector, and one class selector Using text input and submit button, allow the user to change the background color of...

write php code for buying and selling web using sql, javascript ,html ,css style

Given the html below, create css to produce the following illustrated color page output: Red for...

Given the html below, create css to produce the following illustrated color page output: Red for outer paragraph and outer list Green and italic for first inner div paragraph, green for second div paragraph, blue for inner list HTML File <html> <head> <link rel="stylesheet" type="text/css" href="mystyle98_d.css"> </head> <body> <p> I'm a paragraph, what color am I ? </p> <ul> <li id = "fix"> I'm a list item;what color am I? </li> </ul> <div class = "central1"> <p class ="above"> I'm...

In this exercise, you will create two external style sheet files and a web page. You...

In this exercise, you will create two external style sheet files and a web page. You will experiment with linking the web page to the external style sheets and note how the display of the page is changed. Create an external style sheet (call it format1.css) to format as follows: document background color of white, document text color of #000099, and document font family of Arial, Helvetica, or sans-serif. Hyperlinks should have a background color of gray (#CCCCCC). Configure the...

Project 2c (Javascript/HTML/CSS)– Mouse Chase: Create a page with a nice, shiny, pretty button on it....

Project 2c (Javascript/HTML/CSS)– Mouse Chase: Create a page with a nice, shiny, pretty button on it. The button should say ‘Click to receive $10!’ However, any time the user’s mouse cursor gets over the button, the button should move to a random location on the page, making the button essentially impossible to click! However, if they do somehow manage to click the button, redirect the user to an image of a 10 trillion Zimbabwe Dollar. Finally, the background color of...

Make a working good looking webpage (Home page) of a PAYROLL website using CSS, HTML, and...

Make a working good looking webpage (Home page) of a PAYROLL website using CSS, HTML, and JavaScript # Sign in/SignUp page should work # CSS HTML and javaScript should be in separate files # Add images # post a picture of your output and code as well

Question