CSS

Go to Top

Coding / Agustus 28, 2020

<style type=”text/css”> .go-top { position: fixed; bottom: 2em; left: 2em; text-decoration: none; color: white; background-color: rgba(0, 0, 0, 0.3); font-size: 12px; padding: 1em; display: none; } .go-top:hover { background-color: rgba(0, 0, 0, 0.6); } </style> <!– gototop –> <script type=”text/javascript”> $(document).ready(function () { $(‘[data-toggle=”offcanvas”]’).click(function () { $(‘.row-offcanvas’).toggleClass(‘active’) }); }); $(document).ready(function() { // Show or hide …

Go to Top Selengkapnya »

Mouse Cursor

Coding / Agustus 28, 2020

auto crosshair default e-resize grab help move n-resize ne-resize nw-resize pointer progress s-resize se-resize sw-resize text w-resize wait not-allowed no-drop <span style=”cursor:auto”>auto</span><br> <span style=”cursor:crosshair”>crosshair</span><br> <span style=”cursor:default”>default</span><br> <span style=”cursor:e-resize”>e-resize</span><br> <span style=”cursor:grab”>grab</span><br> <span style=”cursor:help”>help</span><br> <span style=”cursor:move”>move</span><br> <span style=”cursor:n-resize”>n-resize</span><br> <span style=”cursor:ne-resize”>ne-resize</span><br> <span style=”cursor:nw-resize”>nw-resize</span><br> <span style=”cursor:pointer”>pointer</span><br> <span style=”cursor:progress”>progress</span><br> <span style=”cursor:s-resize”>s-resize</span><br> <span style=”cursor:se-resize”>se-resize</span><br> <span style=”cursor:sw-resize”>sw-resize</span><br> <span style=”cursor:text”>text</span><br> <span style=”cursor:w-resize”>w-resize</span><br> <span …

Mouse Cursor Selengkapnya »

Create Skew CSS

Coding / Agustus 28, 2020

content: ”; display: block; position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; left: 0; transform: skewX(-30deg); background: #8bb0c6;

Image Cover Any Device

Coding / Agustus 28, 2020

<section id=”contactform” style=”background-image: url(img/contact-bg.jpg); background-size: cover;position: fixed;top: 0px;right: 0px;bottom: 0px;left: 0px;”>

Maps with Marker

Coding / Agustus 28, 2020

<!DOCTYPE html> <html> <head> <title>Add Marker to Map</title> <meta name=”viewport” content=”initial-scale=1.0, user-scalable=no”> <meta charset=”utf-8″> <style> html, body, #map-canvas { height: 90%; margin: 0px; padding: 0px } </style> <script src=”https://maps.googleapis.com/maps/api/js?v=3.exp”></script> <script src=”https://code.jquery.com/jquery-1.11.1.min.js”></script> <script> var map; function initialize() { var mapOptions = { zoom: 8, center: new google.maps.LatLng(1.288633, 103.837534) }; map = new google.maps.Map(document.getElementById(‘map-canvas’), mapOptions); } google.maps.event.addDomListener(window, …

Maps with Marker Selengkapnya »

List Style Counter

Coding / Agustus 28, 2020

2 TITLE 2.1 2.2 2.3 <style type=”text/css”> .custom ol { counter-reset: item; padding-left: 0px; } .custom li { display: block; margin-bottom: 8px; margin-left: 40px; } .custom li:before { content: counters(item, “.”) ” “; counter-increment: item; margin-left: -45px; margin-right: 20px; } .custom ol > li.hehe:before { content: “Section ” counter(item); font-weight: bold; font-size: 18px; margin-left: -5px; …

List Style Counter Selengkapnya »

Custom Google Translate

Coding / Agustus 28, 2020

<script type=”text/javascript”> function googleTranslateElementInit() { new google.translate.TranslateElement({pageLanguage: ‘en’, includedLanguages: ‘en,ms’, layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, ‘google_translate_element’); } </script> <script type=”text/javascript” src=”//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit”></script> <div id=”google_translate_element”></div> <style type=”text/css”> .goog-te-gadget-simple{ border: 0; border-radius: 4px; padding: 4px 8px !important; color: white; height: auto; font-size: 1.2em; background-color: #0d47a1 !important;border:0px !important;margin-top: 10px !important;color: #fff !important; } .goog-te-menu-value{ color: #fff !important; } .goog-te-gadget-icon{ display: none; } …

Custom Google Translate Selengkapnya »

Bootstrap 5 Columns

Coding / Agustus 29, 2020

.col-xs-5ths, .col-sm-5ths, .col-md-5ths, .col-lg-5ths { position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; } .col-xs-5ths { width: 20%; float: left; } @media (min-width: 768px) { .col-sm-5ths { width: 20%; float: left; } } @media (min-width: 992px) { .col-md-5ths { width: 20%; float: left; } } @media (min-width: 1200px) { .col-lg-5ths { width: 20%; float: left; …

Bootstrap 5 Columns Selengkapnya »

×