Kategorie
Narzędzia

Framework – pod landing page

Jakiś czas temu z głębszej potrzeby, jaka wynikała ze stworzenia kilku landing page’ów osadzonych wewnątrz gotowej i już zaprojektowanej strony, powstał “mini framework”, oparty o wartości procentowe, zatem nadaje się do każdej wielkości strony. Dodatkowo uwzględnia urządzenia mobilne, które to kolumny w takim przypadku są ustawiane pionowo.

Legenda class.

.k – odpowiada za wyświetlanie kolumny. Stosujemy jako pierwszy div w którym jest wszystko osadzone.

.r oraz .l – klasa wskazująca prawą (right czyli .r) oraz lewą (left czyli .l) stronę.

.c – center, dokładniej środek

Kod, który możemy umieścić w sekcji <head>…</head>

<style>
@media all and (max-width: 757px) and (min-width: 50px) {
.l {
width: 100%;
float: left;
padding: 3% 2% 3% 2%;
text-align: justify;
}
}
@media all and (min-width: 758px) {
.l {
width: 50%;
float: left;
padding: 3% 1.5% 3% 1.5%;
text-align: justify;
}
}
@media all and (max-width: 757px) and (min-width: 50px) {
.r {
width: 100%;
float: right;
padding: 3% 2% 3% 2%;
text-align: justify;
}
}
@media all and (min-width: 758px) {
.r {
width: 50%;
float: right;
padding: 3% 1.5% 3% 1.5%;
text-align: justify;
}
}
.c {
width: 100%;
float: left;
padding: 2%;
text-align: justify;
}
#k {
display: table;
}
</style>

Następnie należy stworzyć interesującą nas strukturę, domyślnie możemy bazować na poniższym szablonie i go rozbudowywać.

<div class="k">
<div class="c">Tekst środek</div>
<div class="l">Tekst lewo</div>
<div class="r">Tekst prawo</div>
</div>

Szablon prezentuje się następująco:

Tekst na środku “c”
Tekst lewo “l”
Tekst prawo “r”

Projekt śmiało możesz usprawnić o np. background (na potrzeby dema dodałem kolor szary), własne classy p, h1, h2 albo buttony. Do tego ostatniego możesz wykorzystać darmowe i proste generatory przycisków.

Sebastian Wyszkowski

Autor: Sebastian Wyszkowski

Wieloletni praktykant i fascynat branży marketingowej, szczególnie tej opartej o kanały digitalowe.