#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.
#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