- Vào đường dẫn sau :
https://themehunt.com/item/1524993-eshopper-free-ecommerce-html-template
- tải về và giải nén ra.
- Vào C\Xampp\ htdocs\ mở cmd chạy lệnh :
composer create-project --prefer-dist laravel/laravel esshopper
- Vào thư mục vừa giải nén ra coppy thư mục đó vào C:\xampp\htdocs\esshopper\public
- mở dự án lên trong php Storm.
- Vào terminal chạy : php artisan make:controller HomeController
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class HomeController extends Controller
{
public function index()
{
return view('home.home');
}
public function test()
{
return view('test');
}
}
- Vào web.php
<?php
use Illuminate\Support\Facades\Route;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/','HomeController@index');
Route::get('/test','HomeController@test');
- Vào resources => views => tạo foder home => tạo file home.blade.php
@extends('layout.master')
@section('title')
<title>Home page</title>
@endsection
@section('css')
<link rel="stylesheet" href="{{asset('home/home.css')}}">
@endsection
@section('js')
<link rel="stylesheet" href="{{asset('home/home.js')}}">
@endsection
@section('content')
<section id="slider"><!--slider-->
<div class="container">
<div class="row">
<div class="col-sm-12">
<div id="slider-carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#slider-carousel" data-slide-to="0" class="active"></li>
<li data-target="#slider-carousel" data-slide-to="1"></li>
<li data-target="#slider-carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<div class="col-sm-6">
<h1><span>E</span>-SHOPPER</h1>
<h2>Free E-Commerce Template</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<button type="button" class="btn btn-default get">Get it now</button>
</div>
<div class="col-sm-6">
<img src="/eshopper/images/home/girl1.jpg" class="girl img-responsive" alt="" />
<img src="/eshopper/images/home/pricing.png" class="pricing" alt="" />
</div>
</div>
<div class="item">
<div class="col-sm-6">
<h1><span>E</span>-SHOPPER</h1>
<h2>100% Responsive Design</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<button type="button" class="btn btn-default get">Get it now</button>
</div>
<div class="col-sm-6">
<img src="/eshopper/images/home/girl2.jpg" class="girl img-responsive" alt="" />
<img src="/eshopper/images/home/pricing.png" class="pricing" alt="" />
</div>
</div>
<div class="item">
<div class="col-sm-6">
<h1><span>E</span>-SHOPPER</h1>
<h2>Free Ecommerce Template</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<button type="button" class="btn btn-default get">Get it now</button>
</div>
<div class="col-sm-6">
<img src="/eshopper/images/home/girl3.jpg" class="girl img-responsive" alt="" />
<img src="/eshopper/images/home/pricing.png" class="pricing" alt="" />
</div>
</div>
</div>
<a href="#slider-carousel" class="left control-carousel hidden-xs" data-slide="prev">
<i class="fa fa-angle-left"></i>
</a>
<a href="#slider-carousel" class="right control-carousel hidden-xs" data-slide="next">
<i class="fa fa-angle-right"></i>
</a>
</div>
</div>
</div>
</div>
</section><!--/slider-->
<section>
<div class="container">
<div class="row">
@include('components.sidebar')
<div class="col-sm-9 padding-right">
<div class="features_items"><!--features_items-->
<h2 class="title text-center">Features Items</h2>
<div class="col-sm-4">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img src="/eshopper/images/home/product1.jpg" alt="" />
<h2>$56</h2>
<p>Easy Polo Black Edition</p>
<a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
</div>
<div class="product-overlay">
<div class="overlay-content">
<h2>$56</h2>
<p>Easy Polo Black Edition</p>
<a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
</div>
</div>
</div>
<div class="choose">
<ul class="nav nav-pills nav-justified">
<li><a href="#"><i class="fa fa-plus-square"></i>Add to wishlist</a></li>
<li><a href="#"><i class="fa fa-plus-square"></i>Add to compare</a></li>
</ul>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img src="/eshopper/images/home/product2.jpg" alt="" />
<h2>$56</h2>
<p>Easy Polo Black Edition</p>
<a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
</div>
<div class="product-overlay">
<div class="overlay-content">
<h2>$56</h2>
<p>Easy Polo Black Edition</p>
<a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
</div>
</div>
</div>
<div class="choose">
<ul class="nav nav-pills nav-justified">
<li><a href="#"><i class="fa fa-plus-square"></i>Add to wishlist</a></li>
<li><a href="#"><i class="fa fa-plus-square"></i>Add to compare</a></li>
</ul>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img src="/eshopper/images/home/product3.jpg" alt="" />
<h2>$56</h2>
<p>Easy Polo Black Edition</p>
<a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
</div>
<div class="product-overlay">
<div class="overlay-content">
<h2>$56</h2>
<p>Easy Polo Black Edition</p>
<a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
</div>
</div>
</div>
<div class="choose">
<ul class="nav nav-pills nav-justified">
<li><a href="#"><i class="fa fa-plus-square"></i>Add to wishlist</a></li>
<li><a href="#"><i class="fa fa-plus-square"></i>Add to compare</a></li>
</ul>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img src="/eshopper/images/home/product4.jpg" alt="" />
<h2>$56</h2>
<p>Easy Polo Black Edition</p>
<a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
</div>
<div class="product-overlay">
<div class="overlay-content">
<h2>$56</h2>
<p>Easy Polo Black Edition</p>
<a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
</div>
</div>
<img src="/eshopper/images/home/new.png" class="new" alt="" />
</div>
<div class="choose">
<ul class="nav nav-pills nav-justified">
<li><a href="#"><i class="fa fa-plus-square"></i>Add to wishlist</a></li>
<li><a href="#"><i class="fa fa-plus-square"></i>Add to compare</a></li>
</ul>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img src="/eshopper/images/home/product5.jpg" alt="" />
<h2>$56</h2>
<p>Easy Polo Black Edition</p>
<a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
</div>
<div class="product-overlay">
<div class="overlay-content">
<h2>$56</h2>
<p>Easy Polo Black Edition</p>
<a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
</div>
</div>
<img src="/eshopper/images/home/sale.png" class="new" alt="" />
</div>
<div class="choose">
<ul class="nav nav-pills nav-justified">
<li><a href="#"><i class="fa fa-plus-square"></i>Add to wishlist</a></li>
<li><a href="#"><i class="fa fa-plus-square"></i>Add to compare</a></li>
</ul>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img src="/eshopper/images/home/product6.jpg" alt="" />
<h2>$56</h2>
<p>Easy Polo Black Edition</p>
<a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
</div>
<div class="product-overlay">
<div class="overlay-content">
<h2>$56</h2>
<p>Easy Polo Black Edition</p>
<a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
</div>
</div>
</div>
<div class="choose">
<ul class="nav nav-pills nav-justified">
<li><a href="#"><i class="fa fa-plus-square"></i>Add to wishlist</a></li>
<li><a href="#"><i class="fa fa-plus-square"></i>Add to compare</a></li>
</ul>
</div>
</div>
</div>
</div><!--features_items-->
<div class="category-tab"><!--category-tab-->
<div class="col-sm-12">
<ul class="nav nav-tabs">
<li class="active"><a href="#tshirt" data-toggle="tab">T-Shirt</a></li>
<li><a href="#blazers" data-toggle="tab">Blazers</a></li>
<li><a href="#sunglass" data-toggle="tab">Sunglass</a></li>
<li><a href="#kids" data-toggle="tab">Kids</a></li>
<li><a href="#poloshirt" data-toggle="tab">Polo shirt</a></li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane fade active in" id="tshirt" >
<div class="col-sm-3">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img src="/eshopper/images/home/gallery1.jpg" alt="" />
<h2>$56</h2>
<p>Easy Polo Black Edition</p>
<a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img src="/eshopper/images/home/gallery2.jpg" alt="" />
<h2>$56</h2>
<p>Easy Polo Black Edition</p>
<a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img src="/eshopper/images/home/gallery3.jpg" alt="" />
<h2>$56</h2>
<p>Easy Polo Black Edition</p>
<a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img src="/eshopper/images/home/gallery4.jpg" alt="" />
<h2>$56</h2>
<p>Easy Polo Black Edition</p>
<a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="blazers" >
<div class="col-sm-3">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img src="/eshopper/images/home/gallery4.jpg" alt="" />
<h2>$56</h2>
<p>Easy Polo Black Edition</p>
<a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img src="/eshopper/images/home/gallery3.jpg" alt="" />
<h2>$56</h2>
<p>Easy Polo Black Edition</p>
<a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img src="/eshopper/images/home/gallery2.jpg" alt="" />
<h2>$56</h2>
<p>Easy Polo Black Edition</p>
<a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img src="/eshopper/images/home/gallery1.jpg" alt="" />
<h2>$56</h2>
<p>Easy Polo Black Edition</p>
<a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="sunglass" >
<div class="col-sm-3">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img src="/eshopper/images/home/gallery3.jpg" alt="" />
<h2>$56</h2>
<p>Easy Polo Black Edition</p>
<a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img src="/eshopper/images/home/gallery4.jpg" alt="" />
<h2>$56</h2>
<p>Easy Polo Black Edition</p>
<a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img src="/eshopper/images/home/gallery1.jpg" alt="" />
<h2>$56</h2>
<p>Easy Polo Black Edition</p>
<a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img src="/eshopper/images/home/gallery2.jpg" alt="" />
<h2>$56</h2>
<p>Easy Polo Black Edition</p>
<a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="kids" >
<div class="col-sm-3">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img src="/eshopper/images/home/gallery1.jpg" alt="" />
<h2>$56</h2>
<p>Easy Polo Black Edition</p>
<a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img src="/eshopper/images/home/gallery2.jpg" alt="" />
<h2>$56</h2>
<p>Easy Polo Black Edition</p>
<a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img src="/eshopper/images/home/gallery3.jpg" alt="" />
<h2>$56</h2>
<p>Easy Polo Black Edition</p>
<a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img src="/eshopper/images/home/gallery4.jpg" alt="" />
<h2>$56</h2>
<p>Easy Polo Black Edition</p>
<a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="poloshirt" >
<div class="col-sm-3">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img src="/eshopper/images/home/gallery2.jpg" alt="" />
<h2>$56</h2>
<p>Easy Polo Black Edition</p>
<a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img src="/eshopper/images/home/gallery4.jpg" alt="" />
<h2>$56</h2>
<p>Easy Polo Black Edition</p>
<a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img src="/eshopper/images/home/gallery3.jpg" alt="" />
<h2>$56</h2>
<p>Easy Polo Black Edition</p>
<a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img src="/eshopper/images/home/gallery1.jpg" alt="" />
<h2>$56</h2>
<p>Easy Polo Black Edition</p>
<a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div><!--/category-tab-->
<div class="recommended_items"><!--recommended_items-->
<h2 class="title text-center">recommended items</h2>
<div id="recommended-item-carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-sm-4">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img src="/eshopper/images/home/recommend1.jpg" alt="" />
<h2>$56</h2>
<p>Easy Polo Black Edition</p>
<a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img src="/eshopper/images/home/recommend2.jpg" alt="" />
<h2>$56</h2>
<p>Easy Polo Black Edition</p>
<a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img src="/eshopper/images/home/recommend3.jpg" alt="" />
<h2>$56</h2>
<p>Easy Polo Black Edition</p>
<a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="col-sm-4">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img src="/eshopper/images/home/recommend1.jpg" alt="" />
<h2>$56</h2>
<p>Easy Polo Black Edition</p>
<a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img src="/eshopper/images/home/recommend2.jpg" alt="" />
<h2>$56</h2>
<p>Easy Polo Black Edition</p>
<a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img src="/eshopper/images/home/recommend3.jpg" alt="" />
<h2>$56</h2>
<p>Easy Polo Black Edition</p>
<a href="#" class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
</div>
</div>
</div>
</div>
</div>
</div>
<a class="left recommended-item-control" href="#recommended-item-carousel" data-slide="prev">
<i class="fa fa-angle-left"></i>
</a>
<a class="right recommended-item-control" href="#recommended-item-carousel" data-slide="next">
<i class="fa fa-angle-right"></i>
</a>
</div>
</div><!--/recommended_items-->
</div>
</div>
</div>
</section>
@endsection
- Vào resources => views => tạo foder home => => tạo foder components
- Vào resources => views => tạo foder components
- Vào resources => views => tạo foder layout => tạo file master.blade.php
<!-- Stored in resources/views/layouts/app.blade.php -->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
@yield('title')
<title>Home | E-Shopper</title>
<link href="{{asset('eshopper/css/bootstrap.min.css')}}" rel="stylesheet">
<link href="{{asset('eshopper/css/font-awesome.min.css')}}" rel="stylesheet">
<link href="{{asset('eshopper/css/prettyPhoto.css')}}" rel="stylesheet">
<link href="{{asset('eshopper/css/price-range.css')}}" rel="stylesheet">
<link href="{{asset('eshopper/css/animate.css')}}" rel="stylesheet">
<link href="{{asset('eshopper/css/main.css')}}" rel="stylesheet">
@yield('css')
</head>
<body>
@include('components.header')
@yield('content')
@include('components.footer')
<script src="{{asset('eshopper/js/jquery.js')}}"></script>
<script src="{{asset('eshopper/js/bootstrap.min.js')}}"></script>
<script src="{{asset('eshopper/js/jquery.scrollUp.min.js')}}"></script>
<script src="{{asset('eshopper/js/price-range.js')}}"></script>
<script src="{{asset('eshopper/js/jquery.prettyPhoto.js')}}"></script>
<script src="{{asset('eshopper/js/main.js ')}}"></script>
@yield('js')
</body>
</html>
- Vào resources => views => tạo file test.blade.php
@extends('layout.master')
@section('title')
<title>test page</title>
@endsection
@section('content')
<div>content load here</div>
@endsection
- Vào public => tạo foder home => tạo file home.css
/* lg */
@media (min-width: 1200px) {}
/* md */
@media (min-width: 992px) and (max-width: 1199px) {
.header-middle .btn-group .btn {
padding-left: 8px;
padding-right: 8px;
}
.usa {
margin-right: 0;
}
.shipping img {
width: 100%;
}
.searchform input {
width: 160px;
}
.product-information span span {
width: 100%;
}
#similar-product .carousel-inner .item img {
width: 65px;
}
#cart_items .cart_info .cart_description h4,
#cart_items .cart_info .cart_description p {
text-align: center;
}
}
/* sm */
@media (min-width: 768px) and (max-width: 991px) {
.shop-menu{
display: block;
width: 100%;
text-align: center;
}
.shop-menu ul{
display: inline-block;
float: none;
}
.shop-menu ul li a {
padding-left: 0;
}
#slider-carousel .item {
padding-left: 30px;
}
.item h2 {
font-size: 24px;
}
.girl {
margin-left: 0;
}
.pricing {
width: 100px;
}
.shipping img {
width: 100%;
}
.slider.slider-horizontal {
width: 100% !important;
}
.tab-pane .col-sm-3,
.features_items .col-sm-4 {
width: 50%;
}
.footer-widget .col-sm-2 {
width: 33%;
display: inline-block;
margin-bottom: 50px;
}
.footer-widget .col-sm-3 {
display: inline-block;
width: 40%;
}
#similar-product .carousel-inner .item img {
width: 60px;
margin-left: 0;
}
.product-information span span {
display: block;
width: 100%;
}
.product-information .cart {
margin-left: 0;
margin-top: 15px;
}
.item-control i {
font-size: 12px;
padding: 5px 6px;
}
#cart_items .cart_info .cart_description h4,
#cart_items .cart_info .cart_description p {
text-align: center;
}
.companyinfo h2 {
font-size: 20px;
}
.address {
margin-top: 48px;
margin-left: 20px;
}
.address p {
font-size: 12px;
top: 5px;
}
}
/* xs */
@media (max-width: 767px) {
#cart_items .cart_info table{
min-width: 600px;
}
#cart_items .cart_info .cart_description h4 a{
font-style: 15px;
}
#cart_items .cart_info .cart_description p{
font-size: 12px;
}
.mainmenu ul li:first-child{
padding-left: 15px;
}
#form{
margin-top: 10px;
}
.shop-menu{
display: block;
width: 100%;
text-align: center;
}
.shop-menu ul{
display: inline-block;
float: none;
}
.header_top .col-sm-6:first-child {
display: inline-block;
float: left;
}
.header_top .col-sm-6:last-child {
display: inline-block;
float: right;
}
.header-middle .col-sm-4 {
display: inline-block;
overflow: inherit;
width: 100%;
}
.social-icons ul li a i {
padding: 8px 10px;
}
.shop-menu.pull-right {
float: none !important;
}
.shop-menu .nav.navbar-nav {
margin-left: -30px;
}
.header-bottom .col-sm-9 {
display: inline-block;
width: 100%;
}
.mainmenu {
width: 100%;
}
.mainmenu ul li {
background: rgba(0, 0, 0, 0.5);
padding-top: 15px;
padding-bottom: 0;
}
.mainmenu ul li:last-child {
padding-bottom: 15px;
}
.mainmenu ul li a {
color: #fff;
}
.navbar-collapse.in {
overflow: inherit;
}
.mainmenu ul li a.active {
padding-left: 15px;
}
.dropdown .fa-angle-down {
display: none;
}
ul.sub-menu {
position: relative;
width: auto;
display: block;
background: transparent;
-webkit-box-shadow: none;
box-shadow: none;
top: 0;
}
.sub-menu li {
background: transparent;
}
.mainmenu .navbar-nav li ul.sub-menu li {
background: transparent;
padding-bottom: 0;
}
.nav.navbar-nav>li:hover>ul.sub-menu {
-webkit-animation: none;
animation: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.header-bottom {
position: relative;
}
.header-bottom .col-sm-3 {
display: inline-block;
position: absolute;
left: 0;
top: 38px;
}
#slider-carousel .item {
padding-left: 0;
}
.shipping {
margin-bottom: 25px;
}
.pricing {
width: 100px;
}
.footer-top .col-sm-7 .col-sm-3 {
width: 50%;
float: left;
}
.footer-widget .col-sm-2 {
width: 28%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-bottom: 50px;
margin-top: 0;
float: left;
margin-left: 30px;
}
.companyinfo {
text-align: center;
}
.footer-widget .col-sm-3 {
display: inline-block;
}
.single-widget {}
.product-information span {
display: block;
}
#similar-product {
margin-bottom: 40px;
}
.well {
display: inline-block;
}
}
/* XS Portrait */
@media (max-width: 480px) {
.bill-to{
margin-top: 10px;
}
.form-two, .form-one{
width: 100%;
margin-left: 0;
}
.header-middle .dropdown-menu{
text-align: left;
}
.header-middle .dropdown-menu{
min-width: 0;;
}
.header-middle .logo + div{
text-align: center;
display: block;
}
.header-middle .btn-group>.btn-group{
float: none;
}
.contactinfo {
text-align: center;
}
.contactinfo ul li a {
padding-right: 15px;
padding-left: 0;
}
.social-icons.pull-right {
float: none !important;
text-align: center;
}
.btn-group.pull-right,
.footer-bottom .pull-left,
.footer-bottom .pull-right,
.mainmenu.pull-left,
.media.commnets .pull-left,
.media-list .pull-left {
float: none !important;
}
.header_top .col-sm-6:first-child {
display: block;
float: none;
}
.header_top .col-sm-6:last-child {
display: block;
float: none;
}
.contactinfo .nav.nav-pills,
.social-icons .nav.navbar-nav {
display: inline-block;
}
.logo {
text-align: center;
width: 100%;
}
.shop-menu ul li {
padding: 0 5px;
}
.header-middle .col-sm-4 {
text-align: center;
overflow: inherit;
}
.shop-menu .nav.navbar-nav {
margin-left: 0;
}
.btn-group>.btn-group:last-child>.btn:first-child {
margin-right: 0;
}
.header-bottom .col-sm-9 {
display: inline-block;
width: 100%;
}
.mainmenu {
width: 100%;
}
.mainmenu ul li {
background: rgba(0, 0, 0, 0.5);
padding-top: 15px;
padding-bottom: 0;
}
.mainmenu ul li:last-child {
padding-bottom: 15px;
}
.mainmenu ul li a {
color: #FFF;
padding-bottom: 0;
}
.navbar-collapse.in {
overflow: inherit;
}
.mainmenu ul li a.active {
padding-left: 15px;
}
.dropdown .fa-angle-down {
display: none;
}
ul.sub-menu {
position: relative;
width: auto;
display: block;
background: transparent;
-webkit-box-shadow: none;
box-shadow: none;
top: 0;
}
.mainmenu .navbar-nav li ul.sub-menu li {
background: transparent;
padding-bottom: 0;
}
.nav.navbar-nav>li:hover>ul.sub-menu {
-webkit-animation: none;
animation: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.item {
padding-left: 0;
}
.item h1 {
font-size: 30px;
margin-top: 0;
}
.item h2 {
font-size: 20px;
}
.pricing {
width: 70px;
}
.category-tab ul li a {
font-size: 12px;
}
.companyinfo h2,
.companyinfo p {
text-align: center;
}
.video-gallery {
margin-top: 30px;
}
.footer-bottom p {
font-size: 13px;
text-align: center;
}
.footer-widget .col-sm-2 {
width: 50%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-bottom: 50px;
margin-top: 0;
float: left;
padding-right: 0;
padding-left: 30px;
margin-left: 0;
}
.single-widget {
padding-left: 0;
}
.features_items {
margin-top: 30px;
}
.category-tab .nav-tabs li {
float: none;
}
#similar-product .carousel-inner .item img {
margin-left: 4px;
}
.product-information {
margin-top: 40px;
}
#reviews p,
.blog-post-area .single-blog-post p {
text-align: justify;
}
#reviews form span input {
width: 100%;
margin-bottom: 20px;
}
#reviews form span input:last-child {
margin-left: 0;
}
.blog-post-area .single-blog-post h3 {
font-size: 14px;
}
.blog-post-area .post-meta ul li {
margin-right: 7px;
}
.shipping {
margin-bottom: 20px;
}
.commnets {
padding: 0;
}
.content-404 h1 {
font-size: 30px;
}
.content-404 h2 a {
font-size: 20px;
}
.order-message {
display: inline-block;
}
.response-area .media img {
width: auto;
}
.sinlge-post-meta li {
margin-bottom: 10px;
}
.product-information {
padding-left: 0;
text-align: center;
}
.product-information span span {
float: none;
}
}
- Vào public => tạo foder home => tạo file home.js
- Vào resources => views => components => tạo file header.blade.php
<header id="header"><!--header-->
<div class="header_top"><!--header_top-->
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="contactinfo">
<ul class="nav nav-pills">
<li><a href="#"><i class="fa fa-phone"></i> +2 95 01 88 821</a></li>
<li><a href="#"><i class="fa fa-envelope"></i> info@domain.com</a></li>
</ul>
</div>
</div>
<div class="col-sm-6">
<div class="social-icons pull-right">
<ul class="nav navbar-nav">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#"><i class="fa fa-dribbble"></i></a></li>
<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div><!--/header_top-->
<div class="header-middle"><!--header-middle-->
<div class="container">
<div class="row">
<div class="col-md-4 clearfix">
<div class="logo pull-left">
<a href="index.html"><img src="/eshopper/images/home/logo.png" alt="" /></a>
</div>
<div class="btn-group pull-right clearfix">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle usa" data-toggle="dropdown">
USA
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="">Canada</a></li>
<li><a href="">UK</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle usa" data-toggle="dropdown">
DOLLAR
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="">Canadian Dollar</a></li>
<li><a href="">Pound</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-8 clearfix">
<div class="shop-menu clearfix pull-right">
<ul class="nav navbar-nav">
<li><a href=""><i class="fa fa-user"></i> Account</a></li>
<li><a href=""><i class="fa fa-star"></i> Wishlist</a></li>
<li><a href="checkout.html"><i class="fa fa-crosshairs"></i> Checkout</a></li>
<li><a href="cart.html"><i class="fa fa-shopping-cart"></i> Cart</a></li>
<li><a href="login.html"><i class="fa fa-lock"></i> Login</a></li>
</ul>
</div>
</div>
</div>
</div>
</div><!--/header-middle-->
<div class="header-bottom"><!--header-bottom-->
<div class="container">
<div class="row">
<div class="col-sm-9">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="mainmenu pull-left">
<ul class="nav navbar-nav collapse navbar-collapse">
<li><a href="index.html" class="active">Home</a></li>
<li class="dropdown"><a href="#">Shop<i class="fa fa-angle-down"></i></a>
<ul role="menu" class="sub-menu">
<li><a href="shop.html">Products</a></li>
<li><a href="product-details.html">Product Details</a></li>
<li><a href="checkout.html">Checkout</a></li>
<li><a href="cart.html">Cart</a></li>
<li><a href="login.html">Login</a></li>
</ul>
</li>
<li class="dropdown"><a href="#">Blog<i class="fa fa-angle-down"></i></a>
<ul role="menu" class="sub-menu">
<li><a href="blog.html">Blog List</a></li>
<li><a href="blog-single.html">Blog Single</a></li>
</ul>
</li>
<li><a href="404.html">404</a></li>
<li><a href="contact-us.html">Contact</a></li>
</ul>
</div>
</div>
<div class="col-sm-3">
<div class="search_box pull-right">
<input type="text" placeholder="Search"/>
</div>
</div>
</div>
</div>
</div><!--/header-bottom-->
</header><!--/header-->
- Vào resources => views => components => tạo file footer.blade.php
<footer id="footer"><!--Footer-->
<div class="footer-bottom">
<div class="container">
<div class="row">
<p class="pull-left">Copyright © 2013 E-SHOPPER Inc. All rights reserved.</p>
<p class="pull-right">Designed by <span><a target="_blank" href="http://www.themeum.com">Themeum</a></span></p>
</div>
</div>
</div>
</footer><!--/Footer-->
- Vào resources => views => components => tạo file sidebar.blade.php
<div class="col-sm-3">
<div class="left-sidebar">
<h2>Category</h2>
<div class="panel-group category-products" id="accordian"><!--category-productsr-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordian" href="#sportswear">
<span class="badge pull-right"><i class="fa fa-plus"></i></span>
Sportswear
</a>
</h4>
</div>
<div id="sportswear" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li><a href="#">Nike </a></li>
<li><a href="#">Under Armour </a></li>
<li><a href="#">Adidas </a></li>
<li><a href="#">Puma</a></li>
<li><a href="#">ASICS </a></li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordian" href="#mens">
<span class="badge pull-right"><i class="fa fa-plus"></i></span>
Mens
</a>
</h4>
</div>
<div id="mens" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li><a href="#">Fendi</a></li>
<li><a href="#">Guess</a></li>
<li><a href="#">Valentino</a></li>
<li><a href="#">Dior</a></li>
<li><a href="#">Versace</a></li>
<li><a href="#">Armani</a></li>
<li><a href="#">Prada</a></li>
<li><a href="#">Dolce and Gabbana</a></li>
<li><a href="#">Chanel</a></li>
<li><a href="#">Gucci</a></li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordian" href="#womens">
<span class="badge pull-right"><i class="fa fa-plus"></i></span>
Womens
</a>
</h4>
</div>
<div id="womens" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li><a href="#">Fendi</a></li>
<li><a href="#">Guess</a></li>
<li><a href="#">Valentino</a></li>
<li><a href="#">Dior</a></li>
<li><a href="#">Versace</a></li>
</ul>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a href="#">Kids</a></h4>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a href="#">Fashion</a></h4>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a href="#">Households</a></h4>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a href="#">Interiors</a></h4>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a href="#">Clothing</a></h4>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a href="#">Bags</a></h4>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a href="#">Shoes</a></h4>
</div>
</div>
</div><!--/category-products-->
</div>
</div>
.jpg)
.jpg)
0 Nhận xét