Blog Post

anath • Feb 21, 2022

New Template: Coffee Shop

With this new Coffee Shop template, you can easily build amazing-looking coffee shop websites for any small business interested in increasing sales and expanding their business online. The template is minimalistic, with a minimal color palette, so all images will ‘pop’. For maximum flexibility, the template is built in Flex and includes testimonials, a menu, a promotional section, and an image gallery.

Start from this Template

How to reproduce the contact us section?

  • Add a flex section.
  • Set the grid layout to 3 columns.
  • Set the column gap to 3vh.
  • Set the grid height to 40vh.
  • Set the grid top padding to 100px and bottom to 70px.
  • Set the background color to #1b1919
  • Add a vertical flexbox to the left column and stretch it horizontally and vertically.

Inside the flexbox: 

Add H3 text widget, change the font color to white and add a title.

Add 2 paragraphs text widgets, set top margins to 15px and add contact information (like an address and phone number).

Add H3 text widget, change the font color to white and add a title. Set top margin to 50px.

Add a business hours widget and customize it as you need. Set top margin to15px.

  • Set the flexbox vertical alignment to the top.
  • Add a map widget to the two right columns, stretch horizontally and vertically.
  • Align left. Set width to 80%. Customize it as you need.


On tablet

Set the grid top padding to 70px and bottom to 50px. And left and right padding to 2%.

On mobile

  • Set the column gap to 0vh. And rows gap to 2vh
  • Set the grid top padding to 50px and bottom to 35px.
  • Align all text to the center.
  • Align the business hours widget to the center.


Start from this Template


LATEST POSTS

A picture of a contact form design options.
By Liron Hilb Horev 15 Apr, 2024
New spacing controls to help you customize the form the way you want to.
A screenshot of a website that says
By Tal Levi 11 Apr, 2024
Cut your design time with this brand new AI-powered feature.
A picture of a computer and a phone, with the words 2-step verification
By Avigayil Lewin 08 Apr, 2024
Add an extra layer of protection to your account when logging in.
Show More
Proudly built on the Duda Responsive Website Builder
Share by: