1. UX Shortcode

[section label="Flattree: Hero" bg="https://www.sebdelaweb.com/wp-content/uploads/linktree-alternative-hero-bg-flatsome-wordpress-ux-builder.jpg" bg_pos="50% 46%" height="300px" height__sm="200px" height__md="250px" class="page-full-height"]


[/section]
[section bg_color="rgb(247, 249, 255)"]

[row label="CSS* Flattree: Avatar" h_align="center" class="flattree-avatar"]

[col span="2" span__sm="6" span__md="3" margin="-100px 0px 0px 0px"]

[ux_image id="https://www.sebdelaweb.com/wp-content/uploads/linktree-alternative-avatar-flatsome-wordpress-ux-builder.jpg"]


[/col]

[/row]
[row label="CSS* Flattree: Name" class="flattree-name"]

[col span__sm="12" margin="0px 0px -20px 0px" align="center"]

Jane Reyson 
Dynamic Designer

[/col]

[/row]
[row label="CSS* Flattree: Links V1" h_align="center" class="flattree-links"]

[col span="8" span__sm="12" align="center"]

[row_inner label="Link 1" col_bg="rgb(255,255,255)" padding="20px 20px 20px 20px"]

[col_inner span__sm="12" margin="0px 0px -10px 0px" depth_hover="5"]

[featured_box img="https://www.sebdelaweb.com/wp-content/uploads/linktree-alternative-link1-flatsome-wordpress-ux-builder.jpg" img_width="70" pos="left" link="#"]

Visit our store: Gadgets for life

[/featured_box]

[/col_inner]

[/row_inner]
[row_inner label="Link 2" col_bg="rgb(255,255,255)" padding="20px 20px 20px 20px"]

[col_inner span__sm="12" margin="0px 0px -10px 0px" depth_hover="5"]

[featured_box img="https://www.sebdelaweb.com/wp-content/uploads/linktree-alternative-link2-flatsome-wordpress-ux-builder.jpg" img_width="70" pos="left" link="#"]

Buy new book: 101 Essays for change

[/featured_box]

[/col_inner]

[/row_inner]
[row_inner label="Link 3" col_bg="rgb(255,255,255)" padding="20px 20px 20px 20px"]

[col_inner span__sm="12" margin="0px 0px -10px 0px" depth_hover="5"]

[featured_box img="https://www.sebdelaweb.com/wp-content/uploads/linktree-alternative-link3-flatsome-wordpress-ux-builder.jpg" img_width="70" pos="left" link="#"]

Read latest blog: Travel the world 

[/featured_box]

[/col_inner]

[/row_inner]

[/col]

[/row]
[row label="Flattree: Links V2" h_align="center"]

[col span="8" span__sm="12" align="center"]

[button text="Visit our store: Gadgets for life" size="large" expand="true" icon="icon-shopping-cart" icon_pos="left" link="#"]

[button text="Buy new book: 101 Essays for change" size="large" expand="true" link="#"]

[button text="Read latest blog: Travel the world" size="large" expand="true" link="#"]


[/col]

[/row]
[row label="Flattree: Thank You"]

[col span__sm="12" align="center"]

[follow style="small" scale="120" facebook="#" instagram="#" twitter="#" linkedin="#"]


[/col]

[/row]

[/section]

2. CSS

/*************** FLATTREE LINKPAGE ***************/

.flattree-avatar img {
    border-radius:100%;
    border: 8px solid #fff;
    background: #fff;
}

.flattree-name h1 {
	font-size: 200%;
	line-height:100%;
	margin-bottom:5px;
}


.flattree-name p {
	font-size: 90%;
    opacity: .7;
}

.flattree-links .col-inner .col-inner {
    border-radius:10px;
	box-shadow: 1px 1px 10px 0 rgba(32,27,61,.07);
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
}

.flattree-links img {
    border-radius:10px;
}

.flattree-links .icon-box-text {
    display: flex;
    align-items: center;
    justify-content: center;
}