Alternating Rows of Features

[onuro]

Category: Features
Tag: Pattern
Pattern Meta: is_web

Screenshot:

Markup:

<!-- wp:heading {"align":"wide","style":{"spacing":{"padding":{"top":"var:preset|spacing|40","bottom":"0"}},"typography":{"fontSize":"3rem","fontStyle":"normal","fontWeight":"700"}}} -->
<h2 class="wp-block-heading alignwide" style="padding-top:var(--wp--preset--spacing--40);padding-bottom:0;font-size:3rem;font-style:normal;font-weight:700">My Process</h2>
<!-- /wp:heading -->

<!-- wp:columns {"verticalAlignment":"center","align":"full"} -->
<div class="wp-block-columns alignfull are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center","style":{"border":{"top":{"color":"var:preset|color|tertiary","width":"1px"}},"spacing":{"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50"}}},"layout":{"type":"constrained","contentSize":"525px"}} -->
<div class="wp-block-column is-vertically-aligned-center" style="border-top-color:var(--wp--preset--color--tertiary);border-top-width:1px;padding-top:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50)"><!-- wp:heading {"level":3,"style":{"typography":{"fontStyle":"normal","fontWeight":"700"}}} -->
<h3 class="wp-block-heading" style="font-style:normal;font-weight:700">Identifying the Work</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Tell me about your inquiry and your challenges. I’ll provide you with both a free quote and timing estimates. My goal is to make your 3D visualization and modeling services more reasonable and your projects more to be as competitive as possible.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center","width":"","layout":{"type":"default"}} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:group {"layout":{"type":"default"}} -->
<div class="wp-block-group"><!-- wp:image {"align":"center","id":9032,"width":281,"height":280,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image aligncenter size-large is-resized"><img src="https://dotcompatterns.files.wordpress.com/2022/12/box.png?w=561" alt="" class="wp-image-9032" width="281" height="280"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"verticalAlignment":"center","align":"full"} -->
<div class="wp-block-columns alignfull are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center","layout":{"type":"constrained","contentSize":"525px"}} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:group {"layout":{"type":"default"}} -->
<div class="wp-block-group"><!-- wp:image {"align":"center","id":9031,"width":280,"height":280,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image aligncenter size-large is-resized"><img src="https://dotcompatterns.files.wordpress.com/2022/12/hectagon.png?w=560" alt="" class="wp-image-9031" width="280" height="280"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center","width":"","style":{"spacing":{"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50"}},"border":{"top":{"color":"var:preset|color|tertiary","width":"1px"}}},"layout":{"type":"constrained","contentSize":"525px"}} -->
<div class="wp-block-column is-vertically-aligned-center" style="border-top-color:var(--wp--preset--color--tertiary);border-top-width:1px;padding-top:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50)"><!-- wp:heading {"level":3,"style":{"typography":{"fontStyle":"normal","fontWeight":"700"}}} -->
<h3 class="wp-block-heading" style="font-style:normal;font-weight:700">Iterate and Iterate</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Based on your project requirements, I’ll start modeling, adding textures, camera views, and so on. During the execution of your project, I will send you reports on an on-going basis to get your feedback.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"verticalAlignment":"center","align":"full"} -->
<div class="wp-block-columns alignfull are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center","style":{"border":{"top":{"color":"var:preset|color|tertiary","width":"1px"}},"spacing":{"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50"}}},"layout":{"type":"constrained","contentSize":"525px"}} -->
<div class="wp-block-column is-vertically-aligned-center" style="border-top-color:var(--wp--preset--color--tertiary);border-top-width:1px;padding-top:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50)"><!-- wp:heading {"level":3,"style":{"typography":{"fontStyle":"normal","fontWeight":"700"}}} -->
<h3 class="wp-block-heading" style="font-style:normal;font-weight:700">Deliver the Final Result</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Tell me about your inquiry and your challenges. I’ll provide you with both a free quote and timing estimates. My goal is to make your 3D visualization and modeling services more reasonable and your projects more to be as competitive as possible.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center","width":"","layout":{"type":"default"}} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:group {"layout":{"type":"default"}} -->
<div class="wp-block-group"><!-- wp:image {"align":"center","id":9033,"width":280,"height":280,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image aligncenter size-large is-resized"><img src="https://dotcompatterns.files.wordpress.com/2022/12/octahedron.png?w=560" alt="" class="wp-image-9033" width="280" height="280"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

Preview:
https://dotcompatterns.wordpress.com/?p=9029&preview=true

A pattern originally from the Arkin theme.

cc @alaczek @iamtakashi

[iamtakashi]

Noticed a few problems.

• Do we need the heading "My Process"? It looks like it is hanging without any intention.
• I don't think it needs the faint separators. They make the content flow complicated, in my opinion.
• The content bumps to the edge of the browser windows for medium and small screens.

[iamtakashi]

Make sure the draft has a good category, tag, and post meta.