Puertofolio

Developer
Dapinitial
Size
6,190 Kb
Views
32,384
  1. Puertofolio Previews
  2. Puertofolio HTML Codes
  3. Puertofolio CSS Codes
  4. Puertofolio JS Codes

How do I make an puertofolio?

What is a puertofolio? How do you make a puertofolio? This script and codes were developed by Dapinitial on 11 August 2022, Thursday.

Puertofolio Previews
IQ Test

Puertofolio - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Puertofolio</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ /* Let's get this party started */
::-webkit-scrollbar { width: 12px;
}
/* Track */
::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.0); -webkit-border-radius: 10px; border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb { -webkit-border-radius: 10px; border-radius: 10px; background: rgba(255,0,0,0.0); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.0);
}
::-webkit-scrollbar-thumb:window-inactive {	background: rgba(255,0,0,0.0);
}
@font-face { font-family: 'bgReg'; src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/136395/brandon_reg-webfont.eot'); src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/136395/brandon_reg-webfont.eot?#iefix') format('embedded-opentype'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/136395/brandon_reg-webfont.woff2') format('woff2'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/136395/brandon_reg-webfont.woff') format('woff'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/136395/brandon_reg-webfont.ttf') format('truetype'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/136395/brandon_reg-webfont.svg#brandon_grotesque_regularRg') format('svg'); font-style: normal; font-weight: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
/** Typography */
h1,
h2,
h3,
h4,
h5,
h6,
.logo,
span,
button,
.select-box,
.accordion,
input { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
@import url('http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700');
* { padding: 0px; margin: 0px; border: 0px; outline: 0px; box-sizing: border-box;
}
html { font-size: 1px; height: 100%; width: 100%;
}
body { font-size: 16rem; font-family: 'Open Sans', sans-serif; line-height: 20px; background: #1C1D1F; color: #f2f2f2;
}
.line:after { content: ""; display: table; clear: both;
}
.unit { display: inline; float: left;
}
p { margin-top: 10px; }
h1 { color: #EA504E; font-family: 'bgReg', sans-serif; font-size: 32rem;
}
#container { position: absolute; width: 100%; height: 100%; -webkit-transform-origin: center -50%; transform-origin: center -50%; -webkit-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out;
}
.loading #container, .zoom #container { -webkit-transform: scale(0.5); transform: scale(0.5);
}
#viewport { overflow: hidden; position: absolute; width: 100%; height: 100%;
}
#menu { position: fixed; z-index: 200; top: 50px; right: 0px;
}
#menu li { list-style: none; border-bottom: 1px solid rgba(0,0,0,0.1);
}
#menu a { text-decoration: none; display: inline-block; padding: 5px 50px 5px 0px; color: #999;
}
#menu .active a { color: #f2f2f2; }
.page { /*box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.1);*/ width: 100%; height: 100%; padding: 50px; position: absolute; overflow-y: scroll; top: -100%; -webkit-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out;
}
#rotator { position: absolute; width: 100%; height: 100%; left: 0px; top: 100%; -webkit-transition: 0.45s ease-in-out; transition: 0.45s ease-in-out;
}
.loading .page { opacity: 0; }
#rotator.r1 { -webkit-transform: rotate(0deg); transform: rotate(0deg);
}
#rotator.r2 { -webkit-transform: rotate(-90deg); transform: rotate(-90deg);
}
#rotator.r3 { -webkit-transform: rotate(-180deg); transform: rotate(-180deg);
}
#rotator.r4 { -webkit-transform: rotate(-270deg); transform: rotate(-270deg);
}
#intro { position: absolute; top: 50%; left: 50%; margin: -100px 0px 0px -100px; -webkit-transition: 0.6s ease-in-out; transition: 0.6s ease-in-out;
}
.works { width: 100%; margin: 10px 0;
}
.works li { background: #252328; border: 1px solid #222; cursor: pointer; width: 31%; min-height: 150px; float: left; display: inline; margin: 0 10px 10px 0;
}
.zoom #intro, .loading #intro {
}
@-webkit-keyframes rotate { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); }
}
@keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }
}
#intro i { font-size: 200px; height: 200px; width: 200px; line-height: 200px; text-align: center;
}
#p2 { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: translate(100%, 0px) rotate(90deg); transform: translate(100%, 0px) rotate(90deg);
}
#p3 { -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-transform: translate(0px, 100%) rotate(180deg); transform: translate(0px, 100%) rotate(180deg);
}
#p4 { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: translate(0px, 100%) rotate(270deg); transform: translate(0px, 100%) rotate(270deg);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <nav id="menu"> <ul> <li class="active"><a href="#p1">Facebook</a></li> <li><a href="#p2">FujiFilm SonoSite</a></li> <li><a href="#p3">Microsoft Xbox</a></li> <li><a href="#p2">Verizon Wireless</a></li> <li><a href="#p1">Sherwin-Williams</a></li> <li><a href="#p3">Dealerskins</a></li> <li><a href="#p4">Pre-2008</a></li> <li class="active"><a href="#pZillow">Zillow #hackHousing</a></li> </ul>
</nav>
<section id="viewport" class="loading"> <div id="container"> <section id="rotator"> <div id="intro"> <!-- something inside for a loader --> </div> <section id="p1" class="page"> <h1 class="line">Puertofolio</h1> <ul class="works line"> <li>&nbsp;</li> <li>&nbsp;</li> <li>&nbsp;</li> <li>&nbsp;</li> <li>&nbsp;</li> <li>&nbsp;</li> </ul> </section> <section id="p2" class="page"> <h1>Approach & Process</h1> <p>Ugh anim cronut, put a bird on it migas dreamcatcher retro paleo letterpress dolor tattooed cillum roof party small batch American Apparel. Biodiesel letterpress gentrify single-origin coffee esse twee forage. Fixie farm-to-table pug, Odd Future reprehenderit direct trade health goth. Mixtape Brooklyn cray, consequat twee salvia slow-carb scenester squid cillum mlkshk sriracha. Dreamcatcher put a bird on it irure ethical hashtag. Excepteur locavore freegan DIY, occupy esse blog. Deep v Etsy put a bird on it enim.</p> </section> <section id="p3" class="page"> <h1 class="line">Experiments</h1> <!--<ul> <li>SpaceCam</li> <li>SpaceCommunicator</li> <li>SpaceDecoder</li> <li>SpaceOut</li> <li>Missed Connections</li> <li>PaceCoach & RunningBuddy</li> </ul>--> <ul class="works line"> <li>&nbsp;</li> <li>&nbsp;</li> <li>&nbsp;</li> <li>&nbsp;</li> <li>&nbsp;</li> <li>&nbsp;</li> </ul> <p>Ut pug mumblecore narwhal. Actually et meh, viral anim keffiyeh blog. Synth sustainable quinoa, Williamsburg Tumblr banh mi aliqua retro Bushwick. Consectetur Helvetica High Life dreamcatcher PBR, farm-to-table sartorial drinking vinegar. Aute retro McSweeney's gastropub cornhole. Normcore deserunt Wes Anderson, pour-over sartorial beard ex Schlitz authentic sint odio. Flannel ullamco actually lo-fi officia.</p> </section> <section id="p4" class="page"> <h1>Contact</h1> <p>Narwhal et kitsch normcore Tumblr High Life, mustache taxidermy nihil occaecat. Marfa authentic cardigan excepteur laborum laboris culpa cold-pressed ex flannel. 90's leggings cliche, hashtag quinoa asymmetrical normcore. Seitan craft beer ullamco, hella irure food truck actually. Meditation Marfa DIY 3 wolf moon, deserunt actually sustainable hoodie deep v Kickstarter brunch irony. Commodo taxidermy fanny pack, four dollar toast eu nesciunt Williamsburg single-origin coffee jean shorts heirloom tempor distillery small batch. Et sartorial mollit, biodiesel kale chips McSweeney's church-key Etsy selvage velit viral nisi pour-over.</p> </section> </section> </div>
</section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Puertofolio - Script Codes CSS Codes

/* Let's get this party started */
::-webkit-scrollbar { width: 12px;
}
/* Track */
::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.0); -webkit-border-radius: 10px; border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb { -webkit-border-radius: 10px; border-radius: 10px; background: rgba(255,0,0,0.0); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.0);
}
::-webkit-scrollbar-thumb:window-inactive {	background: rgba(255,0,0,0.0);
}
@font-face { font-family: 'bgReg'; src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/136395/brandon_reg-webfont.eot'); src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/136395/brandon_reg-webfont.eot?#iefix') format('embedded-opentype'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/136395/brandon_reg-webfont.woff2') format('woff2'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/136395/brandon_reg-webfont.woff') format('woff'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/136395/brandon_reg-webfont.ttf') format('truetype'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/136395/brandon_reg-webfont.svg#brandon_grotesque_regularRg') format('svg'); font-style: normal; font-weight: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
/** Typography */
h1,
h2,
h3,
h4,
h5,
h6,
.logo,
span,
button,
.select-box,
.accordion,
input { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
@import url('http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700');
* { padding: 0px; margin: 0px; border: 0px; outline: 0px; box-sizing: border-box;
}
html { font-size: 1px; height: 100%; width: 100%;
}
body { font-size: 16rem; font-family: 'Open Sans', sans-serif; line-height: 20px; background: #1C1D1F; color: #f2f2f2;
}
.line:after { content: ""; display: table; clear: both;
}
.unit { display: inline; float: left;
}
p { margin-top: 10px; }
h1 { color: #EA504E; font-family: 'bgReg', sans-serif; font-size: 32rem;
}
#container { position: absolute; width: 100%; height: 100%; -webkit-transform-origin: center -50%; transform-origin: center -50%; -webkit-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out;
}
.loading #container, .zoom #container { -webkit-transform: scale(0.5); transform: scale(0.5);
}
#viewport { overflow: hidden; position: absolute; width: 100%; height: 100%;
}
#menu { position: fixed; z-index: 200; top: 50px; right: 0px;
}
#menu li { list-style: none; border-bottom: 1px solid rgba(0,0,0,0.1);
}
#menu a { text-decoration: none; display: inline-block; padding: 5px 50px 5px 0px; color: #999;
}
#menu .active a { color: #f2f2f2; }
.page { /*box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.1);*/ width: 100%; height: 100%; padding: 50px; position: absolute; overflow-y: scroll; top: -100%; -webkit-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out;
}
#rotator { position: absolute; width: 100%; height: 100%; left: 0px; top: 100%; -webkit-transition: 0.45s ease-in-out; transition: 0.45s ease-in-out;
}
.loading .page { opacity: 0; }
#rotator.r1 { -webkit-transform: rotate(0deg); transform: rotate(0deg);
}
#rotator.r2 { -webkit-transform: rotate(-90deg); transform: rotate(-90deg);
}
#rotator.r3 { -webkit-transform: rotate(-180deg); transform: rotate(-180deg);
}
#rotator.r4 { -webkit-transform: rotate(-270deg); transform: rotate(-270deg);
}
#intro { position: absolute; top: 50%; left: 50%; margin: -100px 0px 0px -100px; -webkit-transition: 0.6s ease-in-out; transition: 0.6s ease-in-out;
}
.works { width: 100%; margin: 10px 0;
}
.works li { background: #252328; border: 1px solid #222; cursor: pointer; width: 31%; min-height: 150px; float: left; display: inline; margin: 0 10px 10px 0;
}
.zoom #intro, .loading #intro {
}
@-webkit-keyframes rotate { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); }
}
@keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }
}
#intro i { font-size: 200px; height: 200px; width: 200px; line-height: 200px; text-align: center;
}
#p2 { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: translate(100%, 0px) rotate(90deg); transform: translate(100%, 0px) rotate(90deg);
}
#p3 { -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-transform: translate(0px, 100%) rotate(180deg); transform: translate(0px, 100%) rotate(180deg);
}
#p4 { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: translate(0px, 100%) rotate(270deg); transform: translate(0px, 100%) rotate(270deg);
}

Puertofolio - Script Codes JS Codes

var ww, wh;
function adjustSizes(){	ww = $(window).width();	wh = $(window).height();	if (ww > wh) { $('#rotator').css( { 'width' : wh, 'height' : wh, 'left' : ((ww / 2) - (wh / 2)) } ); } else { $('#rotator').css( { 'width' : ww, 'height' : ww, 'left' : 0 } ); }
}
$(function(){	adjustSizes();	$(window).resize(function(){ adjustSizes(); });	setTimeout(function(){	$('#viewport').removeClass('loading');	}, 1000);	// on click	$('#menu a').click(function(e){	e.preventDefault();	if (!$(this).parents('li').hasClass('active')){	$('#menu li').removeClass('active');	$(this).parents('li').addClass('active');	$('#viewport').addClass('zoom');	mytarget = $(this).attr('href');	myindex = $(mytarget).index('.page') + 1;	$('#rotator').removeClass();	$('#rotator').addClass('r' + myindex);	setTimeout(function(){	$('#viewport').removeClass('zoom'); }, 900);	}	});
});
Puertofolio - Script Codes
Puertofolio - Script Codes
Home Page Home
Developer Dapinitial
Username dapinitial
Uploaded August 11, 2022
Rating 3
Size 6,190 Kb
Views 32,384
Do you need developer help for Puertofolio?

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!

Dapinitial (dapinitial) Script Codes
Name
Clock loader
GPX to JSON
Pick the lock
Sony Xperia Z3 Flat MockUp
Breaking out of overflow hidden
Grid Using Golden Ratio and floats
Base64 encoded animated loading folder gif
A Pen by dapinitial
OK Go WTF Effect
Epic Editor
Create amazing web 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!