İki Farklı Fiyat Tablosu Tasarımı

[CapScroLL]

Yeni projem için fiyat tablosu hazırlıyorum fakat iki tasarım yapıp farklı gözlerden öneri almayı uygun gördüm, renkler problem değil genel olarak tasarım hakkında fikirleriniz nelerdir? Sizce yapı olarak hangisi daha iyi?

Kullanmak isteyen olur diye Codepen penlerini bırakıyorum, ayrıca hover efektlerini görmek için de girebilirsiniz;
SDN Price Card - 1 (Codepen)
SDN Price Card - 2 (Codepen)

 

[Realhas_The_GreatFan2]

İkinci tablo çok güzel görünüyor.

 

[Forumun TDK'si]

SDN Price Card - 1 olan daha hoş.

 

[CapScroLL]

Linklerde numaralandırma hatası yapmışım, tekrar düzelttim.
İlk fotoğraf 1 numaralı oluyor ikinci fotoğraf 2 numaralı oluyor, önceden gelen arkadaşların kafası karışmasın.

Önerilerinizi sunduğunuz için teşekkür ederim.

 

[Forumun TDK'si]

Linklerde numaralandırma hatası yapmışım, tekrar düzelttim.
İlk fotoğraf 1 numaralı oluyor ikinci fotoğraf 2 numaralı oluyor, önceden gelen arkadaşların kafası karışmasın.

Önerilerinizi sunduğunuz için teşekkür ederim.

2. olanın geçişini daha canlı bir renk yapar mısın merak ettim de?

 

[Yasiin]

2. Gayet hoş fakat renklendirmede değişiklikler yaparsan çok güzel olur.

 

[CapScroLL]

2. olanın geçişini daha canlı bir renk yapar mısın merak ettim de?

2. Gayet hoş fakat renklendirmede değişiklikler yaparsan çok güzel olur.

Şu şekilde nasıl?

 

[Realhas_The_GreatFan2]

Şu şekilde nasıl?
Ekli dosyayı görüntüle 108059

Çok güzel ve tatlı. ?

Mesaj otomatik birleştirildi: 11 Temmuz 2020

Şu şekilde nasıl?
Ekli dosyayı görüntüle 108059

Ama eskisine kalsın.

 

[Yasiin]

Şu şekilde nasıl?
Ekli dosyayı görüntüle 108059

Arka plandaki rengi biraz koyulaştırıp ön taraftaki yazıları biraz daha ön plana çıkartırsan bitti bu iş. ??

 

[Forumun TDK'si]

Şu şekilde nasıl?
Ekli dosyayı görüntüle 108059

Bence daha güzel oldu eğer böyle olursa 2. daha iyi. Sarı tonunu da dener misin bir?
@CapScroLL CSS'i böye dener misin?

body{
  background: #fcb514 !important;
  font-family:arial, helvetica, sans-serif;
  margin: 0;
  padding: 0;
}
section{
  padding: 100px 0;
}
.card-table{
  text-align:center;
  overflow: hidden;
  margin: 20px;
  background: #f7f7f7;
  box-sizing: border-box;
  box-shadow: inset 0 0 40px rgba(0,0,0,.2), 0 20px 50px rgba(0,0,0,.5);
border-radius: 20px;
}
.card-table .card-head{
  padding: 50px;
  background: linear-gradient(45deg, #fcb514, #a32638);
}

.card-table .card-head h3{
  text-transform: uppercase;
  color: #fff
  margin: 0;
  padding: 0;
  font-weight:200;
}
.card-table .card-head h4{
  text-transform: uppercase;
  color: #fff;
  margin: 0;
  padding: 0;
  font-size:32px;
  font-weight:400;
}
.card-table .card-tbody{
  position:relative;
}
.card-table .card-tbody ul{
  position: relative;
  list-style:none;
  margin:0;
  padding:4px 0;
  text-transform: uppercase;
  font-size:16px;
}
.card-table .card-tbody ul li{
  padding: 20px 0;
  transition: all .3s ease-in-out;
}
.card-table .card-tbody ul li:hover{
  color:white;
  background: linear-gradient(45deg, #fcb514, #a32638);
}
.card-table .card-tbutton{
  padding: 32px 0;
  background: linear-gradient(-45deg, #fcb514, #a32638);
  position: relative;
}
.card-table .card-tbutton a{
  text-decoration:none;
  background: linear-gradient(45deg, #fcb514, #a32638);
  border-radius:50px;
  padding: 16px 64px;
  color: #fff;
  font-size:16px;
  transition: all .3s ease-in-out;
}
.card-table .card-tbutton a:hover{
  font-size:20px;
}
.col-4:nth-child(2) .card-table{
  transform: scale(1.1);
}

 

[CapScroLL]

Arka plandaki rengi biraz koyulaştırıp ön taraftaki yazıları biraz daha ön plana çıkartırsan bitti bu iş. ??

Siteye ekleyeceğim için arkaplan değişecek, göstermelik olarak rastgele renkler atıyorum ama siteye attığımda muhtemelen hafif sönük beyaz olur, yazı konusunu hallederim görüşlerin için teşekkürler

Bence daha güzel oldu eğer böyle olursa 2. daha iyi. Sarı tonunu da dener misin bir?

Şöyle bir şey oluyor ama beyaz arkaplanda biraz fazla göz yorar.

Senin CSS kodlarını denedim hover için gradient verince de güzel bir görüntü oluyor, renkler kullanacağım arkaplan için pek uygun değil bu yüzden biraz daha kapalı tonları tercih etmem daha uygun olur.

 

[panzr]

Şu şekilde nasıl?
Ekli dosyayı görüntüle 108059

Bu çok güzel olmuş, eline sağlık.

Mesaj otomatik birleştirildi: 11 Temmuz 2020

Siteye ekleyeceğim için arkaplan değişecek, göstermelik olarak rastgele renkler atıyorum ama siteye attığımda muhtemelen hafif sönük beyaz olur, yazı konusunu hallederim görüşlerin için teşekkürler


Şöyle bir şey oluyor ama beyaz arkaplanda biraz fazla göz yorar.
Ekli dosyayı görüntüle 108062

Senin CSS kodlarını denedim hover için gradient verince de güzel bir görüntü oluyor, renkler kullanacağım arkaplan için pek uygun değil bu yüzden biraz daha kapalı tonları tercih etmem daha uygun olur.

Fikrimi değiştirdim bu daha güzel olmuş

 

[Forumun TDK'si]

Siteye ekleyeceğim için arkaplan değişecek, göstermelik olarak rastgele renkler atıyorum ama siteye attığımda muhtemelen hafif sönük beyaz olur, yazı konusunu hallederim görüşlerin için teşekkürler


Şöyle bir şey oluyor ama beyaz arkaplanda biraz fazla göz yorar.
Ekli dosyayı görüntüle 108062

Senin CSS kodlarını denedim hover için gradient verince de güzel bir görüntü oluyor, renkler kullanacağım arkaplan için pek uygun değil bu yüzden biraz daha kapalı tonları tercih etmem daha uygun olur.

Benim attığım CSS Galatasaray Edition'dı? Ama geçişli renkler göze daha hoş geliyor.

Mesaj otomatik birleştirildi: 11 Temmuz 2020

Fikrimi değiştirdim bu daha güzel olmuş

Bir de attığım CSS'i dene!

 

[Creative]

2 nümero daha iyi..