Un código de Metehan

1141 Metehan

Abrir en el editor Publica tu código

Recomendado

21 October 2024

Efectos del menú desplegable

25 November 2024

Sitio web responsivo de datos de estudiantes

19 May 2025

Interfaz de usuario de ondulación 3D

HTML

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

Recomendado

Efectos del menú desplegable

Sitio web responsivo de datos de estudiantes

Interfaz de usuario de ondulación 3D

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS