Nama: Ayu Mutiara Sari
NRP: 05111740000149
Kelas: PWEB C
link: klik di sini
1. Source Code HTML
2. Source Code CSS
Hasil:
3. Source Code HTML
4. Source Code CSS
NRP: 05111740000149
Kelas: PWEB C
link: klik di sini
1. Source Code HTML
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Tech in Asia</title>
<link rel="stylesheet" href="yeay.css"/>
</head>
<body>
<div class="header">
<div class="menu">
<ul>
<li><a href="#">NEWS</a></li>
<li><a href="#">JOBS</a></li>
<li><a href="#">COMPANIES</a></li>
<li><a href="#">EVENT</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">ADVERTISE</a></li>
</ul>
</div>
<div class="menu1">
<ul>
<li><a href="#">CATEGORIES</a></li>
<li><a href="#">MARKETS</a></li>
<li><a href="#">WRITERS</a></li>
<div id="akun">
<li><a href="#"><li>LOG IN</00000000li></a>
<li><a href="form.htm"><li>SIGN UP</li></a>
</div>
</ul>
</div>
</div>
<div class="content">
<div class="jarak">
<!-- kiri -->
<div class="kiri">
<!-- blog -->
<div class="border">
<div class="jarak">
<img src="web1.jpg" style=" float: left; width: 280px;height: 200px;">
<h3>How one Silicon Valley investor helps US startups enter Japan</h3>
<p>Hire the right country manager.</p>
<button class="btn">Read More..</button>
</div>
</div>
<!-- end blog-->
<!-- blog -->
<div class="border">
<div class="jarak">
<img src="web3.jpg" style="float: left;width: 300px;height: 200px;">
<h3>I oversee government digital services at GovTech. Ask me anything!</h3>
<p>Before GovTech, Parimal was director of technology at DreamWorks Animation. Ask him anything!</p>
<button class="btn">Read More..</button>
</div>
</div>
<!-- end blog-->
<!-- blog -->
<div class="border">
<div class="jarak">
<img src="web2.jpg" style="float: left;width: 300px;height: 200px;">
<h3>Singapore introduces new rules for bike-share users, fines for abusers</h3>
<p>The rules are part of the Land Transport Authority’s new licensing regime for bike-sharing services.</p>
<button class="btn">Read More..</button>
</div>
</div>
<!-- end blog-->
</div>
<!-- kiri-->
<!-- kanan -->
<div class="kanan">
<div class="jarak">
<h2>LATEST JOBS</h2>
<img src="job1.png" style="float: left;width: 34px;height: 34px;">
<h1>Software Engineer-Backend</h1>
<p>Jakarta, Indonesia</p>
<img src="job2.png" style="float: left;width: 34px;height: 34px;">
<h1>Graphic Designer</h1>
<p>Singapore, Singapore</p>
<img src="job3.png" style="float: left;width: 34px;height:34px;">
<h1>Senior NodeJs Developer</h1>
<p>Singapore, Singapore</p>
</div>
<div class="footer" >
<h2>Copyright 2018 PwebC</h2>
</div>
</div>
<!-- kanan -->
</div>
</div>
</body>
</html>
2. Source Code CSS
body{
background: #FF7F50;
color: #333;
/* width: 100% ;
height: 100%;*/
font-family: "lato", cursive, sans-serif;
/*margin: 0 auto;*/
}
.content{
width: 88%;
margin: auto;
/*height: 420px;*/
padding: 0.1px;
background: #FFF8DC;
color: #333;
}
.header{
margin: 0;
background: #FFF8DC;
}
.kiri{
width: 70%;
float: left;
margin: auto;
background: #FFF8DC;
/*height: 420px;*/
}
.kanan{
width: 25%;
float: left;
margin: auto;
background: #FFF8DC;
/*height: 420px;*/
}
.border{
/*border: 2px solid #000;*/
height: 200px;
margin-top: 1pc;
padding-bottom: 3pc;
padding-right: 2pc;
}
.undecor{
text-decoration: none;
}
.footer{
/*width: 90%;*/
margin: auto;
height: 40px;
line-height: 40px;
background: #F0EEEE;
}
.menu{
background-color: #F0EEEE;
height: 50px;
line-height: 50px;
/*position: relative;*/
/*width: 90%;*/
/*margin: 0;*/
/*padding:0;*/
}
.menu1{
background-color: #F0EEEE;
height: 60px;
line-height: 60px;
/*position: relative;*/
/*width: 90%;*/
margin: 0;
/*padding:0 auto;*/
.akun{
float: right;
border-left: 3px solid #ffffff;
}
}
.jarak{
padding: 0 2pc;
}
.menu ul{
list-style: none;
}
.menu ul li a{
float: left;
width: 14%;
display: block;
text-align: center;
color: #A4A4A4;
text-decoration: none;
}
.menu ul li a:hover{
background-color: #DDDCDC;
display:block;
}
.menu1 ul{
list-style: none;
}
.menu1 ul li a{
float: left;
width: 14%;
display: block;
text-align: center;
color: #A4A4A4;
text-decoration: none;
}
.menu1 ul li a:hover{
background-color: #FAF9F9;
display:block;
}
.kanan p{
font-size: 12px;
margin: 0;
text-align:center;
margin: 10px;
color:#D9D8D8;
}
h3{
font-family: "Lucida Console";
font-weight: bold;
font-size: 24px;
}
p{
font-family: "Verdana";
font-size: 14px;
font-weight: lighter;
color: #ADACAC;
}
h1{
font-family: "Verdana";
font-size: 13px;
font-weight: bold;
text-align: center;
padding-top: 10px;
}
h2{
font-family: "Lucida Console";
font-weight: lighter;
font-size: 12px;
}
Hasil:
3. Source Code HTML
<!DOCTYPE html>
<html>
<head>
<title>Sign Up</title>
<link rel="stylesheet" type="text/css" href="style1.css">
</head>
<body>
<center><h2>SIGN UP FOR FREE</h2></center>
<div class="login">
<form action="#" method="POST" onSubmit="validasi()">
<div>
<label>Nama Lengkap:</label>
<input type="text" name="nama" placeholder="Enter Your Name" id="nama" maxlength="50" required />
</div>
<div>
<label>Alamat:</label>
<textarea cols="40" rows="5" name="alamat" placeholder="Enter Your Address" id="alamat" required ></textarea>
</div>
<div>
<label>Email:</label>
<input type="email" name="email" placeholder="Enter E-mail"id="email" required />
</div>
<div>
<label>No Hp:</label>
<input type="phone" name="phone" placeholder="Enter Your Phone Number" id="phone" min="11" max="13" required/>
</div>
<div>
<label>Jenis Kelamin: </label> <br/>
<input type="radio" name="gender" value="male" /> L <br/>
<input type="radio" name="gender" value="female" /> P <br/>
</div>
<div>
<label>Tanggal Lahir:</label>
<input type="date" id="birthday" name="birthday" id="birthday"
min="01-01-1900" max="31-12-2018" required />
</div>
<div>
<label>Kolom Favorit:</label>
<input type="text" name="fav" list="fav" placeholder="Teknologi,Olahraga, etc" required/>
<datalist id="fav">
<option value="Teknologi"></option>
<option value="Olahraga"></option>
<option value="Politik"></option>
<option value="Ekonomi"></option>
<option value="Lainnya"></option>
</datalist>
</div>
<div>
<label>Password:</label>
<input type="text" placeholder="Enter Password" name="pass" required>
</div>
<div>
<input type="submit" value="Sign Up" class="tombol">
</div>
</form>
</div>
</body>
<script type="text/javascript">
function validasi() {
var nama = document.getElementById("nama").value;
var alamat = document.getElementById("alamat").value;
var email = document.getElementById("email").value;
var phone = document.getElementById("phone").value;
var gender = document.getElementById("gender").value;
var birthday = document.getElementById("birthday").value;
var fav = document.getElementById("fav").value;
var maxhuruf = 50;
pola_email=/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
if (!pola_email.test(form.email.value)){
alert ('Penulisan Email tidak benar');
form.email.focus();
return false;
}
if (form.nama.value.length > maxhuruf){
alert("Batas Maksimal adalah 50 Karakter");
form.nama.focus();
return (false);
}
if (nama = "" || email="" || alamat ="" || phone ="" || gender ="" || birthday ="" || fav ="") {
alert('Anda harus mengisi data dengan lengkap !');
return (false);}
}
}
</script>
</html>
4. Source Code CSS
body {
background: #FF7F50;
font-family: "lato", cursive, sans-serif;
}
h2 {
color: #fff;
}
.login {
padding: 1em;
margin: 2em auto;
width: 17em;
background: #fff;
border-radius: 3px;
}
label {
font-size: 10pt;
color: #555;
}
input[type="text"],
input[type="email"],
input[type="phone"],
input[type="date"],
textarea {
padding: 8px;
width: 95%;
background: #efefef;
border: 0;
font-family: "lato", cursive, sans-serif;
font-size: 10pt;
margin: 6px 0px;
}
.tombol {
background: #FF7F50;
color: #fff;
border: 0;
padding: 5px 8px;
}
0 komentar:
Posting Komentar