Belajar HTML
Belajar HTML
<!DOCTYPE html>
<html>
<style>
div.mycontainer {
width:100%;
overflow:auto;
div.mycontainer div {
width:33%;
float:left;
</style>
<body>
<div class="mycontainer">
<div style="background-color:#FFF4A3;">
<h2>London</h2>
</div>
<div style="background-color:#FFC0C7;">
<h2>Oslo</h2>
<p>Oslo is the capital city of Norway.</p>
</div>
<div style="background-color:#D9EEE1;">
<h1>Rome</h1>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<p>JavaScript can access an element with a specified id by using the getElementById() method:</p>
<script>
function displayResult() {
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
li a {
display: block;
color: #000;
text-decoration: none;
li {
text-align: center;
li:last-child {
border-bottom: none;
li a.active {
background-color: #04AA6D;
color: white;
li a:hover:not(.active) {
background-color: #555;
color: white;
</style>
</head>
<body>
<p>In this example, we center the navigation links and add a border to the navigation bar.</p>
<ul>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
background-color: #f1f1f1;
#navbar {
background-color: #333;
position: fixed;
top: -50px;
width: 100%;
display: block;
#navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 15px;
text-decoration: none;
font-size: 17px;
#navbar a:hover {
background-color: #ddd;
color: black;
</style>
</head>
<body>
<div id="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
</div>
<p><b>This example demonstrates how to slide down a navbar when the user starts to scroll the
page.</b></p>
<p>Lorem ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<script>
// When the user scrolls down 20px from the top of the document, slide down the navbar
document.getElementById("navbar").style.top = "0";
} else {
document.getElementById("navbar").style.top = "-50px";
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form action="/action_page.php">
<div class="form-group">
<label for="email">Email:</label>
</div>
<div class="form-group">
<label for="pwd">Password:</label>
</div>
<div class="checkbox">
</div>
</form>
</div>
</body>
</html>
<div class="row">
<div class="column">
<div class="card">
<img src="1.jpg" alt="Jane" style="width:60%">
<div class="container">
<h2>Jane Doe</h2>
<p class="title">CEO & Founder</p>
<p>Some text that describes me lorem ipsum ipsum lorem.</p>
<p>[email protected]</p>
<p><button class="button">Contact</button></p>
</div>
</div>
</div>
<div class="column">
<div class="card">
<img src="2.jpg" alt="Mike" style="width:50%">
<div class="container">
<h2>Mike Ross</h2>
<p class="title">Art Director</p>
<p>Some text that describes me lorem ipsum ipsum lorem.</p>
<p>[email protected]</p>
<p><button class="button">Contact</button></p>
</div>
</div>
</div>
Css
<style>
html {
box-sizing: border-box;
}
*:before,
*:after,
* {
box-sizing: inherit;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
padding: 16px;
border-radius: 8px; /* Optional: adds rounded corners to
the card */
}
.container {
padding: 0 8px;
}
.title {
color: grey;
}
.button {
border: none;
outline: 0;
display: inline-block;
padding: 4px;
color: rgb(184, 219, 57);
background-color: #000;
text-align: center;
cursor: pointer;
width: 50%;
border-radius: 4px; /* Optional: adds rounded corners to
the button */
}
.button:hover {
background-color: #555;
}
</style>
>
<header class="header-wrapper">
<div class="container">
<a href="https://www.pramcom/">
</a>
</div>
<div class="search-wrapper">
<div class="top-search2">
<div class="top-search-select-form">
<!-- Do not preserve the previous categories selection when on a Dictionary Page -->
</span>
<option value="advertising">Advertising</option>
<option value="alcohol-smoking">Alcohol & Smoking</option>
<option value="antiquities">Antiquities</option>
<option value="ceramics">Ceramics</option>
<option value="entertainment">Entertainment</option>
<option value="glass">Glass</option>
<option value="jewelry">Jewelry</option>
<option value="metals">Metals</option>
<option value="sports">Sports</option>
<option value="stamps">Stamps</option>
<option value="tools">Tools</option>
<option value="uncategorized">Uncategorized</option>
</select>
</div>
</div>
</form>
</div>
>
<div class="header-container navigation2">
<header class="header-wrapper">
<div class="container">
<div class="logo-wrapper col-xs-7 col-md-4 col-lg-2">
<a href="https://www.pramcom/">
<img class="logo" src="./Cag" alt="WorthPoint1
Logo">
</a>
</div>
<div class="search-wrapper">
<div class="top-search2">
<div class="filter-caret hide-filter" id="filter-caret_d"></div>
<div class="top-search-select-form">
</div>