API tools faq
paste
NinoSkopac

Untitled

NinoSkopac
Sep 18th, 2015
88
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 9.76 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2. <!--
  3. @license
  4. Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
  5. This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE
  6. The complete set of authors may be found at http://polymer.github.io/AUTHORS
  7. The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
  8. Code distributed by Google as part of the polymer project is also
  9. subject to an additional IP rights grant found at http://polymer.github.io/PATENTS
  10. -->
  11.  
  12. <html><head>
  13.  
  14.     <title>iDCi About Us</title>
  15.  
  16.     <meta charset="utf-8">
  17.     <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=no">
  18.  
  19.     <script src="bower_components/webcomponentsjs/webcomponents.js"></script>
  20.  
  21.     <link rel="import" href="bower_components/iron-flex-layout/classes/iron-flex-layout.html">
  22.     <link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html">
  23.     <link rel="import" href="bower_components/paper-tabs/paper-tabs.html">
  24.     <link rel="import" href="bower_components/paper-tabs/paper-tab.html">
  25.    
  26.   <link rel="import" href="bower_components/paper-styles/paper-styles.html">
  27.   <link rel="import" href="bower_components/neon-animation/neon-animated-pages.html">
  28.   <link rel="import" href="bower_components/neon-animation/neon-animations.html">
  29.   <link rel="import" href="circles-page.html">
  30.   <link rel="import" href="squares-page.html">
  31.  
  32.   <link rel="stylesheet" type="text/css" href="https://idrycleaningi.com/catalog/view/theme/eagency/css/bootstrap.css">
  33.   <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
  34.   <script type="text/javascript" src="https://idrycleaningi.com/catalog/view/theme/eagency/js/bootstrap.min.js"></script>
  35.    
  36.     <style is="custom-style">
  37.       :root {
  38.         --paper-toolbar-background: #00bcd4;
  39.       }
  40.  
  41.       body {
  42.         font-family: sans-serif;
  43.         margin: 0;
  44.         padding: 0px;
  45.         color: #333;
  46.       }
  47.  
  48.       paper-tabs, paper-toolbar {
  49.         background-color: white;
  50.         color: black;
  51.         box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);
  52.         height: 33px;
  53.       }
  54.  
  55.       paper-toolbar paper-tabs {
  56.         box-shadow: none;
  57.       }
  58.  
  59.       paper-tabs[noink][no-bar] paper-tab.iron-selected {
  60.         color: #ffff8d;
  61.       }
  62.  
  63.       paper-tabs[align-bottom] {
  64.         box-shadow: 0px -2px 6px rgba(0, 0, 0, 0.15);
  65.       }
  66.  
  67.       h3 {
  68.         font-size: 18px;
  69.         font-weight: 400;
  70.         padding-top: 20px;
  71.       }
  72.      
  73.       paper-tabs::shadow #ink {
  74.           color: black;
  75.       }
  76.       paper-tabs {
  77.         --paper-tabs-selection-bar-color: black;
  78.       }
  79.      
  80.       :root {
  81.         --color-one: #727272;
  82.         --color-two: #ff9800;
  83.       }
  84.      
  85.       .about-us-ripple {
  86.           /*
  87.           background-color: rgba(255,255,255,1);
  88.           color: rgba(0,0,0,1);
  89.           */
  90.       }
  91.  
  92.     </style>
  93.     <link href='https://fonts.googleapis.com/css?family=EB+Garamond' rel='stylesheet' type='text/css'>
  94.     <style>
  95.       * {
  96.         font-family: 'EB Garamond', serif;
  97.       }
  98.       #about_us, #our_team {
  99.           display: none;
  100.           opacity: 0;
  101.           width: 100%;
  102.           height: 100%;
  103.       }
  104.       iframe {
  105.           border: none;
  106.           width: 100%;
  107.           height: 1000px;
  108.           overflow: hidden;
  109.           margin-top: 15px;
  110.       }
  111.       #about_us p {
  112.           text-align: justify;
  113.           line-height: 35px;
  114.       }
  115.       #about_us #first-paragraph {
  116.           display: block;
  117.           height: auto;
  118.           padding-bottom: 5px;
  119.           padding-top: 15px;
  120.       }
  121.       #about_us #first-paragraph p{
  122.           display: block;
  123.           padding-left: 3%;
  124.           padding-right: 3%;
  125.           width: auto;
  126.           line-height:120%;
  127.           font-size: 17px;
  128.       }
  129.       img.fright {
  130.           float: right;
  131.           display: block;
  132.           border: 1px solid #EFEFEF;
  133.           width: 35%;
  134.       }
  135.       .first-image {
  136.           margin-top: 16px;
  137.           max-width: 360px;
  138.       }
  139.       #second-paragraph {
  140.           display: block;
  141.           position: relative;
  142.           background-image: url(../image/nino/about-us-bcg.jpg);
  143.           background-repeat: repeat-y;
  144.           width: 100%;
  145.           z-index: 1;
  146.       }
  147.       #second-paragraph div {
  148.           text-align: center;
  149.           height: auto;
  150.           display: inline-block;
  151.           background-color: #fff; /*rgba(255,255,255,0.70);*/
  152.           border: 2px solid rgba(151,151,151,0.70);
  153.           font-variant: small-caps;
  154.           color: #333;
  155.           position: relative;
  156.           z-index: 9999;
  157.       }
  158.       #second-paragraph > div:not(#Amount-of-Orders-Since-Site-Started) {
  159.           font-size: 22px;
  160.           padding-top: 15px;
  161.           padding-bottom: 15px;
  162.       }
  163.       #second-paragraph div span:not(#Amount-of-Orders-Since-Site-Started) {
  164.           font-size: 20px;
  165.       }
  166.      
  167.       #Amount-of-Orders-Since-Site-Started {
  168.           color: black;
  169.           z-index: 1;
  170.           font-size: 28px;
  171.           top: 24px;
  172.           left: 0;
  173.           right: 0;
  174.           margin: auto;
  175.           padding: 25px;
  176.       }
  177.       #Amount-of-Orders-Since-Site-Started span {
  178.           font-size: 22px;
  179.       }
  180.      
  181.      
  182.       @media screen and (min-width: 1024px) {
  183.           /* desktop and hi res handheld (like iPad) */
  184.           #second-paragraph {
  185.               background-size: contain;
  186.               height: 0;
  187.               padding-top: 52.15%;
  188.           }
  189.           #Amount-of-Orders-Since-Site-Started {
  190.               width: 500px;
  191.           }
  192.           #second-paragraph > div:not(#Amount-of-Orders-Since-Site-Started) {
  193.               width: 450px;
  194.           }
  195.           #second-paragraph div {
  196.               position: absolute;
  197.           }
  198.          
  199.           .left-row {
  200.           left: 40px;
  201.           }
  202.           .right-row {
  203.               right: 40px;
  204.           }
  205.           #Orders-Today, #Unique-Visitors-in-the-Last-6-Hours {
  206.               top: 192px;
  207.           }
  208.           #Orders-Yesterday, #Unique-Visitors-in-the-Last-24-Hours {
  209.               /* 192 (previous block offset) + 39.3 (needed spacing between blocks) + 86 (aggregated block height) */
  210.               top: 317.3px;
  211.           }
  212.           #Orders-This-Week, #Unique-Visitors-in-the-Last-7-Days {
  213.               top: 442.6px;
  214.           }
  215.       }
  216.       @media screen and (max-width: 1023px) {
  217.           /* handheld */
  218.           #second-paragraph {
  219.               background-size: 100% 100%;
  220.               height: 1200px;
  221.               padding-top: 0;
  222.           }
  223.           #Amount-of-Orders-Since-Site-Started, #second-paragraph > div:not(#Amount-of-Orders-Since-Site-Started) {
  224.               width: 100%;
  225.           }
  226.           #second-paragraph div {
  227.               position: relative;
  228.               margin-top: 5px;
  229.           }
  230.           #Orders-Today, #Orders-Yesterday, #Unique-Visitors-in-the-Last-6-Hours, #Unique-Visitors-in-the-Last-24-Hours {
  231.               top: 30px;
  232.           }
  233.       }
  234.     </style>
  235.  
  236.   </head>
  237.   <body unresolved>
  238.  
  239.   <paper-tabs selected="0">
  240.  
  241.       <paper-tab>ABOUT US</paper-tab>
  242.       <paper-tab>OUR TEAM</paper-tab>
  243.  
  244.   </paper-tabs>
  245.  
  246.   <div id="about_us">
  247.     <div id="first-paragraph">
  248.         <p>iDCi is an online dry cleaning website that connects New Yorkers with local dry cleaners and people around them. With a firm belief that technology is a tool to help support a strong and vibrant community, iDCi is committed to giving hundreds of dry cleaners an online presence, which, in return, can help people save time and money with iDCi's database, points system, and store reviews.
  249.         </p>
  250.     </div>
  251.    
  252.     <div id="second-paragraph">
  253.         <!-- max width is 1262px -->
  254.        
  255.         <div id="Amount-of-Orders-Since-Site-Started">
  256.                 <span style="background-color: white; display: inline-block; width: 100%; height: 100%;">Fast &amp; Easy Dry Cleaning Experience</span>
  257.             <paper-ripple recenters class="about-us-ripple"></paper-ripple>
  258.         </div>
  259.            
  260.        
  261.        
  262.         <div id="Orders-Today" class="left-row">
  263.             <content>Free Pickup &amp; Delivery</content>
  264.             <paper-ripple recenters class="about-us-ripple"></paper-ripple>
  265.         </div>
  266.        
  267.         <div id="Orders-Yesterday" class="left-row">
  268.             Same Day Service
  269.             <paper-ripple recenters></paper-ripple>
  270.         </div>
  271.        
  272.         <!--<div id="Orders-This-Week" class="left-row">
  273.            Orders Placed This Week
  274.            <br>
  275.            <span>5678</span>
  276.        </div>-->
  277.        
  278.         <div id="Unique-Visitors-in-the-Last-6-Hours" class="right-row">
  279.             Free Dry Cleaning Service for Points over 100  
  280.             <!-- <paper-ripple recenters class="about-us-ripple"></paper-ripple> -->
  281.         </div>
  282.        
  283.         <div id="Unique-Visitors-in-the-Last-24-Hours" class="right-row" style="z-index: 0;">
  284.             <span style="z-index: 999;">Unique Relationship with Your Local Dry Cleaner</span>
  285.             <paper-ripple recenters class="about-us-ripple"></paper-ripple>
  286.         </div>
  287.        
  288.         <!--<div id="Unique-Visitors-in-the-Last-7-Days" class="right-row">
  289.            Unique Visitors in the Last 7 Days
  290.            <br>
  291.            <span>6345</span>
  292.        </div>-->
  293.     </div>
  294.   </div>
  295.  
  296.   <div id="our_team">
  297.     <iframe src="our_team.html"></iframe> <!-- since https://github.com/PolymerElements/paper-ripple/issues/28 -->
  298.   </div>
  299.  
  300.   <script>
  301.   /*
  302.   Polymer({
  303.      
  304.       is: 'paper-ripple',
  305.      
  306.       properties: {
  307.          
  308.           initialOpacity: 0
  309.          
  310.       }
  311.      
  312.   });
  313.   */
  314.  
  315.   $(function() {
  316.       $("#about_us").css('display', 'block').animate({opacity: 1}, "slow", "swing");
  317.       var about_us_css_height = $("#about_us").css("height");
  318.       console.log(about_us_css_height);
  319.       parent.DynamicIframeResizer(about_us_css_height);
  320.      
  321.       function change_content(transitionTo, transitionFrom) {
  322.           $(transitionFrom).animate({opacity: 0}, "fast", "swing", function() {
  323.               $(transitionFrom).css('display', 'none');
  324.               $(transitionTo).css('display', 'block').animate({opacity: 1}, "slow", "linear");
  325.           });
  326.       }
  327.      
  328.       $("paper-tabs").on("click", document, function() {
  329.           var sel = $(this).prop('selected');
  330.          
  331.           if (sel == 0) {
  332.               change_content("#about_us", "#our_team");
  333.               parent.DynamicIframeResizer(about_us_css_height);
  334.           } else {
  335.               change_content("#our_team", "#about_us");
  336.               parent.DynamicIframeResizer("1011px");
  337.           }
  338.       });
  339.   });
  340.   </script>
  341.  
  342. </body>
  343. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!