Annem ve kardeşim için basit bir site yaptım

claude.ai ve gemini yi kullanabilirsin. Claude.ai kod kısmında geminiyi de tasarım ve bazı basit işlevsellerde kullanılabilir bence tavsiye ederim.

teşekkür ederim hocam deneyeceğim sağolasın

kategorilerin altına bir elementorden bir html ekle

<style>

.lifci-categories {
    --lc-dark: #302b27;
    --lc-text: #504942;
    --lc-cream: #fffaf3;
    --lc-border: rgba(70, 55, 42, 0.10);

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;

    width: 100%;
    margin: 0 auto;
}


.lifci-cat {
    position: relative;
    display: block;

    height: 355px;

    overflow: hidden;
    border-radius: 24px;

    background: #eee;
    text-decoration: none !important;

    box-shadow:
        0 10px 30px rgba(45, 36, 29, 0.08),
        0 2px 8px rgba(45, 36, 29, 0.04);

    isolation: isolate;

    transition:
        transform .45s cubic-bezier(.2,.8,.2,1),
        box-shadow .45s ease;
}


.lifci-cat-image {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.lifci-cat-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transform: scale(1.01);

    transition:
        transform .8s cubic-bezier(.2,.8,.2,1),
        filter .5s ease;
}


.lifci-cat-image::after {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,0.00) 35%,
            rgba(0,0,0,0.06) 70%,
            rgba(0,0,0,0.16) 100%
        );

    pointer-events: none;
}


.lifci-cat-box {
    position: absolute;
    z-index: 5;

    left: 22px;
    right: 22px;
    bottom: 22px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 86px;

    padding: 15px 16px 15px 20px;

    border: 1px solid rgba(255,255,255,.68);
    border-radius: 17px;

    background: rgba(255, 250, 243, 0.92);

    box-shadow:
        0 12px 32px rgba(45, 35, 28, .14),
        inset 0 1px 0 rgba(255,255,255,.75);

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

    transition:
        transform .4s ease,
        background .4s ease,
        box-shadow .4s ease;
}


/* Sol metin alanı */
.lifci-cat-copy {
    min-width: 0;
}


/* Küçük etiket */
.lifci-cat-small {
    display: flex;
    align-items: center;
    gap: 7px;

    margin-bottom: 4px;

    color: #9b7b63;

    font-size: 10px;
    font-weight: 700;
    line-height: 1;

    letter-spacing: 1.3px;
    text-transform: uppercase;
}

.lifci-cat-small::before {
    content: "";

    width: 18px;
    height: 1px;

    background: currentColor;
}


/* Ana başlık */
.lifci-cat-title {
    margin: 0 !important;
    padding: 0 !important;

    color: var(--lc-dark) !important;

    font-family: inherit;
    font-size: clamp(24px, 2vw, 31px);
    font-weight: 600;
    line-height: 1.05;

    letter-spacing: -0.7px;
}


/* Alt açıklama */
.lifci-cat-desc {
    display: block;

    margin-top: 5px;

    color: #756d67;

    font-size: 12px;
    font-weight: 400;
    line-height: 1.3;
}


.lifci-cat-arrow {
    flex: 0 0 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    margin-left: 14px;

    border-radius: 50%;

    background: var(--lc-dark);
    color: #fff;

    box-shadow:
        0 7px 18px rgba(40, 32, 27, .18);

    transition:
        transform .4s cubic-bezier(.2,.8,.2,1),
        background .3s ease;
}

.lifci-cat-arrow svg {
    width: 18px;
    height: 18px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.lifci-cat:hover {
    transform: translateY(-5px);

    box-shadow:
        0 20px 45px rgba(45, 36, 29, 0.13),
        0 5px 12px rgba(45, 36, 29, 0.05);
}

.lifci-cat:hover img {
    transform: scale(1.065);
}

.lifci-cat:hover .lifci-cat-box {
    transform: translateY(-3px);

    background: rgba(255, 250, 243, 0.97);

    box-shadow:
        0 17px 38px rgba(45, 35, 28, .17),
        inset 0 1px 0 rgba(255,255,255,.9);
}

.lifci-cat:hover .lifci-cat-arrow {
    transform: translateX(3px) rotate(-6deg);
    background: #9a7259;
}


.lifci-cat::before {
    content: "";

    position: absolute;
    z-index: 3;

    width: 320px;
    height: 320px;

    left: var(--mouse-x, 50%);
    top: var(--mouse-y, 50%);

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.18) 0%,
            rgba(255,255,255,.04) 40%,
            transparent 70%
        );

    opacity: 0;
    pointer-events: none;

    transition: opacity .35s ease;
}

.lifci-cat:hover::before {
    opacity: 1;
}


@media (max-width: 1024px) {

    .lifci-categories {
        gap: 16px;
    }

    .lifci-cat {
        height: 310px;
        border-radius: 20px;
    }

    .lifci-cat-box {
        left: 16px;
        right: 16px;
        bottom: 16px;
    }

}


@media (max-width: 767px) {

    .lifci-categories {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .lifci-cat {
        height: 230px;
        border-radius: 16px;
    }

    .lifci-cat-box {
        left: 9px;
        right: 9px;
        bottom: 9px;

        min-height: 68px;

        padding: 11px 10px 11px 13px;

        border-radius: 12px;
    }

    .lifci-cat-small {
        margin-bottom: 3px;
        font-size: 8px;
        letter-spacing: .8px;
    }

    .lifci-cat-small::before {
        width: 11px;
    }

    .lifci-cat-title {
        font-size: 18px;
        letter-spacing: -.3px;
    }

    .lifci-cat-desc {
        display: none;
    }

    .lifci-cat-arrow {
        flex-basis: 34px;

        width: 34px;
        height: 34px;

        margin-left: 6px;
    }

    .lifci-cat-arrow svg {
        width: 14px;
        height: 14px;
    }

}


@media (max-width: 380px) {

    .lifci-cat {
        height: 205px;
    }

    .lifci-cat-title {
        font-size: 16px;
    }

}
</style>


<div class="lifci-categories">

    <!-- KİŞİSEL -->
    <a
        href="https://lifci.com/product-category/kisisel/"
        class="lifci-cat"
        aria-label="Kişisel ürün kategorisini ziyaret et"
    >

        <div class="lifci-cat-image">
            <img
                src="https://lifci.com/wp-content/uploads/2026/08/el-orgusu-dus-lifi-300x300.png"
                alt="Kişisel ürünler"
                loading="lazy"
            >
        </div>

        <div class="lifci-cat-box">

            <div class="lifci-cat-copy">

                <span class="lifci-cat-small">
                    Kendinize özel
                </span>

                <h3 class="lifci-cat-title">
                    Kişisel
                </h3>

                <span class="lifci-cat-desc">
                    El emeği, yumuşak ve renkli seçimler
                </span>

            </div>

            <span class="lifci-cat-arrow" aria-hidden="true">
                <svg viewBox="0 0 24 24">
                    <path d="M5 12h14"></path>
                    <path d="m13 6 6 6-6 6"></path>
                </svg>
            </span>

        </div>

    </a>

    <a
        href="https://lifci.com/product-category/hediyelik/"
        class="lifci-cat"
        aria-label="Hediyelik ürün kategorisini ziyaret et"
    >

        <div class="lifci-cat-image">
            <img
                src="https://lifci.com/wp-content/uploads/2026/08/Adsiz-tasarim-300x300.png"
                alt="Hediyelik ürünler"
                loading="lazy"
            >
        </div>

        <div class="lifci-cat-box">

            <div class="lifci-cat-copy">

                <span class="lifci-cat-small">
                    Sevdiklerinize özel
                </span>

                <h3 class="lifci-cat-title">
                    Hediyelik
                </h3>

                <span class="lifci-cat-desc">
                    Küçük ama anlamlı el yapımı hediyeler
                </span>

            </div>

            <span class="lifci-cat-arrow" aria-hidden="true">
                <svg viewBox="0 0 24 24">
                    <path d="M5 12h14"></path>
                    <path d="m13 6 6 6-6 6"></path>
                </svg>
            </span>

        </div>

    </a>

</div>


<script>
document.querySelectorAll('.lifci-cat').forEach(function(card) {

    card.addEventListener('mousemove', function(e) {

        const rect = card.getBoundingClientRect();

        card.style.setProperty(
            '--mouse-x',
            (e.clientX - rect.left) + 'px'
        );

        card.style.setProperty(
            '--mouse-y',
            (e.clientY - rect.top) + 'px'
        );

    });

});
</script>

ve bunu kullan daha yatay ve dar bir tasarım. yolun başındasın başarılar

Çok teşekkür ederim çok güzel oldu hocam emeğine sağlık

Yapay zeka kullanarak hem ücretsiz bir şekilde çok daha iyisini yapabilirsiniz hocam veya çok fazla bilmiyorsanız basit bir şekilde cursor yükleyip başlangıç planı satın alıp kısa sürede çözüp çok güzel işler çıkarabilirsiniz.

bunu da aynı şekilde hero alanına at. metinleri değiştirirsin istediğin gibi

<style>
.lifci-home-hero {
    position: relative;
    min-height: 520px;
    overflow: hidden;
    background: #252a22;
}

.lifci-home-hero__image {
    position: absolute;
    inset: 0;
}

.lifci-home-hero__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.lifci-home-hero__shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(25, 30, 23, .76) 0%,
        rgba(25, 30, 23, .48) 31%,
        rgba(25, 30, 23, .10) 57%,
        transparent 78%
    );
}

.lifci-home-hero__content {
    position: relative;
    z-index: 2;
    width: min(650px, 50%);
    min-height: 520px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px 0 60px 7%;
}

.lifci-home-hero__overline {
    margin: 0 0 20px;
    color: rgba(255,255,255,.72);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 2.2px;
    text-transform: uppercase;
}

.lifci-home-hero__title {
    margin: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    font-size: clamp(46px, 5vw, 76px);
    font-weight: 700;
    line-height: .96;
    letter-spacing: -2.7px;
}

.lifci-home-hero__title span {
    display: block;
    margin-top: 8px;
    color: #ffd7c5;
    font-family: Georgia, "Times New Roman", serif;
    font-size: .94em;
    font-weight: 400;
    font-style: italic;
    line-height: 1.05;
    letter-spacing: -1px;
    word-spacing: 2px;
}

.lifci-home-hero__intro {
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 18px;
    align-items: start;
    max-width: 500px;
    margin-top: 30px;
}

.lifci-home-hero__line {
    height: 1px;
    margin-top: 11px;
    background: rgba(255,255,255,.68);
}

.lifci-home-hero__text {
    margin: 0;
    color: rgba(255,255,255,.84);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: .05px;
}

.lifci-home-hero__actions {
    margin-top: 31px;
}

.lifci-home-hero__button {
    display: inline-flex;
    align-items: center;
    gap: 32px;
    min-height: 52px;
    padding: 0 19px 0 22px;
    border: 1px solid rgba(255,255,255,.65);
    background: transparent;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    transition:
        background .25s ease,
        color .25s ease;
}

.lifci-home-hero__button-arrow {
    font-size: 21px;
    font-weight: 300;
    line-height: 1;
    transition: transform .25s ease;
}

.lifci-home-hero__button:hover {
    background: #fff;
    color: #2c2925 !important;
}

.lifci-home-hero__button:hover .lifci-home-hero__button-arrow {
    transform: translateX(5px);
}

@media (max-width: 767px) {
    .lifci-home-hero {
        min-height: 520px;
    }

    .lifci-home-hero__image img {
        object-position: 58% center;
    }

    .lifci-home-hero__shade {
        background: linear-gradient(
            90deg,
            rgba(25,30,23,.80) 0%,
            rgba(25,30,23,.52) 60%,
            rgba(25,30,23,.15) 100%
        );
    }

    .lifci-home-hero__content {
        width: 90%;
        min-height: 520px;
        padding: 50px 20px;
    }

    .lifci-home-hero__overline {
        margin-bottom: 17px;
        font-size: 10px;
        letter-spacing: 1.7px;
    }

    .lifci-home-hero__title {
        font-size: 45px;
        line-height: .98;
        letter-spacing: -1.7px;
    }

    .lifci-home-hero__title span {
        margin-top: 6px;
        font-size: .93em;
        line-height: 1.08;
        letter-spacing: -.5px;
        word-spacing: 1px;
    }

    .lifci-home-hero__intro {
        grid-template-columns: 34px 1fr;
        gap: 12px;
        margin-top: 24px;
    }

    .lifci-home-hero__text {
        font-size: 13px;
        line-height: 1.65;
    }

    .lifci-home-hero__actions {
        margin-top: 25px;
    }

    .lifci-home-hero__button {
        min-height: 48px;
        gap: 24px;
    }
}
</style>

<section class="lifci-home-hero">

    <div class="lifci-home-hero__image">
        <img
            src="https://lifci.com/wp-content/uploads/2026/08/el-orgusu-dus-lifi.png"
            alt="El yapımı banyo lifleri"
        >
    </div>

    <div class="lifci-home-hero__shade"></div>

    <div class="lifci-home-hero__content">

        <p class="lifci-home-hero__overline">
            Lifci · El Emeği Koleksiyonu
        </p>

        <h1 class="lifci-home-hero__title">
            El Yapımı
            <span>Banyo Lifleri</span>
        </h1>

        <div class="lifci-home-hero__intro">
            <div class="lifci-home-hero__line"></div>

            <p class="lifci-home-hero__text">
                Renkli, özenli ve günlük kullanıma uygun el yapımı lif modelleri.
            </p>
        </div>

        <div class="lifci-home-hero__actions">
            <a href="/shop/" class="lifci-home-hero__button">
                Koleksiyonu Keşfet
                <span class="lifci-home-hero__button-arrow">→</span>
            </a>
        </div>

    </div>

</section>

<div class="lifci-home-hero__actions">
<a href="/magaza/" class="lifci-home-hero__button">
Koleksiyonu Keşfet
<span class="lifci-home-hero__button-arrow">→</span>
</a>
</div>

</div>

burada shop yazıyordu onu magaza olarak değiştirirsin. 404 döndürmesin

çok teşekkür ederim hocam çok güzel oldu

Hocam elinize sağlık, amaç belli zaten. Böyle bir şeyi hiç bilmeden yapıp yayına almak bile güzel iş.

Tasarım tarafında biraz daha boşluk, font düzeni ve mobil görünüm tarafına bakardım ben. Bir de içerik çoğaldıkça ana sayfada neyin nerede olduğu daha önemli olacak.

Amatör diye küçümsemeyin, çoğu kişi buraya kadar bile gelmiyor