Creative Header with Hero Image

Now paste the content as a Custom HTML block and then Convert to Blocks

Requires:

Block Theme
<!-- wp:cover {"customOverlayColor":"#e4e1fe","minHeight":780,"minHeightUnit":"px","contentPosition":"center center","isDark":false,"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|40","right":"var:preset|spacing|40","bottom":"var:preset|spacing|40","left":"var:preset|spacing|40"},"margin":{"top":"0","bottom":"0"},"blockGap":"var:preset|spacing|60"}},"className":"fotawpbanner-with-slantbottom"} -->

<div class="wp-block-cover alignfull is-light fotawpbanner-with-slantbottom" style="margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40);min-height:780px"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim" style="background-color:#e4e1fe"></span><div class="wp-block-cover__inner-container"><!-- wp:columns -->

<div class="wp-block-columns"><!-- wp:column {"width":"2vw"} -->

<div class="wp-block-column" style="flex-basis:2vw"></div>

<!-- /wp:column -->



<!-- wp:column {"width":"98vw"} -->

<div class="wp-block-column" style="flex-basis:98vw"><!-- wp:cover {"minHeight":100,"minHeightUnit":"vh","customGradient":"linear-gradient(180deg,rgb(251,251,251) 0%,rgba(255,255,255,0) 100%)","contentPosition":"center center","style":{"spacing":{"blockGap":"0","margin":{"top":"0","bottom":"0"},"padding":{"right":"0","left":"0","top":"var:preset|spacing|small","bottom":"var:preset|spacing|small"}},"elements":{"link":{"color":{"text":"var:preset|color|main"}}},"border":{"radius":"2em"}},"textColor":"main","layout":{"type":"constrained","contentSize":"1080px","wideSize":""}} -->

<div class="wp-block-cover has-main-color has-text-color has-link-color" style="border-radius:2em;margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--small);padding-right:0;padding-bottom:var(--wp--preset--spacing--small);padding-left:0;min-height:100vh"><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,251,251) 0%,rgba(255,255,255,0) 100%)"></span><div class="wp-block-cover__inner-container"><!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|40","right":"0","bottom":"var:preset|spacing|40","left":"0"}}},"layout":{"type":"constrained","contentSize":"1280px"},"metadata":{"name":"Header"}} -->

<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--40);padding-right:0;padding-bottom:var(--wp--preset--spacing--40);padding-left:0"><!-- wp:group {"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between"}} -->

<div class="wp-block-group"><!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->

<div class="wp-block-group"><!-- wp:site-logo {"width":50,"shouldSyncIcon":false} /--></div>

<!-- /wp:group -->



<!-- wp:group {"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"right"}} -->

<div class="wp-block-group"><!-- wp:navigation {"textColor":"foregound-alt","overlayBackgroundColor":"accent","overlayTextColor":"secondary","layout":{"type":"flex","justifyContent":"right"},"style":{"spacing":{"blockGap":"var:preset|spacing|50"}}} -->

<!-- wp:navigation-link {"label":"About","url":"#","kind":"custom","isTopLevelLink":true} /-->



<!-- wp:navigation-link {"label":"Style Guide","url":"#","kind":"custom","isTopLevelLink":true} /-->



<!-- wp:navigation-link {"label":"Blog","url":"#","kind":"custom","isTopLevelLink":true} /-->



<!-- wp:navigation-link {"label":"Contact","url":"#","kind":"custom","isTopLevelLink":true} /-->

<!-- /wp:navigation -->



<!-- wp:social-links {"style":{"spacing":{"blockGap":{"left":"var:preset|spacing|20"}}},"className":"is-style-logos-only"} -->

<ul class="wp-block-social-links is-style-logos-only"><!-- wp:social-link {"url":"#","service":"spotify"} /-->



<!-- wp:social-link {"url":"#","service":"instagram"} /-->



<!-- wp:social-link {"url":"#","service":"behance"} /-->



<!-- wp:social-link {"url":"#","service":"vk"} /--></ul>

<!-- /wp:social-links --></div>

<!-- /wp:group --></div>

<!-- /wp:group --></div>

<!-- /wp:group -->



<!-- wp:columns {"verticalAlignment":"center","align":"wide","style":{"spacing":{"padding":{"top":"2%","right":"2%","bottom":"2%","left":"2%"},"margin":{"top":"0","bottom":"0"},"blockGap":{"top":"0","left":"var:preset|spacing|30"}}}} -->

<div class="wp-block-columns alignwide are-vertically-aligned-center" style="margin-top:0;margin-bottom:0;padding-top:2%;padding-right:2%;padding-bottom:2%;padding-left:2%"><!-- wp:column {"verticalAlignment":"center","width":"50%"} -->

<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:50%"><!-- wp:image {"align":"center","id":26,"sizeSlug":"full","linkDestination":"none","className":"is-style-rounded"} -->

<figure class="wp-block-image aligncenter size-full is-style-rounded"><img src="https://65b1a273f005b40a4108aea0--roaring-pony-f7d068.netlify.app/wp-content/uploads/2024/01/thisisengineering-raeng-TXxiFuQLBKQ-unsplash-edited.jpg" alt="" class="wp-image-26"/></figure>

<!-- /wp:image --></div>

<!-- /wp:column -->



<!-- wp:column {"verticalAlignment":"center","width":"50%","style":{"spacing":{"padding":{"left":"2%","right":"2%","top":"2%","bottom":"2%"},"blockGap":"var:preset|spacing|large"}}} -->

<div class="wp-block-column is-vertically-aligned-center" style="padding-top:2%;padding-right:2%;padding-bottom:2%;padding-left:2%;flex-basis:50%"><!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|40"}},"layout":{"type":"flex","orientation":"vertical"}} -->

<div class="wp-block-group"><!-- wp:heading {"textAlign":"left","level":1,"style":{"typography":{"fontStyle":"normal","fontWeight":"600"}},"className":"is-style-default","fontSize":"xx-large"} -->

<h1 class="wp-block-heading has-text-align-left is-style-default has-xx-large-font-size" id="title-text" style="font-style:normal;font-weight:600">Digital Craft</h1>

<!-- /wp:heading -->



<!-- wp:paragraph {"align":"left","style":{"typography":{"fontStyle":"normal","fontWeight":"400"}},"className":"about-franklin-county","fontSize":"large"} -->

<p class="has-text-align-left about-franklin-county has-large-font-size" style="font-style:normal;font-weight:400">Crafting Seamless, Stunning Websites for Your Success!</p>

<!-- /wp:paragraph -->



<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"left"}} -->

<div class="wp-block-buttons"><!-- wp:button {"textAlign":"center","className":"is-style-secondary-button is-style-fill"} -->

<div class="wp-block-button is-style-secondary-button is-style-fill"><a class="wp-block-button__link has-text-align-center wp-element-button">Get now</a></div>

<!-- /wp:button -->



<!-- wp:button {"textAlign":"center","style":{"border":{"width":"0px","style":"none"}},"className":"is-style-outline"} -->

<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-text-align-center wp-element-button" style="border-style:none;border-width:0px">More info</a></div>

<!-- /wp:button --></div>

<!-- /wp:buttons --></div>

<!-- /wp:group --></div>

<!-- /wp:column --></div>

<!-- /wp:columns --></div></div>

<!-- /wp:cover --></div>

<!-- /wp:column -->



<!-- wp:column {"width":"2vw"} -->

<div class="wp-block-column" style="flex-basis:2vw"></div>

<!-- /wp:column --></div>

<!-- /wp:columns --></div></div>

<!-- /wp:cover -->