Skip to content

Instantly share code, notes, and snippets.

@justintadlock
Created May 26, 2021 23:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save justintadlock/89db71a9a08ba121dcd34dba17c91268 to your computer and use it in GitHub Desktop.
Save justintadlock/89db71a9a08ba121dcd34dba17c91268 to your computer and use it in GitHub Desktop.
FSE Outreach #7 portfolio template built with TT1 Blocks.
<!-- wp:cover {"url":"http://localhost/wp-content/uploads/2021/05/pexels-mohamed-almari-368893-scaled.jpg","id":4995,"minHeight":100,"minHeightUnit":"vh","contentPosition":"center center","align":"full","style":{"spacing":{"padding":{"top":"2rem","right":"3rem","bottom":"2rem","left":"3rem"}}}} -->
<div class="wp-block-cover alignfull has-background-dim" style="padding-top:2rem;padding-right:3rem;padding-bottom:2rem;padding-left:3rem;min-height:100vh"><img class="wp-block-cover__image-background wp-image-4995" alt="" src="http://localhost/wp-content/uploads/2021/05/pexels-mohamed-almari-368893-scaled.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:columns {"verticalAlignment":"top"} -->
<div class="wp-block-columns are-vertically-aligned-top"><!-- wp:column {"verticalAlignment":"top","width":"33.33%"} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:33.33%"><!-- wp:image {"id":5033,"width":42,"height":42,"sizeSlug":"thumbnail","linkDestination":"none"} -->
<figure class="wp-block-image size-thumbnail is-resized"><img src="http://localhost/wp-content/uploads/2021/05/jsmile-600x600.png" alt="" class="wp-image-5033" width="42" height="42"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->
<!-- wp:column {"verticalAlignment":"top","width":"66.66%"} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:66.66%"><!-- wp:navigation {"orientation":"horizontal","itemsJustification":"right"} -->
<!-- wp:navigation-link {"label":"About","url":"#","kind":"custom"} /-->
<!-- wp:navigation-link {"label":"Contact","url":"#","kind":"custom"} /-->
<!-- wp:navigation-link {"label":"Pricing","url":"#","kind":"custom"} /-->
<!-- /wp:navigation --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"50%"} -->
<div class="wp-block-column" style="flex-basis:50%"><!-- wp:heading {"level":1,"fontSize":"extra-large"} -->
<h1 class="has-extra-large-font-size"><strong>Hello, My Name Is Justin</strong></h1>
<!-- /wp:heading -->
<!-- wp:paragraph {"fontSize":"large"} -->
<p class="has-large-font-size">I am a photographer who is passionate about his craft. From nature walks to weddings to birthday parties, I got you covered.</p>
<!-- /wp:paragraph -->
<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"width":50,"style":{"border":{"radius":1}},"className":"is-style-outline","fontSize":"normal"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-50 has-custom-font-size is-style-outline has-normal-font-size"><a class="wp-block-button__link" style="border-radius:1px"><strong>Contact Me →</strong></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->
<!-- wp:social-links {"iconColor":"white","iconColorValue":"#FFFFFF","iconBackgroundColor":"gray","iconBackgroundColorValue":"#39414D","className":"is-style-pill-shape"} -->
<ul class="wp-block-social-links has-icon-color has-icon-background-color is-style-pill-shape"><!-- wp:social-link {"url":"#","service":"instagram"} /-->
<!-- wp:social-link {"url":"#","service":"flickr"} /-->
<!-- wp:social-link {"url":"#","service":"twitter"} /-->
<!-- wp:social-link {"url":"#","service":"facebook"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div></div>
<!-- /wp:cover -->
<!-- wp:group {"align":"full","style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}}},"backgroundColor":"dark-gray","textColor":"white"} -->
<div class="wp-block-group alignfull has-white-color has-dark-gray-background-color has-text-color has-background has-link-color"><!-- wp:heading {"fontSize":"large"} -->
<h2 class="has-large-font-size"><strong>My Latest Work</strong></h2>
<!-- /wp:heading -->
<!-- wp:query {"queryId":40,"query":{"perPage":6,"pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false},"displayLayout":{"type":"flex","columns":3},"align":"full"} -->
<div class="wp-block-query alignfull"><!-- wp:query-loop -->
<!-- wp:post-featured-image {"isLink":true,"align":"wide"} /-->
<!-- wp:post-title {"isLink":true,"fontSize":"small"} /-->
<!-- wp:post-date /-->
<!-- /wp:query-loop --></div>
<!-- /wp:query --></div>
<!-- /wp:group -->
<!-- wp:group {"align":"full","backgroundColor":"gray","textColor":"white"} -->
<div class="wp-block-group alignfull has-white-color has-gray-background-color has-text-color has-background"><!-- wp:heading {"fontSize":"large"} -->
<h2 class="has-large-font-size"><strong>Satisfied Clients</strong></h2>
<!-- /wp:heading -->
<!-- wp:spacer {"height":16} -->
<div style="height:16px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"120px"} -->
<div class="wp-block-column" style="flex-basis:120px"><!-- wp:image {"id":3648,"width":100,"height":100,"sizeSlug":"large","linkDestination":"none","className":"is-style-twentytwentyone-border"} -->
<figure class="wp-block-image size-large is-resized is-style-twentytwentyone-border"><img src="http://localhost/wp-content/uploads/2021/05/pexels-mohamed-abdelghaffar-771742.jpg" alt="" class="wp-image-3648" width="100" height="100"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->
<!-- wp:column {"width":"66.66%"} -->
<div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:quote {"className":"is-style-default"} -->
<blockquote class="wp-block-quote is-style-default"><p></p><p><em>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</em></p><cite>John Doe</cite></blockquote>
<!-- /wp:quote --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"120px"} -->
<div class="wp-block-column" style="flex-basis:120px"><!-- wp:image {"id":3665,"width":100,"height":100,"sizeSlug":"large","linkDestination":"none","className":"is-style-twentytwentyone-border"} -->
<figure class="wp-block-image size-large is-resized is-style-twentytwentyone-border"><img src="http://localhost/wp-content/uploads/2021/05/pexels-freestocksorg-194446.jpg" alt="" class="wp-image-3665" width="100" height="100"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->
<!-- wp:column {"width":"66.66%"} -->
<div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:quote {"className":"is-style-default"} -->
<blockquote class="wp-block-quote is-style-default"><p></p><p><em>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</em></p><cite>Jane Doe</cite></blockquote>
<!-- /wp:quote --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->
<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"3rem","right":"3rem","bottom":"3rem","left":"3rem"}}},"backgroundColor":"white","textColor":"gray"} -->
<div class="wp-block-group alignfull has-gray-color has-white-background-color has-text-color has-background" style="padding-top:3rem;padding-right:3rem;padding-bottom:3rem;padding-left:3rem"><!-- wp:spacer {"height":32} -->
<div style="height:32px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:columns {"verticalAlignment":"top"} -->
<div class="wp-block-columns are-vertically-aligned-top"><!-- wp:column {"verticalAlignment":"top","width":"33.33%"} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:33.33%"><!-- wp:image {"id":5033,"width":70,"height":70,"sizeSlug":"thumbnail","linkDestination":"none"} -->
<figure class="wp-block-image size-thumbnail is-resized"><img src="http://localhost/wp-content/uploads/2021/05/jsmile-600x600.png" alt="" class="wp-image-5033" width="70" height="70"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->
<!-- wp:column {"verticalAlignment":"top","width":"66.66%"} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:66.66%"><!-- wp:buttons {"contentJustification":"right"} -->
<div class="wp-block-buttons is-content-justification-right"><!-- wp:button {"width":50,"style":{"border":{"radius":1}},"className":"is-style-outline"} -->
<div class="wp-block-button has-custom-width wp-block-button__width-50 is-style-outline"><a class="wp-block-button__link" style="border-radius:1px">Get In Touch →</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment