PORTFOLIO - CEMENT
How do I make an portfolio - cement?
What is a portfolio - cement? How do you make a portfolio - cement? This script and codes were developed by Calvin on 12 October 2022, Wednesday.
PORTFOLIO - CEMENT Previews
PORTFOLIO - CEMENT - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>PORTFOLIO - CEMENT</title> <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! */ @import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,700italic,400italic,300italic,300);
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(https://fonts.googleapis.com/css?family=Roboto:400,400italic,500,700,500italic,700italic,300italic,300);
@import url(https://fonts.googleapis.com/css?family=Droid+Sans+Mono);
*, :before, :after { margin: 0; padding: 0; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
html { width: 100%; margin: 20px auto;
}
body { background: #000 url("http://cdn.backgroundhost.com/backgrounds/subtlepatterns/dark_wall.png") repeat; font-family: 'Roboto Condensed', sans-serif; height: 100%; width: 100%;
}
#wrapper { overflow: hidden; width: 980px; margin: 30px auto;
}
#header { height: auto; overflow: hidden; width: 100%; margin-bottom: 20px;
}
#body { font-family: 'Roboto', sans-serif; width: 100%; background: white; background: transparent; margin-bottom: 30px;
}
#footer { color: #999; width: 100%;
}
/** Header **/
.logo { OVERFLOW: VISIBLE; float: left; width: 490px; margin: 0;
}
.logoi { background: rgba(169, 255, 255, 0); width: 120px; height: auto; margin: 0; -moz-transition: all 0.45s; -o-transition: all 0.45s; -webkit-transition: all 0.45s; transition: all 0.35s;
}
.logoi:hover { background: rgba(169, 255, 255, 0.3); -moz-transition: all 0.25s; -o-transition: all 0.25s; -webkit-transition: all 0.25s; transition: all 0.25s;
}
.call2action { float: right; position: relative; height: auto; margin-bottom: 15px; top: 25px; right: -20px; width: 150px; margin-right: 25px; -moz-transition: all 0.45s; -o-transition: all 0.45s; -webkit-transition: all 0.45s; transition: all 0.45s; color: rgba(169, 255, 255, 0.3); text-align: center; text-transform: uppercase;
}
.callr { padding: 4px; border: 1px solid transparent; font-family: 'Montserrat', sans-serif; -moz-transition: all 0.45s; -o-transition: all 0.45s; -webkit-transition: all 0.45s; transition: all 0.45s; color: rgba(169, 255, 255, 0.3); text-align: center; letter-spacing: 2px; font-size: 1.05em; text-transform: uppercase;
}
.callr:hover { background: rgba(169, 255, 255, 0.3); text-align: center; border: 1px solid rgba(255, 255, 255, 0.25); text-decoration: none; color: #fff; border-radius: 25px; text-shadow: 0px 0px 15px rgba(255, 255, 255, 0.35); -moz-transition: text-shadow,color,background 0.45s; -o-transition: text-shadow,color,background 0.45s; -webkit-transition: text-shadow,color,background 0.45s; transition: text-shadow,color,background 0.45s;
}
.social { overflow: visible; right: -220px; float: right; position: relative; top: 70px; text-align: center; height: 45px; padding: auto; width: 250px; font-size: 1.65em;
}
/** Body **/
.work { width: 100%; color: #fff; height: 425px; overflow-y: scroll; overflow-x: hidden;
}
/** footer **/
.name { float: left; clear: left; width: 490px; margin: 0; color: #fff; text-transform: uppercase; font-size: 10px; letter-spacing: 2px; font-family: 'Montserrat', sans-serif;
}
.title { color: rgba(169, 255, 255, 0.3);
}
.resume { position: relative; left: -100px; top: 2px; height: auto; font-size: 0.85em; width: auto; height: 100%; margin: auto; font-family: 'Montserrat', sans-serif;
}
.contact { float: right; left: 0; display: inline-block; height: auto; text-align: right; width: 490px; margin: 0; font-size: 10px; letter-spacing: 2px; font-family: 'roboto', sans-serif;
}
/** floats **/
.left { float: left;
}
.right { float: left;
}
.clear { clear: both;
}
.clearl { clear: left;
}
.clearr { clear: right;
}
.clearm { clear: none;
}
/** side **/
.containersocial { margin: 0; position: relative; height: 45px; padding: auto;
}
.containersocial a { margin: 8px; padding: 5px; color: rgba(169, 255, 255, 0.3); -moz-transition: all 0.45s; -o-transition: all 0.45s; -webkit-transition: all 0.45s; transition: all 0.45s;
}
.pinterest,
.linkedin,
.codepen,
.behance,
.instagram { background: none; text-decoration: none;
}
.pinterest:hover,
.linkedin:hover,
.codepen:hover,
.behance:hover,
.instagram:hover { color: #fff; text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.35);
}
.twi:hover { color: #33CCFF;
}
.sou:hover { color: #f50;
}
.ema:hover { color: #dd4b39;
}
.lin:hover { color: #007bb6;
}
.cod:hover { color: #A7AFA6;
}
.beh:hover { color: #1769ff;
}
.ins:hover { color: #517fa4;
}
.car:hover { color: #31b262;
}
a { color: #fff; text-decoration: none;
}
a:hover { text-decoration: overline underline;
}
.bio { margin: 20px; padding-bottom: 5px; font-size: 2em;
}
/* Let's get this party started */
::-webkit-scrollbar { width: 6px;
}
/* Track */
/* Handle */
::-webkit-scrollbar-thumb { border-radius: 6px; background: rgba(0, 0, 0, 0.25);
}
::-webkit-scrollbar-thumb:window-inactive { background: #eee;
}
::-moz-selection { /* Code for Firefox */ color: #222; background: rgba(169, 255, 255, 0.3);
}
::selection { color: #222; background: rgba(169, 255, 255, 0.3);
}
.nocur { cursor: crosshair;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Muli:400,400italic,300italic,300' rel='stylesheet' type='text/css'>
<div id="top-image">
<div id="wrapper"> <div id="header"> <div class="logo"><a href="http://scr.im/calvinm" border=0 class="nocur"><img src="http://calvinmorett.com/img/200.png" class="logoi"></a></div> <div class="call2action"><a href="http://scr.im/calvinm" class="callr"></a></div> <div class="social"> <nav class="containersocial"> <a href="https://www.behance.net/morettc15cb" class="behance"><i class="fa fa-behance-square"></i></a> <a href="https://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> </nav> </div> </div> <div id="body"> <div class="work"><p class="bio">Calvin is a mixed media and multimedia designer living & working in Upstate New York. </p><p class="bio">
He gained valuable print and editorial design experience in the newspaper industry while working along highly skilled colleagues over several years.
</p><p class="bio">
He is currently crafting new projects in traditional and digital art. While also dedicating time for creating music, voice-acting and designing patterns.
</p><p class="bio">
He enjoys talking philosohpy and how things operate; accustomed to sharing music and finding creative solutions. If you have any inquiries regarding work or want to chat, he recommends getting in-touch through email.</p></div> </div> <div id="footer"> <div class="name">Calvin Morett<br> <ip class="title">Print & Web Designer,<BR>
Front-End Developer,<BR>
Digital Content Editor & More</p></div> <div class="contact"> <a href="http://scr.im/calvinm" class="ema">EMAIL</a>†<a href="https://linkedin.com/in/calvinmorett" class="lin">LINKEDIN</a><br> <a href="https://www.behance.net/morettc15cb" class="beh">BEHANCE</a>†<a href="https://codepen.io/odisbey" class="cod">CODEPEN</a><BR> <a href="https://twitter.com/CalvinMorett" class="twi">TWITTER</a>†<a href="http://cargocollective.com/calvinmorett" class="car">CARGOCOLLECTIVE</a><BR> <a href="https://www.instagram.com/odisbey/" class="ins">INSTAGRAM</a>†<a href="https://soundcloud.com/odisbey" class="sou">SOUNDCLOUD</a><BR> </div> </div>
</div>
</div>
<!-- Start of StatCounter Code for Default Guide -->
<script type="text/javascript">
var sc_project=10881604;
var sc_invisible=0;
var sc_security="93f3c33b";
var sc_text=4;
var scJsHost = (("https:" == document.location.protocol) ?
"https://secure." : "http://www.");
document.write("<sc"+"ript type='text/javascript' src='" + scJsHost+
"statcounter.com/counter/counter.js'></"+"script>");
</script>
<noscript><div class="statcounter"><a title="shopify analytics ecommerce
tracking" href="http://statcounter.com/shopify/" target="_blank"><img
class="statcounter" src="http://c.statcounter.com/10881604/0/93f3c33b/0/"
alt="shopify analytics ecommerce tracking"></a></div></noscript>
<!-- End of StatCounter Code for Default Guide --> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
PORTFOLIO - CEMENT - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,700italic,400italic,300italic,300);
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(https://fonts.googleapis.com/css?family=Roboto:400,400italic,500,700,500italic,700italic,300italic,300);
@import url(https://fonts.googleapis.com/css?family=Droid+Sans+Mono);
*, :before, :after { margin: 0; padding: 0; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
html { width: 100%; margin: 20px auto;
}
body { background: #000 url("http://cdn.backgroundhost.com/backgrounds/subtlepatterns/dark_wall.png") repeat; font-family: 'Roboto Condensed', sans-serif; height: 100%; width: 100%;
}
#wrapper { overflow: hidden; width: 980px; margin: 30px auto;
}
#header { height: auto; overflow: hidden; width: 100%; margin-bottom: 20px;
}
#body { font-family: 'Roboto', sans-serif; width: 100%; background: white; background: transparent; margin-bottom: 30px;
}
#footer { color: #999; width: 100%;
}
/** Header **/
.logo { OVERFLOW: VISIBLE; float: left; width: 490px; margin: 0;
}
.logoi { background: rgba(169, 255, 255, 0); width: 120px; height: auto; margin: 0; -moz-transition: all 0.45s; -o-transition: all 0.45s; -webkit-transition: all 0.45s; transition: all 0.35s;
}
.logoi:hover { background: rgba(169, 255, 255, 0.3); -moz-transition: all 0.25s; -o-transition: all 0.25s; -webkit-transition: all 0.25s; transition: all 0.25s;
}
.call2action { float: right; position: relative; height: auto; margin-bottom: 15px; top: 25px; right: -20px; width: 150px; margin-right: 25px; -moz-transition: all 0.45s; -o-transition: all 0.45s; -webkit-transition: all 0.45s; transition: all 0.45s; color: rgba(169, 255, 255, 0.3); text-align: center; text-transform: uppercase;
}
.callr { padding: 4px; border: 1px solid transparent; font-family: 'Montserrat', sans-serif; -moz-transition: all 0.45s; -o-transition: all 0.45s; -webkit-transition: all 0.45s; transition: all 0.45s; color: rgba(169, 255, 255, 0.3); text-align: center; letter-spacing: 2px; font-size: 1.05em; text-transform: uppercase;
}
.callr:hover { background: rgba(169, 255, 255, 0.3); text-align: center; border: 1px solid rgba(255, 255, 255, 0.25); text-decoration: none; color: #fff; border-radius: 25px; text-shadow: 0px 0px 15px rgba(255, 255, 255, 0.35); -moz-transition: text-shadow,color,background 0.45s; -o-transition: text-shadow,color,background 0.45s; -webkit-transition: text-shadow,color,background 0.45s; transition: text-shadow,color,background 0.45s;
}
.social { overflow: visible; right: -220px; float: right; position: relative; top: 70px; text-align: center; height: 45px; padding: auto; width: 250px; font-size: 1.65em;
}
/** Body **/
.work { width: 100%; color: #fff; height: 425px; overflow-y: scroll; overflow-x: hidden;
}
/** footer **/
.name { float: left; clear: left; width: 490px; margin: 0; color: #fff; text-transform: uppercase; font-size: 10px; letter-spacing: 2px; font-family: 'Montserrat', sans-serif;
}
.title { color: rgba(169, 255, 255, 0.3);
}
.resume { position: relative; left: -100px; top: 2px; height: auto; font-size: 0.85em; width: auto; height: 100%; margin: auto; font-family: 'Montserrat', sans-serif;
}
.contact { float: right; left: 0; display: inline-block; height: auto; text-align: right; width: 490px; margin: 0; font-size: 10px; letter-spacing: 2px; font-family: 'roboto', sans-serif;
}
/** floats **/
.left { float: left;
}
.right { float: left;
}
.clear { clear: both;
}
.clearl { clear: left;
}
.clearr { clear: right;
}
.clearm { clear: none;
}
/** side **/
.containersocial { margin: 0; position: relative; height: 45px; padding: auto;
}
.containersocial a { margin: 8px; padding: 5px; color: rgba(169, 255, 255, 0.3); -moz-transition: all 0.45s; -o-transition: all 0.45s; -webkit-transition: all 0.45s; transition: all 0.45s;
}
.pinterest,
.linkedin,
.codepen,
.behance,
.instagram { background: none; text-decoration: none;
}
.pinterest:hover,
.linkedin:hover,
.codepen:hover,
.behance:hover,
.instagram:hover { color: #fff; text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.35);
}
.twi:hover { color: #33CCFF;
}
.sou:hover { color: #f50;
}
.ema:hover { color: #dd4b39;
}
.lin:hover { color: #007bb6;
}
.cod:hover { color: #A7AFA6;
}
.beh:hover { color: #1769ff;
}
.ins:hover { color: #517fa4;
}
.car:hover { color: #31b262;
}
a { color: #fff; text-decoration: none;
}
a:hover { text-decoration: overline underline;
}
.bio { margin: 20px; padding-bottom: 5px; font-size: 2em;
}
/* Let's get this party started */
::-webkit-scrollbar { width: 6px;
}
/* Track */
/* Handle */
::-webkit-scrollbar-thumb { border-radius: 6px; background: rgba(0, 0, 0, 0.25);
}
::-webkit-scrollbar-thumb:window-inactive { background: #eee;
}
::-moz-selection { /* Code for Firefox */ color: #222; background: rgba(169, 255, 255, 0.3);
}
::selection { color: #222; background: rgba(169, 255, 255, 0.3);
}
.nocur { cursor: crosshair;
}
PORTFOLIO - CEMENT - Script Codes JS Codes
$(document).ready(function() {
var movementStrength = 999;
var height = movementStrength / $(window).height();
var width = movementStrength / $(window).width();
$("html").mousemove(function(e){ var pageX = e.pageX - ($(window).width() / 2); var pageY = e.pageY - ($(window).height() / 2); var newvalueX = width * pageX * -1 - 25; var newvalueY = height * pageY * -1 - 50; $('body').css("background-position", newvalueX+"px "+newvalueY+"px");
});
});
| Developer | Calvin |
| Username | CalvinMorett |
| Uploaded | October 12, 2022 |
| Rating | 3 |
| Size | 7,610 Kb |
| Views | 22,264 |
Do you need developer help for PORTFOLIO - CEMENT?
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 | Size |
| Fixed-width Single Page Portfolio | 4,187 Kb |
| Staff | 3,023 Kb |
| Portfolio Base | 3,869 Kb |
| Postcard Contact Form | 2,361 Kb |
| Horizontal Scrolling Theme | 11,410 Kb |
| Port | 4,163 Kb |
| The word good is bad. | 2,101 Kb |
| IDEA BLOCKS | 20,705 Kb |
| POE Rank Mockup | 4,156 Kb |
| CLG Web Design Concept | 6,672 Kb |
Create amazing love letters 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!
Similar Scripts & Codes
| Name | Username | Size |
| Tab Menus | Zephyr | 3,180 Kb |
| Responsive scrolling text | Ashdurham | 2,259 Kb |
| Simple Linear Regression with Editable Table | Melatonind | 3,264 Kb |
| Client-side Email Validation | Collizo4sky | 1,538 Kb |
| Vertically rotating text with CSS | Nopr | 2,141 Kb |
| Michelle, submit your photography to Unsplash. | Zaneriley | 3,368 Kb |
| Pattern lab logo | TimPietrusky | 3,666 Kb |
| Another brick in the wall | Fivera | 1,955 Kb |
| Responsive Menu I | Rodericksandoval | 3,045 Kb |
| A Pen by Tosh | Panev | 2,586 Kb |
Do you want hide your ip address?
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!