Portfolio Xperiment

Developer
Calvin
Size
4,320 Kb
Views
22,264
  1. Portfolio Xperiment Previews
  2. Portfolio Xperiment HTML Codes
  3. Portfolio Xperiment CSS Codes
  4. Portfolio Xperiment JS Codes

How do I make an portfolio xperiment?

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

Portfolio Xperiment Previews
IQ Test

Portfolio Xperiment - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Portfolio Xperiment</title> <title>CM</title>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
<meta name="Description" content="Author: Calvin Morett,
Web Designer, Graphic Designer, Illustrator, Typographer, Coder">
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css">
<link rel="script" type="text/javascript" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
<link rel="script" type="text/javascript" href="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js">
<script>$("#menu-toggle").click(function(e) { e.preventDefault(); $("#wrapper").toggleClass("toggled"); });
$( ".crossRotate" ).click(function() { if ( $( this ).css( "transform" ) == 'none' ){ $(this).css("transform","rotate(180deg)"); } else { $(this).css("transform","" ); }
});
</script> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body> <div class="responsive-menu"> <a href="#menu-toggle" class="crossRotate responsive-menu" id="menu-toggle"><i class="fa fa-angle-left timing"></i></a></div> <div id="wrapper"> <!-- Sidebar --> <div id="sidebar-wrapper"> <ul class="sidebar-nav"> <li class="sidebar-brand "> <a href="http://www.calvinmorett.com"> <img src="http://calvinmorett.com/img/200.png" class="inverted brandimg"> </a> </li> <!--
<li class="main-nav timing"> <a href="#" class="timing,main-nav">Portfolio</a> </li> <li class="main-nav timing"> <a href="#" class="timing, main-nav">Shop</a> </li>
--> <li class="timing clearc gmai"> <a href="mailto:[email protected]">Email</a> </li> <hr> <li class="beha timing white"> <a href="https://www.behance.net/morettc15cb">Behance</a> </li> <li class="link timing black"> <a href="https://linkedin.com/in/calvinmorett">LinkedIn</a> </li> <li class="twit timing white"> <a href="https://twitter.com/CalvinMorett">Twitter</a> </li> <li class="carg timing clearc"> <a href="http://cargocollective.com/calvinmorett">Cargo</a> </li> <li class="code timing white"> <a href="http://codepen.io/odisbey">Codepen</a> </li> <li class="pint timing black"> <a href="https://www.pinterest.com/morettc/">Pinterest</a> </li> </ul> </div> <!-- /#sidebar-wrapper --> <!-- Page Content --> <div id="page-content-wrapper"> <div class="container-fluid"> <div class="row"> <div class="col-lg-12"> <div class="container">
<div class="row"> <div class="col-1">Calvin is a mixed media and multimedia designer living and working in Upstate New York.</div> <div class="col-1">He gained valuable print and editorial design experience in the newspaper industry while working along highly skilled colleagues over several years.</div> <div class="col-1">He is currently crafting new projects in traditional and digital art, as well as creating user friendly web designs.</div> <div class="col-1">He enjoys talking about new techniques and the process of art, music and everything creative. If you have any inquiries regarding work or wanna chat, he recommends getting in-touch through email.</div>
</div>
</div>	</div> </div> </div> </div> </div> <!-- /#page-content-wrapper --> </div> <!-- /#wrapper -->
</body>
</html> <script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
<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 Xperiment - Script Codes CSS Codes

/*! * Start Bootstrap - Simple Sidebar HTML Template (http://startbootstrap.com) * Code licensed under the Apache License v2.0. * For details, see http://www.apache.org/licenses/LICENSE-2.0. */
/* Toggle Styles */
*, :before, :after { margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
html{margin:0 auto;}
body { font: 2.5em 'Roboto', sans-serif bold; color:rgb(77, 77, 77); background: rgba(221, 205, 193, 1);
}
hr{ height:-1px; overflow:hidden; width:50px; border-bottom:5px solid rgb(77, 77, 77);
}
a,a:active,a:visited{ transition:color .3s ease;}
a:hover{ transition:color .2s ease;}
#wrapper { padding-left: 0; -webkit-transition: all .45s ease; -moz-transition: all .45s ease; -o-transition: all .45s ease; transition: all .45s ease;
}
#wrapper.toggled { margin: auto; padding-left: 250px;
}
#sidebar-wrapper { z-index: 1000; position: fixed; left: 250px; width: 0; height: 100%; margin-left: -250px; overflow-y: auto; background:rgba(221, 205, 193, 0); -webkit-transition: all 0.45s ease; -moz-transition: all 0.45s ease; -o-transition: all 0.45s ease; transition: all 0.45s ease;
}
#wrapper.toggled #sidebar-wrapper { width: 250px;
}
#page-content-wrapper { width: 90%; position: absolute; padding: 15px;
}
#wrapper.toggled #page-content-wrapper { position: absolute; margin-right: -250px;
}
/* Sidebar Styles */
.sidebar-nav {font-size:.85em; position: absolute; top: 0; width: 250px; margin: 0; padding: 0; list-style: none; margin: 4em 0;
}
.sidebar-nav li { text-indent: 20px; line-height: 40px;
}
.sidebar-nav li a { display: block; text-decoration: none; color: rgb(77, 77, 77);
}
.sidebar-nav li a:hover { text-decoration: none; color: inherit; background:transparent;
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus { text-decoration: none;
}
.sidebar-nav > .sidebar-brand { -webkit-animation: fadeIn 1.5s; height: 100px; font-size: .75em; line-height: 60px; margin-bottom:2em;
}
.sidebar-nav > .sidebar-brand a { color: rgba(255,255,255,1);
}
.sidebar-nav > .sidebar-brand a:hover { color: rgba(44, 60, 73,1); background: none;
}
@media(min-width:768px) { #wrapper { padding-left: 250px; } #wrapper.toggled { padding-left: 0; } #sidebar-wrapper { width: 250px; } #wrapper.toggled #sidebar-wrapper { width: 0; } #page-content-wrapper { padding: 20px; position: relative; } #wrapper.toggled #page-content-wrapper { position: relative; margin-right: 0; }
}
.col-1{ overflow:hidden; min-width:320px; width:75%; margin: 1.5em 0; margin-right:8em;
}
.responsive-menu{ z-index:9999; font-size:55px; top:0; left:10px; border:none;
position:absolute;
}
.responsive-menu i{
color:rgb(77, 77, 77);
}
.responsive-menu i:hover{
background:transparent;
color:red;
}
.crossRotate { -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; transition-property: transform; outline: 0;
}
.crossRotate:active { transform: rotate(180deg); -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg);
}
.timing{ -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;}
.inverted {	-webkit-filter: invert(70%); filter: invert(70%);
}
.brandimg{ width:100px;height:100px;}
.main-nav:hover{background:#e02023;}
.white{color:#fff;}
.clearc{color:transparent;}
.black{color:#000;}
.carg:hover{background:#00c462;}
.pint:hover{background:#cb2027;}
.beha:hover{background:#008CFF;}
.link:hover{background:#4875B4;}
.twit:hover{background:#33CCFF;}
.code:hover{background:#212121;}
.stak:hover{background:#f58233;}
.gmai:hover{background:#dd4b39;}

Portfolio Xperiment - Script Codes JS Codes

$("#menu-toggle").click(function(e) { e.preventDefault(); $("#wrapper").toggleClass("toggled"); });
$( ".crossRotate" ).click(function() { if ( $( this ).css( "transform" ) == 'none' ){ $(this).css("transform","rotate(180deg)"); } else { $(this).css("transform","" ); }
});
Portfolio Xperiment - Script Codes
Portfolio Xperiment - Script Codes
Home Page Home
Developer Calvin
Username CalvinMorett
Uploaded August 11, 2022
Rating 3
Size 4,320 Kb
Views 22,264
Do you need developer help for Portfolio Xperiment?

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
Sidebar Nav
R
Staff Page Mockup
IDEA BLOCKS
Social Button Transition
Column
PORTFOLIO - CEMENT
Horizontal Scrolling Theme
Pulserende
POE Rank Mockup
Create amazing sales emails 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!