WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Un código de Metehan
1336
Metehan
Abrir en el editor
Publica tu código
Recomendado
25 November 2025
Camino de escape
29 May 2025
Página de equipos - Diseño futurista
7 December 2024
Un código de efficientlogic648
HTML
Copy
Live Demo
CSS
Copy
/*-------------------------------------------------------------- /** 1. Normalize --------------------------------------------------------------*/ html, body { position: relative; width: 100%; height: 100%; font-family: Source Sans Pro, Roboto,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: #ff0; color: #111; } 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: Courier, 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 #c0c0c0; 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: Source Sans Pro; font-style: normal; font-weight: normal; font-size: 19px; line-height: 180%; color: #58a4b0; } body.no-scroll { overflow: hidden; } a { color: #58a4b0; } a:hover { color: #a0d2db; text-decoration: none; } .light a { color: #fff; } .light a:hover, .light a:active, .light a:focus { color: #fff; } .light b, .light strong { color: #fff; } 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: #58a4b0; } 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(88,164,176,0.8); color: #fff; text-shadow: none; } ::-moz-selection { background: rgba(88,164,176,0.8); color: #fff; text-shadow: none; }
JS
Copy
(function($) { "use strict"; $(document).ready(function(){ // Toggle navigation menu setTimeout(function() { $('#demo-page-nav').addClass('show'); setTimeout(function() { $('#demo-page-nav').removeClass('show'); }, 5000); }, 2000); // Add toggle functionality with hover $(document).on('mousemove', function(e) { if (e.clientX > (window.innerWidth - 250)) { $('#demo-page-nav').addClass('show'); } else if (e.clientX < (window.innerWidth - 400)) { $('#demo-page-nav').removeClass('show'); } }); // Device preview handlers $('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').css({ "width": iframe_width, "height": iframe_height, "transition": "width 0.5s ease, height 0.5s ease" }); }); // Handle window resize $(window).resize(function() { if (window.innerWidth < 768) { $('#iframe-view').css({ "width": "100%", "height": "100%" }); } }); // Highlight active device button $('a.device').click(function() { $('a.device').removeClass('active'); $(this).addClass('active'); }); }); })(jQuery);