Webleb - HTML UI Elements - Un codice di Mete

HTML

CSS

<!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>

Validating your code, please wait...

HTML

CSS

<!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>