all-pro-2-kolumna

10% Off Homeware
Limited time deal.

Cardigan chia marfa prism freegan hashtag. Unicorn photo booth plaid semiotics seitan keffiyeh venmo.

Email

Get 10% Off

By submitting this form, you agree to our terms & conditions & privacy policy.

Note: The structure of these flip cards must be maintained for them to function. You can increase or reduce the number of columns in the row holding the cards, and use any blocks inside the labelled front and back rows that make up the cards. Background colours are defined in the front and back row background settings. You must set a minimum height in the sections labelled ‘card 1, card 2 etc.’ and this can be different for desktop, tablet and mobile. All the cards will adjust their height to match the tallest card.

Jenny Green

Web designer

Skills:

HTML, CSS, Javascript, UX/UI design.

Jane Black

Web Developer

Skills:

PHP, Ruby, Python, React.

Jessica White

Content Creator

Skills:

Ascot enamel pin tattooed franzen.

John Brown

Product Support

Skills:

iceland keffiyeh selvage snackwave.

Note: This testimonial carousel uses negative margin to pull the two outer testimonials partially outside the viewport. You can adjust how much of the outer testimonials show using the included CSS variables.

At the top of the CSS in the Custom CSS toggle of the parent row, you will see the following:

:root {
–bb-partial-testimonial-carousel-1-desk: -20vw;
–bb-partial-testimonial-carousel-1-tab: -25vw;
–bb-partial-testimonial-carousel-1-mob: -75vw;
}

Increase or decrease the negative view width value for desktop, tablet, and mobile to show more or less of the outer testimonials. You can also adjust how many testimonials show on each device size using the layout settings in the testimonial block, and the overhang will adjust accordingly.

The navigation arrows will adopt the colours of your button settings from the customiser.
To change the horizontal position of the navigation arrows, increase or decrease the left and right padding values in the wrapper padding settings of the testimonial block.
If you switch on the dot navigation the dots will adopt your primary button colour.

Note: The ribbon background colour is defined in the advanced text block settings. You can change the colour of the triangles above and below the ribbon by editing the CSS in the Custom CSS toggle of the parent row:

.bb-serv-section-1-ribbon::before,
.bb-serv-section-1-ribbon::after {
content: ”;
position: absolute;
border: 7px solid var(–global-palette3);
}

Change the global palette value in the border property between 1-9

Bronze

---

from

£1,500

Ramps skateboard drinking vinegar cronut sartorial dreamcatcher. Kogi chillwave bruh, meditation godard echo park ethical

Feature list 1

• Vaporware readymade letterpress
• Big mood dreamcatcher williamsburg
• Coloring book deep sriracha
• Gastropub fixie keffiyeh jianbing
• Level hashtag fixie mlkshk typewriter

Feature list 2

• Vaporware readymade letterpress
• Big mood dreamcatcher williamsburg
• Coloring book deep sriracha
• Gastropub fixie keffiyeh jianbing
• Level hashtag fixie mlkshk typewriter

Feature list 3

• Vaporware readymade letterpress
• Big mood dreamcatcher williamsburg
• Coloring book deep sriracha
• Gastropub fixie keffiyeh jianbing
• Level hashtag fixie mlkshk typewriter

Book now

Most popular

Silver

---

from

£2,500

Ramps skateboard drinking vinegar cronut sartorial dreamcatcher. Kogi chillwave bruh, meditation godard echo park ethical

Feature list 1

• Vaporware readymade letterpress
• Big mood dreamcatcher williamsburg
• Coloring book deep sriracha
• Gastropub fixie keffiyeh jianbing
• Level hashtag fixie mlkshk typewriter

Feature list 2

• Vaporware readymade letterpress
• Big mood dreamcatcher williamsburg
• Coloring book deep sriracha
• Gastropub fixie keffiyeh jianbing
• Level hashtag fixie mlkshk typewriter

Feature list 3

• Vaporware readymade letterpress
• Big mood dreamcatcher williamsburg
• Coloring book deep sriracha
• Gastropub fixie keffiyeh jianbing
• Level hashtag fixie mlkshk typewriter

Book now

Gold

---

from

£3,500

Ramps skateboard drinking vinegar cronut sartorial dreamcatcher. Kogi chillwave bruh, meditation godard echo park ethical

Feature list 1

• Vaporware readymade letterpress
• Big mood dreamcatcher williamsburg
• Coloring book deep sriracha
• Gastropub fixie keffiyeh jianbing
• Level hashtag fixie mlkshk typewriter

Feature list 2

• Vaporware readymade letterpress
• Big mood dreamcatcher williamsburg
• Coloring book deep sriracha
• Gastropub fixie keffiyeh jianbing
• Level hashtag fixie mlkshk typewriter

Feature list 3

• Vaporware readymade letterpress
• Big mood dreamcatcher williamsburg
• Coloring book deep sriracha
• Gastropub fixie keffiyeh jianbing
• Level hashtag fixie mlkshk typewriter

Book now

Note: To use this footer template, copy the parent row to a new Kadence content element and select ‘replace footer’ in the placement settings and ‘entire site’ in the display settings.

The copyright year uses a shortcode to automatically update. You will need to paste the following PHP function into your child theme functions.php file or a code snippets plugin for the date to display via the shortcode:

function current_year() {
$year = date(‘Y’);
return $year;
}
add_shortcode(‘year’, ‘current_year’);

Don’t forget to choose your menus in the navigation blocks, hook up your modal form to your email service provider, and change your contact info.

Get some awesome content delivered straight to your inbox

Hey there!

Get some awesome content delivered straight to your inbox

Email

Submit

By subscribing, you agree to receive occasional emails from us containing information about our products and services.

Subscribe

Menu 1

Menu 2

Menu 3

Menu 4

---

Schlitz vice cardigan yuccie whatever Brooklyn messenger bag tbh vinyl kombucha viral live-edge put a bird on it poutine adaptogen.

© [year] Brand & Build.

Contact us

Buckingham Palace, The Mall, London SW1A 1AA

+44 (0) 800 800 800

Note: To use this footer template, copy the parent row to a new Kadence content element and select ‘replace footer’ in the placement settings and ‘entire site’ in the display settings.

The copyright year uses a shortcode to automatically update. You will need to paste the following PHP function into your child theme functions.php file or a code snippets plugin for the date to display via the shortcode:

function current_year() {
$year = date(‘Y’);
return $year;
}
add_shortcode(‘year’, ‘current_year’);

Don’t forget to change your social links.

Note: These sliding panels are designed to be full screen height. On tablet and mobile they will stack and the hover content will always be visible.

Each panel is contained within a section of the parent row. Each panel section is made up of two inner sections. The top inner section is the visible content (title) and the bottom inner section is the content which is displayed on hover.

You can add any content you wish inside each of the inner panel sections.

Images are set in the background settings for each of the 4 panel sections.
The overlay on non-hover state is set in the background overlay settings for each of the 4 panel sections.
The hover overlay and gradient and animation is all set within the CSS in the Custom CSS toggle of the parent row.

If you would like to change the hover overlay, for instance if you want dark text on a light background, there’s a variable you can adjust at the top of the CSS in the Custom CSS toggle of the parent row:

:root {
–bb-sliding-panels-1-overlay: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0) 100%);
}

Change the linear gradient colours, or create a gradient of your own using this handy tool which will generate the CSS for you: https://cssgradient.io

Note: The key to getting a smooth line when using diagonal gradients is to leave a 1% gap between the colours. If the gradient is horizontal or vertical, you don’t need to leave a gap.

When using border radius there is a faint coloured outline on hover. You can probably see it here inside the editor when you hover over any of the buttons. The CSS in the parent row Custom CSS box fixes this ugly line on the frontend.

.bb-icon-buttons-1 .kb-button {
outline: 2px solid var(–global-palette1);
outline-offset: -3px;
}

If you change the gradient colours or the thickness of the border, you may also need to change the thickness, colour, and offset of the outline in the CSS.

Note: There is no extra CSS with these icons, everything is controlled in the blocks with subtle gradients and shadows. To ensure your icons stay circular, make sure the max width value in the content max width area in the general tab, and the min height in the structure settings in the advanced tab for each nested section are the same.

Note: The placeholder image sizes provided are examples only. You can use images as tall as you like.

The images are defined in the background settings of the style tab in each section. You need to add the same image to the static and hover states. The static state should have a background position of: Left 50%, Top 0%. The hover state should have a background position of: Left 50%, Top 100%.

You can adjust the speed of the scroll by adjusting the CSS in the Custom CSS box of the parent row.

.bb-scroll-screen-2 .kt-inside-inner-col {
  transition: background-position 1s linear;
}

Adjust the 1s value above to control the time the image takes to return to its static state (on mouseout)

.bb-scroll-screen-2 .kt-inside-inner-col:hover {
  transition: background-position 10s linear;
}

Adjust the 10s value above to control the speed the image scrolls on hover (on mouseover)

Because your images may not all be the same height, there is additional CSS in the Custom CSS box of each section that adjusts the start and end background position so your entire screenshot shows within the laptop frame:

selector .kt-inside-inner-col {
background-position: 50% -1%;
}

Adjust the -1% value above to control the start position of the background image. You can use decimal places to refine (E.g: 1.25%)

selector:hover .kt-inside-inner-col {
background-position: 50% 103%;
}

Adjust the 103% value above to control the end position of the background image. You can use decimal places to refine (E.g: 102.9%)

You are free to use the laptop image provided, but if you decide to change it, there are a couple of things to note:

Your image should have a transparent area where you want your screenshot to show, and any space around the frame image should be filled with a solid colour to prevent parts of the background screenshot showing outside the frame.

The background image size in the section background settings is set to Width: 85% on both static and hover states. You may need to adjust this width to make your background screenshot wider or narrower, so it fits inside your frame without cutting off the sides.

Note: The CSS for these shaped info box icons is in the Custom CSS box in the parent row advanced settings. Each section of CSS is labelled with the name of the shape it relates to, so you can use the CSS only for the shape you want and delete the rest.

For example, the triangle shape only requires the following CSS:

/* Triangle */
.bb-info-tri .kt-blocks-info-box-media {
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

Note: This posts block is flexibly designed so you can show more than just the title over your featured images. Switch on the meta data and/or the excerpt if you wish, it’s all prestyled. If you find there isn’t enough vertical space to show your content, adjust the image ratio in the post block settings to make posts taller. It’s also fully responsive with no need for media queries. The number of columns will automagically adjust to the device size.

Note: You need to leave the columns on the posts block layout settings as 3 on desktop and 2 on tablet for the alternating feature to function.

Note: In order to have a smooth transition on hover, we have to define a max-height for the excerpt. This is set using a CSS variable in the Custom CSS toggle of the parent row:

:root {
–bb-post-content-reveal-2-height: 250px;
}

If you increase the excerpt length or the number of columns in the Posts block, you may need to increase the max-height variable above 250px for all the content to display on hover.