Online HTML CSS JavaScript editörü nasıl olmuş

09-10-2022, 18:08:16

#1

WebAli

Merhaba arkadaşlar

Online kod editörü yaptım nasıl olmuş yorumlarınızı bekliyorum. Deneme de yapabilirsiniz. Önerilerinizi bekliyorum.

https://onlinehtmlcssjavascripteditor.blogspot.com
09-10-2022, 18:16:38

#2

esrefyasa

oldukça iyi eline sağlık ^^
09-10-2022, 18:20:27

#3

~~Saitama~~

Üyeliği durduruldu

çok iyi ama ilerde umarım bu tarz olur
09-10-2022, 18:28:52

#4

ycanturk

Belirli bir süre aralığında auto start ve tagleri otomatik kapatma özelliği eklenebilir.
09-10-2022, 18:30:50

#5

~~Saitama~~

Üyeliği durduruldu

sizin sitede kodlarla satürn yaptım
09-10-2022, 18:33:06

#6

WebAli

Saitama adlı üyeden alıntı: mesajı görüntüle

sizin sitede kodlarla satürn yaptım

Çok iyi 🤣🤣
09-10-2022, 18:34:35
~~Saitama~~
Üyeliği durduruldu
WebAli adlı üyeden alıntı: mesajı görüntüle
Çok iyi 🤣🤣
dur bak en iyisini yaptım
Bunu kendin dene hareket ediyor
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Saturn</title>
     <style>
* {
  padding: 0;
  margin: 0;
}
body {
  padding: 0;
  margin: 20px 0 0 20px;
  background: #000;
}
.picture {
  width: 360px;
  height: 476px;
  position: relative;
  background: #f2f2f2;
  overflow: hidden;
  border-radius: 10px;
}
.moon {
  width: 120px;
  height: 120px;
  border-radius: 100%;
  background: #ffe8b0;
  position: absolute;
  top: 10px;
  right: -10px;
  filter: drop-shadow(0 0 10px #e9dab1) blur(1px);
}
.fragrans {
  border-radius: 50% 50% 3px 5px;
  height: 10px;
  transform: rotate(35deg);
  position: absolute;
  z-index: 2;
}
.fragrans1 {
  width: 200px;
  box-shadow: 0 -12px 0 5px #716046;
  top: 47px;
  left: 77px;
}
.fragrans2 {
  width: 180px;
  box-shadow: 0 -10px 0 5px #716046;
  top: 43px;
  left: -60px;
}
.flower {
  width: 24px;
  height: 8px;
  position: absolute;
  z-index: 19;
  transform: rotate(29deg);
  border-radius: 10px;
}
.flower::before,
.flower::after {
  content: '';
  width: 24px;
  height: 8px;
  position: absolute;
  border-radius: 10px;
  background: #efc16e;
}
.flower::after {
  left: 2px;
  transform: rotate(90deg);
}
.flower.light::after,
.flower.light::before {
  background: #efd9a8;
}
.flower1 {
  left: 59px;
  top: -12px;
}
.flower2 {
  left: 48px;
  top: 2px;
  z-index: 18;
}
.flower3 {
  left: 45px;
  top: -12px;
  transform: rotate(59deg) scale(0.8);
}
.flower4 {
  left: 28px;
  top: 9px;
}
.flower5 {
  left: 47px;
  top: 12px;
  z-index: 18;
}
.flower6 {
  left: 10px;
  top: 14px;
  z-index: 18;
  transform: scale(0.8);
}
.flower7 {
  left: 23px;
  top: 26px;
}
.flower8 {
  left: 53px;
  top: 18px;
}
.flower9 {
  left: 37px;
  top: 38px;
  z-index: 18;
}
.flower10 {
  left: 14px;
  top: 48px;
  z-index: 18;
}
.flower11 {
  left: 4px;
  top: 31px;
  z-index: 18;
}
.flower12 {
  left: -1px;
  top: 45px;
  transform: scale(0.9);
}
.flower13 {
  left: 25px;
  top: 53px;
  transform: scale(0.9);
}
.branch {
  width: 50px;
  height: 4px;
  background: #716046;
  border-radius: 4px;
  position: absolute;
  z-index: 9;
}
.branch1 {
  left: 10px;
  top: 10px;
  transform: rotate(59deg);
}
.branch2 {
  width: 40px;
  left: 95px;
  top: 7px;
  transform: rotate(59deg);
}
.branch3 {
  width: 40px;
  left: 117px;
  top: -28px;
  transform: rotate(-59deg);
}
.flower21 {
  left: 100px;
  top: 8px;
  transform: scale(0.9);
}
.flower22 {
  left: 114px;
  top: -5px;
  transform: scale(0.8);
}
.flower23 {
  left: 118px;
  top: 15px;
  z-index: 18;
  transform: rotate(-59deg);
}
.flower24 {
  left: 134px;
  top: 2px;
  transform: rotate(-59deg) scale(0.8);
}
.flower25 {
  left: 135px;
  top: -38px;
  transform: rotate(-30deg) scale(0.6);
}
.flower26 {
  left: 116px;
  top: -49px;
  z-index: 18;
  transform: rotate(-49deg) scaleX(0.8);
}
.flower27 {
  left: 138px;
  top: -60px;
  z-index: 18;
  transform: scale(0.8);
}
.flower28 {
  left: 120px;
  top: -29px;
  transform: rotate(-38deg);
}
.flower29 {
  left: 127px;
  top: -60px;
  transform: scale(0.8);
}
.leaf {
  width: 29px;
  height: 28px;
  background: #4e635c;
  transform: rotate(75deg);
  border-radius: 0 130px 0 200px;
  position: absolute;
  z-index: -1;
}
.leaf::after {
  content: '';
  width: 8px;
  height: 3px;
  background: #716046;
  border-radius: 4px;
  position: absolute;
  top: 26px;
  left: 24px;
  transform: rotate(45deg);
  z-index: -19;
}
.leaf21 {
  left: 107px;
  top: -53px;
  transform: rotate(17deg);
}
.leaf31 {
  left: 184px;
  top: -45px;
}
.leaf32 {
  left: 208px;
  top: -34px;
  transform: rotate(102deg);
}
.leaf33 {
  left: 211px;
  top: -10px;
  transform: rotate(148deg);
}
.leaf34 {
  left: 194px;
  top: 6px;
  transform: rotate(186deg);
}
.leaf35 {
  left: 170px;
  top: 11px;
  transform: rotate(238deg);
}
.flower30 {
  left: 174px;
  top: -2px;
}
.flower31 {
  left: 179px;
  top: -19px;
  z-index: 18;
  transform: scale(0.8);
}
.flower32 {
  left: 175px;
  top: 19px;
  z-index: 18;
  transform: scale(0.8);
}
.flower33 {
  left: 197px;
  top: -29px;
}
.flower34 {
  left: 191px;
  top: -2px;
  transform: rotate(38deg) scale(0.8);
}
.flower35 {
  left: 204px;
  top: -43px;
  transform: rotate(95deg);
  z-index: -20;
}
.flower36 {
  left: 205px;
  top: -11px;
  z-index: 18;
  transform: rotate(38deg);
}
.flower37 {
  left: 189px;
  top: 14px;
  transform: rotate(38deg) scale(0.8);
}
.flower38 {
  left: 160px;
  top: 22px;
}
.flower39 {
  left: 225px;
  top: -20px;
  transform: rotate(38deg) scale(0.8);
}
.flower310 {
  left: 217px;
  top: 4px;
}
.flower311 {
  left: 223px;
  top: -40px;
  z-index: -18;
  transform: rotate(38deg) scale(0.8);
}
.flowerSec-1 {
  left: 54px;
  top: -18px;
  transform: scale(0.8);
}
.flowerSec-2 {
  left: 59px;
  top: -6px;
  z-index: 18;
  transform: rotate(38deg) scale(1.2);
}
.flowerSec-3 {
  left: 75px;
  top: -6px;
}
.leafSec-1 {
  left: 169px;
  top: -43px;
}
.leafSec-2 {
  left: 187px;
  top: -31px;
  transform: rotate(102deg);
}
.leafSec-3 {
  left: 192px;
  top: -10px;
  transform: rotate(148deg);
}
.leafSec-4 {
  left: 176px;
  top: 6px;
  transform: rotate(186deg);
}
.leafSec-5 {
  left: 153px;
  top: 11px;
  transform: rotate(238deg);
}
.flowerSec-20 {
  left: 120px;
  top: 7px;
  transform: rotate(38deg) scale(0.8);
}
.flowerSec-21 {
  left: 130px;
  top: -8px;
  z-index: 18;
  transform: rotate(58deg) scale(1.5);
}
.flowerSec-22 {
  left: 176px;
  top: -31px;
  z-index: 18;
  transform: rotate(38deg) scale(1.2);
}
.flowerSec-23 {
  left: 159px;
  top: 25px;
  z-index: 18;
  transform: rotate(38deg) scale(1.5);
  opacity: 0.8;
}
.flowerSec-24 {
  left: 147px;
  top: -6px;
  transform: rotate(38deg) scale(0.8);
}
.flowerSec-25 {
  left: 147px;
  top: 23px;
}
.flowerSec-26 {
  left: 175px;
  top: 29px;
  transform: rotate(38deg) scale(0.8);
}
.flowerSec-27 {
  left: 180px;
  top: -6px;
}
.flowerSec-28 {
  left: 189px;
  top: -29px;
  transform: rotate(38deg) scale(0.8);
}
.flowerSec-29 {
  left: 191px;
  top: 16px;
}
.flowerSec-210 {
  left: 204px;
  top: -14px;
  z-index: 18;
  transform: rotate(8deg) scale(1.5);
  opacity: 0.8;
}
.flowerSec-211 {
  left: 213px;
  top: -7px;
}
.flowerSec-212 {
  left: 217px;
  top: 18px;
  transform: rotate(38deg) scale(0.8);
}
.flowerSec-213 {
  left: 244px;
  top: 10px;
  animation: flowerSec213 8s ease-out infinite 1.5s;
  opacity: 1;
  z-index: 999;
}
@keyframes flowerSec213 {
  0% {
    left: 244px;
    top: 10px;
    opacity: 1;
  }
  70% {
    left: 500px;
    top: 160px;
    opacity: 1;
  }
  74% {
    left: 500px;
    top: 163px;
    opacity: 0.7;
  }
  78% {
    left: 500px;
    top: 166px;
    opacity: 0.4;
  }
  82% {
    left: 500px;
    top: 160px;
    opacity: 0;
  }
  85% {
    left: 500px;
    top: 160px;
    opacity: 0;
  }
  95% {
    left: 244px;
    top: 10px;
    opacity: 0;
  }
  100% {
    left: 244px;
    top: 10px;
    opacity: 1;
  }
}
.qiuqian {
  width: 111px;
  height: 240px;
  border-left: 6px solid #8b847e;
  border-right: 6px solid #8b847e;
  position: absolute;
  left: 0;
  top: 0;
  transform: rotate(-10deg) translateX(82px) translateY(63px);
  animation: qiuqian 4s ease-out infinite 1.5s;
}
@keyframes qiuqian {
  0% {
    transform: rotate(-10deg) translateX(82px) translateY(63px);
  }
  50% {
    transform: rotate(-20deg) translateX(106px) translateY(99px);
  }
  100% {
    transform: rotate(-10deg) translateX(82px) translateY(63px);
  }
}
.qiuqian-bottom {
  width: 128px;
  height: 14px;
  border-radius: 10px;
  position: absolute;
  left: -8px;
  bottom: -4px;
  transform: rotate(1deg);
  background: #9c8269;
}
.qiuqian-rabbit {
  width: 54px;
  height: 40px;
  position: absolute;
  top: -46px;
  left: 32px;
}
.qiuqian-rabbit-body {
  width: 56px;
  height: 42px;
  border-radius: 120% 100% 100% 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 20;
  border: 2px solid #5d686a;
  background: #f1f1f1;
}
.qiuqian-rabbit-tail {
  width: 12px;
        height: 10px;
        border-radius: 180% 100% 100% 100%;
        position: absolute;
        left: 18px;
        top: 20px;
        z-index: 20;
        border: 1px solid #5d686a;
        background: #cfb3af;
}
.qiuqian-rabbit-ear {
  width: 10px;
  height: 30px;
  border: 2px solid #5d686a;
  border-bottom: none;
  position: absolute;
  border-radius: 100% 200%;
  background: #f1f1f1;
  transform: rotate(30deg);
}
.qiuqian-rabbit-ear1 {
  top: -28px;
  left: 12px;
  transform: rotate(-20deg);
}
.qiuqian-rabbit-ear2 {
  top: -28px;
  left: 38px;
  transform: rotate(20deg);
}
.plate {
  width: 80px;
  height: 40px;
  border-radius: 100%;
  position: absolute;
  left: 54px;
  bottom: 14px;
  background: #bececd;
  border: 1px solid #5d686a;
}
.plate::before {
  content: '';
  width: 74px;
  height: 34px;
  border-radius: 100%;
  position: absolute;
  left: 2px;
  top: 2px;
  border-left: 1px solid rgba(93, 107, 106, 0.3);
  border-right: 1px solid rgba(93, 107, 106, 0.3);
  border-bottom: 1px solid rgba(93, 107, 106, 0.3);
}
.mooncake {
  width: 38px;
  height: 18px;
  border-radius: 100%;
  border: 1px solid rgba(93, 107, 106, 0.2);
  background: #edce8d;
  box-shadow: 0px 6px 0px 0px #eac380, 0px 12px 0px 0px #e1c78a, 0px 12px 0px 1px rgba(93, 107, 106, 0.2);
  z-index: 99;
  position: absolute;
}
.mooncake1 {
  right: 8px;
  bottom: 25px;
}
.mooncake2 {
  right: 34px;
  bottom: 20px;
}
.flower-mooncake1 {
  right: 8px;
  bottom: 6px;
  transform: scale(0.8) rotate(-18deg);
}
.mooncake-line {
  width: 1px;
  height: 10px;
  position: absolute;
  background: rgba(93, 107, 106, 0.2);
}
.mooncake-line1 {
  height: 12px;
  top: 10px;
  left: -1px;
  transform: rotate(1deg);
}
.mooncake-line2 {
  top: 19px;
  left: 8px;
}
.mooncake-line3 {
  top: 20px;
  left: 19px;
}
.mooncake-line4 {
  top: 18px;
  left: 30px;
}
.mooncake-line5 {
  top: 10px;
  left: 39px;
}
.teacup {
  width: 40px;
  height: 30px;
  position: absolute;
  bottom: 30px;
  right: 55px;
  z-index: 1;
}
.teacup-lid {
  width: 40px;
  height: 16px;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  background: #bececd;
  border: 1px solid #5d686a;
  z-index: 29;
}
.teacup-inner {
  position: absolute;
  width: 40px;
  height: 28px;
  border-radius: 0 0 18px 18px;
  left: 0;
  top: 10px;
  background: #bececd;
  border: 1px solid #5d686a;
  z-index: 19;
}
.teacup-bottom {
  position: absolute;
  width: 16px;
  height: 4px;
  border-radius: 0 0 2px 2px;
  left: 12px;
  top: 37px;
  background: #bececd;
  border: 1px solid #5d686a;
}
.rabbit {
  width: 80px;
  height: 54px;
  position: absolute;
  left: 126px;
  bottom: 30px;
  z-index: 10;
}
.rabbit-body {
  width: 60px;
  height: 43px;
  border: 2px solid #5d686a;
  border-radius: 100%;
  position: absolute;
  left: 18px;
  top: 6px;
  background: #f1f1f1;
  z-index: 9;
  transform: rotate(-3deg);
}
.rabbit-face {
  width: 40px;
  height: 40px;
  border-radius: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 20;
  border: 2px solid #5d686a;
  background: #f1f1f1;
}
.rabbit-eye {
  width: 3px;
  height: 5px;
  border-radius: 100%;
  background: #5f5b5c;
  position: absolute;
  top: 15px;
  z-index: 499;
}
.rabbit-eye-left {
  left: 11px;
}
.rabbit-eye-right {
  left: 22px;
}
.rabbit-rouge {
  width: 5px;
  height: 3px;
  border-radius: 100%;
  background: #dcb5b0;
  position: absolute;
  z-index: 489;
  box-shadow: 0 0 2px 2px #dcb5b0;
}
.rabbit-rouge-left {
  top: 23px;
  left: 5px;
  transform: rotate(20deg);
}
.rabbit-rouge-right {
  top: 22px;
  left: 26px;
  transform: rotate(-30deg);
}
.rabbit-mouth {
  width: 2px;
  height: 2px;
  border-radius: 100%;
  background: #5f5b5c;
  position: absolute;
  top: 30px;
  left: 16px;
  z-index: 99;
}
.rabbit-ear {
  width: 10px;
  height: 30px;
  border: 2px solid #5d686a;
  border-bottom: none;
  position: absolute;
  border-radius: 100% 200%;
  background: #f1f1f1;
  transform: rotate(30deg);
}
.rabbit-ear-left {
  top: -28px;
  left: 12px;
  transform: rotate(30deg);
}
.rabbit-ear-right {
  top: -26px;
  left: 28px;
  transform: rotate(45deg);
}
.rabbit-tail {
  width: 12px;
  height: 14px;
  border: 1px solid #5d686a;
  background: #cbaaa5;
  border-radius: 100%;
  position: absolute;
  right: -8px;
  top: 15px;
  z-index: -1;
}
.rabbit-leg {
  width: 24px;
  height: 10px;
  border: 2px solid #5d686a;
  border-radius: 100% 100% 10px 10px;
  position: absolute;
  background: #f1f1f1;
  z-index: 2;
}
.rabbit-leg1 {
  left: 10px;
  bottom: 0px;
  transform: rotate(11deg);
}
.rabbit-leg2 {
  left: 16px;
  bottom: -3px;
  z-index: 4;
}
.rabbit-leg3 {
  left: 52px;
  bottom: 1px;
  transform: rotate(-13deg);
}
.rabbit-leg4 {
  left: 45px;
  bottom: -6px;
  transform: rotate(-30deg);
}
  </style>
</head>
<body>
<div class='picture'>
  <div class='moon'></div>
  <div class='fragrans fragrans1'>
    <div class='flower flower1'></div>
    <div class='flower flower2 light'></div>
    <div class='flower flower3'></div>
    <div class='flower flower4'></div>
    <div class='flower flower5 light'></div>
    <div class='flower flower6 light'></div>
    <div class='flower flower7'></div>
    <div class='flower flower8'></div>
    <div class='flower flower9 light'></div>
    <div class='flower flower10 light'></div>
    <div class='flower flower11 light'></div>
    <div class='flower flower12'></div>
    <div class='flower flower13'></div>
    <div class='branch branch1'></div>
    <div class='leaf leaf21'></div>
    <div class='branch branch2'></div>
    <div class='branch branch3'></div>
    <div class='flower flower21'></div>
    <div class='flower flower22'></div>
    <div class='flower flower23 light'></div>
    <div class='flower flower24'></div>
    <div class='flower flower25'></div>
    <div class='flower flower26 light'></div>
    <div class='flower flower27 light'></div>
    <div class='flower flower28'></div>
    <div class='flower flower29'></div>
    <div class='leaf leaf31'></div>
    <div class='leaf leaf32'></div>
    <div class='leaf leaf33'></div>
    <div class='leaf leaf34'></div>
    <div class='leaf leaf35'></div>
    <div class='flower flower30'></div>
    <div class='flower flower31 light'></div>
    <div class='flower flower32 light'></div>
    <div class='flower flower33'></div>
    <div class='flower flower34'></div>
    <div class='flower flower35'></div>
    <div class='flower flower36 light'></div>
    <div class='flower flower37'></div>
    <div class='flower flower38'></div>
    <div class='flower flower39'></div>
    <div class='flower flower310'></div>
    <div class='flower flower311 light'></div>
  </div>
  <div class='fragrans fragrans2'>
    <div class='flower flowerSec-1'></div>
    <div class='flower flowerSec-2 light'></div>
    <div class='flower flowerSec-3'></div>
    <div class='leaf leafSec-1'></div>
    <div class='leaf leafSec-2'></div>
    <div class='leaf leafSec-3'></div>
    <div class='leaf leafSec-4'></div>
    <div class='leaf leafSec-5'></div>
    <div class='flower flowerSec-20'></div>
    <div class='flower flowerSec-21 light'></div>
    <div class='flower flowerSec-22 light'></div>
    <div class='flower flowerSec-23 light'></div>
    <div class='flower flowerSec-24'></div>
    <div class='flower flowerSec-25'></div>
    <div class='flower flowerSec-26'></div>
    <div class='flower flowerSec-27'></div>
    <div class='flower flowerSec-28'></div>
    <div class='flower flowerSec-29'></div>
    <div class='flower flowerSec-210 light'></div>
    <div class='flower flowerSec-211'></div>
    <div class='flower flowerSec-212'></div>
    <div class='flower flowerSec-213'></div>
  </div>
  <div class='qiuqian'>
    <div class='qiuqian-bottom'>
      <div class='qiuqian-rabbit'>
        <div class='qiuqian-rabbit-ear qiuqian-rabbit-ear1'></div>
        <div class='qiuqian-rabbit-ear qiuqian-rabbit-ear2'></div>
        <div class='qiuqian-rabbit-body'>
          <div class='qiuqian-rabbit-tail'></div>
        </div>
      </div>
    </div>
  </div>
  <div class='plate'>
    <div class='mooncake mooncake1'>
      <div class='mooncake-line mooncake-line1'></div>
      <div class='mooncake-line mooncake-line2'></div>
      <div class='mooncake-line mooncake-line3'></div>
      <div class='mooncake-line mooncake-line4'></div>
      <div class='mooncake-line mooncake-line5'></div>
      <div class='flower flower-mooncake1'></div>
    </div>
    <div class='mooncake mooncake2'>
      <div class='mooncake-line mooncake-line1'></div>
      <div class='mooncake-line mooncake-line2'></div>
      <div class='mooncake-line mooncake-line3'></div>
      <div class='mooncake-line mooncake-line4'></div>
      <div class='mooncake-line mooncake-line5'></div>
      <div class='flower flower-mooncake1'></div>
    </div>
  </div>
  <div class='teacup'>
    <div class='teacup-lid'></div>
    <div class='teacup-inner'></div>
    <div class='teacup-bottom'></div>
  </div>
  <div class='rabbit'>
    <div class='rabbit-face'>
      <div class='rabbit-eye rabbit-eye-left'></div>
      <div class='rabbit-eye rabbit-eye-right'></div>
      <div class='rabbit-rouge rabbit-rouge-left'></div>
      <div class='rabbit-rouge rabbit-rouge-right'></div>
      <div class='rabbit-mouth'></div>
      <div class='rabbit-ear rabbit-ear-left'></div>
      <div class='rabbit-ear rabbit-ear-right'></div>
    </div>
    <div class='rabbit-body'></div>
    <div class='rabbit-leg rabbit-leg1'></div>
    <div class='rabbit-leg rabbit-leg2'></div>
    <div class='rabbit-leg rabbit-leg3'></div>
    <div class='rabbit-leg rabbit-leg4'></div>
    <div class='rabbit-tail'></div>
  </div>
</div>
  </div>
</body>
</html>