link-in-bio-dark-background.php 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
  1. <?php
  2. /**
  3. * Title: Link in Bio with dark background
  4. * Slug: lynx/link-in-bio-dark-background
  5. * Inserter: yes
  6. * Categories: featured, link-in-bio
  7. */
  8. ?>
  9. <!-- wp:cover {"customOverlayColor":"#011a0b","minHeight":100,"minHeightUnit":"vh","align":"full"} -->
  10. <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,"type":"constrained"}} -->
  11. <div class="wp-block-group"><!-- wp:group {"layout":{"type":"flex","orientation":"vertical"},"style":{"spacing":{"blockGap":"50px"}}} -->
  12. <div class="wp-block-group"><!-- wp:site-logo {"className":"is-style-rounded"} /-->
  13. <!-- wp:group {"layout":{"type":"flex","orientation":"vertical"},"style":{"spacing":{"blockGap":"0px"}}} -->
  14. <div class="wp-block-group"><!-- wp:site-title {"isLink":false,"style":{"color":{"text":"#ffffffb3"},"typography":{"textTransform":"uppercase","fontStyle":"normal","fontWeight":"500","letterSpacing":"2px"}}} /-->
  15. <!-- wp:heading {"style":{"typography":{"textTransform":"uppercase"},"color":{"text":"#dbff00"}},"className":"has-custom-font","fontSize":"x-large","fontFamily":"space-mono"} -->
  16. <h2 class="has-text-color has-space-mono-font-family has-x-large-font-size" style="color:#dbff00;text-transform:uppercase"><?php echo esc_html__( 'Musician & Songwriter', 'lynx' ); ?></h2>
  17. <!-- /wp:heading --></div>
  18. <!-- /wp:group -->
  19. <!-- wp:site-tagline {"style":{"color":{"text":"#ffffffb3"}},"fontSize":"small"} /--></div>
  20. <!-- /wp:group -->
  21. <!-- wp:columns {"style":{"spacing":{"margin":{"top":"50px","bottom":"50px"}}}} -->
  22. <div class="wp-block-columns" style="margin-top:50px;margin-bottom:50px"><!-- wp:column {"width":"50%"} -->
  23. <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"} -->
  24. <p class="has-text-color has-small-font-size" style="color:#ffffffb3;font-style:normal;font-weight:500;letter-spacing:2px;text-transform:uppercase"><?php echo esc_html__( 'My Music', 'lynx' ); ?></p>
  25. <!-- /wp:paragraph -->
  26. <!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
  27. <div class="wp-block-group"><!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"#dbff00"}}}}} -->
  28. <p class="has-link-color"><a href="#"><?php echo esc_html__( 'Soundcloud', 'lynx' ); ?></a></p>
  29. <!-- /wp:paragraph -->
  30. <!-- wp:image {"width":14,"height":15,"sizeSlug":"large","linkDestination":"none"} -->
  31. <figure class="wp-block-image size-large is-resized"><img src="<?php echo esc_url( get_template_directory_uri() ) . '/assets/images/arrow.png'; ?>" alt="" width="14" height="15"/></figure>
  32. <!-- /wp:image --></div>
  33. <!-- /wp:group -->
  34. <!-- wp:separator {"style":{"color":{"background":"#ffffff54"}},"className":"is-style-wide"} -->
  35. <hr class="wp-block-separator has-text-color has-alpha-channel-opacity has-background is-style-wide" style="background-color:#ffffff54;color:#ffffff54"/>
  36. <!-- /wp:separator -->
  37. <!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
  38. <div class="wp-block-group"><!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"#dbff00"}}}}} -->
  39. <p class="has-link-color"><a href="#"><?php echo esc_html__( 'Bandcamp', 'lynx' ); ?></a></p>
  40. <!-- /wp:paragraph -->
  41. <!-- wp:image {"width":14,"height":15,"sizeSlug":"large","linkDestination":"none"} -->
  42. <figure class="wp-block-image size-large is-resized"><img src="<?php echo esc_url( get_template_directory_uri() ) . '/assets/images/arrow.png'; ?>" alt="" width="14" height="15"/></figure>
  43. <!-- /wp:image --></div>
  44. <!-- /wp:group -->
  45. <!-- wp:separator {"style":{"color":{"background":"#ffffff54"}},"className":"is-style-wide"} -->
  46. <hr class="wp-block-separator has-text-color has-alpha-channel-opacity has-background is-style-wide" style="background-color:#ffffff54;color:#ffffff54"/>
  47. <!-- /wp:separator -->
  48. <!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
  49. <div class="wp-block-group"><!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"#dbff00"}}}}} -->
  50. <p class="has-link-color"><a href="#"><?php echo esc_html__( 'Spotify', 'lynx' ); ?></a></p>
  51. <!-- /wp:paragraph -->
  52. <!-- wp:image {"width":14,"height":15,"sizeSlug":"large","linkDestination":"none"} -->
  53. <figure class="wp-block-image size-large is-resized"><img src="<?php echo esc_url( get_template_directory_uri() ) . '/assets/images/arrow.png'; ?>" alt="" width="14" height="15"/></figure>
  54. <!-- /wp:image --></div>
  55. <!-- /wp:group -->
  56. <!-- wp:separator {"style":{"color":{"background":"#ffffff54"}},"className":"is-style-wide"} -->
  57. <hr class="wp-block-separator has-text-color has-alpha-channel-opacity has-background is-style-wide" style="background-color:#ffffff54;color:#ffffff54"/>
  58. <!-- /wp:separator --></div>
  59. <!-- /wp:column -->
  60. <!-- wp:column {"width":"50%"} -->
  61. <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"} -->
  62. <p class="has-text-color has-small-font-size" style="color:#ffffffb3;font-style:normal;font-weight:500;letter-spacing:2px;text-transform:uppercase"><?php echo esc_html__( 'Socials', 'lynx' ); ?></p>
  63. <!-- /wp:paragraph -->
  64. <!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
  65. <div class="wp-block-group"><!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"#dbff00"}}}}} -->
  66. <p class="has-link-color"><a href="#"><?php echo esc_html__( 'Instagram', 'lynx' ); ?></a></p>
  67. <!-- /wp:paragraph -->
  68. <!-- wp:image {"width":14,"height":15,"sizeSlug":"large","linkDestination":"none"} -->
  69. <figure class="wp-block-image size-large is-resized"><img src="<?php echo esc_url( get_template_directory_uri() ) . '/assets/images/arrow.png'; ?>" alt="" width="14" height="15"/></figure>
  70. <!-- /wp:image --></div>
  71. <!-- /wp:group -->
  72. <!-- wp:separator {"style":{"color":{"background":"#ffffff54"}},"className":"is-style-wide"} -->
  73. <hr class="wp-block-separator has-text-color has-alpha-channel-opacity has-background is-style-wide" style="background-color:#ffffff54;color:#ffffff54"/>
  74. <!-- /wp:separator -->
  75. <!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
  76. <div class="wp-block-group"><!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"#dbff00"}}}}} -->
  77. <p class="has-link-color"><a href="#"><?php echo esc_html__( 'YouTube', 'lynx' ); ?></a></p>
  78. <!-- /wp:paragraph -->
  79. <!-- wp:image {"width":14,"height":15,"sizeSlug":"large","linkDestination":"none"} -->
  80. <figure class="wp-block-image size-large is-resized"><img src="<?php echo esc_url( get_template_directory_uri() ) . '/assets/images/arrow.png'; ?>" alt="" width="14" height="15"/></figure>
  81. <!-- /wp:image --></div>
  82. <!-- /wp:group -->
  83. <!-- wp:separator {"style":{"color":{"background":"#ffffff54"}},"className":"is-style-wide"} -->
  84. <hr class="wp-block-separator has-text-color has-alpha-channel-opacity has-background is-style-wide" style="background-color:#ffffff54;color:#ffffff54"/>
  85. <!-- /wp:separator -->
  86. <!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
  87. <div class="wp-block-group"><!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"#dbff00"}}}}} -->
  88. <p class="has-link-color"><a href="#"><?php echo esc_html__( 'TikTok', 'lynx' ); ?></a></p>
  89. <!-- /wp:paragraph -->
  90. <!-- wp:image {"width":14,"height":15,"sizeSlug":"large","linkDestination":"none"} -->
  91. <figure class="wp-block-image size-large is-resized"><img src="<?php echo esc_url( get_template_directory_uri() ) . '/assets/images/arrow.png'; ?>" alt="" width="14" height="15"/></figure>
  92. <!-- /wp:image --></div>
  93. <!-- /wp:group -->
  94. <!-- wp:separator {"style":{"color":{"background":"#ffffff54"}},"className":"is-style-wide"} -->
  95. <hr class="wp-block-separator has-text-color has-alpha-channel-opacity has-background is-style-wide" style="background-color:#ffffff54;color:#ffffff54"/>
  96. <!-- /wp:separator --></div>
  97. <!-- /wp:column --></div>
  98. <!-- /wp:columns --></div>
  99. <!-- /wp:group --></div></div>
  100. <!-- /wp:cover -->