Un código de Metehan

Abrir en el editor Publica tu código

Recomendado

20 June 2024

Animación de alternancia de triángulos CSS

24 February 2024

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

CSS

/*--------------------------------------------------------------
/** 1. Normalize
--------------------------------------------------------------*/
html, body {
  position: relative;
  width: 100%;
  height: 100%;
  font-family: 'Poppins', 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: #ffdd00;
  color: #333;
}
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: 'Poppins', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 19px;
  line-height: 180%;
  color: #555555;
}
body.no-scroll {
    overflow: hidden;
}
a {
  color: #333;
}
a:hover {
  color: #333;
  text-decoration: none;
}
.light a {
  color: #f2f2f2;
}
.light a:hover,
.light a:active,
.light a:focus {
  color: #f2f2f2;
}
.light b, .light strong {
  color: #f2f2f2;
}
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: #333;
}
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(70, 150, 230, 0.8);
  color: #fff;
  text-shadow: none;
}
::-moz-selection {
  background: rgba(70, 150, 230, 0.8);
  color: #fff;
  text-shadow: none;
}
::-webkit-input-placeholder {
  color: #757575;
  -webkit-transition: color .2s;
  transition: color .2s;
}
::-moz-placeholder {
  color: #757575;
  -webkit-transition: color .2s;
  transition: color .2s;
}
:-ms-input-placeholder {
  color: #757575;
  -webkit-transition: color .2s;
  transition: color .2s;
}
::placeholder {
  color: #757575;
  -webkit-transition: color .2s;
  transition: color .2s;
}

.nav {
  position: fixed;
  width: 200px;
  bottom: 0;
  right: 200px;
  padding: 20px;
  border-radius: 10px 0 0 10px;
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  justify-content: space-between;
  color: #e8e8e8;
  transform: translate3d(100%, 0, 0);
  transition: transform 0.3s ease-in;
}
.nav.show {
  transform: translate3d(0, 0, 0);
}
.btn {
  display: block;
  padding: 0px 10px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 8px;
  background: #4596e6;
  color: #fff;
  box-shadow: rgba(0,0,0,0.1) 0px 0px 20px;
  transition: background 0.3s ease-out;
}
.btn:hover {
  background: #74b2ee;
}
.devices {
  display: flex;
}
.devices a {
  padding: 2px;
}
#template-selector {
  background: #222;
}
#iframe-view {
  margin: auto;
  background: #fff;
  height: 100vh;
}
body {
  overflow: hidden;
  text-align: center;
  background: #222222;
}
.btn-settings {
  padding: 12px;
  border: 5px solid #fff;
  width: 150px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  border-radius: 50px;
  transition: transform 0.3s ease-out;
}
.btn-settings:hover {
  transform: scale(1.1);
  color: #fff;
}
/* Kaldırıldı */"
@media only screen and (max-width: 991px) {
  a.device {
    display:none;
  }
}

JS

(function($) {

"use strict";

$(document).ready(function(){

// Nav menüsünü göster/gizle butonu (aktif değil şu anda)
    $('.btn-settings').on('click', function(e) {
      e.preventDefault();
      $('#demo-page-nav').toggleClass('show');
    });

// Sayfa yüklendiğinde nav menüsünü göster
    setTimeout(function() {
      $('#demo-page-nav').addClass('show');
    }, 1000);

// Template seçici dropdown değişikliği
    $('#template-selector').on('change', function() {
      var demo_url = this.value;
      var product_url = $(this).find(':selected').data('product');

$("#iframe-view").attr("src", demo_url);
      $("#product-link").attr("href", product_url);
    });

// Cihaz boyutu değiştirme
    $('a.device').click(function(e){
      e.preventDefault();
      var screen_size = $(this).attr('href');
      var iframe_width = 640;
      var iframe_height = 600;

// Aktif cihaz butonunu vurgulama
      $('a.device').removeClass('active');
      $(this).addClass('active');

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 boyutunu güncelle
      $('#iframe-view').css({
        "width": iframe_width,
        "height": iframe_height,
        "transition": "all 0.3s ease"
      });

// Telefon boyutunda ise ekranı ortala
      if (screen_size === "#phone") {
        $('#iframe-view').css({
          "margin": "0 auto",
          "display": "block"
        });
      } else {
        $('#iframe-view').css({
          "margin": "auto"
        });
      }
    });

// Satın alma butonu kaldırıldı

});

})(jQuery);

Un código de Metehan

Recomendado

galería de animales

Animación de alternancia de triángulos CSS

Caja de color

HTML

CSS

JS

Recomendado

galería de animales

Animación de alternancia de triángulos CSS

Caja de color

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS