Create web page(s) that displays the default information (example shown). The in
ID: 3573575 • Letter: C
Question
Create web page(s) that displays the default information (example shown).
The initial page and related outputs should look like the examples shown below.
Create your page(s) using "richard ricardo's secret calculator" as the page title(s).
Save the first page as index.php.
Create a css file named main.css to format all pages by creating your own layout (no two students should have the same layout). You should use the same css file to format all questions.
index.php - The submit button will submit to richard_ricardo_dynamic_textbox.php file.
This Remove old record link will link to richard_ricardo_clear_table.php file. I can supply examples.
Explanation / Answer
index.php
<?php
?>
<html>
<title> richard ricardo's secret calculator </title>
<head>
<link href="main.css" rel="stylesheet">
</head>
<body>
<div id="contact-form">
<center>
<span id = "alignLeft">
<input type = "submit" value = "richard_ricardo_dynamic_textbox" name = "richard_ricardo_dynamic_textbox"></span>
<span id = "alignRight">
<input type = "submit" value = "richard_ricardo_clear_table">
</span>
</center>
</body>
</html>
main.css
@media all{
*{
margin:0;
padding:0;
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-font-smoothing:antialiased;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
body {
font:400 0.750em "Helvetica Neue", Helvetica, Arial, sans-serif;
color:#444;
}
.wrapper {
max-width:770px;
width:95%;
height: 95%;
margin:0 auto;
position:relative;
}
#body_wrapper {
background:#F9F9F9;
max-width:770px;
margin:0 auto;
position:relative;
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-style: solid;
border-width: 1px;
border-color: #BABABA;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1) inset;
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1) inset;
transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
-webkit-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
-moz-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
-o-transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
}
#header{
left: 0;
top: 0;
padding:1.4em;
text-align: center;
-moz-box-shadow: inset 0 0 0 #fff,
inset 0 -20px 20px -20px rgba(0,0,0,0.75);
-webkit-box-shadow: inset 0 0 0 #fff,
inset 0 -20px 20px -20px rgba(0,0,0,0.75);
box-shadow: inset 0 0 0 #fff,
inset 0 -20px 20px -20px rgba(0,0,0,0.75);
}
.logoholder{
display:inline-block;
max-width:100%;
overflow:hidden;
}
img{
border:0;
vertical-align:top;
max-width:90%;
}
#visual {
display: inline-block;
max-width:100%;
max-height:100%;
}
#visual img{
max-width:100%;
max-height:100%;
width: auto;
height: auto;
}
.spacer {
content:"";
display:block;
clear:both;
margin: 2em;
}
.imgHolder{
display:inline-block;
padding:1px;
background:#fff;
border:6px solid #cecece;
margin-bottom:1em;
overflow:hidden;
max-width:100%;
max-height:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.center {
max-width:960px;
width:100%;
margin:0 auto;
}
.hidden{display:none;}
.right { float:right;}
.left { float:left;}
.alignLeft{
float:left;
margin-right:1em;
}
.alignRight{
float:right;
margin-left:1em;
}
#footer{
width:100%;
overflow:hidden;
padding:1.0em 0.5em;
color:#000;
line-height:1.44em;
font-size:1.00em;
border-top: 4px solid #000;
text-align: center;
}
#footer img{
max-width:30%;
max-height:30%;
width: auto;
height: auto;
}
#footer a{
color:#999;
text-decoration: none;
}
#contact-form {
max-width:400px;
text-shadow:0 1px 0 #FFF;
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-style: solid;
border-width: 1px;
border-color: #BABABA;
background:#F9F9F9;
padding:2em;
margin:0 auto;
position:relative;
}
#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form input[type="button"],
#contact-form select,
#contact-form input[type="tel"],
#contact-form input[type="url"],
#contact-form textarea,
#contact-form input[type="submit"] {
padding:0.278em 0.478em;
font:400 1.000em "Helvetica Neue", Helvetica, Arial, sans-serif;
}
h3 {
color:#999;
display:block;
font-size:1.8em;
text-align: center;
}
#contact-form h3 {
color:#999;
display:block;
font-size:1.8em;
text-align: center;
}
#contact-form h2 {
color:#999;
display:block;
font-size:1.5em;
text-align: center;
}
#contact-form .error {
margin:5px 0 15px;
color: #FF0000;
display:block;
font-size:1.000em;
text-align: center;
}
.successsmg{
margin:5px 0 15px;
color: #088A08;
display:block;
font-size:1.000em;
text-align: center;
}
.errormsg {
color: #FF0000;
display:block;
font-size:1.000em;
text-align: center;
}
#contact-form label span {
cursor: pointer;
color:#888888;
display:block;
margin:5px 0;
font-size: 1.100em;
font-weight:900;
}
#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form select,
#contact-form input[type="tel"],
#contact-form input[type="url"],
#contact-form textarea {
width:100%;
box-shadow:inset 0 1px 2px #DDD, 0 1px 0 #FFF;
-webkit-box-shadow:inset 0 1px 2px #DDD, 0 1px 0 #FFF;
-moz-box-shadow:inset 0 1px 2px #DDD, 0 1px 0 #FFF;
border:1px solid #CCC;
background:#FFF;
margin:0 0 5px;
padding:0.833em;
border-radius:5px;
}
#contact-form textarea {
height:100px;
max-width:100%;
}
#contact-form input[type="submit"],
#contact-form input[type="button"] {
background-color: #32ABE3; /* Green */
border: none;
color: white;
padding: 15px 16px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
margin: 4px 2px;
cursor: pointer;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
}
#contact-form input[type="submit"]:hover,
#contact-form input[type="button"]:hover, {
background-image:linear-gradient(bottom, #CCC 0%, #999 52%);
background-image:-moz-linear-gradient(bottom, #CCC 0%, #999 52%);
background-image:-webkit-linear-gradient(bottom, #CCC 0%, #999 52%);
-webkit-transition:background 0.3s ease-in-out;
-moz-transition:background 0.3s ease-in-out;
transition:background-color 0.3s ease-in-out;
}
#contact-form input[type="submit"]:active,
#contact-form input[type="button"]:active, {
box-shadow:inset 0 1px 3px rgba(0,0,0,0.5);
}
#contact-form input:focus,
#contact-form textarea:focus {
outline:0;
border:1px solid #999;
}
::-webkit-input-placeholder {
color:#888;
}
:-moz-placeholder {
color:#888;
}
::-moz-placeholder {
color:#888;
}
:-ms-input-placeholder {
color:#888;
}
.iframe-container {
margin: 0 auto;
text-align: center;
height:350px;
}
iframe, #ws_ad {
margin:0;
padding:0;
border:none;
/* width:90%; */
/*width:100%;
height:100%;*/
margin-top: 20px;
margin-bottom: 30px;
background: #fff;
-moz-box-shadow: 4px 4px 14px #000;
-webkit-box-shadow: 4px 4px 14px #000;
box-shadow: 4px 4px 14px #000;
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
-o-transform:rotate(0deg);
-ms-transform:rotate(0deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=.0);
}
}
@media all{
.normal_paid {display:inline-block;}
.small_paid {display:none;}
}
@media all and (max-width: 1024px){
body {
font:400 0.813em "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.normal_paid {display:inline-block;}
.small_paid {display:none;}
}
@media all and (max-width: 960px) and (max-width: 780px){
body {
font:400 0.700em "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.normal_paid {display:inline-block;}
.small_paid {display:none;}
}
@media all and (max-width: 780px){
#contact-form input[type="submit"] {
font:400 1.000em "Helvetica Neue", Helvetica, Arial, sans-serif;
}
h3 {
color:#999;
display:block;
font-size:1.833em;
text-align: center;
}
#footer{
line-height:1.0em;
font-size:0.94em;
}
#contact-form h3 {
font-size:1.833em;
}
#contact-form h2 {
font-size:1.43em;
}
}
@media all and (max-width: 504px){
body {
font:400 0.688em "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#contact-form input[type="submit"] {
font:400 1.000em "Helvetica Neue", Helvetica, Arial, sans-serif;
}
h3 {
color:#999;
display:block;
font-size:1.50em;
text-align: center;
}
#footer{
line-height:1.0em;
font-size:0.84em;
}
#contact-form h3 {
font-size:1.50em;
}
#contact-form h2 {
font-size:1.40em;
}
#visual {display:none;}
}
@media all and (max-width: 320px){
body {
font:400 0.660em "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#contact-form input[type="submit"] {
font:400 1.000em "Helvetica Neue", Helvetica, Arial, sans-serif;
}
h3 {
color:#999;
display:block;
font-size:1.25em;
text-align: center;
}
#footer{
line-height:1.0em;
font-size:0.84em;
}
#contact-form h3 {
font-size:1.25em;
}
#contact-form h2 {
font-size:1.20em;
}
#visual {display:none;}
}
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.