Webleb - Snippets de Código

HTML CSS JS

<!DOCTYPE html>

<head>

<title>Webstar - Dijital Dönüşüm</title>

<style>

:root {

--primary-grad: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);

--glass-bg: rgba(255, 255, 255, 0.25);

--glass-border: rgba(255, 255, 255, 0.4);

}

body {

font-family: 'Outfit', sans-serif;

background-color: #f0f9ff;

overflow-x: hidden;

margin: 0;

}

/* --- Arka Plan Dalgaları (Yeşil tepeler yerine Mavi Dalgalar) --- */

.wave-container {

position: absolute;

bottom: 0;

left: 0;

width: 100%;

height: 60%;

z-index: 0;

overflow: hidden;

}

.wave {

position: absolute;

bottom: -50px;

left: 0;

width: 200%;

height: 100%;

background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1440 320" xmlns="http://www.w3.org/2000/svg"><path fill="%233b82f6" fill-opacity="1" d="M0,192L48,197.3C96,203,192,213,288,229.3C384,245,480,267,576,250.7C672,235,768,181,864,181.3C960,181,1056,235,1152,234.7C1248,235,1344,181,1392,154.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>');

background-size: 50% 100%;

background-repeat: repeat-x;

opacity: 0.8;

animation: waveMove 15s linear infinite;

}

.wave:nth-child(2) {

bottom: -30px;

opacity: 0.4;

animation: waveMove 20s linear infinite reverse;

filter: hue-rotate(45deg); /* Mor tonu ekler */

}

@keyframes waveMove {

0% { transform: translateX(0); }

100% { transform: translateX(-50%); }

}

/* --- Glassmorphism Kartlar --- */

.glass-panel {

background: var(--glass-bg);

backdrop-filter: blur(16px);

-webkit-backdrop-filter: blur(16px);

border: 1px solid var(--glass-border);

box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);

}

/* --- Sağdaki Asılı Kapsül (Tamamen CSS) --- */

.capsule-container {

animation: sway 5s ease-in-out infinite;

transform-origin: top center;

}

.capsule {

width: 180px;

height: 320px;

border-radius: 100px;

background: linear-gradient(135deg, rgba(255,255,255,0.4), rgba(255,255,255,0.1));

border: 2px solid rgba(255, 255, 255, 0.6);

backdrop-filter: blur(8px);

position: relative;

overflow: hidden;

box-shadow:

0 20px 50px rgba(0,0,0,0.1),

inset 0 0 30px rgba(255,255,255,0.5);

display: flex;

align-items: center;

justify-content: center;

}

/* Kapsül içindeki Soyut Şekiller (Resim yerine CSS) */

.abstract-orb {

width: 120px;

height: 120px;

border-radius: 50%;

background: radial-gradient(circle at 30% 30%, #60a5fa, #3b82f6, #1d4ed8);

box-shadow: 0 0 30px rgba(59, 130, 246, 0.6);

position: absolute;

top: 40px;

animation: floatOrb 4s ease-in-out infinite;

}

.abstract-orb::after {

content: '';

position: absolute;

top: 15px;

left: 20px;

width: 25px;

height: 15px;

border-radius: 50%;

background: rgba(255,255,255,0.8);

transform: rotate(-45deg);

}

.small-orb {

width: 60px;

height: 60px;

border-radius: 50%;

background: linear-gradient(135deg, #a78bfa, #7c3aed);

position: absolute;

bottom: 60px;

right: 30px;

opacity: 0.9;

animation: floatOrb 5s ease-in-out infinite reverse;

}

/* İp */

.string {

width: 2px;

height: 120px;

background: linear-gradient(to bottom, transparent, #fbbf24);

margin: 0 auto;

}

@keyframes sway {

0%, 100% { transform: rotate(-2deg); }

50% { transform: rotate(2deg); }

}

@keyframes floatOrb {

0%, 100% { transform: translateY(0); }

50% { transform: translateY(-15px); }

}

/* İkonlar için stil */

.icon-box {

transition: all 0.3s ease;

}

.icon-box:hover {

transform: translateY(-5px) scale(1.1);

background: rgba(255,255,255,0.4);

}

</style>

</head>

</div>

</div>

<span class="text-slate-700 font-bold text-lg tracking-tight">Webstar<span class="text-blue-600">Tech</span></span>

</div>

<a href="#" class="hover:text-blue-600 transition">Kurumsal</a>

<a href="#" class="hover:text-blue-600 transition">Çözümler</a>

<a href="#" class="hover:text-blue-600 transition">İletişim</a>

</nav>

Randevu Al

</a>

</header>

Yeni Nesil Entegrasyon

</div>

SharePoint ile <br>

<span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-purple-600">Sınırları Kaldırın</span>

</h1>

Dijital iş akışınızı bulut teknolojileriyle güçlendirin. İş birliğini artırın, belgelerinizi güvenle yönetin ve verimliliği zirveye taşıyın.

</p>

Ücretsiz Dene

</button>

Nasıl Çalışır?

</button>

</div>

<p class="text-sm font-semibold text-slate-500 mb-4 uppercase tracking-wide">Tam Entegrasyon:</p>

</div>

</div>

</div>

</div>

</div>

</div>

<span class="text-xs font-semibold text-slate-600">Sistem Online</span>

</div>

</main>

// Basit bir interaktivite: Butonlara tıklayınca efekt

const buttons = document.querySelectorAll('button');

buttons.forEach(btn => {

btn.addEventListener('click', () => {

btn.style.transform = 'scale(0.95)';

setTimeout(() => {

btn.style.transform = 'scale(1)';

}, 150);

});

</script>

</body>

</html>

Preview

Open Advanced Editor

HTML CSS JS

<!DOCTYPE html>

<head>

<title>Webstar - Dijital Dönüşüm</title>

<style>

:root {

--primary-grad: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);

--glass-bg: rgba(255, 255, 255, 0.25);

--glass-border: rgba(255, 255, 255, 0.4);

}

body {

font-family: 'Outfit', sans-serif;

background-color: #f0f9ff;

overflow-x: hidden;

margin: 0;

}

/* --- Arka Plan Dalgaları (Yeşil tepeler yerine Mavi Dalgalar) --- */

.wave-container {

position: absolute;

bottom: 0;

left: 0;

width: 100%;

height: 60%;

z-index: 0;

overflow: hidden;

}

.wave {

position: absolute;

bottom: -50px;

left: 0;

width: 200%;

height: 100%;

background-size: 50% 100%;

background-repeat: repeat-x;

opacity: 0.8;

animation: waveMove 15s linear infinite;

}

.wave:nth-child(2) {

bottom: -30px;

opacity: 0.4;

animation: waveMove 20s linear infinite reverse;

filter: hue-rotate(45deg); /* Mor tonu ekler */

}

@keyframes waveMove {

0% { transform: translateX(0); }

100% { transform: translateX(-50%); }

}

/* --- Glassmorphism Kartlar --- */

.glass-panel {

background: var(--glass-bg);

backdrop-filter: blur(16px);

-webkit-backdrop-filter: blur(16px);

border: 1px solid var(--glass-border);

box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);

}

/* --- Sağdaki Asılı Kapsül (Tamamen CSS) --- */

.capsule-container {

animation: sway 5s ease-in-out infinite;

transform-origin: top center;

}

.capsule {

width: 180px;

height: 320px;

border-radius: 100px;

background: linear-gradient(135deg, rgba(255,255,255,0.4), rgba(255,255,255,0.1));

border: 2px solid rgba(255, 255, 255, 0.6);

backdrop-filter: blur(8px);

position: relative;

overflow: hidden;

box-shadow:

0 20px 50px rgba(0,0,0,0.1),

inset 0 0 30px rgba(255,255,255,0.5);

display: flex;

align-items: center;

justify-content: center;

}

/* Kapsül içindeki Soyut Şekiller (Resim yerine CSS) */

.abstract-orb {

width: 120px;

height: 120px;

border-radius: 50%;

background: radial-gradient(circle at 30% 30%, #60a5fa, #3b82f6, #1d4ed8);

box-shadow: 0 0 30px rgba(59, 130, 246, 0.6);

position: absolute;

top: 40px;

animation: floatOrb 4s ease-in-out infinite;

}

.abstract-orb::after {

content: '';

position: absolute;

top: 15px;

left: 20px;

width: 25px;

height: 15px;

border-radius: 50%;

background: rgba(255,255,255,0.8);

transform: rotate(-45deg);

}

.small-orb {

width: 60px;

height: 60px;

border-radius: 50%;

background: linear-gradient(135deg, #a78bfa, #7c3aed);

position: absolute;

bottom: 60px;

right: 30px;

opacity: 0.9;

animation: floatOrb 5s ease-in-out infinite reverse;

}

/* İp */

.string {

width: 2px;

height: 120px;

background: linear-gradient(to bottom, transparent, #fbbf24);

margin: 0 auto;

}

@keyframes sway {

0%, 100% { transform: rotate(-2deg); }

50% { transform: rotate(2deg); }

}

@keyframes floatOrb {

0%, 100% { transform: translateY(0); }

50% { transform: translateY(-15px); }

}

/* İkonlar için stil */

.icon-box {

transition: all 0.3s ease;

}

.icon-box:hover {

transform: translateY(-5px) scale(1.1);

background: rgba(255,255,255,0.4);

}

</style>

</head>

</div>

</div>

<span class="text-slate-700 font-bold text-lg tracking-tight">Webstar<span class="text-blue-600">Tech</span></span>

</div>

<a href="#" class="hover:text-blue-600 transition">Kurumsal</a>

<a href="#" class="hover:text-blue-600 transition">Çözümler</a>

<a href="#" class="hover:text-blue-600 transition">İletişim</a>

</nav>

Randevu Al

</a>

</header>

Yeni Nesil Entegrasyon

</div>

SharePoint ile <br>

<span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-purple-600">Sınırları Kaldırın</span>

</h1>

Dijital iş akışınızı bulut teknolojileriyle güçlendirin. İş birliğini artırın, belgelerinizi güvenle yönetin ve verimliliği zirveye taşıyın.

</p>

Ücretsiz Dene

</button>

Nasıl Çalışır?

</button>

</div>

<p class="text-sm font-semibold text-slate-500 mb-4 uppercase tracking-wide">Tam Entegrasyon:</p>

</div>

</div>

</div>

</div>

</div>

</div>

<span class="text-xs font-semibold text-slate-600">Sistem Online</span>

</div>

</main>

// Basit bir interaktivite: Butonlara tıklayınca efekt

const buttons = document.querySelectorAll('button');

buttons.forEach(btn => {

btn.addEventListener('click', () => {

btn.style.transform = 'scale(0.95)';

setTimeout(() => {

btn.style.transform = 'scale(1)';

}, 150);

});

</script>

</body>

</html>

Preview

Validating your code, please wait...