Nama : Siti Anisa
Npm : 20312035
Kelas : IF 20 DX
Tugas Desain Web
Berikut adalah hasil desain web tugas 1
<!DOCTYPE html>
<html>
<head>
<title>CSS 1</title>
<style>
body{
background-color: #09C;
}
h1{
color: white;
text-align: center;
}
p{
font-familiy: verdana;
font-size: 20px;}
</style>
</head>
<body>
<h1>MY First CSS Example</h1>
<p>This is a paragraph.</p>
</body>
</html>
Dari hasil code tersebut, maka tampilan desain nya adalah
Tugas 1 bagian 2
<!DOCTYPE html>
<html>
<head>
<style>
.center{
text-align: center;
color:red;}
</style>
</head>
<body>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
</body>
</html>
Berikut hasil desain
Berikut adalah hasil desain web tugas 2
<!DOCTYPE html>
<html>
<head>
<style>
.btn{
border: none;
color: white;
padding:14px 28px;
font-size: 16 px;
cursor: pointer;}
.succes{background-color:#090;}/*green*/
.succes:hover{background-color:#0F3;}
.info{background-color:#009;}/*Blue*/
.info:hover {background:#090;}
.warning{background-color:#F60;}/*orange*/
.warning:hover{background:#CF0;}
.danger{background-color:#F00;}/*red*/
.danger:hover{background:#900;}
.default {background-color:#999; color: black;}/*gray*/
.default:hover{background:#ddd;}
</style>
</head>
<body>
<h1>Alert Buttons</h1>
<button class="btn succes">Succes</button>
<button class="btn info">Info</button>
<button class="btn warning">Warning</button>
<button class="btn danger">Danger</button>
<button class="btn default">Default</button>
</body>
</html>
Tampilan yang akan di hasilkan di chrome
Berikut adalah hasil desain web tugas 3 <!DOCTYPE html>
<html>
<style>
input[type=text], select{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius:: 4px;
box-sizing:border-box;
}
input[type=submit]{
width: 100%;
background-color: #4ACAF50;
color:white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover{
background-color: #45a049;
}
div{
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
</style>
<body>
<h3>Using CSS to style an HTML Form</h3>
<div>
<form action="/action_page.php">
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your name..">
<label for="1name">Last Name</label>
<input type="text" id="1name" name="lastname" placeholder="Your last name..">
<label for="country">Country</label>
<select id="country" name="country">
<option value="australia">Australia</option>
<option value="canada">Canada</option>
<option value="usa">USA</option>
</select>
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>
Berikut adalah hasil desain di chrome
Berikut adalah hasil desain web tugas 4
<!DOCTYPE html>
<html>
<head>
<style>
body{font-familiy:arial;}
ul{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
background-color:#333;
}
li{
float:left;
}
li a {
display:block;
color:white;
text-align:center;
padding:14px 16px;
text-decoration:none;
}
li a:hover:not(.active){
background-color:#060;
}
.active{
background-color:#093;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li style="float:right"><a class="active" href="#about">About</a></li>
</ul>
</body>
</html>
Berikut hasil tampilan desain di chrome
Komentar