Portfolio Base
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 - 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);
};
Developer | Calvin |
Username | CalvinMorett |
Uploaded | August 11, 2022 |
Rating | 3 |
Size | 3,869 Kb |
Views | 26,312 |
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!
Name | Size |
IDEA BLOCKS | 20,705 Kb |
Pulserende | 2,465 Kb |
A Pen by Calvin | 30,237 Kb |
Postcard Contact Form | 2,361 Kb |
Full Page Slide, Vertical Progress Bar | 3,016 Kb |
PORTFOLIO - CEMENT | 7,610 Kb |
Image Stack Test SCSS | 2,799 Kb |
Column | 3,178 Kb |
Sidebar Nav | 16,349 Kb |
Sectioned-bootstrap-portfolio | 10,149 Kb |
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!
Name | Username | Size |
Print element on a page | Mrs_snow | 2,081 Kb |
CSS Piano | Dannystyle | 5,138 Kb |
Subtle site navigation with description | Necks | 3,206 Kb |
Horizontal Navigation with Floats | Gymratpacks | 5,403 Kb |
BlueBox Fork | Huskynation | 12,675 Kb |
SVG Animation | Thepheer | 4,793 Kb |
Calculator - codevember 08 - 2016 | Caiocares | 3,260 Kb |
Factorial | KeithleySLHS | 1,158 Kb |
Two Element Typeface | Chrisota | 4,942 Kb |
Tab Menus | Zephyr | 3,180 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!