Portfolio Page Using HTML , CSS
Key Elements of an Effective Portfolio Page
For a professional portfolio page, consider including the following essential sections:
Table of Contents
Download New Real Time Projects :-Click here
HTML Code
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lato:300' rel='stylesheet' type='text/css'>
<header>
<h1>Balkan Style <br> <span>[ Portfolio Gallery ]</span></h1>
</header>
<div id="top"></div>
<section class="gallery">
<div class="row">
<ul>
<a href="#" class="close"></a>
<li>
<a href="#item02">
<img src="https://cdn.dribbble.com/users/545884/screenshots/3981307/lorena2.png" alt="">
</a>
</li>
<li>
<a href="#item02">
<img src="https://cdn.dribbble.com/users/545884/screenshots/3892302/contact.png" alt="">
</a>
</li>
<li>
<a href="#item02">
<img src="https://cdn.dribbble.com/users/545884/screenshots/4154721/dive--001.png" alt="">
</a>
</li>
<li>
<a class="image" href="#item01">
<img src="https://cdn.dribbble.com/users/545884/screenshots/4356121/darko--dr.jpg" alt="">
</a>
</li>
<li>
<a class="image" href="#item02">
<img src="https://cdn.dribbble.com/users/545884/screenshots/3695553/news.png" alt="">
</a>
</li>
<li>
<a class="image" href="#item01">
<img src="https://cdn.dribbble.com/users/545884/screenshots/4360101/liberosis_--_12.png" alt="">
</a>
</li>
<li>
<a class="image" href="#item01">
<img src="https://cdn.dribbble.com/users/545884/screenshots/3148799/technical-book.jpg" alt="">
</a>
</li>
<li>
<a class="image" href="#item01">
<img src="https://cdn.dribbble.com/users/545884/screenshots/2883479/cover.jpg" alt="">
</a>
</li>
</ul>
</div> <!-- / row -->
<!-- Item 01 -->
<div id="item01" class="port">
<div class="row">
<div class="description">
<h1>Item 01</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis libero erat. Integer ac purus est. Proin erat mi, pulvinar ut magna eget, consectetur auctor turpis.</p>
</div>
<img src="https://cdn.dribbble.com/users/545884/screenshots/3981307/lorena2.png" alt="">
</div>
</div> <!-- / row -->
</div> <!-- / Item 02 -->
<!-- Item 02 -->
<div id="item02" class="port">
<div class="row">
<div class="description">
<h1>Item 02</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis libero erat. Integer ac purus est. Proin erat mi, pulvinar ut magna eget, consectetur auctor turpis.</p>
</div>
<img src="https://cdn.dribbble.com/users/545884/screenshots/2883479/cover.jpg" alt="">
</div> <!-- / row -->
</div> <!-- / Item 02 -->
</section> <!-- / projects -->
https://updategadh.com/category/php-project
CSS Code
=transition($transition-property, $transition-time, $method)
-webkit-transition: $transition-property $transition-time $method
-moz-transition: $transition-property $transition-time $method
transition: $transition-property $transition-time $method
*
-webkit-box-sizing: border-box
-moz-box-sizing: border-box
box-sizing: border-box
&:before, &:after
-webkit-box-sizing: border-box
-moz-box-sizing: border-box
box-sizing: border-box
body
font-family: 'Lato', sans-serif
font-weight: 300
line-height: 1.5
color: #333
a
color: #fff
.row
width: 100%
max-width: 1170px
margin: 0 auto
padding: 0
clear: both
img
max-width: 100%
height: auto
padding: 0
margin: 0
%col
float: left
margin: 0 0.8771929824561403%
overflow: hidden
// HEADER
header
background-color: #84b4b1
color: #fff
text-align: center
padding: 30px 0 120px
h1
text-align: center
text-transform: uppercase
font-size: 65px
font-weight: 400
letter-spacing: 3px
line-height: .8
padding-top: 50px
font-family: 'Montserrat', sans-serif
span
text-transform: uppercase
letter-spacing: 7px
font-size: 25px
line-height: 1
p
padding-top: 30px
// PROJECTS
.gallery
padding: 40px 0 300px
position: relative
overflow: hidden
ul
padding-top: 50px
position: relative
li
@extend %col
margin-bottom: 20px
width: 23.24561403508772%
position: relative
a
display: block
position: relative
width: 100%
height: 100%
margin: 0
padding: 0
line-height: 0
&:before
position: absolute
width: 32px
height: 32px
top: 40%
left: 50%
margin: -14px 0 0 -16px
background: url(data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3C%21--%20Generator%3A%20Adobe%20Illustrator%2017.1.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200%29%20%20--%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0A%3Csvg%20version%3D%221.1%22%0A%09%20id%3D%22svg2%22%20xmlns%3Adc%3D%22http%3A//purl.org/dc/elements/1.1/%22%20xmlns%3Acc%3D%22http%3A//creativecommons.org/ns%23%22%20xmlns%3Ardf%3D%22http%3A//www.w3.org/1999/02/22-rdf-syntax-ns%23%22%20xmlns%3Asvg%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Asodipodi%3D%22http%3A//sodipodi.sourceforge.net/DTD/sodipodi-0.dtd%22%20xmlns%3Ainkscape%3D%22http%3A//www.inkscape.org/namespaces/inkscape%22%20inkscape%3Aversion%3D%220.48.4%20r9939%22%20sodipodi%3Adocname%3D%22icon-fullscreen.svg%22%0A%09%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20960%20560%22%0A%09%20enable-background%3D%22new%200%200%20960%20560%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Csodipodi%3Anamedview%20%20borderopacity%3D%221%22%20pagecolor%3D%22%23ffffff%22%20bordercolor%3D%22%23666666%22%20objecttolerance%3D%2210%22%20gridtolerance%3D%2210%22%20guidetolerance%3D%2210%22%20showgrid%3D%22false%22%20fit-margin-top%3D%220%22%20fit-margin-left%3D%220%22%20inkscape%3Azoom%3D%227.375%22%20inkscape%3Acx%3D%22-5.1525424%22%20inkscape%3Acy%3D%2216%22%20id%3D%22namedview11%22%20inkscape%3Awindow-x%3D%22-8%22%20inkscape%3Awindow-y%3D%22-8%22%20fit-margin-right%3D%220%22%20inkscape%3Apageopacity%3D%220%22%20fit-margin-bottom%3D%220%22%20inkscape%3Awindow-width%3D%221366%22%20inkscape%3Awindow-height%3D%22706%22%20inkscape%3Awindow-maximized%3D%221%22%20inkscape%3Apageshadow%3D%222%22%20inkscape%3Acurrent-layer%3D%22svg2%22%3E%0A%09%3C/sodipodi%3Anamedview%3E%0A%3Cg%3E%0A%09%3Crect%20x%3D%22220%22%20y%3D%22260%22%20fill%3D%22%23FFFFFF%22%20width%3D%22536%22%20height%3D%2224%22/%3E%0A%3C/g%3E%0A%3Cg%3E%0A%09%3Crect%20x%3D%22476%22%20y%3D%224%22%20fill%3D%22%23FFFFFF%22%20width%3D%2224%22%20height%3D%22556%22/%3E%0A%3C/g%3E%0A%3C/svg%3E%0A) no-repeat
content: ''
opacity: 0
z-index: 1
@include transition(all, 0.3s, linear)
&:hover:before
top: 50%
opacity: 1
&:after
position: absolute
width: 100%
top: 0
bottom: 0
background: rgba(0, 0, 0, 0.3)
content: ''
opacity: 0
@include transition(all, 0.3s, linear)
&:hover:after
opacity: 1
// PORT
.port
position: absolute
width: 100%
height: 100%
top: 0
left: 0
padding-top: 100px
background: #ffffff
background-color: #fafafa
z-index: 103
visibility: hidden
-webkit-transform: translateY(-100%)
transform: translateY(-100%)
border-bottom: 1px solid #d0d0d0
+transition(all, 0.5s, ease-in-out)
img
width: 50%
.description
float: left
width: 50%
max-height: 100%
padding: 0 40px 40px
overflow: auto
h1
font-size: 35px
line-height: 2.3
padding: 0
>*
opacity: 0
+transition(all, 0.5s, linear)
&.item_open
visibility: visible
-webkit-transform: translateY(0%)
transform: translateY(0%)
+transition(all, 0.4s, ease-in-out)
> *
opacity: 1
-webkit-transition-delay: 0.5s
transition-delay: 0.5s
.close
width: 21px
height: 21px
background: url(data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3C%21--%20Generator%3A%20Adobe%20Illustrator%2017.1.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200%29%20%20--%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0A%3Csvg%20version%3D%221.1%22%0A%09%20id%3D%22svg2%22%20xmlns%3Adc%3D%22http%3A//purl.org/dc/elements/1.1/%22%20xmlns%3Acc%3D%22http%3A//creativecommons.org/ns%23%22%20xmlns%3Ardf%3D%22http%3A//www.w3.org/1999/02/22-rdf-syntax-ns%23%22%20xmlns%3Asvg%3D%22http%3A//www.w3.org/2000/svg%22%0A%09%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2021%2021%22%0A%09%20enable-background%3D%22new%200%200%2021%2021%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cg%20id%3D%22layer1%22%20transform%3D%22translate%280%2C-1031.3622%29%22%3E%0A%09%3Cpath%20id%3D%22path2987%22%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20d%3D%22M0%2C1031.4l21%2C21%22/%3E%0A%09%3Cpath%20id%3D%22path2989%22%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20d%3D%22M21%2C1031.4l-21%2C21%22/%3E%0A%3C/g%3E%0A%3C/svg%3E%0A%0A) no-repeat
position: absolute
right: 10px
top: -121px
opacity: 1
z-index: 1004
+transition(all, 0.1s, ease-in-out)
.item_open &
opacity: 1
top: 0px
+transition(all, 0.3s, ease-in-out)
JavaScript Code
// portfolio
$('.gallery ul li a').click(function() {
var itemID = $(this).attr('href');
$('.gallery ul').addClass('item_open');
$(itemID).addClass('item_open');
return false;
});
$('.close').click(function() {
$('.port, .gallery ul').removeClass('item_open');
return false;
});
$(".gallery ul li a").click(function() {
$('html, body').animate({
scrollTop: parseInt($("#top").offset().top)
}, 400);
});
