WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Sitio web del blog de Daniel
14241
Metehan
Abrir en el editor
Publica tu código
Recomendado
23 April 2025
Generador de contraseñas de SENAPI
8 September 2024
Pantalla de carga de puntos animados
5 August 2025
Lista de tarjetas de empresa: ejemplo de HTML y CSS
HTML
Copy
Live Demo - Redesigned
Live Demo - Redesigned
CSS
Copy
/*-------------------------------------------------------------- /** 1. Normalize --------------------------------------------------------------*/ html, body { position: relative; width: 100%; height: 100%; font-family: 'Poppins', 'Montserrat', sans-serif; } html { font-size: 100%; font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; font-style: normal; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility } article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary { display: block; } audio, canvas, progress, video { display: inline-block; vertical-align: baseline; } audio:not([controls]) { display: none; height: 0; } [hidden], template { display: none; } a { background-color: transparent; outline: 0; text-decoration: none; cursor: pointer; -webkit-text-decoration-skip: objects; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; } b, strong, .strong { font-weight: bolder; } dfn { font-style: italic; } mark { background-color: #ffd166; color: #2b2d42; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } h1 { font-size: 2em; margin: 0.67em 0; } h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dd, small { padding: 0; } img { border: 0; } svg:not(:root) { overflow: hidden; display: block; } figure { margin: 1em 40px; } hr { height: 0; overflow: visible; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } pre { overflow: auto; } code, kbd, pre, samp { font-family: 'Fira Code', 'Consolas', monospace; font-size: 1em; } blockquote::before, blockquote::after, q::before, q::after { content: ''; } blockquote, q { quotes: "" ""; } button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; } button, input { overflow: visible; } button, select { text-transform: none; } select { text-indent: 45px; } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; } button[disabled], html input[disabled] { cursor: default; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } input { line-height: normal; } input[type="checkbox"], input[type="radio"] { padding: 0; outline: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } input[type="search"] { -webkit-appearance: textfield; outline-offset: -2px; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } fieldset { border: 1px solid #8d99ae; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } legend { border: 0; padding: 0; } textarea { overflow: auto; } optgroup { font-weight: bold; } table { border-collapse: collapse; border-spacing: 0; width: 100%; } td, th { padding: 0; } /*-------------------------------------------------------------- /** 2. Base Styles --------------------------------------------------------------*/ *, *::before, *::after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } html { box-sizing: border-box; } body { font-family: 'Poppins', sans-serif; font-style: normal; font-weight: normal; font-size: 18px; line-height: 170%; color: #8d99ae; } body.no-scroll { overflow: hidden; } a { color: #ef233c; } a:hover { color: #d90429; text-decoration: none; } .light a { color: #edf2f4; } .light a:hover, .light a:active, .light a:focus { color: #ffffff; } .light b, .light strong { color: #ffffff; } ul, ol { margin-top: 0; margin-bottom: 10px; margin-left: 0; padding: 0; padding-left: 30px; } ul ul, ol ul, ul ol, ol ol { margin-top: 5px; margin-bottom: 0; } ul li, ol li { margin-bottom: 5px; outline: 0; } ul li.active a{ color: #ef233c; } ul li:last-child, ol li:last-child { margin-bottom: 0; } .list-unstyled { padding-left: 0; list-style: none; } .list-inline { padding-left: 0; list-style: none; margin-left: -0.5rem; } .list-inline > li { display: inline-block; padding-left: 1rem; padding-right: 1rem; } dl { margin-top: 0; margin-bottom: 2rem; } dt, dd { line-height: 1.42857143; } dt { font-weight: bold; } dd { margin-left: 0; } button, input, select, textarea { font-family: inherit; font-size: inherit; line-height: inherit; outline: 0; } figure { margin: 0; } img { display: inline-block; border: 0; max-width: 100%; height: auto; vertical-align: middle; } ::selection { background: rgba(239, 35, 60, 0.8); color: #edf2f4; text-shadow: none; } ::-moz-selection { background: rgba(239, 35, 60, 0.8); color: #edf2f4; text-shadow: none; } ::-webkit-input-placeholder { color: #8d99ae; /* WebKit browsers */ -webkit-transition: color .2s; transition: color .2s; } ::-moz-placeholder { color: #8d99ae; /* Mozilla Firefox 19+ */ -webkit-transition: color .2s; transition: color .2s; } :-ms-input-placeholder { color: #8d99ae;/* Internet Explorer 10+ */ -webkit-transition: color .2s; transition: color .2s; } ::placeholder { color: #8d99ae; -webkit-transition: color .2s; transition: color .2s; } .nav { position: fixed; width: 220px; bottom: 0; right: 200px; padding: 22px; border-radius: 12px 0 0 12px; display: flex; gap: 16px; flex-wrap: wrap; justify-content: space-between; color: #edf2f4; transform: translate3d(100%, 0, 0); transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .nav.show { transform: translate3d(0, 0, 0); } .btn { display: block; padding: 0px 12px; font-size: 14px; font-weight: 700; text-transform: uppercase; border-radius: 10px; background: #ef233c; color: #edf2f4; box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .btn:hover { background: #d90429; transform: translateY(-3px); } .devices { display: flex; } .devices a { padding: 3px; } #template-selector { background: #2b2d42; color: #edf2f4; border: 2px solid #8d99ae; } #iframe-view { margin: auto; background: #ffffff; height: 100vh; box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px; } body { overflow: hidden; text-align: center; background: #2b2d42; } .btn-settings { padding: 14px; border: 4px solid #edf2f4; width: 160px; height: 65px; display: flex; justify-content: center; align-items: center; color: #edf2f4; border-radius: 50px; transition: all 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6); } .btn-settings:hover { transform: scale(1.1) rotate(2deg); color: #ffffff; border-color: #ffffff; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); } @media only screen and (max-width: 991px) { a.device { display:none; } }
JS
Copy
(function($) { "use strict"; $(document).ready(function(){ // Add animation effect on page load setTimeout(function() { $('#iframe-view').css('opacity', '0').animate({ opacity: 1 }, 800); }, 200); $('#template-selector').on('change', function() { var demo_url = this.value; var product_url = $(this).find(':selected').data('product'); $("#iframe-view").css('opacity', '0.5'); setTimeout(function() { $("#iframe-view").attr("src", demo_url).animate({ opacity: 1 }, 600); }, 300); }); $('a.device').click(function(e){ e.preventDefault(); var screen_size = $(this).attr('href'); var iframe_width = 640; var iframe_height = 600; switch(screen_size) { case '#desktop': iframe_width = "100%"; iframe_height = "100%"; break; case '#laptop': iframe_width = "1280px"; iframe_height = "1024px"; break; case '#tab': iframe_width = "1024px"; iframe_height = "1366px"; break; default: case '#phone': iframe_width = "375px"; iframe_height = "812px"; break; } $('#iframe-view').animate({ opacity: 0.7 }, 200, function() { $(this).attr("width", iframe_width).attr("height", iframe_height); $(this).animate({ opacity: 1 }, 400); }); }); // Optional: Display navigation when user moves mouse to bottom right $(document).on('mousemove', function(e) { var pageWidth = $(window).width(); var pageHeight = $(window).height(); if (e.pageX > pageWidth - 100 && e.pageY > pageHeight - 100) { $('#demo-page-nav').addClass('show'); } else if (e.pageX < pageWidth - 250 || e.pageY < pageHeight - 150) { $('#demo-page-nav').removeClass('show'); } }); }); })(jQuery);