Koffie
One Page HTML Landing Page
- created: 12/25/2016
- latest update: 12/25/2016
- by: ThemeAtelier
- email: themeatelierbd@gmail.com
Structure
HTML Structure
Every section start with a comment like this:
< !-- ========== Section Name start ========== > Some HTML codes for this section <!-- ========== Section Name end ========== >
CSS structure
Every point of CSS content you will find start with a comment like this:
/* ---------------------------------------------------- #. CSS point name -------------------------------------------------------- */ some CSS codes here
JS structure
Every point of JS content you will find start with comments like below in app.js file under js folder.
It's comes with two diffrent codes stracture. /* ================================= # JQUERY FUNCTION METHOD =================================== */ /******************** # Javascript point name ********************/
General
General
Typography
Font family:
All fonts used from google web font directory. We used it by import in css/style.css file. There called 2 fonts as like below structure. You could change these fonts very easily. Follow google web font document here to see how to do.
/* ----------------------------------------------------
1. IMPORT GOOGLE FONTS
-------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css?family=Nothing+You+Could+Do|Open+Sans:400,400i');
General fonts style
All general typography used in css/style.css file. You can manage them easily. Every code organised and commented very nicely.
Logo
You can change current logo text to your own or if you wish to use your custom image logo put the logo into img folder and call it into the logo section of navbar. See image below.
Header menu:
Here is markup for header nav menu:
<!-- menu --> <div class="navbar-collapse collapse" id="data-scroll"> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="#home">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#menu">Menu</a></li> <li><a href="#gallery">Gallery</a></li> <li><a href="#blog">Blog</a></li> <li><a href="#reviews">Reviews</a></li> <li><a href="#contact">Contact</a></li> </ul> </div> <!--/Menu -->
You can add a new menu paste <li><a href="#section_id">Menu Name<a></li> under the li emenet you want to show.
Buttons
In CSS file you may find button style under below comment:
/* - 2-4 BUTTONS */
And here is HTML structure for the button.
<a href="#" class="buttons">Button name here</a>
Section title:
Only one style used for styles in the template. You will find CSS for them under this comment:
/* - 2-5 SECTION TITLE */
And here is HTML structure for section titles.
<!-- section title --> <div class="row"> <div class="col-xs-12"> <div class="section-title text-center mb90 fadeIn animated wow" data-wow-delay=".2s"> <h2>Section title name</h2> <div class="title-seperator"></div> </div> </div> </div> <!-- end section title-->
Footer logo and text:
Footer logo can be changed exactly like we changed for header logo and in footer section, you could change footer copyright text.
Animations:
We used WOW plugin to trigger animations on the scroll. It used Animate.css for CSS animation. You will find all of the animations in Animate.css website. To learn more about WOW please read their Documentation.
Example:
<div class="wow fadeIn">Content to fade in Here</div >
Background images
Background images
We used the background image in hero section, our story and in the special menu section. They used by HTML inline CSS for making it user-friendly. You could simple change to your own image link name what you wish to add as background.
An example of background section:
<section style="background-image: url('img/hero/hero-bg.jpg')">
This section content
</section>
For slider hero versions slider images also used as same method.
For video version videos added from video folder. There have 3 different type of video and you must have them there and the image is for fallback browsers.
Hero default
Hero default section
<!-- ========== hero section ========== -->
<section id="home" data-stellar-background-ratio="0.5" class="hero hero_full_screen hero_parallax text-center" style="background-image: url('img/hero/hero-bg.jpg')">
<div class="bg-overlay opacity-6">
</div>
<div class="hero_parallax_inner">
<div class="container">
<a class="hero-logo fadeIn animated wow" data-wow-delay=".1s" href="#"><img src="img/logo.png" alt="" /></a>
<h1 class="intro fadeIn animated wow" data-wow-delay=".2s">Served With Love & Smile</h1>
<a href="#menu" class="buttons scroll zoomIn animated wow" data-wow-delay=".3s">See Our Menu</a>
</div>
</div>
</section>
<!-- ========== hero section End ========== -->
You will find the hero default section in the default.html file and the CSS in css/style.css after this comment:
/* ---------------------------------------------------- 4. HERO SECTIONS -------------------------------------------------------- */
Hero slider
Hero slider section
In slider.html
<!-- ========== hero section ========== -->
<section id="home" class="hero home_intro_carousel bg-black">
<div class="fullscreen-slider owl-carousel">
<div class="slider_item">
<div class="slide-bg-image" style="background-image: url('img/hero/slider-1.jpg')">
<div class="bg-overlay opacity-6"></div>
<div class="hero_slider_inner">
<div class="container">
<a class="hero-logo" href="#"><img src="img/logo.png" alt="" /></a>
<h1 class="intro">Served With Love & Smile</h1>
<a href="#menu" class="buttons scroll">See Our Menu</a>
</div>
</div>
</div>
</div>
<div class="slider_item">
<div class="slide-bg-image" style="background-image: url('img/hero/slider-2.jpg')">
<div class="bg-overlay opacity-6"></div>
<div class="hero_slider_inner">
<div class="container">
<a class="hero-logo" href="#"><img src="img/logo.png" alt="" /></a>
<h1 class="intro">Code with coffee & Smile</h1>
<a href="#menu" class="buttons scroll">See Our Menu</a>
</div>
</div>
</div>
</div>
<div class="slider_item">
<div class="slide-bg-image" style="background-image: url('img/hero/slider-3.jpg')">
<div class="bg-overlay opacity-6"></div>
<div class="hero_slider_inner">
<div class="container">
<a class="hero-logo" href="#"><img src="img/logo.png" alt="" /></a>
<h1 class="intro">Served With Love & Smile</h1>
<a href="#menu" class="buttons scroll">See Our Menu</a>
</div>
</div>
</div>
</div>
</div>
</section>
You will find the hero slider section in the slider.html file and the CSS in css/style.css after this comment:
/* - 4-2 HERO SLIDER */
Hero video
Hero video
In video.html
<!-- ========== hero section ========== -->
<section id="home" class="hero hero_full_screen text-center">
<div class="bg-overlay opacity-6"></div>
<div class="section-video">
<video autoplay="" poster="video/video.jpg" class="bgvid" loop="">
<source src="video/video.webm" type="video/webm">
<source src="video/video.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>
<source src="video/video.ogv" type="video/ogv">
</video>
</div>
<div class="hero_parallax_inner">
<div class="container">
<a class="hero-logo fadeIn animated wow" data-wow-delay=".1s" href="#"><img src="img/logo.png" alt="" /></a>
<h1 class="intro fadeIn animated wow" data-wow-delay=".2s">Served With Love & Smile</h1>
<a href="#menu" class="buttons scroll zoomIn animated wow" data-wow-delay=".3s">See Our Menu</a>
</div>
</div>
</section>
<!-- ========== hero section End ========== -->
You will find the hero video section in the video.html file and the CSS in css/style.css after this comment:
/* - 4-1 VIDEO BACKGROUND */
Our story
Our story
<!-- ========== our story ========== -->
<section id="about" class="pt100 pb100 our-story bg-dark" style="background-image: url('img/our-story-bg.png')">
<div class="container">
<!-- section title -->
<div class="row">
<div class="col-xs-12">
<div class="section-title text-center mb90 fadeIn animated wow" data-wow-delay=".2s">
<h2>Our Story</h2>
<div class="title-seperator"></div>
</div>
</div>
</div>
<!-- end section title-->
<div class="row">
<div class="col-sm-8 text-center our-story-content col-sm-offset-2">
<p class="fadeIn animated wow" data-wow-delay=".1s">Lorem Ipsum is simply dummy text of printing typesetting ststry lorem Ipsum the industry'ndard dummy text ever since of the 1500s, when an unknown printer took a galley of type and scra make a type specimen book. It has survived not.ly five centuries, but also the leap into electronic typesetting, remaining essentially unchanged the </p>
<a href="#" class="buttons zoomIn animated wow" data-wow-delay=".2s" data-toggle="modal" data-target="#storyModal">See Full Story</a>
</div>
<!-- full story modal-->
<!-- Modal -->
<div class="modal fade" id="storyModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header bg-dark">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body bg-dark">
<h3>Our full story</h3>
<p>Lorem Ipsum is simply dummy text of printing typesetting ststry lorem Ipsum the industry'ndard dummy text ever since of the 1500s, when an unknown printer took a galley of type and scra make a type specimen book. It has survived not.ly five centuries, but also the leap into electronic typesetting, remaining essentially unchanged the </p>
<p>Lorem Ipsum is simply dummy text of printing typesetting ststry lorem Ipsum the industry'ndard dummy text ever since of the 1500s, when an unknown printer took a galley of type and scra make a type specimen book. It has survived not.ly five centuries, but also the leap into electronic typesetting, remaining essentially unchanged the </p>
<p>Lorem Ipsum is simply dummy text of printing typesetting ststry lorem Ipsum the industry'ndard dummy text ever since of the 1500s, when an unknown printer took a galley of type and scra make a type specimen book. It has survived not.ly five centuries, but also the leap into electronic typesetting, remaining essentially unchanged the </p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ========== our story section End ========== -->
You will find the services section in all versions of HTML files and the CSS in css/style.css after this comment:
/* ---------------------------------------------------- 5. OUR STORY SECTIONS -------------------------------------------------------- */
Our offer
Our offer
<!-- ========== our offter ========== --> <section id="offer" class="pt100 pb100 bg-black"> <div class="container"> <!-- section title --> <div class="row"> <div class="col-xs-12"> <div class="section-title text-center mb90 fadeIn animated wow" data-wow-delay=".2s"> <h2>Our offer</h2> <div class="title-seperator"></div> </div> </div> </div> <!-- end section title--> <div class="row"> <div class="col-sm-4"> <div class="single-offer text-center animated fadeInDown wow" data-wow-delay=".1s"> <img src="img/offer-img.png" alt="" /> <h3>Original Coffee</h3> <p>Lorem Ipsum is simply dummy of the printing He is good mam and typesetting industry. Lorem Ipsum has been the</p> </div> </div> <div class="col-sm-4"> <div class="single-offer text-center animated fadeInDown wow" data-wow-delay=".2s"> <img src="img/offer-img.png" alt="" /> <h3>20 Coffee Flavors</h3> <p>Lorem Ipsum is simply dummy of the printing He is good mam and typesetting industry. Lorem Ipsum has been the</p> </div> </div> <div class="col-sm-4"> <div class="single-offer text-center animated fadeInDown wow" data-wow-delay=".3s"> <img src="img/offer-img.png" alt="" /> <h3>Pleasant Abient</h3> <p>Lorem Ipsum is simply dummy of the printing He is good mam and typesetting industry. Lorem Ipsum has been the</p> </div> </div> </div> </div> </section> <!-- ========== our offer section End ========== -->
You will find our offer section in all versions of HTML files and the CSS in css/style.css after this comment:
/* ---------------------------------------------------- 6. OUR OFFER -------------------------------------------------------- */
Gallery
Gallery
<!-- ========== gallery ========== -->
<section id="gallery" class="gallery-section pt100 pb100 bg-black">
<div class="container">
<!-- section title -->
<div class="row">
<div class="col-xs-12">
<div class="section-title text-center mb90 text-center mb90 fadeIn animated wow" data-wow-delay=".2s">
<h2>We Love Taking Pic’s</h2>
<div class="title-seperator"></div>
</div>
</div>
</div>
<!-- end section title-->
<div class="row">
<div class="col-sm-12">
<div class="zoom-gallery">
<div class="grid-item col-sm-6 animated fadeInDown wow" data-wow-delay=".1s">
<a class="overlay" href="img/gallery/gallery-1-full.jpg" title="Black coffee">
<img src="img/gallery/gallery-1.jpg" alt="" />
<span class="icon-focus item-icon"></span>
</a>
</div>
<div class="grid-item col-sm-6 animated fadeInDown wow" data-wow-delay=".2s">
<a class="overlay" href="img/gallery/gallery-5-full.jpg" title="Cold coffee">
<img src="img/gallery/gallery-2.jpg" alt="" />
<span class="icon-focus item-icon"></span>
</a>
</div>
<div class="grid-item col-sm-6 animated fadeInDown wow" data-wow-delay=".3s">
<a class="overlay" href="img/gallery/gallery-3-full.jpg" title="Black coffee">
<img src="img/gallery/gallery-3.jpg" alt="" />
<span class="icon-focus item-icon"></span>
</a>
</div>
<div class="clearfix"></div>
<div class="grid-item col-sm-4 animated fadeInDown wow" data-wow-delay=".4s">
<a class="overlay" href="img/gallery/gallery-4-full.jpg" title="Special coffee">
<img src="img/gallery/gallery-4.jpg" alt="" />
<span class="icon-focus item-icon"></span>
</a>
</div>
<div class="grid-item col-sm-4 animated fadeInDown wow" data-wow-delay=".5s">
<a class="overlay" href="img/gallery/gallery-5-full.jpg" title="Layered coffee">
<img src="img/gallery/gallery-5.jpg" alt="" />
<span class="icon-focus item-icon"></span>
</a>
</div>
<div class="grid-item col-sm-4 animated fadeInDown wow" data-wow-delay=".6s">
<a class="overlay" href="img/gallery/gallery-6-full.jpg" title="Been coffee">
<img src="img/gallery/gallery-6.jpg" alt="" />
<span class="icon-focus item-icon"></span>
</a>
</div>
<div class="grid-item col-sm-4 animated fadeInDown wow" data-wow-delay=".1s">
<a class="overlay" href="img/gallery/gallery-7-full.jpg" title="Layered coffee">
<img src="img/gallery/gallery-7.jpg" alt="" />
<span class="icon-focus item-icon"></span>
</a>
</div>
<div class="grid-item col-sm-4 animated fadeInDown wow" data-wow-delay=".2s">
<a class="overlay" href="img/gallery/gallery-8-full.jpg" title="Special coffee">
<img src="img/gallery/gallery-8.jpg" alt="" />
<span class="icon-focus item-icon"></span>
</a>
</div>
<div class="grid-item col-sm-4 animated fadeInDown wow" data-wow-delay=".3s">
<a class="overlay" href="img/gallery/gallery-9-full.jpg" title="Been coffee">
<img src="img/gallery/gallery-9.jpg" alt="" />
<span class="icon-focus item-icon"></span>
</a>
</div>
</div>
<div class="clearfix"></div>
<a href="#" class="buttons animated zoomIn wow" data-wow-delay=".2s" id="loadmore">Load more</a>
</div>
</div>
</div>
</section>
<!-- ========== gallery section End ========== -->
You will find the gallery section in all versions of HTML files and the CSS in css/style.css after this comment:
/* ---------------------------------------------------- 8. GALLERY -------------------------------------------------------- */
Blog
Blog
<!-- ========== blog section ========== -->
<section id="blog" class="pt100 pb100 bg-black">
<div class="container">
<!-- section title -->
<div class="row">
<div class="col-xs-12">
<div class="section-title text-center mb90 fadeIn animated wow" data-wow-delay=".2s">
<h2>Latest blog</h2>
<div class="title-seperator"></div>
</div>
</div>
</div>
<!-- end section title-->
<div class="row">
<!-- Single blog start -->
<div class="col-sm-4">
<div class="single-blog bg-dark animated fadeInDown wow" data-wow-delay=".1s">
<a href="#"><img class="img-full" src="img/blog-thumb.png" alt="" /></a>
<div class="post-meta">
<a href="#">Admin</a>
<a href="#">December 26, 2016</a>
<a href="#">5 Comments</a>
</div>
<div class="post-title">
<a href="#"><h3>How to make a good coffee</h3></a>
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s,</p>
<a href="" class="readmore-btn">Read more...</a>
</div>
</div>
<!-- Single blog end -->
<!-- Single blog start -->
<div class="col-sm-4">
<div class="single-blog bg-dark animated fadeInDown wow" data-wow-delay=".2s">
<a href="#"><img class="img-full" src="img/blog-thumb.png" alt="" /></a>
<div class="post-meta">
<a href="#">Admin</a>
<a href="#">December 26, 2016</a>
<a href="#">5 Comments</a>
</div>
<div class="post-title">
<a href="#"><h3>How to make a good coffee</h3></a>
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s,</p>
<a href="" class="readmore-btn">Read more...</a>
</div>
</div>
<!-- Single blog end -->
<!-- Single blog start -->
<div class="col-sm-4">
<div class="single-blog bg-dark animated fadeInDown wow" data-wow-delay=".3s">
<a href="#"><img class="img-full" src="img/blog-thumb.png" alt="" /></a>
<div class="post-meta">
<a href="#">Admin</a>
<a href="#">December 26, 2016</a>
<a href="#">5 Comments</a>
</div>
<div class="post-title">
<a href="#"><h3>How to make a good coffee</h3></a>
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s,</p>
<a href="" class="readmore-btn">Read more...</a>
</div>
</div>
<!-- Single blog end -->
<!-- Single blog start -->
<div class="col-sm-4">
<div class="single-blog bg-dark animated fadeInDown wow" data-wow-delay=".4s">
<a href="#"><img class="img-full" src="img/blog-thumb.png" alt="" /></a>
<div class="post-meta">
<a href="#">Admin</a>
<a href="#">December 26, 2016</a>
<a href="#">5 Comments</a>
</div>
<div class="post-title">
<a href="#"><h3>How to make a good coffee</h3></a>
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s,</p>
<a href="" class="readmore-btn">Read more...</a>
</div>
</div>
<!-- Single blog end -->
<!-- Single blog start -->
<div class="col-sm-4">
<div class="single-blog bg-dark animated fadeInDown wow" data-wow-delay=".5s">
<a href="#"><img class="img-full" src="img/blog-thumb.png" alt="" /></a>
<div class="post-meta">
<a href="#">Admin</a>
<a href="#">December 26, 2016</a>
<a href="#">5 Comments</a>
</div>
<div class="post-title">
<a href="#"><h3>How to make a good coffee</h3></a>
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s,</p>
<a href="" class="readmore-btn">Read more...</a>
</div>
</div>
<!-- Single blog end -->
<!-- Single blog start -->
<div class="col-sm-4">
<div class="single-blog bg-dark animated fadeInDown wow" data-wow-delay=".6s">
<a href="#"><img class="img-full" src="img/blog-thumb.png" alt="" /></a>
<div class="post-meta">
<a href="#">Admin</a>
<a href="#">December 26, 2016</a>
<a href="#">5 Comments</a>
</div>
<div class="post-title">
<a href="#"><h3>How to make a good coffee</h3></a>
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s,</p>
<a href="" class="readmore-btn">Read more...</a>
</div>
</div>
<!-- Single blog end -->
</div>
<!-- end section title-->
</div>
</section>
<!-- ========== blog section End ========== -->
You will find the gallery section in all versions of HTML files and the CSS in css/style.css after this comment:
/* ---------------------------------------------------- 9. BLOG -------------------------------------------------------- */
Testimonial
Testimonial
<!-- ========== Testimonial section ========== --> <section id="reviews" class="pt100 pb100 bg-dark"> <div class="container"> <!-- section title --> <div class="row"> <div class="col-xs-12"> <div class="section-title text-center mb90 fadeIn animated wow" data-wow-delay=".2s"> <h2>Customer Feedback</h2> <div class="title-seperator"></div> </div> </div> </div> <!-- end section title--> <div class="row"> <div class="col-sm-12"> <div class="testimonial-carousel"> <div class="testimonial-item bg-black"> <div class="testimonial-image"> <img src="img/testimonial1.jpg" alt="" /> </div> <div class="testimonial-body"> <h3>Al-Rayhan</h3> <p>Co-Founder & COO</p> <blockquote><i class="fa fa-quote-left" aria-hidden="true"></i> Ami apnar dukanor coffee khaiya pura matha nosto hoi geche lol, Ar ami coffee khaitam na re baba. A Ipsum is simply dummy text of the printing try. </blockquote> <a href="http://www.companywebsite.com">DeviserWeb</a> </div> </div> <div class="testimonial-item bg-black"> <div class="testimonial-image"> <img src="img/testimonial2.jpg" alt="" /> </div> <div class="testimonial-body"> <h3>Saif Patowary</h3> <p>Co-Founder & COO</p> <blockquote><i class="fa fa-quote-left" aria-hidden="true"></i> Ami apnar dukanor coffee khaiya pura matha nosto hoi geche lol, Ar ami coffee khaitam na re baba. A Ipsum is simply dummy text of the printing try. </blockquote> <a href="http://www.companywebsite.com">DeviserWeb</a> </div> </div> <div class="testimonial-item bg-black"> <div class="testimonial-image"> <img src="img/testimonial1.jpg" alt="" /> </div> <div class="testimonial-body"> <h3>Saif Patowary</h3> <p>Co-Founder & COO</p> <blockquote><i class="fa fa-quote-left" aria-hidden="true"></i> Ami apnar dukanor coffee khaiya pura matha nosto hoi geche lol, Ar ami coffee khaitam na re baba. A Ipsum is simply dummy text of the printing try. </blockquote> <a href="http://www.companywebsite.com">DeviserWeb</a> </div> </div> <div class="testimonial-item bg-black"> <div class="testimonial-image"> <img src="img/testimonial2.jpg" alt="" /> </div> <div class="testimonial-body"> <h3>Saif Patowary</h3> <p>Co-Founder & COO</p> <blockquote><i class="fa fa-quote-left" aria-hidden="true"></i> Ami apnar dukanor coffee khaiya pura matha nosto hoi geche lol, Ar ami coffee khaitam na re baba. A Ipsum is simply dummy text of the printing try. </blockquote> <a href="http://www.companywebsite.com">DeviserWeb</a> </div> </div> <div class="testimonial-item bg-black"> <div class="testimonial-image"> <img src="img/testimonial1.jpg" alt="" /> </div> <div class="testimonial-body"> <h3>Saif Patowary</h3> <p>Co-Founder & COO</p> <blockquote><i class="fa fa-quote-left" aria-hidden="true"></i> Ami apnar dukanor coffee khaiya pura matha nosto hoi geche lol, Ar ami coffee khaitam na re baba. A Ipsum is simply dummy text of the printing try. </blockquote> <a href="http://www.companywebsite.com">DeviserWeb</a> </div> </div> <div class="testimonial-item bg-black"> <div class="testimonial-image"> <img src="img/testimonial2.jpg" alt="" /> </div> <div class="testimonial-body"> <h3>Saif Patowary</h3> <p>Co-Founder & COO</p> <blockquote><i class="fa fa-quote-left" aria-hidden="true"></i> Ami apnar dukanor coffee khaiya pura matha nosto hoi geche lol, Ar ami coffee khaitam na re baba. A Ipsum is simply dummy text of the printing try. </blockquote> <a href="http://www.companywebsite.com">DeviserWeb</a> </div> </div> </div> </div> </div> </div> </section> <!-- ========== Testimonial section End ========== -->
You will find the Testimonial section in all versions of HTML files and the CSS in css/style.css after this comment:
/* ---------------------------------------------------- 10. TESTIMONIAL -------------------------------------------------------- */
Contact
Contact
<!-- ========== contact section ========== --> <section id="contact" class="pt100 pb100 bg-black"> <div class="container"> <!-- section title --> <div class="row"> <div class="col-sm-4"> <div class="single-contact-widget bg-dark animated fadeInDown wow" data-wow-delay=".1s"> <div class="contact-widget-icon"> <i class="fa fa-clock-o"></i> </div> <h3>Working Days</h3> <p><span class="color-primary">Monday - Friday</span><br>10:00 AM - 11:00 PM</p><br><p><span class="color-primary">Saturday - Sunday</span><br>10:00 AM - 05:00 PM</p> </div> </div> <div class="col-sm-4"> <div class="single-contact-widget bg-dark animated fadeInDown wow" data-wow-delay=".2s"> <div class="contact-widget-icon"> <i class="fa fa-paper-plane"></i> </div> <h3>Shop Location</h3> <p><span class="color-primary">Caffe Address:</span><br>350 Fifth Avenue, 34th floor. New York.</p> </div> </div> <div class="col-sm-4"> <div class="single-contact-widget bg-dark animated fadeInDown wow" data-wow-delay=".3s"> <div class="contact-widget-icon"> <i class="fa fa-phone"></i> </div> <h3>Shop Contact</h3> <p><span class="color-primary">Say Hello</span><br>(555) 555-1234 (or)<br>(555) 555-1234</p><p><a href="mailto:contact@caffe.com">contact@caffe.com</a></p> </div> </div> </div> <!-- end section title--> </div> </section> <!-- ========== contact section End ========== -->
You will find the Contact section in all versions of HTML files and the CSS in css/style.css after this comment:
/* ---------------------------------------------------- 11. CONTACT -------------------------------------------------------- */
Support
Support
If you need to know anything else don't hesitate to ask us by our ThemeForest profile or Our send us an email by thmeatelierbd@gmail.com.
Credit
The whole wb community.