[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 and image in another.
   8   */
   9  ?>
  10  
  11  <!-- 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"}} -->
  12  <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)">
  13      <!-- wp:group {"align":"wide","style":{"spacing":{"blockGap":"0"}},"layout":{"type":"constrained"}} -->
  14      <div class="wp-block-group alignwide">
  15          <!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|10"}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"center"}} -->
  16          <div class="wp-block-group">
  17  
  18              <!-- wp:heading {"textAlign":"center","className":"is-style-asterisk"} -->
  19              <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>
  20              <!-- /wp:heading -->
  21  
  22              <!-- wp:paragraph {"align":"center","style":{"layout":{"selfStretch":"fit","flexSize":null}}} -->
  23              <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>
  24              <!-- /wp:paragraph -->
  25          </div>
  26          <!-- /wp:group -->
  27  
  28          <!-- wp:spacer {"height":"var:preset|spacing|40"} -->
  29          <div style="height:var(--wp--preset--spacing--40)" aria-hidden="true" class="wp-block-spacer"></div>
  30          <!-- /wp:spacer -->
  31  
  32          <!-- wp:columns {"align":"wide","style":{"spacing":{"blockGap":{"top":"var:preset|spacing|50","left":"var:preset|spacing|60"}}}} -->
  33          <div class="wp-block-columns alignwide">
  34              <!-- wp:column {"verticalAlignment":"center","width":"40%"} -->
  35              <div class="wp-block-column is-vertically-aligned-center" style="flex-basis:40%">
  36                  <!-- wp:heading {"level":3,"className":"is-style-asterisk"} -->
  37                  <h3 class="wp-block-heading is-style-asterisk"><?php echo esc_html_x( 'Études Architect App', 'Sample list heading', 'twentytwentyfour' ); ?></h3>
  38                  <!-- /wp:heading -->
  39  
  40                  <!-- wp:list {"style":{"typography":{"lineHeight":"1.75"}},"className":"is-style-checkmark-list"} -->
  41                  <ul class="is-style-checkmark-list" style="line-height:1.75">
  42  
  43                      <!-- wp:list-item -->
  44                      <li><?php echo esc_html_x( 'Collaborate with fellow architects.', 'Sample list item', 'twentytwentyfour' ); ?></li>
  45                      <!-- /wp:list-item -->
  46  
  47                      <!-- wp:list-item -->
  48                      <li><?php echo esc_html_x( 'Showcase your projects.', 'Sample list item', 'twentytwentyfour' ); ?></li>
  49                      <!-- /wp:list-item -->
  50  
  51                      <!-- wp:list-item -->
  52                      <li><?php echo esc_html_x( 'Experience the world of architecture.', 'Sample list item', 'twentytwentyfour' ); ?></li>
  53                      <!-- /wp:list-item -->
  54  
  55                  </ul>
  56                  <!-- /wp:list -->
  57              </div>
  58              <!-- /wp:column -->
  59  
  60              <!-- wp:column {"width":"50%"} -->
  61              <div class="wp-block-column" style="flex-basis:50%">
  62                  <!-- wp:image {"aspectRatio":"4/3","scale":"cover","sizeSlug":"large","linkDestination":"none","className":"is-style-rounded"} -->
  63                  <figure class="wp-block-image size-large is-style-rounded">
  64                      <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' ); ?>" />
  65                  </figure>
  66                  <!-- /wp:image -->
  67              </div>
  68              <!-- /wp:column -->
  69          </div>
  70          <!-- /wp:columns -->
  71  
  72          <!-- wp:spacer {"height":"var:preset|spacing|40"} -->
  73          <div style="height:var(--wp--preset--spacing--40)" aria-hidden="true" class="wp-block-spacer"></div>
  74          <!-- /wp:spacer -->
  75  
  76          <!-- wp:columns {"align":"wide","style":{"spacing":{"blockGap":{"top":"var:preset|spacing|50","left":"var:preset|spacing|60"}}}} -->
  77          <div class="wp-block-columns alignwide">
  78              <!-- wp:column {"width":"50%"} -->
  79              <div class="wp-block-column" style="flex-basis:50%">
  80                  <!-- wp:image {"aspectRatio":"4/3","scale":"cover","sizeSlug":"large","linkDestination":"none","className":"is-style-rounded"} -->
  81                  <figure class="wp-block-image size-large is-style-rounded">
  82                      <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' ); ?>" />
  83                  </figure>
  84                  <!-- /wp:image -->
  85              </div>
  86              <!-- /wp:column -->
  87  
  88              <!-- wp:column {"verticalAlignment":"center","width":"40%"} -->
  89              <div class="wp-block-column is-vertically-aligned-center" style="flex-basis:40%">
  90                  <!-- wp:heading {"level":3,"className":"is-style-asterisk"} -->
  91                  <h3 class="wp-block-heading is-style-asterisk"><?php echo esc_html_x( 'Études Newsletter', 'Sample heading', 'twentytwentyfour' ); ?></h3>
  92                  <!-- /wp:heading -->
  93  
  94                  <!-- wp:list {"style":{"typography":{"lineHeight":"1.75"}},"className":"is-style-checkmark-list"} -->
  95                  <ul class="is-style-checkmark-list" style="line-height:1.75">
  96                      <!-- wp:list-item -->
  97                      <li><?php echo esc_html_x( 'A world of thought-provoking articles.', 'Sample list item', 'twentytwentyfour' ); ?></li>
  98                      <!-- /wp:list-item -->
  99  
 100                      <!-- wp:list-item -->
 101                      <li><?php echo esc_html_x( 'Case studies that celebrate architecture.', 'Sample list item', 'twentytwentyfour' ); ?></li>
 102                      <!-- /wp:list-item -->
 103  
 104                      <!-- wp:list-item -->
 105                      <li><?php echo esc_html_x( 'Exclusive access to design insights.', 'Sample list item', 'twentytwentyfour' ); ?></li>
 106                      <!-- /wp:list-item -->
 107                  </ul>
 108                  <!-- /wp:list -->
 109              </div>
 110              <!-- /wp:column -->
 111          </div>
 112          <!-- /wp:columns -->
 113      </div>
 114      <!-- /wp:group -->
 115  </div>
 116  <!-- /wp:group -->