Automattic / blockpatterns

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

Link in Bio with Painting #302

Closed iamtakashi closed 1 year ago

iamtakashi commented 1 year ago

The sign is an image at the moment, but we will change it to the Sketch block as soon as it becomes available on WP.com.

Category: Link in Bio

Tag: Layout, Pattern

Screenshot: dotcompatterns wordpress com_tag_pattern_

Markup:

<!-- wp:cover {"customOverlayColor":"#eae9e5","minHeight":100,"minHeightUnit":"vh","isDark":false,"align":"full","style":{"spacing":{"padding":{"top":"7vw","right":"7vw","bottom":"7vw","left":"7vw"}}}} -->
<div class="wp-block-cover alignfull is-light" style="padding-top:7vw;padding-right:7vw;padding-bottom:7vw;padding-left:7vw;min-height:100vh"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim" style="background-color:#eae9e5"></span><div class="wp-block-cover__inner-container"><!-- wp:columns {"style":{"spacing":{"blockGap":{"top":"7vw","left":"7vw"},"margin":{"bottom":"0px"}}}} -->
<div class="wp-block-columns" style="margin-bottom:0px"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":8351,"width":400,"height":109,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img src="https://dotcompatterns.files.wordpress.com/2022/10/monet_claude_1840-1926_02_signature-1.png" alt="" class="wp-image-8351" width="400" height="109"/></figure>
<!-- /wp:image -->

<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:buttons {"style":{"spacing":{"blockGap":"1rem"}}} -->
<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"white","textColor":"black","width":100,"style":{"typography":{"fontSize":"0.875rem"},"spacing":{"padding":{"top":"0.88rem","bottom":"0.88rem"}},"border":{"radius":"4px"}},"fontFamily":"merriweather"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 has-custom-font-size has-merriweather-font-family has-custom-font" style="font-size:0.875rem;font-family:merriweather"><a class="wp-block-button__link has-black-color has-white-background-color has-text-color has-background wp-element-button" href="#" style="border-radius:4px;padding-top:0.88rem;padding-bottom:0.88rem">Guide to Impressionism at The National Gallery</a></div>
<!-- /wp:button -->

<!-- wp:button {"backgroundColor":"white","textColor":"black","width":100,"style":{"typography":{"fontSize":"0.875rem"},"spacing":{"padding":{"top":"0.88rem","bottom":"0.88rem"}},"border":{"radius":"4px"}},"fontFamily":"merriweather"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 has-custom-font-size has-merriweather-font-family has-custom-font" style="font-size:0.875rem;font-family:merriweather"><a class="wp-block-button__link has-black-color has-white-background-color has-text-color has-background wp-element-button" href="#" style="border-radius:4px;padding-top:0.88rem;padding-bottom:0.88rem">How to paint like Monet: Lessons on Impressionist landscape</a></div>
<!-- /wp:button -->

<!-- wp:button {"backgroundColor":"white","textColor":"black","width":100,"style":{"typography":{"fontSize":"0.875rem"},"spacing":{"padding":{"top":"0.88rem","bottom":"0.88rem"}},"border":{"radius":"4px"}},"fontFamily":"merriweather"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 has-custom-font-size has-merriweather-font-family has-custom-font" style="font-size:0.875rem;font-family:merriweather"><a class="wp-block-button__link has-black-color has-white-background-color has-text-color has-background wp-element-button" href="#" style="border-radius:4px;padding-top:0.88rem;padding-bottom:0.88rem">Art and Modernity by Margaret Samu</a></div>
<!-- /wp:button -->

<!-- wp:button {"backgroundColor":"white","textColor":"black","width":100,"style":{"typography":{"fontSize":"0.875rem"},"spacing":{"padding":{"top":"0.88rem","bottom":"0.88rem"}},"border":{"radius":"4px"}},"fontFamily":"merriweather"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 has-custom-font-size has-merriweather-font-family has-custom-font" style="font-size:0.875rem;font-family:merriweather"><a class="wp-block-button__link has-black-color has-white-background-color has-text-color has-background wp-element-button" href="#" style="border-radius:4px;padding-top:0.88rem;padding-bottom:0.88rem">A beginner's guide to Impressionism in Khan Academy</a></div>
<!-- /wp:button -->

<!-- wp:button {"backgroundColor":"white","textColor":"black","width":100,"style":{"typography":{"fontSize":"0.875rem"},"spacing":{"padding":{"top":"0.88rem","bottom":"0.88rem"}},"border":{"radius":"4px"}},"fontFamily":"merriweather"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 has-custom-font-size has-merriweather-font-family has-custom-font" style="font-size:0.875rem;font-family:merriweather"><a class="wp-block-button__link has-black-color has-white-background-color has-text-color has-background wp-element-button" href="#" style="border-radius:4px;padding-top:0.88rem;padding-bottom:0.88rem">Artist Interview: John Carney Hayess, Minor Space</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column {"style":{"spacing":{"blockGap":"10px"}}} -->
<div class="wp-block-column"><!-- wp:image {"id":8133,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://dotcompatterns.files.wordpress.com/2022/10/image-from-rawpixel-id-547292-edit.jpg" alt="Claude Monet's Madame Monet and Her Son (1875)" class="wp-image-8133"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph {"align":"center","style":{"typography":{"fontSize":"0.75rem"},"color":{"text":"#7d7d7d"}}} -->
<p class="has-text-align-center has-text-color" style="color:#7d7d7d;font-size:0.75rem">Claude Monet's Madame Monet and Her Son (1875).<br>Original from the National Gallery of Art. Digitally enhanced by rawpixel.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div></div>
<!-- /wp:cover -->

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

cc @alaczek @onuro

alaczek commented 1 year ago

👍

iamtakashi commented 1 year ago

Published!

iamtakashi commented 1 year ago

I changed the signature to the Monet signature. It's much cooler than my attempt :D.