Scribd
Upload
9 views21 pages

Belajar HTML

The document provides a comprehensive guide on various CSS and JavaScript techniques, including Flexbox layout, vertical navigation bars, and dynamic elements using JavaScript. It includes examples of HTML structures and styles for creating responsive designs and interactive features. Additionally, it demonstrates the use of Bootstrap for form creation and navigation functionalities.

Uploaded by

pramonoadi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
9 views21 pages

Belajar HTML

The document provides a comprehensive guide on various CSS and JavaScript techniques, including Flexbox layout, vertical navigation bars, and dynamic elements using JavaScript. It includes examples of HTML structures and styles for creating responsive designs and interactive features. Additionally, it demonstrates the use of Bootstrap for form creation and navigation functionalities.

Uploaded by

pramonoadi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 21

CSS Flexbox Layout Guide | CSS-Tricks

<!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>

<p>London is the capital of England.</p>

<p>London has over 13 million inhabitants.</p>

</div>

<div style="background-color:#FFC0C7;">

<h2>Oslo</h2>
<p>Oslo is the capital city of Norway.</p>

<p>Oslo has over 600.000 inhabitants.</p>

</div>

<div style="background-color:#D9EEE1;">

<h1>Rome</h1>

<h6>Rome is the capital city of Italy.</h6>

<p>Rome has almost 3 million inhabitants.</p>

</div>

</div>

</body>

</html>
<!DOCTYPE html>

<html>

<body>

<h2>Using The id Attribute in JavaScript</h2>

<p>JavaScript can access an element with a specified id by using the getElementById() method:</p>

<p1 id="myHeader">Hello World!</p1>

<button onclick="displayResult()">Change text</button>

<script>

function displayResult() {

document.getElementById("myHeader").innerHTML = "Have a nice day!";

</script>

</body>

</html>
<!DOCTYPE html>

<html>

<head>

<style>

ul {

list-style-type: none;

margin: 0;

padding: 0;

width: 200px;

background-color: #f1f1f1;

border: 1px solid #555;

li a {

display: block;

color: #000;

padding: 8px 16px;

text-decoration: none;

li {

text-align: center;

border-bottom: 3px solid #555;


}

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>

<h2>Vertical Navigation Bar</h2>

<p>In this example, we center the navigation links and add a border to the navigation bar.</p>

<ul>

<li><a class="active" href="#home">Home</a></li>

<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>

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

body {

margin: 0;

background-color: #f1f1f1;

font-family: Arial, Helvetica, sans-serif;

#navbar {

background-color: #333;

position: fixed;

top: -50px;

width: 100%;

display: block;

transition: top 0.3s;

#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>

<div style="padding:15px 15px 2500px;font-size:30px">

<p><b>This example demonstrates how to slide down a navbar when the user starts to scroll the
page.</b></p>

<p>Scroll down this frame to see the effect!</p>

<p>Scroll to the top to hide the navbar.</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

window.onscroll = function() {scrollFunction()};


function scrollFunction() {

if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {

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">

<meta name="viewport" content="width=device-width, initial-scale=1">

<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">

<h2>Vertical (basic) form</h2>

<form action="/action_page.php">

<div class="form-group">

<label for="email">Email:</label>

<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">

</div>

<div class="form-group">

<label for="pwd">Password:</label>

<input type="password" class="form-control" id="pwd" placeholder="Enter password"


name="pwd">

</div>

<div class="checkbox">

<label><input type="checkbox" name="remember"> Remember me</label>

</div>

<button type="submit" class="btn btn-default">Submit</button>

</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;
}

/* Flexbox for the row container */


.row {
display: flex; /* Use Flexbox for horizontal layout
*/
flex-wrap: nowrap; /* Allow columns to wrap on
smaller screens */
gap: 16px; /* Space between columns */
}

/* Flexbox for the column elements */


.column {
flex: 1 1 33%; /* Makes columns flexible and
ensures they are 33% on large screens */
padding: 0 8px; /* Padding between columns */
box-sizing: border-box; /* Ensures padding is included in
the width */
margin-bottom: 16px; /* Space below each column */
}

/* Media query for smaller screens */


@media screen and (max-width: 768px) {
.column {
flex: 1 1 100%; /* Stacks the columns vertically on
smaller screens */
}
}

.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 */
}

/* Image inside the card */


.card img {
width: 50%; /* Ensures images are responsive */
height: fit-content; /* Keeps aspect ratio intact
*/
border-radius: 4px; /* Optional: adds rounded corners to
the image */
}

.container {
padding: 0 8px;
}

/* Clearfix to clear floats */


.container::after,
.row::after {
content: "";
clear: both;
display: table;
}

.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>
>

<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>

<form action="https://www.wtory/search" method="get" name="searchBarForm_d" accept-


charset="UTF-8" onsubmit="return TopSearchBar.canSubmit(event)" data-role="search-form"
id="searchBarForm_d">

<div class="top-search-select-form">

<!-- Do not preserve the previous categories selection when on a Dictionary Page -->

<div class="input-container autocomplete-append">

<span class="input-wrapper " id="inputWrapper_d">

<input type="text" maxlength="100" class="form-control text-input search-input header-


search-input search-query-text" data-role="search-term" placeholder="Search for Item"
name="query" value="" id="queryText_d" autocomplete="off" aria-label="Search">

<span class="clear-keyword hidden" id="wpClearKeywordBtn_d"></span>

</span>

<select name="categories" class="form-control" id="search-selecthead-results_d" data-


role="search-category" aria-label="Categories">

<option value="" selected="selected">All Categories</option>

<option value="advertising">Advertising</option>
<option value="alcohol-smoking">Alcohol &amp; Smoking</option>

<option value="antiquities">Antiquities</option>

<option value="books-paper-magazines">Books, Paper &amp; Magazines</option>

<option value="ceramics">Ceramics</option>

<option value="coins-currency">Coins &amp; Currency</option>

<option value="entertainment">Entertainment</option>

<option value="ethnic-folk-native-american-art">Ethnic, Folk &amp; Native American Art</option>

<option value="fine-art">Fine Art</option>

<option value="firearms-and-accessories">Firearms and Accessories</option>

<option value="fraternal-political-organizations">Fraternal, Political, Organizations</option>

<option value="furniture-furnishings">Furniture &amp; Furnishings</option>

<option value="glass">Glass</option>

<option value="jewelry">Jewelry</option>

<option value="metals">Metals</option>

<option value="militaria-weapons">Militaria &amp; Weapons</option>

<option value="natural-history">Natural History</option>

<option value="sports">Sports</option>

<option value="stamps">Stamps</option>

<option value="textiles-clothing-accessories">Textiles, Clothing &amp; Accessories</option>

<option value="tools">Tools</option>

<option value="uncategorized">Uncategorized</option>

</select>

<button class="wpButton yellowBtn primaryBtn" form="searchBarForm_d"


type="submit"><i class="fas fa-search" aria-label="Search"></i></button>

</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>

<form action="https://pramonoadi.epizy.com/search" method="get"


name="searchBarForm_d" accept-charset="UTF-8" onsubmit="return
TopSearchBar.canSubmit(event)" data-role="search-form"
id="searchBarForm_d">

<div class="top-search-select-form">

<!-- Do not preserve the previous categories selection when


on a Dictionary Page -->

<div class="input-container autocomplete-append">


<span class="input-wrapper " id="inputWrapper_d">
<input type="text" maxlength="100" class="form-
control text-input search-input header-search-input search-query-text"
data-role="search-term" placeholder="Search for Item" name="query"
value="" id="queryText_d" autocomplete="off" aria-label="Search">
<span class="clear-keyword hidden"
id="wpClearKeywordBtn_d"></span>
</span>

<select name="categories" class="form-control"


id="search-selecthead-results_d" data-role="search-category" aria-
label="Categories">
<option value="" selected="selected">All Categories</option>
<option value="advertising">Advertising</option>
<option value="alcohol-smoking">Alcohol &amp; Smoking</option>
<option value="antiquities">Antiquities</option>
<option value="books-paper-magazines">Books, Paper &amp; Magazines
<option value="fine-art">Fine Art</option>
<option value="firearms-and-accessories">Firearms and
Accessories</option>
<
<option value="textiles-clothing-accessories">Textiles, Clothing &amp;
Accessories</option>
<option value="tools">Tools</option>
<option value="uncategorized">Uncategorized</option>
</select>

<button class="wpButton yellowBtn primaryBtn"


form="searchBarForm_d" type="submit"><i class="fas fa-search" aria-
label="Search"></i></button>
</div>
</div>
</form>

</div>

You might also like