Changeset 59233 for trunk/src/wp-content/themes/twentytwentyfive/patterns/hero-overlapped-book-cover-with-links.php
- Timestamp:
- 10/14/2024 09:56:32 PM (14 months ago)
- File:
-
- 1 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/src/wp-content/themes/twentytwentyfive/patterns/hero-overlapped-book-cover-with-links.php
r59191 r59233 3 3 * Title: Hero, overlapped book cover with links 4 4 * Slug: twentytwentyfive/hero-overlapped-book-cover-with-links 5 * Categories: banner , featured5 * Categories: banner 6 6 * Description: A hero with an overlapped book cover and links. 7 7 * … … 12 12 13 13 ?> 14 <!-- wp:group {"align":"full","className":"is-style-section-1","style":{"spacing":{"padding":{"top":"var:preset|spacing|80","bottom":"var:preset|spacing|80","left":"var:preset|spacing|50","right":"var:preset|spacing|50"}}},"layout":{"type":"constrained"}} --> 15 <div class="wp-block-group alignfull is-style-section-1" style="padding-top:var(--wp--preset--spacing--80);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--80);padding-left:var(--wp--preset--spacing--50)"> 16 <!-- wp:group {"align":"wide","layout":{"type":"default"}} --> 17 <div class="wp-block-group alignwide"> 18 <!-- wp:columns {"verticalAlignment":null,"align":"wide","style":{"spacing":{"blockGap":{"top":"var:preset|spacing|80","left":"var:preset|spacing|80"}}}} --> 19 <div class="wp-block-columns alignwide"> 20 <!-- wp:column {"verticalAlignment":"center","width":"55%"} --> 21 <div class="wp-block-column is-vertically-aligned-center" style="flex-basis:55%"> 22 <!-- wp:group {"style":{"dimensions":{"minHeight":"100%"}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"left","flexWrap":"nowrap","verticalAlignment":"top"}} --> 23 <div class="wp-block-group" style="min-height:100%"> 24 <!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"constrained"}} --> 25 <div class="wp-block-group"> 26 <!-- wp:heading {"fontSize":"xx-large"} --> 27 <h2 class="wp-block-heading has-xx-large-font-size"> 28 <?php echo esc_html_x( 'The Stories Book', 'Hero - Overlapped book cover pattern headline text', 'twentytwentyfive' ); ?> 29 </h2> 30 <!-- /wp:heading --> 14 31 15 <!-- wp:cover {"isUserOverlayColor":true,"customGradient":"linear-gradient(180deg,rgb(251,250,243) 51%,rgb(255,255,255) 51%)","contentPosition":"center center","align":"full","style":{"elements":{"link":{"color":{"text":"var:preset|color|contrast"}}},"spacing":{"padding":{"top":"var:preset|spacing|80","bottom":"var:preset|spacing|80","left":"var:preset|spacing|50","right":"var:preset|spacing|50"}}},"textColor":"contrast","layout":{"type":"constrained"}} --> 16 <div class="wp-block-cover alignfull has-contrast-color has-text-color has-link-color" style="padding-top:var(--wp--preset--spacing--80);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--80);padding-left:var(--wp--preset--spacing--50)"> 17 <span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim has-background-gradient" style="background:linear-gradient(180deg,rgb(251,250,243) 51%,rgb(255,255,255) 51%)"></span> 18 <div class="wp-block-cover__inner-container"> 19 <!-- wp:group {"align":"wide","layout":{"type":"default"}} --> 20 <div class="wp-block-group alignwide"> 21 <!-- wp:columns {"verticalAlignment":"top","align":"wide","style":{"spacing":{"blockGap":{"top":"var:preset|spacing|80","left":"var:preset|spacing|80"}}}} --> 22 <div class="wp-block-columns alignwide are-vertically-aligned-top"> 23 <!-- wp:column {"verticalAlignment":"top","width":"55%"} --> 24 <div class="wp-block-column is-vertically-aligned-top" style="flex-basis:55%"> 25 <!-- wp:group {"layout":{"type":"flex","orientation":"vertical","justifyContent":"left","flexWrap":"nowrap","verticalAlignment":"top"}} --> 32 <!-- wp:paragraph {"className":"is-style-text-subtitle"} --> 33 <p class="is-style-text-subtitle"> 34 <?php echo esc_html_x( 'A fine collection of moments in time featuring photographs from Louis Fleckenstein, Paul Strand and Asahachi Kōno.', 'Hero - Overlapped book cover pattern subline text', 'twentytwentyfive' ); ?> 35 </p> 36 <!-- /wp:paragraph --> 37 </div> 38 <!-- /wp:group --> 39 40 <!-- wp:group {"layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch"}} --> 26 41 <div class="wp-block-group"> 27 <!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"constrained"}} --> 28 <div class="wp-block-group"> 29 <!-- wp:heading {"fontSize":"xx-large"} --> 30 <h2 class="wp-block-heading has-xx-large-font-size"> 31 <?php echo esc_html_x( 'The Stories Book', 'Hero - Overlapped book cover pattern headline text', 'twentytwentyfive' ); ?> 32 </h2> 33 <!-- /wp:heading --> 34 <!-- wp:paragraph {"className":"is-style-text-subtitle"} --> 35 <p class="is-style-text-subtitle"> 36 <?php echo esc_html_x( 'A fine collection of moments in time featuring photographs from Louis Fleckenstein, Paul Strand and Asahachi Kōno.', 'Hero - Overlapped book cover pattern subline text', 'twentytwentyfive' ); ?> 37 </p> 38 <!-- /wp:paragraph --> 39 </div> 40 <!-- /wp:group --> 41 42 <!-- wp:spacer {"style":{"layout":{"selfStretch":"fit","flexSize":null},"spacing":{"margin":{"top":"var:preset|spacing|70","bottom":"var:preset|spacing|70"}}}} --> 43 <div style="margin-top:var(--wp--preset--spacing--70);margin-bottom:var(--wp--preset--spacing--70)" aria-hidden="true" class="wp-block-spacer"></div> 42 <!-- wp:spacer {"style":{"layout":{"selfStretch":"fit","flexSize":null},"spacing":{"margin":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20"}}}} --> 43 <div style="margin-top:var(--wp--preset--spacing--20);margin-bottom:var(--wp--preset--spacing--20)" aria-hidden="true" class="wp-block-spacer"></div> 44 44 <!-- /wp:spacer --> 45 45 46 <!-- wp:group {"layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch"}} --> 47 <div class="wp-block-group"> 48 <!-- wp:columns {"style":{"spacing":{"blockGap":{"top":"var:preset|spacing|20","left":"var:preset|spacing|20"}}}} --> 49 <div class="wp-block-columns"> 50 <!-- wp:column {"verticalAlignment":"stretch"} --> 51 <div class="wp-block-column is-vertically-aligned-stretch"> 52 <!-- wp:buttons {"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"flex","orientation":"horizontal","flexWrap":"wrap","justifyContent":"space-between"}} --> 53 <div class="wp-block-buttons"> 54 <!-- wp:button {"width":100,"className":"is-style-fill"} --> 55 <div class="wp-block-button has-custom-width wp-block-button__width-100 is-style-fill"> 56 <a class="wp-block-button__link wp-element-button" href="#"> 57 <?php echo esc_html_x( 'Amazon', 'Example brand name.', 'twentytwentyfive' ); ?> 58 </a> 59 </div> 60 <!-- /wp:button --> 61 <!-- wp:button {"width":100,"className":"is-style-fill"} --> 62 <div class="wp-block-button has-custom-width wp-block-button__width-100 is-style-fill"> 63 <a class="wp-block-button__link wp-element-button" href="#"> 64 <?php echo esc_html_x( 'Apple Books', 'Example brand name.', 'twentytwentyfive' ); ?> 65 </a> 66 </div> 67 <!-- /wp:button --> 46 <!-- wp:columns {"style":{"spacing":{"blockGap":{"top":"var:preset|spacing|20","left":"var:preset|spacing|20"}}}} --> 47 <div class="wp-block-columns"> 48 <!-- wp:column {"verticalAlignment":"stretch"} --> 49 <div class="wp-block-column is-vertically-aligned-stretch"> 50 <!-- wp:buttons {"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"flex","orientation":"horizontal","flexWrap":"wrap","justifyContent":"space-between"}} --> 51 <div class="wp-block-buttons"> 52 <!-- wp:button {"width":100,"className":"is-style-fill"} --> 53 <div class="wp-block-button has-custom-width wp-block-button__width-100 is-style-fill"> 54 <a class="wp-block-button__link wp-element-button" href="#"> 55 <?php echo esc_html_x( 'Amazon', 'Example brand name.', 'twentytwentyfive' ); ?> 56 </a> 68 57 </div> 69 <!-- /wp:buttons --> 58 <!-- /wp:button --> 59 <!-- wp:button {"width":100,"className":"is-style-fill"} --> 60 <div class="wp-block-button has-custom-width wp-block-button__width-100 is-style-fill"> 61 <a class="wp-block-button__link wp-element-button" href="#"> 62 <?php echo esc_html_x( 'Apple Books', 'Example brand name.', 'twentytwentyfive' ); ?> 63 </a> 64 </div> 65 <!-- /wp:button --> 70 66 </div> 71 <!-- /wp:column --> 72 <!-- wp:column {"verticalAlignment":"stretch"} --> 73 <div class="wp-block-column is-vertically-aligned-stretch"> 74 <!-- wp:buttons {"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"flex","orientation":"horizontal","flexWrap":"wrap","justifyContent":"space-between"}} --> 75 <div class="wp-block-buttons"> 76 <!-- wp:button {"width":100,"className":"is-style-fill"} --> 77 <div class="wp-block-button has-custom-width wp-block-button__width-100 is-style-fill"> 78 <a class="wp-block-button__link wp-element-button" href="#"> 79 <?php echo esc_html_x( 'Audible', 'Example brand name.', 'twentytwentyfive' ); ?> 80 </a> 81 </div> 82 <!-- /wp:button --> 83 <!-- wp:button {"width":100,"className":"is-style-fill"} --> 84 <div class="wp-block-button has-custom-width wp-block-button__width-100 is-style-fill"> 85 <a class="wp-block-button__link wp-element-button" href="#"> 86 <?php echo esc_html_x( 'Barnes & Noble', 'Example brand name.', 'twentytwentyfive' ); ?> 87 </a> 88 </div> 89 <!-- /wp:button --> 67 <!-- /wp:buttons --> 68 </div> 69 <!-- /wp:column --> 70 <!-- wp:column {"verticalAlignment":"stretch"} --> 71 <div class="wp-block-column is-vertically-aligned-stretch"> 72 <!-- wp:buttons {"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"flex","orientation":"horizontal","flexWrap":"wrap","justifyContent":"space-between"}} --> 73 <div class="wp-block-buttons"> 74 <!-- wp:button {"width":100,"className":"is-style-fill"} --> 75 <div class="wp-block-button has-custom-width wp-block-button__width-100 is-style-fill"> 76 <a class="wp-block-button__link wp-element-button" href="#"> 77 <?php echo esc_html_x( 'Audible', 'Example brand name.', 'twentytwentyfive' ); ?> 78 </a> 90 79 </div> 91 <!-- /wp:buttons --> 80 <!-- /wp:button --> 81 <!-- wp:button {"width":100,"className":"is-style-fill"} --> 82 <div class="wp-block-button has-custom-width wp-block-button__width-100 is-style-fill"> 83 <a class="wp-block-button__link wp-element-button" href="#"> 84 <?php echo esc_html_x( 'Barnes & Noble', 'Example brand name.', 'twentytwentyfive' ); ?> 85 </a> 86 </div> 87 <!-- /wp:button --> 92 88 </div> 93 <!-- /wp: column-->89 <!-- /wp:buttons --> 94 90 </div> 95 <!-- /wp:columns --> 91 <!-- /wp:column --> 92 </div> 93 <!-- /wp:columns --> 96 94 97 <!-- wp:spacer {"style":{"layout":{"selfStretch":"fit","flexSize":null},"spacing":{"margin":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40"}}}} -->98 <div style="margin-top:var(--wp--preset--spacing--40);margin-bottom:var(--wp--preset--spacing--40)" aria-hidden="true" class="wp-block-spacer"></div>99 95 <!-- wp:spacer {"style":{"layout":{"selfStretch":"fit","flexSize":null},"spacing":{"margin":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20"}}}} --> 96 <div style="margin-top:var(--wp--preset--spacing--20);margin-bottom:var(--wp--preset--spacing--20)" aria-hidden="true" class="wp-block-spacer"></div> 97 <!-- /wp:spacer --> 100 98 101 <!-- wp:paragraph {"fontSize":"medium"} --> 102 <p class="has-medium-font-size"><?php echo wp_kses_post( _x( 'Outside Europe? View <a href="#" rel="nofollow">international editions</a>.', 'Pattern placeholder text with link.', 'twentytwentyfive' ) ); ?></p> 103 <!-- /wp:paragraph --> 104 </div> 105 <!-- /wp:group --> 99 <!-- wp:paragraph {"fontSize":"medium"} --> 100 <p class="has-medium-font-size"><?php echo wp_kses_post( _x( 'Outside Europe? View <a href="#" rel="nofollow">international editions</a>.', 'Pattern placeholder text with link.', 'twentytwentyfive' ) ); ?></p> 101 <!-- /wp:paragraph --> 106 102 </div> 107 103 <!-- /wp:group --> 108 104 </div> 109 <!-- /wp:column --> 110 <!-- wp:column {"verticalAlignment":"top","width":"45%"} --> 111 <div class="wp-block-column is-vertically-aligned-top" style="flex-basis:45%"> 112 <!-- wp:image {"aspectRatio":"3/4","scale":"cover","sizeSlug":"full","linkDestination":"none"} --> 113 <figure class="wp-block-image size-full"> 114 <img src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/book-image.webp" alt="<?php echo esc_attr__( 'Book Image', 'twentytwentyfive' ); ?>" style="aspect-ratio:3/4;object-fit:cover"/> 115 </figure> 116 <!-- /wp:image --> 117 </div> 118 <!-- /wp:column --> 105 <!-- /wp:group --> 119 106 </div> 120 <!-- /wp:columns --> 107 <!-- /wp:column --> 108 109 <!-- wp:column {"verticalAlignment":"top","width":"45%"} --> 110 <div class="wp-block-column is-vertically-aligned-top" style="flex-basis:45%"> 111 <!-- wp:image {"aspectRatio":"3/4","scale":"cover","sizeSlug":"full","linkDestination":"none"} --> 112 <figure class="wp-block-image size-full"> 113 <img src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/book-image.webp" alt="<?php echo esc_attr__( 'Book Image', 'twentytwentyfive' ); ?>" style="aspect-ratio:3/4;object-fit:cover"/> 114 </figure> 115 <!-- /wp:image --> 116 </div> 117 <!-- /wp:column --> 121 118 </div> 122 <!-- /wp: group-->119 <!-- /wp:columns --> 123 120 </div> 121 <!-- /wp:group --> 124 122 </div> 125 <!-- /wp: cover-->123 <!-- /wp:group -->
Note: See TracChangeset
for help on using the changeset viewer.