Ein Code von Metehan

1526 Metehan

Im Editor öffnen Veröffentlichen Sie Ihren Code

Empfohlen

26 April 2025

Ein Code von lebronpaulsuarezz

12 April 2025

Ein Code von Dossousandrin

19 October 2024

Animierte HTML- und CSS-Eingabe

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

Empfohlen

Ein Code von lebronpaulsuarezz

Ein Code von Dossousandrin

Animierte HTML- und CSS-Eingabe

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS