#1 Fonty

Nagłówki

Nagłówek 1

Lorem ipsum dolor
Lorem ipsum dolor

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.
Lorem ipsum dolor sit amet, consectetur.

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.

Body bold small

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

#2 Przyciski

Przyciski

#3 Kolory

Paleta kolorów
#7ED957
#819246
#819335
#D84A26
5
5
5
Kolory globalne
Podstawowy
Drugorzędny
Tekst
Akcent
Kolory dodatkowe
#1
#2
#3
#4
#5
#5

#4 Kody CSS, JS i HTML

Kody CSS

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>
				
			

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
				
			

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
				
			

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
				
			

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 przycisku [WIĘCEJ]

				
					show-more
				
			

klasa przycisku [MNIEJ]

				
					show-less content-hide
				
			

klasa CONTENTU

				
					details-area content-hide
				
			
Scroll to Top