search

Automattic / blockpatterns

Repo of block patterns to work with
7 stars 2 forks source link

Designer Portfolio #172

Closed alaczek closed 3 years ago

alaczek commented 3 years ago

image

<!-- wp:group {"align":"full","style":{"color":{"background":"#e1ded7"},"spacing":{"padding":{"top":"100px","right":"0px","bottom":"100px"}}}} -->
<div class="wp-block-group alignfull has-background" style="background-color:#e1ded7;padding-top:100px;padding-right:0px;padding-bottom:100px"><!-- wp:paragraph {"align":"center","style":{"typography":{"lineHeight":"1.4","fontSize":"36px"},"color":{"text":"#1d1e1e"}}} -->
<p class="has-text-align-center has-text-color" style="color:#1d1e1e;font-size:36px;line-height:1.4">Hi, I’m <em>Linda Antin</em>,<br>an independent designer and filmmaker <br>who loves nature.</p>
<!-- /wp:paragraph -->

<!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:image {"id":351,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://portfolioblockpatterns.files.wordpress.com/2021/04/stocksnap_rg6usyji2a.jpg?w=1024" alt="" class="wp-image-351"/></figure>
<!-- /wp:image -->

<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:spacer {"height":170} -->
<div style="height:170px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:image {"id":352,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://portfolioblockpatterns.files.wordpress.com/2021/04/stocksnap_qjo8nshmnx.jpg?w=819" alt="" class="wp-image-352"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":349,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://portfolioblockpatterns.files.wordpress.com/2021/04/stocksnap_kjxywo8cmm.jpg?w=1024" alt="" class="wp-image-349"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

Live Preview: https://portfolioblockpatterns.wordpress.com/2021/04/19/gallery-block-patterns/

alaczek commented 3 years ago

I updated the code above to explicitly declare text color and font-size.

kjellr commented 3 years ago

Image credits:

alaczek commented 3 years ago

Published!