Please help me to do the following code corrections: Add to <form> the attribute
ID: 3597327 • Letter: P
Question
Please help me to do the following code corrections:
Add to <form> the attribute autocomplete=”on”
Move your <script> import into the <head> and make it asynchronous. No need to wrap it in a <p>
Use font stacks at least 3 deep.
Review Call to Action and come up with something better than “Submit”
"Lucida Sans Typewriter" needs quotes around it. Your font is only displaying as "Lucida" because the rendering doesn't recognize spaces without the quotes.
Check box on both pc and mobile version needs to be a bit larger.
Stretching the input and submit boxes across the entire page on a large screen is bad from.
Left justified text on large screens is bad from.
HTML FILE:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Weekly News</title>
<meta charset="UTF-8">
<meta content="width=device-width,initial-scale=1.0,shrink-to-fit=no" name="viewport">
<link href="./css/screen.css" media="screen" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+ProSpace+Mono:700" rel="stylesheet">
</head>
<body>
<figure id="background-img">
<img src="img/color.jpg" alt="Background Image ">
</figure>
<form action="#null" id="newsletter" method="get" name="newsletter">
<h1>Sign Up for our News Letter!</h1>
<h2>Why Join?</h2>
<ul class="reasons-list">
<li><img alt="circle-icon" class="circle" src="img/check.png">Weekly news of crimes of Chicago!</li>
<li><img alt="circle-icon" class="circle" src="img/check.png">Weekly news of recent technology!</li>
<li><img alt="circle-icon" class="circle" src="img/check.png">Weekly released movies & TV shows!</li>
</ul>
<h3>Please fill in the boxes if you like to get started!</h3>
<ol>
<li id="input-email">
<label for="email">Email:</label> <input id="email" name="email" placeholder="you@example.com" type="email">
<label for="name">First Name:</label>
<input type="text" placeholder ="ex: john" id="name" name="name">
<li><label for="age">I am 18 years or older:</label> <input id="age" name="age" type="checkbox"></li>
<li><input id="submit" name="submit" type="submit" value="Submit!"></li>
</ol>
</form>
<p id="approved"></p>
<p id="age1"></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src="js/site.js">
</script>
</body>
</html>
SCREEN.CSS FILE:
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
/* stylelint-disable */
/* Keep reset CSS to one minified line */
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
vertical-align: baseline
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section {
display: block
}
body {
line-height: 1
}
ol, ul {
list-style: none
}
blockquote, q {
quotes: none
}
blockquote:after, blockquote:before, q:after, q:before {
content: '';
content: none
}
table {
border-collapse: collapse;
border-spacing: 0
}
/* stylelint-enable */
/* ===== BASE STYLES ===== */
/*
Setting type to a major third modular scale
http://www.modularscale.com/?1&em&1.25&web&text
*/
html {
color: black;
background-color: white;
font-family: Lucida Sans Typewriter;
font-size: 1.125em;
/* 18px/16px */
line-height: 1.2em;
/* 18 x 120% = 21.6px */
padding: 3.3375% 3.4375%;
/* 22px /2 = 11px 11/320=0.034375 */
}
h1 {
font-family: Lucida Sans Typewriter, serif;
font-size: 2.441em;
/* 43.945px @ 18px em */
line-height: 1.536em;
/* 67.5px @ 43.945px em */
padding-bottom: 0.512em;
/* 22.5px @ 43.945px em */
text-align: center;
margin-bottom: 0.5919em;
border: .2959em double;
border-radius: .2959em;
border-color: black;
background-color: lightgray;
color: black;
}
h2 {
font-size: 1.866em;
color: black;
line-height: 1.536em;
padding-bottom: 0.512em;
}
#newsletter {
border: .588em;
border-radius: .588em;
border-color: black;
padding: .588em 0;
margin-top: 1.2em;
}
ol {
padding: 0 .6em;
position: relative;
}
#input-email input {
box-sizing: border-box;
margin: 0;
display: block;
font-family: inherit;
font-size: inherit;
line-height: inherit;
margin: .6em 0;
}
#input-frequent label {
display: block;
float: left;
}
#input-frequent input {
float: left;
}
#input-submit input {
display: block;
border: 0 none;
border: solid;
border-color: black;
margin: .6em 0;
background-color: lightgray;
padding: .6em;
}
#background-img img {
position: absolute;
opacity: .5;
/* Set rules to fill background */
min-height: 100%;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
/* ===== LAYOUT STYLES ===== */
input, text, email {
width: 100%;
padding: 0.9375em;
border-radius: 0.3125em;
border-style: none;
font-size: 0.9375em;
}
label, name, age, frequent {
padding-top: 2.334em;
padding-bottom: 0.9375em;
float: left;
}
.button {
line-height: .5em;
font-weight: 300;
text-align: center;
background-color: gray;
width: 8em;
padding-top: 1em;
padding-bottom: 1em;
}
.input-submit:hover {
background-color: black;
text-align: center;
border: .2959em double;
border-color: black;
}
.circle {
display: inline;
float: left;
margin-left: 1.25em;
/* 20px */
}
.reasons-list {
margin-left: 1.25em;
/* 18px */
margin-right: 1.25em;
/* 18px */
line-height: 1.56em;
/* 25px */
font-weight: 400;
font-size: 1.1875em;
/* 19px */
padding-bottom: 1.625em;
/* 26 px */
text-align: left;
}
/* ===== STATE STYLES ===== */
/*Approval message*/
#approved {
color: green;
}
/*Error if you do not meet requirements*/
#age1 {
color: red;
}
/* Mobile Phone */
@media screen and (min-width: 10em) and (max-width: 30em) {
body {
font-size: 0.876em;
width: 100%;
}
header {
text-align: left;
margin-bottom: 1em;
}
h1 {
text-align: center;
font-size: 2.2em;
}
h2 {
text-align: center;
font-size: 1.9em;
}
img {
width: 100%;
height: auto;
}
.circle {
display: inline;
float: left;
width: 10%;
}
.reasons-list {
margin-left: 1.25em;
/* 18px */
margin-right: 1.25em;
/* 18px */
line-height: 1.56em;
/* 25px */
font-weight: 400;
font-size: 1.1875em;
/* 19px */
padding-bottom: 1.625em;
/* 26 px */
text-align: left;
}
}
/* Tablet/Notebook(small) */
@media screen and (min-width: 30em) and (max-width: 60em) {
body {
font-size: 1em;
width: 100%;
}
header {
text-align: center;
margin-bottom: 1em;
}
h1, h2 {
text-align: center;
font-size: 1.5em;
}
}
Explanation / Answer
updated the code please check
html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Weekly News</title>
<meta charset="UTF-8">
<meta content="width=device-width,initial-scale=1.0,shrink-to-fit=no" name="viewport">
<link href="./css/screen.css" media="screen" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+ProSpace+Mono:700" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src="js/site.js">
</script>
</head>
<body>
<h1>Sign Up for our News Letter!</h1>
<h2 class="center">Why Join?</h2>
<ul class="reasons-list">
<li><img alt="circle-icon" class="circle" src="img/check.png">Weekly news of crimes of Chicago!</li>
<li><img alt="circle-icon" class="circle" src="img/check.png">Weekly news of recent technology!</li>
<li><img alt="circle-icon" class="circle" src="img/check.png">Weekly released movies & TV shows!</li>
</ul>
<form class="center inner" action="#null" id="newsletter" method="get" name="newsletter" autocomplete=”on”>
<h3>Please fill in the boxes if you like to get started!</h3>
<label for="email">Email:</label>
<input id="email" name="email" placeholder="you@example.com" type="email">
<label for="name">First Name:</label>
<input type="text" placeholder ="ex: john" id="name" name="name">
<label for="age">I am 18 years or older:</label>
<input id="age" name="age" type="checkbox">
<input id="submit" name="submit" type="submit" value="Submit!">
</form>
<p id="approved"></p>
<p id="age1"></p>
</body>
</html>
css
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
/* stylelint-disable */
/* Keep reset CSS to one minified line */
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
vertical-align: baseline
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section {
display: block
}
body {
line-height: 1
}
ol, ul {
list-style: none
}
blockquote, q {
quotes: none
}
blockquote:after, blockquote:before, q:after, q:before {
content: '';
content: none
}
table {
border-collapse: collapse;
border-spacing: 0
}
/* stylelint-enable */
/* ===== BASE STYLES ===== */
/*
Setting type to a major third modular scale
http://www.modularscale.com/?1&em&1.25&web&text
*/
html {
color: black;
background-color: white;
font-family: "Lucida Sans Typewriter";
font-size: 1.125em;
/* 18px/16px */
line-height: 1.2em;
/* 18 x 120% = 21.6px */
padding: 3.3375% 3.4375%;
/* 22px /2 = 11px 11/320=0.034375 */
}
h1 {
font-family: Lucida Sans Typewriter, serif;
font-size: 2.441em;
/* 43.945px @ 18px em */
line-height: 1.536em;
/* 67.5px @ 43.945px em */
padding-bottom: 0.512em;
/* 22.5px @ 43.945px em */
text-align: center;
margin-bottom: 0.5919em;
border: .2959em double;
border-radius: .2959em;
border-color: black;
background-color: lightgray;
color: black;
}
h2 {
font-size: 1.866em;
color: black;
line-height: 1.536em;
padding-bottom: 0.512em;
}
#newsletter {
border: .588em;
border-radius: .588em;
border-color: black;
padding: .588em 0;
margin-top: 1.2em;
}
ol {
padding: 0 .6em;
position: relative;
}
#input-email input {
box-sizing: border-box;
margin: 0;
display: block;
font-family: inherit;
font-size: inherit;
line-height: inherit;
margin: .6em 0;
}
#input-frequent label {
display: block;
float: left;
}
#input-frequent input {
float: left;
}
#input-submit input {
display: block;
border: 0 none;
border: solid;
border-color: black;
margin: .6em 0;
background-color: lightgray;
padding: .6em;
}
#background-img img {
position: absolute;
opacity: .5;
/* Set rules to fill background */
min-height: 100%;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
/* ===== LAYOUT STYLES ===== */
input, text, email {
width: 100%;
padding: 0.9375em;
border-radius: 0.3125em;
border-style: none;
font-size: 0.9375em;
}
label, name, age, frequent {
padding-top: 2.334em;
padding-bottom: 0.9375em;
float: left;
}
.button {
line-height: .5em;
font-weight: 300;
text-align: center;
background-color: gray;
width: 8em;
padding-top: 1em;
padding-bottom: 1em;
}
.input-submit:hover {
background-color: black;
text-align: center;
border: .2959em double;
border-color: black;
}
.circle {
display: inline;
float: left;
margin-left: 1.25em;
/* 20px */
}
.center{
text-align:center;
}
.reasons-list {
margin-left: 1.25em;
/* 18px */
margin-right: 1.25em;
/* 18px */
line-height: 1.56em;
/* 25px */
font-weight: 400;
font-size: 1.1875em;
/* 19px */
padding-bottom: 1.625em;
/* 26 px */
text-align: center;
}
input[type=checkbox] {
transform: scale(2);
-ms-transform: scale(2);
-webkit-transform: scale(2);
padding: 10px;
}
.inner{
width:50%;
margin-left:28%;
}
/* ===== STATE STYLES ===== */
/*Approval message*/
#approved {
color: green;
}
/*Error if you do not meet requirements*/
#age1 {
color: red;
}
/* Mobile Phone */
@media screen and (min-width: 10em) and (max-width: 30em) {
body {
font-size: 0.876em;
width: 100%;
}
header {
text-align: left;
margin-bottom: 1em;
}
h1 {
text-align: center;
font-size: 2.2em;
}
h2 {
text-align: center;
font-size: 1.9em;
}
img {
width: 100%;
height: auto;
}
}
/* Tablet/Notebook(small) */
@media screen and (min-width: 30em) and (max-width: 60em) {
body {
font-size: 1em;
width: 100%;
}
header {
text-align: center;
margin-bottom: 1em;
}
h1, h2 {
text-align: center;
font-size: 1.5em;
}
}