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