Latihan CSS Mata Kuliah Praktikum Desain Web
1. Membuat Alert button
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.btn{
border: none;
color: white;
padding: 14px 28px;
cursor :pointer;
}
.sukses {background-color: #4caf50;} /*Green*/
.sukses:hover{background-color: #46a049;}
.info{background-color: #2196f3;} /*Blue*/
.info:hover {background: #0b7dda;}
.peringatan{background-color: #ff9800;} /*Orange*/
.peringatan:hover{background: #e68a00;}
.bahaya{background-color: #f44336;} /*Red*/
.bahaya:hover{background: #da190b;}
.semula{background-color: #e7e7e7; color: black;} /*Gray*/
.semula:hover{background:#ddd;}
</style>
</head>
<body>
<h1> Tombol Peringatan</h1>
<button class="btn sukses">Sukses</button>
<button class="btn info">Info</button>
<button class="btn peringatan">Peringatan</button>
<button class="btn bahaya">Bahaya</button>
<button class="btn Semula">Semula</button>
</body>
</html>
Hasil :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<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: #4caf50;
color:white;
padding: 14 px 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>
</head>
<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="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name...">
<label for="Country"></label>
<select id="country" name="country">
<option value="Australia">Australia</option>
<option value="Russia Federation">Russia Federation</option>
<option value="USA">USA</option>
</select>
<input type="submit"value="submit">
</form>
</div>
</body>
</html>
Hasil :
3. Membuat Table Navigation Bar
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
body {font-family: 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: #111}
.active {background-color: #4caf50;}
</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>
Hasil :
4. Membuat Dropdown Menu
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dropdown</title>
<style>
body { font-family:arial; }
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover, .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0,2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">Dropdown</a>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li>
</ul>
<h3>Dropdown menu inside a navigation bar</h3>
<p>hover over the dropdown link to see the dropdown menu </p>
</body>
</html>
Hasil :
Tidak ada komentar:
Posting Komentar