html css ile bunu nasıl yapabilirim ?

30-11-2022, 13:03:40

ZimmeR

Resmi Shopify Partner

Merhaba arkadaşlar
Anasayfayı 4 e bölüm resim eklemek istiyorum her resme tıkladığında onla ilgili
sub1.abc.com
sub2.abc.com
sub3.abc.com
sub4.abc.com gibi sub domaine gitmesini istiyorum ama güzel hazır bir tasarım bulamadım nasıl bulabilirim.

resimdeki gibi tabi ama daha şık birşey arıyorum

30-11-2022, 13:09:49

#2

webgrr

Google bootstrap grid template example falan yazıp örnekleri bulabilirsin

30-11-2022, 13:10:23

#3

bulutaylak

https://codepen.io/bulutaylak/full/qBKMjVZ Hazır bir şey bulman zor, bunun içine görselleri ekleyip devamını getirebilirsin.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home grid</title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        .section_1, .section_2, .section_3, .section_4{
            width: 50%;
            height: 50vh;
            float: left;
        }
        @media only screen and (max-width: 768px) {
            .section_1, .section_2, .section_3, .section_4{
                width: 100%;
                height: 50vh;
                float: left;
            }    
        }
    </style>
</head>
<body>
    <div class="section_1" style="background: red;"></div>
    <div class="section_2" style="background: black;"></div>
    <div class="section_3" style="background: pink;"></div>
    <div class="section_4" style="background: yellow;"></div>
</body>
</html>

30-11-2022, 13:13:12

#4

FurkanT

<head>
<style>
body{
margin: 0;
padding: 0; }
html, body { height: 100%; padding: 0; margin: 0; }
div { width: 50%; height: 50%; float: left; }
#solust { background: #777; }
#sagust { background: #333; }
#solalt { background: #333; }
#sagalt { background: #777; }
</style>
</head>
<body>
<div id="solust">
<a href="#"><img src="https://cdn.r10.net/modern/img/logo/svg/light.svg"></a>
</div>
<div id="sagust">
<a href="#"><img src="https://cdn.r10.net/modern/img/logo/svg/light.svg"></a>
</div>
<div id="solalt">
<a href="#"><img src="https://cdn.r10.net/modern/img/logo/svg/light.svg"></a>
</div>
<div id="sagalt">
<a href="#"><img src="https://cdn.r10.net/modern/img/logo/svg/light.svg"></a>
</div>
</body>

30-11-2022, 13:16:39

#5

ZimmeR

Resmi Shopify Partner

Hepinize teşekkür ederim.

30-11-2022, 15:16:29

#6

ZimmeR

Resmi Shopify Partner

FurkanT adlı üyeden alıntı: mesajı görüntüle

<head>
<style>
body{
margin: 0;
padding: 0; }
html, body { height: 100%; padding: 0; margin: 0; }
div { width: 50%; height: 50%; float: left; }
#solust { background: #777; }
#sagust { background: #333; }
#solalt { background: #333; }
#sagalt { background: #777; }
</style>
</head>
<body>
<div id="solust">
<a href="#"><img src="https://cdn.r10.net/modern/img/logo/svg/light.svg"></a>
</div>
<div id="sagust">
<a href="#"><img src="https://cdn.r10.net/modern/img/logo/svg/light.svg"></a>
</div>
<div id="solalt">
<a href="#"><img src="https://cdn.r10.net/modern/img/logo/svg/light.svg"></a>
</div>
<div id="sagalt">
<a href="#"><img src="https://cdn.r10.net/modern/img/logo/svg/light.svg"></a>
</div>
</body>

<head>
<style>
body{
margin: 0;
padding: 0; }
html, body { height: 100%; padding: 0; margin: 0; }

div { width: 50%; height: 50%; float: left;  }
#solust { background: #777; }
#sagust { background: #333; }
#solalt { background: #333; }
#sagalt { background: #777; }
</style>
</head>
<body>
<div id="solust">
<center><a href="#"><img src="1.png"></a></center>
</div>
<div id="sagust">
<center><a href="#"><img src="2.png"></a></center>
</div>
<div id="solalt">
<center><a href="#"><img src="3.png"></a></center>
</div>
<div id="sagalt">
<center><a href="#"><img src="4.png"></a></center>
</div>
</body>

resimleri yatay ortaladım fakat dikey nasıl ortalayabilirim ?

30-11-2022, 15:22:17

#7

mavikorku

float: left; kaldır

30-11-2022, 15:23:19

#8

ZimmeR

Resmi Shopify Partner

mavikorku adlı üyeden alıntı: mesajı görüntüle

float: left; kaldır

onu kaldırınca da alt alta geliyor kareler

30-11-2022, 15:36:53

#9

FurkanT

<head>
<style>
body {margin: 0; padding: 0;}
html, body {height: 100%; padding: 0; margin: 0;}
div {width: 50%; height: 50%; float: left;}
#solust img {position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%);}
#sagust img {position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%);}
#solalt img {position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%);}
#sagalt img {position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%);}
#solust {background: #777;}
#sagust {background: #333;}
#solalt {background: #333;}
#sagalt {background: #777;}
</style>
</head>
<body>
<div id="solust">
<a href="#"><img src="https://cdn.r10.net/modern/img/logo/svg/light.svg"></a>
</div>
<div id="sagust">
<a href="#"><img src="https://cdn.r10.net/modern/img/logo/svg/light.svg"></a>
</div>
<div id="solalt">
<a href="#"><img src="https://cdn.r10.net/modern/img/logo/svg/light.svg"></a>
</div>
<div id="sagalt">
<a href="#"><img src="https://cdn.r10.net/modern/img/logo/svg/light.svg"></a>
</div>
</body>