Link in Bio (Biba)

[alaczek]

<!-- wp:media-text {"align":"full","mediaPosition":"right","mediaId":5817,"mediaLink":"https://dotcompatterns.wordpress.com/?attachment_id=5817","mediaType":"image","imageFill":true,"style":{"elements":{"link":{"color":{"text":"var:preset|color|background"}}}},"backgroundColor":"black","textColor":"background"} -->
<div class="wp-block-media-text alignfull has-media-on-the-right is-stacked-on-mobile is-image-fill has-background-color has-black-background-color has-text-color has-background has-link-color"><div class="wp-block-media-text__content"><!-- wp:group {"style":{"spacing":{"blockGap":"30px","padding":{"top":"5vw","right":"5vw","bottom":"5vw","left":"5vw"}}}} -->
<div class="wp-block-group" style="padding-top:5vw;padding-right:5vw;padding-bottom:5vw;padding-left:5vw"><!-- wp:heading {"style":{"typography":{"fontSize":"200px","lineHeight":"1"}},"textColor":"background"} -->
<h2 class="has-background-color has-text-color" style="font-size:200px;line-height:1"><strong>BIBA</strong></h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Hey! Thanks for stopping by. Check out my links if you like. You know, the future is now!</p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"textColor":"black","width":100,"style":{"typography":{"textTransform":"uppercase"},"border":{"radius":"100px"},"color":{"gradient":"linear-gradient(135deg,rgb(34,193,195) 0%,rgb(224,253,45) 100%)"}}} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100" style="text-transform:uppercase"><a class="wp-block-button__link has-black-color has-text-color has-background wp-element-button" style="border-radius:100px;background:linear-gradient(135deg,rgb(34,193,195) 0%,rgb(224,253,45) 100%)"><strong>Soundcloud</strong></a></div>
<!-- /wp:button -->

<!-- wp:button {"width":100,"style":{"typography":{"textTransform":"uppercase"},"border":{"radius":"100px"},"color":{"gradient":"linear-gradient(135deg,rgb(255,231,102) 0%,rgb(255,94,98) 100%)","text":"#960c0d"}}} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100" style="text-transform:uppercase"><a class="wp-block-button__link has-text-color has-background wp-element-button" style="border-radius:100px;background:linear-gradient(135deg,rgb(255,231,102) 0%,rgb(255,94,98) 100%);color:#960c0d"><strong>Bandcamp</strong></a></div>
<!-- /wp:button -->

<!-- wp:button {"width":100,"style":{"typography":{"textTransform":"uppercase"},"border":{"radius":"100px"},"color":{"gradient":"linear-gradient(135deg,rgb(12,235,235) 0%,rgb(32,227,178) 49%,rgb(41,255,198) 100%)","text":"#0b5340"}}} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100" style="text-transform:uppercase"><a class="wp-block-button__link has-text-color has-background wp-element-button" style="border-radius:100px;background:linear-gradient(135deg,rgb(12,235,235) 0%,rgb(32,227,178) 49%,rgb(41,255,198) 100%);color:#0b5340"><strong>Spotify</strong></a></div>
<!-- /wp:button -->

<!-- wp:button {"width":100,"style":{"typography":{"textTransform":"uppercase"},"border":{"radius":"100px"},"color":{"gradient":"linear-gradient(135deg,rgb(100,207,241) 0%,rgb(122,103,241) 100%)","text":"#142547"}}} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100" style="text-transform:uppercase"><a class="wp-block-button__link has-text-color has-background wp-element-button" style="border-radius:100px;background:linear-gradient(135deg,rgb(100,207,241) 0%,rgb(122,103,241) 100%);color:#142547"><strong>YouTube</strong></a></div>
<!-- /wp:button -->

<!-- wp:button {"width":100,"style":{"typography":{"textTransform":"uppercase"},"border":{"radius":"100px"},"color":{"gradient":"linear-gradient(135deg,rgb(175,109,252) 0%,rgb(238,140,198) 51%,rgb(252,229,161) 100%)","text":"#1c006d"}}} -->
<div class="wp-block-button has-custom-width wp-block-button__width-100" style="text-transform:uppercase"><a class="wp-block-button__link has-text-color has-background wp-element-button" style="border-radius:100px;background:linear-gradient(135deg,rgb(175,109,252) 0%,rgb(238,140,198) 51%,rgb(252,229,161) 100%);color:#1c006d"><strong>Instagram</strong></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph --></div><figure class="wp-block-media-text__media" style="background-image:url(https://dotcompatterns.files.wordpress.com/2022/08/jorge-saavedra-jbxl_exezb8-unsplash.jpg?w=746);background-position:50% 50%"><img src="https://dotcompatterns.files.wordpress.com/2022/08/jorge-saavedra-jbxl_exezb8-unsplash.jpg?w=746" alt="" class="wp-image-5817 size-full"/></figure></div>
<!-- /wp:media-text -->

Preview: https://dotcompatterns.wordpress.com/?p=5816

[onuro]

I wonder if the title is too big even for the desktop size. Or maybe the media column can be a little shorter?

[iamtakashi]

I wonder if we should use a column block and a cover block so we can make the height of the pattern 100vh. I've tried this method here: https://libthemeexperiment.wordpress.com/biba-2/

[alaczek]

I like that, good call Takashi! Published!

[alaczek]

The deasign has been updated, and so I'll be updating the pattern in the theme and on the source site.

New design:

Code:

<!-- wp:cover {"overlayColor":"black","minHeight":100,"minHeightUnit":"vh","align":"full","style":{"spacing":{"padding":{"top":"4vw","right":"4vw","bottom":"4vw","left":"4vw"}}}} -->
<div class="wp-block-cover alignfull" style="padding-top:4vw;padding-right:4vw;padding-bottom:4vw;padding-left:4vw;min-height:100vh"><span aria-hidden="true" class="wp-block-cover__background has-black-background-color has-background-dim-100 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:group {"layout":{"type":"constrained"},"style":{"spacing":{"blockGap":"20px","margin":{"bottom":"0"}}}} -->
<div class="wp-block-group" style="margin-bottom:0"><!-- wp:site-logo {"width":130,"isLink":false,"align":"center","className":"is-style-rounded"} /-->

<!-- wp:site-title {"textAlign":"center","isLink":false,"style":{"elements":{"link":{"color":{"text":"var:preset|color|background"}}},"typography":{"textTransform":"uppercase","fontSize":"69px","lineHeight":"1","fontStyle":"normal","fontWeight":"700"}},"textColor":"background"} /-->

<!-- wp:site-tagline {"textAlign":"center","textColor":"background","fontSize":"x-small"} /-->

<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center","orientation":"vertical"}} -->
<div class="wp-block-buttons"><!-- wp:button {"textColor":"black","width":75,"style":{"typography":{"textTransform":"uppercase"},"border":{"radius":"100px"},"color":{"gradient":"linear-gradient(135deg,rgb(34,193,195) 0%,rgb(224,253,45) 100%)"},"spacing":{"padding":{"top":"var:preset|spacing|40","right":"var:preset|spacing|40","bottom":"var:preset|spacing|40","left":"var:preset|spacing|40"}}}} -->
<div class="wp-block-button has-custom-width wp-block-button__width-75" style="text-transform:uppercase"><a class="wp-block-button__link has-black-color has-text-color has-background wp-element-button" style="border-radius:100px;background:linear-gradient(135deg,rgb(34,193,195) 0%,rgb(224,253,45) 100%);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)"><strong>Soundcloud</strong></a></div>
<!-- /wp:button -->

<!-- wp:button {"width":75,"style":{"typography":{"textTransform":"uppercase"},"border":{"radius":"100px"},"color":{"gradient":"linear-gradient(135deg,rgb(255,231,102) 0%,rgb(255,94,98) 100%)","text":"#960c0d"}}} -->
<div class="wp-block-button has-custom-width wp-block-button__width-75" style="text-transform:uppercase"><a class="wp-block-button__link has-text-color has-background wp-element-button" style="border-radius:100px;color:#960c0d;background:linear-gradient(135deg,rgb(255,231,102) 0%,rgb(255,94,98) 100%)"><strong>Bandcamp</strong></a></div>
<!-- /wp:button -->

<!-- wp:button {"width":75,"style":{"typography":{"textTransform":"uppercase"},"border":{"radius":"100px"},"color":{"gradient":"linear-gradient(135deg,rgb(12,235,235) 0%,rgb(32,227,178) 49%,rgb(41,255,198) 100%)","text":"#0b5340"}}} -->
<div class="wp-block-button has-custom-width wp-block-button__width-75" style="text-transform:uppercase"><a class="wp-block-button__link has-text-color has-background wp-element-button" style="border-radius:100px;color:#0b5340;background:linear-gradient(135deg,rgb(12,235,235) 0%,rgb(32,227,178) 49%,rgb(41,255,198) 100%)"><strong>Spotify</strong></a></div>
<!-- /wp:button -->

<!-- wp:button {"width":75,"style":{"typography":{"textTransform":"uppercase"},"border":{"radius":"100px"},"color":{"gradient":"linear-gradient(135deg,rgb(100,207,241) 0%,rgb(122,103,241) 100%)","text":"#142547"}}} -->
<div class="wp-block-button has-custom-width wp-block-button__width-75" style="text-transform:uppercase"><a class="wp-block-button__link has-text-color has-background wp-element-button" style="border-radius:100px;color:#142547;background:linear-gradient(135deg,rgb(100,207,241) 0%,rgb(122,103,241) 100%)"><strong>YouTube</strong></a></div>
<!-- /wp:button -->

<!-- wp:button {"width":75,"style":{"typography":{"textTransform":"uppercase"},"border":{"radius":"100px"},"color":{"gradient":"linear-gradient(135deg,rgb(175,109,252) 0%,rgb(238,140,198) 51%,rgb(252,229,161) 100%)","text":"#1c006d"}}} -->
<div class="wp-block-button has-custom-width wp-block-button__width-75" style="text-transform:uppercase"><a class="wp-block-button__link has-text-color has-background wp-element-button" style="border-radius:100px;color:#1c006d;background:linear-gradient(135deg,rgb(175,109,252) 0%,rgb(238,140,198) 51%,rgb(252,229,161) 100%)"><strong>Instagram</strong></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover -->

Preview: https://dotcompatterns.wordpress.com/2022/08/25/link-in-bio-with-gradient-buttons/ Note we need to use the Site logo, title, and tagline in these patterns, and the pattern source site has no logo, so the preview will be different than the design. cc @iamtakashi

[iamtakashi]

Looks good 👍 Thanks for updating this pattern. It will be more useful for many.