[Summary view] [Print] [Text view]

   1  <?php
   2  /**
   3   * Title: Text with alternating images
   4   * Slug: twentytwentyfour/text-alternating-images
   5   * Categories: text, about
   6   * Viewport width: 1400
   7   * Description: A text section, then a two-column section with text in one column and an image in the other.
   8   *
   9   * @package WordPress
  10   * @subpackage Twenty_Twenty_Four
  11   * @since Twenty Twenty-Four 1.0
  12   */
  13  
  14  ?>
  15  
  16  <!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50","left":"var:preset|spacing|50","right":"var:preset|spacing|50"},"margin":{"top":"0","bottom":"0"}}},"layout":{"type":"constrained"}} -->
  17  <div class="wp-block-group alignfull" style="margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--50);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--50)">
  18      <!-- wp:group {"align":"wide","style":{"spacing":{"blockGap":"0"}},"layout":{"type":"constrained"}} -->
  19      <div class="wp-block-group alignwide">
  20          <!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|10"}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"center"}} -->
  21          <div class="wp-block-group">
  22  
  23              <!-- wp:heading {"textAlign":"center","className":"is-style-asterisk"} -->
  24              <h2 class="wp-block-heading has-text-align-center is-style-asterisk"><?php echo esc_html_x( 'An array of resources', 'Sample heading content', 'twentytwentyfour' ); ?></h2>
  25              <!-- /wp:heading -->
  26  
  27              <!-- wp:paragraph {"align":"center","style":{"layout":{"selfStretch":"fit","flexSize":null}}} -->
  28              <p class="has-text-align-center"><?php echo esc_html_x( 'Our comprehensive suite of professional services caters to a diverse clientele, ranging from homeowners to commercial developers.', 'Sample subheading content', 'twentytwentyfour' ); ?></p>
  29              <!-- /wp:paragraph -->
  30          </div>
  31          <!-- /wp:group -->
  32  
  33          <!-- wp:spacer {"height":"var:preset|spacing|40"} -->
  34          <div style="height:var(--wp--preset--spacing--40)" aria-hidden="true" class="wp-block-spacer"></div>
  35          <!-- /wp:spacer -->
  36  
  37          <!-- wp:columns {"align":"wide","style":{"spacing":{"blockGap":{"top":"var:preset|spacing|50","left":"var:preset|spacing|60"}}}} -->
  38          <div class="wp-block-columns alignwide">
  39              <!-- wp:column {"verticalAlignment":"center","width":"40%"} -->
  40              <div class="wp-block-column is-vertically-aligned-center" style="flex-basis:40%">
  41                  <!-- wp:heading {"level":3,"className":"is-style-asterisk"} -->
  42                  <h3 class="wp-block-heading is-style-asterisk"><?php echo esc_html_x( 'Études Architect App', 'Sample list heading', 'twentytwentyfour' ); ?></h3>
  43                  <!-- /wp:heading -->
  44  
  45                  <!-- wp:list {"style":{"typography":{"lineHeight":"1.75"}},"className":"is-style-checkmark-list"} -->
  46                  <ul class="is-style-checkmark-list" style="line-height:1.75">
  47  
  48                      <!-- wp:list-item -->
  49                      <li><?php echo esc_html_x( 'Collaborate with fellow architects.', 'Sample list item', 'twentytwentyfour' ); ?></li>
  50                      <!-- /wp:list-item -->
  51  
  52                      <!-- wp:list-item -->
  53                      <li><?php echo esc_html_x( 'Showcase your projects.', 'Sample list item', 'twentytwentyfour' ); ?></li>
  54                      <!-- /wp:list-item -->
  55  
  56                      <!-- wp:list-item -->
  57                      <li><?php echo esc_html_x( 'Experience the world of architecture.', 'Sample list item', 'twentytwentyfour' ); ?></li>
  58                      <!-- /wp:list-item -->
  59  
  60                  </ul>
  61                  <!-- /wp:list -->
  62              </div>
  63              <!-- /wp:column -->
  64  
  65              <!-- wp:column {"width":"50%"} -->
  66              <div class="wp-block-column" style="flex-basis:50%">
  67                  <!-- wp:image {"aspectRatio":"4/3","scale":"cover","sizeSlug":"large","linkDestination":"none","className":"is-style-rounded"} -->
  68                  <figure class="wp-block-image size-large is-style-rounded">
  69                      <img src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/tourist-and-building.webp" alt="<?php esc_attr_e( 'Tourist taking photo of a building', 'twentytwentyfour' ); ?>" />
  70                  </figure>
  71                  <!-- /wp:image -->
  72              </div>
  73              <!-- /wp:column -->
  74          </div>
  75          <!-- /wp:columns -->
  76  
  77          <!-- wp:spacer {"height":"var:preset|spacing|40"} -->
  78          <div style="height:var(--wp--preset--spacing--40)" aria-hidden="true" class="wp-block-spacer"></div>
  79          <!-- /wp:spacer -->
  80  
  81          <!-- wp:columns {"align":"wide","style":{"spacing":{"blockGap":{"top":"var:preset|spacing|50","left":"var:preset|spacing|60"}}}} -->
  82          <div class="wp-block-columns alignwide">
  83              <!-- wp:column {"width":"50%"} -->
  84              <div class="wp-block-column" style="flex-basis:50%">
  85                  <!-- wp:image {"aspectRatio":"4/3","scale":"cover","sizeSlug":"large","linkDestination":"none","className":"is-style-rounded"} -->
  86                  <figure class="wp-block-image size-large is-style-rounded">
  87                      <img src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/windows.webp" alt="<?php esc_attr_e( 'Windows of a building in Nuremberg, Germany', 'twentytwentyfour' ); ?>" />
  88                  </figure>
  89                  <!-- /wp:image -->
  90              </div>
  91              <!-- /wp:column -->
  92  
  93              <!-- wp:column {"verticalAlignment":"center","width":"40%"} -->
  94              <div class="wp-block-column is-vertically-aligned-center" style="flex-basis:40%">
  95                  <!-- wp:heading {"level":3,"className":"is-style-asterisk"} -->
  96                  <h3 class="wp-block-heading is-style-asterisk"><?php echo esc_html_x( 'Études Newsletter', 'Sample heading', 'twentytwentyfour' ); ?></h3>
  97                  <!-- /wp:heading -->
  98  
  99                  <!-- wp:list {"style":{"typography":{"lineHeight":"1.75"}},"className":"is-style-checkmark-list"} -->
 100                  <ul class="is-style-checkmark-list" style="line-height:1.75">
 101                      <!-- wp:list-item -->
 102                      <li><?php echo esc_html_x( 'A world of thought-provoking articles.', 'Sample list item', 'twentytwentyfour' ); ?></li>
 103                      <!-- /wp:list-item -->
 104  
 105                      <!-- wp:list-item -->
 106                      <li><?php echo esc_html_x( 'Case studies that celebrate architecture.', 'Sample list item', 'twentytwentyfour' ); ?></li>
 107                      <!-- /wp:list-item -->
 108  
 109                      <!-- wp:list-item -->
 110                      <li><?php echo esc_html_x( 'Exclusive access to design insights.', 'Sample list item', 'twentytwentyfour' ); ?></li>
 111                      <!-- /wp:list-item -->
 112                  </ul>
 113                  <!-- /wp:list -->
 114              </div>
 115              <!-- /wp:column -->
 116          </div>
 117          <!-- /wp:columns -->
 118      </div>
 119      <!-- /wp:group -->
 120  </div>
 121  <!-- /wp:group -->