Portfolio

Developer
MOHIM
Size
6,503 Kb
Views
6,072
  1. Portfolio Previews
  2. Portfolio HTML Codes
  3. Portfolio CSS Codes
  4. Portfolio JS Codes

How do I make an portfolio?

What is a portfolio? How do you make a portfolio? This script and codes were developed by MOHIM on 18 January 2023, Wednesday.

Portfolio Previews
IQ Test

Portfolio - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>portfolio</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" media="screen">
<script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
<!-- start header section -->
<div class="hader"> <nav class="navbar navbar-default navbar-fixed-top style_nav" data-spy="affix" data-offset-top="10" data-offset-bottom="200"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand style_brand" href="#"><img class="img-responsive" src="img/logo.png"></a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav pull-right"> <li><a href="#contact_us">HOME</a> </li> <li class="dropdown"><a href="#">PAGES <i class="fa fa-angle-down" aria-hidden="true"></i></a> <div class="dropdown-content wow fadeInUp" data-wow-duration="0.8s"> <a href="#">Services</a> <a href="#">Faq</a> <a href="#">Error Page</a> </div> </li> <li class="dropdown"><a href="#">PORTFOLIO <i class="fa fa-angle-down" aria-hidden="true"></i></a> <div class="dropdown-content wow fadeInUp" data-wow-duration="0.8s"> <a href="#">Services</a> <a href="#">Faq</a> <a href="#">Error Page</a> </div> </li> <li class="dropdown"><a href="#">Blog <i class="fa fa-angle-down" aria-hidden="true"></i></a> <div class="dropdown-content wow fadeInUp" data-wow-duration="0.8s"> <a href="#">Blog Masonry</a> <a href="#">Blog With Sidebar</a> </div> </li> <li class="dropdown"><a href="#">CONTACT</a> </li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container-fluid --> </nav>
</div>
<!-- end header section -->
<!--======================================================================================================= -->
<!-- -->
<div class="pageTitle parallax" style="background-image: url(http://commonpixel.com/themes/edgar/images/examples/bg_parallax_04.jpg)"> <div class="inner title"> <div class="container"> <h1>Our Portfolio</h1> </div> </div>
</div>
<!-- -->
<!-- start our portfolio section -->
<div id="portfoilio" class="container"> <div class="row"> <div class="gallery col-lg-12 col-md-12 col-sm-12 col-xs-12"> </div> <div align="center"> <button class="btn btn-default filter-button active" data-filter="all">All</button> <button class="btn btn-default filter-button" data-filter="hdpe">WEB DESIGN</button> <button class="btn btn-default filter-button" data-filter="sprinkle">PRINT</button> <button class="btn btn-default filter-button" data-filter="spray">MULTIMEDIA </button> </div> <br/> <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- Simple Pricing Tables --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-9155049400353686" data-ad-slot="6591520258" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <a class="thumbnail fancybox" rel="ligthbox" href="http://commonpixel.com/themes/edgar/images/examples/work_02.jpg"> <img src=" http://commonpixel.com/themes/edgar/images/examples/work_02.jpg" class="img-responsive"></a> </div> <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter sprinkle"> <a class="thumbnail fancybox" rel="ligthbox" href=" http://commonpixel.com/themes/edgar/images/examples/work_03.jpg"> <img src="http://commonpixel.com/themes/edgar/images/examples/work_03.jpg" class="img-responsive"></a> </div> <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter spray"> <a class="thumbnail fancybox" rel="ligthbox" href="http://commonpixel.com/themes/edgar/images/examples/work_04.jpg"> <img src="http://commonpixel.com/themes/edgar/images/examples/work_04.jpg" class="img-responsive"></a> </div> <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe"> <a class="thumbnail fancybox" rel="ligthbox" href="http://commonpixel.com/themes/edgar/images/examples/work_05.jpg"> <img src="http://commonpixel.com/themes/edgar/images/examples/work_05.jpg" class="img-responsive"></a> </div> <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter spray"> <a class="thumbnail fancybox" rel="ligthbox" href="http://commonpixel.com/themes/edgar/images/examples/work_03.jpg"> <img src="http://commonpixel.com/themes/edgar/images/examples/work_03.jpg" class="img-responsive"></a> </div> <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe"> <a class="thumbnail fancybox" rel="ligthbox" href="http://commonpixel.com/themes/edgar/images/examples/work_04.jpg"> <img src="http://commonpixel.com/themes/edgar/images/examples/work_04.jpg" class="img-responsive"></a> </div> <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter spray"> <a class="thumbnail fancybox" rel="ligthbox" href="http://commonpixel.com/themes/edgar/images/examples/work_03.jpg"> <img src="http://commonpixel.com/themes/edgar/images/examples/work_03.jpg" class="img-responsive"></a> </div> <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter spray"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- Simple Pricing Tables --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-9155049400353686" data-ad-slot="6591520258" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <a class="thumbnail fancybox" rel="ligthbox" href="http://commonpixel.com/themes/edgar/images/examples/work_05.jpg"> <img src="http://commonpixel.com/themes/edgar/images/examples/work_05.jpg" class="img-responsive"></a> </div> <div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter sprinkle"> <a class="thumbnail fancybox" rel="ligthbox" href="http://commonpixel.com/themes/edgar/images/examples/work_02.jpg"> <img src="http://commonpixel.com/themes/edgar/images/examples/work_02.jpg" class="img-responsive"></a> </div> </div>
</div>
<!-- end our portfolio section -->
<footer class="mastFooter"> <div class="inner"> <!-- START banner --> <div class="banner"> <div class="container"> <div class="row"> <div class="col-sm-8"> <h3>Take control of your ideas</h3> <p>Drop us a line today and we’ll get back to you with a custom business proposition</p> </div> <div class="col-sm-4 rightAlign xsAlignReset"> <a href="#" class="button primary large">Order now</a> </div> </div> </div> </div> <!-- END banner --> <div class="container"> <div class="row"> <div class="col-sm-3"> <div class="logo"> <a href="index.html"><img src="http://commonpixel.com/themes/edgar/images/logo.png" data-rjs="2" alt="My Company name"></a> </div> <p class="copyright">© Edgar 2016. All rights reserved.</p> </div> <div class="col-sm-3"> <h6>Links</h6> <ul class="links"> <li><a href="about.html">About us</a></li> <li><a href="blog.html">Latest news</a></li> <li><a href="projects.html">Our projects</a></li> <li><a href="services.html">Services</a></li> <li><a href="contact.html">Contact us</a></li> </ul> </div> <div class="col-sm-3"> <h6>Find us here</h6> <ul class="contact"> <li> <i class="fa fa-envelope"></i> [email protected] </li> <li> <i class="fa fa-phone"></i> +5 6800 377 887 </li> <li> <i class="fa fa-map-marker"></i> 23 Park Lane Terrace, SW03N, London, UK </li> </ul> </div> <div class="col-sm-3"> <h6>Social</h6> <ul class="social"> <li> <a href="#"><i class="fa fa-facebook"></i></a> </li> <li> <a href="#"><i class="fa fa-twitter"></i></a> </li> <li> <a href="#"><i class="fa fa-pinterest"></i></a> </li> <li> <a href="#"><i class="fa fa-linkedin"></i></a> </li> <li> <a href="#"><i class="fa fa-google-plus"></i></a> </li> </ul> </div> </div> </div> </div>
</footer>
<!-- -->
<!-- End footer section -->
<!-- Return to Top -->
<a href="javascript:" id="return-to-top"><i class="icon-chevron-up"></i></a>
<!-- ICON NEEDS FONT AWESOME FOR CHEVRON UP ICON -->
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<script> // ===== Scroll to Top ==== $(window).scroll(function() { if ($(this).scrollTop() >= 50) { // If page is scrolled more than 50px $("#return-to-top").fadeIn(200); // Fade in the arrow } else { $("#return-to-top").fadeOut(200); // Else fade out the arrow } }); $("#return-to-top").click(function() { // When arrow is clicked $("body,html").animate( { scrollTop: 0 // Scroll to top of body }, 500 ); });
</script> <script src="js/index.js"></script>
</body>
</html>

Portfolio - Script Codes CSS Codes

* { margin: 0; padding: 0;
}
.hader { position: relative; width: 100%;
}
.hader .style_nav { background-color: transparent; border-bottom: 1px solid white;
}
.hader .style_nav .style_brand { padding-top: 23px;
}
/* Shutter Out Horizontal */
.navbar-default .navbar-nav > li > a { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; position: relative; background-color: transparent; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; border-bottom: 1px solid transparent; color: white!important; font-family: 'Montserrat', sans-serif; font-size: 0.8em; letter-spacing: 2px;
}
.navbar-default .navbar-nav > li > a:before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; r-bottom: 2px solid #000; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 50%; transform-origin: 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; color: #000; transition: ease 0.5s;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > li > a:active { color: #000; transition: ease 0.5s;
}
.navbar-default .navbar-nav > li > a:hover:before,
.navbar-default .navbar-nav > li > a:focus:before,
.navbar-default .navbar-nav > li > a:active:before { -webkit-transform: scaleX(1); transform: scaleX(1); transition: ease 0.5s;
}
.hader .nav.navbar-nav.pull-right { margin-top: 2%;
}
.video-part-content .carousel-caption h1 { font-size: 50px;
}
.video-part-content .carousel-caption p { font-size: 20px;
}
.affix { width: 100%; transition: ease 0.5s; background: rgba(11, 25, 45, 0.93)!important; opacity: 0.8; border-bottom: 2px solid #5775bd !important;
}
.navbar-default.affix .navbar-nav > li > a { color: #333;
}
.btn-info { background: #5674bc; border: 1px solid #5674bc; border-radius: 0px; transition: ease 0.5s;
}
.btn-info { color: #5674bc; transition: ease 0.5s;
}
.full-width { width: 100%; float: left;
}
.video-part-content .btn-info:hover { color: #fff; border: 1px solid #fff; transition: ease 0.5s; background: transparent;
}
.navbar-default { background-color: transparent; border: none;
}
.navbar-default .navbar-nav > li > a { color: #fff;
}
.navbar-nav > li > a { padding-bottom: 6px; padding-top: 15px;
}
.btn-info { background: #5674bc none repeat scroll 0 0; border: 1px solid #5674bc; border-radius: 0; color: #fff; transition: all 0.5s ease 0s;
}
@-webkit-keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; }
}
@keyframes fadeInDown { from { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; }
}
.fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown;
}
@-webkit-keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; }
}
@keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; }
}
.fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; animation-delay: 1s; animation-duration: 2s;
}
.dropbtn { display: inline-block; color: white; text-align: center; padding: 14px 16px; text-decoration: none;
}
li.dropdown { display: inline-block;
}
.dropdown-content { display: none; position: absolute; background-color: #132134; min-width: 200px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1;
}
.dropdown-content a { color: white; padding: 12px 16px; text-decoration: none; display: block; text-align: right; font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 300;
}
.dropdown-content a:hover { color: #FFA726; text-decoration: none; padding: 12px 16px; text-decoration: none; display: block; text-align: right; font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 300; background-color: #132134!important;
}
.dropdown-content a:hover { background-color: #f1f1f1
}
.dropdown:hover .dropdown-content { display: block;
}
/* */
/* */
/* start about us style */
.parallax { color: #fff; background-position: 50% 50%; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; position: relative;
}
.pageTitle .inner.title { padding: 150px 0 60px 0;
}
.parallax .inner { padding-top: 60px; padding-bottom: 60px; background: rgba(11, 25, 45, 0.8);
}
.pageTitle .inner.title h1 { font-size: 3em; position: relative; color: #fff; margin-bottom: 20px; font-family: 'Montserrat', sans-serif; font-weight: 600; line-height: 1.4;
}
.pageTitle .inner.title h1:after { content: ""; position: absolute; bottom: 0; left: 0; width: 30px; height: 1px; background: #ffa726;
}
/* */
/* */
/* end about us css*/
/* */
/* */
/* start portfolio section */
#portfoilio{ margin-top:100px; margin-bottom:100px;
}
.gallery-title
{ font-size: 36px; color: #42B32F; text-align: center; font-weight: 500; margin-bottom: 70px;
}
.gallery-title:after { content: ""; position: absolute; width: 7.5%; left: 46.5%; height: 45px; border-bottom: 1px solid #5e5e5e;
}
.btn-default{ color:#23344b!important; display: inline-block; white-space: pre; text-transform: uppercase; font-size: .85em; font-family: "Montserrat", sans-serif; font-weight:bold!important;
}
.btn-default:active { color: #333; background-color: #fff; border-color:white!important;
} .btn-default .active { color: #ffa726!important;
}
.filter-button:hover
{ text-align: center; color: #ffffff; background-color: #42B32F;
}
.filter-button.active
{ background-color: #42B32F; color: white;
}
.port-image
{ width: 100%;
}
.gallery_product
{ margin-bottom: 30px;
} /* end portfolio sction */
/* start footer section */
.mastFooter { position: relative; text-align: left; color: #abacb1; overflow: hidden; background: url(http://commonpixel.com/themes/edgar/images/examples/bg_parallax_05.jpg) no-repeat 50% 50% / cover fixed;
}
.mastFooter .inner { padding: 60px 0; background: rgba(11, 25, 45, 0.85);
}
.mastFooter .banner { border-bottom: 1px solid rgba(255, 255, 255, 0.2); padding-bottom: 45px; margin-bottom: 50px; color: #fff;
}
.banner h3 { margin-bottom: 5px; font-size: 2em; font-family: 'Montserrat', sans-serif; font-weight: 600; line-height: 1.4;
}
.rightAlign { text-align: right;
}
.banner .button { margin-top: 15px;
}
.mastFooter .logo { margin-bottom: 30px;
}
.mastFooter .copyright { font-size: 12px; margin-bottom: 0;
}
.mastFooter h6 { color: #fff; margin: 0 0 40px 0; font-weight: 300; font-family: 'Montserrat', sans-serif; line-height: 1.4
}
.mastFooter .links,
.mastFooter .contact { margin: 0;
}
.mastFooter a { color: #abacb1;
}
.links,
.contact { list-style-type: none;
}
.links li,
.contact li { margin-top: 10px;
}
.links li a:hover { text-decoration: none; color: #ffa726; text-decoration: none; -o-transition: color 0.2s ease-in; -webkit-transition: color 0.2s ease-in; -moz-transition: color 0.2s ease-in; transition: color 0.2s ease-in;
}
.mastFooter .social li { display: inline-block; margin-right: 10px;
}
.mastFooter .social a { color: #ffa726;
}
.mastFooter .social a:hover { color: white;
} .button { position: relative; display: inline-block; padding: 8px 28px; background: none; font-weight: normal; text-transform: uppercase; font-size: .9em;
}
.button.primary { background: #ffa726; color: #fff;
}
.button.primary:hover { background: #0b192d; color: #fff; text-decoration: none;
}
#return-to-top { position: fixed; bottom: 20px; right: 20px; background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.7); width: 50px; height: 50px; display: block; text-decoration: none; -webkit-border-radius: 35px; -moz-border-radius: 35px; border-radius: 35px; display: none; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;
}
#return-to-top i { color: #fff; margin: 0; position: relative; left: 16px; top: 13px; font-size: 19px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;
}
#return-to-top:hover { background: rgba(0, 0, 0, 0.9);
}
#return-to-top:hover i { color: #fff; top: 5px;
}
.scroll-effect-hidden { opacity: 0; }
.visible { opacity: 1; }
// override animate CSS transform - optional
@keyframes fadeInDown {	0% { transform: translate3d(0,-10%,0) }
}

Portfolio - Script Codes JS Codes

$(document).ready(function(){ $(".filter-button").click(function(){ var value = $(this).attr('data-filter'); if(value == "all") { //$('.filter').removeClass('hidden'); $('.filter').show('1000'); } else {
// $('.filter[filter-item="'+value+'"]').removeClass('hidden');
// $(".filter").not('.filter[filter-item="'+value+'"]').addClass('hidden'); $(".filter").not('.'+value).hide('3000'); $('.filter').filter('.'+value).show('3000'); } });
});
$(document).ready(function(){ //FANCYBOX //https://github.com/fancyapps/fancyBox $(".fancybox").fancybox({ openEffect: "none", closeEffect: "none" });
});
Portfolio - Script Codes
Portfolio - Script Codes
Home Page Home
Developer MOHIM
Username MOHIM
Uploaded January 18, 2023
Rating 3
Size 6,503 Kb
Views 6,072
Do you need developer help for 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!

MOHIM (MOHIM) Script Codes
Name
Mop-2
Navigation var
Big-1
Juice
Hotel
Our services
Footer item for projects
Jq_xam
Project_one
Faq
Create amazing marketing copy 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!