Sizler için yaptığım ücretsiz bio teması

🌐 İnternet
,
1

Selam arkadaşlar, bugün sizlere kendi yapmış olduğum bio temasını paylaşıyorum. Umarım hoşunuza gider. :slight_smile:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Links</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background:url('test.png') no-repeat center center/cover;
            color: #fff;
            height: 100vh;
            overflow: hidden;
        }
        .container {
            text-align: center;
            max-width: 330px;
            width: 90%;
            padding: 20px;
            background: rgba(255, 255, 255, 0.1);
            border: 2px solid rgba(255, 255, 255, 0.5);
            border-radius: 15px;
            box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
            backdrop-filter: blur(10px);
        }
        .profile-image {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            margin-bottom: 20px;
            border: 2px solid #fff;
        }
        h1 {
            font-size: 1.8rem;
            margin-bottom: 10px;
        }
        p {
            font-size: 1rem;
            margin-bottom: 20px;
            color: rgba(255, 255, 255, 0.8);
        }
        .link {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            padding: 15px 20px;
            margin: 10px 0;
            background-color: rgba(255, 255, 255, 0.1);
            color: #fff;
            text-decoration: none;
            border: 2px solid rgba(255, 255, 255, 0.5);
            border-radius: 10px;
            font-weight: bold;
            transition: all 0.3s ease;
            backdrop-filter: blur(5px);
            text-align: left;
        }
        .link:hover {
            background-color: #fff;
            color: #000;
        }
        .link i {
            margin-right: 10px;
            font-size: 1.2rem;
        }
        .link:hover i {
            color: #000;
        }
        footer {
            margin-top: 20px;
            font-size: 0.8rem;
            color: rgba(255, 255, 255, 0.6);
        }
    </style>
</head>
<body>
    <div class="container">
        <img src="https://via.placeholder.com/100" alt="Profile Image" class="profile-image">
        <h1>İsminizi Yazın</h1>
        <p>Buraya kendinizle ilgili şeyleri yazın.</p>
        <a href="#" class="link"><i class="fab fa-instagram"></i>Instagram</a>
        <a href="#" class="link"><i class="fab fa-twitter"></i>Twitter</a>
        <a href="#" class="link"><i class="fab fa-linkedin"></i>LinkedIn</a>
        <a href="#" class="link"><i class="fas fa-globe"></i>Kişisel Website</a>
    </div>
    <footer>
        © 2025 İsminiz
    </footer>
</body>
</html>

Görünüm:

Screenshot_2025-01-08-20-36-58-311_io.spck
Screenshot_2025-01-08-20-36-58-311_io.spck1080×2400 185 KB

Arkaplan resmi (test.png):

gwf25o
gwf25o5824×1942 1.68 MB

Son düzenleyen: @xacn 2025-01-08T17:45:57Z

6 Likes
2

Hocam üyelik yapmadan görme imkanımız var mı?

2 Likes
3

Şimdi bakın hocam ekledim.

1 Like
4

Emeğinize sağlık güzel çalışma olmuş.

3 Likes
5

Rica ederim güle güle kullanın.

3 Likes
6

Çok güzel proje. Ben kendi sitemde zaten var ama link amaçlı kullanmayı düşünebilirim. Ayrıca JavaScript vs. kullanarak otomatik oluşturucu yapmayı düşünür müsünüz hocam? Otomatik generator yaparsanız, projeyi GitHub’ta paylaşıp daha fazla yere yayabilirsiniz. Yok, sadece böyle kalsın derseniz, daha fazla opsiyonla güzelleştirilebilir. Şahsen beğendim, projenizde başarılar!:rocket:

3 Likes
8

Hocam dümdüz birşey zaten kendim githubda bir link yönlendirici olarak kullanmak için yaptım fakat baktım tasarımı baya iyi olmuş bende kodu paylaşayım dedim. Onun dışında tam kapsamlı bir site yapacaksam muhtemelen nodejs kullanırım. Bu arada teşekkürler.

Linktree den özenerek yapmıştım.

Nedeni ise linktree’nin kendi sitesi çok fazla reklam vb. dolu. Bende bu durumdan rahatsız olduğum için kendi link sistemimi yaptım.

3 Likes
9

Amacın böyle birşey olduğunu anladım zaten :smiley: . Bende arıyordum aslında böyle birşey, bunu kullanacağım. Sitemde zaten linklerim var. Ama /links gibi bir alt sayfada bulunduracağım.

4 Likes
10

Hocam Google blogspot için Template haline getirilebilirmi bu kodlar

3 Likes
11

Hocam düz html+css kodu bu istediğiniz heryerde kullanabilirsiniz.

3 Likes
12

Basit ve öz olmasına rağmen fena durmuyor. Sade HTML/CSS’e göre gayet başarılı, eline sağlık. Ufak bir ekleme olarak eklenecek bağlantı sayısı arttığında bağlantıların görüntülenme şeklini grid kullanarak değiştirmek hoş olabilir. Örneğin: Mobil cihazlarda girildiğinde ve bağlantı sayısı 4’ü geçtiğinde 2 sütun olacak şekilde ve her satırda 2 bağlantı görüntülenebilir. İyi çalışmalar.

1 Like
13

Hocam buna benzer bişi yapmaya çalıştım nasıl olmuş https://pluzmna.github.io/web/ telefondaki *# 1 den 9 a kadar tuş takımı eklemeyi unutmayın siteden sizi arasın millet yeni teknoloji jdksks

1 Like
15

Güzel olmuş başarılar dilerim.

Aslında öyle birşey minimalist görünümünü bozar. Fakat daha fazlası gibi bir buton eklemeyi düşünüyorum.

16

Eline sağlık güzel olmuş. Borderları 1px e çekince daha bi çekici durdu bence :smiley_cat:

img00001
img00001720×342 21.6 KB

2 Likes
17

Aslında bu tasarımı henüz PC den görüntülememiştim. İçime bu tasarımda bir admin paneli yapma isteği uyandırdı nedense.

1 Like