Hero section with carousel slider

Making earth cooler for people, nature, climate

Protecting the planet and its natural resources for future generations by reducing pollution, promoting sustainability, and conserving energy and resources.

Donate now

Learn more

Partners and backers:

Tu można wstawić slider

<?php
/**
 * Title: Hero section with carousel slider
 * Slug: hero-section-with-carousel-slider
 * Block types: core/post-content
 * Categories: featured
 */
?>
<!-- wp:group {"tagName":"section","metadata":{"name":"Hero section with carousel slider","categories":["featured"],"patternName":"wlc/hero-section-with-carousel-slider"},"align":"full","className":"hero-section-with-carousel-slider hero-section-with-carousel-slider__wrapper","layout":{"type":"constrained"}} -->
<section class="wp-block-group alignfull hero-section-with-carousel-slider hero-section-with-carousel-slider__wrapper"><!-- wp:group {"align":"full","className":"hero-section-with-carousel-slider__content","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull hero-section-with-carousel-slider__content"><!-- wp:columns {"verticalAlignment":"center","align":"full","className":"hero-section-with-carousel-slider__columns"} -->
<div class="wp-block-columns alignfull are-vertically-aligned-center hero-section-with-carousel-slider__columns"><!-- wp:column {"verticalAlignment":"center","className":"hero-section-with-carousel-slider__column-text","layout":{"type":"default"}} -->
<div class="wp-block-column is-vertically-aligned-center hero-section-with-carousel-slider__column-text"><!-- wp:heading {"className":"hero-section-with-carousel-slider__title"} -->
<h2 class="wp-block-heading hero-section-with-carousel-slider__title">
        Making earth cooler for people, nature, climate
      </h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"className":"hero-section-with-carousel-slider__description"} -->
<p class="hero-section-with-carousel-slider__description">
        Protecting the planet and its natural resources for future generations by reducing pollution, promoting sustainability, and conserving energy and resources.
      </p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"className":"hero-section-with-carousel-slider__buttons"} -->
<div class="wp-block-buttons hero-section-with-carousel-slider__buttons"><!-- wp:button {"className":"hero-section-with-carousel-slider__button-primary"} -->
<div class="wp-block-button hero-section-with-carousel-slider__button-primary"><a class="wp-block-button__link wp-element-button">
            Donate now
          </a></div>
<!-- /wp:button -->

<!-- wp:button {"className":"hero-section-with-carousel-slider__button-secondary"} -->
<div class="wp-block-button hero-section-with-carousel-slider__button-secondary"><a class="wp-block-button__link wp-element-button">
            <svg class="hero-section-with-carousel-slider__icon" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
              <path d="M2 6a2 2 0 012-2h6a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6zM14.553 7.106A1 1 0 0014 8v4a1 1 0 00.553.894l2 1A1 1 0 0018 13V7a1 1 0 00-1.447-.894l-2 1z"></path>
            </svg>
            Learn more
          </a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:group {"className":"hero-section-with-carousel-slider__partners","layout":{"type":"constrained","justifyContent":"left"}} -->
<div class="wp-block-group hero-section-with-carousel-slider__partners"><!-- wp:paragraph {"className":"hero-section-with-carousel-slider__partners-title"} -->
<p class="hero-section-with-carousel-slider__partners-title">Partners and backers:</p>
<!-- /wp:paragraph -->

<!-- wp:group {"className":"hero-section-with-carousel-slider__partners-logos","layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group hero-section-with-carousel-slider__partners-logos"><!-- wp:image {"className":"hero-section-with-carousel-slider__partner-logo"} -->
<figure class="wp-block-image hero-section-with-carousel-slider__partner-logo"><img src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/customers/greenpeace.svg" alt="Greenpeace"/></figure>
<!-- /wp:image -->

<!-- wp:image {"className":"hero-section-with-carousel-slider__partner-logo"} -->
<figure class="wp-block-image hero-section-with-carousel-slider__partner-logo"><img src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/customers/united-nations.svg" alt="UN"/></figure>
<!-- /wp:image -->

<!-- wp:image {"className":"hero-section-with-carousel-slider__partner-logo"} -->
<figure class="wp-block-image hero-section-with-carousel-slider__partner-logo"><img src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/customers/wwf.svg" alt="WWF"/></figure>
<!-- /wp:image -->

<!-- wp:image {"className":"hero-section-with-carousel-slider__partner-logo"} -->
<figure class="wp-block-image hero-section-with-carousel-slider__partner-logo"><img src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/customers/oxfam.svg" alt="Oxfam"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center","className":"hero-section-with-carousel-slider__column-slider"} -->
<div class="wp-block-column is-vertically-aligned-center hero-section-with-carousel-slider__column-slider"><!-- wp:group {"className":"hero-section-with-carousel-slider__slider-wrapper","layout":{"type":"constrained"}} -->
<div class="wp-block-group hero-section-with-carousel-slider__slider-wrapper"><!-- wp:paragraph {"align":"center","className":"hero-section-with-carousel-slider__slider-placeholder"} -->
<p class="has-text-align-center hero-section-with-carousel-slider__slider-placeholder">Tu można wstawić slider</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group --></section>
<!-- /wp:group -->

.hero-section-with-carousel-slider {
    @apply bg-white dark:bg-gray-900 antialiased ;
  
        .hero-section-with-carousel-slider__content {
            @apply px-4 py-8 mx-auto max-w-screen-xl lg:px-6 sm:py-16 lg:py-24;

            .hero-section-with-carousel-slider__columns {
                @apply flex flex-col gap-8 lg:items-center lg:gap-16 lg:flex-row mb-0;
            }
            
            .hero-section-with-carousel-slider__column-text {
                @apply lg:max-w-xl xl:shrink-0;
            }
            
            .hero-section-with-carousel-slider__title {
                @apply text-3xl font-extrabold leading-none tracking-tight text-gray-900 dark:text-white sm:text-5xl;
            }
            
            .hero-section-with-carousel-slider__description {
                @apply mt-5 text-base font-normal text-gray-500 dark:text-gray-400 md:max-w-3xl sm:text-xl;
            }
        }
    
        .hero-section-with-carousel-slider__buttons {
        @apply flex flex-col gap-4 mt-8 sm:flex-row w-full;

        .hero-section-with-carousel-slider__button-primary {
            @apply w-full md:w-auto;

            .wp-block-button__link {
            @apply sm:w-[182px] w-full text-base font-medium text-center text-white bg-primary-700 rounded-lg hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800;
            }
        }
        
        .hero-section-with-carousel-slider__button-secondary {
            @apply w-full md:w-auto; 

            .wp-block-button__link {
            @apply sm:w-[182px] w-full inline-flex justify-center items-center text-base font-medium text-center text-gray-900 bg-white border border-gray-200 rounded-lg hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700;
            }
        }

        .hero-section-with-carousel-slider__icon {
            @apply w-5 h-5 mr-2 -ml-1 fill-current;
        }
    }
  
    .hero-section-with-carousel-slider__partners {
      @apply mt-4 sm:border-t sm:border-gray-100 sm:mt-8 sm:pt-8 dark:border-gray-700;
  
      .hero-section-with-carousel-slider__partners-title {
        @apply hidden text-base font-medium text-gray-500 sm:block;
      }
  
      .hero-section-with-carousel-slider__partners-logos {
        @apply flex items-center mt-3 max-w-md;
  
        .hero-section-with-carousel-slider__partner-logo {
          img {
            @apply w-auto h-8 md:h-12 mr-4;
          }
        }
      }
    }
  
    .hero-section-with-carousel-slider__column-slider {
      @apply relative w-full;

      .hero-section-with-carousel-slider__slider-wrapper {
        @apply relative h-56 overflow-hidden rounded-lg md:h-96;
    
      }
    }
}