Suggest a feature
×

Welcome to TagMyCode

Please login or create account to add a snippet.
 

index.php

0
0
 
0
Language: Text
Posted by: userf4e89
Added: Oct 27, 2016 4:02 PM
Views: 165
Tags: no tags
  1. <!DOCTYPE html>
  2. <!--
  3. To change this license header, choose License Headers in Project Properties.
  4. To change this template file, choose Tools | Templates
  5. and open the template in the editor..
  6. -->
  7. <?php
  8. require_once "./config/config.php";
  9. require_once VIEW_HEADER;
  10. ?>
  11. <html>
  12.     <head>
  13.         <meta charset="UTF-8">
  14.         <title>Style Redo</title>
  15.     </head>
  16.     <body>
  17.  
  18.     </body>
  19.     <style type="text/css">
  20.  
  21.         /* parallex ------------------------------ */
  22.         *{
  23.             margin: 0px;
  24.             padding: 0px;
  25.         }
  26.         #image
  27.         {
  28.             position: relative;
  29.             z-index: -1;
  30.         }
  31.         #content
  32.         {
  33.             height: 700px;
  34.             width: 100%;
  35.             margin-top: -10px;
  36.             background-color: #fff;
  37.             position: relative;
  38.             z-index: 1;
  39.         }
  40.         .pad
  41.         {
  42.             padding-top: 0px;
  43.         }
  44.         /* parllex end --------------*/
  45.  
  46.         /*carasoul --------------------- */
  47.         .carousel-control.left, .carousel-control.right {
  48.             background-image: none
  49.         }
  50.  
  51.         /* pop / modal / ---------------------------- */
  52.         .modal  {
  53.             /*   display: block;*/
  54.             padding: 0px !important;
  55.             background-color: rgba(2, 2, 1, 0);
  56.             text-align: center;
  57.  
  58.         }
  59.         .modal:before {
  60.             content: '';
  61.             display: inline-block;
  62.             height: 100%;
  63.             vertical-align: middle;
  64.             margin-right: -4px;
  65.         }
  66.  
  67.         .modal-content {
  68.             border-radius: 0px;
  69.             border: none;
  70.  
  71.         }
  72.         .modal-body {
  73.             background-color: #fff;
  74.             color: white;
  75.             height: 480px;
  76.             padding: 0px !important;  
  77.  
  78.         }
  79.         .modal-dialog {
  80.             display: inline-block;
  81.             text-align: left;
  82.             vertical-align: middle;
  83.         }
  84.  
  85.         /* button and text box */
  86.         .btnn
  87.         {
  88.             background-color: #000;
  89.             border-radius: 0px;
  90.             border: 4px solid #000;
  91.             width: 200px;
  92.             color: #fff;
  93.             -webkit-transition-duration: 0.6s; /* Safari */
  94.             transition-duration: 0.6s;
  95.         }
  96.         .btnn:hover
  97.         {
  98.             background-color: #fff;
  99.             border: 4px solid #000;
  100.             color: #000;
  101.             -webkit-transition-duration: 0.6s; /* Safari */
  102.             transition-duration: 0.6s;
  103.         }
  104.         .text
  105.         {
  106.             width: 400px;
  107.             height: 40px;
  108.             border: 2px solid #000;
  109.             border-radius: 0px;
  110.         }
  111.         .text:hover
  112.         {
  113.             border: 2px solid #50c2c2;
  114.         }
  115.  
  116.         /* parallex second */
  117.         .parallax-window {
  118.             min-height: 400px;
  119.             background: transparent;
  120.         }
  121.  
  122.  
  123.  
  124.     </style>
  125.     <script type="text/javascript">
  126.  
  127.         // parallex ----------------
  128.         var ypos, image;
  129.         function parallex()
  130.         {
  131.             ypos = window.pageYOffset;
  132.             image = document.getElementById('image');
  133.             image.style.top = ypos * .5 + 'px';
  134.         }
  135.         window.addEventListener('scroll', parallex)
  136.         // pop up / modal ////// -------------------    
  137.         $(window).load(function () {
  138.             $('#bs-example-modal-lg').modal('show');
  139.         });
  140.     </script>
  141.  
  142.  
  143. <!-- <img id="image" class="img-responsive pad" src="assets/images/background.jpg"/>
  144.      
  145.  
  146.   <div id="content" >
  147.  </div> -->
  148.  
  149.     <!-- myCarousel start ------------------------myCarousel-------------------------------------------- -->
  150.     <div id="myCarousel" class="carousel slide" data-ride="carousel">
  151.         <!-- Indicators -->
  152.         <ol class="carousel-indicators">
  153.             <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
  154.             <li data-target="#myCarousel" data-slide-to="1"></li>
  155.             <li data-target="#myCarousel" data-slide-to="2"></li>
  156.         </ol>
  157.         <div class="carousel-inner" role="listbox">
  158.             <div class="item active">
  159.                 <img class="first-slide"  src="assets/images/banner1.jpg" alt="First slide">
  160.                 <div class="container">
  161.                     <div class="carousel-caption">
  162.                         <h1>Example headline.</h1>
  163.                         <p></p>
  164.                         <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
  165.                     </div>
  166.                 </div>
  167.             </div>
  168.             <div class="item">
  169.                 <img class="second-slide" src="assets/images/banner2.jpg" alt="Second slide">
  170.                 <div class="container">
  171.                     <div class="carousel-caption">
  172.                         <h1>Another example headline.</h1>
  173.                         <p></p>
  174.                         <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
  175.                     </div>
  176.                 </div>
  177.             </div>
  178.             <div class="item">
  179.                 <img class="third-slide" src="assets/images/banner3.jpg" alt="Third slide">
  180.                 <div class="container">
  181.                     <div class="carousel-caption">
  182.                         <h1>One more for good measure.</h1>
  183.                         <p></p>
  184.                         <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
  185.                     </div>
  186.                 </div>
  187.             </div>
  188.         </div>
  189.         <!-- carousel controls ----------------------- -->    
  190.         <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
  191.             <span class="glyphicon glyphicon-chevron-left"  aria-hidden="true"></span>
  192.             <span class="sr-only">Previous</span>
  193.  
  194.         </a>
  195.         <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
  196.             <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
  197.             <span class="sr-only">Next</span>
  198.         </a>
  199.     </div>
  200.     <!-- /.carousel end ---------carousel end------------carousel ------------->
  201.  
  202.     <!-- pop up / modal ------------------------------------------------------- -->
  203.     <div class="container">
  204.         <div class="row">
  205.             <!-- Large modal -->
  206.  
  207.             <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" id="bs-example-modal-lg">
  208.                 <div class="modal-dialog modal-lg">
  209.                     <div class="modal-content">
  210.  
  211.                         <div class="modal-body">
  212.                             <table style="width: 100%; border-color: #fff;" rules="rows">
  213.                                 <tr style="background-color: #000;">
  214.                                     <td rowspan="4"><img style="background-color: #000; height: 480px;" src="assets/images/popus.jpg"></td>
  215.                                     <td style="background-color: #000000;height: 10px; width: 100%;font-size: 30px; height: 50px;" align="center">Sign up for the Newsletter</td>
  216.                                     <td>
  217.                                         <a href=""><span style="font-size: 20px; color: #fff;padding-right: 10px;" class="glyphicon glyphicon-remove" aria-hidden="true" data-dismiss="modal"></span></a>
  218.                                     </td>
  219.                                 </tr>
  220.                                 <tr>
  221.                                     <td style="color: #000; padding: 30px;" align="center">
  222.  
  223.                                         <strong> Join YourStore's squad for 20% off </strong><br>
  224.                                         and get all the latest news, trends and offs and offers
  225.                                         straight to your inbox. Or get 15% off using code SQUAD15
  226.  
  227.                                     </td>
  228.                                 </tr> <form>
  229.                                     <tr>
  230.                                         <td style="padding-left: 65px">
  231.  
  232.                                             <div class="form-group">
  233.                                                 <input type="text" class="form-control text " placeholder="Enter Email ID.....">
  234.                                             </div>
  235.                                         </td>
  236.                                     </tr>
  237.                                     <tr>
  238.                                         <td style="padding-left: 155px;">
  239.                                             <div class="form-group">
  240.                                                 <input type="submit" class="btn btn-lg btnn">
  241.                                             </div>
  242.                                         </td>
  243.                                     </tr>
  244.                                 </form>
  245.                             </table>
  246.                         </div>
  247.                     </div>
  248.                 </div>
  249.             </div>
  250.         </div>
  251.     </div>
  252.  
  253.     <!-- pop up / modal ending------------------------------------------------------- -->
  254.  
  255.     <div class="parallax-window" data-parallax="scroll"  data-image-src="assets/images/back.jpg">
  256.     </div>
  257.  
  258.     <style>
  259.  
  260.         .ico{
  261.             font-size: 60px;
  262.             color: #009999;
  263.         }
  264.         .ico:hover
  265.         {
  266.             color: #999999;
  267.             -webkit-transition-duration: 0.4s; /* Safari */
  268.             transition-duration: 0.4s;
  269.         }
  270.         .txt
  271.         {
  272.             color: #666666;
  273.             font-size: 20px;
  274.             padding-top: 20px;
  275.         }
  276.  
  277.  
  278.     </style>
  279.     <div class="parallax-window container-fluid"  data-parallax="scroll" >
  280.         <div class="row " align="center" >
  281.             <hr>
  282.             <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
  283.  
  284.                 <i class="fa fa-diamond ico" aria-hidden="true"></i>
  285.  
  286.                 <br><p class="txt">100% Quality Product</p>
  287.             </div>
  288.             <div class="col-lg-4 col-md-4 col-xs-12 col-sm-12">
  289.  
  290.                 <i class="fa fa-clock-o ico" aria-hidden="true"></i>
  291.  
  292.                 <br><p class="txt">100% On-time Delivery</p>
  293.             </div>
  294.             <div class="col-lg-4 col-md-4 col-xs-12 col-sm-12">
  295.  
  296.                 <i class="fa fa-inr ico" aria-hidden="true"></i>
  297.                 <br><p class="txt">100% Money Protection</p>
  298.             </div>
  299.         </div>
  300.         <d
  301.  
  302.             <!-- promotion part  start here ----------------------------------- -->
  303.  
  304.  
  305.             <!-- categories  --------------------------------------------- -->
  306.         <style>
  307.                 .cat
  308.                 {
  309.                     /*background-color: #cccccc;*/
  310.                     padding: 40px  0px 40px 0px;
  311.                 }
  312.                 .box
  313.                 {
  314.                     height: 430px;
  315.                     width: 400px;
  316.                     background-color: #000;
  317.                 }
  318.                 .hovereffect {
  319.  
  320.                     overflow: hidden;
  321.                     position: relative;
  322.                     cursor: default;
  323.                 }
  324.                 .hovereffect .overlay {
  325.                     width: 100%;
  326.                     height: 100%;
  327.                     position: absolute;
  328.                     overflow: hidden;
  329.                     top: 20px;
  330.                     left: 0;
  331.                     -webkit-transition: all 0.4s ease-in-out;
  332.                     transition: all 0.4s ease-in-out;
  333.                 }
  334.                 .hovereffect:hover .overlay {
  335.                     background-color: rgba(170,170,170,0.4);
  336.                 }
  337.  
  338.                 .hovereffect h2, .hovereffect img {
  339.                     -webkit-transition: all 0.4s ease-in-out;
  340.                     transition: all 0.4s ease-in-out;
  341.                 }
  342.                 .hovereffect img {
  343.                     display: block;
  344.                     position: relative;
  345.                     -webkit-transform: scale(1.1);
  346.                     -ms-transform: scale(1.1);
  347.                     transform: scale(1.1);
  348.                 }
  349.  
  350.                 .hovereffect:hover img {
  351.                     -webkit-transform: scale(1);
  352.                     -ms-transform: scale(1);
  353.                     transform: scale(1);
  354.                 }
  355.  
  356.                 .hovereffect h2 {
  357.                     text-transform: uppercase;
  358.                     color: #fff;
  359.                     text-align: center;
  360.                     position: relative;
  361.                     font-size: 17px;
  362.                     padding: 10px;
  363.                     background: rgba(0, 0, 0, 0.6);
  364.                 }
  365.  
  366.                 .hovereffect a.info {
  367.                     display: inline-block;
  368.                     text-decoration: none;
  369.                     padding: 7px 14px;
  370.                     text-transform: uppercase;
  371.                     color: #fff;
  372.                     border: 1px solid #fff;
  373.                     margin: 50px 0 0 0;
  374.                     background-color: transparent;
  375.                     opacity: 0;
  376.                     filter: alpha(opacity=0);
  377.                     -webkit-transform: scale(1.5);
  378.                     -ms-transform: scale(1.5);
  379.                     transform: scale(1.5);
  380.                     -webkit-transition: all 0.4s ease-in-out;
  381.                     transition: all 0.4s ease-in-out;
  382.                     font-weight: normal;
  383.                     height: 85%;
  384.                     width: 85%;
  385.                     position: absolute;
  386.                     top: -5%;
  387.                     left: 8%;
  388.                     padding: 70px;
  389.                 }
  390.  
  391.                 .hovereffect:hover a.info {
  392.                     opacity: 1;
  393.                     filter: alpha(opacity=100);
  394.                     -webkit-transform: scale(1);
  395.                     -ms-transform: scale(1);
  396.                     transform: scale(1);
  397.                     background-color: rgba(0,0,0,0.4);
  398.                 }
  399.             </style>
  400.  
  401.             <div class="row" align="center">
  402.                 <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 cat">
  403.                     <div class="box hovereffect" >
  404.                         <img style="height: 430px;" class="img-responsive" src="assets/images/products/index1.JPG">
  405.                         <div class="overlay">
  406.                             <h2>Designer shirts</h2>
  407.                             <a class="info" href="#">link here</a>
  408.                         </div>
  409.                     </div>
  410.                 </div>
  411.                 <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 cat">
  412.                     <div class="box hovereffect" >
  413.                         <img style="height: 430px;" class="img-responsive" src="assets/images/products/index2.JPG">
  414.                         <div class="overlay">
  415.                             <h2>Casual / Formal Shirts</h2>
  416.                             <a class="info" href="#">link here</a>
  417.                         </div>
  418.                     </div>
  419.                 </div>
  420.                 <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 cat">
  421.                     <div class="box hovereffect" >
  422.                         <img style="height: 430px;" class="img-responsive" src="assets/images/products/index3.JPG">
  423.                         <div class="overlay">
  424.                             <h2>Denim Shirts</h2>
  425.                             <a class="info" href="#">link here</a>
  426.                         </div>
  427.                     </div>
  428.                 </div>
  429.             </div>
  430.     </div>
  431.  

Write a comment

To post comments, please log in or register.