API tools faq
paste
Advertisement
Carolaine_Vieira

Navigation Page 03

Carolaine_Vieira
Apr 30th, 2017
2,669
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 20.19 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en-us">
  3.     <head>
  4.         <!---
  5.        ╔═══╦═╗╔═╦═══╦╗──╔═══╦═╗╔═╦═══╦═╗─╔╦════╦═══╗
  6.        ║╔═╗║║╚╝║║╔═╗║║──║╔═╗║║╚╝║║╔══╣║╚╗║║╔╗╔╗║╔══╝
  7.        ║║─║║╔╗╔╗║╚═╝║║──║║─║║╔╗╔╗║╚══╣╔╗╚╝╠╝║║╚╣╚══╗
  8.        ║╚═╝║║║║║║╔══╣║─╔╣╚═╝║║║║║║╔══╣║╚╗║║─║║─║╔══╝
  9.        ║╔═╗║║║║║║║──║╚═╝║╔═╗║║║║║║╚══╣║─║║║─║║─║╚══╗
  10.        ╚╝─╚╩╝╚╝╚╩╝──╚═══╩╝─╚╩╝╚╝╚╩═══╩╝─╚═╝─╚╝─╚═══╝
  11.        PAGE; CREATED BY CAROLAINE VIEIRA
  12.        **** DONT REMOVE THE CREDITS ***
  13.        amplamente.tumblr.com
  14.        --->
  15.        
  16.         <title>Navigation</title>
  17.         <meta charset="utf-8">
  18.         <link rel="shortcut icon" href="{Favicon}">
  19.        
  20.       <link href="https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400italic,700|Arsenal:400,400italic,700|Open+Sans:400,400italic,700|Roboto:400,400italic,700|Arima+Madurai:400,400italic,700|Montserrat:400,400italic,700|Abril+Fatface:400,400italic,700|Playfair+Display:400,400italic,700|Raleway:400,400italic,700|Roboto:400,400italic,700" rel="stylesheet" type="text/css">
  21.      
  22.         <!------- filter scripts -------->
  23.          <script src="http://static.tumblr.com/fuu6t9w/kh8ml0pl9/jquery-1.7.1.min.js"></script>
  24.          <script src="http://static.tumblr.com/fuu6t9w/eubml0pm0/jquery.isotope.min.js"></script>
  25.          <script>
  26.          $(function(){
  27.          
  28.          var $container = $('#container');
  29.          
  30.          $container.isotope({
  31.          itemSelector : '.story'
  32.          });
  33.          var $optionSets = $('#sort .option-set'),
  34.          $optionLinks = $optionSets.find('a');
  35.          
  36.          $optionLinks.click(function(){
  37.          var $this = $(this);
  38.          // don't proceed if already selected
  39.          if ( $this.hasClass('selected') ) {
  40.          return false;
  41.          }
  42.          var $optionSet = $this.parents('.option-set');
  43.          $optionSet.find('.selected').removeClass('selected');
  44.          $this.addClass('selected');
  45.          
  46.          // make option object dynamically, i.e. { filter: '.my-filter-class' }
  47.          var options = {},
  48.          key = $optionSet.attr('data-option-key'),
  49.          value = $this.attr('data-option-filter');
  50.          // parse 'false' as false boolean
  51.          value = value === 'false' ? false : value;
  52.          options[ key ] = value;
  53.          if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
  54.         // changes in layout modes need extra logic
  55.         changeLayoutMode( $this, options )
  56.         } else {
  57.         // otherwise, apply new options
  58.         $container.isotope( options );
  59.          }
  60.          
  61.          return false;
  62.          });
  63.          
  64.          
  65.          });
  66.          </script>
  67.        
  68.         <style type="text/css">
  69.            
  70.             body {
  71.                 font-family:Open Sans;
  72.                 font-size:15px;
  73.                 background:#f9f9f9 url("http://i.imgur.com/nY6OybC.png");
  74.                 margin:0;
  75.             }
  76.            
  77.             a {
  78.                 color:#888;
  79.                 text-decoration:none;
  80.                 -webkit-transition:all 0.3s ease-out;
  81.                 -moz-transition:all 0.3s ease-out;
  82.                 transition:all 0.3s ease-out;
  83.             }
  84.             a:hover {
  85.                 color:#000;
  86.                 -webkit-transition:all 0.3s ease-out;
  87.                 -moz-transition:all 0.3s ease-out;
  88.                 transition:all 0.3s ease-out;
  89.             }
  90.             a:focus {
  91.                 outline:1px dotted #ff9999;
  92.             }
  93.             i, italic, b, strong {
  94.                 color:#c49799;
  95.             }
  96.            
  97.             ::-webkit-scrollbar {
  98.               width: 5px;
  99.               height: 5px;
  100.             }
  101.             ::-webkit-scrollbar-thumb { background:#c49799; }
  102.             ::-webkit-scrollbar-track { background:rgba(255,255,255,0.0); }
  103.            
  104.             #lista {
  105.                 width:250px;
  106.                 background:#fff;
  107.                 border:1px solid #f0f0f0;
  108.                 display:inline-block;
  109.                 vertical-align:top;
  110.                 text-align:left;
  111.                 margin:0 30px 30px 0;
  112.                 -webkit-transition:all 0.3s ease-out;
  113.                 -moz-transition:all 0.3s ease-out;
  114.                 transition:all 0.3s ease-out;
  115.             }
  116.             #lista:hover #lista_info img {
  117.                 -webkit-transition:all 0.3s ease-out;
  118.                 -moz-transition:all 0.3s ease-out;
  119.                 transition:all 0.3s ease-out;
  120.                 border-radius:2px;
  121.             }
  122.             #lista ul {
  123.                 margin:0 0 0 -40px;
  124.             }
  125.             #lista ul li {
  126.                 list-style:none;
  127.                 display:block;
  128.                 border-bottom:1px solid #f1f1f1;
  129.             }
  130.             #lista ul li a {
  131.                 display:inline-block;
  132.                 width:calc(100% - 20px);
  133.                 padding:8px 10px;
  134.                 font-size:13px;
  135.                 text-transform:lowercase;
  136.             }
  137.             #lista ul li a:hover {
  138.                 background:#c49799;
  139.                 color:#fff;
  140.                 letter-spacing:2px;
  141.             }
  142.             #lista #lista_info {
  143.                 padding:10px 10px 15px 10px;
  144.                 border-bottom:1px solid #f1f1f1;
  145.                 background:#fcfcfc;
  146.             }
  147.             #lista #lista_info img {
  148.                 width:43px;
  149.                 height:43px;
  150.                 border-radius:100%;
  151.                 padding:4px;
  152.                 border:1px solid #f1f1f1;
  153.                 background:#fff;
  154.                 float:left;
  155.                 -webkit-transition:all 0.3s ease-out;
  156.                 -moz-transition:all 0.3s ease-out;
  157.                 transition:all 0.3s ease-out;
  158.             }
  159.             #lista #lista_info h3 {
  160.                 margin:5px 0 0 58px;
  161.                 font-size:17px;
  162.                 font-weight:500;
  163.                 color:#c49799;
  164.                 font-family:Playfair DIsplay;
  165.                 font-style:italic;
  166.             }
  167.             #lista #lista_info sub {
  168.                 display:block;
  169.                 margin:0 0 0 58px;
  170.                 color:#777;
  171.                 font-size:13px;
  172.             }
  173.             #lista #lista_info_alt {
  174.                 padding:10px 10px 15px 10px;
  175.                 border-bottom:1px solid #f1f1f1;
  176.                 background:#c49799;
  177.             }
  178.             #lista #lista_info_alt img {
  179.                 width:50px;
  180.                 height:50px;
  181.                 border-radius:100% 100% 0 100%;
  182.                 -webkit-box-shadow: 0 0 0 2px rgba(0,0,0,0.2);
  183.                 box-shadow: 0 0 0 2px rgba(0,0,0,0.2);
  184.                 float:left;
  185.                 -webkit-transition:all 0.3s ease-out;
  186.                 -moz-transition:all 0.3s ease-out;
  187.                 transition:all 0.3s ease-out;
  188.             }
  189.             #lista #lista_info_alt h3 {
  190.                 margin:5px 0 0 59px;
  191.                 font-size:17px;
  192.                 font-weight:500;
  193.                 color:#fff;
  194.                 font-family:Playfair DIsplay;
  195.                 text-shadow:1px 0px rgba(0,0,0,0.2);
  196.                 font-style:italic;
  197.             }
  198.             #lista #lista_info_alt sub {
  199.                 display:block;
  200.                 margin:0 0 0 59px;
  201.                 color:rgba(0,0,0,0.2);
  202.                 font-weight:600;
  203.                 font-size:13px;
  204.             }
  205.             #lista p.description {
  206.                  font-size:12.5px;
  207.                  text-align:justify;
  208.                  padding:0 15px 10px 15px;
  209.                  color:#999;
  210.             }
  211.             #lista #icons {
  212.                 padding:13px 10px 4px 10px;
  213.                 text-align:center;
  214.                 margin-left:2px;
  215.             }
  216.             #lista #icons img {
  217.                 margin:0 6px 6px 0;
  218.                 width:32px;
  219.                 height:32px;
  220.                 border-radius:2px;
  221.                 display:inline-block;
  222.                 float:left;
  223.                 vertical-align:top;
  224.             }
  225.             #lista #icons img:hover {
  226.                 opacity:0.6;
  227.                 cursor:help;
  228.             }
  229.             #lista #icons img:nth-child(1) {
  230.                 width:69px;
  231.                 height:69px;
  232.             }
  233.             #lista #icons img:nth-child(16) {
  234.                 width:69px;
  235.                 height:69px;
  236.                 margin-bottom:7px;
  237.                 float:right;
  238.             }
  239.             #lista #icons img:nth-child(31) {
  240.                 width:69px;
  241.                 height:69px;
  242.                 margin-bottom:7px;
  243.                 float:left;
  244.             }
  245.            
  246.             .clearfotos {
  247.                 clear:both;
  248.                 height:1px;
  249.                 width:100%;
  250.             }
  251.            
  252.             .clearfix {
  253.                 text-align:center;
  254.             }
  255.             #container {
  256.                 text-align:center;
  257.                 max-width:1130px;
  258.                 margin:50px auto 50px auto;
  259.                 min-height:70vh;
  260.             }
  261.            
  262.             header {
  263.                 top:0;
  264.                 left:0;
  265.                 width:100%;
  266.                 background:#222;
  267.                 padding:0px;
  268.             }
  269.             h1.title {
  270.                 font-family:Playfair Display;
  271.                 margin:0;
  272.                 color:#fff;
  273.                 font-style:italic;
  274.                 font-weight:400;
  275.                 font-size:25px;
  276.                 text-align:center;
  277.                 padding:20px 0 15px 0;
  278.             }
  279.             header p.description {
  280.                 color:#999;
  281.                 max-width:600px;
  282.                 text-align:center;
  283.                 margin:0 auto 25px auto;
  284.                 font-size:14px;
  285.                 font-style:italic;
  286.             }
  287.             header #sort ul {
  288.                 margin:0;
  289.                 text-align:center;
  290.                 border-top:1px solid #303030;
  291.             }
  292.             header #sort ul li {
  293.                 list-style:none;
  294.                 display:inline-block;
  295.                 text-transform:uppercase;
  296.                 font-weight:600;
  297.                 font-size:13px;
  298.             }
  299.             header #sort ul li a {
  300.                 color:#fff;
  301.                 display:inline-block;
  302.                 padding:20px 10px;
  303.                 position:relative;
  304.             }
  305.             header #sort ul li a {
  306.                 outline:none;
  307.             }
  308.             header #sort ul li a:after {
  309.                 content:"";
  310.                 position:absolute;
  311.                 border-radius:100%;
  312.                 background:#c49799;
  313.                 width:7px;
  314.                 height:7px;
  315.                 top:-14px;
  316.                 left:50%;
  317.                 -moz-transform: translateX(-50%);
  318.                 -webkit-transform: translateX(-50%);
  319.                 -o-transform: translateX(-50%);
  320.                 -ms-transform: translateX(-50%);
  321.                 transform: translateX(-50%);
  322.                 opacity:0;
  323.                 -webkit-transition:all 0.3s ease-out;
  324.                 -moz-transition:all 0.3s ease-out;
  325.                 transition:all 0.3s ease-out;
  326.             }
  327.             header #sort ul li:hover a:after {
  328.                 opacity:1;
  329.                 top:-4px;
  330.                 -webkit-transition:all 0.3s ease-out;
  331.                 -moz-transition:all 0.3s ease-out;
  332.                 transition:all 0.3s ease-out;
  333.             }
  334.             header #sort ul li a.selected:after {
  335.                 opacity:1;
  336.                 top:-4px;
  337.             }
  338.             header #sort ul li a.selected {
  339.                 color:#c49799;
  340.             }
  341.             header #sort ul li a:hover {
  342.                 color:#c49799;
  343.             }
  344.            
  345.             footer {
  346.                 background:#222;
  347.                 padding:20px 0;
  348.                 text-align:center;
  349.                 font-weight:600;
  350.                 font-size:13px;
  351.                 letter-spacing:2px;
  352.                 text-transform:uppercase;
  353.                 color:#fff;
  354.             }
  355.             footer a {
  356.                 color:#c49799;
  357.             }
  358.            
  359.             /***
  360.            
  361.                         >> INFORMAÇÕES - INFORMATIONS <<
  362.                        
  363.                >> A COR DE REALCE É #c49799.
  364.                 >> A FONTE DOS TÍTULOS É Playfair Display, E A DO CORPO Open                     Sans
  365.                
  366.                 >> THE ACCENT COLOR IS #c49799.
  367.                 >> FONT TITLE IS Playfair Display, AND BODY FONT IS Open Sans.
  368.                
  369.             **/
  370.            
  371.         </style>
  372.        
  373.     </head>
  374.    
  375.     <body>
  376.    
  377.         <header>
  378.        
  379.             <h1 class="title">
  380.                 General Navigation
  381.             </h1>
  382.             <p class="description">
  383.                 L'avantage de le mettre en latin est que l'opérateur sait au premier coup d'oeil que la page contenant ces lignes n'est pas valide, et surtout l'attention du client n'est pas dérangée par le contenu, il demeure concentré seulement sur l'aspect graphique.
  384.             </p>
  385.             <div id="sort">
  386.                 <ul id="filters" class="option-set clearfix" data-option-key="filter">
  387.                     <li><a href="#filter" class="selected" data-option-filter=".story">All</a></li>
  388.                     <li><a href="#filter" data-option-filter=".romance">Romance</a></li>
  389.                     <li><a href="#filter" data-option-filter=".girls">girls   </a></li>
  390.                     <li><a href="#filter" data-option-filter=".boys">boys</a></li>
  391.                     <li><a href="#filter" data-option-filter=".icons">icons</a></li>
  392.                     <li><a href="#filter" data-option-filter=".links">links</a></li>
  393.                
  394.                 </ul>
  395.             </div>
  396.            
  397.         </header>
  398.    
  399.         <div id="container" class="clearfix">
  400.        
  401.             <div id="lista" class="story about">
  402.                 <div id="lista_info_alt">
  403.                     <img src="http://68.media.tumblr.com/avatar_fc3a55d4458b_128.png" >
  404.                     <h3>Carolaine Vieira</h3>
  405.                     <sub>1999, paulista</sub>
  406.                 </div>
  407.                 <p class="description">
  408.                     <b>L</b>'avantage de le mettre en latin est que l'opérateur sait au premier coup d'oeil que la page contenant <i>ces lignes</i> n'est pas valide, et surtout l'attention du client n'est pas dérangée par le contenu, il demeure concentré seulement sur l'aspect graphique.
  409.                 </p>
  410.             </div>
  411.        
  412.             <div id="lista" class="story romance girls links">
  413.                 <div id="lista_info">
  414.                     <img src="http://68.media.tumblr.com/704d84ca604b118fdac11bea7a2075cb/tumblr_inline_ojojp9exOE1uzqnq1_250.png" >
  415.                     <h3>Très bien</h3>
  416.                     <sub>chic p muah</sub>
  417.                 </div>
  418.                 <ul>
  419.                     <li><a href="#">des premières</a> </li>
  420.                     <li><a href="#">la souffrance pour</a> </li>
  421.                     <li><a href="#">Expert en utilisabilité</a> </li>
  422.                     <li><a href="#">donc l'utilisation</a> </li>
  423.                     <li><a href="#">l'espace nécessaire</a> </li>
  424.                     <li><a href="#">les mots fictifs</a> </li>
  425.                     <li><a href="#">leur travail</a> </li>
  426.                 </ul>
  427.             </div>
  428.            
  429.             <div id="lista" class="story icons girls">
  430.                 <div id="lista_info">
  431.                     <img src="http://static.tumblr.com/wdl6pky/ANboidxjn/hgjhjkhk.png" >
  432.                     <h3>la poesie</h3>
  433.                     <sub>est dan las rues</sub>
  434.                 </div>
  435.                 <div id="icons">
  436.                     <img src="http://static.tumblr.com/wdl6pky/x7Yoidxv7/thfgh.png">
  437.                     <img src="http://static.tumblr.com/wdl6pky/Y4soidxt5/sdgfg.png">
  438.                     <img src="http://static.tumblr.com/wdl6pky/NP5oidy2z/wqre.png">
  439.                     <img src="http://static.tumblr.com/wdl6pky/w0noidxrp/rttf.png">
  440.                     <img src="http://static.tumblr.com/wdl6pky/9ahoidxrr/rttfyh.png">
  441.                     <img src="http://static.tumblr.com/wdl6pky/DpAoidx8y/fgjhgj.png">
  442.                     <img src="http://static.tumblr.com/wdl6pky/Hrcoidwv1/dcfsdfsdf.png">
  443.                     <img src="http://static.tumblr.com/wdl6pky/hb4oidxxm/thytfghn.png">
  444.                     <img src="http://40.media.tumblr.com/c9ed246f8353d2312a6cde9d6277f7f7/tumblr_njhe1zx9Ip1s24di3o2_400.png">
  445.                     <img src="http://static.tumblr.com/wdl6pky/9ahoidxrr/rttfyh.png">
  446.                     <img src="http://static.tumblr.com/wdl6pky/DpAoidx8y/fgjhgj.png">
  447.                     <img src="http://static.tumblr.com/wdl6pky/Hrcoidwv1/dcfsdfsdf.png">
  448.                     <img src="http://static.tumblr.com/wdl6pky/hb4oidxxm/thytfghn.png">
  449.                     <img src="http://40.media.tumblr.com/c9ed246f8353d2312a6cde9d6277f7f7/tumblr_njhe1zx9Ip1s24di3o2_400.png">
  450.                     <img src="http://40.media.tumblr.com/0f49c5cec326a10c23e81ea5abc1d98b/tumblr_njhe1zx9Ip1s24di3o4_400.png">
  451.                     <img src="http://static.tumblr.com/wdl6pky/Ahuoidxt8/sdsfd.png">
  452.                     <img src="http://static.tumblr.com/wdl6pky/Y4soidxt5/sdgfg.png">
  453.                     <img src="http://40.media.tumblr.com/0f49c5cec326a10c23e81ea5abc1d98b/tumblr_njhe1zx9Ip1s24di3o4_400.png">
  454.                     <img src="http://static.tumblr.com/wdl6pky/Ahuoidxt8/sdsfd.png">
  455.                     <img src="http://static.tumblr.com/wdl6pky/Y4soidxt5/sdgfg.png">
  456.                     <img src="http://static.tumblr.com/wdl6pky/x7Yoidxv7/thfgh.png">
  457.                     <img src="http://static.tumblr.com/wdl6pky/Y4soidxt5/sdgfg.png">
  458.                     <img src="http://static.tumblr.com/wdl6pky/NP5oidy2z/wqre.png">
  459.                     <img src="http://static.tumblr.com/wdl6pky/w0noidxrp/rttf.png">
  460.                     <img src="http://static.tumblr.com/wdl6pky/Ahuoidxt8/sdsfd.png">
  461.                     <img src="http://static.tumblr.com/wdl6pky/Y4soidxt5/sdgfg.png">
  462.                     <img src="http://40.media.tumblr.com/0f49c5cec326a10c23e81ea5abc1d98b/tumblr_njhe1zx9Ip1s24di3o4_400.png">
  463.                     <img src="http://static.tumblr.com/wdl6pky/Ahuoidxt8/sdsfd.png">
  464.                     <img src="http://static.tumblr.com/wdl6pky/Y4soidxt5/sdgfg.png">
  465.                     <img src="http://static.tumblr.com/wdl6pky/x7Yoidxv7/thfgh.png">
  466.                     <img src="http://static.tumblr.com/wdl6pky/Y4soidxt5/sdgfg.png">
  467.                     <img src="http://static.tumblr.com/wdl6pky/NP5oidy2z/wqre.png">
  468.                     <img src="http://static.tumblr.com/wdl6pky/w0noidxrp/rttf.png">
  469.                     <img src="http://static.tumblr.com/wdl6pky/Ahuoidxt8/sdsfd.png">
  470.                     <img src="http://static.tumblr.com/wdl6pky/Y4soidxt5/sdgfg.png">
  471.                     <img src="http://static.tumblr.com/wdl6pky/x7Yoidxv7/thfgh.png">
  472.                     <img src="http://static.tumblr.com/wdl6pky/Y4soidxt5/sdgfg.png">
  473.                     <img src="http://static.tumblr.com/wdl6pky/NP5oidy2z/wqre.png">
  474.                     <img src="http://static.tumblr.com/wdl6pky/w0noidxrp/rttf.png">
  475.                     <div class="clearfotos">
  476.                         <!-- don't delete -->
  477.                     </div>
  478.                 </div>
  479.             </div>
  480.        
  481.         </div> <!-- fim de #container -->
  482.        
  483.         <footer>
  484.             <!-- Please don't remove my credit -->
  485.                 &#9825; Page Created by <a href="http://www.ttamplamente.tumblr.com/">Amplamente</a>
  486.             <!-- Please don't remove my credit -->
  487.         </footer>
  488.        
  489.     </body>
  490.    
  491. </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!