API tools faq
paste
Advertisement
Vprento

Interaktivni Aplikacii 1.1

Vprento
Nov 18th, 2018
135
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 11.34 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2.     <head>
  3.         <title>Kolokvium 1</title>
  4.         <style>
  5.             body, html {
  6.                 margin:0;
  7.                 padding:0;
  8.             }
  9.             * {
  10.                 box-sizing: border-box;
  11.             }
  12.             nav {
  13.                 display: block;
  14.                 text-align: center;
  15.                 padding:15px 0px;
  16.  
  17.             }
  18.             nav ul {
  19.                 display: block;
  20.                 margin:0;
  21.                 padding:0;
  22.                 list-style:none;
  23.                 text-align:center;
  24.             }
  25.             nav ul li {
  26.                 display:inline-block;
  27.                 background: #f9f9f9;
  28.             }
  29.             nav ul li a {
  30.                 display: block;
  31.                 font-size:18px;
  32.                 color: #000;
  33.                 text-decoration: none;
  34.                 font-font:sans-serif;
  35.                 padding:5px 15px;
  36.             }
  37.             nav ul li a:hover,
  38.             nav ul li a:focus {
  39.                 color:#0000FF;
  40.                 text-decoration: underline;
  41.             }
  42.             .container {
  43.                 width: 900px;
  44.                 display:block;
  45.                 margin:auto;x`
  46.                 margin-top:100px;
  47.             }
  48.             .boxes {
  49.                 display: block;
  50.                 width: 100%;
  51.             }
  52.             .boxes .box {
  53.                 float:left;
  54.                 width: calc((100% / 4) - 10px);
  55.                 margin:15px 5px;
  56.                 border:1px solid #eeeeee;
  57.                 padding-bottom:20px;
  58.             }
  59.             .boxes .box .image {
  60.                 display:block;
  61.                 margin:auto;
  62.                 width:100%;
  63.                 height:120px;
  64.             }
  65.             .boxes .box .title {
  66.                 text-align: center;
  67.                 display: block;
  68.                 position: relative;
  69.             }
  70.             .boxes .box .title .buttons {
  71.                 position: absolute;
  72.                 left:0;
  73.                 opacity:0;
  74.                 text-align: center;
  75.                 width:100%;
  76.             }
  77.             .boxes .box .title .buttons button {
  78.                 cursor: pointer !important;
  79.             }
  80.             .boxes .box.active .title .buttons {
  81.                 opacity:1;
  82.             }
  83.             .collapsable-panels {
  84.                 display:block;
  85.                 width:200px;
  86.                 margin:40px 5px;
  87.             }
  88.             .collapse {
  89.                 display: block;
  90.                 margin-bottom:5px;
  91.                 border:1px solid #eee;
  92.             }
  93.             .collapse .title {
  94.                 display: block;
  95.                 font-size:14px;
  96.                 font-weight:bold;
  97.                 padding:5px;
  98.                 font-family: sans-serif;
  99.                 cursor: pointer;
  100.             }
  101.             .collapse .title:hover {
  102.                 background: #f9f9f9;
  103.             }
  104.             .collapse .data {
  105.                 display: none;
  106.                 padding:5px;
  107.                 background: #f1f1f1;
  108.             }
  109.             .collapse .data b {
  110.                 display:block;
  111.                 font-weight: normal;
  112.                 font-size:14px;
  113.                 margin-top:10px;
  114.             }
  115.             .collapse .data ul {
  116.                 margin:0;
  117.                 padding:0;
  118.                 list-style: none;
  119.             }
  120.             @media (max-width:1000px) {
  121.                 .container {
  122.                     width:100%;
  123.                     padding-left:15px;
  124.                     padding-right:15px;
  125.                 }
  126.             }
  127.         </style>
  128.         <script src="jquery/jquery.js" type="application/javascript"></script>
  129.     </head>
  130.     <body>
  131.  
  132.  
  133.     <nav>
  134.         <ul>
  135.             <li><a href="index.html">Home</a></li>
  136.         </ul>
  137.     </nav>
  138.  
  139.         <div class="container">
  140.  
  141.             <h1>Compact &amp; Digital Cameras</h1>
  142.             <div class="boxes">
  143.  
  144.                 <div class="box">
  145.                     <div class="image" style="background:url('sliki/CompactDigitalCameras/PowerShot%20G3%20X.png') center no-repeat;background-size:contain;"></div>
  146.                     <div class="title">
  147.                         PowerShot G3 X
  148.                         <div class="buttons">
  149.                             <button>Add to cart</button>
  150.                             <button>Rate</button>
  151.                         </div>
  152.                     </div>
  153.                 </div>
  154.                 <div class="box">
  155.                     <div class="image" style="background:url('sliki/CompactDigitalCameras/PowerShot%20G5%20X.png') center no-repeat;background-size:contain;"></div>
  156.                     <div class="title">
  157.                         PowerShot G5 X
  158.                         <div class="buttons">
  159.                             <button>Add to cart</button>
  160.                             <button>Rate</button>
  161.                         </div>
  162.                     </div>
  163.                 </div>
  164.                 <div class="box">
  165.                     <div class="image" style="background:url('sliki/CompactDigitalCameras/PowerShot%20G7%20X.png') center no-repeat;background-size:contain;"></div>
  166.                     <div class="title">
  167.                         PowerShot G7 X
  168.                         <div class="buttons">
  169.                             <button>Add to cart</button>
  170.                             <button>Rate</button>
  171.                         </div>
  172.                     </div>
  173.                 </div>
  174.                 <div class="box">
  175.                     <div class="image" style="background:url('sliki/CompactDigitalCameras/PowerShot%20G9%20X.png') center no-repeat;background-size:contain;"></div>
  176.                     <div class="title">
  177.                         PowerShot G9 X
  178.                         <div class="buttons">
  179.                             <button>Add to cart</button>
  180.                             <button>Rate</button>
  181.                         </div>
  182.                     </div>
  183.                 </div>
  184.                 <div class="box">
  185.                     <div class="image" style="background:url('sliki/CompactDigitalCameras/PowerShot%20SX%20530%20HS.png') center no-repeat;background-size:contain;"></div>
  186.                     <div class="title">
  187.                         PowerShot SX 530 HS
  188.                         <div class="buttons">
  189.                             <button>Add to cart</button>
  190.                             <button>Rate</button>
  191.                         </div>
  192.                     </div>
  193.                 </div>
  194.                 <div class="box">
  195.                     <div class="image" style="background:url('sliki/CompactDigitalCameras/PowerShot%20SX420%20IS.png') center no-repeat;background-size:contain;"></div>
  196.                     <div class="title">
  197.                         PowerShot SX420 IS
  198.                         <div class="buttons">
  199.                             <button>Add to cart</button>
  200.                             <button>Rate</button>
  201.                         </div>
  202.                     </div>
  203.                 </div>
  204.                 <div class="box">
  205.                     <div class="image" style="background:url('sliki/CompactDigitalCameras/PowerShot%20SX540%20HS.png') center no-repeat;background-size:contain;"></div>
  206.                     <div class="title">
  207.                         PowerShot SX540 HS
  208.                         <div class="buttons">
  209.                             <button>Add to cart</button>
  210.                             <button>Rate</button>
  211.                         </div>
  212.                     </div>
  213.                 </div>
  214.                 <div class="box">
  215.                     <div class="image" style="background:url('sliki/CompactDigitalCameras/PowerShot%20SX720%20HS.png') center no-repeat;background-size:contain;"></div>
  216.                     <div class="title">
  217.                         PowerShot SX720 HS
  218.                         <div class="buttons">
  219.                             <button>Add to cart</button>
  220.                             <button>Rate</button>
  221.                         </div>
  222.                     </div>
  223.                 </div>
  224.                 <div style="clear:both;"></div>
  225.             </div>
  226.  
  227.             <div class="collapsable-panels">
  228.                 <div class="collapse">
  229.                     <div class="title">Services & Apps</div>
  230.                    <div class="data">
  231.                        <div class="collapse">
  232.                            <div class="title">Services</div>
  233.                            <div class="data">
  234.                                <ul>
  235.                                    <li><a href="#">irista</a></li>
  236.                                    <li><a href="#">Lifecake</a></li>
  237.                                    <li><a href="#">Photo Books</a></li>
  238.                                </ul>
  239.                            </div>
  240.                        </div>
  241.                        <div class="collapse">
  242.                            <div class="title">Apps</div>
  243.                            <div class="data">
  244.                                <ul>
  245.                                    <li><a href="#">Camera Connect</a></li>
  246.                                    <li><a href="#">EOS Remote</a></li>
  247.                                </ul>
  248.                            </div>
  249.                        </div>
  250.                    </div>
  251.                </div>
  252.                <div class="collapse">
  253.                    <div class="title">Get Inspired</div>
  254.                    <div class="data">
  255.                        <ul>
  256.                            <li><a href="#">Stories</a></li>
  257.                            <li><a href="#">Techniques</a></li>
  258.                            <li><a href="#">Canon Connectivity</a></li>
  259.                            <li><a href="#">Showcase</a></li>
  260.                            <li><a href="#">Gallery</a></li>
  261.                        </ul>
  262.                    </div>
  263.                </div>
  264.                <div class="collapse">
  265.                    <div class="title">Support</div>
  266.                    <div class="data">
  267.                        <ul>
  268.                            <li><a href="#">Drivers</a></li>
  269.                            <li><a href="#">Software</a></li>
  270.                            <li><a href="#">Manuals</a></li>
  271.                            <li><a href="#">FAQs</a></li>
  272.                        </ul>
  273.                    </div>
  274.                </div>
  275.            </div>
  276.        </div>
  277.  
  278.        <script>
  279.            $(window).load(function() {
  280.                // Lets make the box with same height size
  281.                var maxHeight = 0;
  282.                 $(".box").each(function() {
  283.                     if($(this).outerHeight() > maxHeight) {
  284.                         maxHeight = $(this).outerHeight();
  285.                     }
  286.                 })
  287.                 $(".box").css("height", maxHeight);
  288.             })
  289.             $(document).ready(function() {
  290.                 // Show the buttons on title hover
  291.                 $(".box .title .buttons").hover(function() {
  292.                     $(this).parent().parent().addClass("active");
  293.                 }, function() {
  294.                     $(this).parent().parent().removeClass("active");
  295.                 })
  296.                 $(".collapse .title").click(function(e) {
  297.                     $(this).siblings(".data").slideToggle(200);
  298.                 })
  299.             })
  300.         </script>
  301.     </body>
  302. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!