Un codice di Metehan

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

30 March 2025

Codice della barra di navigazione HTML CSS

30 December 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 codice di Metehan

Consigliato

Un codice di ytr3d3

Codice della barra di navigazione HTML CSS

Un codice di cleancloud199

HTML

CSS

JS

Consigliato

Un codice di ytr3d3

Codice della barra di navigazione HTML CSS

Un codice di cleancloud199

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS