#1 Fonty
Nagłówki
Nagłówek 1
Lorem ipsum dolor sit
Lorem ipsum dolor sit
Nagłówek 2
Lorem ipsum dolor sit amet,
Lorem ipsum dolor sit amet,
Nagłówek 3
Lorem ipsum dolor sit amet,
Lorem ipsum dolor sit amet,
Nagłówek 4
Lorem ipsum dolor sit amet, consectetur
Lorem ipsum dolor sit amet, consectetur
Nagłówek 5
Lorem ipsum dolor sit amet, consectetur adipiscing.
Lorem ipsum dolor sit amet, consectetur adipiscing.
Nagłówek 6
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nagłówek 7
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Treść
Body
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Body bold
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Body large
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Body small
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
#3 Kolory
Paleta kolorów
1
2
Kolor bazowy
4
5
Kolory globalne
Podstawowy
Drugorzędny
Tekst
Akcent
Kolory dodatkowe
#1
#2
#3
#4
#5
#4 Kody CSS, JS i HTML
Kody CSS
Padding
Szerokość
Fonty
Hide/Show
Header
Padding
Globalny padding
<style>
/* Padding all sides */
.pad-1{padding: clamp(0.75rem, 0.6923rem + 0.2564vw, 1rem);}
.pad-2{padding: clamp(1.5rem, 1.3846rem + 0.5128vw, 2rem);}
.pad-3{padding: clamp(2rem, 1.7692rem + 1.0256vw, 3rem);}
.pad-4{padding: clamp(3rem, 2.7692rem + 1.0256vw, 4rem);}
<style>
Padding góra+dół
<style>
/* Padding Top & Bottom */
.pad-tb-1{
padding-top: clamp(0.5rem, 0.38458rem + 0.513vw, 1rem);
padding-bottom: clamp(0.5rem, 0.38458rem + 0.513vw, 1rem);}
.pad-tb-2{
padding-top: clamp(1rem, 0.76915rem + 1.026vw, 2rem);
padding-bottom: clamp(1rem, 0.76915rem + 1.026vw, 2rem);}
.pad-tb-3{
padding-top: clamp(2rem, 1.76915rem + 1.026vw, 3rem);
padding-bottom: clamp(2rem, 1.76915rem + 1.026vw, 3rem);}
.pad-tb-4{
padding-top: clamp(3rem, 2.76915rem + 1.026vw, 4rem);
padding-bottom: clamp(3rem, 2.76915rem + 1.026vw, 4rem);}
.pad-tb-5{
padding-top: clamp(4rem, 3.76915rem + 1.026vw, 5rem);
padding-bottom: clamp(4rem, 3.76915rem + 1.026vw, 5rem);}
.pad-tb-6{
padding-top: clamp(5rem, 4.76915rem + 1.026vw, 6rem);
padding-bottom: clamp(5rem, 4.76915rem + 1.026vw, 6rem);}
.pad-tb-8{
padding-top: clamp(7rem, 6.76915rem + 1.026vw, 8rem);
padding-bottom: clamp(7rem, 6.76915rem + 1.026vw, 8rem);}
.pad-tb-10{
padding-top: clamp(9rem, 8.76915rem + 1.026vw, 10rem);
padding-bottom: clamp(9rem, 8.76915rem + 1.026vw, 10rem);}
<style>
Szerokość
Responsywna szerokość
<style>
/* CONTAINER BOXED LAYOUT*/
/* Ultra wide */
@media (max-width: 3840px) {
.c-box {--content-width: 55%;}}
/* Desktop */
@media (max-width: 1920px) {
.c-box {--content-width: 65%;}}
/* Laptop big */
@media (max-width: 1600px) {
.c-box {--content-width: 74%;}}
/* Laptop small */
@media (max-width: 1366px) {
.c-box {--content-width: 77%;}}
/* Tablet portrait */
@media (max-width: 1200px) {
.c-box {--content-width: 80%;}}
/* Mobile */
@media (max-width: 767px) {
.c-box {--content-width: 85%;}}
</style>
Klasa
c-box
Fonty
Globalne fonty
Title 1
clamp(3rem, 1.7309rem + 1.813vw, 4rem)
Title 2
clamp(2.6rem, 1.7309rem + 1.813vw, 3rem)
Title 3
clamp(2.2rem, 1.5482rem + 1.3598vw, 2.5rem)
Title 4
clamp(1.8rem, 1.3654rem + 0.9065vw, 2rem)
Title 5
clamp(1.6rem, 1.2741rem + 0.6799vw, 1.75rem)
Title 6
clamp(1.4rem, 1.1827rem + 0.4533vw, 1.5rem)
Title 7
clamp(1.2rem, 1.0914rem + 0.2266vw, 1.25rem)
Subheading
1,2
Body
1
Body bold
1
Body big
1,125
Body small
0,875
Hide/Show
Chowany content
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
var $ = jQuery;
$(document).ready(function(){
$('.show-more').on('click', function(){
event.preventDefault()
$(this).toggleClass('content-hide')
$(this).closest('.profile-card').find('.show-less, .details-area').toggleClass('content-hide')
})
$('.show-less').on('click', function(){
event.preventDefault()
$(this).toggleClass('content-hide')
$(this).closest('.profile-card').find('.show-more, .details-area').toggleClass('content-hide')
})
})
</script>
<style>
.content-hide{
display: none;
}
</style>
klasa CONTAINERA
profile-card
klasa przycisku [WIĘCEJ]
show-more
klasa przycisku [MNIEJ]
show-less content-hide
klasa CONTENTU
details-area content-hide
Header
Chowany content
custom CSS
/* Slide In From The Top Option */
.header-2 {
transform: translatey(-80px);
-moz-transition: all .3s ease!important;
-webkit-transition: all .3s ease!important;
transition: all .3s ease!important;
}
.elementor-sticky--effects.header-2 {
height: auto!important;
transform: translatey(0px);
}
.elementor-sticky--effects.header-1 {
display: none!important;
}
/* End Of Slide In From The Top Option */
klasa containera
header-2
