Scribd
Upload
19 views5 pages

Coffee Shop Website

The document outlines the design and layout for a coffee brand website, including sections such as Navbar, About Us, Menu, Products, Gallery, Blog, and Contact Us. It specifies the color schemes, image placements, and content structure for each section, ensuring a cohesive and professional appearance. Additionally, it includes details for a footer with social media icons and copyright information.

Uploaded by

m92976561
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
19 views5 pages

Coffee Shop Website

The document outlines the design and layout for a coffee brand website, including sections such as Navbar, About Us, Menu, Products, Gallery, Blog, and Contact Us. It specifies the color schemes, image placements, and content structure for each section, ensuring a cohesive and professional appearance. Additionally, it includes details for a footer with social media icons and copyright information.

Uploaded by

m92976561
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

LET’S BUILD A COFFEE BRAN WEBSITE

Navbar
A logo on the left side of navbar then other tabs with black color then a search bar

Home About Menu Products Gallery Blog Contact Search

About Us Section: Heading on the center after heading add an image of any coffee cup on the left side on the right side add a text
with heading on the bottom side of text make a professional button like (Learn More).

Top Categories: Add a heading of Top Categories (Top ) color black and (Categories) color will be same of coffee color after the
heading add almost 4 images of any kind of coffee in one row.

Menu: Put the heading on the center then add a (hr) line in the bottom of Menu the heading color will be same to our coffee color after
that make 8 cards make sure 4 cards in one line

Coffee Coffee Coffee


Name Name Name

Rs 350/= Rs 350/= Rs 350/=

Coffee Coffee Coffee


Products: add a heading of Products on the center the bottom side of this heading add a (HR) line after the line
add the top 4 coffee brands products images in a one row like as I told you in cards

Products

Brand Name Brand Name Brand Name

Price Price Price

Our Gallery: add a section of Our Gallery put the heading on the center change the color of (Our) in to black and
(Gallery) same coffee color don’t add the hr line Where You can add the 8 images of you restaurant make sur 4
images in one line
Our Gallery
Latest Blog Section
Create the 3 cards in one row for blog section on the top of card add a image any blog related you can search on
google after the image add a short heading like blog name with black color after heading add the date like when this
blog published on the website change the color similar to coffee color after that add some details of the blog with
black color then add a button of read more on the center you can take help from thin design.

Latest Blogs

Blog Heading Blog Heading Blog Heading


27-Feb-2024 27-Feb-2024 27-Feb-2024
Video provides a powerful way to help you Video provides a powerful way to help you Video provides a powerful way to help you
prove your point. When you click Online prove your point. When you click Online prove your point. When you click Online
Video, you can paste in the embed code for Video, you can paste in the embed code for Video, you can paste in the embed code for
the video you want to add the video you want to add the video you want to add

Read More Read More Read More


Contact us:
Add a heading of Contact us change the background color of contact us section in to white the heading styling will
be as I told you for gallery section after heading add some details like paragraph on the bottom side of heading put
this content on the center then make a contact us form with Name Email Phone and Send Message Form add some
styling in the button like background color text color hover effect add an on their column for your restaurant
details change the color of this column in to black then text color will be white add details like Email with email
icon Phone number with phone icon location with icons After this add a google map with your location.

Contact Us
Name

Info

Email [email protected]

Phone Number

Phone
Address

Video provides a powerful way to help you prove your point.


When you click Online Video, you can paste in the embed code
for the video you want to add
Send Message

Google Map
Footer Section

In the last make a footer change you footer color in to a coffee color put you logo on the center of footer then add
5 icons of you social media accounts icons background color will be black and the icon color will be white add some
more styling like hover effect cursor property on the bottom side of icons add a copyright tag with black color here
in the example.

Your Logo Here

Designed By Mr-Usman
(Coffee Shop) (All Copy Right’s Resaved Here)

You might also like