Portfolio Template

Developer
Jimmy Lin
Size
2,581 Kb
Views
12,144
  1. Portfolio Template Previews
  2. Portfolio Template HTML Codes
  3. Portfolio Template CSS Codes
  4. Portfolio Template JS Codes

How do I make an portfolio template?

What is a portfolio template? How do you make a portfolio template? This script and codes were developed by Jimmy Lin on 11 December 2022, Sunday.

Portfolio Template Previews
IQ Test

Portfolio Template - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Portfolio Template</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
</header>
<!-- Navbar -->
<div class="text-center navbar-inverse navbar-fixed-top" > <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="scrollTo navbar-brand name" data-scrollTo="Top" href="#" > Jimmy Lin </a> <nav class="collapse navbar-collapse navbar-inverse navbar-right navHeaderCollapse" role="navigation"> <ul class="nav navbar-nav navbar-right" id="menu" role="navigation"> <li><a class="scrollTo" data-scrollTo="About" href="#">About</a></li> <li><a class="scrollTo" data-scrollTo="Portfolio" href="#">Portfolio</a></li> <li><a class="scrollTo" data-scrollTo="Contact" href="#">Contact</a></li> </ul>
</nav>
</div> <!-- Page Starts-->
<div class="pageOne text-center" id="Top"> <h1>Top</h1>
</div>
<div class="pageTwo text-center" id="About"> <h1>About</h1>
</div>
<div class="pageThree text-center" id="Portfolio"> <h1>Portfolio</h1>
</div>
<div class="pageFour text-center" id="Contact"> <h1>Contact</h1>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Portfolio Template - Script Codes CSS Codes

body { color: white; font-family:lobster;
}
.navbar-brand { padding: 10px 0; border: none; margin-bottom:0;
}
.navbar-inverse { padding: 10px 0; border: none; margin-bottom:0;
}
.name { font-family:lobster; font-size: 40px; margin-left:20px; margin-top:10px;
}
.navbar-nav{ font-family:lobster; font-size: 25px; color: white; margin-right:20px;
}
.pageOne { background:url(https://wallpaperscraft.com/image/laptop_black_yellow_light_32932_2560x1440.jpg); background-size: cover; height:650px; margin-top: -300px;
}
.pageTwo { background:url(http://wallpapercave.com/wp/tHxS8my.jpg); background-size: cover; height:650px; margin-top:px;
}
.pageThree { background:url(http://wallpapercave.com/wp/dIg5Taq.jpg); background-size: cover; height:800px;
}
.pageFour { background:url(http://www.changewallpaper.com/cache/Technology/Technology-technologyHD-wallpaper-15_1920.jpg); background-size: cover; height:800px;
}
.pageOne { margin-top:80px;
}
h1{ padding:0; margin-top:0px;
}

Portfolio Template - Script Codes JS Codes

$('a.scrollTo').on('click', function(){ var scrollTo = $(this).attr('data-scrollTo'); $('body, html').animate({ "scrollTop": $('#'+scrollTo).offset().top-80}, 400); return false;
});
$(document).ready(function() { $('body').addClass('js'); var $menu = $('#menu'), $menulink = $('.menu-link');
$menulink.click(function() { $menulink.toggleClass('active'); $menu.toggleClass('active'); return false;
});});
Portfolio Template - Script Codes
Portfolio Template - Script Codes
Home Page Home
Developer Jimmy Lin
Username odylic
Uploaded December 11, 2022
Rating 3
Size 2,581 Kb
Views 12,144
Do you need developer help for Portfolio Template?

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!

Jimmy Lin (odylic) Script Codes
Name
Firefly tribute
Simon Game
Pomodoro Clock
Mark Down Previewer
Local Weather
Portfolio Trial 1
TwitchTV JSON API 2
Calculator
Tic Tac Toe Game
Random Quote Generator
Create amazing Facebook ads 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!