Sitio web del blog de Daniel

Abrir en el editor Publica tu código ¿Necesitas un sitio web?

Recomendado

28 November 2024

Página de destino para un negocio de bicicletas

29 May 2025

<!DOCTYPE html>
<html>
<head>
	<title>Live Demo - Redesigned</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="robots" content="noindex, nofollow" />
  <link rel="stylesheet" href="styles-new.css">
</head>
<body>

CSS

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

(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);

Sitio web del blog de Daniel

Recomendado

Efecto de la carta

Página de destino para un negocio de bicicletas

Un código de mathieu.ratro

HTML

CSS

JS

Recomendado

Efecto de la carta

Página de destino para un negocio de bicicletas

Un código de mathieu.ratro

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS