search

Automattic / blockpatterns

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

Link in Bio (Paul Nyberg) #246

Closed alaczek closed 2 years ago

alaczek commented 2 years ago

Frame 12239

<!-- wp:cover {"customOverlayColor":"#011a0b","minHeight":100,"minHeightUnit":"vh","align":"full"} -->
<div class="wp-block-cover alignfull" style="min-height:100vh"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim" style="background-color:#011a0b"></span><div class="wp-block-cover__inner-container"><!-- wp:group {"layout":{"inherit":true}} -->
<div class="wp-block-group"><!-- wp:group {"style":{"spacing":{"blockGap":"50px"}},"layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group"><!-- wp:image {"align":"left","id":5840,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image alignleft size-large"><img src="https://dotcompatterns.files.wordpress.com/2022/08/avatar_placeholder.png?w=100" alt="" class="wp-image-5840"/></figure>
<!-- /wp:image -->

<!-- wp:group {"style":{"spacing":{"blockGap":"0px"}},"layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"typography":{"textTransform":"uppercase","letterSpacing":"2px","fontStyle":"normal","fontWeight":"500"},"color":{"text":"#ffffffb3"}}} -->
<p class="has-text-color" style="color:#ffffffb3;font-style:normal;font-weight:500;letter-spacing:2px;text-transform:uppercase">Paul Nyberg</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"style":{"typography":{"textTransform":"uppercase","fontSize":"40px"},"color":{"text":"#dbff00"}},"fontFamily":"space-mono"} -->
<h2 class="has-text-color has-space-mono-font-family has-custom-font" style="color:#dbff00;font-size:40px;text-transform:uppercase;font-family:space-mono">Musician &amp; Songwriter</h2>
<!-- /wp:heading --></div>
<!-- /wp:group -->

<!-- wp:paragraph {"style":{"color":{"text":"#ffffffb3"}},"fontSize":"small"} -->
<p class="has-text-color has-small-font-size" style="color:#ffffffb3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:columns {"style":{"spacing":{"margin":{"top":"50px","bottom":"50px"}}}} -->
<div class="wp-block-columns" style="margin-top:50px;margin-bottom:50px"><!-- wp:column {"width":"50%"} -->
<div class="wp-block-column" style="flex-basis:50%"><!-- wp:paragraph {"style":{"typography":{"textTransform":"uppercase","letterSpacing":"2px","fontStyle":"normal","fontWeight":"500"},"color":{"text":"#ffffffb3"}},"fontSize":"small"} -->
<p class="has-text-color has-small-font-size" style="color:#ffffffb3;font-style:normal;font-weight:500;letter-spacing:2px;text-transform:uppercase">My Music</p>
<!-- /wp:paragraph -->

<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"#dbff00"}}}}} -->
<p class="has-link-color"><a href="#">Soundcloud</a></p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":5838,"width":14,"height":15,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large is-resized"><img src="https://dotcompatterns.files.wordpress.com/2022/08/arrow.png?w=28" alt="" class="wp-image-5838" width="14" height="15"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group -->

<!-- wp:separator {"style":{"color":{"background":"#ffffff54"}},"className":"is-style-wide"} -->
<hr class="wp-block-separator has-text-color has-alpha-channel-opacity has-background is-style-wide" style="background-color:#ffffff54;color:#ffffff54"/>
<!-- /wp:separator -->

<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"#dbff00"}}}}} -->
<p class="has-link-color"><a href="#">Bandcamp</a></p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":5838,"width":14,"height":15,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large is-resized"><img src="https://dotcompatterns.files.wordpress.com/2022/08/arrow.png?w=28" alt="" class="wp-image-5838" width="14" height="15"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group -->

<!-- wp:separator {"style":{"color":{"background":"#ffffff54"}},"className":"is-style-wide"} -->
<hr class="wp-block-separator has-text-color has-alpha-channel-opacity has-background is-style-wide" style="background-color:#ffffff54;color:#ffffff54"/>
<!-- /wp:separator -->

<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"#dbff00"}}}}} -->
<p class="has-link-color"><a href="#">Spotify</a></p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":5838,"width":14,"height":15,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large is-resized"><img src="https://dotcompatterns.files.wordpress.com/2022/08/arrow.png?w=28" alt="" class="wp-image-5838" width="14" height="15"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group -->

<!-- wp:separator {"style":{"color":{"background":"#ffffff54"}},"className":"is-style-wide"} -->
<hr class="wp-block-separator has-text-color has-alpha-channel-opacity has-background is-style-wide" style="background-color:#ffffff54;color:#ffffff54"/>
<!-- /wp:separator --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"50%"} -->
<div class="wp-block-column" style="flex-basis:50%"><!-- wp:paragraph {"style":{"typography":{"fontStyle":"normal","fontWeight":"500","textTransform":"uppercase","letterSpacing":"2px"},"color":{"text":"#ffffffb3"}},"fontSize":"small"} -->
<p class="has-text-color has-small-font-size" style="color:#ffffffb3;font-style:normal;font-weight:500;letter-spacing:2px;text-transform:uppercase">Socials</p>
<!-- /wp:paragraph -->

<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"#dbff00"}}}}} -->
<p class="has-link-color"><a href="#">Instagram</a></p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":5838,"width":14,"height":15,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large is-resized"><img src="https://dotcompatterns.files.wordpress.com/2022/08/arrow.png?w=28" alt="" class="wp-image-5838" width="14" height="15"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group -->

<!-- wp:separator {"style":{"color":{"background":"#ffffff54"}},"className":"is-style-wide"} -->
<hr class="wp-block-separator has-text-color has-alpha-channel-opacity has-background is-style-wide" style="background-color:#ffffff54;color:#ffffff54"/>
<!-- /wp:separator -->

<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"#dbff00"}}}}} -->
<p class="has-link-color"><a href="#">YouTube</a></p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":5838,"width":14,"height":15,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large is-resized"><img src="https://dotcompatterns.files.wordpress.com/2022/08/arrow.png?w=28" alt="" class="wp-image-5838" width="14" height="15"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group -->

<!-- wp:separator {"style":{"color":{"background":"#ffffff54"}},"className":"is-style-wide"} -->
<hr class="wp-block-separator has-text-color has-alpha-channel-opacity has-background is-style-wide" style="background-color:#ffffff54;color:#ffffff54"/>
<!-- /wp:separator -->

<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"#dbff00"}}}}} -->
<p class="has-link-color"><a href="#">TikTok</a></p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":5838,"width":14,"height":15,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large is-resized"><img src="https://dotcompatterns.files.wordpress.com/2022/08/arrow.png?w=28" alt="" class="wp-image-5838" width="14" height="15"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group -->

<!-- wp:separator {"style":{"color":{"background":"#ffffff54"}},"className":"is-style-wide"} -->
<hr class="wp-block-separator has-text-color has-alpha-channel-opacity has-background is-style-wide" style="background-color:#ffffff54;color:#ffffff54"/>
<!-- /wp:separator --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover -->

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

onuro commented 2 years ago

This looks pretty nice

alaczek commented 2 years ago

Published!