Portfolio box

Developer
Tom Hermans
Size
7,186 Kb
Views
10,120
  1. Portfolio box Previews
  2. Portfolio box HTML Codes
  3. Portfolio box CSS Codes

How do I make an portfolio box?

Via snappy snippet. What is a portfolio box? How do you make a portfolio box? This script and codes were developed by Tom Hermans on 09 December 2022, Friday.

Portfolio box Previews
IQ Test

Portfolio box - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Portfolio box</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="DIV_1">	<div id="DIV_2">	<div id="DIV_3">	<div id="DIV_4"> <a href="/blog/view/3072/tutorial-reducing-the-file-size-of-custom-web-fonts" id="A_5"><img src="/uploads/crop_image/337/300/20140610173849_Screen Shot 2014-06-10 at 17.36.57.png?x=-117.5&amp;y=21&amp;w=583&amp;o=337?" width="337" height="300" alt="" id="IMG_6" /></a>	</div>	<div id="DIV_7">	<div id="DIV_8">	<div id="DIV_9">	<img src="/uploads/crop_image/50/50/20130718120200_andy.jpg?=undefined&amp;x=-16.265625&amp;y=-11.984375&amp;w=177&amp;o=144" alt="Andy Fitch" width="50" height="50" id="IMG_10" />	</div>	<div id="DIV_11"> <a href="/blog/view/3072/tutorial-reducing-the-file-size-of-custom-web-fonts" id="A_12">Tutorial - Reducing the file size of custom web fonts</a>	</div>	</div>	</div>	<div id="DIV_13">	<time id="TIME_14">	<i id="I_15">Clock</i> 11 Jun, 14	</time> <a href="/blog/view/3072/tutorial-reducing-the-file-size-of-custom-web-fonts#disqus_thread" id="A_16">0</a> <a href="/blog/view/3072/tutorial-reducing-the-file-size-of-custom-web-fonts" id="A_17"><i id="I_18">Comments</i></a>	</div>	</div>	</div>	<div id="DIV_19">	<div id="DIV_20">	<div id="DIV_21"> <a href="/blog/view/3071/introducing-vtop-a-terminal-activity-monitor-in-node-js" id="A_22"><img src="/uploads/crop_image/337/300/20140608210642_placeit.jpg?" width="337" height="300" alt="" id="IMG_23" /></a>	</div>	<div id="DIV_24">	<div id="DIV_25">	<div id="DIV_26">	<img src="/uploads/crop_image/50/50/20130717202839_DSC_6152.jpg?x=-43.921875&amp;y=-0.984375&amp;w=222&amp;o=144" alt="James Hall" width="50" height="50" id="IMG_27" />	</div>	<div id="DIV_28"> <a href="/blog/view/3071/introducing-vtop-a-terminal-activity-monitor-in-node-js" id="A_29">Introducing vtop — A Terminal Activity Monitor in Node.js</a>	</div>	</div>	</div>	<div id="DIV_30">	<time id="TIME_31">	<i id="I_32">Clock</i> 8 Jun, 14	</time> <a href="/blog/view/3071/introducing-vtop-a-terminal-activity-monitor-in-node-js#disqus_thread" id="A_33">0</a> <a href="/blog/view/3071/introducing-vtop-a-terminal-activity-monitor-in-node-js" id="A_34"><i id="I_35">Comments</i></a>	</div>	</div>	</div>	<div id="DIV_36">	<div id="DIV_37">	<div id="DIV_38"> <a href="/blog/view/3069/content-marketing-showcase-part-v" id="A_39"><img src="/uploads/crop_image/337/300/20140604154716_Screen Shot 2014-06-04 at 15.42.00.png?x=-174&amp;y=-34&amp;w=679&amp;o=337?" width="337" height="300" alt="" id="IMG_40" /></a>	</div>	<div id="DIV_41">	<div id="DIV_42">	<div id="DIV_43">	<img src="/uploads/crop_image/50/50/20131119111253_DSC_6915.jpg" alt="Robin Swire" width="50" height="50" id="IMG_44" />	</div>	<div id="DIV_45"> <a href="/blog/view/3069/content-marketing-showcase-part-v" id="A_46">Content Marketing Showcase Part V</a>	</div>	</div>	</div>	<div id="DIV_47">	<time id="TIME_48">	<i id="I_49">Clock</i> 5 Jun, 14	</time> <a href="/blog/view/3069/content-marketing-showcase-part-v#disqus_thread" id="A_50">0</a> <a href="/blog/view/3069/content-marketing-showcase-part-v" id="A_51"><i id="I_52">Comments</i></a>	</div>	</div>	</div>	<div id="DIV_53">	<div id="DIV_54">	<div id="DIV_55"> <a href="/blog/view/3065/digital-marketing-with-vine" id="A_56"><img src="/uploads/crop_image/337/300/20140604124735_534041_509401539106421_814959313_n.png?" width="337" height="300" alt="" id="IMG_57" /></a>	</div>	<div id="DIV_58">	<div id="DIV_59">	<div id="DIV_60">	<img src="/uploads/crop_image/50/50/20140326114056_chris_mills.jpg" alt="Christopher Mills" width="50" height="50" id="IMG_61" />	</div>	<div id="DIV_62"> <a href="/blog/view/3065/digital-marketing-with-vine" id="A_63">Digital Marketing with Vine</a>	</div>	</div>	</div>	<div id="DIV_64">	<time id="TIME_65">	<i id="I_66">Clock</i> 5 Jun, 14	</time> <a href="/blog/view/3065/digital-marketing-with-vine#disqus_thread" id="A_67">0</a> <a href="/blog/view/3065/digital-marketing-with-vine" id="A_68"><i id="I_69">Comments</i></a>	</div>	</div>	</div>	<div id="DIV_70">	<div id="DIV_71">	<div id="DIV_72"> <a href="/blog/view/3068/how-myspace-influenced-modern-social-networking" id="A_73"><img src="/uploads/crop_image/337/300/20140603143231_MySpace (1).jpg?" width="337" height="300" alt="" id="IMG_74" /></a>	</div>	<div id="DIV_75">	<div id="DIV_76">	<div id="DIV_77">	<img src="/uploads/crop_image/50/50/20131119111253_DSC_6915.jpg" alt="Robin Swire" width="50" height="50" id="IMG_78" />	</div>	<div id="DIV_79"> <a href="/blog/view/3068/how-myspace-influenced-modern-social-networking" id="A_80">How Myspace Influenced Modern Social Networking</a>	</div>	</div>	</div>	<div id="DIV_81">	<time id="TIME_82">	<i id="I_83">Clock</i> 3 Jun, 14	</time> <a href="/blog/view/3068/how-myspace-influenced-modern-social-networking#disqus_thread" id="A_84">0</a> <a href="/blog/view/3068/how-myspace-influenced-modern-social-networking" id="A_85"><i id="I_86">Comments</i></a>	</div>	</div>	</div>	<div id="DIV_87">	<div id="DIV_88">	<div id="DIV_89"> <a href="/blog/view/3067/wwdc-2014-roundup" id="A_90"><img src="/uploads/crop_image/337/300/20140603112112_wwdc2014.jpg?" width="337" height="300" alt="" id="IMG_91" /></a>	</div>	<div id="DIV_92">	<div id="DIV_93">	<div id="DIV_94">	<img src="/uploads/crop_image/50/50/20130718120200_andy.jpg?=undefined&amp;x=-16.265625&amp;y=-11.984375&amp;w=177&amp;o=144" alt="Andy Fitch" width="50" height="50" id="IMG_95" />	</div>	<div id="DIV_96"> <a href="/blog/view/3067/wwdc-2014-roundup" id="A_97">WWDC 2014 Roundup</a>	</div>	</div>	</div>	<div id="DIV_98">	<time id="TIME_99">	<i id="I_100">Clock</i> 3 Jun, 14	</time> <a href="/blog/view/3067/wwdc-2014-roundup#disqus_thread" id="A_101">0</a> <a href="/blog/view/3067/wwdc-2014-roundup" id="A_102"><i id="I_103">Comments</i></a>	</div>	</div>	</div>	<div id="DIV_104">	<div id="DIV_105">	<div id="DIV_106"> <a href="/blog/view/3066/our-favourite-collaboration-tools-for-digital-success" id="A_107"><img src="/uploads/crop_image/337/300/20140602153333_screen-comments.jpg?x=-89&amp;y=-197&amp;w=780&amp;o=337?" width="337" height="300" alt="" id="IMG_108" /></a>	</div>	<div id="DIV_109">	<div id="DIV_110">	<div id="DIV_111">	<img src="/uploads/crop_image/50/50/20131119111253_DSC_6915.jpg" alt="Robin Swire" width="50" height="50" id="IMG_112" />	</div>	<div id="DIV_113"> <a href="/blog/view/3066/our-favourite-collaboration-tools-for-digital-success" id="A_114">Our Favourite Collaboration Tools For Digital Success</a>	</div>	</div>	</div>	<div id="DIV_115">	<time id="TIME_116">	<i id="I_117">Clock</i> 2 Jun, 14	</time> <a href="/blog/view/3066/our-favourite-collaboration-tools-for-digital-success#disqus_thread" id="A_118">1</a> <a href="/blog/view/3066/our-favourite-collaboration-tools-for-digital-success" id="A_119"><i id="I_120">Comments</i></a>	</div>	</div>	</div>	<div id="DIV_121">	<div id="DIV_122">	<div id="DIV_123"> <a href="/blog/view/3063/meme-marketing-what-s-it-all-about-" id="A_124"><img src="/uploads/crop_image/337/300/20140530113324_50241978.jpg?x=-34&amp;y=0&amp;w=421&amp;o=337?" width="337" height="300" alt="" id="IMG_125" /></a>	</div>	<div id="DIV_126">	<div id="DIV_127">	<div id="DIV_128">	<img src="/uploads/crop_image/50/50/20140326114056_chris_mills.jpg" alt="Christopher Mills" width="50" height="50" id="IMG_129" />	</div>	<div id="DIV_130"> <a href="/blog/view/3063/meme-marketing-what-s-it-all-about-" id="A_131">Meme Marketing: What's It All About?</a>	</div>	</div>	</div>	<div id="DIV_132">	<time id="TIME_133">	<i id="I_134">Clock</i> 30 May, 14	</time> <a href="/blog/view/3063/meme-marketing-what-s-it-all-about-#disqus_thread" id="A_135">0</a> <a href="/blog/view/3063/meme-marketing-what-s-it-all-about-" id="A_136"><i id="I_137">Comments</i></a>	</div>	</div>	</div>	<div id="DIV_138">	<div id="DIV_139">	<div id="DIV_140"> <a href="/blog/view/3064/-lt-picture-gt-element-now-supported-behind-a-flag-in-chrome-canary-37" id="A_141"><img src="/uploads/crop_image/337/300/20140529122227_ricg.png?x=-7.5&amp;y=0&amp;w=823&amp;o=337?" width="337" height="300" alt="" id="IMG_142" /></a>	</div>	<div id="DIV_143">	<div id="DIV_144">	<div id="DIV_145">	<img src="/uploads/crop_image/50/50/20130718120200_andy.jpg?=undefined&amp;x=-16.265625&amp;y=-11.984375&amp;w=177&amp;o=144" alt="Andy Fitch" width="50" height="50" id="IMG_146" />	</div>	<div id="DIV_147"> <a href="/blog/view/3064/-lt-picture-gt-element-now-supported-behind-a-flag-in-chrome-canary-37" id="A_148">&lt;picture&gt; element now supported (behind a flag) in Chrome Canary 37</a>	</div>	</div>	</div>	<div id="DIV_149">	<time id="TIME_150">	<i id="I_151">Clock</i> 29 May, 14	</time> <a href="/blog/view/3064/-lt-picture-gt-element-now-supported-behind-a-flag-in-chrome-canary-37#disqus_thread" id="A_152">0</a> <a href="/blog/view/3064/-lt-picture-gt-element-now-supported-behind-a-flag-in-chrome-canary-37" id="A_153"><i id="I_154">Comments</i></a>	</div>	</div>	</div>	<div id="DIV_155">	<div id="DIV_156">	<div id="DIV_157"> <a href="/blog/view/3062/parallax-launch-new-website-for-play-for-change-foundation" id="A_158"><img src="/uploads/crop_image/337/300/20140526153858_Screen Shot 2014-05-26 at 15.38.37.png?x=4&amp;y=63&amp;w=326&amp;o=337&amp;alt=Play for Change Launch?" width="337" height="300" alt="Play for Change Launch" id="IMG_159" /></a>	</div>	<div id="DIV_160">	<div id="DIV_161">	<div id="DIV_162">	<img src="/uploads/crop_image/50/50/20130718120200_andy.jpg?=undefined&amp;x=-16.265625&amp;y=-11.984375&amp;w=177&amp;o=144" alt="Andy Fitch" width="50" height="50" id="IMG_163" />	</div>	<div id="DIV_164"> <a href="/blog/view/3062/parallax-launch-new-website-for-play-for-change-foundation" id="A_165">Parallax Launch New Website For Play For Change Foundation</a>	</div>	</div>	</div>	<div id="DIV_166">	<time id="TIME_167">	<i id="I_168">Clock</i> 26 May, 14	</time> <a href="/blog/view/3062/parallax-launch-new-website-for-play-for-change-foundation#disqus_thread" id="A_169">0</a> <a href="/blog/view/3062/parallax-launch-new-website-for-play-for-change-foundation" id="A_170"><i id="I_171">Comments</i></a>	</div>	</div>	</div>	<div id="DIV_172">	<div id="DIV_173">	<div id="DIV_174"> <a href="/blog/view/3061/are-you-getting-the-best-out-of-your-digital-agency-" id="A_175"><img src="/uploads/crop_image/337/300/20140526122456_DSC_5578.jpg?alt=Digital Agency?" width="337" height="300" alt="Digital Agency" id="IMG_176" /></a>	</div>	<div id="DIV_177">	<div id="DIV_178">	<div id="DIV_179">	<img src="/uploads/crop_image/50/50/20131119111253_DSC_6915.jpg" alt="Robin Swire" width="50" height="50" id="IMG_180" />	</div>	<div id="DIV_181"> <a href="/blog/view/3061/are-you-getting-the-best-out-of-your-digital-agency-" id="A_182">Are You Getting The Best Out Of Your Digital Agency?</a>	</div>	</div>	</div>	<div id="DIV_183">	<time id="TIME_184">	<i id="I_185">Clock</i> 26 May, 14	</time> <a href="/blog/view/3061/are-you-getting-the-best-out-of-your-digital-agency-#disqus_thread" id="A_186">0</a> <a href="/blog/view/3061/are-you-getting-the-best-out-of-your-digital-agency-" id="A_187"><i id="I_188">Comments</i></a>	</div>	</div>	</div>	<div id="DIV_189">	<div id="DIV_190">	<div id="DIV_191"> <a href="/blog/view/3059/parallax-launch-new-website-for-leeds-congenital-hearts" id="A_192"><img src="/uploads/crop_image/337/300/20140522122347_placeit (2).png?alt=Leeds Congenital Hearts Launch?" width="337" height="300" alt="Leeds Congenital Hearts Launch" id="IMG_193" /></a>	</div>	<div id="DIV_194">	<div id="DIV_195">	<div id="DIV_196">	<img src="/uploads/crop_image/50/50/20140212154131_IMG_7134.jpg" alt="James Kirkby" width="50" height="50" id="IMG_197" />	</div>	<div id="DIV_198"> <a href="/blog/view/3059/parallax-launch-new-website-for-leeds-congenital-hearts" id="A_199">Parallax Launch New Website For Leeds Congenital Hearts</a>	</div>	</div>	</div>	<div id="DIV_200">	<time id="TIME_201">	<i id="I_202">Clock</i> 22 May, 14	</time> <a href="/blog/view/3059/parallax-launch-new-website-for-leeds-congenital-hearts#disqus_thread" id="A_203">0</a> <a href="/blog/view/3059/parallax-launch-new-website-for-leeds-congenital-hearts" id="A_204"><i id="I_205">Comments</i></a>	</div>	</div>	</div>	<div id="DIV_206">	<div id="DIV_207">	<div id="DIV_208"> <a href="/blog/view/3057/digital-agency-life-the-things-we-couldn-t-live-without" id="A_209"><img src="/uploads/crop_image/337/300/20140521150445_DSC_6370.jpg?alt=Digital Agency Life?" width="337" height="300" alt="Digital Agency Life" id="IMG_210" /></a>	</div>	<div id="DIV_211">	<div id="DIV_212">	<div id="DIV_213">	<img src="/uploads/crop_image/50/50/20130718112947_DSC_6417.jpg?x=-63.21875&amp;y=-4.9375&amp;w=264&amp;o=144" alt="Tom Faller" width="50" height="50" id="IMG_214" />	</div>	<div id="DIV_215"> <a href="/blog/view/3057/digital-agency-life-the-things-we-couldn-t-live-without" id="A_216">Digital Agency Life: The Things We Couldn't Live Without</a>	</div>	</div>	</div>	<div id="DIV_217">	<time id="TIME_218">	<i id="I_219">Clock</i> 21 May, 14	</time> <a href="/blog/view/3057/digital-agency-life-the-things-we-couldn-t-live-without#disqus_thread" id="A_220">0</a> <a href="/blog/view/3057/digital-agency-life-the-things-we-couldn-t-live-without" id="A_221"><i id="I_222">Comments</i></a>	</div>	</div>	</div>	<div id="DIV_223">	<div id="DIV_224">	<div id="DIV_225"> <a href="/blog/view/3058/parallax-s-lawrence-and-james-to-speak-at-internet-world-2014-conference" id="A_226"><img src="/uploads/crop_image/337/300/20140521124832_IMG_8113.jpg?x=-10&amp;y=-57&amp;w=360&amp;o=337?" width="337" height="300" alt="" id="IMG_227" /></a>	</div>	<div id="DIV_228">	<div id="DIV_229">	<div id="DIV_230">	<img src="/uploads/crop_image/50/50/20131119111253_DSC_6915.jpg" alt="Robin Swire" width="50" height="50" id="IMG_231" />	</div>	<div id="DIV_232"> <a href="/blog/view/3058/parallax-s-lawrence-and-james-to-speak-at-internet-world-2014-conference" id="A_233">Parallax's Lawrence and James To Speak At Internet World 2014 Conference</a>	</div>	</div>	</div>	<div id="DIV_234">	<time id="TIME_235">	<i id="I_236">Clock</i> 21 May, 14	</time> <a href="/blog/view/3058/parallax-s-lawrence-and-james-to-speak-at-internet-world-2014-conference#disqus_thread" id="A_237">0</a> <a href="/blog/view/3058/parallax-s-lawrence-and-james-to-speak-at-internet-world-2014-conference" id="A_238"><i id="I_239">Comments</i></a>	</div>	</div>	</div>	<div id="DIV_240">	<div id="DIV_241">	<div id="DIV_242"> <a href="/blog/view/3056/why-i-love-using-expose-our-cms" id="A_243"><img src="/uploads/crop_image/337/300/20140516164410_20140417173742_1 (1) (1).png?x=-9&amp;y=-17&amp;w=927&amp;o=337?" width="337" height="300" alt="" id="IMG_244" /></a>	</div>	<div id="DIV_245">	<div id="DIV_246">	<div id="DIV_247">	<img src="/uploads/crop_image/50/50/20131119111253_DSC_6915.jpg" alt="Robin Swire" width="50" height="50" id="IMG_248" />	</div>	<div id="DIV_249"> <a href="/blog/view/3056/why-i-love-using-expose-our-cms" id="A_250">Why I Love Using Expose - Our CMS</a>	</div>	</div>	</div>	<div id="DIV_251">	<time id="TIME_252">	<i id="I_253">Clock</i> 16 May, 14	</time> <a href="/blog/view/3056/why-i-love-using-expose-our-cms#disqus_thread" id="A_254">0</a> <a href="/blog/view/3056/why-i-love-using-expose-our-cms" id="A_255"><i id="I_256">Comments</i></a>	</div>	</div>	</div>	<div id="DIV_257">	<div id="DIV_258">	<div id="DIV_259"> <a href="/blog/view/3055/adwords-scripts-for-my-client-center" id="A_260"><img src="/uploads/crop_image/337/300/20140515160341_IrP5mot.png?x=24.5&amp;y=6&amp;w=293&amp;o=337&amp;alt=Adwords Scripts for MCC?" width="337" height="300" alt="Adwords Scripts for MCC" id="IMG_261" /></a>	</div>	<div id="DIV_262">	<div id="DIV_263">	<div id="DIV_264">	<img src="/uploads/crop_image/50/50/20140326114056_chris_mills.jpg" alt="Christopher Mills" width="50" height="50" id="IMG_265" />	</div>	<div id="DIV_266"> <a href="/blog/view/3055/adwords-scripts-for-my-client-center" id="A_267">Adwords Scripts for My Client Center</a>	</div>	</div>	</div>	<div id="DIV_268">	<time id="TIME_269">	<i id="I_270">Clock</i> 14 May, 14	</time> <a href="/blog/view/3055/adwords-scripts-for-my-client-center#disqus_thread" id="A_271">0</a> <a href="/blog/view/3055/adwords-scripts-for-my-client-center" id="A_272"><i id="I_273">Comments</i></a>	</div>	</div>	</div>	<div id="DIV_274">	<div id="DIV_275">	<div id="DIV_276"> <a href="/blog/view/3054/the-importance-of-responsive-ecommerce-websites" id="A_277"><img src="/uploads/crop_image/337/300/20140509124252_Screen Shot 2014-05-09 at 12.17.53.png?x=-99&amp;y=-48&amp;w=594&amp;o=337?" width="337" height="300" alt="" id="IMG_278" /></a>	</div>	<div id="DIV_279">	<div id="DIV_280">	<div id="DIV_281">	<img src="/uploads/crop_image/50/50/20130717203205_DSC_6114.jpg?x=-41.171875&amp;y=-0.9375&amp;w=237&amp;o=144" alt="Jack Sails" width="50" height="50" id="IMG_282" />	</div>	<div id="DIV_283"> <a href="/blog/view/3054/the-importance-of-responsive-ecommerce-websites" id="A_284">The Importance Of Responsive Ecommerce Websites</a>	</div>	</div>	</div>	<div id="DIV_285">	<time id="TIME_286">	<i id="I_287">Clock</i> 9 May, 14	</time> <a href="/blog/view/3054/the-importance-of-responsive-ecommerce-websites#disqus_thread" id="A_288">0</a> <a href="/blog/view/3054/the-importance-of-responsive-ecommerce-websites" id="A_289"><i id="I_290">Comments</i></a>	</div>	</div>	</div>	<div id="DIV_291">	<div id="DIV_292">	<div id="DIV_293"> <a href="/blog/view/3052/the-evolution-of-digital-media-over-the-past-20-years" id="A_294"><img src="/uploads/crop_image/337/300/20140507120551_5620336391_e70accb97d_b.jpg?x=-61&amp;y=-19&amp;w=496&amp;o=337?" width="337" height="300" alt="" id="IMG_295" /></a>	</div>	<div id="DIV_296">	<div id="DIV_297">	<div id="DIV_298">	<img src="/uploads/crop_image/50/50/20131119111253_DSC_6915.jpg" alt="Robin Swire" width="50" height="50" id="IMG_299" />	</div>	<div id="DIV_300"> <a href="/blog/view/3052/the-evolution-of-digital-media-over-the-past-20-years" id="A_301">The Evolution Of Digital Media Over The Past 20 Years</a>	</div>	</div>	</div>	<div id="DIV_302">	<time id="TIME_303">	<i id="I_304">Clock</i> 7 May, 14	</time> <a href="/blog/view/3052/the-evolution-of-digital-media-over-the-past-20-years#disqus_thread" id="A_305">0</a> <a href="/blog/view/3052/the-evolution-of-digital-media-over-the-past-20-years" id="A_306"><i id="I_307">Comments</i></a>	</div>	</div>	</div>
</div>
</body>
</html>

Portfolio box - Script Codes CSS Codes

#DIV_1 { box-sizing: border-box; color: rgb(102, 102, 102); height: 2634px; position: relative; text-decoration: none solid rgb(102, 102, 102); width: 1041px; border: 0px none rgb(102, 102, 102); font: normal normal normal 15px/22.5px aktiv-grotesk-std, Helvetica, Arial; list-style: none outside none; margin: 0px 192px; outline: rgb(102, 102, 102) none 0px; overflow: hidden; transition: height 0.8s ease 0s, width 0.8s ease 0s;
}/*#DIV_1*/
#DIV_2, #DIV_19, #DIV_36, #DIV_53, #DIV_70, #DIV_87, #DIV_104, #DIV_121, #DIV_138, #DIV_155, #DIV_172, #DIV_189, #DIV_206, #DIV_223, #DIV_240, #DIV_257, #DIV_274, #DIV_291 { box-sizing: border-box; color: rgb(102, 102, 102); height: 419px; left: 0px; position: absolute; text-decoration: none solid rgb(102, 102, 102); top: 0px; vertical-align: top; width: 337px; z-index: 2; border: 0px none rgb(102, 102, 102); font: normal normal normal 15px/22.5px aktiv-grotesk-std, Helvetica, Arial; list-style: none outside none; margin: 0px 5px 20px; outline: rgb(102, 102, 102) none 0px; transition: right 0.8s ease 0s, top 0.8s ease 0s, -webkit-transform 0.8s ease 0s, opacity 0.8s ease 0s;
}/*#DIV_2, #DIV_19, #DIV_36, #DIV_53, #DIV_70, #DIV_87, #DIV_104, #DIV_121, #DIV_138, #DIV_155, #DIV_172, #DIV_189, #DIV_206, #DIV_223, #DIV_240, #DIV_257, #DIV_274, #DIV_291*/
#DIV_3, #DIV_20, #DIV_37, #DIV_54, #DIV_71, #DIV_88, #DIV_105, #DIV_122, #DIV_139, #DIV_156, #DIV_173, #DIV_190, #DIV_207, #DIV_224, #DIV_241, #DIV_258, #DIV_275, #DIV_292 { box-shadow: rgba(0, 0, 0, 0.0980392) 0px 2px 2px 0px; box-sizing: border-box; color: rgb(102, 102, 102); height: 419px; text-decoration: none solid rgb(102, 102, 102); width: 337px; background: rgb(255, 255, 255) none repeat scroll 0% 0% / auto padding-box border-box; border: 0px none rgb(102, 102, 102); font: normal normal normal 15px/22.5px aktiv-grotesk-std, Helvetica, Arial; list-style: none outside none; outline: rgb(102, 102, 102) none 0px;
}/*#DIV_3, #DIV_20, #DIV_37, #DIV_54, #DIV_71, #DIV_88, #DIV_105, #DIV_122, #DIV_139, #DIV_156, #DIV_173, #DIV_190, #DIV_207, #DIV_224, #DIV_241, #DIV_258, #DIV_275, #DIV_292*/
#DIV_4, #DIV_21, #DIV_38, #DIV_55, #DIV_72, #DIV_89, #DIV_106, #DIV_123, #DIV_140, #DIV_157, #DIV_174, #DIV_191, #DIV_208, #DIV_225, #DIV_242, #DIV_259, #DIV_276, #DIV_293 { box-sizing: border-box; color: rgb(102, 102, 102); height: 300px; position: relative; text-decoration: none solid rgb(102, 102, 102); width: 337px; border: 0px none rgb(102, 102, 102); font: normal normal normal 15px/22.5px aktiv-grotesk-std, Helvetica, Arial; list-style: none outside none; outline: rgb(102, 102, 102) none 0px;
}/*#DIV_4, #DIV_21, #DIV_38, #DIV_55, #DIV_72, #DIV_89, #DIV_106, #DIV_123, #DIV_140, #DIV_157, #DIV_174, #DIV_191, #DIV_208, #DIV_225, #DIV_242, #DIV_259, #DIV_276, #DIV_293*/
#A_5, #A_22, #A_39, #A_56, #A_73, #A_90, #A_107, #A_124, #A_141, #A_158, #A_175, #A_192, #A_209, #A_226, #A_243, #A_260, #A_277, #A_294 { box-sizing: border-box; color: rgb(102, 102, 102); text-decoration: underline solid rgb(102, 102, 102); border: 0px none rgb(102, 102, 102); font: normal normal normal 15px/22.5px aktiv-grotesk-std, Helvetica, Arial; list-style: none outside none; outline: rgb(102, 102, 102) none 0px;
}/*#A_5, #A_22, #A_39, #A_56, #A_73, #A_90, #A_107, #A_124, #A_141, #A_158, #A_175, #A_192, #A_209, #A_226, #A_243, #A_260, #A_277, #A_294*/
#A_5:before, #A_22:before, #A_39:before, #A_56:before, #A_73:before, #A_90:before, #A_107:before, #A_124:before, #A_141:before, #A_158:before, #A_175:before, #A_192:before, #A_209:before, #A_226:before, #A_243:before, #A_260:before, #A_277:before, #A_294:before { box-sizing: border-box; color: rgb(102, 102, 102); display: block; height: 300px; opacity: 0; position: absolute; text-decoration: none solid rgb(102, 102, 102); top: 0px; width: 337px; z-index: 1; content: ''; background: rgba(0, 0, 0, 0.298039) none repeat scroll 0% 0% / auto padding-box border-box; border: 0px none rgb(102, 102, 102); font: normal normal normal 15px/22.5px aktiv-grotesk-std, Helvetica, Arial; list-style: none outside none; outline: rgb(102, 102, 102) none 0px; transition: opacity 0.5s ease 0s;
}/*#A_5:before, #A_22:before, #A_39:before, #A_56:before, #A_73:before, #A_90:before, #A_107:before, #A_124:before, #A_141:before, #A_158:before, #A_175:before, #A_192:before, #A_209:before, #A_226:before, #A_243:before, #A_260:before, #A_277:before, #A_294:before*/
#IMG_6, #IMG_23, #IMG_40, #IMG_57, #IMG_74, #IMG_91, #IMG_108, #IMG_125, #IMG_142, #IMG_159, #IMG_176, #IMG_193, #IMG_210, #IMG_227, #IMG_244, #IMG_261, #IMG_278, #IMG_295 { box-sizing: border-box; color: rgb(102, 102, 102); display: block; height: 300px; text-decoration: none solid rgb(102, 102, 102); width: 337px; border: 0px none rgb(102, 102, 102); font: italic normal normal 15px/22.5px aktiv-grotesk-std, Helvetica, Arial; list-style: none outside none; outline: rgb(102, 102, 102) none 0px;
}/*#IMG_6, #IMG_23, #IMG_40, #IMG_57, #IMG_74, #IMG_91, #IMG_108, #IMG_125, #IMG_142, #IMG_159, #IMG_176, #IMG_193, #IMG_210, #IMG_227, #IMG_244, #IMG_261, #IMG_278, #IMG_295*/
#DIV_7, #DIV_24, #DIV_41, #DIV_58, #DIV_75, #DIV_92, #DIV_109, #DIV_126, #DIV_143, #DIV_160, #DIV_177, #DIV_194, #DIV_211, #DIV_228, #DIV_245, #DIV_262, #DIV_279, #DIV_296 { box-sizing: border-box; color: rgb(102, 102, 102); height: 77px; min-height: 70px; text-decoration: none solid rgb(102, 102, 102); width: 337px; border-top: 0px none rgb(102, 102, 102); border-right: 0px none rgb(102, 102, 102); border-bottom: 1px solid rgb(238, 238, 238); border-left: 0px none rgb(102, 102, 102); font: normal normal normal 15px/22.5px aktiv-grotesk-std, Helvetica, Arial; list-style: none outside none; outline: rgb(102, 102, 102) none 0px; padding: 10px;
}/*#DIV_7, #DIV_24, #DIV_41, #DIV_58, #DIV_75, #DIV_92, #DIV_109, #DIV_126, #DIV_143, #DIV_160, #DIV_177, #DIV_194, #DIV_211, #DIV_228, #DIV_245, #DIV_262, #DIV_279, #DIV_296*/
#DIV_8, #DIV_25, #DIV_42, #DIV_59, #DIV_76, #DIV_93, #DIV_110, #DIV_127, #DIV_144, #DIV_161, #DIV_178, #DIV_195, #DIV_212, #DIV_229, #DIV_246, #DIV_263, #DIV_280, #DIV_297 { box-sizing: border-box; color: rgb(102, 102, 102); display: table; height: 56px; text-decoration: none solid rgb(102, 102, 102); width: 317px; border: 0px none rgb(102, 102, 102); font: normal normal normal 15px/22.5px aktiv-grotesk-std, Helvetica, Arial; list-style: none outside none; outline: rgb(102, 102, 102) none 0px;
}/*#DIV_8, #DIV_25, #DIV_42, #DIV_59, #DIV_76, #DIV_93, #DIV_110, #DIV_127, #DIV_144, #DIV_161, #DIV_178, #DIV_195, #DIV_212, #DIV_229, #DIV_246, #DIV_263, #DIV_280, #DIV_297*/
#DIV_9, #DIV_26, #DIV_43, #DIV_60, #DIV_77, #DIV_94, #DIV_111, #DIV_128, #DIV_145, #DIV_162, #DIV_179, #DIV_196, #DIV_213, #DIV_230, #DIV_247, #DIV_264, #DIV_281, #DIV_298 { box-sizing: border-box; color: rgb(102, 102, 102); height: 56px; text-decoration: none solid rgb(102, 102, 102); width: 50px; border: 0px none rgb(102, 102, 102); font: normal normal normal 15px/22.5px aktiv-grotesk-std, Helvetica, Arial; list-style: none outside none; outline: rgb(102, 102, 102) none 0px;
}/*#DIV_9, #DIV_26, #DIV_43, #DIV_60, #DIV_77, #DIV_94, #DIV_111, #DIV_128, #DIV_145, #DIV_162, #DIV_179, #DIV_196, #DIV_213, #DIV_230, #DIV_247, #DIV_264, #DIV_281, #DIV_298*/
#IMG_10, #IMG_27, #IMG_44, #IMG_61, #IMG_78, #IMG_95, #IMG_112, #IMG_129, #IMG_146, #IMG_163, #IMG_180, #IMG_197, #IMG_214, #IMG_231, #IMG_248, #IMG_265, #IMG_282, #IMG_299 { box-sizing: border-box; color: rgb(102, 102, 102); height: 50px; text-decoration: none solid rgb(102, 102, 102); width: 50px; border: 0px none rgb(102, 102, 102); border-radius: 50% 50% 50% 50%; font: italic normal normal 15px/22.5px aktiv-grotesk-std, Helvetica, Arial; list-style: none outside none; outline: rgb(102, 102, 102) none 0px;
}/*#IMG_10, #IMG_27, #IMG_44, #IMG_61, #IMG_78, #IMG_95, #IMG_112, #IMG_129, #IMG_146, #IMG_163, #IMG_180, #IMG_197, #IMG_214, #IMG_231, #IMG_248, #IMG_265, #IMG_282, #IMG_299*/
#DIV_11, #DIV_28, #DIV_45, #DIV_62, #DIV_79, #DIV_96, #DIV_113, #DIV_130, #DIV_147, #DIV_164, #DIV_181, #DIV_198, #DIV_215, #DIV_232, #DIV_249, #DIV_266, #DIV_283, #DIV_300 { box-sizing: border-box; color: rgb(102, 102, 102); display: table-cell; height: 56px; text-decoration: none solid rgb(102, 102, 102); vertical-align: middle; width: 267px; border: 0px none rgb(102, 102, 102); font: normal normal normal 15px/22.5px aktiv-grotesk-std, Helvetica, Arial; list-style: none outside none; outline: rgb(102, 102, 102) none 0px; padding: 0px 0px 0px 10px;
}/*#DIV_11, #DIV_28, #DIV_45, #DIV_62, #DIV_79, #DIV_96, #DIV_113, #DIV_130, #DIV_147, #DIV_164, #DIV_181, #DIV_198, #DIV_215, #DIV_232, #DIV_249, #DIV_266, #DIV_283, #DIV_300*/
#A_12, #A_29, #A_80, #A_114, #A_131, #A_148, #A_165, #A_182, #A_199, #A_216, #A_267, #A_284, #A_301 { box-sizing: border-box; color: rgb(102, 102, 102); display: inline-block; height: 38px; max-height: 41px; text-decoration: none solid rgb(102, 102, 102); text-overflow: ellipsis; width: 257px; border: 0px none rgb(102, 102, 102); font: normal normal 500 15px/19px aktiv-grotesk-std, Helvetica, Arial; list-style: none outside none; outline: rgb(102, 102, 102) none 0px; overflow: hidden; transition: color 0.3s ease 0s;
}/*#A_12, #A_29, #A_80, #A_114, #A_131, #A_148, #A_165, #A_182, #A_199, #A_216, #A_267, #A_284, #A_301*/
#DIV_13, #DIV_30, #DIV_47, #DIV_64, #DIV_81, #DIV_98, #DIV_115, #DIV_132, #DIV_149, #DIV_166, #DIV_183, #DIV_200, #DIV_217, #DIV_234, #DIV_251, #DIV_268, #DIV_285, #DIV_302 { box-sizing: border-box; color: rgb(102, 102, 102); height: 42px; text-decoration: none solid rgb(102, 102, 102); width: 337px; border: 0px none rgb(102, 102, 102); font: normal normal normal 15px/22.5px aktiv-grotesk-std, Helvetica, Arial; list-style: none outside none; outline: rgb(102, 102, 102) none 0px; padding: 10px;
}/*#DIV_13, #DIV_30, #DIV_47, #DIV_64, #DIV_81, #DIV_98, #DIV_115, #DIV_132, #DIV_149, #DIV_166, #DIV_183, #DIV_200, #DIV_217, #DIV_234, #DIV_251, #DIV_268, #DIV_285, #DIV_302*/
#TIME_14, #TIME_31, #TIME_48, #TIME_65, #TIME_82, #TIME_99, #TIME_116, #TIME_133, #TIME_150, #TIME_167, #TIME_184, #TIME_201, #TIME_218, #TIME_235, #TIME_252, #TIME_269, #TIME_286, #TIME_303 { box-sizing: border-box; color: rgb(102, 102, 102); text-decoration: none solid rgb(102, 102, 102); border: 0px none rgb(102, 102, 102); font: normal normal normal 12px/18px aktiv-grotesk-std, Helvetica, Arial; list-style: none outside none; outline: rgb(102, 102, 102) none 0px;
}/*#TIME_14, #TIME_31, #TIME_48, #TIME_65, #TIME_82, #TIME_99, #TIME_116, #TIME_133, #TIME_150, #TIME_167, #TIME_184, #TIME_201, #TIME_218, #TIME_235, #TIME_252, #TIME_269, #TIME_286, #TIME_303*/
#I_15, #I_32, #I_49, #I_66, #I_83, #I_100, #I_117, #I_134, #I_151, #I_168, #I_185, #I_202, #I_219, #I_236, #I_253, #I_270, #I_287, #I_304 { background-position: 0px 0px; box-sizing: border-box; color: rgb(119, 119, 119); display: inline-block; height: 19px; position: relative; text-align: center; text-decoration: none solid rgb(119, 119, 119); vertical-align: middle; width: 19px; background: rgba(0, 0, 0, 0) url(http://parall.ax/parallax/img/sprite.png) repeat scroll 0px 0px / auto padding-box border-box; border: 0px none rgb(119, 119, 119); font: normal normal normal 14px/14px Menlo, Monaco, monospace; list-style: none outside none; margin: 0px 5px 0px 0px; outline: rgb(119, 119, 119) none 0px; overflow: hidden; padding: 0px 5px;
}/*#I_15, #I_32, #I_49, #I_66, #I_83, #I_100, #I_117, #I_134, #I_151, #I_168, #I_185, #I_202, #I_219, #I_236, #I_253, #I_270, #I_287, #I_304*/
#I_15:before, #I_32:before, #I_49:before, #I_66:before, #I_83:before, #I_100:before, #I_117:before, #I_134:before, #I_151:before, #I_168:before, #I_185:before, #I_202:before, #I_219:before, #I_236:before, #I_253:before, #I_270:before, #I_287:before, #I_304:before { box-sizing: border-box; color: rgb(119, 119, 119); display: block; height: 19px; text-align: center; text-decoration: none solid rgb(119, 119, 119); width: 0px; content: ''; border: 0px none rgb(119, 119, 119); font: normal normal normal 14px/14px Menlo, Monaco, monospace; list-style: none outside none; outline: rgb(119, 119, 119) none 0px;
}/*#I_15:before, #I_32:before, #I_49:before, #I_66:before, #I_83:before, #I_100:before, #I_117:before, #I_134:before, #I_151:before, #I_168:before, #I_185:before, #I_202:before, #I_219:before, #I_236:before, #I_253:before, #I_270:before, #I_287:before, #I_304:before*/
#A_16, #A_33, #A_50, #A_67, #A_84, #A_101, #A_118, #A_135, #A_152, #A_169, #A_186, #A_203, #A_220, #A_237, #A_254, #A_271, #A_288, #A_305 { box-sizing: border-box; color: rgb(102, 102, 102); display: block; float: right; height: 18px; text-decoration: none solid rgb(102, 102, 102); width: 7px; border: 0px none rgb(102, 102, 102); font: normal normal normal 12px/18px aktiv-grotesk-std, Helvetica, Arial; list-style: none outside none; margin: 2.5px 0px 0px; outline: rgb(102, 102, 102) none 0px;
}/*#A_16, #A_33, #A_50, #A_67, #A_84, #A_101, #A_118, #A_135, #A_152, #A_169, #A_186, #A_203, #A_220, #A_237, #A_254, #A_271, #A_288, #A_305*/
#A_17, #A_34, #A_51, #A_68, #A_85, #A_102, #A_119, #A_136, #A_153, #A_170, #A_187, #A_204, #A_221, #A_238, #A_255, #A_272, #A_289, #A_306 { box-sizing: border-box; color: rgb(102, 102, 102); display: block; float: right; height: 19px; text-decoration: none solid rgb(102, 102, 102); width: 17px; border: 0px none rgb(102, 102, 102); font: normal normal normal 12px/18px aktiv-grotesk-std, Helvetica, Arial; list-style: none outside none; margin: 2.5px 5px 0px 0px; outline: rgb(102, 102, 102) none 0px;
}/*#A_17, #A_34, #A_51, #A_68, #A_85, #A_102, #A_119, #A_136, #A_153, #A_170, #A_187, #A_204, #A_221, #A_238, #A_255, #A_272, #A_289, #A_306*/
#I_18, #I_35, #I_52, #I_69, #I_103, #I_137, #I_171, #I_205, #I_239, #I_256, #I_290 { background-position: -19px 0px; box-sizing: border-box; color: rgb(119, 119, 119); display: inline-block; height: 19px; position: relative; text-align: center; text-decoration: none solid rgb(119, 119, 119); vertical-align: middle; width: 17px; background: rgba(0, 0, 0, 0) url(http://parall.ax/parallax/img/sprite.png) repeat scroll -19px 0px / auto padding-box border-box; border: 0px none rgb(119, 119, 119); font: normal normal normal 14px/14px Menlo, Monaco, monospace; list-style: none outside none; outline: rgb(119, 119, 119) none 0px; overflow: hidden; padding: 0px 5px;
}/*#I_18, #I_35, #I_52, #I_69, #I_103, #I_137, #I_171, #I_205, #I_239, #I_256, #I_290*/
#I_18:before, #I_35:before, #I_52:before, #I_69:before, #I_103:before, #I_137:before, #I_171:before, #I_205:before, #I_239:before, #I_256:before, #I_290:before { box-sizing: border-box; color: rgb(119, 119, 119); display: block; height: 19px; text-align: center; text-decoration: none solid rgb(119, 119, 119); width: 0px; content: ''; border: 0px none rgb(119, 119, 119); font: normal normal normal 14px/14px Menlo, Monaco, monospace; list-style: none outside none; outline: rgb(119, 119, 119) none 0px;
}/*#I_18:before, #I_35:before, #I_52:before, #I_69:before, #I_103:before, #I_137:before, #I_171:before, #I_205:before, #I_239:before, #I_256:before, #I_290:before*/
#A_46, #A_250 { box-sizing: border-box; color: rgb(102, 102, 102); display: inline-block; height: 19px; max-height: 41px; text-decoration: none solid rgb(102, 102, 102); text-overflow: ellipsis; width: 250px; border: 0px none rgb(102, 102, 102); font: normal normal 500 15px/19px aktiv-grotesk-std, Helvetica, Arial; list-style: none outside none; outline: rgb(102, 102, 102) none 0px; overflow: hidden; transition: color 0.3s ease 0s;
}/*#A_46, #A_250*/
#A_63 { box-sizing: border-box; color: rgb(102, 102, 102); display: inline-block; height: 19px; max-height: 41px; text-decoration: none solid rgb(102, 102, 102); text-overflow: ellipsis; width: 186px; border: 0px none rgb(102, 102, 102); font: normal normal 500 15px/19px aktiv-grotesk-std, Helvetica, Arial; list-style: none outside none; outline: rgb(102, 102, 102) none 0px; overflow: hidden; transition: color 0.3s ease 0s;
}/*#A_63*/
#I_86, #I_120, #I_188, #I_273 { background-position: -19px 0px; box-sizing: border-box; color: rgb(119, 119, 119); display: inline-block; height: 19px; position: relative; text-align: center; text-decoration: none solid rgb(119, 119, 119); vertical-align: middle; width: 17px; background: rgba(0, 0, 0, 0) url(http://parall.ax/parallax/img/sprite.png) repeat scroll -19px 0px / auto padding-box border-box; border: 0px none rgb(119, 119, 119); font: normal normal normal 14px/14px Menlo, Monaco, monospace; list-style: none outside none; outline: rgb(119, 119, 119) none 0px; overflow: hidden; padding: 0px 5px;
}/*#I_86, #I_120, #I_188, #I_273*/
#I_86:before, #I_120:before, #I_188:before, #I_273:before { box-sizing: border-box; color: rgb(119, 119, 119); display: block; height: 19px; text-align: center; text-decoration: none solid rgb(119, 119, 119); width: 0px; content: ''; border: 0px none rgb(119, 119, 119); font: normal normal normal 14px/14px Menlo, Monaco, monospace; list-style: none outside none; outline: rgb(119, 119, 119) none 0px;
}/*#I_86:before, #I_120:before, #I_188:before, #I_273:before*/
#A_97 { box-sizing: border-box; color: rgb(102, 102, 102); display: inline-block; height: 19px; max-height: 41px; text-decoration: none solid rgb(102, 102, 102); text-overflow: ellipsis; width: 156px; border: 0px none rgb(102, 102, 102); font: normal normal 500 15px/19px aktiv-grotesk-std, Helvetica, Arial; list-style: none outside none; outline: rgb(102, 102, 102) none 0px; overflow: hidden; transition: color 0.3s ease 0s;
}/*#A_97*/
#I_154, #I_222, #I_307 { background-position: -19px 0px; box-sizing: border-box; color: rgb(119, 119, 119); display: inline-block; height: 19px; position: relative; text-align: center; text-decoration: none solid rgb(119, 119, 119); vertical-align: middle; width: 17px; background: rgba(0, 0, 0, 0) url(http://parall.ax/parallax/img/sprite.png) repeat scroll -19px 0px / auto padding-box border-box; border: 0px none rgb(119, 119, 119); font: normal normal normal 14px/14px Menlo, Monaco, monospace; list-style: none outside none; outline: rgb(119, 119, 119) none 0px; overflow: hidden; padding: 0px 5px;
}/*#I_154, #I_222, #I_307*/
#I_154:before, #I_222:before, #I_307:before { box-sizing: border-box; color: rgb(119, 119, 119); display: block; height: 19px; text-align: center; text-decoration: none solid rgb(119, 119, 119); width: 0px; content: ''; border: 0px none rgb(119, 119, 119); font: normal normal normal 14px/14px Menlo, Monaco, monospace; list-style: none outside none; outline: rgb(119, 119, 119) none 0px;
}/*#I_154:before, #I_222:before, #I_307:before*/
#A_233 { box-sizing: border-box; color: rgb(102, 102, 102); display: inline-block; height: 41px; max-height: 41px; text-decoration: none solid rgb(102, 102, 102); text-overflow: ellipsis; width: 257px; border: 0px none rgb(102, 102, 102); font: normal normal 500 15px/19px aktiv-grotesk-std, Helvetica, Arial; list-style: none outside none; outline: rgb(102, 102, 102) none 0px; overflow: hidden; transition: color 0.3s ease 0s;
}/*#A_233*/
Portfolio box - Script Codes
Portfolio box - Script Codes
Home Page Home
Developer Tom Hermans
Username tomhermans
Uploaded December 09, 2022
Rating 3
Size 7,186 Kb
Views 10,120
Do you need developer help for Portfolio box?

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!

Tom Hermans (tomhermans) Script Codes
Name
Bulleted list with font-icon snippet
Styled selectbox
Tryout
Snappy snippet try
Responsive Form
StickyNav
Simple color ribbon
Sticky Navigation
Imagemap pure css trial
CKEditor angular test
Create amazing SEO content 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!