Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!-- Start Home Section -->
- <style>
- .carousel-control-next-icon-card:after
- {
- content: '>';
- font-size: 35px;
- color: black;
- /* height: 40vh; */
- }
- .slides > div:target {
- transform: scale(0.8);
- }
- .carousel-control-prev-icon-card:after {
- content: '<';
- font-size: 35px;
- color: black;
- }
- .carousel-indicators li {
- display: inline-block;
- width: 10px;
- height: 10px;
- margin: 10px;
- text-indent: 0;
- cursor: pointer;
- border: none;
- border-radius: 50%;
- background-color: gray;
- box-shadow: inset 1px 1px 1px 1px rgba(0,0,0,0.5);
- }
- .carousel-indicators .active {
- width: 15px;
- height: 15px;
- margin: 10px;
- background-color: black;
- }
- .jumbotron-promise{
- color:white;
- background: rgb(201,45,57);
- background: linear-gradient(45deg, rgba(201,45,57,1) 44%, rgba(210,109,117,0.9402135854341737) 100%);
- }
- .jumbotron-social{
- background:aliceblue;
- }
- .carousel-item {
- /* Set the vertical height */
- height: 320px;
- }
- #top {
- /* Set the vertical height */
- height: 100vh;
- }
- .box1 {
- width: 300px;
- margin: 50px auto;
- border: 4px solid #00bfb6;
- padding: 20px;
- text-align: center;
- font-weight: 900;
- color: #00bfb6;
- font-family: arial;
- position: relative;
- }
- .sb5:before {
- content: "";
- width: 0px;
- height: 0px;
- position: absolute;
- border-left: 10px solid #00bfb6;
- border-right: 10px solid transparent;
- border-top: 10px solid #00bfb6;
- border-bottom: 10px solid transparent;
- right: -20px;
- top: 6px;
- }
- .sb5:after {
- content: "";
- width: 0px;
- height: 0px;
- position: absolute;
- border-left: 7px solid #fff;
- border-right: 7px solid transparent;
- border-top: 7px solid #fff;
- border-bottom: 7px solid transparent;
- right: -11px;
- top: 10px;
- }
- /* ============================================== */
- h3.heading {
- font-size: 1.9rem;
- font-weight: 700;
- text-transform: uppercase;
- padding: 1.2rem 0rem;
- }
- /* ============================================== */
- </style>
- <!-- Start Image Slider -->
- <div id="carouselExampleIndicators"class="carousel slide"data-ride="carousel"data-interval="7000">
- <ol class="carousel-indicators">
- <li
- data-target="#carouselExampleIndicators"
- data-slide-to="0"
- class="active"></li>
- <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
- <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
- </ol>
- <div class="carousel-inner" role="listbox">
- <!-- Slide 1 -->
- <div id="top" class="carousel-item active" style="background-image: url(img/running.jpg);">
- <div class="carousel-caption text-center">
- <h1>Welcome</h1>
- <h4>Made for everyone</h4>
- <a class="btn btn-outline-light btn-lg" href="#storefront">Shop Now</a>
- </div>
- </div>
- <!-- Slide 2 -->
- <div id="top"class="carousel-item"style="background-image: url(img/running.jpg);"></div>
- <!-- Slide 3 -->
- <div id="top" class="carousel-item" style="background-image: url(img/running.jpg);"></div>
- <!-- End of Carousel Inner -->
- <!-- Prev & Next Buttons -->
- <a class="carousel-control-prev"href="#carouselExampleIndicators"role="button"data-slide="prev">
- <span class="carousel-control-prev-icon" aria-hidden="true"></span>
- </a>
- <a class="carousel-control-next"href="#carouselExampleIndicators"role="button"data-slide="next">
- <span class="carousel-control-next-icon" aria-hidden="true"></span>
- </a>
- </div>
- </div>
- <!-- End Image Slider -->
- </div>
- <!-- End Home Section -->
- <!-- Start Advertise customer Benefits -->
- <div class='row'>
- <div class="col-sm-4" style="margin-left:auto; margin-right:auto; display:block;">
- <?= $this->Html->image('woman.png', ['alt' => 'CakePHP', 'width' => '50%', 'url' => array('controller' => 'store', 'action' => 'women')]); ?></a>
- <div class="box1 sb5">Click Me!</div>
- </div>
- <div class="col-sm-4" style="margin-left:auto; margin-right:auto; display:block;">
- <?= $this->Html->image('man.png', ['alt' => 'CakePHP', 'width' => '50%', 'url' => array('controller' => 'store', 'action' => 'men')]); ?></a>
- </div>
- <div class="col-sm-4" style="margin-left:auto; margin-right:auto; display:block;">
- <?= $this->Html->image('xtraitems.png', ['alt' => 'CakePHP', 'width' => '50%', 'url' => array('controller' => 'store', 'action' => 'accessories')]); ?></a>
- </div>
- </div>
- <div class="jumbotron-promise">
- <!-- <div class="col-12 text-center">
- <h3>Our Promise</h3>
- <div class="heading-underline"></div>
- </div> -->
- <div class="row dark text-center">
- <div class="col-sm-4" style="width: 30%">
- <?= $this->Html->image('/img/shoes.png',['width'=> '115px', 'height'=>'125px']) ?>
- <div class="#" style="display:inline-block; width: 50%;">
- <p>Expert Advice<br></p>
- </div>
- </div>
- <div class="col-sm-4">
- <?= $this->Html->image('/img/shipping.png',['width'=> '115px', 'height'=>'125px']) ?>
- <div class="#" style="display:inline-block;">
- <p>Free Shipping <br> Orders over $100</p>
- </div>
- </div>
- <div class="col-sm-4">
- <?= $this->Html->image('/img/list.png',['width'=> '115px', 'height'=>'125px']) ?>
- <div class="#" style="display:inline-block;">
- <p>Free Returns <br>Shop with Confidence</p>
- </div>
- </div>
- </div>
- </div>
- <!-- End Advertise customer Benefits -->
- <!-- Start SocMed -->
- <div class="jumbotron-social">
- <div class="row dark text-center">
- <div class="col-sm-4">
- <?= $this->Html->image('/img/instagram.png',['width'=> '115px', 'height'=>'125px']) ?>
- <div class="#" style="display:inline-block;">
- <p>Follow our Instagram</p>
- </div>
- </div>
- <div class="col-sm-4">
- <?= $this->Html->image('/img/subs.png',['width'=> '115px', 'height'=>'125px']) ?>
- <div class="#" style="display:inline-block;">
- <p>Receive our latest deals <br>Subscribe</p>
- </div>
- </div>
- <div class="col-sm-4">
- <?= $this->Html->image('/img/facebook.png', ['width'=> '115px', 'height'=>'125px']); ?>
- <div class="#" style="display:inline-block;">
- <p>Like us on Facebook</p>
- </div>
- </div>
- </div>
- </div>
- <!-- End SocMed -->
- <!-- Start Popular Products Section -->
- <div id="popular">
- <div class="col-12 text-center">
- <h3 class="heading">Popular Products</h3>
- <div class="heading-underline"></div>
- </div>
- <style>
- .linecamp{
- overflow : hidden;
- text-overflow: ellipsis;
- display: -webkit-box;
- -webkit-box-orient: vertical;
- -webkit-line-clamp: 4;
- word-wrap:break-word;
- word-break:break-all;
- }
- </style>
- <div style="margin-left:auto;margin-right:auto;display:table;">
- <div class="row justify-content-lg-between" style="text-align: center;">
- <?php
- foreach($products as $product)
- {
- if( h($product->popular) == 1)
- {
- ?>
- <div style="width: 255px">
- <div class="card text-center" >
- <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
- <ol class="carousel-indicators">
- <?php
- $counter = 0;
- foreach($product->imgs as $img)
- {
- if($counter == 0)
- {
- ?>
- <li data-target="#carouselExampleIndicators"data-slide-to="<?= $counter ?>"class="active"></li>
- <?php
- } else {
- ?>
- <li data-target="#carouselExampleIndicators"data-slide-to="<?= $counter ?>"></li>
- <?php
- }
- $counter++;
- }
- ?>
- </ol>
- <div class="carousel-inner" role="listbox">
- <?php
- $counter = 0;
- foreach($product->imgs as $img)
- {
- if($counter == 0)
- {
- ?>
- <div class="carousel-item active">
- <?= $this->Html->image($img->img1, ['alt' => 'CakePHP', 'width' => '100%'], array('class'=>'img-rounded')); ?>
- </div>
- <?php
- } else {
- ?>
- <div class="carousel-item">
- <?= $this->Html->image($img->img1, ['alt' => 'CakePHP', 'width' => '100%'], array('class'=>'img-rounded')); ?>
- </div>
- <?php
- }
- $counter++;
- }
- ?>
- </div>
- </div>
- </div>
- <div class="card-body">
- <div>
- <h6><strong><?= h($product->name); ?></strong></h6>
- </div>
- <div class="linecamp">
- <h7><?= h($product->description); ?></h7>
- </div>
- <div >
- <?= $this->Html->link(__('<button class="hugeButton"> DETAILS </button>'), ['controller' => 'Store', 'action' => 'details', $product->id], ['escape' => false]) ?>
- </div>
- </div>
- </div>
- <?php
- }
- }
- ?>
- </div>
- </div>
- </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement