Ini Code Html nya
<!doctype html>
<html>
<head>
<title>HTML5 Contact Form | Jin Toples Programming</title>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<header class="ccheader">
<h1>HTML5 Contact Form</h1>
</header>
<div class="wrapper">
<form method="post" action="" class="ccform">
<div class="ccfield-prepend">
<span class="ccform-addon"><i class="fa fa-user fa-2x"></i></span>
<input class="ccformfield" type="text" placeholder="Full Name" required>
</div>
<div class="ccfield-prepend">
<span class="ccform-addon"><i class="fa fa-envelope fa-2x"></i></span>
<input class="ccformfield" type="email" placeholder="Email" required>
</div>
<div class="ccfield-prepend">
<span class="ccform-addon"><i class="fa fa-mobile-phone fa-2x"></i></span>
<input class="ccformfield" type="number" placeholder="Phone">
</div>
<div class="ccfield-prepend">
<span class="ccform-addon"><i class="fa fa-info fa-2x"></i></span>
<input class="ccformfield" type="text" placeholder="Subject" required>
</div>
<div class="ccfield-prepend">
<span class="ccform-addon"><i class="fa fa-comment fa-2x"></i></span>
<textarea class="ccformfield" name="comments" rows="8" placeholder="Message" required></textarea>
</div>
<div class="ccfield-prepend">
<input class="ccbtn" type="submit" value="Submit">
</div>
</form>
</div>
</body>
</html>
Ini Code Css nya
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
body {
background: #f29107;
color: #fff;
font-weight: 400;
font-size: 1em;
font-family: 'Lato', Arial, sans-serif;
margin:0;
padding:0;
padding-bottom:60px;
}
.wrapper{
width:70%;
margin:auto;
}
.ccheader {
margin: 0 auto;
padding: 2em;
text-align: center;
}
.ccheader h1 {
margin: 0;
font-weight: 300;
font-size: 2.5em;
line-height: 1.3;
}
.ccheader {
margin: 0 auto;
padding: 2em;
text-align: center;
}
.ccheader h1 {
margin: 0;
font-weight: 300;
font-size: 2.5em;
line-height: 1.3;
}
/* Form CSS*/
.ccform {
margin: 0 auto;
}
.ccfield-prepend{
margin-bottom:10px;
width:100%;
}
.ccform-addon{
color:#f8ae45;
float:left;
padding:8px;
width:8%;
min-width: 35px;
background:#FFFFFF;
text-align:center;
}
.ccformfield {
color:#000000;
background:#FFFFFF;
border:none;
padding:15.5px;
width:100%;
display:block;
font-family: 'Lato',Arial,sans-serif;
font-size:14px;
}
.ccbtn{
display:block;
border:none;
background:#f8ae45;
float:right;
color:#FFFFFF;
padding:10px;
cursor:pointer;
text-decoration:none;
font-weight:bold;
}
.ccbtn:hover{
background:#d8850e;
}
.credit {
float: left;
margin: 25px;
text-align: center;
}
.credit em{
margin-right:5px;
}
.credit a {
color: #fff;
font-weight: bold;
text-decoration: none;
}
Jika Sobat Mau Dibawah Ini Link Donlod nya
DOWNLOAD
Refrensi
Jin Toples Progaming
Jika Sobat ingin belajar lebih lanjut kunjungin saja refrensi nya sebab artikel artikel nya sangat bermanfaat dan code Kontak From ini ada sambungan nya karena perlu Code lagi yaitu Php untuk mengolah Data html yang tadi Sobat Donlod..
Selamat Belajar
AlhamDulillah Catatan sederhana Download Code Contak From Html5 telah selesai Mohon Maaf Jika Ada Kesalahan Wasalamu'alaikum warohmatulloh wabarokaatuh
No comments:
Post a Comment