Portfolio Template

Developer
Leolo
Size
3,546 Kb
Views
36,432
  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 Leolo on 16 September 2022, Friday.

Portfolio Template Previews
IQ Test

Portfolio Template - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Portfolio Template</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet prefetch' href='https://gitcdn.link/repo/Chalarangelo/mini.css/master/dist/mini-default.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header class="sticky row"> <div id="navbar" class="col-sm-12 col-lg-8 col-lg-offset-2"> <a href="#" role="button" target="_blank"> <i class="fa fa-home" aria-hidden="true"></i> Home</a> <a href="#projects" role="button"> <i class="fa fa-code" aria-hidden="true"></i> Projects</a> <a id="profile-link" href="http://github.com/diomed" role="button" target="_blank"> <i class="fa fa-github-square" aria-hidden="true"></i> My Github</a> <a id="profile-link" href="https://www.freecodecamp.com/diomed" role="button" target="_blank"> <i class="fa fa-free-code-camp" aria-hidden="true"></i> My freeCodeCamp</a> </div>
</header>
<div class="container"> <div id="welcome-section" class="box"> <h1 class="iSyu">Welcome</h1> </div> <div class="box flex ">
<div class="row"> <div id="projects" class="box col-sm-12 col-md-4 col-lg-3"> <h2>Projects</h2> <p> <div class="project-tile"> <a class="wut" href="http://codepen.io/diomed/pen/aBQqLx/">Tribute page 4 Scarlett Johansson</a> </div> <p>some cool description
Fragile,yet sum impsum. Thank you for smoking.
Earum recusandae animi accusamus quisquam reprehenderit sed voluptates, numquam, quibusdam velit dolores repellendus tempora corrupti accusantium obcaecati voluptate totam evenie?</p> </div> <div class="box col-sm-12 col-md-4 col-lg-3"> <p data-height="265" data-theme-id="0" data-slug-hash="aBQqLx" data-default-tab="html,result" data-user="diomed" data-embed-version="2" data-pen-title="Scarlett Johansson Tribute Page" class="codepen">See the Pen <a href="http://codepen.io/diomed/pen/aBQqLx/">Scarlett Johansson Tribute Page</a> by diomed (<a href="http://codepen.io/diomed">@diomed</a>) on <a href="http://codepen.io">CodePen</a>.</p> <script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script> </div> <div class="card col-sm-12 col-md-4 col-lg-3"> <img src="http://ultraimg.com/images/yHrYA.jpg" class="section media"> <h3 class="section double-padded">Do androids dream of electric sheep?</h3> <p class="section double-padded">The obvious and implicit answer to the question is, "No, they dream of real sheep", just as we do..</p> </div> </div>
</div>
</div>
<footer> <div class="col-sm col-md-10 col-md-offset-1"> <p> <i class="fa fa-chevron-left" aria-hidden="true"></i> Copyright &copy; 2017 | Built using <a href="https://chalarangelo.github.io/mini.css/">mini.css</a> <i class="fa fa-chevron-right" aria-hidden="true"></i> </p> </div>
</footer>
<!-- Material button -->
<button class="material-scrolltop" type="button"></button> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://gitcdn.link/repo/freeCodeCamp/testable-projects-fcc/master/build/bundle.js'></script> <script src="js/index.js"></script>
</body>
</html>

Portfolio Template - Script Codes CSS Codes

@import url('https://fonts.googleapis.com/css?family=Nunito&subset=latin-ext');
*
{margin:0; padding:0;}
#navbar {font-weight:bold;}
#welcome-section{height: calc(100vh - 80px);
background:url(https://i.imgbox.com/8rBbS4s4.jpeg);
background-size:cover;}
.fa {color:#8493bf;}
.box { background-color: #fafafa; padding: 40px; box-shadow: 0 8px 16px rgba(0, 20, 80, .02), 0 4px 16px rgba(0, 0, 0, .07); transition-delay: 0.2s; transition-duration: 220ms; border-radius: 8px; margin: 20px;
}
.hei { height: 100%;
}
p { font-family: 'Nunito', sans-serif; font-size: 1em; color: #8493bf;
}
.iSyu {text-align: center;}
.wut{padding-left:10px;}
.flex {display:flex;
justify-content:center;}
@media (max-width: 600px) {
#welcome-section{height: 10vh;}
}
/* Scrollbar */
::-webkit-scrollbar-corner{background:transparent;display:none}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:#192024;border-radius:30px}
::-webkit-scrollbar-thumb{border-radius:30px;background: #fafafa;-webkit-box-shadow:rgba(0, 0, 0, .07)}
/* End Scrollbar */

Portfolio Template - Script Codes JS Codes

'use strict';
// const project_name = 'tribute-page';
var project_name = 'portfolio';
localStorage.setItem('example_project', 'Personal Portfolio');
Portfolio Template - Script Codes
Portfolio Template - Script Codes
Home Page Home
Developer Leolo
Username diomed
Uploaded September 16, 2022
Rating 3
Size 3,546 Kb
Views 36,432
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!

Leolo (diomed) Script Codes
Name
Dropotron
Flexbox-timeline
Week.plan
IVolunteer
A Pen by leolo
UI KIT - modal
Portfolio
Particles.js
Double-layer background
Smooth.tabs
Create amazing SEO content 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!