Aksesuarlar için açılış sayfası örnekleri. En iyi açılış sayfaları: uzman seçimi

Çok sayıda RuNet'te bulunan siteler çok monotondur ve her zaman yeni, sıra dışı, dikkat çeken bir şey yaratmak gerekir. Bu sefer sadece sitedeki başka bir etki hakkında değil, bu etkilerin tek bir büyük projede nasıl birleştirilebileceğini göstermek için bir makale yazmaya karar verdim. Sitenizin rastgele görünen bir dizi gibi görünmemesi için bu çok önemlidir. farklı taraflar animasyonlar. En iyi 10 interaktif seçkiyi dikkatinize sunmak istiyorum. Açılış sayfası dikkat etmeye değer.

Sitelerin oluşturulmasını ve özellikle inişleri incelerken nereden başlayacağımı küçük bir mini kursta anlattım:

İşte ilham almanız gereken 9 açılış sayfasından bir seçki:

Yanıt olarak içerikle birlikte bloğun bozulmasını hemen göreceğiniz için fareyi bile hareket ettiremeyeceğiniz sitenin mükemmel bir versiyonu. Arkasında yavaşça "yüzer" boşluk. Geçişler de sizi kayıtsız bırakamaz, çünkü hepsi birlikte gerçekleşir. ilginç etki ve görünüşe göre blokların her biri iki yarıya "kesilmiş".

Bu sitede kaydırırken hiçbir şey görünmüyor, ancak burada çok temel: açılır listeler, renk değişiklikleri, ek öğelerin görünümü ve açıklamalar. Sert etkiler yok, her şey yapılır üniforma stili. Efektlere dikkat etmenizi öneririm, bazıları projelerinize uygulanabilir.

Bu proje size zaten tanıdık gelecektir - bu profesyonel bir video barındırmadır. Ancak bu sayfa doğrudan bir mobil cihazdan video düzenleme olasılığından bahsediyor. Ancak sayfa kaydırıldığında meydana gelen etkilere odaklanmak istiyorum. İlk olarak, başlıktaki arka plan resmi küçültülür ve ardından telefonda görünür. Çok dikkat çekiyor değil mi?

Bu sitenin diğerlerinden ayırt edici bir özelliği, standart olmayan kaydırmadır. Gördüğünüz gibi yatay. Ayrıca içerik sola doğru sürüklenerek hareket gerçekleşir. Ancak daha da etkileyici olan, her bir bloktaki efektlerin sayısı: , , ve ayrıca blokların dikey kaydırılması. Arka plandaki video biraz kafa karıştırıcı ama yine de her şey oldukça orijinal ve sıra dışı yapılmış.

Burada vurgulu efektlere değil arka plana dikkatinizi çekmek istiyorum. Sonrasında tam dolu Sitede fare imlecini arka planda hareket ettirdiğinizde su üzerindeymiş gibi lekeler belirir. Ayrıca tıklandığında çizgiler oluşuyor ve bu efekt mükemmel bir izlenim bırakıyor. Bunu her sitede göremezsiniz.

Kaydırma işleminde sayfada çeşitli simgeler ve başlıklar (çizilmiş) belirir. Farkına varmadan çizim sürecine bakmaya ve sonunda orada ne olacağını beklemeye başlıyorsunuz, böylece çizilen metni okuyorsunuz. Bu etkinin nasıl yaratıldığıyla ilgileniyorsanız ve aynı etkiyi web sitenizde veya açılış sayfanızda yaratmak istiyorsanız, şu makaleleri inceleyin: ve.

Beni bu siteye çeken şey, fareyle üzerine gelme efektleriydi. Site modern minimalist tarzda oluşturulmuş olmasına rağmen, burada 3B nesneler çok güzel bir şekilde birleştirilmiştir: açılır kartpostallar, nesnelerin kartpostaldaki hareketi. Şuna da dikkat edin

Selamlar sevgili okurlarım. Bugün hakkında konuşacağız teknik noktalar, ürünlerimizin veya hizmetlerimizin satış dönüşümünü artırabiliriz. Biri önemli noktalar iyi düşünülmüş Açılış sayfası mal ile. Oluşturulması hakkında daha fazla konuşacağımız ve hazır sayfa kodlarını alacağımız sözde açılış sayfası.

Açılış Sayfası nedir? Bu, insanların genellikle bir reklama tıkladıktan sonra geldikleri sayfadır. Tek bir teklif için oluşturulur: ürün, hizmet veya abonelik. Etkili bir açılış sayfası, başarılı çevrimiçi pazarlamanın temel taşıdır. Ürün piyasadaki en iyisi olabilir, reklamlar mükemmel hale getirilir, ancak iyi bir açılış sayfası olmadan çabalar% 100 sonuç vermez. Ziyaretçilere neyin sunulduğunu ve neden onu istemeleri gerektiğini söyler. Aciliyet duygusu, hızlı karar vermeye ve kullanıcının müşteri kategorisine geçişine katkıda bulunur.

İniş nasıl oluşturulur? Cevabın dizgi yeteneğinde yattığına inanmak yanlıştır. İyi bir açılış sayfası, hedefler, metin, tasarım ve kod üzerinde iyi koordine edilmiş çalışmanın sonucudur. Aşağıda örnekleri verilecek olan açılış sayfası, yeni başlayanların mizanpajla çalışmanın temellerini öğrenmesine yardımcı olacak, ancak dönüşüm metinlerinin ve hedef kitleyi anlamanın yerini almayacaktır. Bunları çeşitli Açılış sayfası oluşturucuları kullanarak da oluşturabilirsiniz.

Bir açılış sayfası oluşturmadan önce kendinize şu soruyu sorun:

• Bir kişi açılış sayfasına girdikten sonra ne yapacak? Bir şey satın alacak mı? Formu doldurun? Bültene abone misiniz? Dönüşüm oranınızı izlemeden önce net hedefler belirleyin.
• Rakiplerim kimler? Aslında bunlar üç soru: kimler, ne kadar başarılılar ve başarıları nasıl uygulanabilir? Taklit, dalkavukluğun en içten şeklidir. Rakipler işe yarayan şeyi yapıyorsa, sitenizde tekrarlayın.
• İzleyicim kim? Nişinizi ve hedef kitlenizi ne kadar iyi anlarsanız, çabalarınızın karşılığını alma olasılığı o kadar artar.

Hepsi sunulmalı gerekli bilgi, ancak potansiyel bir müşteriyi bunaltmak ve uzaklaştırmak için yeterli değil.

İşe başlamadan önce, HTML ve CSS'ye hızlıca bir göz atalım. Nasıl çalıştıklarını anlamak, bir iniş oluşturmaya yardımcı olacaktır.

HTML, web sitelerini işlemek için bir tarayıcı biçimlendirme dilidir. içine alınmış etiketler kullanılarak yazılmıştır. açılı ayraçlar, içeriği tanımlayan.

Etiket, doldurmanın etrafında açılır () ve kapanır ():

içerik

Nokta özelleştirme için, özellikler adından sonra eklenir:

içerik

CSS - nasıl konumlandırılacağını belirler HTML öğeleri. Seçiciler, özellikler ve değerlerden oluşur:

#selector (özellik: değer;)

Seçici, html'deki belirli bir etiketin adıyla eşleşir. Değerleri değiştirerek ve özellikler ekleyerek düzenlenir dış görünüş. Aynı HTML'ye farklı CSS stilleri uygulayarak farklı sayfalar oluşturabilirsiniz.

Hızlı düzen için, önyüklemeye dayalı minimal tasarıma sahip bir şablon kullanacağız. Bu, düzeni hızlandırmak için tüm dünyada kullanılan kendi seçicileri olan bir sistemdir.

Mütevazı görünüyor.

Bu balıktan birkaç aşamada her zevke uygun bir site oluşturulur.

Bir klasördeki dizin yapısı:

• index.html: Bu, düzenleyeceğimiz ana dosyadır.
• /assets: işte yardımcı dosyalar:
• /css: dizin, önyükleme ve simge stillerini içerir. Düzenlenecek dosya main.css'dir.
• /img: web sitesi görüntüleri için klasör.
• /yazı tipleri: simge yazı tipleri.
• /js: önyükleme javascript dosyaları.

1. Adım: Başlığı Kullanma

Başlık ve alt başlıklar, teklifin değerini net bir şekilde iletmeye yardımcı olacak kilit yerlerdir.

Sitenin başlığını ve adını değiştirin. Burada dizgi yeteneği gerekli değildir - metniniz ekranda sarı ile vurgulanan yerlere yazılır.

Adım 2. Kısalık, din değiştirmenin kız kardeşidir. Avantajlar ve Oranlar Ekleme

4 bölüme ihtiyacınız olacak:

• avantajlar;
• oranlar;
• incelemeler;
• eylem çağrısı.

Ana içeriğin gerekli bölümleri ekleyeceğimiz "ana" bölümünü tasarlayalım:

…..
…..
…..
…..

Noktalar yerine doldurma ile doldurun.

Faydalar bölümü şu kodu gerektirecektir:

Avantajlar
Hızlı

Güvenilir

Sed diam nonummy

Elit, sed diam nonummy

Lorem ipsum dolor sit amet, adipiscing elit, sed diam nonummy

Lorem ipsum dolor sit amet, adipiscing elit, sed diam nonummy

Lorem ipsum dolor sit amet, adipiscing elit, sed diam nonummy

Lorem ipsum dolor sit amet, conctetuer adipiscing

Lorem ipsum dolor sit amet, conctetuer adipiscing

Lorem ipsum dolor sit amet, conctetuer adipiscing

Görsel içerik:

Şimdiye kadar özensiz görünüyor ama paniğe kapılmak için bir neden yok, devam ediyoruz.

Oranları yazın. İçerik, ilk adıma benzer şekilde değişir. Genel açıklama“tarifeler” sınıfı ve üç tarife ile.

tarife planları

Lorem ipsum dolor sit amet, to consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim and minimum veniam, quis nostrud exercitation ullamcorper suscipit lobortis nisl ut aliquip ex ea common consequat.

aylık/kişi başı

• Lorem ipsum dolor sit amet, adipiscing elitini inşa etmek


• Lorem ipsum dolor


• 10 Lorem ipsum

aylık/kişi başı

• Lorem ipsum dolor sit amet, adipiscing elitini inşa etmek


• Lorem ipsum dolor


• 10 Lorem ipsum

aylık/kişi başı

• Lorem ipsum dolor sit amet, adipiscing elitini inşa etmek


• Lorem ipsum dolor


• 10 Lorem ipsum

Öyle görünüyor.

Gelecekteki açılış sayfasının görünümüyle ilgilenmiyor olsak da, aşağıda değişen stil örneklerini ele alacağız.

3. Adım: Güven sinyalleri ve harekete geçirici mesaj

Hedef sinyallerinin kullanılması, ziyaretçilere markanın güvenilir olduğunu gösterir. Sinyaller alınabilir Farklı türde, ancak klasikler müşteri incelemeleridir.

Musteri degerlendirmeleri

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt utlabore et dolore magna aliqua. En az ve en az maliyetle egzersiz yapmak, her zaman mümkün olan en kısa sürede çalışır:

Bir harekete geçirici mesaj ayarlayın.

Bugün sipariş verirken yararlanın

Lorem ipsum dolor sit amet, to consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minimum veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea common consequat:

Yorumlar, potansiyel müşterilerin bir ürünü satın almaya karar vermesine yardımcı olur. Netlik için avatarlara ihtiyacımız var, bu yüzden onları hemen her alıntının altına yazacağız.

Müşteri Adı.

4. Adım: Şebeke Entegrasyonu ve Mobil Dostu

Izgarayı uygulamak için Bootstrap konteynerlerine ihtiyacımız var. İzin verilen sütun segmentlerinin toplam sayısının 12 olduğunu unutmamak önemlidir. Sınıf, içerik görüntüleme genişliğini tanımlar. Bu hazır ızgaranın avantajı, kapların uyarlanabilirlik düşünülerek tasarlanmış olması ve hemen uygulanabilir olmasıdır. mobil cihazlar. Detaylı Açıklama resmi sitede Ağ böyle görünüyor.

"Ana" içeriği bir kaba sarılacaktır. Bunu yapmak için üst kısmında şöyle yazılmıştır:

… .

Bloğun ekranın tüm genişliğine sığmasını istiyorsanız, içine kap yerleştirilir. Burada bir jumbotron ve harekete geçirici mesaj olacak.

Üst üste istiflenmesi gereken tüm elemanlar çizgi ayırıcılarla sarılacaktır.

Artık önyükleme ızgarasına odaklanarak sütunların genişliğini ayarlayabiliriz. Sardıktan sonra dolgu ekranın kenarlarına yapışmayı bıraktı, düzgün girintiler belirdi.

col-lg-4 sütun sınıfını kullanarak fiyatları arka arkaya ayarlayın. Satır satırlarının içinde, kaydırma için ayrı div'ler yazmaya artık gerek yok, bunları bir boşlukla ayırarak mevcut olanlarla birleştirebilirsiniz.

Benzer şekilde, incelemeler ve avantajlar bölümü için sütunlar belirledik. Elemanı yana taşımak istiyorsanız, col-lg-offset-2 ofset sütun sınıfını kullanın. Sondaki sayı, kaç temel sütunun kaydırılacağını belirler.

Adım 5. Yazı Tipleri ve Simgeler

Google Yazı Tipi başlıkları için yazı tipleri uyguluyoruz. Seçildiğinde, içe aktarma sekmesini açın ve buradaki verileri main.css dosyasına kopyalayın. Ayrıca, yeni yazı tipinin uygulandığı dosyaya başlık seçicileri de ekleriz.

@import "https://fonts.googleapis.com/css?family=Roboto+Condensed" /* başlıklar için içe aktarma yazı tipi */
.navbar markası,
h1,
h2,
h3,
h4,
h5,
h6 (
yazı tipi ailesi: "Roboto Yoğunlaştırılmış", sans-serif; /* Google yazı tipi çıktısı */
}

Anlaşılır olması açısından avantajlar, metin merkezi adını söyleyen bir sınıf ve önyükleme setinden FontAwesome simgeleridir.

Bu hazırlığı tamamlar.

En popüler üç türü kullanıyoruz: bir teklifle, bir formla ve bir geri sayım sayacıyla. Düzen tamamlandığında, şablon efektlerle desteklenecektir.

Ana gövde arka planını ve dolguyu ilk ekranı kaplayacak şekilde ayarlayın.

Jumbotron (
arka plan: #f5f5f5 url(../img/fon.jpg) üst orta tekrarsız;
maksimum genişlik: %100
üst dolgu: 250px;
alt dolgu: 200px
metin hizalama: merkez;
}

Jumbotron başlığının boyutunu h2'den h1'e değiştirin. Ardından, değiştirilmesi gereken öğeler için stilleri yazıyoruz.

Simgelerle başlayalım.

Faydaları ben(
renk: #cac4c4;
}

Pound işaretinden sonra bir renk belirtilir. Html renk tablolarını veya bir resim düzenleyiciyi kullanarak kendi seçeneğinizi belirleyebilirsiniz.

Bölüm başlıkları için girinti

bölüm h2 (
üst dolgu: 30px;
kenar boşluğu: 25 piksel;
}

Tarifelerin görünümünü sıraya koyduk. Kolaylık sağlamak için noktasal olarak seçmek istediğimiz öğeler için kendi sınıflarımızı oluşturuyoruz.

1 numaralı Tarife
$10

aylık/kişi başı

• Lorem ipsum dolor sit amet, adipiscing elitini inşa etmek


• Lorem ipsum dolor


• 10 Lorem ipsum

Ve bir sürü CSS. Bölümlerin hangi yerlerden sorumlu olduğu yorumlarda - /* eğik çizgiler arasında yıldızlarla yazılır */

/* =========Tarif stilleri======== */
/* Genel form tarife */
.pricing_item(
arka plan: #f2f2f2;
konum: göreli;
ekran: -webkit-flex;
ekran:esnek;

esnek yön: sütun;

hizalama öğeleri: streç;
metin hizalama: merkez;
-webkit-esnek: 0 1 330px;
esnek: 0 1 330 piksel;
dolgu: 2em 3em;
marj: 1em
renk: #262b38;
imleç: varsayılan;
taşma: gizli;

}
/* tıklamada arka planı değiştir */
.pricing_item: üzerine gelin (
renk: #444;
arka plan: #daebef;
}
/* her tarifede ayrı fiyat etiketi */
.pricing_item:ilk-çocuk .price (
arka plan: #9ba9b5;
}
.pricing_item:nth-child(2) .price (
arka plan: #1f6098;
}
/* geniş ekranlarda, tarifenin orta sütununu doldurma ve vurgulama */
@medya ekranı ve (min. genişlik: 66.250em) (
.pricing_item(
marj: 1.5em0;
}
.özellikli(
z-endeksi: 10;
kenar boşluğu: 0;
yazı tipi boyutu: 1.15em
}
}
/* başlık */
.pricing_item h3(
yazı tipi boyutu: 2em
kenar boşluğu: 0,5em 0 0;
renk: #1d211f;
}
/* fiyat etiketi desteği */
.fiyat(
yazı tipi boyutu: 2em
yazı tipi ağırlığı: kalın;
renk: #fff;
konum: göreli;
z-endeksi: 100;
satır yüksekliği: 95px;
genişlik: 100 piksel
yükseklik: 100 piksel;
marj: 1,15em otomatik 1em;
sınır yarıçapı: %50
arka plan: #77a5cc;
-webkit geçişi: renkli 0,3 saniye, arka plan 0,3 saniye;
geçiş: renkli 0,3 saniye, arka plan 0,3 saniye;
}
/* para birimi */
.para birimi(
yazı tipi boyutu: 0.5em
dikey hizalama: süper;
}
/* cümlenin inceltilmesi */
.cümle(
yazı tipi ağırlığı: kalın;
kenar boşluğu: 0 0 1em 0;
dolgu: 0 0 0,5em;
renk: #2a6496;
}
/* liste */
.pricing_item ul (
yazı tipi boyutu: 0.95em
kenar boşluğu: 0;
dolgu: 1,5em 0,5em 2,5em
metin hizalama: sola;
}
/* liste öğeleri */
.pricing_item li(
dolgu: 0.15em0;
}
/* tarife sipariş butonu */
.pricing_item düğmesi(
yazı tipi ağırlığı: kalın;
kenar boşluğu üst: otomatik;
dolgu: 1em 2em;
renk: #fff;
sınır yarıçapı: 5 piksel
arka plan: #428bca;
-webkit-geçişi: arka plan rengi 0,3 saniye;
geçiş: arka plan rengi 0,3 saniye;
}
/* buton tıklandığında rengi değiştir */
.pricing_item düğmesi: üzerine gelin,
.pricing_item düğmesi:odak(
arka plan rengi: #285e8e;
}
/* tarife geçmişi*/
.bg-2 (
arka plan: #dddddd;
}

Sonuç

Musteri degerlendirmeleri. Onlara düzgün bir görünüm verelim, yeri belirleyelim.

/* =========Görüş stilleri======== */
referanslar (
dolgu: 4em0;
metin hizalama: merkez;
}
.referanslar .avatar img (
sınır yarıçapı: %50
kayan nokta: sol;
ekran: satır içi;
sağ kenar boşluğu: 1m;
genişlik: 65 piksel
yükseklik: 65 piksel;
kenar boşluğu: 30 piksel;
}
.referanslar .avatar p(
metin hizalama: sola;
üst dolgu: 1em;
renk: #5d5d5d;
yazı tipi ağırlığı: 900
}

Son harekete geçirme ifadesini ve altbilgiyi süslemek için kalır.

/* Aksiyon */
.aksiyon(
arka plan: #476177;
minimum yükseklik: 180px;
genişlik: %100
dolgu: 4em0;
metin hizalama: merkez;
}
.eylem h2(
renk: #fff;
yazı tipi ağırlığı: 300

}
.actionp(
renk: #fff;
metin gölgesi: 0 1px 2px rgba(0, 0, 0, .2);
yazı tipi boyutu: 1.2em
}
.eylem .kapsayıcı(
kenar boşluğu: 3em;
}
/* Alt Bilgi */
altbilgi(
arka plan: #333333;
dolgu: 1em0;
metin hizalama: sağ;
}
alt bilgi p(
renk: #fff;
satır yüksekliği: 1;
metin dönüşümü: büyük harf;
yazı tipi boyutu: 0.7em
üst kenar boşluğu: 0,5 cm;
}

Altbilgi düğmesine yerleşik önyükleme sınıfı btn-default atanır.

Şablonu canlandırıyoruz. İlk ekranda metin animasyonunun yanı sıra bölümler için yumuşak kaydırma ve düğmeler uygulayacağız.

Geçişlerin çalışması için, bölüm sınıflarının bir kısmını faydalar ve tarifeler için id ile değiştireceğiz. Ve butonlara id linkleri yazacağız. Ekran - sarı bir işaretleyici ile vurgulanana eklenenler.

Düğmeler için girintileri ayarlayın - jbutton. Tıklamada kaydırma çalışıyor, ancak çok aniden.

Düzgün geçişler, javascript veya jquery kullanılarak oluşturulur. İkincisi, varsayılan olarak Bootstrap şablonlarına bağlıdır.

Kaydırma artık sorunsuz.

Animate.css (https://raw.githubusercontent.com/daneden/animate.css/master/animate.css ) kullanarak metne animasyon ekleme. Hazır açık kaynak, herhangi bir web sitesinde kullanılabilir. Dosyayı github'dan css klasörüne atıyoruz ve yolu yazıyoruz.

Efektleri buradan seçiyoruz: https://daneden.github.io/animate.css/ . FadeInDown'u seçtik. Böyle bir kodla yazılmış:

Artık sayfa yüklendiğinde veya yenilendiğinde metin animasyonlu olacaktır. Hazır.

Bir ziyaretçiye ne kadar çok form alanı sunulursa, onları doldurma olasılığı o kadar düşüktür. Yalnızca minimum gerekli bilgileri isteyin.

benzetme yoluyla bir araya getirilmiştir. Arka planları ve renkleri değiştireceğiz. Ve tabii ki bir form ekleyeceğiz.

Paralaks ile başlayalım.

Jumbotron arka planını şeffaf olarak değiştirin:

arka plan: saydam;

Komut dosyasını kafanın içine yerleştirin:

$(pencere).scroll(işlev(e)(
paralaks();
});
paralaks()(
var scrolled = $(window).scrollTop();
$(".bgparallax").css("top",-(scrolled*0.2)+"px");
}

Gövdedeki ilk satır paralaks kabıdır:

Ve CSS'de davranışı şöyledir:

bgparalaks(
arka plan: url(/../img/fon.jpg) tekrar;
pozisyon: sabit;
genişlik: %100
yükseklik: %300;
üst:0;
sol:0;
z-endeksi: -1;
}

Paralaks hazır. Ancak kodda değişiklik yapmak ve yeni arka plan renk düzeninin yeniden atanmasını gerektirir.

Menüyü karartmak:

navbar-varsayılan(
arka plan rengi: #333;
kenarlık rengi: #444;
renk: koyu gri;
sınır yarıçapı: 0
}

Navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:odak (
renk: koyu gri;
arka plan rengi: rgba(0, 0, 0, 0,5);
}

Jumbotron'daki cümleyi yenisiyle değiştiriyoruz - form koduyla:

Açılış Sayfası Ziyaretçileri Müşteriye Dönüştürür
Quisque tincidunt dui augue askıya alma lorem vel diam consectetur posuere araç posueret mauris araç tortor rhoncus vulputate massa.

• 
  
  
  


• 
  

  Lorem ipsum dolor sit amet, adipiscing elit, sed diam nonummy.

  
  

Ve görünüşü yaz

/* biçim */
.headform listesi(
liste stili türü: yok;
satır yüksekliği: 26px;
yazı tipi ağırlığı: 400
dolgu: 0px
kenar boşluğu: 40 piksel
}
.headform(
taşma: gizli;
konum: göreli;
arkaplan rengi: rgba(0,0,0,.4);
dolgu: 35 piksel 40 piksel;
sınır yarıçapı: 8 piksel
}
giriş, düğme, seç, metin alanı (
genişlik: %100
kenar boşluğu: 10 piksel;
}
.headform-list li .fa (
pozisyon: mutlak;
üst: 0 piksel;
sol: 0 piksel;
genişlik: 42 piksel
yazı tipi boyutu: 24 piksel;
metin hizalama: merkez;
}
.headform listesi li (
konum: göreli;
minimum yükseklik: 38 piksel;
sol dolgu: 62px;
kenar boşluğu: 20px
}
.jumbotronp(
renk: #fff;
yazı tipi boyutu: 16 piksel;
yazı tipi stili: italik;
}

Jumbotronun metni de değişiklik gerektirdiği için buraya geldi.

Oranları değiştiriyoruz.

/* tarife genel görünümü */
.pricing_item(
arkaplan rengi: rgba(0,0,0,.4); /* satır değişti */
sınır yarıçapı: 4px /* satır değişti */
konum: göreli;
ekran: -webkit-flex;
ekran:esnek;
-webkit-flex-direction: sütun;
esnek yön: sütun;
-webkit-align-items: streç;
hizalama öğeleri: streç;
metin hizalama: merkez;
-webkit-esnek: 0 1 330px;
esnek: 0 1 330 piksel;
dolgu: 2em 3em;
marj: 1em
renk: #f2f2f2; /* satır değişti */
imleç: varsayılan;
taşma: gizli;
kutu gölgesi: 0 0 15px rgba(0, 0, 0, 0.05);
}
/* tıklamada arka planı değiştir */
.pricing_item: üzerine gelin (
renk: #444;
arka plan: #ddd; /* satır değişti */
}

Şimdi böyle görünüyorlar - şeffaf arka plan ve yuvarlatılmış köşeler.

Şablon hazır.

Yine jumbotronun dolgusunu değiştiriyoruz ve şablonu önceki şablona benzeterek yeni bir arka plan için yeniden boyuyoruz. Sayaç betiğini bağlarız:

HTML





zaman beklemez
Lorem ipsum dolor sit amet, to consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim and minimum veniam, quis nostrud exercitation ullamcorper suscipit lobortis nisl ut aliquip ex ea common consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore ab feugiat nulla facilisis at vero eros et acumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facili si.

• 
  

  Lorem ipsum dolor sit amet, adipiscing elit, sed diam nonummy.

  
  


• 
  

  Lorem ipsum dolor sit amet, adipiscing elit, sed diam nonummy.