送信ボタンセンターの問題

Question

送信ボタンを中央に配置しようとすると助けが必要です。最近私はちょうど私のフッタの何かをセンタリングすることについての質問を持っていました、そして、私の提出ボタンをセンタリングすることに苦しんでいます。私はHTMLとCSSに新しいので、私はこのサイトがそんなに役立つすべてを理解するのが非常に難しいです。ここにいるすべての人が常に本当に良いアイデアを持っています！

私が言っているように、レスポンシブデザインのために送信ボタンを中央に配置しようとしています。

これについて考えていただいている方は、本当にありがとうございます。ありがとうございました！

/*Mobile*/ 
 

 
.button{ \t 
 
    position:relative; 
 
    bottom: 5%; 
 
    width: 100%; 
 
    display: block; 
 
    width: 200px; 
 
    height: 50px;  
 
    left: 0; 
 
    right: 0; 
 
} 
 

 
/*Rest of Mobile Code*/ 
 
figure.stayssame { 
 
    width: 100%; 
 
} 
 
figure video { 
 
    width: 100%; 
 
    height: 80%; 
 
} 
 
p{ 
 
    padding: 2%; 
 
} 
 

 
.video-txt{ 
 
    position: absolute; 
 
    top: 30%; 
 
    z-index: 9; 
 
    color: #FFF; 
 
    width: 100%; 
 
    text-align: center; 
 
    font-size: 40px; 
 
} 
 
object { 
 
    position: absolute; 
 
    left: 0%; 
 
    top: -5%; 
 
    z-index: 10; 
 
    width: 15%; 
 
} 
 

 
/*ALL CODE FROM DESKTOP*/ 
 
figure.adjustable { 
 
    width: 29%; 
 
} 
 

 
html { 
 
    position: relative; 
 
    min-height: 100%; 
 
} 
 
body { 
 
    margin: 0 0 100px; /* bottom = footer height */ 
 
    font-family: 'Inconsolata', monospace; 
 
    /*font-family: 'Courier New', sans-serif;*/ 
 
    font-weight: 300; 
 
    font-size: 20px; 
 
    line-height: 1.4em; 
 
} 
 
.squish{ 
 
    margin-right:125px; \t 
 
} 
 
.text{ 
 
    padding:5px; \t 
 
} 
 
header { 
 
    position: fixed; 
 
    z-index: 1000; 
 
    width: 100%; 
 
    top: 0px; 
 
    letter-spacing:1px; 
 
    line-height: 55px; 
 
    padding:9px; 
 
    word-spacing:5px; 
 
} 
 
header, h1, h2{ 
 
    font-family: 'Orbitron', sans-serif; 
 
} 
 
.space{ 
 
    padding: 5px; 
 
    color:white; 
 
} 
 
nav{ 
 
    float:left; \t 
 
    width:100%; 
 
} 
 
nav ul li.active a { 
 
    background-color: none; 
 
    color: white; 
 
    text-decoration:none; 
 
} 
 
nav ul li a:hover { 
 
    color:#00E3FF; 
 
} 
 
nav ul li a:visited { 
 
    text-decoration:none; \t 
 
} 
 
form{ 
 
    padding-left: 20% 
 
} 
 

 
/* header tags */ 
 

 
h1 { 
 
    text-align: center; 
 
    color:#013397; 
 
    font-size: 40px; 
 
    padding-top:50px; 
 
} 
 

 
h2{ 
 
    text-align: center; 
 
    color:#00E3FF; 
 
    font-size: 30px; 
 
    margin: 5px; 
 
    padding:20px; 
 
} 
 

 
p{ 
 
    text-align: left; 
 
} 
 

 
.clearfix:after { 
 
    content:" "; 
 
    display:block; 
 
    clear:both; 
 
} 
 

 
#box{ 
 
    background-color:#94DBEC ; 
 
} 
 

 
hr.style2 { 
 
    border-top: 3px double #00E3FF; 
 
    width:300px 
 
} 
 
section{ 
 
    width: 85%; 
 
    margin-left: auto; 
 
    margin-right:auto; 
 
    margin-top: 35px; 
 
} 
 

 

 
img.adjustable{ 
 
    width: 100%; 
 
    max-width:100%; 
 
    height:auto; 
 
    /* max-width: 400px; 
 
    max-height: 400px;*/ 
 
    margin: 1em ; 
 
    /*width: 90%; 
 
    margin:5%;*/ 
 
} 
 
#inner{ 
 
    height: 100px; 
 
    padding:15px 0; \t 
 
} 
 
#container{ 
 
    height:100%; 
 
} 
 
.imgbox5{ 
 
    padding-right:30px; 
 
    padding-left:0px; 
 
} 
 

 
.imgbox4{ 
 
    padding-right:30px; 
 
    padding-left:0px; 
 
} 
 

 
.imgbox3{ 
 
    padding-right:30px; 
 
    padding-left:0px; 
 
} 
 

 

 
.imgbox2{ 
 
    padding-right:30px; 
 
} 
 

 
.imgbox{ 
 
    padding-right:30px; 
 
    padding-left:0px; 
 
} 
 

 
#firstpara{ 
 
    background-color:#5E5757; 
 
    color: white; 
 
} 
 

 
#secpara{ 
 
    background-color:#5E5757; 
 
    color: white; 
 
} 
 

 
#thirdpara{ 
 
    background-color:#5E5757; 
 
    color: white; 
 
} 
 

 
#fourthpara{ 
 
    background-color:#5E5757; 
 
    color: white; 
 
} 
 
#primary{ 
 
    background-color:#5E5757; 
 
    color: white; 
 
} 
 

 
#enroll{ 
 
    margin:0; 
 
    padding:0; \t 
 
} 
 
/*section{ 
 
text-align: center; 
 
width: 100%; 
 

 
}*/ 
 

 
footer { 
 
    position: absolute; 
 
    left: 0; 
 
    bottom: 0; 
 
    width: 100%; 
 
    height: 100px; 
 
    padding-bottom: 2%; 
 
    background-color:#670809; 
 
    font-family: 'Inconsolata', monospace; 
 

 
    /* text */ 
 

 
    padding-left: 10px; 
 
    padding-top: 15px; 
 
    color: #ffffff; 
 
    font-size: 15px; 
 
    text-align:center; 
 
} 
 

 
a { color: white; } 
 

 
a, a:active { 
 
    color: white; 
 
    text-decoration:none; 
 
} 
 
.side{ 
 
    left-margin:10px; 
 
    right-margin:10px; \t 
 
} 
 

 
object{ 
 
    position: absolute; 
 
    top:350px; 
 
    left:100px; 
 
    height: 100px; 
 
    width:200px; 
 
    z-index:2000; 
 
} 
 

 
#headline{ 
 
    text-align: center; 
 
    position: absolute; 
 
    top:10%; 
 
    left:35%; 
 
    color:#00E3FF; 
 
    line-height:20px; 
 
    font-family: 'Orbitron', sans-serif; 
 
    word-spacing: 1px; 
 
    font-size:12px; 
 
} 
 
#value{ 
 
    background-color:#5E5757; 
 
    color: white; 
 
    width:90%; 
 
    margin-left: auto; 
 
    margin-right:auto; 
 
    margin-top:2%; 
 
} 
 
#title{ 
 
    color:white; 
 
    text-align:center; 
 
    padding-top:10px; 
 
} 
 
img{ 
 
    width: 100%; 
 
    display: block; 
 
} 
 
.msum{ 
 
    position: absolute; 
 
    bottom: 5%; 
 
    width: 100%; 
 
    display: block; 
 
    width: 200px; 
 
    height: 50px; 
 
    left: 0; 
 
    right: 0; 
 
    margin: 0 auto; 
 
} 
 

 
span{ 
 
    font-size: 14px; \t 
 
} 
 

 
.smaller{ 
 
    font-size: 16px; 
 
} 
 

 
/*NAV BAR*/ 
 

 
@import url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"); 
 
@import url("http://fonts.googleapis.com/css?family=Open+Sans:400,300"); 
 
html{font-size: 62.5%; font-family: 'Open Sans', sans-serif;} 
 
body{font-size: 1.6rem; min-height: 100vh;} 
 
h1{font-size: 3rem; margin-bottom: 1rem;} 
 
h2{font-size: 1.6rem;} 
 
header{position: relative;} 
 
main{padding: 2rem;} 
 

 
/***************** NAVIGATION ********************/ 
 
nav ul{ 
 
    display: flex; 
 
    flex-wrap: wrap; 
 

 
    margin: 0 auto; \t \t 
 
    background: #670809; 
 
} 
 
nav ul, 
 
nav li{ 
 
    flex: 1; \t 
 
} 
 
nav li:last-child{border-bottom: none;} 
 
nav a{ 
 
    text-decoration: none; 
 
    color: inherit; 
 
    display: block; 
 
    font-size: 1.8rem; 
 
} 
 
nav a:hover{ 
 
    background: /*#adacac*/#555; 
 
    color: #fff; 
 
} 
 
nav li{ 
 
    position: relative; 
 
    line-height: 50px; 
 
    color: #fff; 
 
    text-align: center; 
 
} 
 
nav input, 
 
nav label{ 
 
    display: none; 
 
    width: 36px; 
 
    height: 36px; 
 
    background: #555; 
 
    color: #fff; 
 
    text-align: center; 
 
    line-height: 36px; 
 
    font-size: 1.6rem; 
 
    border-radius: 4px; 
 
} 
 
nav label{position: absolute; top: 8px; right: 8px; transition: .4s;} 
 
nav label:hover{cursor:pointer;} 
 
nav label:before{ 
 
    font-family: FontAwesome; 
 
    font-size: 24px; 
 
    content: "\f0c9"; 
 
    text-align: center; 
 
} 
 

 
/*************** MEDIA QUERIES *******************/ 
 

 
nav ul{ 
 
    transform: translateY(0); 
 
    box-shadow: 0 0 5px rgba(0,0,0, .7); 
 
    transition: all .5s; 
 
} 
 
nav li{ 
 
    flex: none; 
 
    width: 100%; 
 
    border-bottom: solid 1px #777; 
 
} 
 
nav input[type="checkbox"]:checked + ul{ 
 
    transform: translateY(-100%); 
 
    width: 100%; 
 
    background: #999; 
 
    transition: all .5s; 
 
} 
 
nav label{display: block;} 
 
nav input[type="checkbox"]:checked + ul li:nth-child(1){ 
 
    background: #777; 
 
    color: #fff; 
 
} 
 

 
#css-toggle-menu{ 
 
    float:right; 
 
    margin: 10px; 
 
}

<form action="FormToEmail.php" method="POST" enctype="multipart/form-data" autocomplete="on" class="contact clearfix "> 
 
    <section class="clearfix"> 
 
    <fieldset><legend> 
 
     <i class="fa fa-user" aria-hidden="true"></i>Personal Information 
 
     <hr class="style2"> 
 
     </legend> 
 
     <label> 
 
     <span></span> 
 
     <input name="first_name" type="text" value="" placeholder="First Name" autofocus required/> 
 
     </label> 
 
     <label> 
 
     <span></span> 
 
     <input name="last_name" type="text" value="" placeholder="Last Name" autofocus required/> 
 
     </label> 
 
     <label> 
 
     <span> </span> 
 
     <input name="date_of_birth" type="date" value="" placeholder="Date of Birth" autofocus required/> 
 
     </label> 
 

 
     <label> 
 
     <span></span> 
 
     <input type="number" name="quantity" min="1" max="6" autofocus placeholder="number of years until next degree"></label> 
 

 
     <label> 
 
     <span></span> 
 
     <input name="level_of_education" type="hidden" value="" placeholder="level of education" autofocus required/></label> 
 
     <select class="bottom" name="education_level"> 
 
     <option value="High School">High School</option> 
 
     <option value="Undergraduate">Undergradute</option> 
 
     <option value="Graduate">Graduate</option> 
 
     </select> 
 
    </fieldset> 
 
    <fieldset> 
 
     <legend> 
 
     <i class="fa fa-envelope-o" aria-hidden="true"></i> 
 
     Contact Information <hr class="style2"> 
 
     </legend> 
 

 
     <label> 
 
     <span></span> 
 
     <input class="ghost-input" name="email" value="" type="email" placeholder="youremail@email.com" autocomplete="off" /> 
 
     </label> 
 

 
     <label>   
 
     <span></span> 
 
     <input name="phonenumber" value="" type="tel" placeholder="763-858-9564" /> 
 
     </label> 
 

 
     <label> 
 
     <span></span> 
 
     <input name="website" value="" type="url" placeholder="https://yourwebsite.com"/> 
 
     </label> 
 
    </fieldset> 
 
    </section> 
 
    <section class="clearfix column"> 
 
    <fieldset> 
 
     <legend> 
 
     <i class="fa fa-laptop" aria-hidden="true"></i> 
 
     What are your Interests <hr class="style2"> 
 
     </legend> 
 
     <section class="clearfix column left"> 
 
     <label class="bottom span"> 
 
      <span> 
 
      <input name="webdesign" value="web_design" type="checkbox" class="checks"/>Web Design 
 
      </span> 
 
     </label> 
 
     <label class="bottom"> 
 
      <span> 
 
      <input name="webdevelopment" value="web_development" type="checkbox" class="checks" />Web Development 
 
      </span>   
 
     </label> 
 
     <label class="bottom"> 
 
      <span> 
 
      <input name="computerscience" value="computer_science" type="checkbox"class="checks" />Computer Science 
 
      </span> 
 
     </label> 
 
     </section> 
 
     <section class="clearfix column left"> 
 
     <label class="bottom"> 
 
      <span> 
 
      <input name="graphicdesign" value="graphic_design" type="checkbox" class="checks"/>Graphic Design 
 
      </span> 
 
     </label> 
 
     <label class="bottom"> 
 
      <span> 
 
      <input name="userexperience" value="user_experience" type="checkbox" class="checks" />User Experience 
 
      </span> 
 
     </label> 
 
     <label class="bottom"> 
 
      <span> 
 
      <input class="checks" name="appdevelopment" value="app_development" type="checkbox" />App Development 
 
      </span> 
 
     </label> 
 
     </section> 
 
    </fieldset> 
 
    <fieldset> 
 
     <legend> 
 
     <i class="fa fa-volume-control-phone" aria-hidden="true"></i> 
 
     Continuation <hr class="style2 toosmall"> 
 
     </legend> 
 

 
     <section class="clearfix column left"> 
 
     <legend class="smaller">You can contact me by:</legend> 
 
     <br> 
 
     <div class="squish"> 
 
      <label class="bottom"> 
 
      <span> 
 
       <input class="checks" name="contact_me" type="radio" value="phone" checked/>Contact me by phone 
 
      </span> 
 
      </label> 
 
      <label class="bottom"> 
 
      <span> 
 
       <input class="checks" name="contact_me" type="radio" value="email" checked/>Contact me by email 
 
      </span> 
 
      </label> 
 
      <label class="bottom"> 
 
      <span> 
 
       <input class="checks" name="contact_me" type="radio" value="text"/>Contact me by text 
 
      </span> 
 
      </label> 
 
      <br> 
 
     </div> 
 
     </section> 
 
     <section class="clearfix column left" > 
 
     <legend class="smaller" >I'm interested in:</legend> 
 
     <br> 
 
     <label class="bottom"> 
 
      <span> 
 
      <input class="checks" name="interest" type="radio" value="text"/>Undergraduate</span> 
 
     </label> 
 
     <label class="bottom"> 
 
      <span> 
 
      <input class="checks" name="interest" type="radio" value="text"/>Graduate</span> 
 
     </label> 
 
     <label class="bottom"> 
 
      <span> 
 
      <input class="checks" name="interest" type="radio" value="text"/>Online</span> 
 
     </label> 
 
     </section> 
 
    </fieldset> 
 
    </section> 
 
    <input class="button" name="submit_to_programmer" type="submit" value="Submit"/> 
 
    <input type="hidden" value="Message from Car Website" name="subject"> 
 
    <input name="redirect" type="hidden" value="thanks.html"> 
 
</form> 
 
<br> 
 

 
<script src="https://use.fontawesome.com/8f5d316ef9.js"></script> 
 
</div>

Answer 1

/*Mobile*/ 
 

 
.button{ 
 
\t 
 
\t position:relative; 
 
    bottom: 5%; 
 
    width: 100%; 
 
    display: block; 
 
    width: 200px; 
 
    height: 50px; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
    
 

 
\t 
 

 
} 
 

 
/*Rest of Mobile Code*/ 
 

 
figure.stayssame { 
 
\t width: 100%;} 
 

 

 
figure video {width: 100%; height: 80%;} 
 

 

 
p{ 
 
\t padding: 2%; 
 
\t } 
 
\t 
 
\t .video-txt{position: absolute; top: 30%; z-index: 9; color: #FFF; width: 100%; text-align: center; font-size: 40px; 
 
} 
 

 
object {position: absolute; left: 0%; top: -5%; z-index: 10; width: 15%; } 
 

 

 

 

 

 
/*ALL CODE FROM DESKTOP*/ 
 

 

 

 
figure.adjustable { 
 
\t \t width: 29%; 
 
\t } 
 

 
html { 
 
\t position: relative; 
 
\t min-height: 100%; 
 
\t } 
 

 
body { 
 
\t 
 
\t 
 
\t 
 
    margin: 0 0 100px; /* bottom = footer height */ 
 
\t \t font-family: 'Inconsolata', monospace; 
 
\t \t 
 
\t \t 
 
\t \t /*font-family: 'Courier New', sans-serif;*/ 
 
\t \t font-weight: 300; 
 
\t \t font-size: 20px; 
 
\t \t line-height: 1.4em; 
 

 
\t \t 
 
} 
 

 
.squish{ 
 
margin-right:125px; \t 
 
\t 
 
} 
 

 

 
.text{ 
 
padding:5px; \t 
 
} 
 

 

 

 
header { 
 
\t position: fixed; 
 
\t z-index: 1000; 
 
    width: 100%; 
 
    top: 0px; 
 
etter-spacing:1px; 
 
\t line-height: 55px; 
 
\t padding:9px; 
 

 
\t 
 
\t word-spacing:5px; 
 
\t 
 
\t 
 
\t } 
 
header, h1, h2{ 
 
font-family: 'Orbitron', sans-serif; 
 
} 
 

 
.space{ 
 
padding: 5px; 
 

 
color:white; 
 
} 
 

 
nav{ 
 
\t 
 
float:left; \t 
 
width:100%; 
 
} 
 

 

 

 
nav ul li.active a { 
 
\t background-color: none; 
 
\t color: white; 
 
\t text-decoration:none; 
 
\t } 
 
\t nav ul li a:hover { 
 
\t color:#00E3FF; 
 
\t 
 
\t 
 
\t } 
 
\t 
 
\t 
 
\t 
 
\t nav ul li a:visited { 
 
\t 
 
\t text-decoration:none; \t 
 
\t } 
 

 

 

 
/*nav ul li a { 
 
\t \t display:inline-block; 
 
\t \t 
 
\t \t padding: 1 px; 
 
\t \t 
 
\t \t color: #fff; 
 
\t \t letter-spacing: 1 px; 
 
\t \t text-decoration:none; 
 
\t \t text-transform: uppercase; 
 
\t \t margin: .55em; 
 
\t \t font-size: 5 px; 
 
\t \t float: right; 
 
\t \t 
 
\t } 
 

 
nav ul li.active a { 
 
\t /*background-color: none; 
 
\t color: white; 
 
\t text-decoration:none; 
 
\t } 
 
\t a:hover { 
 
\t /*background-color:none; 
 
\t color:black; 
 
\t background-color:#00E3FF; 
 
\t 
 
\t } 
 
\t 
 
\t 
 
\t 
 
\t nav ul li a:visited { 
 
\t color:black; 
 
\t text-decoration:none; \t 
 
\t } 
 
*/ 
 
form{ 
 
\t 
 
padding-left: 20%; 
 

 
\t 
 
\t 
 
\t 
 

 
} 
 

 
/* header tags */ 
 

 
h1 { 
 
text-align: center; 
 
color:#013397; 
 
font-size: 40px; 
 
    
 
padding-top:50px; 
 
\t } 
 

 
h2{ 
 
\t text-align: center; 
 
\t color:#00E3FF; 
 
\t font-size: 30px; 
 
\t margin: 5px; 
 
\t padding:20px; 
 
\t } 
 

 
p{ 
 
\t text-align: left; 
 
\t } 
 

 

 

 

 
\t 
 
\t .clearfix:after { 
 

 
    content:" "; 
 

 
    display:block; 
 

 
    clear:both; 
 
    
 

 
} 
 

 
#box{ 
 
background-color:#94DBEC ; 
 

 

 
} 
 

 
hr.style2 { 
 
\t border-top: 3px double #00E3FF; 
 
\t width:300px 
 
} 
 
section{ 
 
\t 
 
\t 
 
width: 85%; 
 
margin-left: auto; 
 
margin-right:auto; 
 

 
margin-top: 35px; 
 

 

 

 
} 
 

 

 
img.adjustable{ 
 
\t width: 100%; 
 
\t max-width:100%; 
 
\t height:auto; 
 
\t 
 
\t 
 
    /* max-width: 400px; 
 
\t max-height: 400px;*/ 
 
\t \t margin: 1em ; 
 
\t \t 
 
\t 
 
\t /*width: 90%; 
 
\t margin:5%;*/ 
 
\t 
 
\t 
 
} 
 

 

 

 
#inner{ 
 
height: 100px; 
 
padding:15px 0; \t 
 
\t 
 
} 
 

 

 
#container{ 
 
height:100%; 
 

 
\t 
 
} 
 

 

 

 
.imgbox5{ 
 
\t padding-right:30px; 
 
\t padding-left:0px; 
 
} 
 

 
.imgbox4{ 
 
\t 
 
padding-right:30px; 
 
\t padding-left:0px; 
 
\t 
 
} 
 

 
.imgbox3{ 
 
padding-right:30px; 
 
\t padding-left:0px; 
 
\t 
 
} 
 

 

 
.imgbox2{ 
 
padding-right:30px; 
 
\t 
 
\t 
 
} 
 

 
.imgbox{ 
 
\t 
 
padding-right:30px; 
 
\t padding-left:0px; 
 
} 
 

 
#firstpara{ 
 
\t background-color:#5E5757; 
 
\t color: white; 
 
\t 
 
} 
 

 
#secpara{ 
 
\t background-color:#5E5757; 
 
\t color: white; 
 
\t 
 
} 
 

 
#thirdpara{ 
 
\t background-color:#5E5757; 
 
\t color: white; 
 
\t 
 
} 
 

 
#fourthpara{ 
 
\t background-color:#5E5757; 
 
\t color: white; 
 
\t 
 
} 
 
#primary{ 
 
\t background-color:#5E5757; 
 
\t color: white; 
 
} 
 

 
#enroll{ 
 
margin:0; 
 
padding:0; \t 
 
} 
 
/*section{ 
 
\t text-align: center; 
 
\t width: 100%; 
 
\t 
 
\t }*/ 
 

 
footer { 
 
\t position: absolute; 
 
\t left: 0; 
 
\t bottom: 0; 
 
\t width: 100%; 
 
\t 
 
\t height: 100px; 
 
\t padding-bottom: 2%; 
 
\t background-color:#670809; 
 
\t font-family: 'Inconsolata', monospace; 
 
\t \t 
 
\t /* text */ 
 
\t 
 
\t padding-left: 10px; 
 
\t padding-top: 15px; 
 
\t color: #ffffff; 
 
\t font-size: 15px; 
 
\t text-align:center; 
 
\t 
 
\t 
 
} 
 

 
a { color: white; } 
 

 
a, a:active { color: white; 
 

 
text-decoration:none; 
 

 
} 
 

 

 

 

 

 

 
.side{ 
 
left-margin:10px; 
 
right-margin:10px; \t 
 
} 
 

 
\t 
 
\t 
 
\t 
 
\t object{ 
 
\t position: absolute; 
 
     top:350px; 
 
\t left:100px; 
 
     height: 100px; 
 
     width:200px; 
 
\t \t z-index:2000; 
 
\t } 
 
\t 
 
\t #headline{ 
 
\t text-align: center; 
 
\t position: absolute; 
 
\t 
 
\t top:10%; 
 
\t left:35%; 
 
\t color:#00E3FF; 
 
\t line-height:20px; 
 
\t font-family: 'Orbitron', sans-serif; 
 
\t word-spacing: 1px; 
 
\t font-size:12px; 
 
\t 
 
\t } 
 
\t #value{ 
 
\t background-color:#5E5757; 
 
\t color: white; 
 
\t width:90%; 
 
\t margin-left: auto; 
 
margin-right:auto; 
 
margin-top:2%; 
 
\t 
 

 
\t 
 

 
\t } 
 
\t 
 
\t 
 
\t 
 
#title{ 
 
color:white; 
 
text-align:center; 
 
padding-top:10px; 
 

 
\t 
 
} 
 
img{ 
 
width: 100%; 
 
    display: block; 
 
    } 
 
    
 
/*.img{ 
 
border-width:thick; 
 
\t border-style:solid; 
 
border-color:white; \t \t 
 
} 
 

 
.column-right{ 
 
\t float: right; 
 
\t width: 30%; 
 
\t padding: 1%; 
 
\t 
 
\t } 
 
.column-center{ 
 
\t display: inline-block; 
 
\t width: 30%; 
 
\t padding: 1%; 
 
\t 
 
\t bottom: 18px; 
 
\t 
 
\t 
 
\t } 
 
\t 
 
\t .column-left{ 
 
\t float: left;file:///Volumes/MMG/webfix/video/techpic1.jpg 
 
\t width: 30%; 
 
\t padding: 1%; 
 
\t 
 
\t 
 

 
\t } 
 
\t 
 
\t #left-box{ 
 
\t 
 
\t background-color:#5E5757; 
 
color: white; 
 
padding: 15px; 
 
border-radius:10px; 
 
\t 
 
} 
 
#middle-box{ 
 
\t background-color:#5E5757; 
 
color: white; 
 
padding: 15px; 
 
border-radius:10px; 
 

 
} 
 

 
#right-box{ 
 
\t background-color:#5E5757; 
 
color: white; 
 
padding: 15px; 
 
border-radius:10px; 
 
padding-bottom:135px; 
 
} 
 
.more { 
 
    position: relative; 
 
    display:inline-block; 
 
    color:black; 
 
    font-weight: bold; 
 
    top: 20px; 
 
    right: 31px; 
 
    background-color:white; 
 
    border-bottom-left-radius: 10px; 
 
    padding: 6px; 
 
    margin: 9px; 
 
    width: 30%; 
 
} 
 
#button3, #button2{ 
 
color: black; 
 
position:relative; 
 
top: 36px; 
 
right:36px; \t 
 
} 
 

 
#button1{ 
 
color:black; 
 
position:relative; 
 
top: 155px; 
 
right:36px; \t 
 
} 
 

 
*/ 
 

 
.msum{ 
 
\t position: absolute; 
 
    bottom: 5%; 
 
    width: 100%; 
 
    display: block; 
 
    width: 200px; 
 
    height: 50px; 
 
    
 
    left: 0; 
 
    right: 0; 
 
    margin: 0 auto; 
 
\t 
 
} 
 

 
span{ 
 
font-size: 14px; \t 
 
} 
 

 
.smaller{ 
 
font-size: 16px; 
 
\t 
 
} 
 

 

 

 

 
/*NAV BAR*/ 
 

 
@import url("http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"); 
 
@import url("http://fonts.googleapis.com/css?family=Open+Sans:400,300"); 
 
html{font-size: 62.5%; font-family: 'Open Sans', sans-serif;} 
 
body{font-size: 1.6rem; min-height: 100vh;} 
 
h1{font-size: 3rem; margin-bottom: 1rem;} 
 
h2{font-size: 1.6rem;} 
 
header{position: relative;} 
 
main{padding: 2rem;} 
 

 
/***************** NAVIGATION ********************/ 
 
nav ul{ 
 
\t display: flex; 
 
\t flex-wrap: wrap; 
 

 
\t margin: 0 auto; \t \t 
 
    background: #670809; 
 
} 
 
nav ul, 
 
nav li{ 
 
\t flex: 1; \t 
 
} 
 
nav li:last-child{border-bottom: none;} 
 
nav a{ 
 
\t text-decoration: none; 
 
\t color: inherit; 
 
\t display: block; 
 
\t font-size: 1.8rem; 
 
} 
 
nav a:hover{ 
 
\t background: /*#adacac*/#555; 
 
\t color: #fff; 
 
} 
 
nav li{ 
 
\t position: relative; 
 
\t line-height: 50px; 
 
\t color: #fff; 
 
\t text-align: center; 
 
} 
 
nav input, 
 
nav label{ 
 
\t display: none; 
 
\t width: 36px; 
 
\t height: 36px; 
 
\t background: #555; 
 
\t color: #fff; 
 
\t text-align: center; 
 
\t line-height: 36px; 
 
\t font-size: 1.6rem; 
 
\t border-radius: 4px; 
 
} 
 
nav label{position: absolute; top: 8px; right: 8px; transition: .4s;} 
 
nav label:hover{cursor:pointer;} 
 
nav label:before{ 
 
\t font-family: FontAwesome; 
 
\t font-size: 24px; 
 
\t content: "\f0c9"; 
 
\t text-align: center; 
 
} 
 

 
/*************** MEDIA QUERIES *******************/ 
 

 
\t nav ul{ 
 
\t \t transform: translateY(0); 
 
\t \t box-shadow: 0 0 5px rgba(0,0,0, .7); 
 
     transition: all .5s; 
 
\t } 
 
\t nav li{ 
 
\t \t flex: none; 
 
\t \t width: 100%; 
 
\t \t border-bottom: solid 1px #777; 
 
\t } 
 
\t nav input[type="checkbox"]:checked + ul{ 
 
\t \t transform: translateY(-100%); 
 
\t \t width: 100%; 
 
\t \t background: #999; 
 
     transition: all .5s; 
 
\t } 
 
\t nav label{display: block;} 
 
\t nav input[type="checkbox"]:checked + ul li:nth-child(1){ 
 
\t \t background: #777; 
 
\t \t color: #fff; 
 
\t } 
 
\t 
 
\t #css-toggle-menu{ 
 
\t float:right; 
 
\t margin: 10px; 
 
\t } 
 
\t

<form action="FormToEmail.php" method="POST" enctype="multipart/form-data" autocomplete="on" class="contact clearfix "> 
 
<section class="clearfix"> 
 
<fieldset><legend> 
 
<i class="fa fa-user" aria-hidden="true"></i>Personal Information 
 
<hr class="style2"> 
 
</legend> 
 
<label><span></span> <input name="first_name" type="text" value="" placeholder="First Name" autofocus required/> 
 
</label> 
 
<label><span> 
 
</span><input name="last_name" type="text" value="" placeholder="Last Name" autofocus required/> 
 
</label> 
 
<label><span> </span><input name="date_of_birth" type="date" value="" placeholder="Date of Birth" autofocus required/> 
 
</label> 
 

 
<label><span> 
 
</span><input type="number" name="quantity" min="1" max="6" autofocus placeholder="number of years until next degree"></label> 
 

 
<label ><span></span> <input name="level_of_education" type="hidden" value="" placeholder="level of education" autofocus required/></label> 
 
<select class="bottom" name="education_level"> 
 
<option value="High School">High School</option> 
 
<option value="Undergraduate">Undergradute</option> 
 
<option value="Graduate">Graduate</option> 
 
</select> 
 

 

 

 

 

 

 
</fieldset> 
 

 

 

 

 
<fieldset><legend><i class="fa fa-envelope-o" aria-hidden="true"></i> 
 
Contact Information <hr class="style2"></legend> 
 

 
<label><span> 
 
</span><input class="ghost-input" name="email" value="" type="email" placeholder="youremail@email.com" autocomplete="off" /></label> 
 

 
<label><span></span><input name="phonenumber" value="" type="tel" placeholder="763-858-9564" /></label> 
 

 
<label><span></span><input name="website" value="" type="url" placeholder="https://yourwebsite.com"/></label> 
 

 

 

 
</fieldset> 
 

 

 

 

 
</section> 
 

 

 

 

 
<section class="clearfix column" > 
 

 

 
<fieldset><legend><i class="fa fa-laptop" aria-hidden="true"></i> 
 
What are your Interests <hr class="style2"></legend> 
 

 

 
<section class="clearfix column left" > 
 
<label class="bottom span" ><span ><input name="webdesign" value="web_design" type="checkbox" class="checks"/>Web Design</span> 
 
</label> 
 

 
<label class="bottom"><span><input name="webdevelopment" value="web_development" type="checkbox" class="checks" />Web Development</span> 
 
</label> 
 

 
<label class="bottom"><span><input name="computerscience" value="computer_science" type="checkbox"class="checks" />Computer Science</span></label> 
 

 
</section> 
 
<section class="clearfix column left" > 
 

 
<label class="bottom"><span><input name="graphicdesign" value="graphic_design" type="checkbox" class="checks"/>Graphic Design</span> 
 
</label> 
 

 
<label class="bottom"><span><input name="userexperience" value="user_experience" type="checkbox" class="checks" />User Experience</span></label> 
 

 
<label class="bottom"><span><input class="checks" name="appdevelopment" value="app_development" type="checkbox" />App Development</span> 
 
</label> 
 
</section> 
 

 
</fieldset> 
 

 

 

 
<fieldset><legend><i class="fa fa-volume-control-phone" aria-hidden="true"> 
 

 
</i> 
 

 
Continuation <hr class="style2 toosmall"></legend> 
 

 
<section class="clearfix column left" > 
 

 
<legend class="smaller">You can contact me by:</legend> 
 
<br> 
 

 
<div class="squish"> 
 
<label class="bottom"><span><input class="checks" name="contact_me" type="radio" value="phone" checked/>Contact me by phone</span></label> 
 

 

 

 

 

 
<label class="bottom"><span><input class="checks" name="contact_me" type="radio" value="email" checked/>Contact me by email</span></label> 
 

 
<label class="bottom"><span><input class="checks" name="contact_me" type="radio" value="text"/>Contact me by text</span></label> 
 
<br> 
 
</div> 
 
</section> 
 

 

 
<section class="clearfix column left" > 
 
<legend class="smaller" >I'm interested in:</legend> 
 
<br> 
 

 
<label class="bottom"><span><input class="checks" name="interest" type="radio" value="text"/>Undergraduate</span></label> 
 
<label class="bottom"><span><input class="checks" name="interest" type="radio" value="text"/>Graduate</span></label> 
 
<label class="bottom"><span><input class="checks" name="interest" type="radio" value="text"/>Online</span></label> 
 
</section> 
 

 

 
</fieldset> 
 

 

 

 
</section> 
 

 

 

 

 
<input class="button" name="submit_to_programmer" type="submit" value="Submit"/> 
 
<input type="hidden" value="Message from Car Website" name="subject"> 
 
<input name="redirect" type="hidden" value="thanks.html"> 
 
</form> 
 

 
<br> 
 

 

 

 

 
</div>

あなた.button