Un code de Metehan

1937 Metehan

Ouvrir dans l'éditeur Publiez votre code

Recommandé

14 October 2023

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

Un code de Metehan

Recommandé

Formulaire de connexion

Page de contact futuriste

Un code par securefunction317

HTML

CSS

JS

Recommandé

Formulaire de connexion

Page de contact futuriste

Un code par securefunction317

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS