Bootstrap Snippet js.loja using HTML CSS Bootstrap Javascript

* { box-sizing: border-box; } #nat{ text-align: center; } body { font-family: Arial, Helvetica, sans-serif; text-align: center } article{ margin:50px; } /* Style the header */ header { background-color: #000; padding: 30px; text-align: center; font-size: 35px; color: white; } /* Create two columns/boxes that floats next to each other */ /*nav*/ #nav { background: #0d1217; z-index: 10002; position: relative; width: 4em; } #nav ul { list-style: none; margin: 0; padding: 0; position: fixed; top: 1em; left: 0; } #nav ul li { padding: 0; width: 3.75em; text-align: Center; margin-bottom: 1em; } #nav ul li a { color: rgba(255, 255, 255, 0.5); text-decoration: none; font-size: 1.5em; } #nav ul li a:hover { color: white; } #nav ul li a.active { color: #19B5FE; } @media screen and (max-width: 736px) { #nav ul li { width: 3.4em; } } article { float: left; padding: 20px; width: 70%; background-color: #f1f1f1; height: 300px; /* only for demonstration, should be removed */ } /* Clear floats after the columns */ section:after { content: ""; display: table; clear: both; } /* Style the footer */ footer { background-color: #000; padding: 10px; text-align: center; color: white; } /* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */ #banner { display: -ms-flexbox; -ms-flex-pack: center; -ms-flex-align: center; padding: 3em 3em 0; -moz-align-items: center; -webkit-align-items: center; -ms-align-items: center; align-items: center; display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: flex; justify-content: center; min-height: 1vh; height: vh; position: relative; background: #ccc; background-image: url(https://imgbb.com/); background-size: cover; background-attachment: fixed; background-repeat: no-repeat; background-position: center; text-align: center; color: #FFF; } #banner:before { -moz-transition: opacity 3s ease; -webkit-transition: opacity 3s ease; -ms-transition: opacity 3s ease; transition: opacity 3s ease; -moz-transition-delay: 0.25s; -webkit-transition-delay: 0.25s; -ms-transition-delay: 0.25s; transition-delay: 0.25s; content: ''; display: block; background-color: #000; height: 0; left: 0; opacity: 0.65; position: relative; top: 0; width: 1%; z-index: 0; } #banner .inner { -moz-transform: none; -webkit-transform: none; -ms-transform: none; transform: none; -moz-transition: opacity 1s ease, transform 1s ease; -webkit-transition: opacity 1s ease, transform 1s ease; -ms-transition: opacity 1s ease, transform 1s ease; transition: opacity 1s ease, transform 1s ease; position: relative; opacity: 1; z-index: 3; padding: 0 2em; } #banner h1 { font-size: 4em; line-height: 1em; margin: 0 0 0.5em 0; padding: 0; color: #FFF; } #banner p { font-size: 1.5em; margin-bottom: 1em; } #banner a { color: #FFF; text-decoration: none; } @media screen and (max-width: 1280px) { #banner h1 { font-size: 3.5em; } } @media screen and (max-width: 736px) { #banner { background-attachment: scroll; } #banner h1 { font-size: 2.25em; } #banner p { font-size: 1.25em; } } /*galeria snippets*/ .btn:focus, .btn:active, button:focus, button:active { outline: none !important; box-shadow: none !important; } #image-gallery .modal-footer{ display: block; } .thumb{ margin-top: 15px; margin-bottom: 15px; }

//galeria-snippets// let modalId = $('#image-gallery'); $(document) .ready(function () { loadGallery(true, 'a.thumbnail'); //This function disables buttons when needed function disableButtons(counter_max, counter_current) { $('#show-previous-image, #show-next-image') .show(); if (counter_max === counter_current) { $('#show-next-image') .hide(); } else if (counter_current === 1) { $('#show-previous-image') .hide(); } } /** * * @param setIDs Sets IDs when DOM is loaded. If using a PHP counter, set to false. * @param setClickAttr Sets the attribute for the click handler. */ function loadGallery(setIDs, setClickAttr) { let current_image, selector, counter = 0; $('#show-next-image, #show-previous-image') .click(function () { if ($(this) .attr('id') === 'show-previous-image') { current_image--; } else { current_image++; } selector = $('[data-image-id="' + current_image + '"]'); updateGallery(selector); }); function updateGallery(selector) { let $sel = selector; current_image = $sel.data('image-id'); $('#image-gallery-title') .text($sel.data('title')); $('#image-gallery-image') .attr('src', $sel.data('image')); disableButtons(counter, $sel.data('image-id')); } if (setIDs == true) { $('[data-image-id]') .each(function () { counter++; $(this) .attr('data-image-id', counter); }); } $(setClickAttr) .on('click', function () { updateGallery($(this)); }); } }); // build key actions $(document) .keydown(function (e) { switch (e.which) { case 37: // left if ((modalId.data('bs.modal') || {})._isShown && $('#show-previous-image').is(":visible")) { $('#show-previous-image') .click(); } break; case 39: // right if ((modalId.data('bs.modal') || {})._isShown && $('#show-next-image').is(":visible")) { $('#show-next-image') .click(); } break; default: return; // exit this handler for other keys } e.preventDefault(); // prevent the default action (scroll / move caret) });

"js.loja"
Bootstrap 4.1.1 Snippet by raquel2020

Related: See More

Questions / Comments:

"js.loja" Bootstrap 4.1.1 Snippet by raquel2020

Related: See More

Questions / Comments:

"js.loja"
Bootstrap 4.1.1 Snippet by raquel2020