Portfolio Base

Developer
Calvin
Size
3,869 Kb
Views
26,312
  1. Portfolio Base Previews
  2. Portfolio Base HTML Codes
  3. Portfolio Base CSS Codes
  4. Portfolio Base JS Codes

How do I make an portfolio base?

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

Portfolio Base Previews
IQ Test

Portfolio Base - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Portfolio Base</title> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body> <div id="wrapper"> <div class="svg-wrapper"> <svg height="60" width=440 xmlns="http://www.w3.org/2000/svg"> <rect class="shape" height="60" width="440" /> <div class="text"> <p class="logo"> <a href="mailto:[email protected]">Calvin Morett</a></p></div> </svg></div> <div id="branding"> <p class="motto"> Creative Direction, Web Design & <BR> Development, Print & Publishing </p> </div> <div id="side"> <nav class="containersocial"> <a href="https://www.behance.net/morettc15cb" class="behance"><i class="fa fa-behance-square"></i></a> <a href="http://codepen.io/odisbey/" class="codepen"><i class="fa fa-codepen"></i></a> <a href="https://linkedin.com/in/calvinmorett" class="linkedin"><i class="fa fa-linkedin-square"></i></a> <a href="https://www.pinterest.com/morettc/" class="pinterest"><i class="fa fa-pinterest-square"></i></a> <a href="https://instagram.com/odisbey/" class="instagram"><i class="fa fa-instagram"></i></a> </nav> </div> </div> </div> </p><div id="spanright">
<span class="txt-rotate" data-period="2000" data-rotate='[ "","Hi.","I develop visuals for Print and the Web with a passion for illustration and editorial layout.","", "It has been more than a hobby for ten years now.",
"I enjoy modern + clean design & seeing work evolve.",
"A big motivator is being able to inspire a new generation of artists.",
"I am currently accepting new commissions.",
"For all inquiries regarding part or full-time job offers please send an email for further information."] '></span>
</div>
</body> <script src="js/index.js"></script>
</body>
</html>

Portfolio Base - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Spinnaker);
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(http://fonts.googleapis.com/css?family=Arimo:400,700,400italic,700italic);
html,
body { margin: 0 auto; width:100%; position:relative; background:#000; color: #fff; font-family: 'Arimo', sans-serif; text-rendering: optimizeLegibility;
}
.svg-wrapper { text-align: center; padding-top: 4em; position: relative; top: 0; width: 500px; height: 60px;
}
.shape { stroke-dasharray: 220 635; stroke-dashoffset: 250; stroke-width: 8px; fill: transparent; transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s; -moz-transition: all 1s; -o-transition: all 1s; -webkit-transition: all 1s; transition: all 1s; stroke: #E1A82C;
}
.logo a:hover { color: #E1A82C;
}
.text { font-size: .94em; letter-spacing: 8px; color: #fff; top: -117px; position: relative; text-transform: uppercase; font-family: 'Spinnaker', sans-serif;
}
.svg-wrapper:hover .shape { stroke-width: 3; stroke-dashoffset: 5; stroke-dasharray: 1075;
}
.logo a { padding: .10em; text-decoration: none; color: #fff; -moz-transition: all 0.35s; -o-transition: all 0.35s; -webkit-transition: all 0.35s; transition: all 0.35s;
}
.logo { letter-spacing: .025em; text-transform: uppercase; width: 100%; font-size: 3em; font-family: 'Spinnaker', sans-serif; padding: .25em 0;
}
.motto { letter-spacing: -.025em; line-height: 1.25em; font-size: 1.45em; font-family: 'Montserrat', sans-serif; padding: .05em 0;
}
#wrapper { background: #000 repeat fixed center; float:left; clear:left; margin: 0 auto; width: 100%;
}
#branding { text-align: center; width: 500px; margin: 0; padding: .25em; background: transparent;
}
/* side */
#side { padding: 2em .25em 2em; background: transparent; width: 500px;
}
.containersocial { display: inline-block; width: 97%; text-align: center; padding: .25em .5em;
}
.containersocial a { padding: .25em .5em; font-size: 2.25em; float: none; -moz-transition: all 0.45s; -o-transition: all 0.45s; -webkit-transition: all 0.45s; transition: all 0.45s;
}
.pinterest i,
.linkedin i,
.codepen i,
.behance i,
.instagram i { color: #fff; text-decoration: none; -moz-transition: all 0.35s; -o-transition: all 0.35s; -webkit-transition: all 0.35s; transition: all 0.35s;
}
.pinterest i:hover { color: #cb2027;
}
.linkedin i:hover { color: #007bb6;
}
.codepen i:hover { color: #A7AFA6;
}
.behance i:hover { color: #1769ff;
}
.instagram i:hover { color: #517fa4;
}
#spanright { margin:120px 500px 0; font-size:22px; font-family: 'Arimo', sans-serif; text-rendering: optimizeSpeed; letter-spacing: .05em; line-height: 1.5em; width: 43%; z-index: 99; float:left; padding: 1em .75em; color: #E1A82C; font-weight: 400; position:absolute;
}
.txt-rotate {border-right: .05em solid #eee; animation: blink .3s steps(5, start) infinite; -webkit-animation: blink 1s steps(5, start) infinite; } @keyframes blink { to { border-right:.05em solid #000; } } @-webkit-keyframes blink { to { border-right:.01em solid #fff; } }

Portfolio Base - Script Codes JS Codes

var TxtRotate = function(el, toRotate, period) { this.toRotate = toRotate; this.el = el; this.loopNum = 0; this.period = parseInt(period, 10) || 2220; this.txt = ''; this.tick(); this.isDeleting = false;
};
TxtRotate.prototype.tick = function() { var i = this.loopNum % this.toRotate.length; var fullTxt = this.toRotate[i]; if (this.isDeleting) { this.txt = fullTxt.substring(0, this.txt.length - 1); } else { this.txt = fullTxt.substring(0, this.txt.length + 1); } this.el.innerHTML = '<span class="wrap">'+this.txt+'</span>'; var that = this; var delta = 333 - Math.random() * 420; if (this.isDeleting) { delta /= 2.5; } if (!this.isDeleting && this.txt === fullTxt) { delta = this.period; this.isDeleting = true; } else if (this.isDeleting && this.txt === '') { this.isDeleting = false; this.loopNum++; delta = 500; } setTimeout(function() { that.tick(); }, delta);
};
window.onload = function() { var elements = document.getElementsByClassName('txt-rotate'); for (var i=0; i<elements.length; i++) { var toRotate = elements[i].getAttribute('data-rotate'); var period = elements[i].getAttribute('data-period'); if (toRotate) { new TxtRotate(elements[i], JSON.parse(toRotate), period); } } // INJECT CSS var css = document.createElement("style"); css.type = "text/css"; css.innerHTML = ".txt-rotate > .wrap { border-right: 0.08em solid #666 }"; document.body.appendChild(css);
};
Portfolio Base - Script Codes
Portfolio Base - Script Codes
Home Page Home
Developer Calvin
Username CalvinMorett
Uploaded August 11, 2022
Rating 3
Size 3,869 Kb
Views 26,312
Do you need developer help for Portfolio Base?

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!

Calvin (CalvinMorett) Script Codes
Name
DILLA - PORT
CLG Web Design Concept
Showcase 1 Gallery
FireHazard Landing Page
Port
Social Button Transition
Sidebar Nav
CoNTENT
Postcard Contact Form
IDEA BLOCKS
Create amazing art & images 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!