Un codice di Metehan

1528 Metehan

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

22 August 2025

Commento segnaposto codice HTML

28 June 2025

Modello HTML per il sito web di noleggio biciclette a Miami

27 January 2025

Un sito di giornali reattivo

HTML

<!DOCTYPE html>
<html>
<head>
	<title>Yeniden Tasarım Demo</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>

<div id="demo-page-nav" class="nav">
  <div class="devices">
    <a href="#desktop" class="device" title="Masaüstü Görünüm">
      <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24">
        <path fill="currentColor" d="M19 2H5a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h3v2H5a1 1 0 0 0 0 2h14a1 1 0 0 0 0-2h-3v-2h3a3 3 0 0 0 3-3V5a3 3 0 0 0-3-3Zm-5 18h-4v-2h4Zm6-5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-1h16Zm0-3H4V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1Z"/>
      </svg>
    </a>
    <a href="#laptop" class="device" title="Dizüstü Görünüm">
      <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24">
        <path fill="currentColor" d="M21 14h-1V7a3 3 0 0 0-3-3H7a3 3 0 0 0-3 3v7H3a1 1 0 0 0-1 1v2a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-2a1 1 0 0 0-1-1ZM6 7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v7H6Zm14 10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-1h16Z"/>
      </svg>
    </a>
    <a href="#tab" class="device" title="Tablet Görünüm">
      <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24">
        <path fill="currentColor" d="M17 2H7a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V5a3 3 0 0 0-3-3Zm1 17a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1Zm-5.29-2.71a1 1 0 0 0-.91-.29l-.18.06a.76.76 0 0 0-.18.09l-.15.12a1 1 0 0 0-.21.33a1 1 0 0 0 .21 1.09a1.46 1.46 0 0 0 .33.22a1 1 0 0 0 1.09-.22A1 1 0 0 0 13 17a.84.84 0 0 0-.08-.38a1.15 1.15 0 0 0-.21-.33Z"/>
      </svg>
    </a>
    <a href="#phone" class="device" title="Telefon Görünüm">
      <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24">
        <path fill="currentColor" d="M16 2H8a3 3 0 0 0-3 3v14a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V5a3 3 0 0 0-3-3Zm1 17a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1v-1h10Zm0-3H7V5a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1Z"/>
      </svg>
    </a>
  </div>
  <a id="toggle-btn" class="btn-settings" title="Ayarlar">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
      <path fill="currentColor" d="M12 8a4 4 0 1 0 4 4a4 4 0 0 0-4-4Zm0 6a2 2 0 1 1 2-2a2 2 0 0 1-2 2Zm8.66-3.06l-2-3.46a1 1 0 0 0-1.73 0l-2 3.46a1 1 0 0 0 0 1l2 3.46a1 1 0 0 0 1.73 0l2-3.46a1 1 0 0 0 0-1Zm-1.73 3l-1.14-2l1.14-2l1.14 2Zm-15.59-3a1 1 0 0 0 0 1l2 3.46a1 1 0 0 0 1.73 0l2-3.46a1 1 0 0 0 0-1l-2-3.46a1 1 0 0 0-1.73 0Zm2.86-2l1.14 2l-1.14 2l-1.14-2Z"/>
    </svg>
    Ayarlar
  </a>
</div>

CSS

/*--------------------------------------------------------------
/** 1. Normalize
--------------------------------------------------------------*/
html, body {
  position: relative;
  width: 100%;
  height: 100%;
  font-family: 'Source Sans Pro', 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: #ff0;
  color: #111;
}
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: 'Source Sans Pro', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 19px;
  line-height: 180%;
  color: #5a5a5a;
  /* Yeni arka plan rengi */
  background: #2c3e50;
}
body.no-scroll {
    overflow: hidden;
}
a {
  /* Link rengi değiştirildi */
  color: #e67e22;
}
a:hover {
  /* Hover rengi değiştirildi */
  color: #d35400;
  text-decoration: none;
}
.light a {
  color: #fff;
}
.light a:hover,
.light a:active,
.light a:focus {
  color: #fff;
}
.light b, .light strong {
  color: #fff;
}
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{
  /* Aktif link rengi değiştirildi */
  color: #3498db;
}
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 {
  /* Seçim rengi değiştirildi */
  background: rgba(52, 152, 219, 0.8);
  color: #fff;
  text-shadow: none;
}
::-moz-selection {
  /* Firefox için seçim rengi değiştirildi */
  background: rgba(52, 152, 219, 0.8);
  color: #fff;
  text-shadow: none;
}
::-webkit-input-placeholder {
  /* Placeholder rengi değiştirildi */
  color: #7f8c8d;
  -webkit-transition: color .2s;
  transition: color .2s;
}
::-moz-placeholder {
  /* Firefox placeholder rengi değiştirildi */
  color: #7f8c8d;
  -webkit-transition: color .2s;
  transition: color .2s;
}
:-ms-input-placeholder {
  /* IE placeholder rengi değiştirildi */
  color: #7f8c8d;
  -webkit-transition: color .2s;
  transition: color .2s;
}
::placeholder {
  /* Genel placeholder rengi değiştirildi */
  color: #7f8c8d;
  -webkit-transition: color .2s;
  transition: color .2s;
}

/* Navigasyon menüsü stillemesi (renkleri değiştirildi) */
.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;
  /* Metin rengi değiştirildi */
  color: #ecf0f1;
  transform: translate3d(100%, 0, 0);
  transition: transform 0.3s ease-in;
  /* Navigasyon arkaplanı değiştirildi */
  background-color: rgba(44, 62, 80, 0.85);
}
.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;
  /* Buton rengi değiştirildi */
  background: #9b59b6;
  color: #fff;
  box-shadow: rgba(0,0,0,0.1) 0px 0px 20px;
  transition: background 0.3s ease-out;
}
.btn:hover {
  /* Buton hover rengi değiştirildi */
  background: #8e44ad;
}
.devices {
  display: flex;
}
.devices a {
  padding: 2px;
  /* Icon renklerini değiştir */
  color: #ecf0f1;
}
.devices a:hover {
  /* Icon hover renklerini değiştir */
  color: #3498db;
}
#template-selector {
  /* Select arkaplanı değiştirildi */
  background: #34495e;
  color: #ecf0f1;
}
#iframe-view {
  margin: auto;
  background: #fff;
  height: 100vh;
}
body {
  overflow: hidden;
  text-align: center;
  /* Body arkaplanı değiştirildi */
  background: #2c3e50;
}
.btn-settings {
  padding: 12px;
  /* Çerçeve rengi değiştirildi */
  border: 5px solid #ecf0f1;
  width: 150px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* Metin rengi değiştirildi */
  color: #ecf0f1;
  border-radius: 50px;
  transition: transform 0.3s ease-out;
}
.btn-settings:hover {
  transform: scale(1.1);
  /* Hover metin rengi değiştirildi */
  color: #3498db;
}

@media only screen and (max-width: 991px) {
  a.device {
    display: none;
  }
}

JS

Consigliato

Commento segnaposto codice HTML

Modello HTML per il sito web di noleggio biciclette a Miami

Un sito di giornali reattivo

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS