added gui

app/Http/Controllers/ProductCntrl.php

@@ -20,7 +20,7 @@ class ProductCntrl extends Controller
         $products->id = 1;
         $products->categories()->attach([$category->id,$products->id]);
         $prd = Product::with('categories')->get();
-        return view('welcome',['products'=>$prd]);
+        return view('home',['products'=>$prd]);
     }
 
     /**

public/css/etalage.css

@@ -0,0 +1,179 @@
+/*
+ * Title: jQuery Etalage plugin CSS
+ * Author: Berend de Jong, Frique
+ * Author URI: http://www.frique.me/
+ * Version: 1.3.1 (20120705.1)
+ *
+ * ------------------------------------ STYLE ------------------------------------
+ * Edit this section to style your thumbnails, zoom area, magnifier etc.
+ * If the id of your Etalage instance is different, do a find/replace on #etalage.
+ * -------------------------------------------------------------------------------
+ */
+
+/* Etalage container (large thumb + small thumbs): */
+#etalage{
+	display: none;
+}
+
+/* Large thumbnail: */
+#etalage .etalage_thumb{
+	background: white url(../images/loading.gif) center no-repeat;
+	
+}
+
+/* Large thumbnail - image (in case you want to add a border around the image within the frame) */
+#etalage .etalage_thumb_image{ }
+
+/* Small thumbnails: */
+#etalage .etalage_small_thumbs li{
+	
+	border: 1px solid #BBC4C9;
+	margin: 10px;
+	border-radius:5px;
+	cursor:pointer;
+}
+/* The one on the left that makes them slide */
+#etalage ul li.etalage_smallthumb_first{ }
+/* The one on the right that makes them slide */
+#etalage ul li.etalage_smallthumb_last{ }
+/* The currently active one */
+#etalage ul li.etalage_smallthumb_active{
+	
+}
+
+/* Zoomed image area: */
+#etalage .etalage_zoom_area,
+.etalage_zoom_area{
+	background: white url(../images/loading.gif) center no-repeat;
+	
+}
+
+/* Magnifier area (thumbnail hovering rectangle): */
+#etalage .etalage_magnifier{
+	background: white;
+	border: 1px solid #bbb;
+}
+
+/* Icon that will apear at the left bottom of the large thumbnail (optional): */
+#etalage .etalage_icon{
+	background: url(../images/zoom.png) no-repeat;
+	width: 104px;
+	height: 104px;
+}
+
+/* Hint that will apear at the top right of the large thumbnail (optional): */
+#etalage .etalage_hint{
+	background: url(../images/hint.gif) no-repeat;
+	width: 130px;
+	height: 57px;
+}
+
+/* Description area (optional) */
+#etalage .etalage_description{
+	background: white;
+	font-style: italic;
+	margin: 10px;
+	padding: 6px 10px;
+}
+
+/*
+ * ------------------------------------ FUNCTIONALITY --------------------------------------
+ * The following CSS serves to make Etalage function properly. Don't edit or edit carefully.
+ * -----------------------------------------------------------------------------------------
+ */
+
+.etalage, .etalage_thumb, .etalage_thumb_image, .etalage_source_image, .etalage_zoom_preview, .etalage_icon, .etalage_hint{ display:none }
+ .etalage_source_image{
+ 	display:none !important;
+ }
+.etalage, .etalage ul, .etalage li, .etalage img, .etalage_hint, .etalage_icon, .etalage_description{ margin:0; padding:0; border:0; list-style:none }
+.etalage, .etalage_magnifier div, .etalage_magnifier div img, .etalage_small_thumbs ul, ul .etalage_small_thumbs li, .etalage_zoom_area div, .etalage_zoom_img{ position:relative }
+.etalage img, .etalage li{ -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -o-user-select:none; user-select:none; -webkit-user-drag:none; -moz-user-drag:none; user-drag:none }
+.etalage, .etalage_small_thumbs li{ float:left }
+.etalage_small_thumbs li img{
+	width:65px !important;
+	height:90px !important;
+}
+.etalage_small_thumbs{
+	width:100% !important;
+}
+.etalage_right{ float:right }
+.etalage li{ position:absolute }
+.etalage img{ vertical-align:bottom; max-width:none; }
+.etalage_thumb_image{
+	width:100% !important;
+}
+.etalage_zoom_area div{
+	width:630px !important;
+	height:500px !important;
+}
+.etalage_magnifier{ cursor:default }
+.etalage_magnifier div, .etalage_small_thumbs{ overflow:hidden }
+.etalage_magnifier div img{ display:none }
+.etalage_icon, .etalage_hint{ cursor:default; width:0; height:0; overflow:hidden }
+.etalage_small_thumbs li.vertical{ float:none }
+.etalage_zoom_area{ z-index:996 }
+.etalage_zoom_area div{ overflow:hidden; z-index:997 }
+.etalage_zoom_preview{ position:absolute; z-index:998 }
+.etalage_zoom_img, .etalage_hint{ z-index:999 }
+.etalage{ direction:ltr; }
+div.etalage_description{ position:absolute; bottom:0; left:0; z-index:999 }
+div.etalage_description.rtl{ direction:rtl; text-align:right }
+
+@media only screen and (max-width: 1280px) {
+.etalage_zoom_area div{
+	width:520px !important;
+	height:500px !important;
+}
+@media only screen and (max-width: 1024px) {
+.etalage_zoom_area div{
+	width:610px !important;
+	height:500px !important;
+}
+@media only screen and (max-width: 800px) {
+.etalage_zoom_area div{
+	width:402px !important;
+	height:500px !important;
+}
+}
+@media only screen and (max-width:768px) {
+.etalage_zoom_area div{
+	width:385px !important;
+	height:500px !important;
+ }
+}
+@media only screen and (max-width: 640px) {
+.etalage_zoom_area div{
+	width:270px !important;
+	height:515px !important;
+ }
+}
+@media only screen and (max-width: 480px) {
+ .etalage_zoom_area div{
+	display:none;
+ }
+}
+ @media only screen and (max-width: 320px) {
+  ul#etalage {
+	width: 100%;
+}
+
+ #etalage .etalage_thumb{
+ 	width:100% !important;
+ }
+.etalage_small_thumbs li img {
+width: 72px !important;
+height: 90px !important;
+}
+.details-left-slider {
+float: left;
+width: 100%;
+}
+ul#etalage{
+	width:220px!important;
+}
+.details-left-info {
+width: 100%;
+}
+
+}

public/css/flexslider.css

@@ -0,0 +1,82 @@
+/*
+ * jQuery FlexSlider v2.0
+ * http://www.woothemes.com/flexslider/
+ *
+ * Copyright 2012 WooThemes
+ * Free to use under the GPLv2 license.
+ * http://www.gnu.org/licenses/gpl-2.0.html
+ *
+ * Contributing author: Tyler Smith (@mbmufffin)
+ */
+/* Browser Resets */
+.flex-container a:active,
+.flexslider a:active,
+.flex-container a:focus,
+.flexslider a:focus  {outline: none;}
+.slides,
+.flex-control-nav,
+.flex-direction-nav {margin: 0; padding: 0; list-style: none;} 
+
+/* FlexSlider Necessary Styles
+*********************************/ 
+.flexslider {margin: 0; padding: 0;}
+.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
+.flexslider .slides img {width: 100%; display: block;border-radius: 5px;}
+.flex-pauseplay span {text-transform: capitalize;}
+
+/* Clearfix for the .slides element */
+.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} 
+html[xmlns] .slides {display: block;} 
+
+/* No JavaScript Fallback */
+/* If you are not using another script, such as Modernizr, make sure you
+ * include js that eliminates this class on page load */
+.no-js .slides > li:first-child {display: block;}
+
+
+/* FlexSlider Default Theme
+*********************************/
+.flexslider {margin: 0 0 60px; background: #fff; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; ,0,0,.2); zoom: 1;}
+.flex-viewport {max-height:1500px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;}
+.loading .flex-viewport {max-height: 300px;}
+.flexslider .slides {zoom: 1;}
+.carousel li {margin-right: 5px}
+/* Direction Nav */
+.flex-direction-nav a {width: 30px; height: 30px; margin: -20px 0 0; display: block; background: url(../images/bg_direction_nav.png) no-repeat 0 0; position: absolute; top: 50%; cursor: pointer; text-indent: -9999px; opacity: 0; -webkit-transition: all .3s ease;}
+.flex-direction-nav .flex-next {background-position: 100% 0; right: -36px; }
+.flex-direction-nav .flex-prev {left: -36px;}
+.flexslider:hover .flex-next {opacity: 0.8; right: 5px;}
+.flexslider:hover .flex-prev {opacity: 0.8; left: 5px;}
+.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {opacity: 1;}
+.flex-direction-nav .disabled {opacity: .3!important; filter:alpha(opacity=30); cursor: default;}
+
+/* Control Nav */
+.flex-control-nav {width: 100%; position: absolute; bottom: -40px; text-align: center;}
+.flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;}
+.flex-control-paging li a {width: 11px; height: 11px; display: block;  background: #C5C5C5; cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; box-shadow: inset 0 0 3px rgba(0,0,0,0.3);}
+.flex-control-paging li a:hover { background: #2DBEEA; }
+.flex-control-paging li a.flex-active { background: #2DBEEA; cursor: default; }
+
+.flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;}
+.flex-control-thumbs li {width: 25%; float: left; margin: 0;}
+.flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;}
+.flex-control-thumbs img:hover {opacity: 1;}
+.flex-control-thumbs .active {opacity: 1; cursor: default;}
+
+@media screen and (max-width: 860px) {
+  .flex-direction-nav .flex-prev {opacity: 1; left: 0;}
+  .flex-direction-nav .flex-next {opacity: 1; right: 0;}
+}
+@media screen and (max-width: 800px) {
+  .flexslider .slides img {width: 74%;margin-left: 17%;}
+}
+@media screen and (max-width: 320px) {
+.flexslider .slides img {
+		width: 90%;
+		margin-left: 8.5%;
+	}
+	.flex-control-paging li a {
+		width: 9px;
+		height: 9px;
+	}
+}

public/js/jquery.flexisel.js

@@ -0,0 +1,284 @@
+/*
+* File: jquery.flexisel.js
+* Version: 1.0.0
+* Description: Responsive carousel jQuery plugin
+* Author: 9bit Studios
+* Copyright 2012, 9bit Studios
+* http://www.9bitstudios.com
+* Free to use and abuse under the MIT license.
+* http://www.opensource.org/licenses/mit-license.php
+*/
+
+(function ($) {
+
+    $.fn.flexisel = function (options) {
+
+        var defaults = $.extend({
+    		visibleItems: 4,
+    		animationSpeed: 200,
+    		autoPlay: false,
+    		autoPlaySpeed: 3000,    		
+    		pauseOnHover: true,
+			setMaxWidthAndHeight: false,
+    		enableResponsiveBreakpoints: false,
+    		responsiveBreakpoints: { 
+	    		portrait: { 
+	    			changePoint:480,
+	    			visibleItems: 1
+	    		}, 
+	    		landscape: { 
+	    			changePoint:640,
+	    			visibleItems: 2
+	    		},
+	    		tablet: { 
+	    			changePoint:768,
+	    			visibleItems: 3
+	    		}
+        	}
+        }, options);
+        
+		/******************************
+		Private Variables
+		*******************************/         
+        
+        var object = $(this);
+		var settings = $.extend(defaults, options);        
+		var itemsWidth; // Declare the global width of each item in carousel
+		var canNavigate = true; 
+        var itemsVisible = settings.visibleItems; 
+        
+		/******************************
+		Public Methods
+		*******************************/        
+        
+        var methods = {
+        		
+			init: function() {
+				
+        		return this.each(function () {
+        			methods.appendHTML();
+        			methods.setEventHandlers();      			
+        			methods.initializeItems();
+				});
+			},
+
+			/******************************
+			Initialize Items
+			*******************************/			
+			
+			initializeItems: function() {
+				
+				var listParent = object.parent();
+				var innerHeight = listParent.height(); 
+				var childSet = object.children();
+				
+    			var innerWidth = listParent.width(); // Set widths
+    			itemsWidth = (innerWidth)/itemsVisible;
+    			childSet.width(itemsWidth);
+    			childSet.last().insertBefore(childSet.first());
+    			childSet.last().insertBefore(childSet.first());
+    			object.css({'left' : -itemsWidth}); 
+
+    			object.fadeIn();
+				$(window).trigger("resize"); // needed to position arrows correctly
+
+			},
+			
+			
+			/******************************
+			Append HTML
+			*******************************/			
+			
+			appendHTML: function() {
+				
+   			 	object.addClass("nbs-flexisel-ul");
+   			 	object.wrap("<div class='nbs-flexisel-container'><div class='nbs-flexisel-inner'></div></div>");
+   			 	object.find("li").addClass("nbs-flexisel-item");
+ 
+   			 	if(settings.setMaxWidthAndHeight) {
+	   			 	var baseWidth = $(".nbs-flexisel-item > img").width();
+	   			 	var baseHeight = $(".nbs-flexisel-item > img").height();
+	   			 	$(".nbs-flexisel-item > img").css("max-width", baseWidth);
+	   			 	$(".nbs-flexisel-item > img").css("max-height", baseHeight);
+   			 	}
+ 
+   			 	$("<div class='nbs-flexisel-nav-left'></div><div class='nbs-flexisel-nav-right'></div>").insertAfter(object);
+   			 	var cloneContent = object.children().clone();
+   			 	object.append(cloneContent);
+			},
+					
+			
+			/******************************
+			Set Event Handlers
+			*******************************/
+			setEventHandlers: function() {
+				
+				var listParent = object.parent();
+				var childSet = object.children();
+				var leftArrow = listParent.find($(".nbs-flexisel-nav-left"));
+				var rightArrow = listParent.find($(".nbs-flexisel-nav-right"));
+				
+				$(window).on("resize", function(event){
+					
+					methods.setResponsiveEvents();
+					
+					var innerWidth = $(listParent).width();
+					var innerHeight = $(listParent).height(); 
+					
+					itemsWidth = (innerWidth)/itemsVisible;
+					
+					childSet.width(itemsWidth);
+					object.css({'left' : -itemsWidth});
+					
+					var halfArrowHeight = (leftArrow.height())/2;
+					var arrowMargin = (innerHeight/2) - halfArrowHeight;
+					leftArrow.css("top", arrowMargin + "px");
+					rightArrow.css("top", arrowMargin + "px");
+					
+				});					
+				
+				$(leftArrow).on("click", function (event) {
+					methods.scrollLeft();
+				});
+				
+				$(rightArrow).on("click", function (event) {
+					methods.scrollRight();
+				});
+				
+				if(settings.pauseOnHover == true) {
+					$(".nbs-flexisel-item").on({
+						mouseenter: function () {
+							canNavigate = false;
+						}, 
+						mouseleave: function () {
+							canNavigate = true;
+						}
+					 });
+				}
+
+				if(settings.autoPlay == true) {
+					
+					setInterval(function () {
+						if(canNavigate == true)
+							methods.scrollRight();
+					}, settings.autoPlaySpeed);
+				}
+				
+			},
+			
+			/******************************
+			Set Responsive Events
+			*******************************/			
+			
+			setResponsiveEvents: function() {
+				var contentWidth = $('html').width();
+				
+				if(settings.enableResponsiveBreakpoints == true) {
+					if(contentWidth < settings.responsiveBreakpoints.portrait.changePoint) {
+						itemsVisible = settings.responsiveBreakpoints.portrait.visibleItems;
+					}
+					else if(contentWidth > settings.responsiveBreakpoints.portrait.changePoint && contentWidth < settings.responsiveBreakpoints.landscape.changePoint) {
+						itemsVisible = settings.responsiveBreakpoints.landscape.visibleItems;
+					}
+					else if(contentWidth > settings.responsiveBreakpoints.landscape.changePoint && contentWidth < settings.responsiveBreakpoints.tablet.changePoint) {
+						itemsVisible = settings.responsiveBreakpoints.tablet.visibleItems;
+					}
+					else {
+						itemsVisible = settings.visibleItems;
+					}
+				}
+			},			
+			
+			/******************************
+			Scroll Left
+			*******************************/				
+			
+			scrollLeft:function() {
+
+				if(canNavigate == true) {
+					canNavigate = false;
+					
+					var listParent = object.parent();
+					var innerWidth = listParent.width();
+					
+					itemsWidth = (innerWidth)/itemsVisible;
+					
+					var childSet = object.children();
+					
+					object.animate({
+							'left' : "+=" + itemsWidth
+						},
+						{
+							queue:false, 
+							duration:settings.animationSpeed,
+							easing: "linear",
+							complete: function() {  
+								childSet.last().insertBefore(childSet.first()); // Get the first list item and put it after the last list item (that's how the infinite effects is made)   								
+								methods.adjustScroll();
+								canNavigate = true; 
+							}
+						}
+					);
+				}
+			},
+			
+			/******************************
+			Scroll Right
+			*******************************/				
+			
+			scrollRight:function() {
+				
+				if(canNavigate == true) {
+					canNavigate = false;
+					
+					var listParent = object.parent();
+					var innerWidth = listParent.width();
+					
+					itemsWidth = (innerWidth)/itemsVisible;
+					
+					var childSet = object.children();
+					
+					object.animate({
+							'left' : "-=" + itemsWidth
+						},
+						{
+							queue:false, 
+							duration:settings.animationSpeed,
+							easing: "linear",
+							complete: function() {  
+								childSet.first().insertAfter(childSet.last()); // Get the first list item and put it after the last list item (that's how the infinite effects is made)   
+								methods.adjustScroll();
+								canNavigate = true; 
+							}
+						}
+					);
+				}
+			},
+			
+			/******************************
+			Adjust Scroll 
+			*******************************/
+			
+			adjustScroll: function() {
+				
+				var listParent = object.parent();
+				var childSet = object.children();				
+				
+				var innerWidth = listParent.width(); 
+				itemsWidth = (innerWidth)/itemsVisible;
+				childSet.width(itemsWidth);
+				object.css({'left' : -itemsWidth});		
+			}			
+        
+        };
+        
+        if (methods[options]) { 	// $("#element").pluginName('methodName', 'arg1', 'arg2');
+            return methods[options].apply(this, Array.prototype.slice.call(arguments, 1));
+        } else if (typeof options === 'object' || !options) { 	// $("#element").pluginName({ option: 1, option:2 });
+            return methods.init.apply(this);  
+        } else {
+            $.error( 'Method "' +  method + '" does not exist in flexisel plugin!');
+        }        
+};
+
+})(jQuery);

resources/views/home.blade.php

@@ -1,23 +1,840 @@
-@extends('layouts.app')
 
-@section('content')
-<div class="container">
-    <div class="row justify-content-center">
-        <div class="col-md-8">
-            <div class="card">
-                <div class="card-header">Dashboard</div>
+<!DOCTYPE html>
+<html>
+<head>
+    <title>BOX SHOP an E-Commerce online Shopping Category Flat Bootstarp responsive Website Template| Home :: w3layouts</title>
+    <link rel='stylesheet' href="{{URL::asset('css/bootstrap.css') }}"  type='text/css' />
+    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
+    <script src="{{URL::asset('js/jquery.min.js') }}"></script>
+    <!-- Custom Theme files -->
+    <link href="{{URL::asset('css/style.css') }}" rel="stylesheet" type="text/css" media="all" />
+    <!-- Custom Theme files -->
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta name="keywords" content="BOX SHOP Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
+Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
+    <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
+    <!--webfont-->
+    <link href='http://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
+    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
+    <!-- start menu -->
+    <link href="{{URL::asset('css/megamenu.css') }}" rel="stylesheet" type="text/css" media="all" />
+    <script type="text/javascript" src="{{URL::asset('js/megamenu.js') }}"></script>
+    <script>$(document).ready(function(){$(".megamenu").megamenu();});</script>
+    <!-- start slider -->
+    <script src="{{URL::asset('js/responsiveslides.min.js') }}"></script>
+    <script>
+        $(function () {
+            $("#slider").responsiveSlides({
+                auto: true,
+                speed: 500,
+                namespace: "callbacks",
+                pager: true,
+            });
+        });
+    </script>
+    <!--end slider -->
+    <link rel="stylesheet" href="{{URL::asset('css/flexslider.css') }}" type="text/css" media="screen" />
+    <script type="text/javascript">
+        $(window).load(function() {
+            $("#flexiselDemo").flexisel({
+                visibleItems: 5,
+                animationSpeed: 1000,
+                autoPlay: false,
+                autoPlaySpeed: 3000,
+                pauseOnHover: true,
+                enableResponsiveBreakpoints: true,
+                responsiveBreakpoints: {
+                    portrait: {
+                        changePoint:480,
+                        visibleItems: 1
+                    },
+                    landscape: {
+                        changePoint:640,
+                        visibleItems: 2
+                    },
+                    tablet: {
+                        changePoint:768,
+                        visibleItems: 3
+                    }
+                }
+            });
 
-                <div class="card-body">
-                    @if (session('status'))
-                        <div class="alert alert-success" role="alert">
-                            {{ session('status') }}
+        });
+    </script>
+    <script type="text/javascript" src="{{URL::asset('js/jquery.flexisel.js') }}"></script>
+</head>
+<body>
+<!-- header-section-starts -->
+<div class="header">
+    <div class="top-header">
+        <div class="wrap">
+            <div class="header-left">
+                <ul>
+                    <li><a href="#">24x7 Customer Care  </a></li> |
+                    <li><a href="order.html"> Track Order</a></li>
+                </ul>
+            </div>
+            <div class="header-right">
+                <ul>
+                    <li>
+                        <i class="user"></i>
+                        <a href="account.html">My Account</a>
+                    </li>
+                    <li class="login">
+                        <i class="lock"></i>
+                        <a href="login.html">Login</a>|
+                    </li>
+                    <li>
+                        <i class="cart"></i>
+                        <a href="#">Shopping Cart</a>
+                    </li>
+                    <li class="last">0</li>
+                </ul>
+                <div class="sign-up-right">
+                    <a href="login.html">Sign Up</a>
+                </div>
+            </div>
+            <div class="clearfix"></div>
+        </div>
+    </div>
+    <div class="wrap">
+        <div class="header-bottom">
+            <div class="logo">
+                <a href="/"><img src="images/logo.jpg" class="img-responsive" alt="" /></a>
+            </div>
+            <div class="search">
+                <div class="search2">
+                    <form>
+                        <input type="submit" value="">
+                        <input type="text" value="Search for a product, category or brand" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Search for a product, category or brand';}"/>
+                    </form>
+                </div>
+            </div>
+            <div class="clearfix"></div>
+        </div>
+    </div>
+</div>
+<!-- header-section-ends -->
+<div class="wrap">
+    <div class="navigation-strip">
+        <h4>Most Popular<i class="arrow"></i></h4>
+        <div class="top-menu">
+            <!-- start header menu -->
+            <ul class="megamenu skyblue">
+                <li><a class="color1" href="#">mobiles</a>
+                    <div class="megapanel">
+                        <div class="row">
+                            <div class="col1">
+                                <div class="h_nav">
+                                    <h4>shop</h4>
+                                    <ul>
+                                        <li><a href="products.html">new arrivals</a></li>
+                                        <li><a href="products.html">men</a></li>
+                                        <li><a href="products.html">women</a></li>
+                                        <li><a href="products.html">accessories</a></li>
+                                        <li><a href="products.html">kids</a></li>
+                                        <li><a href="products.html">brands</a></li>
+                                    </ul>
+                                </div>
+                            </div>
+                            <div class="col1">
+                                <div class="h_nav">
+                                    <h4>help</h4>
+                                    <ul>
+                                        <li><a href="products.html">trends</a></li>
+                                        <li><a href="products.html">sale</a></li>
+                                        <li><a href="products.html">style videos</a></li>
+                                        <li><a href="products.html">accessories</a></li>
+                                        <li><a href="products.html">kids</a></li>
+                                        <li><a href="products.html">style videos</a></li>
+                                    </ul>
+                                </div>
+                            </div>
+                            <div class="col1">
+                                <div class="h_nav">
+                                    <h4>my company</h4>
+                                    <ul>
+                                        <li><a href="products.html">trends</a></li>
+                                        <li><a href="products.html">sale</a></li>
+                                        <li><a href="products.html">style videos</a></li>
+                                        <li><a href="products.html">accessories</a></li>
+                                        <li><a href="products.html">kids</a></li>
+                                        <li><a href="products.html">style videos</a></li>
+                                    </ul>
+                                </div>
+                            </div>
+                            <div class="col1">
+                                <div class="h_nav">
+                                    <h4>account</h4>
+                                    <ul>
+                                        <li><a href="login.html">login</a></li>
+                                        <li><a href="register.html">create an account</a></li>
+                                        <li><a href="products.html">create wishlist</a></li>
+                                        <li><a href="single.html">my shopping bag</a></li>
+                                        <li><a href="products.html">brands</a></li>
+                                        <li><a href="products.html">create wishlist</a></li>
+                                    </ul>
+                                </div>
+                            </div>
+                            <div class="col1">
+                                <div class="h_nav">
+                                    <h4>my company</h4>
+                                    <ul>
+                                        <li><a href="products.html">trends</a></li>
+                                        <li><a href="products.html">sale</a></li>
+                                        <li><a href="products.html">style videos</a></li>
+                                        <li><a href="products.html">accessories</a></li>
+                                        <li><a href="products.html">kids</a></li>
+                                        <li><a href="products.html">style videos</a></li>
+                                    </ul>
+                                </div>
+                            </div>
+                            <div class="col1">
+                                <div class="h_nav">
+                                    <h4>popular</h4>
+                                    <ul>
+                                        <li><a href="products.html">new arrivals</a></li>
+                                        <li><a href="products.html">men</a></li>
+                                        <li><a href="products.html">women</a></li>
+                                        <li><a href="products.html">accessories</a></li>
+                                        <li><a href="products.html">kids</a></li>
+                                        <li><a href="products.html">style videos</a></li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="row">
+                            <div class="col2"></div>
+                            <div class="col1"></div>
+                            <div class="col1"></div>
+                            <div class="col1"></div>
+                            <div class="col1"></div>
+                        </div>
+                    </div>
+                </li>
+                <li class="grid"><a class="color2" href="#">tablets</a>
+                    <div class="megapanel">
+                        <div class="row">
+                            <div class="col1">
+                                <div class="h_nav">
+                                    <h4>shop</h4>
+                                    <ul>
+                                        <li><a href="products.html">new arrivals</a></li>
+                                        <li><a href="products.html">men</a></li>
+                                        <li><a href="products.html">women</a></li>
+                                        <li><a href="products.html">accessories</a></li>
+                                        <li><a href="products.html">kids</a></li>
+                                        <li><a href="products.html">brands</a></li>
+                                    </ul>
+                                </div>
+                            </div>
+                            <div class="col1">
+                                <div class="h_nav">
+                                    <h4>help</h4>
+                                    <ul>
+                                        <li><a href="products.html">trends</a></li>
+                                        <li><a href="products.html">sale</a></li>
+                                        <li><a href="products.html">style videos</a></li>
+                                        <li><a href="products.html">accessories</a></li>
+                                        <li><a href="products.html">kids</a></li>
+                                        <li><a href="products.html">style videos</a></li>
+                                    </ul>
+                                </div>
+                            </div>
+                            <div class="col1">
+                                <div class="h_nav">
+                                    <h4>my company</h4>
+                                    <ul>
+                                        <li><a href="products.html">trends</a></li>
+                                        <li><a href="products.html">sale</a></li>
+                                        <li><a href="products.html">style videos</a></li>
+                                        <li><a href="products.html">accessories</a></li>
+                                        <li><a href="products.html">kids</a></li>
+                                        <li><a href="products.html">style videos</a></li>
+                                    </ul>
+                                </div>
+                            </div>
+                            <div class="col1">
+                                <div class="h_nav">
+                                    <h4>account</h4>
+                                    <ul>
+                                        <li><a href="products.html">login</a></li>
+                                        <li><a href="products.html">create an account</a></li>
+                                        <li><a href="products.html">create wishlist</a></li>
+                                        <li><a href="products.html">my shopping bag</a></li>
+                                        <li><a href="products.html">brands</a></li>
+                                        <li><a href="products.html">create wishlist</a></li>
+                                    </ul>
+                                </div>
+                            </div>
+                            <div class="col1">
+                                <div class="h_nav">
+                                    <h4>my company</h4>
+                                    <ul>
+                                        <li><a href="products.html">trends</a></li>
+                                        <li><a href="products.html">sale</a></li>
+                                        <li><a href="products.html">style videos</a></li>
+                                        <li><a href="products.html">accessories</a></li>
+                                        <li><a href="products.html">kids</a></li>
+                                        <li><a href="products.html">style videos</a></li>
+                                    </ul>
+                                </div>
+                            </div>
+                            <div class="col1">
+                                <div class="h_nav">
+                                    <h4>popular</h4>
+                                    <ul>
+                                        <li><a href="products.html">new arrivals</a></li>
+                                        <li><a href="products.html">men</a></li>
+                                        <li><a href="products.html">women</a></li>
+                                        <li><a href="products.html">accessories</a></li>
+                                        <li><a href="products.html">kids</a></li>
+                                        <li><a href="products.html">style videos</a></li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="row">
+                            <div class="col2"></div>
+                            <div class="col1"></div>
+                            <div class="col1"></div>
+                            <div class="col1"></div>
+                            <div class="col1"></div>
+                        </div>
+                    </div>
+                </li>
+                <li class="grid"><a class="color4" href="#">laptops</a>
+                    <div class="megapanel">
+                        <div class="row">
+                            <div class="col1">
+                                <div class="h_nav">
+                                    <h4>shop</h4>
+                                    <ul>
+                                        <li><a href="products.html">new arrivals</a></li>
+                                        <li><a href="products.html">men</a></li>
+                                        <li><a href="products.html">women</a></li>
+                                        <li><a href="products.html">accessories</a></li>
+                                        <li><a href="products.html">kids</a></li>
+                                        <li><a href="products.html">brands</a></li>
+                                    </ul>
+                                </div>
+                            </div>
+                            <div class="col1">
+                                <div class="h_nav">
+                                    <h4>help</h4>
+                                    <ul>
+                                        <li><a href="products.html">trends</a></li>
+                                        <li><a href="products.html">sale</a></li>
+                                        <li><a href="products.html">style videos</a></li>
+                                        <li><a href="products.html">accessories</a></li>
+                                        <li><a href="products.html">kids</a></li>
+                                        <li><a href="products.html">style videos</a></li>
+                                    </ul>
+                                </div>
+                            </div>
+                            <div class="col1">
+                                <div class="h_nav">
+                                    <h4>my company</h4>
+                                    <ul>
+                                        <li><a href="products.html">trends</a></li>
+                                        <li><a href="products.html">sale</a></li>
+                                        <li><a href="products.html">style videos</a></li>
+                                        <li><a href="products.html">accessories</a></li>
+                                        <li><a href="products.html">kids</a></li>
+                                        <li><a href="products.html">style videos</a></li>
+                                    </ul>
+                                </div>
+                            </div>
+                            <div class="col1">
+                                <div class="h_nav">
+                                    <h4>account</h4>
+                                    <ul>
+                                        <li><a href="products.html">login</a></li>
+                                        <li><a href="products.html">create an account</a></li>
+                                        <li><a href="products.html">create wishlist</a></li>
+                                        <li><a href="products.html">my shopping bag</a></li>
+                                        <li><a href="products.html">brands</a></li>
+                                        <li><a href="products.html">create wishlist</a></li>
+                                    </ul>
+                                </div>
+                            </div>
+                            <div class="col1">
+                                <div class="h_nav">
+                                    <h4>my company</h4>
+                                    <ul>
+                                        <li><a href="products.html">trends</a></li>
+                                        <li><a href="products.html">sale</a></li>
+                                        <li><a href="products.html">style videos</a></li>
+                                        <li><a href="products.html">accessories</a></li>
+                                        <li><a href="products.html">kids</a></li>
+                                        <li><a href="products.html">style videos</a></li>
+                                    </ul>
+                                </div>
+                            </div>
+                            <div class="col1">
+                                <div class="h_nav">
+                                    <h4>popular</h4>
+                                    <ul>
+                                        <li><a href="products.html">new arrivals</a></li>
+                                        <li><a href="products.html">men</a></li>
+                                        <li><a href="products.html">women</a></li>
+                                        <li><a href="products.html">accessories</a></li>
+                                        <li><a href="products.html">kids</a></li>
+                                        <li><a href="products.html">style videos</a></li>
+                                    </ul>
+                                </div>
+                            </div>
                         </div>
-                    @endif
+                        <div class="row">
+                            <div class="col2"></div>
+                            <div class="col1"></div>
+                            <div class="col1"></div>
+                            <div class="col1"></div>
+                            <div class="col1"></div>
+                        </div>
+                    </div>
+                </li>
+                <li><a class="color5" href="#">cameras</a>
+                    <div class="megapanel">
+                        <div class="row">
+                            <div class="col1">
+                                <div class="h_nav">
+                                    <h4>shop</h4>
+                                    <ul>
+                                        <li><a href="products.html">new arrivals</a></li>
+                                        <li><a href="products.html">men</a></li>
+                                        <li><a href="products.html">women</a></li>
+                                        <li><a href="products.html">accessories</a></li>
+                                        <li><a href="products.html">kids</a></li>
+                                        <li><a href="products.html">brands</a></li>
+                                    </ul>
+                                </div>
+                            </div>
+                            <div class="col1">
+                                <div class="h_nav">
+                                    <h4>help</h4>
+                                    <ul>
+                                        <li><a href="products.html">trends</a></li>
+                                        <li><a href="products.html">sale</a></li>
+                                        <li><a href="products.html">style videos</a></li>
+                                        <li><a href="products.html">accessories</a></li>
+                                        <li><a href="products.html">kids</a></li>
+                                        <li><a href="products.html">style videos</a></li>
+                                    </ul>
+                                </div>
+                            </div>
+                            <div class="col1">
+                                <div class="h_nav">
+                                    <h4>my company</h4>
+                                    <ul>
+                                        <li><a href="products.html">trends</a></li>
+                                        <li><a href="products.html">sale</a></li>
+                                        <li><a href="products.html">style videos</a></li>
+                                        <li><a href="products.html">accessories</a></li>
+                                        <li><a href="products.html">kids</a></li>
+                                        <li><a href="products.html">style videos</a></li>
+                                    </ul>
+                                </div>
+                            </div>
+                            <div class="col1">
+                                <div class="h_nav">
+                                    <h4>account</h4>
+                                    <ul>
+                                        <li><a href="products.html">login</a></li>
+                                        <li><a href="products.html">create an account</a></li>
+                                        <li><a href="products.html">create wishlist</a></li>
+                                        <li><a href="products.html">my shopping bag</a></li>
+                                        <li><a href="products.html">brands</a></li>
+                                        <li><a href="products.html">create wishlist</a></li>
+                                    </ul>
+                                </div>
+                            </div>
+                            <div class="col1">
+                                <div class="h_nav">
+                                    <h4>my company</h4>
+                                    <ul>
+                                        <li><a href="products.html">trends</a></li>
+                                        <li><a href="products.html">sale</a></li>
+                                        <li><a href="products.html">style videos</a></li>
+                                        <li><a href="products.html">accessories</a></li>
+                                        <li><a href="products.html">kids</a></li>
+                                        <li><a href="products.html">style videos</a></li>
+                                    </ul>
+                                </div>
+                            </div>
+                            <div class="col1">
+                                <div class="h_nav">
+                                    <h4>popular</h4>
+                                    <ul>
+                                        <li><a href="products.html">new arrivals</a></li>
+                                        <li><a href="products.html">men</a></li>
+                                        <li><a href="products.html">women</a></li>
+                                        <li><a href="products.html">accessories</a></li>
+                                        <li><a href="products.html">kids</a></li>
+                                        <li><a href="products.html">style videos</a></li>
+                                    </ul>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="row">
+                            <div class="col2"></div>
+                            <div class="col1"></div>
+                            <div class="col1"></div>
+                            <div class="col1"></div>
+                            <div class="col1"></div>
+                        </div>
+                    </div>
+                </li>
 
-                    You are logged in!
+            </ul>
+        </div>
+        <div class="clearfix"></div>
+    </div>
+    <div class="main-top">
+        <div class="col-md-8 banner">
+            <!-- start slider -->
+            <!----->
+            <div class="slider">
+                <div class="callbacks_container">
+                    <ul class="rslides" id="slider">
+                        <li>
+                            <img src="images/slider1.jpg" alt=""/>
+                        </li>
+                        <li>
+                            <img src="images/slider2.jpg" alt=""/>
+                        </li>
+                        <li>
+                            <img src="images/slider3.jpg" alt=""/>
+                        </li>
+                        <li>
+                            <img src="images/slider4.jpg" alt=""/>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <!----->
+            <!-- end  slider -->
+        </div>
+        <div class="col-md-4 right-grid">
+            <div class="right-grid-top">
+                <div class="r-sale text-center">
+                    <h6>Winter wear</h6>
+                    <h2>Sale</h2>
+                </div>
+                <div class="r-discount">
+                    <span>upto</span>
+                    <h2>50%</h2>
+                    <p>OFF</p>
+                    <a href="#">shop now<i class="go"></i></a>
                 </div>
+                <div class="clearfix"></div>
             </div>
+            <div class="right-grid-bottom">
+                <div class="right-grid-bottom-left">
+                    <h3>Deal of the Day</h3>
+                    <p>Expires in 3:42:56</p>
+                    <h5>Wireless Headphones</h5>
+                    <h2>Extra 33% OFF</h2>
+                    <a href="single.html">shop now<i class="go"></i></a>
+                </div>
+                <div class="right-grid-bottom-right">
+                    <img src="images/headset.png" alt="" />
+                </div>
+                <div class="clearfix"></div>
+            </div>
+        </div>
+        <div class="clearfix"></div>
+    </div>
+    <div class="new-arrivals text-center">
+        <div class="col-md-3 new-arrival-head">
+            <h3>New Arrivals</h3>
+            <a class="btn btn-1 btn-1d" href="products.html">View All</a>
         </div>
+        <div class="col-md-3 product-item">
+            <a href="products.html"><img src="images/watch.jpg" class="img-responsive" alt="" /></a>
+            <h3>Watches</h3>
+            <a href="single.html">Shop Now<i class="go"></i></a>
+        </div>
+        <div class="col-md-3 product-item">
+            <a href="products.html"><img src="images/men-jacket.jpg" class="img-responsive zoom-img" alt="" /></a>
+            <h3>jackets</h3>
+            <a href="single.html">Shop Now<i class="go"></i></a>
+        </div>
+        <div class="col-md-3 product-item">
+            <a href="products.html"><img src="images/shoes.jpg" class="img-responsive zoom-img" alt="" /></a>
+            <h3>Footwear</h3>
+            <a href="single.html">Shop Now<i class="go"></i></a>
+        </div>
+        <div class="clearfix"></div>
+    </div>
+    <div class="best-sellers">
+        <div class="best-sellers-head">
+            <h3>Bestsellers</h3>
+        </div>
+        <div class="best-sellers-menu">
+            <ul>
+                <li><a class="active" href="#">Electronics</a></li>
+                <li><a href="#">Fashion</a></li>
+                <li><a href="#">Books</a></li>
+                <li><a href="#">Other</a></li>
+            </ul>
+        </div>
+        <div class="clearfix"></div>
+    </div>
+    <div class="device">
+        <div class="course_demo">
+            <ul id="flexiselDemo">
+                <li>
+                    <div class="ipad text-center">
+                        <img src="images/phone.jpg" alt="" />
+                        <h4>Ipad Mini</h4>
+                        <h3>$499</h3>
+                        <ul>
+                            <li><i class="cart-1"></i></li>
+                            <li><a class="cart" href="#">Add To Cart</a></li>
+                        </ul>
+                        <div class="clearfix"></div>
+                        <ul>
+                            <li><i class="heart"></i></li>
+                            <li><a class="cart" href="#">Add To Wishlist</a></li>
+                        </ul>
+                    </div>
+                </li>
+                <li>
+                    <div class="ipad text-center">
+                        <img src="images/phone1.jpg" alt="" />
+                        <h4>Ipad Mini</h4>
+                        <h3>$499</h3>
+                        <ul>
+                            <li><i class="cart-1"></i></li>
+                            <li><a class="cart" href="#">Add To Cart</a></li>
+                        </ul>
+                        <div class="clearfix"></div>
+                        <ul>
+                            <li><i class="heart"></i></li>
+                            <li><a class="cart" href="#">Add To Wishlist</a></li>
+                        </ul>
+                    </div>
+                </li>
+                <li>
+                    <div class="ipad text-center">
+                        <img src="images/phone2.jpg" alt="" />
+                        <h4>Ipad Mini</h4>
+                        <h3>$499</h3>
+                        <ul>
+                            <li><i class="cart-1"></i></li>
+                            <li><a class="cart" href="#">Add To Cart</a></li>
+                        </ul>
+                        <div class="clearfix"></div>
+                        <ul>
+                            <li><i class="heart"></i></li>
+                            <li><a class="cart" href="#">Add To Wishlist</a></li>
+                        </ul>
+                    </div>
+                </li>
+                <li>
+                    <div class="ipad text-center">
+                        <img src="images/phone3.jpg" alt="" />
+                        <h4>Ipad Mini</h4>
+                        <h3>$499</h3>
+                        <ul>
+                            <li><i class="cart-1"></i></li>
+                            <li><a class="cart" href="#">Add To Cart</a></li>
+                        </ul>
+                        <div class="clearfix"></div>
+                        <ul>
+                            <li><i class="heart"></i></li>
+                            <li><a class="cart" href="#">Add To Wishlist</a></li>
+                        </ul>
+                    </div>
+                </li>
+                <li>
+                    <div class="ipad text-center">
+                        <img src="images/phone4.jpg" alt="" />
+                        <h4>Ipad Mini</h4>
+                        <h3>$499</h3>
+                        <ul>
+                            <li><i class="cart-1"></i></li>
+                            <li><a class="cart" href="#">Add To Cart</a></li>
+                        </ul>
+                        <div class="clearfix"></div>
+                        <ul>
+                            <li><i class="heart"></i></li>
+                            <li><a class="cart" href="#">Add To Wishlist</a></li>
+                        </ul>
+                    </div>
+                </li>
+            </ul>
+        </div>
+    </div>
+    <div class="clients">
+        <div class="course_demo1">
+            <ul id="flexiselDemo1">
+                <li>
+                    <div class="client">
+                        <img src="images/c1.jpg" alt="" />
+                    </div>
+                </li>
+                <li>
+                    <div class="client">
+                        <img src="images/c2.jpg" alt="" />
+                    </div>
+                </li>
+                <li>
+                    <div class="client">
+                        <img src="images/c4.jpg" alt="" />
+                    </div>
+                </li>
+                <li>
+                    <div class="client">
+                        <img src="images/c3.jpg" alt="" />
+                    </div>
+                </li>
+                <li>
+                    <div class="client">
+                        <img src="images/c5.jpg" alt="" />
+                    </div>
+                </li>
+                <li>
+                    <div class="client">
+                        <img src="images/c6.jpg" alt="" />
+                    </div>
+                </li>
+                <li>
+                    <div class="client">
+                        <img src="images/c7.jpg" alt="" />
+                    </div>
+                </li>
+            </ul>
+        </div>
+        <link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />
+        <script type="text/javascript">
+            $(window).load(function() {
+                $("#flexiselDemo1").flexisel({
+                    visibleItems: 7,
+                    animationSpeed: 1000,
+                    autoPlay: false,
+                    autoPlaySpeed: 3000,
+                    pauseOnHover: true,
+                    enableResponsiveBreakpoints: true,
+                    responsiveBreakpoints: {
+                        portrait: {
+                            changePoint:480,
+                            visibleItems: 1
+                        },
+                        landscape: {
+                            changePoint:640,
+                            visibleItems: 2
+                        },
+                        tablet: {
+                            changePoint:768,
+                            visibleItems: 3
+                        }
+                    }
+                });
+
+            });
+        </script>
+        <script type="text/javascript" src="js/jquery.flexisel.js"></script>
+    </div>
+    <div class="transport-grid">
+        <div class="col-md-4 shipping">
+            <h3><i class="shipping-icon"></i>Free Shipping</h3>
+            <p>Syphogrants called into the council chamber, and these are changed every day. It is a fundamental rule of their government,</p>
+        </div>
+        <div class="col-md-4 shipping">
+            <h3><i class="correct-icon"></i>100 % Original</h3>
+            <p>Syphogrants called into the council chamber, and these are changed every day. It is a fundamental rule of their government,</p>
+        </div>
+        <div class="col-md-4 return">
+            <h3><i class="return-icon"></i>Free Return</h3>
+            <p>Syphogrants called into the council chamber, and these are changed every day. It is a fundamental rule of their government,</p>
+        </div>
+        <div class="clearfix"></div>
+    </div>
+</div>
+<div class="footer">
+    <div class="wrap">
+        <div class="contact-section">
+            <div class="col-md-4 follow text-left">
+                <h3>Follow Us</h3>
+                <p>Lorem ipsum dolor sit amet</p>
+                <div class="social-icons">
+                    <i class="twitter"></i>
+                    <i class="facebook"></i>
+                    <i class="googlepluse"></i>
+                    <i class="pinterest"></i>
+                    <i class="linkedin"></i>
+                </div>
+            </div>
+            <div class="col-md-4 subscribe text-left">
+                <h3>Subscribe Us</h3>
+                <p>Get the latest updates & Offers right in your inbox.</p>
+                <input type="text" class="text" value="" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '';}">
+                <input type="submit" value="Subscribe">
+            </div>
+            <div class="col-md-4 help text-right">
+                <h3>Need Help?</h3>
+                <p>Lorem ipsum dolor sit amet</p>
+                <a href="contact.html">Contact us</a>
+            </div>
+            <div class="clearfix"></div>
+        </div>
+        <div class="footer-middle">
+            <div class="col-md-6 different-products">
+                <ul>
+                    <li class="first"> Shop </li> -
+                    <li><a href=""> Mobiles </a></li> |
+                    <li><a href=""> Laptops </a></li> |
+                    <li><a href=""> Cameras </a></li> |
+                    <li><a href=""> Clothing </a></li> |
+                    <li><a href=""> Footwear </a></li> |
+                    <li><a href=""> Jewellery </a></li>
+                </ul>
+                <ul>
+                    <li class="first"> Help </li> -
+                    <li><a href=""> Faqs </a></li> |
+                    <li><a href=""> shipping </a></li> |
+                    <li><a href=""> payments </a></li> |
+                    <li><a href=""> cancellation&returns </a></li>
+                </ul>
+                <ul>
+                    <li class="first"> account <li> -
+                    <li><a href=""> log in </a></li> |
+                    <li><a href=""> sign up </a></li> |
+                    <li><a href=""> My WhishList </a></li> |
+                    <li><a href=""> My cart </a></li>
+                </ul>
+                <ul>
+                    <li class="first"> boxshop </li> -
+                    <li><a href="contact.html"> contact us </a></li> |
+                    <li><a href=""> about us </a></li> |
+                    <li><a href=""> careers </a></li> |
+                    <li><a href=""> blog </a></li> |
+                    <li><a href=""> press </a></li>
+                </ul>
+                <ul>
+                    <li class="first"> policies</li> -
+                    <li><a href=""> terms of use </a></li> |
+                    <li><a href=""> security </a></li> |
+                    <li><a href=""> privacy policy</a></li>
+                </ul>
+            </div>
+            <div class="col-md-6 about-text text-right">
+                <h4>About BoxShop</h4>
+                <p>The fashion never alters, and as it is neither disagreeable nor uneasy, so it is suited to the climate, and calculated both for their summers and winters. Every family makes their own clothes; but all among them, women as well as men, learn one or other of the trades formerly mentioned.</p>
+            </div>
+            <div class="clearfix"></div>
+        </div>
+        <div class="cards text-center">
+            <img src="images/cards.jpg" alt="" />
+        </div>
+        <div class="copyright text-center">
+            <p>Copyright &copy; 2015 All rights reserved | Template by  <a href="http://w3layouts.com">  W3layouts</a></p>
+        </div>
+
     </div>
 </div>
-@endsection
+</body>
+</html>

resources/views/home1.blade.php

@@ -0,0 +1,23 @@
+@extends('layouts.app')
+
+@section('content')
+<div class="container">
+    <div class="row justify-content-center">
+        <div class="col-md-8">
+            <div class="card">
+                <div class="card-header">Dashboard</div>
+
+                <div class="card-body">
+                    @if (session('status'))
+                        <div class="alert alert-success" role="alert">
+                            {{ session('status') }}
+                        </div>
+                    @endif
+
+                    You are logged in!
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+@endsection