FreeCodeCamp : Build a Personal Portfolio Webpage

Size
3,867 Kb
Views
14,168

How do I make an freecodecamp : build a personal portfolio webpage?

What is a freecodecamp : build a personal portfolio webpage? How do you make a freecodecamp : build a personal portfolio webpage? This script and codes were developed by Markku Lehmonen on 30 November 2022, Wednesday.

FreeCodeCamp : Build a Personal Portfolio Webpage Previews

FreeCodeCamp : Build a Personal Portfolio Webpage - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>FreeCodeCamp : Build a Personal Portfolio Webpage</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.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> <nav class="navbar navbar-default navbar-fixed-top container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Sharp Dalson</a> </div> <div class="collapse navbar-collapse navbar-right" id="myNavbar"> <ul class="nav navbar-nav"> <li><a href="#about">About</a></li> <li><a href="#skills">Skills</a></li> <li><a href="#showcase">My Work</a></li> <li><a href="#contact">Contact</a></li> </ul> </div>
</nav>
<section id="about" class="container-fluid testBorder"> <div class="row center-block testBorder"> <div class="col-sm-6 testBorder"> <img src="https://tinyurl.com/jf9uu7d" alt="Image Placeholder" class="img-responsive center-block testBorder"/> </div> <div class="col-sm-6 testBorder"> <h1 class="testBorder">Hello, <small>I am a developer.</small></h1> <p class="testBorder">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed posuere interdum sem. Quisque ligula eros ullamcorper quis, lacinia quis facilisis sed sapien. Mauris varius diam vitae arcu. Sed arcu lectus auctor vitae, consectetuer et venenatis eget velit. Sed augue orci, lacinia eu tincidunt et eleifend nec lacus. Donec ultricies nisl ut felis, suspendisse potenti. Lorem ipsum ligula ut hendrerit mollis, ipsum erat vehicula risus, eu suscipit sem libero nec erat. Aliquam erat volutpat. Sed congue augue vitae neque. Nulla consectetuer porttitor pede. Fusce purus morbi tortor magna condimentum vel, placerat id blandit sit amet tortor.</p> </div> </div>
</section>
<section id="skills" class="container-fluid testBorder"> <div class="row center-block testBorder"> <h1 class="testBorder">Skills, <small>I have them.</small></h1> </div> <div class="row center-block skillRow testBorder"> <div class="col-sm-12 center-block testBorder"> <div class="skillBox"> <h4 class="skillSetTitle testBorder">Frontend</h4> <div class="skill testBorder"> <img src="https://tinyurl.com/jf9uu7d" alt="Image Placeholder" height="50" width="50" class="center-block testBorder"/> <p class="text-center testBorder">HTML5</p> </div> <div class="skill testBorder"> <img src="https://tinyurl.com/jf9uu7d" alt="Image Placeholder" height="50" width="50" class="center-block testBorder"/> <p class="text-center testBorder">CSS3</p> </div> <div class="skill testBorder"> <img src="https://tinyurl.com/jf9uu7d" alt="Image Placeholder" height="50" width="50" class="center-block testBorder"> <p class="text-center testBorder">JavaScript</p> </div> <div class="skill testBorder"> <img src="https://tinyurl.com/jf9uu7d" alt="Image Placeholder" height="50" width="50" class="center-block testBorder"/> <p class="text-center testBorder">Bootstrap</p> </div> <div class="skill testBorder"> <img src="https://tinyurl.com/jf9uu7d" alt="Image Placeholder" height="50" width="50" class="center-block testBorder"/> <p class="text-center testBorder">JQuery</p> </div> <div class="skill testBorder"> <img src="https://tinyurl.com/jf9uu7d" alt="Image Placeholder" height="50" width="50" class="center-block testBorder"/> <p class="text-center testBorder">React.js</p> </div> </div> </div> </div> <div class="row center-block skillRow testBorder"> <div class="col-sm-7 center-block testBorder"> <div class="skillBox"> <h4 class="skillSetTitle testBorder">Backend</h4> <div class="skill testBorder"> <img src="https://tinyurl.com/jf9uu7d" alt="Image Placeholder" height="50" width="50" class="center-block testBorder"/> <p class="text-center testBorder">JavaScript</p> </div> <div class="skill testBorder"> <img src="https://tinyurl.com/jf9uu7d" alt="Image Placeholder" height="50" width="50" class="center-block testBorder"/> <p class="text-center testBorder">C#</p> </div> <div class="skill testBorder"> <img src="https://tinyurl.com/jf9uu7d" alt="Image Placeholder" height="50" width="50" class="center-block testBorder"/> <p class="text-center testBorder">Node.js</p> </div> </div> </div> <div class="quickFixBreak testBorder visible-xs"></div> <!-- Adding little gap on mobile devices --> <div class="col-sm-5 center-block testBorder"> <div class="skillBox"> <h4 class="skillSetTitle testBorder">Database</h4> <div class="skill testBorder"> <img src="https://tinyurl.com/jf9uu7d" alt="Image Placeholder" height="50" width="50" class="center-block testBorder"/> <p class="text-center testBorder">SQL</p> </div> <div class="skill testBorder"> <img src="https://tinyurl.com/jf9uu7d" alt="Image Placeholder" height="50" width="50" class="center-block testBorder"/> <p class="text-center testBorder">MySQL</p> </div> </div> </div> </div> </div> <div class="row center-block skillRow testBorder"> <div class="col-sm-12 center-block testBorder"> <div class="skillBox"> <h4 class="skillSetTitle testBorder">Other stuff</h4> <div class="skill testBorder"> <img src="https://tinyurl.com/jf9uu7d" alt="Image Placeholder" height="50" width="50" class="center-block testBorder"/> <p class="text-center testBorder">Photoshop</p> </div> <div class="skill testBorder"> <img src="https://tinyurl.com/jf9uu7d" alt="Image Placeholder" height="50" width="50" class="center-block testBorder"/> <p class="text-center testBorder">Krita</p> </div> <div class="skill testBorder"> <img src="https://tinyurl.com/jf9uu7d" alt="Image Placeholder" height="50" width="50" class="center-block testBorder"> <p class="text-center testBorder">Blender</p> </div> <div class="skill testBorder"> <img src="https://tinyurl.com/jf9uu7d" alt="Image Placeholder" height="50" width="50" class="center-block testBorder"/> <p class="text-center testBorder">Unity</p> </div> <div class="skill testBorder"> <img src="https://tinyurl.com/jf9uu7d" alt="Image Placeholder" height="50" width="50" class="center-block testBorder"/> <p class="text-center testBorder">Sketch</p> </div> </div> </div> </div>
</section>
<section id="showcase" class="container-fluid testBorder"> <div class="row center-block testBorder"> <h1 class=" testBorder">My Work, <small> this is what I do...</small></h1> </div> <div class="row center-block testBorder"> <div class="col-xs-6 col-sm-3 testBorder"> <a href="#empty" class="thumbnail testBorder"> <img src="https://tinyurl.com/jf9uu7d" alt="Placeholder for an image"> </a> </div> <div class="col-xs-6 col-sm-3 testBorder"> <a href="#empty" class="thumbnail testBorder"> <img src="https://tinyurl.com/jf9uu7d" alt="Placeholder for an image"> </a> </div> <div class="col-xs-6 col-sm-3 testBorder"> <a href="#empty" class="thumbnail testBorder"> <img src="https://tinyurl.com/jf9uu7d" alt="Placeholder for an image"> </a> </div> <div class="col-xs-6 col-sm-3 testBorder"> <a href="#empty" class="thumbnail testBorder"> <img src="https://tinyurl.com/jf9uu7d" alt="Placeholder for an image"> </a> </div> </div> <div class="row center-block testBorder"> <div class="col-xs-6 col-sm-3 testBorder"> <a href="#empty" class="thumbnail"> <img src="https://tinyurl.com/jf9uu7d" alt="Placeholder for an image"> </a> </div> <div class="col-xs-6 col-sm-3 testBorder"> <a href="#empty" class="thumbnail testBorder"> <img src="https://tinyurl.com/jf9uu7d" alt="Placeholder for an image"> </a> </div> <div class="col-xs-6 col-sm-3 testBorder"> <a href="#empty" class="thumbnail testBorder"> <img src="https://tinyurl.com/jf9uu7d" alt="Placeholder for an image"> </a> </div> <div class="col-xs-6 col-sm-3 testBorder"> <a href="#empty" class="thumbnail testBorder"> <img src="https://tinyurl.com/jf9uu7d" alt="Placeholder for an image"> </a> </div> </div> <div class="row center-block testBorder"> <h1 class="text-right testBorder"><small> ...and I do it well.</small></h1> </div>
</section>
<section id="contact" class="container-fluid testBorder"> <div class="row center-block testBorder"> <h1 class="text-center testBorder">A Contact, <small>we will get it.</small></h1> </div> <div class="row center-block text-center testBorder"> <i class="contactBox testBorder"> <i class="contactIcon fa fa-envelope" aria-hidden="true"></i> <br> <i class="contactInfo">sharp.dalson @ dmail.com</i> </i> <i class="contactBox testBorder"> <i class="contactIcon fa fa-skype" aria-hidden="true"></i> <br> <i class="contactInfo">SharpDalson</i> </i> </div> <div class="row center-block text-center testBorder"> <div class="punchLineContainer testBorder"> <i class="punchLine">Let's make a better future for both of us!</i> <div> </div>
</section>
<footer class="container-fluid testBorder"> <div class="row center-block text-center testBorder"> <div class="socialMediaBox testBorder"> <a href="#empty" class="socialMediaButton testBorder"> <i class="fa fa-linkedin" aria-hidden="true"></i> </a> <a href="#empty" class="socialMediaButton testBorder"> <i class="fa fa-facebook" aria-hidden="true"></i> </a> <a href="#empty" class="socialMediaButton testBorder"> <i class="fa fa-twitter" aria-hidden="true"></i> </a> <!--<a href="#empty" class="socialMediaButton testBorder"> <i class="fa fa-deviantart" aria-hidden="true"></i> </a>--> <a href="#empty" class="socialMediaButton testBorder"> <i class="fa fa-instagram" aria-hidden="true"></i> </a> </div> </div> <div class="row center-block testBorder"> <p class="text-center testBorder"><small>&copy; 2016 Sharp Dalson.<br><small>All rights reserved.</small></small></p> </div>
</footer> <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

FreeCodeCamp : Build a Personal Portfolio Webpage - Script Codes CSS Codes

body {position: relative;} /* Needed for Bootstrap.Scrollspy */
h1 {font-weight: bold; margin-bottom:25px;}
.row {max-width: 1000px;}
/*.testBorder {border:1px #999999 solid;} /* For testing purposes only */
.skillRow {padding:15px; padding-right:0px;}
.skillSetTitle {position:absolute; top:-19px; left:15px; background-color:#aaaaaa; padding: 0px 5px 0px 5px; z-index:1}
.skillBox {border:1px #eeeeee solid; border-radius:10px; margin-left:-15px;}
.skill {display:inline-block; width: 100px; margin-top:15px; margin-bottom:0px;}
.quickFixBreak {height:30px;}
.contactBox {display:inline-block; margin:0px; width:275px; height:150px; padding-top:25px; color:#dddddd;}
.contactIcon {font-size:60px;}
.contactInfo {font-size:15px; font-weight:bold; font-style:normal;}
.punchLineContainer {margin:5px; padding:50px;}
.punchLine{font-size:25px;}
.socialMediaBox {display:inline-block; padding:5px; padding-left:0px;}
.socialMediaButton {display:block; height:35px; width:35px; float:left; margin-left:5px; font-size:30px;}
.socialMediaButton:link {color:#666666;}
.socialMediaButton:visited {color:#666666;}
.socialMediaButton:hover {color:#000000;}
.socialMediaButton:active {color:#666666;}
#about {padding-top:100px; padding-bottom:50px; color: #fff; background-color: #cccccc;}
#skills {padding-top:50px; padding-bottom:50px; color: #fff; background-color: #aaaaaa;}
#showcase {padding-top:50px; padding-bottom:50px; color: #fff; background-color: #cccccc;}
#contact {padding-top:50px; padding-bottom:0px; color: #fff; background-color: #aaaaaa;}
footer {padding-top:25px; min-height:120px;color: #fff; background-color: #ffffff; color: #333333;}

FreeCodeCamp : Build a Personal Portfolio Webpage - Script Codes JS Codes

$(document).ready(function() { $("body").attr("data-spy", "scroll"); $("body").attr("data-target", ".navbar"); $("body").attr("data-offset", "50");
});
FreeCodeCamp : Build a Personal Portfolio Webpage - Script Codes
FreeCodeCamp : Build a Personal Portfolio Webpage - Script Codes
Home Page Home
Developer Markku Lehmonen
Username SharpDal
Uploaded November 30, 2022
Rating 3
Size 3,867 Kb
Views 14,168
Do you need developer help for FreeCodeCamp : Build a Personal Portfolio Webpage?

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!

Markku Lehmonen (SharpDal) Script Codes
Name
A Pen by Markku Lehmonen
Create amazing captions 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!