Tasarımım nasıl olmuş?

R

Rufiq Cavadov

Gigapat
Zamanın Tanığı Forumun Hafızası
Katılım
12 Eylül 2013
Mesajlar
3.732
Makaleler
3
Çözümler
10
Yer
Azərbaycan
Daha fazla  
Cinsiyet
Erkek
Merhaba. Sadece öylesine birşeyler yapmak istedim. Sizce nasıl olmuş?

1667253865010.png


1667253908524.png


HTML: 
<!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>Document</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="logo">
            <a href="#">hepsiburada</a>
        </div>
        <div class="search">
            <ion-icon name="search-outline"></ion-icon>
            <input type="text" placeholder="Ürün kategori veya marka ara">
        </div>
        <div class="actions">
            <ul>
                <li>
                    <a href="#">
                        <ion-icon name="person-outline"></ion-icon>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <ion-icon name="bag-handle-outline"></ion-icon>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <div class="main-content">
        <div class="product">
            <h2>Dell Inspiron 15 3511 Intel Core i5 1135G7 8GB 256GB SSD 15.6" FHD Ubuntu I3511122SPPU Taşınabilir Bilgisayar</h2>
            <img src="https://productimages.hepsiburada.net/s/223/500/110000202494983.jpg" alt="">
            <div class="product-price">
                12,999 TL
            </div>
            <a href="#" class="link">Satın Al</a>
        </div>
        <div class="product">
            <h2>Acer Aspire 3 A315-56-327T Intel Core i3 1005G1 8GB 256GB SSD Freedos 15.6'' FHD Taşınabilir Bilgisayar NX.HS5EY.006</h2>
            <img src="https://productimages.hepsiburada.net/s/273/1500/110000258934394.jpg" alt="">
            <div class="product-price">
                6.998,99 TL
            </div>
            <a href="#" class="link">Satın Al</a>
        </div>
        <div class="product">
            <h2>Lenovo V14 ITL Gen2 Intel Core i5 1135G7 8GB 512GB SSD Windows 10 Home 14" FHD Taşınabilir Bilgisayar 82KA0027TX</h2>
            <img src="https://productimages.hepsiburada.net/s/268/1500/110000253796405.jpg" alt="">
            <div class="product-price">
                6.998,99 TL
            </div>
            <a href="#" class="link">Satın Al</a>
        </div>
        <div class="product">
            <h2>Asus TUF Radeon RX6800 Gaming OC 16GB GDDR6 256Bit 2340MHz OC 1xHDMI 3xDP Ekran Kartı TUF-RX6800-O16G-GAMING</h2>
            <img src="https://productimages.hepsiburada.net/s/55/500/11212374868018.jpg" alt="">
            <div class="product-price">
                13.998,99 TL
            </div>
            <a href="#" class="link">Satın Al</a>
        </div>
        <div class="product">
            <h2>Kingston A400 SSDNow 240GB 500MB-350MB/s Sata3 2.5" SSD (SA400S37/240G)</h2>
            <img src="https://productimages.hepsiburada.net/s/3/500/9590225895474.jpg" alt="">
            <div class="product-price">
                429,00 TL
            </div>
            <a href="#" class="link">Satın Al</a>
        </div>
        <div class="product">
            <h2>Kingston A400 SSDNow 240GB 500MB-350MB/s Sata3 2.5" SSD (SA400S37/240G)</h2>
            <img src="https://productimages.hepsiburada.net/s/3/500/9590225895474.jpg" alt="">
            <div class="product-price">
                429,00 TL
            </div>
            <a href="#" class="link">Satın Al</a>
        </div>
        <div class="product">
            <h2>Asus TUF Radeon RX6800 Gaming OC 16GB GDDR6 256Bit 2340MHz OC 1xHDMI 3xDP Ekran Kartı TUF-RX6800-O16G-GAMING</h2>
            <img src="https://productimages.hepsiburada.net/s/55/500/11212374868018.jpg" alt="">
            <div class="product-price">
                13.998,99 TL
            </div>
            <a href="#" class="link">Satın Al</a>
        </div>
        <div class="product">
            <h2>Dell Inspiron 15 3511 Intel Core i5 1135G7 8GB 256GB SSD 15.6" FHD Ubuntu I3511122SPPU Taşınabilir Bilgisayar</h2>
            <img src="https://productimages.hepsiburada.net/s/223/500/110000202494983.jpg" alt="">
            <div class="product-price">
                12,999 TL
            </div>
            <a href="#" class="link">Satın Al</a>
        </div>
        <div class="product">
            <h2>Dell Inspiron 15 3511 Intel Core i5 1135G7 8GB 256GB SSD 15.6" FHD Ubuntu I3511122SPPU Taşınabilir Bilgisayar</h2>
            <img src="https://productimages.hepsiburada.net/s/223/500/110000202494983.jpg" alt="">
            <div class="product-price">
                12,999 TL
            </div>
            <a href="#" class="link">Satın Al</a>
        </div>
        <div class="product">
            <h2>Dell Inspiron 15 3511 Intel Core i5 1135G7 8GB 256GB SSD 15.6" FHD Ubuntu I3511122SPPU Taşınabilir Bilgisayar</h2>
            <img src="https://productimages.hepsiburada.net/s/223/500/110000202494983.jpg" alt="">
            <div class="product-price">
                12,999 TL
            </div>
            <a href="#" class="link">Satın Al</a>
        </div>
    </div>

    <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</body>
</html>
 
Son düzenleme:
Rufiq Cavadov dedi:
Merhaba. Sadece öylesine birşeyler yapmak istedim. Sizce nasıl olmuş?

Eki Görüntüle 1559381

Eki Görüntüle 1559383

HTML: 
<!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>Document</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="logo">
            <a href="#">hepsiburada</a>
        </div>
        <div class="search">
            <ion-icon name="search-outline"></ion-icon>
            <input type="text" placeholder="Ürün kategori veya marka ara">
        </div>
        <div class="actions">
            <ul>
                <li>
                    <a href="#">
                        <ion-icon name="person-outline"></ion-icon>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <ion-icon name="bag-handle-outline"></ion-icon>
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <div class="main-content">
        <div class="product">
            <h2>Dell Inspiron 15 3511 Intel Core i5 1135G7 8GB 256GB SSD 15.6" FHD Ubuntu I3511122SPPU Taşınabilir Bilgisayar</h2>
            <img src="https://productimages.hepsiburada.net/s/223/500/110000202494983.jpg" alt="">
            <div class="product-price">
                12,999 TL
            </div>
            <a href="#" class="link">Satın Al</a>
        </div>
        <div class="product">
            <h2>Acer Aspire 3 A315-56-327T Intel Core i3 1005G1 8GB 256GB SSD Freedos 15.6'' FHD Taşınabilir Bilgisayar NX.HS5EY.006</h2>
            <img src="https://productimages.hepsiburada.net/s/273/1500/110000258934394.jpg" alt="">
            <div class="product-price">
                6.998,99 TL
            </div>
            <a href="#" class="link">Satın Al</a>
        </div>
        <div class="product">
            <h2>Lenovo V14 ITL Gen2 Intel Core i5 1135G7 8GB 512GB SSD Windows 10 Home 14" FHD Taşınabilir Bilgisayar 82KA0027TX</h2>
            <img src="https://productimages.hepsiburada.net/s/268/1500/110000253796405.jpg" alt="">
            <div class="product-price">
                6.998,99 TL
            </div>
            <a href="#" class="link">Satın Al</a>
        </div>
        <div class="product">
            <h2>Asus TUF Radeon RX6800 Gaming OC 16GB GDDR6 256Bit 2340MHz OC 1xHDMI 3xDP Ekran Kartı TUF-RX6800-O16G-GAMING</h2>
            <img src="https://productimages.hepsiburada.net/s/55/500/11212374868018.jpg" alt="">
            <div class="product-price">
                13.998,99 TL
            </div>
            <a href="#" class="link">Satın Al</a>
        </div>
        <div class="product">
            <h2>Kingston A400 SSDNow 240GB 500MB-350MB/s Sata3 2.5" SSD (SA400S37/240G)</h2>
            <img src="https://productimages.hepsiburada.net/s/3/500/9590225895474.jpg" alt="">
            <div class="product-price">
                429,00 TL
            </div>
            <a href="#" class="link">Satın Al</a>
        </div>
        <div class="product">
            <h2>Kingston A400 SSDNow 240GB 500MB-350MB/s Sata3 2.5" SSD (SA400S37/240G)</h2>
            <img src="https://productimages.hepsiburada.net/s/3/500/9590225895474.jpg" alt="">
            <div class="product-price">
                429,00 TL
            </div>
            <a href="#" class="link">Satın Al</a>
        </div>
        <div class="product">
            <h2>Asus TUF Radeon RX6800 Gaming OC 16GB GDDR6 256Bit 2340MHz OC 1xHDMI 3xDP Ekran Kartı TUF-RX6800-O16G-GAMING</h2>
            <img src="https://productimages.hepsiburada.net/s/55/500/11212374868018.jpg" alt="">
            <div class="product-price">
                13.998,99 TL
            </div>
            <a href="#" class="link">Satın Al</a>
        </div>
        <div class="product">
            <h2>Dell Inspiron 15 3511 Intel Core i5 1135G7 8GB 256GB SSD 15.6" FHD Ubuntu I3511122SPPU Taşınabilir Bilgisayar</h2>
            <img src="https://productimages.hepsiburada.net/s/223/500/110000202494983.jpg" alt="">
            <div class="product-price">
                12,999 TL
            </div>
            <a href="#" class="link">Satın Al</a>
        </div>
        <div class="product">
            <h2>Dell Inspiron 15 3511 Intel Core i5 1135G7 8GB 256GB SSD 15.6" FHD Ubuntu I3511122SPPU Taşınabilir Bilgisayar</h2>
            <img src="https://productimages.hepsiburada.net/s/223/500/110000202494983.jpg" alt="">
            <div class="product-price">
                12,999 TL
            </div>
            <a href="#" class="link">Satın Al</a>
        </div>
        <div class="product">
            <h2>Dell Inspiron 15 3511 Intel Core i5 1135G7 8GB 256GB SSD 15.6" FHD Ubuntu I3511122SPPU Taşınabilir Bilgisayar</h2>
            <img src="https://productimages.hepsiburada.net/s/223/500/110000202494983.jpg" alt="">
            <div class="product-price">
                12,999 TL
            </div>
            <a href="#" class="link">Satın Al</a>
        </div>
    </div>

    <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</body>
</html>
Genişletmek için tıkla...
Çok da farklı olmamış gibi, ama eline sağlık.
 
Buton büyüklüğüne göre işlevi az. Satın alma yazısını sola alignleyip yarısından sonraki %25'lik kısıma 2 adet beğeni veya buna benzer bir ikon koyun. Tamamen react uyumlu olsun.
Product sınıfı içinde gölgeleri biraz daha belli edebilirsin. Geliştirilebilir fakat çok boşluk var. Elinize sağlık.

Ekleme: Animasyonlar içinde şu siteyi kullanabilirsin.
 
Hepsiburada'da fontu kötü biraz ince bir font deneseniz iyi olur gibi ve satın al yazısının büyütseniz güzel olur.
 
Rufiq Cavadov dedi:
Merhaba. Sadece öylesine bir şeyler yapmak istedim. Sizce nasıl olmuş?

Eki Görüntüle 1559381

Eki Görüntüle 1559383

HTML: 
<!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>Document</title>
 <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;900&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="styles.css">
</head>
<body>
 <div class="container">
 <div class="logo">
 <a href="#">hepsiburada</a>
 </div>
 <div class="search">
 <ion-icon name="search-outline"></ion-icon>
 <input type="text" placeholder="Ürün kategori veya marka ara">
 </div>
 <div class="actions">
 <ul>
 <li>
 <a href="#">
 <ion-icon name="person-outline"></ion-icon>
 </a>
 </li>
 <li>
 <a href="#">
 <ion-icon name="bag-handle-outline"></ion-icon>
 </a>
 </li>
 </ul>
 </div>
 </div>
 <div class="main-content">
 <div class="product">
 <h2>Dell Inspiron 15 3511 Intel Core i5 1135G7 8GB 256GB SSD 15.6" FHD Ubuntu I3511122SPPU Taşınabilir Bilgisayar</h2>
 <img src="https://productimages.hepsiburada.net/s/223/500/110000202494983.jpg" alt="">
 <div class="product-price">
 12,999 TL.
 </div>
 <a href="#" class="link">Satın Al</a>
 </div>
 <div class="product">
 <h2>Acer Aspire 3 A315-56-327T Intel Core i3 1005G1 8GB 256GB SSD Freedos 15.6'' FHD Taşınabilir Bilgisayar NX.HS5EY.006</h2>
 <img src="https://productimages.hepsiburada.net/s/273/1500/110000258934394.jpg" alt="">
 <div class="product-price">
 6.998,99 TL.
 </div>
 <a href="#" class="link">Satın Al</a>
 </div>
 <div class="product">
 <h2>Lenovo V14 ITL Gen2 Intel Core i5 1135G7 8GB 512GB SSD Windows 10 Home 14" FHD Taşınabilir Bilgisayar 82KA0027TX</h2>
 <img src="https://productimages.hepsiburada.net/s/268/1500/110000253796405.jpg" alt="">
 <div class="product-price">
 6.998,99 TL.
 </div>
 <a href="#" class="link">Satın Al</a>
 </div>
 <div class="product">
 <h2>Asus TUF Radeon RX6800 Gaming OC 16GB GDDR6 256Bit 2340MHz OC 1xHDMI 3xDP Ekran Kartı TUF-RX6800-O16G-GAMING</h2>
 <img src="https://productimages.hepsiburada.net/s/55/500/11212374868018.jpg" alt="">
 <div class="product-price">
 13.998,99 TL.
 </div>
 <a href="#" class="link">Satın Al</a>
 </div>
 <div class="product">
 <h2>Kingston A400 SSDNow 240GB 500MB-350MB/s Sata3 2.5" SSD (SA400S37/240G)</h2>
 <img src="https://productimages.hepsiburada.net/s/3/500/9590225895474.jpg" alt="">
 <div class="product-price">
 429,00 TL.
 </div>
 <a href="#" class="link">Satın Al</a>
 </div>
 <div class="product">
 <h2>Kingston A400 SSDNow 240GB 500MB-350MB/s Sata3 2.5" SSD (SA400S37/240G)</h2>
 <img src="https://productimages.hepsiburada.net/s/3/500/9590225895474.jpg" alt="">
 <div class="product-price">
 429,00 TL.
 </div>
 <a href="#" class="link">Satın Al</a>
 </div>
 <div class="product">
 <h2>Asus TUF Radeon RX6800 Gaming OC 16GB GDDR6 256Bit 2340MHz OC 1xHDMI 3xDP Ekran Kartı TUF-RX6800-O16G-GAMING</h2>
 <img src="https://productimages.hepsiburada.net/s/55/500/11212374868018.jpg" alt="">
 <div class="product-price">
 13.998,99 TL.
 </div>
 <a href="#" class="link">Satın Al</a>
 </div>
 <div class="product">
 <h2>Dell Inspiron 15 3511 Intel Core i5 1135G7 8GB 256GB SSD 15.6" FHD Ubuntu I3511122SPPU Taşınabilir Bilgisayar</h2>
 <img src="https://productimages.hepsiburada.net/s/223/500/110000202494983.jpg" alt="">
 <div class="product-price">
 12,999 TL.
 </div>
 <a href="#" class="link">Satın Al</a>
 </div>
 <div class="product">
 <h2>Dell Inspiron 15 3511 Intel Core i5 1135G7 8GB 256GB SSD 15.6" FHD Ubuntu I3511122SPPU Taşınabilir Bilgisayar</h2>
 <img src="https://productimages.hepsiburada.net/s/223/500/110000202494983.jpg" alt="">
 <div class="product-price">
 12,999 TL.
 </div>
 <a href="#" class="link">Satın Al</a>
 </div>
 <div class="product">
 <h2>Dell Inspiron 15 3511 Intel Core i5 1135G7 8GB 256GB SSD 15.6" FHD Ubuntu I3511122SPPU Taşınabilir Bilgisayar</h2>
 <img src="https://productimages.hepsiburada.net/s/223/500/110000202494983.jpg" alt="">
 <div class="product-price">
 12,999 TL.
 </div>
 <a href="#" class="link">Satın Al</a>
 </div>
 </div>

 <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</body>
</html>
Genişletmek için tıkla...

Kötü amaçla kullanılmayacaksa güzel başarılı.
 
Temiz bir tasarım olmuş. Fakat sondaki SSD olan Div'in text satırı kısa gelince fiyat yazan kısım yukarı çıkmış. Bu gibi kart tasarımlarında kullanılan bileşenlerin height ve width değerleri önceden belirlenirse responsive duyarlılık artacaktır. Eline sağlık.
 
Proxy dedi:
Temiz bir tasarım olmuş. Fakat sondaki SSD olan Div'in text satırı kısa gelince fiyat yazan kısım yukarı çıkmış. Bu gibi kart tasarımlarında kullanılan bileşenlerin height ve width değerleri önceden belirlenirse responsive duyarlılık artacaktır. Eline sağlık.
Genişletmek için tıkla...
O sorunu çözemedim. Muhtemelen height ile ilgili sorun.

Tasarımın CSS kodları:

CSS: 
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: none;
    outline: none;
    text-decoration: none;
    list-style-type: none;
}
body {
    padding: 1rem;
    font-family: 'Poppins', sans-serif;
}
.container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.logo {
    display: flex;
    align-items: center;
    width: 25%;
}
.logo a {
    font-size: 26px;
    font-family: 'Poppins', sans-serif;
    font-weight: 900;
    color: #ff6000;
}
.search {
    display: flex;
    align-items: center;
    background: #fff;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    border-radius: 15px;
    width: 500px;
    padding: 0.75rem 0.75rem 0.75rem 1.5rem;
    font-size: 24px;
    color: #999;
    width: 50%;
}
.search input {
    width: 100%;
    height: 40px;
    padding-left: 0.75rem;
    color: #999;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
}
.actions {
    width: 25%;
}
.actions ul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 26px;
}
.actions ul li a {
    color: #999;
    font-size: 26px;
}

.main-content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 10px;
    padding-top: 40px;
}
.product {
    width: 220px;
    height: 440px;
    border-radius: 4px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    background: #fff;
    padding: 1rem;
    position: relative;
}
.product h2 {
    color: rgb(72, 72, 72);
    font-weight: 300;
    font-size: 11px;
    text-align: center;
    margin-top: 15px;
}
.product img {
    max-width: 100%;
}
.product .product-price {
    color: rgb(255, 96, 0);
    text-align: center;
    font-size: 20px;
    font-weight: 900;
    margin-bottom: 15px;
}

.product a.link {
    display: inlin-block;
    text-align: center;
    color: #fff;
    background: rgb(255, 96, 0);
    width: 90%;
    padding: 1rem;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    border-radius: 15px;
    position: absolute;
    bottom: 15px;
    left: 0;
    right: 0;
    margin: auto;
}

@media only screen and (max-width: 768px) {
    .search {
        padding: 0.25rem 0.25rem 0.25rem 1.5rem;
    }
    .search input {
        font-size: 9px;
    }
    .logo a {
        font-size: 14px;
    }
    .product {
        width: 170px;
    }
}
 
"Hepsiburada" yazısının fontunu değiştirmeyi deneyebilirsiniz. Bi' tık daha ince yazı fontu göze daha güzel görünecektir. Bir de butonları küçültün çok büyük duruyor. Enlemesine daraltıp bir "Sepet" ikonu da ekleyebilirsin👍🏻
 

Benzer konular

3
Banner tasarımım nasıl olmuş?
2
Mesaj
19
Görüntüleme
1.339
Linux Kaymak
Linux Kaymak
2
Web tasarımım nasıl olmuş?
3 4 5
Mesaj
43
Görüntüleme
3.947
jusbeprophet
jusbeprophet
M
Web sitesi tasarımım nasıl olmuş?
2
Mesaj
13
Görüntüleme
840
Chezzaritz
Chezzaritz
Berat.xx56
Web site tasarımım nasıl olmuş?
2 3
Mesaj
25
Görüntüleme
1.608
533388
5
Meraklı.e
Photoshop ile web site tasarımım nasıl olmuş?
2
Mesaj
11
Görüntüleme
700
astegon
astegon

Bu konuyu görüntüleyen kullanıcılar

Toplam: 2 (üye: 0, misafir: 2)

Technopat Haberler

Yeni konular

Yeni mesajlar

Geri
Yukarı