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