Webleb - UI Elements - Mete'nin bir kodu

HTML

<!DOCTYPE html>

<head>

<title>Yandex — Hızlı İnternet Araması</title>

<style>

.search-box {

transition: all 0.3s ease;

}

.search-box:focus-within {

box-shadow: 0 0 0 3px rgba(255, 204, 0, 0.3);

}

.service-item:hover {

transform: translateY(-2px);

}

.trend-item {

position: relative;

}

.trend-item::after {

content: "";

position: absolute;

bottom: 0;

left: 0;

width: 0;

height: 1px;

background-color: #ffdb4d;

transition: width 0.3s ease;

}

.trend-item:hover::after {

width: 100%;

}

.news-card:hover {

transform: translateY(-5px);

box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);

}

</style>

</head>

<a href="#" class="text-2xl font-bold text-yellow-400">Yandex</a>

<a href="#" class="text-gray-600 hover:text-yellow-500">Servisler</a>

</nav>

</div>

Giriş Yap

</button>

</button>

</div>

</header>

Yandex — hızlı İnternet araması

</h1>

Bul

</button>

</div>

<span class="text-gray-600">Görsel arama</span>

</div>

<span class="text-gray-600">Teklif arama</span>

</div>

</section>

<h2 class="text-xl font-semibold mb-4 px-2 text-gray-700">Servisler</h2>

</div>

<span class="text-sm font-medium">Oyunlar</span>

</a>

</div>

<span class="text-sm font-medium">Çeviri</span>

</a>

</div>

</a>

</div>

</a>

</div>

<span class="text-sm font-medium">Metrica</span>

</a>

</div>

<span class="text-sm font-medium">Hava durumu</span>

</a>

</div>

</a>

</div>

<span class="text-sm font-medium">Görsel</span>

</a>

</div>

<span class="text-sm font-medium">Video</span>

</a>

</div>

</a>

</div>

</section>

<h2 class="text-xl font-semibold mb-4 text-gray-700">Kullanıcılar arıyor</h2>

fatih polis intiharı

</a>

orhan pamuk eserleri

</a>

adıyaman petrol işletme ruhsatı

</a>

istanbul deaş operasyonu

</a>

nif kiraz festivali

</a>

uss nimitz orta doğu

</a>

</div>

<div>

<h2 class="text-xl font-semibold mb-4 px-2 text-gray-700">Güncel Haberler</h2>

</div>

<span class="text-xs text-gray-500">hurriyet.com.tr</span>

</div>

Anne kız ikiz gibi giyinip dünyaya mesajı verdiler... Törene acının gölgesi düştü

</h3>

</div>

</a>

</div>

<span class="text-xs text-gray-500">tgrthaber.com</span>

</div>

Bayern Münih Auckland City maçı hangi kanalda, nereden canlı izlenir? FIFA Kulüpler Dünya Kupası'nda karşılaşacaklar

</h3>

</div>

</a>

</div>

<span class="text-xs text-gray-500">odatv.com</span>

</div>

Kimse fark etmedi ama: Bir günde 4 deprem

</h3>

</div>

</a>

</div>

<span class="text-xs text-gray-500">egetelgraf.com</span>

</div>

Yazı Çeşme'nin eşsiz plajlarında geçirmek isteyenlerin bir numara tercihi oldu! Mavi bayraklı en sakin nokta

</h3>

</div>

</a>

</div>

İstanbul

</h2>

</div>

Hava Durumu

</h2>

<div>

</div>

<div class="text-sm text-gray-600 mb-4">Açık • Hissedilen 22°</div>

<div>Gündüz</div>

</div>

<div>Akşam</div>

</div>

</div>

<div>Sabah</div>

</div>

<h2 class="text-lg font-semibold mb-3">Borsa</h2>

</div>

</div>

<span class="text-gray-600">Altın (G)</span>

</div>

<a href="#" class="text-sm text-yellow-500 hover:underline mt-3 inline-block">Daha fazla göster</a>

</div>

Takvim

</h2>

<div class="text-sm text-gray-600">Mayıs</div>

</div>

</div>

</div>

</main>

<a href="#" class="hover:underline">Gizlilik</a>

<a href="#" class="hover:underline">Şartlar</a>

</div>

</a>

</a>

</a>

</a>

</div>

</footer>

<h3 class="font-medium text-gray-800">Yandex uses cookies</h3>

They ensure the smooth operation of all Yandex sites and services. For more information, please read our <a href="#" class="text-yellow-500 hover:underline">Cookie Policy</a>

</p>

</div>

Allow all

</button>

Allow essential cookies

</button>

Settings

</button>

</div>

</body>

</html>

Mete'nin bir kodu

Recommended

CSS Loading Animation Snippet

Parallax Depth Cards

3d form

HTML

CSS

JS

Recommended

CSS Loading Animation Snippet

Parallax Depth Cards

3d form

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS