<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>
<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>
<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>
c-box
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
<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>
profile-card
show-more
show-less content-hide
details-area content-hide
<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>
show-more
show-less content-hide
details-area content-hide
Zostaw kontakt, otrzymuj informacje o bieżących wydarzeniach, zdobywaj upominki od Concordia Taste.
SZUKASZ PRACY? Dołącz do nas!
Zostaw kontakt, otrzymuj informacje o bieżących wydarzeniach, zdobywaj upominki od Concordia Taste.
SZUKASZ PRACY?
Dołącz do nas!
