Manager

Back Back Up Advanced Editor

<?php
/**
 * Title: Hero, overlapped book cover with links
 * Slug: twentytwentyfive/hero-overlapped-book-cover-with-links
 * Categories: banner
 * Description: A hero with an overlapped book cover and links.
 *
 * @package WordPress
 * @subpackage Twenty_Twenty_Five
 * @since Twenty Twenty-Five 1.0
 */

?>

<div class="wp-block-group alignfull is-style-section-1" style="margin-top:0;margin-bottom:0;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)">
	
	<div class="wp-block-group alignwide">
		
		<div class="wp-block-columns alignwide">
			
			<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:55%">
				
				<div class="wp-block-group" style="min-height:100%">
					
					<div class="wp-block-group">
						
						<h2 class="wp-block-heading has-xx-large-font-size">
							<?php echo esc_html_x( 'The Stories Book', 'Hero - Overlapped book cover pattern headline text', 'twentytwentyfive' ); ?>
						</h2>

<p class="is-style-text-subtitle">
							<?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' ); ?>
						</p>
						
					</div>

<div class="wp-block-group">
						
						<div style="margin-top:var(--wp--preset--spacing--20);margin-bottom:var(--wp--preset--spacing--20)" aria-hidden="true" class="wp-block-spacer"></div>

<div class="wp-block-columns">
							
							<div class="wp-block-column is-vertically-aligned-stretch">
								
								<div class="wp-block-buttons">
									
									<div class="wp-block-button has-custom-width wp-block-button__width-100 is-style-fill">
										<a class="wp-block-button__link wp-element-button" href="#">
											<?php echo esc_html_x( 'Amazon', 'Example brand name.', 'twentytwentyfive' ); ?>
										</a>
									</div>
									
									
									<div class="wp-block-button has-custom-width wp-block-button__width-100 is-style-fill">
										<a class="wp-block-button__link wp-element-button" href="#">
											<?php echo esc_html_x( 'Apple Books', 'Example brand name.', 'twentytwentyfive' ); ?>
										</a>
									</div>
									
								</div>
								
							</div>
							
							
							<div class="wp-block-column is-vertically-aligned-stretch">
								
								<div class="wp-block-buttons">
									
									<div class="wp-block-button has-custom-width wp-block-button__width-100 is-style-fill">
										<a class="wp-block-button__link wp-element-button" href="#">
											<?php echo esc_html_x( 'Audible', 'Example brand name.', 'twentytwentyfive' ); ?>
										</a>
									</div>
									
									
									<div class="wp-block-button has-custom-width wp-block-button__width-100 is-style-fill">
										<a class="wp-block-button__link wp-element-button" href="#">
											<?php echo esc_html_x( 'Barnes &amp; Noble', 'Example brand name.', 'twentytwentyfive' ); ?>
										</a>
									</div>
									
								</div>
								
							</div>
							
						</div>

<div style="margin-top:var(--wp--preset--spacing--20);margin-bottom:var(--wp--preset--spacing--20)" aria-hidden="true" class="wp-block-spacer"></div>

<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>
						
					</div>
					
				</div>
				
			</div>

<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:45%">
				
				<figure class="wp-block-image size-full">
					<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"/>
				</figure>
				
			</div>
			
		</div>
		
	</div>
	
</div>