Categories

Sunday, May 22, 2022
therichposts@gmail.com
BootstrapLaravel 8

Laravel 8 Free Ecommerce Template Fully Responsive

Laravel 8 Free Ecommerce Template Fully Responsive

Hello friends, welcome back on blog. Today in this blog post, I am going to tell you, Laravel 8 Free Ecommerce Template Fully Responsive.

Same working demo in Angular 13:

Working Demo
Laravel 8 Free Ecommerce Template Fully Responsive
Laravel Free Ecommerce Template Fully Responsive
laravel Free Ecommerce Template Fully Responsive
Laravel Free Ecommerce Template Fully Responsive

Guys if you are new in Laravel8 the please check below link for Laravel basics information:

Laravel Basics Tutorial for beginners


Here is the code snippet for LaravelFree Ecommerce Templates Free and please use carefully:

1. Friends here is the code below and you can add into your resources/views/ welcome.blade.php file:

Guys for demo purpose, I have used this code into my welcome blade:

<!DOCTYPE html>
<html lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 <!-- slider stylesheet -->
 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" />
  <!-- bootstrap core css -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
  <!-- fonts style -->
  <link href="https://fonts.googleapis.com/css?family=Poppins:400,600,700&display=swap" rel="stylesheet">
  <!-- Custom styles for this template -->
  <link href="assets/css/style.css" rel="stylesheet" />
  <!-- responsive style -->
  <link href="assets/css/responsive.css" rel="stylesheet" />
  
</head>
<body>
<div class="hero_area">
  <div class="logo_box">
  <a class="navbar-brand" href="#">
      <span>
      Slark
      </span>
  </a>
  </div>
 
  <section class=" slider_section position-relative">
  <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
      <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active">01</li>
      <li data-target="#carouselExampleIndicators" data-slide-to="1">02</li>
      <li data-target="#carouselExampleIndicators" data-slide-to="2">03</li>
      </ol>
      <div class="carousel-inner">
      <div class="carousel-item active">
          <div class="detail-box">
          <h1>
              A <br />
              simple <br />
              guide to <br />
              style
          </h1>
          </div>
      </div>
      <div class="carousel-item">
          <div class="detail-box">
          <h1>
              A <br />
              simple <br />
              guide to <br />
              style
          </h1>
          </div>
      </div>
      <div class="carousel-item">
          <div class="detail-box">
          <h1>
              A <br />
              simple <br />
              guide to <br />
              style
          </h1>
          </div>
      </div>
      </div>
  </div>
  </section>

  <div class="menu_box">
  <div class="navbar-collapse" id="">
      <div class="custom_menu-btn">
      <button onclick="openNav()">
          <span class="s-1"> </span>
          <span class="s-2"> </span>
          <span class="s-3"> </span>
      </button>
      </div>
      <div id="myNav" class="overlay">
      <div class="overlay-content">
          <a href="https://therichpost.com">Home</a>
          <a href="https://therichpost.com">Men</a>
          <a href="https://therichpost.com">Women</a>
          <a href="https://therichpost.com">Contact Us</a>
      </div>
      </div>
  </div>
  <div class="social_container">
      <div class="social-box">
      <div>
          <a href="https://therichpost.com">
          <img src="assets/images/fb-top.png" alt="" />
          </a>
      </div>
      <div>
          <a href="https://therichpost.com">
          <img src="assets/images/twitter-top.png" alt="" />
          </a>
      </div>
      <div>
          <a href="https://therichpost.com">
          <img src="assets/images/linkedin-top.png" alt="" />
          </a>
      </div>
      <div>
          <a href="https://therichpost.com">
          <img src="assets/images/instagram-top.png" alt="" />
          </a>
      </div>
      </div>
  </div>
  </div>
</div>



<section class="women_section layout_padding">
  <div class="container">
  <div class="box">
      <div class="row">
      <div class="col-md-6">
          <div class="img-box">
          <img src="assets/images/women-img.png" alt="" />
          </div>
      </div>
      <div class="col-md-6">
          <div class="detail-box">
          <div class="heading_container">
              <h2>
              Fashion <br />
              for women
              </h2>
          </div>
          <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing mod tempor incididunt
          </p>
          <div class="btn-box">
              <a href="https://therichpost.com" class="btn1">
              Buy Now
              </a>
              <a href="https://therichpost.com" class="btn2">
              See More
              </a>
          </div>
          </div>
      </div>
      </div>
  </div>
  </div>
</section>



<section class="men_section layout_padding-bottom">
  <div class="container">
  <div class="box">
      <div class="row">
      <div class="col-md-7">
          <div class="detail-box">
          <div class="heading_container">
              <h2>
              Fashion <br />
              for men
              </h2>
          </div>
          <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing mod tempor incididunt
          </p>
          <div class="btn-box">
              <a href="#" class="btn1">
              Buy Now
              </a>
              <a href="#" class="btn2">
              See More
              </a>
          </div>
          </div>
      </div>
      <div class="col-md-5">
          <div class="img-box">
          <img src="assets/images/men-img.png" alt="" />
          </div>
      </div>
      </div>
  </div>
  </div>
</section>



<section class="modern_section layout_padding-bottom">
  <div class="container">
  <div class="box layout_padding">
      <div class="row">
      <div class="col-md-7">
          <div class="detail-box">
          <div class="heading_container">
              <h2>
              Modern <br />
              bag and glasses
              </h2>
          </div>
          <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
          </p>
          <div class="btn-box">
              <a href="#" class="btn1">
              Buy Now
              </a>
              <a href="#" class="btn2">
              See More
              </a>
          </div>
          </div>
      </div>
      <div class="col-md-5">
          <div class="img_container">
          <div class="img-box">
              <img src="assets/images/glass.png" alt="" />
          </div>
          <div class="img-box">
              <img src="assets/images/purse.png" alt="" />
          </div>
          </div>
      </div>
      </div>
  </div>
  </div>
</section>




<section class="shop_section layout_padding-bottom">
  <div class="container">
  <div class="box">
      <div class="img-box">
      <img src="assets/images/slider-img.jpg" alt="" />
      <div class="detail-box">
          <div class="heading_container">
          <h2>
              About our shop
          </h2>
          </div>
          <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
          </p>
          <a href="#" class="">
          Read More
          </a>
      </div>
      </div>
  </div>
  </div>
</section>



<section class="client_section">
  <div class="container">
  <div id="carouselExample2Indicators" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
      <li data-target="#carouselExample2Indicators" data-slide-to="0" class="active"></li>
      <li data-target="#carouselExample2Indicators" data-slide-to="1"></li>
      <li data-target="#carouselExample2Indicators" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner">
      <div class="carousel-item active">
          <div class="box">
          <div class="heading_container">
              <h2>
              says customers
              </h2>
          </div>
          <div class="row">
              <div class="col-md-6">
              <div class="detail-box">
                  <h5>
                  Jack sumit
                  </h5>
                  <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
                  </p>
              </div>
              </div>
              <div class="col-md-6">
              <div class="img-box">
                  <img src="assets/images/client.jpg" alt="" />
              </div>
              </div>
          </div>
          </div>
      </div>
      <div class="carousel-item">
          <div class="box">
          <div class="heading_container">
              <h2>
              says customers
              </h2>
          </div>
          <div class="row">
              <div class="col-md-6">
              <div class="detail-box">
                  <h5>
                  Jack sumit
                  </h5>
                  <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
                  </p>
              </div>
              </div>
              <div class="col-md-6">
              <div class="img-box">
                  <img src="assets/images/client.jpg" alt="" />
              </div>
              </div>
          </div>
          </div>
      </div>
      <div class="carousel-item">
          <div class="box">
          <div class="heading_container">
              <h2>
              says customers
              </h2>
          </div>
          <div class="row">
              <div class="col-md-6">
              <div class="detail-box">
                  <h5>
                  Jack sumit
                  </h5>
                  <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
                  </p>
              </div>
              </div>
              <div class="col-md-6">
              <div class="img-box">
                  <img src="assets/images/client.jpg" alt="" />
              </div>
              </div>
          </div>
          </div>
      </div>
      </div>
  </div>
  </div>
</section>



<section class="subscribe_section layout_padding">
  <div class="container">
  <div class="box">
      <div class="row">
      <div class="col-md-8 mx-auto">
          <div class="subscribe_form ">
          <div class="heading_container">
              <h2>
              subscribe our newsletter
              </h2>
          </div>
          <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
          </p>
          <form>
              <input type="email" placeholder="Enter your email" />
              <button>
              subscribe
              </button>
          </form>
          </div>
      </div>
      </div>
  </div>
  </div>
</section>



<section class="contact_section layout_padding-bottom">
  <div class="container">
  <div class="box layout_padding2">
      <div class="row">
      <div class="col-lg-6 col-md-8 mx-auto">
          <div class="contact-form">
          <div class="heading_container">
              <h2>
              Request a call back
              </h2>
          </div>
          <form>
              <div>
              <input type="text" placeholder="Full Name " />
              </div>
              <div>
              <input type="text" placeholder="Phone Number" />
              </div>
              <div>
              <input type="email" placeholder="Email Address" />
              </div>
              <div>
              <input type="text" placeholder="Message" class="input_message" />
              </div>
              <div class="d-flex justify-content-center">
              <button type="button" class="btn_on-hover">
                  Send
              </button>
              </div>
          </form>
          </div>
      </div>
      </div>
  </div>
  </div>
</section>



<section class="info_section layout_padding">
  <div class="container">
  <div class="row">
      <div class="col-lg-3 col-md-4">
      <h5>
          Category
      </h5>
      <p>
          Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it overContrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it </p>
      </div>
      <div class="col-md-7 offset-md-1 offset-lg-2 col-lg-6">
      <div class="row">
          <div class="col-md-5  ">
          <h5>
              Useful Links
          </h5>
          <ul>
              <li>
              <a href="https://therichpost.com">
                  Contrary
              </a>
              </li>
              <li>
              <a href="https://therichpost.com">
                  to popular belief,
              </a>
              </li>
              <li>
              <a href="https://therichpost.com">
                  Lorem Ipsum is
              </a>
              </li>
              <li>
              <a href="https://therichpost.com">
                  not simply
              </a>
              </li>
              <li>
              <a href="https://therichpost.com">
                  random text. It
              </a>
              </li>
          </ul>
          </div>
          <div class="col-md-6">
          <h5>
              Contact Us
          </h5>
          <div class="info_link-box">
              <a href="#">
              <span>+01 1234567890</span>
              </a>
              <a href="#">
              <span>+01 1234567890</span>
              </a>
              <a href="#">
              <span> <span class="__cf_email__">[email&#160;protected]</span></span>
              </a>
          </div>
          </div>
      </div>
      <div class="info_container">
          <div class="row">
          <div class="col-md-5 ">
              <h5>
              Follow Us
              </h5>
          </div>
          <div class="col-md-6 mb-0">
              <div class="info_social">
              <div>
                  <a href="https://therichpost.com">
                  <img src="assets/images/fb-top.png" alt="" />
                  </a>
              </div>
              <div>
                  <a href="https://therichpost.com">
                  <img src="assets/images/twitter-top.png" alt="" />
                  </a>
              </div>
              <div>
                  <a href="https://therichpost.com">
                  <img src="assets/images/linkedin-top.png" alt="" />
                  </a>
              </div>
              <div>
                  <a href="https://therichpost.com">
                  <img src="assets/images/instagram-top.png" alt="" />
                  </a>
              </div>
              </div>
          </div>
          </div>
      </div>
      </div>
  </div>
  </div>
</section>


<section class="container-fluid footer_section">
  <p>
  &copy; 2021 All Rights Reserved. Design by
  <a href="https://therichpost.com">Free Html Templates</a>
  </p>
</section>
</body>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js" ></script>
  <script>
    function openNav() {
    document.getElementById("myNav").classList.toggle("menu_width");
    document
        .querySelector(".custom_menu-btn")
        .classList.toggle("menu_btn-style");
}
  </script>
</html>

2. Now friends, please do the following steps because this is the most important:

1. Please make “assets” folder inside public folder.

2. Please download css files and script files from below url and please all that files inside “public/assets” folder.

https://therichpost.com/ecommercecssimages.zip


Now we are done friends and please run your Laravel 8 project and see the ecommerce site home page.  Also and If you have any kind of query or suggestion or any requirement then feel free to comment below.

Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements. For better understanding must watch video above.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad.

Jassa

Thanks

therichpost
the authortherichpost
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 7, Angular 8, Angular 9, Angular 10, Angular 11, Angular12, Angular 13, Angular 14, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.