Fixed-width Single Page Portfolio

Developer
Calvin
Size
4,187 Kb
Views
36,432
  1. Fixed-width Single Page Portfolio Previews
  2. Fixed-width Single Page Portfolio HTML Codes
  3. Fixed-width Single Page Portfolio CSS Codes
  4. Fixed-width Single Page Portfolio JS Codes

How do I make an fixed-width single page portfolio?

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

Fixed-width Single Page Portfolio Previews
IQ Test

Fixed-width Single Page Portfolio - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Fixed-width Single Page Portfolio </title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,900' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Spinnaker' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<body class="bgc">
<div class="container"> <div id="row" class="navtop"> <a href="test"> <span class="fa-stack fa-lg"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-home fa-stack-1x fa-inverse"></i>
</span></a> <a href="test"> <span class="fa-stack fa-lg"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-shopping-cart fa-stack-1x fa-inverse"></i>
</span></a> <a href="test"> <span class="fa-stack fa-lg"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-envelope fa-stack-1x fa-inverse"></i>
</span></a> </div> <div id="row" class="col-lgwho"> xxxx </div> <div id="row" class="col-lg1"> <span><ul class="list-inline"> <li>creative direction</li> <li>print & publishing </li> <li>web design</li> <li>illustration</li> <li>web development</li>
</ul></span> </div> <div id="row" class="col-lab"> <p class="p2">My name is xxxx. I'm a 25 year old Creative Director, Print & Web Designer. I also craft digital and traditional styles of art. I focus on creating clean designs with function.
<p class="p2"> I started learning graphic design in 2002 when I began creating signatures and avatars for my online identities, <i>as well as my sprays for Counter-Strike.</i> After mastering Paint, I switched to Photoshop even though CSS was my first love.</p> <p class="p2">Occasionally, I create music, watch movies, and play video games. I'm a big fan of <a href="#cl-effect-5">Laid-Back</a> Radio and <a href="#cl-effect-5">Beat Basement</a>. </p> </div> <div id="row" class="col-lg2"> <nav class="containersocial"><h6>CONNECT WITH ME</h6> <a href="#" class="lin" ><i class="fa fa-linkedin-square"></i></a> <a class="pint" href="#"><i class="fa fa-pinterest-square"></i></a> <a class="code" href="#"><i class="fa fa-codepen"></i></a> </nav> </div> <div id="row" class="col-lgp"> <div class="holdboth"><div class="view"><a href="google.com">VIEW</a></div> <img src="http://i.imgur.com/bdwoG5f.png"> <div class="caption">Caption goes here</div> </div> <div class="holdboth"><div class="view"><a href="google.com">VIEW</a></div> <img src="http://i.imgur.com/fqbOG5Q.png"> <div class="caption">Caption goes here</div> </div> <div class="holdboth"><div class="view"><a href="google.com">VIEW</a></div> <img src="http://i.imgur.com/bdwoG5f.png"> <div class="caption">Caption goes here</div> </div> <div class="holdboth"><div class="view"><a href="google.com">VIEW</a></div> <img src="http://i.imgur.com/fqbOG5Q.png"> <div class="caption">Caption goes here</div> </div> </div> <div class="col-lg2"> <nav class="containersocial"><h6>CONTACT ME</h6> <a href="#" class="lin" ><i class="fa fa-envelope"></i></a> <a href="#" class="lin" ><i class="fa fa-steam-square"></a></i> </nav> </div> <div id="row" class="col-lgfoot"> 2015 © <span>xxxx</span> <span3>&#9830;</span3> Creative Direction, Print + Web </div> </div>
</body> <script src="js/index.js"></script>
</body>
</html>

Fixed-width Single Page Portfolio - Script Codes CSS Codes

.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
.bgc { background:#444;
}
.container { width:0 auto;background:rgba(0,0,0,0.025);
}
.navtop { width:auto;
float:right; position:relative; vertical-align:middle;
padding:1.55em 2em 1.55em 0em; z-index:4;
margin:0; min-width:256px;
background:transparent; display:inline; border:none; text-transform:uppercase; text-align:right; font: 1.25em 'Montserrat', sans-serif; letter-spacing:-.5em; }
.navtop a{color:#70776F; padding:.55em .125em; margin:.55em .35em; -moz-transition: all 0.3s; -o-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s;
}
.navtop a:hover{ color:transparent;
cursor: pointer; -moz-transition: all 0.3s; -o-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s;
}
.col-lgwho { background:#A7AFA6; border:none; position:relative; margin:0; min-width:256px; padding:3.125rem; color:#132115; font: 4.28rem 'Spinnaker', sans-serif; line-height:.88em;
text-align:left; text-transform:uppercase; letter-spacing:-.01em; }
.col-lgwho span{ padding:6px; font: .4em 'Montserrat', sans-serif; line-height:0;
}
.col-lg1 { min-width:256px; padding:14px 50px 0; background:rgba(20,50,25,0.45); border:none; color:#fff; font: 1.1em 'Lato', sans-serif; line-height:1em; text-align:center; text-transform:uppercase; letter-spacing:-.045em; }
.col-lg1 span{ padding:6px; font:.91em 'Montserrat', sans-serif; line-height:1.25em;
}
.col-lg1 ul li{ vertical-align:middle; background:#70776F; display:inline-block; padding:.5rem 1.88em; letter-spacing:.5rem; margin:.5rem; }
.col-lg2 { min-width:256px; padding:25px 55px; background:rgba(20,50,25,0.45); border:none; color:#fff; font: 1.1em 'Montserrat', sans-serif; line-height:1em; text-align:center; text-transform:uppercase; letter-spacing:-.045em; }
.col-lab { min-width:256px; padding:50px; background:#A7AFA6; border:none; color:#111; font: 1.25em 'Lato', sans-serif; line-height:1.55em; text-align:center; letter-spacing:-.01em; }
.col-lgp { height:500px; min-width:256px; padding:1em; background:#A7AFA6; border:none; color:#111;; font: 1.25em 'Lato', sans-serif; line-height:1.55em; text-align:center; letter-spacing:-.01em; overflow-y:scroll; }
.col-lgp .holdboth { top:0; left:0; display: inline-block; position: relative; max-width:32.3%; color: #ffffff; text-align:center; font-weight:bold; opacity:.9; margin-top:10px; margin-right:10px; margin-bottom:10px; marginleft:0; vertical-align: top; background-size: cover; background-repeat: no-repeat; background-position: center; cursor: pointer; -moz-transition: all 0.3s; -o-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s;
}
.view a{ position:absolute; padding:9px; color:#fff; font-size:.7em; left:0; z-index:4;
width:100px; background:#A7AFA6;
}
.view a:hover{ background:#fff; color:#000; text-decoration:none;
}
.holdboth .caption { opacity:0; color:#70776F; background:rgba(0,0,0,0); width: 100%; margin-top:0px; margin-left: -100px; letter-spacing:.05em; line-height:3.8em; font-size:.65em; vertical-align: top; -moz-transition: all 0.3s; -o-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s; text-transform:uppercase; text-align:left;
}
.col-lgp .holdboth:hover .caption { width: 100%; font-size:.65em; text-transform:uppercase; color: #000; text-align:left; display: inline-block; letter-spacing:.05em; opacity:1; margin-left:0;
padding:0 20px;
}
.holdboth img { box-shadow:1px 1px 15px rgba(0,0,0,.25); width:100%; -webkit-filter: grayscale(100%); filter: grayscale(100%); }
.holdboth img:hover { width:100%; -moz-transition: all 0.3s; -o-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s; -webkit-filter: grayscale(0%); filter: grayscale(0%);
}
.col-lgp::-webkit-scrollbar { display: none;
}
.col-lgfoot { min-width:256px; padding:15px; background:#A7AFA6; border:none; color:#111;
text-shadow:1px 1px rgba(0,0,0,.15); font: .82em 'Montserrat', sans-serif; line-height:1.25em; text-align:center; text-transform:uppercase; letter-spacing:-.01em; margin:0; letter-spacing:0.25em; }
.col-lgfoot span{ font-weight:600; }
.col-lgfoot span2{
letter-spacing:-9px;
padding:0 1%; }
.col-lgfoot span3{
letter-spacing:-9px;
padding:0 20px 0 10px; vertical-align:bottom; font-size:2em; color:#fff; }
.p2 { border-bottom: 1px solid rgba(0, 0, 0, 0.1); vertical-align: baseline; font-size: 1.5em; line-height: 1.5em; padding:.25em .05em; text-align: left; word-break: keep-all;
}
.p2:first-line { text-align:justify;
font-weight: 800;
}
h6 { clear:left; display:inline-block; float:left; vertical-align:middle; background:#70776F; padding:.85em 1.45em .75em; letter-spacing:.5em; }
.containersocial { font-weight:300; color: #fff; line-height:3.5em; font-size:1em; vertical-align:middle; z-index: 99; text-align:center; display:table; width:100%;
}
.containersocial a{ vertical-align:middle; padding:0em 1.85em 0; font-size:2em; float:right; cursor: pointer; -moz-transition: all 0.2s; -o-transition: all 0.2s; -webkit-transition: all 0.2s; transition: all 0.2s;
}
.pint i,.code i,.lin i, .twitt i{ color: #70776F; text-decoration: none; -moz-transition: all 0.2s; -o-transition: all 0.2s; -webkit-transition: all 0.2s; transition: all 0.2s;
}
.pint i:hover,.code i:hover,.lin i:hover, .twitt i:hover{ color: #999; text-decoration: none;
}
/* Inset, by Dan Eden */
hr.style-cm { border: 0; height: 0; padding:2px; background:rgba(0,0,0,0.001); border-top: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

Fixed-width Single Page Portfolio - Script Codes JS Codes

 $('row').css({ width: $("col-lgp")[0].scrollWidth });
Fixed-width Single Page Portfolio - Script Codes
Fixed-width Single Page Portfolio - Script Codes
Home Page Home
Developer Calvin
Username CalvinMorett
Uploaded August 11, 2022
Rating 3
Size 4,187 Kb
Views 36,432
Do you need developer help for Fixed-width Single Page Portfolio?

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
Pulserende
CLG Web Design Concept
Staff Page Mockup
Postcard Contact Form
Column
Portfolio Base
Social Button Transition
Horizontal Scrolling Theme
The word good is bad.
Port
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!