Automattic / blockpatterns

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

Link in Bio with Synthwave Background #300

Closed iamtakashi closed 1 year ago

iamtakashi commented 1 year ago

An additional LiB pattern based on the feedback from Matt.

Category: Link in Bio

Tag: Pattern, Layout

Screenshot: dotcompatterns wordpress com__p=8095 preview=true (1)

Markup:

<!-- wp:cover {"minHeight":100,"minHeightUnit":"vh","customGradient":"linear-gradient(180deg,rgb(135,72,175) 0%,rgb(52,5,106) 53%,rgb(205,125,226) 100%)","isDark":false,"align":"full","style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}}} -->
<div class="wp-block-cover alignfull is-light" style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;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(135,72,175) 0%,rgb(52,5,106) 53%,rgb(205,125,226) 100%)"></span><div class="wp-block-cover__inner-container"><!-- wp:cover {"url":"https://dotcompatterns.files.wordpress.com/2022/10/synthwave-background-without-noise.png","id":8117,"dimRatio":0,"minHeight":100,"minHeightUnit":"vh","isDark":false} -->
<div class="wp-block-cover is-light" style="min-height:100vh"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span><img class="wp-block-cover__image-background wp-image-8117" alt="" src="https://dotcompatterns.files.wordpress.com/2022/10/synthwave-background-without-noise.png" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:group {"style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}}},"textColor":"white","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-white-color has-text-color has-link-color"><!-- wp:site-logo {"width":100,"align":"center","className":"is-style-rounded"} /-->

<!-- wp:site-title {"textAlign":"center","isLink":false,"style":{"typography":{"fontStyle":"italic","fontWeight":"900","lineHeight":"1.1"},"spacing":{"margin":{"top":"1rem"}}},"fontSize":"large","fontFamily":"space-mono"} /-->

<!-- wp:site-tagline {"textAlign":"center","style":{"typography":{"fontStyle":"italic","fontWeight":"400","lineHeight":"1.5"},"spacing":{"margin":{"top":"0.38rem"}}},"fontSize":"small","fontFamily":"space-mono"} /-->

<!-- wp:buttons {"style":{"spacing":{"blockGap":"1rem"}}} -->
<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"black","textColor":"white","width":100,"style":{"border":{"radius":"1000px"},"typography":{"fontSize":"1.1875rem","fontStyle":"italic","fontWeight":"700"}},"className":"is-style-outline","fontFamily":"space-mono"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 has-custom-font-size is-style-outline has-space-mono-font-family has-custom-font" style="font-size:1.1875rem;font-style:italic;font-weight:700;font-family:space-mono"><a class="wp-block-button__link has-white-color has-black-background-color has-text-color has-background wp-element-button" href="#" style="border-radius:1000px">⚡NEW VID: How to Grow After Affiliate⚡</a></div>
<!-- /wp:button -->

<!-- wp:button {"backgroundColor":"black","textColor":"white","width":100,"style":{"border":{"radius":"1000px"},"typography":{"fontSize":"1.1875rem","fontStyle":"italic","fontWeight":"700"}},"className":"is-style-outline","fontFamily":"space-mono"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 has-custom-font-size is-style-outline has-space-mono-font-family has-custom-font" style="font-size:1.1875rem;font-style:italic;font-weight:700;font-family:space-mono"><a class="wp-block-button__link has-white-color has-black-background-color has-text-color has-background wp-element-button" href="#" style="border-radius:1000px">⚡NEW EP: The Stream Coaching Podcast⚡</a></div>
<!-- /wp:button -->

<!-- wp:button {"backgroundColor":"black","textColor":"white","width":100,"style":{"border":{"radius":"1000px"},"typography":{"fontSize":"1.1875rem","fontStyle":"italic","fontWeight":"700"}},"className":"is-style-outline","fontFamily":"space-mono"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 has-custom-font-size is-style-outline has-space-mono-font-family has-custom-font" style="font-size:1.1875rem;font-style:italic;font-weight:700;font-family:space-mono"><a class="wp-block-button__link has-white-color has-black-background-color has-text-color has-background wp-element-button" href="#" style="border-radius:1000px">⚡Get my FREE e-Workbook⚡</a></div>
<!-- /wp:button -->

<!-- wp:button {"backgroundColor":"black","textColor":"white","width":100,"style":{"border":{"radius":"1000px"},"typography":{"fontSize":"1.1875rem","fontStyle":"italic","fontWeight":"700"}},"className":"is-style-outline","fontFamily":"space-mono"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 has-custom-font-size is-style-outline has-space-mono-font-family has-custom-font" style="font-size:1.1875rem;font-style:italic;font-weight:700;font-family:space-mono"><a class="wp-block-button__link has-white-color has-black-background-color has-text-color has-background wp-element-button" href="#" style="border-radius:1000px">⚡Check Out This Overwatch 2⚡️</a></div>
<!-- /wp:button -->

<!-- wp:button {"backgroundColor":"black","textColor":"white","width":100,"style":{"border":{"radius":"1000px"},"typography":{"fontSize":"1.1875rem","fontStyle":"italic","fontWeight":"700"}},"className":"is-style-outline","fontFamily":"space-mono"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100 has-custom-font-size is-style-outline has-space-mono-font-family has-custom-font" style="font-size:1.1875rem;font-style:italic;font-weight:700;font-family:space-mono"><a class="wp-block-button__link has-white-color has-black-background-color has-text-color has-background wp-element-button" href="#" style="border-radius:1000px">⚡Ask Me Anything⚡️</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover --></div></div>
<!-- /wp:cover -->

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

cc @alaczek @onuro

alaczek commented 1 year ago

Looking good 👍

iamtakashi commented 1 year ago

Published!