Kod Mağazası

<style>
.flip-card {
  perspective: 1000px;
  width: 300px;
  height: 200px;
  margin: 20px auto;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.flip-card-front {
  background: linear-gradient(135deg, #6e8efb, #a777e3);
  color: white;
}

.flip-card-back {
  background: linear-gradient(135deg, #11998e, #38ef7d);
  color: white;
  transform: rotateY(180deg);
}
</style>

<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <h2>Ön Yüz</h2>
    </div>
    <div class="flip-card-back">
      <h2>Arka Yüz</h2>
    </div>
  </div>
</div>

<style>
.morph-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}

svg {
  width: 200px;
  height: 200px;
}

path {
  fill: none;
  stroke: #ff5e62;
  stroke-width: 8;
  stroke-linecap: round;
  transition: all 0.8s ease-in-out;
}
</style>

<div class="morph-container">
  <svg viewBox="0 0 200 200" id="morph-svg">
    <path id="morph-path" d="M20,20 L180,20 L180,180 L20,180 Z" />
  </svg>
</div>

<script>
const shapes = [
  "M20,20 L180,20 L180,180 L20,180 Z", // kare
  "M100,20 L180,100 L100,180 L20,100 Z", // elmas
  "M100,20 C140,20 180,60 180,100 C180,140 140,180 100,180 C60,180 20,140 20,100 C20,60 60,20 100,20 Z", // daire
  "M20,100 C20,50 100,50 100,20 C100,50 180,50 180,100 C180,150 100,150 100,180 C100,150 20,150 20,100 Z" // kalp
];

let currentShape = 0;
const path = document.getElementById("morph-path");

function morphShape() {
  currentShape = (currentShape + 1) % shapes.length;
  path.setAttribute("d", shapes[currentShape]);
}

setInterval(morphShape, 2000);
</script>

<style>
.glitch-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  background-color: #000;
  padding: 20px;
}

.glitch {
  position: relative;
  font-size: 50px;
  font-weight: bold;
  color: #fff;
  letter-spacing: 3px;
  z-index: 1;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.glitch::before {
  color: #ff00ff;
  animation: glitch-effect 3s infinite;
}

.glitch::after {
  color: #00ffff;
  animation: glitch-effect 2s infinite reverse;
}

@keyframes glitch-effect {
  0% {
    transform: translate(0);
  }
  20% {
    transform: translate(-5px, 5px);
  }
  40% {
    transform: translate(-5px, -5px);
  }
  60% {
    transform: translate(5px, 5px);
  }
  80% {
    transform: translate(5px, -5px);
  }
  100% {
    transform: translate(0);
  }
}
</style>

<div class="glitch-wrapper">
  <div class="glitch" data-text="GLITCH EFEKT">GLITCH EFEKT</div>
</div>

<style>
.parallax-container {
  height: 400px;
  overflow: hidden;
  position: relative;
}

.parallax-bg {
  background-image: url("https://source.unsplash.com/random/1200x800?nature");
  height: 150%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-size: cover;
  background-position: center;
  z-index: -1;
}

.parallax-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  text-align: center;
  padding: 0 20px;
  text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}

.parallax-content h2 {
  font-size: 3rem;
  margin-bottom: 20px;
}

.parallax-content p {
  font-size: 1.2rem;
  max-width: 600px;
}
</style>

<div class="parallax-container">
  <div class="parallax-bg" id="parallax-bg"></div>
  <div class="parallax-content">
    <h2>Paralaks Efekti</h2>
    <p>Sayfanızda derinlik hissi yaratmak için bu basit paralaks efektini kullanabilirsiniz.</p>
  </div>
</div>

<script>
window.addEventListener("scroll", function() {
  const parallaxBg = document.getElementById("parallax-bg");
  let offset = window.pageYOffset;
  parallaxBg.style.transform = "translateY(" + offset * 0.5 + "px)";
});
</script>

<style>
.hamburger {
  width: 40px;
  height: 30px;
  position: relative;
  cursor: pointer;
}

.hamburger span {
  display: block;
  position: absolute;
  height: 4px;
  width: 100%;
  background: #333;
  border-radius: 4px;
  transition: .25s ease-in-out;
}

.hamburger span:nth-child(1) {
  top: 0px;
}

.hamburger span:nth-child(2), .hamburger span:nth-child(3) {
  top: 13px;
}

.hamburger span:nth-child(4) {
  top: 26px;
}

.hamburger.active span:nth-child(1) {
  top: 13px;
  width: 0%;
  left: 50%;
}

.hamburger.active span:nth-child(2) {
  transform: rotate(45deg);
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg);
}

.hamburger.active span:nth-child(4) {
  top: 13px;
  width: 0%;
  left: 50%;
}
</style>

<div class="hamburger">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

<script>
  document.querySelector(".hamburger").addEventListener("click", function() {
    this.classList.toggle("active");
  });
</script>

<style>
.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>

<div class="spinner"></div>