A Pen by Thulio Philipe

Developer
Thulio Philipe
Size
3,941 Kb
Views
4,048
  1. A Pen by Thulio Philipe Previews
  2. A Pen by Thulio Philipe HTML Codes
  3. A Pen by Thulio Philipe CSS Codes
  4. A Pen by Thulio Philipe JS Codes

How do I make an a pen by thulio philipe?

What is a a pen by thulio philipe? How do you make a a pen by thulio philipe? This script and codes were developed by Thulio Philipe on 09 January 2023, Monday.

A Pen by Thulio Philipe Previews
IQ Test

A Pen by Thulio Philipe - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Thulio Philipe</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>	<div id="grid-isotope"> <!--inicio grid-isotope-->	<section id="menu-isotope" class="clearfix">	<ul id="filters" class="option-set clearfix" data-option-key="filter">	<li><a href="#filter" data-option-value="*" class="selected">Todos</a></li>	<li><a href="#filter" data-option-value=".vts">VT'S</a></li>	<li><a href="#filter" data-option-value=".facebook">Facebook</a></li>	<li><a href="#filter" data-option-value=".impressos">Impressos</a></li>	<li><a href="#filter" data-option-value=".sites">Sites</a></li>	</ul>	</section>	<div id="container">	<div class="box-isotope element vts">	<img src="http://dummyimage.com/350x280/4d494d/686a82.gif&text=placeholder+image" alt="placeholder+image">	<div class="info-box-isotope">	<span class="mais-info-projeto">	<a href="javascript:;" title="Ver Projeto" class="link-isotope img-ico"></a>	<h2 class="descricao-projeto">Aqui vem a descrição do projeto</h2>	</span>	</div>	</div>	<div class="box-isotope element facebook">	<img src="http://dummyimage.com/350x125/4d494d/686a82.gif&text=placeholder+image" alt="placeholder+image">	<div class="info-box-isotope">	<span class="mais-info-projeto">	<a href="javascript:;" title="Ver Projeto" class="link-isotope link-ico"></a>	<h2 class="descricao-projeto">Aqui vem a descrição do projeto</h2>	</span>	</div>	</div>	<div class="box-isotope element impressos">	<img src="http://dummyimage.com/350x170/4d494d/686a82.gif&text=placeholder+image" alt="placeholder+image">	<div class="info-box-isotope">	<span class="mais-info-projeto">	<a href="javascript:;" title="Ver Projeto" class="link-isotope img-ico"></a>	<h2 class="descricao-projeto">Aqui vem a descrição do projeto</h2>	</span>	</div>	</div>	<div class="box-isotope element sites">	<img src="http://dummyimage.com/350x230/4d494d/686a82.gif&text=placeholder+image" alt="placeholder+image">	<div class="info-box-isotope">	<span class="mais-info-projeto">	<a href="javascript:;" title="Ver Projeto" class="link-isotope link-ico"></a>	<h2 class="descricao-projeto">Aqui vem a descrição do projeto</h2>	</span>	</div>	</div>	<div class="box-isotope element vts">	<img src="http://dummyimage.com/350x280/4d494d/686a82.gif&text=placeholder+image" alt="placeholder+image">	<div class="info-box-isotope">	<span class="mais-info-projeto">	<a href="javascript:;" title="Ver Projeto" class="link-isotope img-ico"></a>	<h2 class="descricao-projeto">Aqui vem a descrição do projeto</h2>	</span>	</div>	</div>	<div class="box-isotope element facebook">	<img src="http://dummyimage.com/350x125/4d494d/686a82.gif&text=placeholder+image" alt="placeholder+image">	<div class="info-box-isotope">	<span class="mais-info-projeto">	<a href="javascript:;" title="Ver Projeto" class="link-isotope link-ico"></a>	<h2 class="descricao-projeto">Aqui vem a descrição do projeto</h2>	</span>	</div>	</div>	<div class="box-isotope element impressos">	<img src="http://dummyimage.com/350x170/4d494d/686a82.gif&text=placeholder+image" alt="placeholder+image">	<div class="info-box-isotope">	<span class="mais-info-projeto">	<a href="javascript:;" title="Ver Projeto" class="link-isotope img-ico"></a>	<h2 class="descricao-projeto">Aqui vem a descrição do projeto</h2>	</span>	</div>	</div>	<div class="box-isotope element sites">	<img src="http://dummyimage.com/350x230/4d494d/686a82.gif&text=placeholder+image" alt="placeholder+image">	<div class="info-box-isotope">	<span class="mais-info-projeto">	<a href="javascript:;" title="Ver Projeto" class="link-isotope link-ico"></a>	<h2 class="descricao-projeto">Aqui vem a descrição do projeto</h2>	</span>	</div>	</div>	<div class="box-isotope element vts">	<img src="http://dummyimage.com/350x280/4d494d/686a82.gif&text=placeholder+image" alt="placeholder+image">	<div class="info-box-isotope">	<span class="mais-info-projeto">	<a href="javascript:;" title="Ver Projeto" class="link-isotope img-ico"></a>	<h2 class="descricao-projeto">Aqui vem a descrição do projeto</h2>	</span>	</div>	</div>	<div class="box-isotope element facebook">	<img src="http://dummyimage.com/350x125/4d494d/686a82.gif&text=placeholder+image" alt="placeholder+image">	<div class="info-box-isotope">	<span class="mais-info-projeto">	<a href="javascript:;" title="Ver Projeto" class="link-isotope link-ico"></a>	<h2 class="descricao-projeto">Aqui vem a descrição do projeto</h2>	</span>	</div>	</div>	<div class="box-isotope element impressos">	<img src="http://dummyimage.com/350x170/4d494d/686a82.gif&text=placeholder+image" alt="placeholder+image">	<div class="info-box-isotope">	<span class="mais-info-projeto">	<a href="javascript:;" title="Ver Projeto" class="link-isotope img-ico"></a>	<h2 class="descricao-projeto">Aqui vem a descrição do projeto</h2>	</span>	</div>	</div>	<div class="box-isotope element sites">	<img src="http://dummyimage.com/350x230/4d494d/686a82.gif&text=placeholder+image" alt="placeholder+image">	<div class="info-box-isotope">	<span class="mais-info-projeto">	<a href="javascript:;" title="Ver Projeto" class="link-isotope link-ico"></a>	<h2 class="descricao-projeto">Aqui vem a descrição do projeto</h2>	</span>	</div>	</div>	</div> <!--fim container-->	</div> <!-- fim grid-isotope --> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://isotope.metafizzy.co/jquery.isotope.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

A Pen by Thulio Philipe - Script Codes CSS Codes

/* ========================================================================== ISOTOPE ========================================================================== */
/**** Isotope Filtering ****/
.isotope-item { z-index: 2;
}
.isotope-hidden.isotope-item { pointer-events: none; z-index: 1;
}
/**** Isotope CSS3 transitions ****/
.isotope,
.isotope .isotope-item { -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -ms-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s;
}
.isotope { -webkit-transition-property: height, width; -moz-transition-property: height, width; -ms-transition-property: height, width; -o-transition-property: height, width; transition-property: height, width;
}
.isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; -ms-transition-property: -ms-transform, opacity; -o-transition-property: -o-transform, opacity; transition-property: transform, opacity;
}
/**** disabling Isotope CSS3 transitions ****/
.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition { -webkit-transition-duration: 0s; -moz-transition-duration: 0s; -ms-transition-duration: 0s; -o-transition-duration: 0s; transition-duration: 0s;
}
.variable-sizes .element.width2 { width: 230px; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
#menu-isotope { padding-bottom: 1.0em;
}
#menu-isotope li { float: left; margin-bottom: 0.2em; list-style-type:none;
}
#menu-isotope li a { display: block; padding: 5px 10px; color: #000; text-decoration: none; font-family: calibri; border-bottom: 0px solid #ecd600;
}
#menu-isotope li a.selected { background-color: #ecd600; text-shadow: none; color: black;
}
.element * { position: absolute; margin: 0;
}
#grid-isotope{ width: 1080px; margin: 10px auto; padding-bottom: 10px;
}
.box-isotope{ overflow: hidden; width: 350px; float: left; margin: 5px;
}
.info-box-isotope{ width: 100%; height: 100%; position: absolute; margin-left: -350px; background: rgba(236,214,0,0); /*opacity: 0;*/ -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease;
}
.box-isotope:hover .info-box-isotope{ margin-left: 0; background: rgba(236,214,0,0.6); /*opacity: 0.6;*/
}
a.link-isotope{ width: 35px; height: 35px; border-radius: 50%; margin-left: -20px; left: 50%; /*background-color: black;*/
}
a.img-ico{ background: url(http://theme-fusion.com/avada/wp-content/themes/Avada/images/finder-ico.png) no-repeat;
}
a.link-ico{ background: url(http://theme-fusion.com/avada/wp-content/themes/Avada/images/link-ico.png) no-repeat;
}
h2.descricao-projeto{ color: #000000; font-family: calibri; font-size: 16px; text-shadow: 1px 1px 1px rgba(0,0,0, 0.2); text-align: center; left: 50%; margin-left: -100px; top: 60%;
}
span.mais-info-projeto{ top: 20%; width: 350px; height: 80px; margin: 0 auto; /*background-color: pink;*/
}
.vts{ /*background-color: green;*/ height: 280px;
}
.facebook{ /*background-color: blue;*/ height: 125px;
}
.impressos{ /*background-color: pink;*/ height: 170px;
}
.sites{ /*background-color: orange;*/ height: 230px;
}

A Pen by Thulio Philipe - Script Codes JS Codes

$(function(){ var $container = $('#container'); // add randomish size classes $container.find('.element').each(function(){ var $this = $(this), number = parseInt( $this.find('.number').text(), 10 ); if ( number % 7 % 2 === 1 ) { $this.addClass('width2'); } if ( number % 3 === 0 ) { $this.addClass('height2'); } }); $container.isotope({ itemSelector : '.element', masonry : { columnWidth : 120 }, masonryHorizontal : { rowHeight: 120 }, cellsByRow : { columnWidth : 240, rowHeight : 240 }, cellsByColumn : { columnWidth : 240, rowHeight : 240 }, getSortData : { symbol : function( $elem ) { return $elem.attr('data-symbol'); }, category : function( $elem ) { return $elem.attr('data-category'); }, number : function( $elem ) { return parseInt( $elem.find('.number').text(), 10 ); }, weight : function( $elem ) { return parseFloat( $elem.find('.weight').text().replace( /[\(\)]/g, '') ); }, name : function ( $elem ) { return $elem.find('.name').text(); } } }); var $optionSets = $('#menu-isotope .option-set'), $optionLinks = $optionSets.find('a'); $optionLinks.click(function(){ var $this = $(this); // don't proceed if already selected if ( $this.hasClass('selected') ) { return false; } var $optionSet = $this.parents('.option-set'); $optionSet.find('.selected').removeClass('selected'); $this.addClass('selected'); // make option object dynamically, i.e. { filter: '.my-filter-class' } var options = {}, key = $optionSet.attr('data-option-key'), value = $this.attr('data-option-value'); // parse 'false' as false boolean value = value === 'false' ? false : value; options[ key ] = value; if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) { // changes in layout modes need extra logic changeLayoutMode( $this, options ) } else { // otherwise, apply new options $container.isotope( options ); } return false; }); // // toggle variable sizes of all elements // $('#toggle-sizes').find('a').click(function(){ // $container // .toggleClass('variable-sizes') // .isotope('reLayout'); // return false; // }); });
A Pen by Thulio Philipe - Script Codes
A Pen by Thulio Philipe - Script Codes
Home Page Home
Developer Thulio Philipe
Username thulioph
Uploaded January 09, 2023
Rating 3.5
Size 3,941 Kb
Views 4,048
Do you need developer help for A Pen by Thulio Philipe?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Thulio Philipe (thulioph) Script Codes
Name
Usando sharre
Animated paths - Google Maps
Select with plugin
Custom Google Maps API
Slideshow only with sass
Api notify
Filter mixitup
Tabs com css
Linear-gradient
Parallax with only CSS3
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!