[Summary view] [Print] [Text view]

   1  <?php
   2  /**
   3   * Title: Footer with colophon, 3 columns
   4   * Slug: twentytwentyfour/footer-colophon-3-col
   5   * Categories: footer
   6   * Block Types: core/template-part/footer
   7   * Description: A footer section with a colophon and 3 columns.
   8   *
   9   * @package WordPress
  10   * @subpackage Twenty_Twenty_Four
  11   * @since Twenty Twenty-Four 1.0
  12   */
  13  
  14  ?>
  15  
  16  <!-- wp:group {"align":"wide","layout":{"type":"constrained"}} -->
  17  <div class="wp-block-group alignwide">
  18      <!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50"}}}} -->
  19      <div class="wp-block-group alignwide" style="padding-top:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50)">
  20          <!-- wp:image {"width":"40px","height":"auto","sizeSlug":"full","linkDestination":"none"} -->
  21          <figure class="wp-block-image size-full is-resized">
  22              <img src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/icon-message.webp" alt="" style="width:40px;height:auto" />
  23          </figure>
  24          <!-- /wp:image -->
  25  
  26          <!-- wp:separator {"className":"is-style-wide"} -->
  27          <hr class="wp-block-separator has-alpha-channel-opacity is-style-wide" />
  28          <!-- /wp:separator -->
  29  
  30          <!-- wp:columns {"style":{"spacing":{"padding":{"top":"var:preset|spacing|10"}}}} -->
  31          <div class="wp-block-columns" style="padding-top:var(--wp--preset--spacing--10)">
  32              <!-- wp:column {"width":"57%"} -->
  33              <div class="wp-block-column" style="flex-basis:57%">
  34                  <!-- wp:heading {"fontSize":"x-large"} -->
  35                  <h2 class="wp-block-heading has-x-large-font-size"><?php esc_html_e( 'Keep up, get in touch.', 'twentytwentyfour' ); ?></h2>
  36                  <!-- /wp:heading -->
  37              </div>
  38              <!-- /wp:column -->
  39              <!-- wp:column {"width":"30%"} -->
  40              <div class="wp-block-column" style="flex-basis:30%">
  41                  <!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|10"}},"layout":{"type":"flex","orientation":"vertical"}} -->
  42                  <div class="wp-block-group">
  43                      <!-- wp:heading {"level":3,"fontSize":"medium","fontFamily":"body"} -->
  44                      <h3 class="wp-block-heading has-body-font-family has-medium-font-size"><?php esc_html_e( 'Contact', 'twentytwentyfour' ); ?></h3>
  45                      <!-- /wp:heading -->
  46                      <!-- wp:paragraph -->
  47                      <p><a href="#"><?php echo esc_html_x( 'info@example.com', 'Example email in site footer', 'twentytwentyfour' ); ?></a></p>
  48                      <!-- /wp:paragraph -->
  49                  </div>
  50                  <!-- /wp:group -->
  51              </div>
  52              <!-- /wp:column -->
  53              <!-- wp:column {"width":"30%"} -->
  54              <div class="wp-block-column" style="flex-basis:30%">
  55                  <!-- wp:columns {"isStackedOnMobile":false} -->
  56                  <div class="wp-block-columns is-not-stacked-on-mobile">
  57                      <!-- wp:column -->
  58                      <div class="wp-block-column">
  59                          <!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|10"}},"layout":{"type":"flex","orientation":"vertical"}} -->
  60                          <div class="wp-block-group">
  61                              <!-- wp:heading {"level":3,"fontSize":"medium","fontFamily":"body"} -->
  62                              <h3 class="wp-block-heading has-body-font-family has-medium-font-size"><?php esc_html_e( 'Follow', 'twentytwentyfour' ); ?></h3>
  63                              <!-- /wp:heading -->
  64                              <!-- wp:paragraph -->
  65                              <p><a href="#"><?php esc_html_e( 'Instagram', 'twentytwentyfour' ); ?></a> / <a href="#"><?php esc_html_e( 'Facebook', 'twentytwentyfour' ); ?></a></p>
  66                              <!-- /wp:paragraph -->
  67                          </div>
  68                          <!-- /wp:group -->
  69                      </div>
  70                      <!-- /wp:column -->
  71                  </div>
  72                  <!-- /wp:columns -->
  73              </div>
  74              <!-- /wp:column -->
  75          </div>
  76          <!-- /wp:columns -->
  77  
  78          <!-- wp:spacer {"height":"var:preset|spacing|50"} -->
  79          <div style="height:var(--wp--preset--spacing--50)" aria-hidden="true" class="wp-block-spacer"></div>
  80          <!-- /wp:spacer -->
  81  
  82          <!-- wp:group {"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between","verticalAlignment":"top"}} -->
  83          <div class="wp-block-group">
  84              <!-- wp:group {"style":{"spacing":{"blockGap":"6px"}},"layout":{"type":"flex","flexWrap":"wrap"}} -->
  85              <div class="wp-block-group">
  86                  <!-- wp:paragraph {"fontSize":"small"} -->
  87                  <p class="has-small-font-size"><?php esc_html_e( '&copy;', 'twentytwentyfour' ); ?></p>
  88                  <!-- /wp:paragraph -->
  89                  <!-- wp:site-title {"level":0,"style":{"typography":{"fontStyle":"normal","fontWeight":"400"}},"fontSize":"small"} /-->
  90              </div>
  91              <!-- /wp:group -->
  92              <!-- wp:paragraph {"fontSize":"small"} -->
  93              <p class="has-small-font-size">
  94                  <?php
  95                  /* Translators: WordPress link. */
  96                  $wordpress_link = '<a href="' . esc_url( __( 'https://wordpress.org', 'twentytwentyfour' ) ) . '" rel="nofollow">WordPress</a>';
  97                  echo sprintf(
  98                      /* Translators: Designed with WordPress */
  99                      esc_html__( 'Designed with %1$s', 'twentytwentyfour' ),
 100                      $wordpress_link
 101                  );
 102                  ?>
 103              </p>
 104              <!-- /wp:paragraph -->
 105          </div>
 106          <!-- /wp:group -->
 107  
 108      </div>
 109      <!-- /wp:group -->
 110  </div>
 111  <!-- /wp:group -->