WEBLEB
Startseite
Editor
Anmelden
Pro
Deutsch
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Ein Code von Metehan
1134
Metehan
Im Editor öffnen
Veröffentlichen Sie Ihren Code
Empfohlen
27 June 2025
Ein Code von Mete
30 December 2024
Ein Code von cleancloud199
3 May 2025
Ein Code von Mete
HTML
Copy
Live Demo - Yenilenmiş Versiyon
CSS
Copy
/*-------------------------------------------------------------- /** 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
Copy
(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);