Portfolio Clone for FreeCodeCamp

Size
5,223 Kb
Views
38,456

How do I make an portfolio clone for freecodecamp?

Build with (nearly) 100% HTML and SCSS.**jQuery used to open links in new windowCloning functionality with some design changes of this pen: http://codepen.io/ThiagoFerreir4/full/eNMxEp. What is a portfolio clone for freecodecamp? How do you make a portfolio clone for freecodecamp? This script and codes were developed by Katie Inkblotty on 08 August 2022, Monday.

Portfolio Clone for FreeCodeCamp Previews

Portfolio Clone for FreeCodeCamp - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Portfolio Clone for FreeCodeCamp</title> <link href='https://fonts.googleapis.com/css?family=Lato:400,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="flex-container">
<div class="flex-item navbar"> <ul> <li><a href="#home">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#portfolio">Portfolio</a></li> <li><a href="#contact">Contact</a></li> </ul>
</div>
<div class="flex-item body">
<div class="header section" id="home"> <h1>Inkfinity Web Studio</h1> <div class="subhead">Split Splat Awesomeness</div> <div class="line"></div> <ul> <li><a href="https://twitter.com/freecodecamp" target="_blank"><i class="fa fa-twitter"></i>Twitter</a></li> <li><a href="https://github.com/FreeCodeCamp" target="_blank"><i class="fa fa-github"></i>GitHub</a></li> <li><a href="https://www.linkedin.com/edu/school?id=166029" target="_blank"><i class="fa fa-linkedin"></i>LinkedIn</a></li> <li><a href="http://freecodecamp.com/" target="_blank"><i class="fa fa-fire"></i>FreeCodeCamp</a></li> </ul>
</div>
<div class="about section flex-container-col" id="about"> <div class="flex-col descr"> <h3>Inkfinity Web Studio</h3> <p>Lorem ipsum dolor sit amet, velit nam, enim pellentesque enim. Elit et, in duis, accumsan faucibus. Erat tempor, ornare erat. Sit hac, duis scelerisque. Inceptos sollicitudin, massa porta sed. Est id, non mauris id, pede dictum. Integer sequi accumsan, viverra metus sem. Ipsum tempus nulla, consectetuer lectus. Placerat libero, dolor nec dolor.</p> <p>Accumsan nisl magnis. Odio cras enim. Laoreet quam elit. Sollicitudin justo mollis. Ac nec, magnis non augue, vivamus eget. Ac lobortis, nisi nonummy, lacinia quisque. Nullam sapien. Lorem pellentesque, vitae tellus amet, placerat faucibus vestibulum.</p> </div> <div class="flex-col box"> <h4>Proficiencies</h4> <div class="tinyhead">Languages & Frameworks:</div> <ul> <li>HTML5 & CSS3</li> <li>JavaScript & jQuery</li> <li>Angular.js</li> <li>Meteor.js</li> </ul> <div class="tinyhead">Tools & Expertise:</div> <ul> <li>Git</li> <li>Responsive Web Design</li> <li>Agile Frameworks</li> </ul> </div>
</div>
<div class="portfolio section" id="portfolio"> <h3>Portfolio of Recent Work</h3> <div class="flex-container-col"> <div class="flex-col work"> <img class="work-pic" src="http://www.engraversnetwork.com/files/placeholder.jpg"> <div class="box"> <div class="work-title">Example Site 1</div> <div class="work-tools">Angular.js and Meteor</div> </div> </div> <div class="flex-col work"> <img class="work-pic" src="http://www.engraversnetwork.com/files/placeholder.jpg"> <div class="box"> <div class="work-title">Example Site 2</div> <div class="work-tools">jQuery & CSS3</div> </div> </div> <div class="flex-col work"> <img class="work-pic" src="http://www.engraversnetwork.com/files/placeholder.jpg"> <div class="box"> <div class="work-title">Example Site 3</div> <div class="work-tools">Angular.js and SCSS</div> </div> </div> </div> <div class="flex-container-col"> <div class="flex-col work"> <img class="work-pic" src="http://www.engraversnetwork.com/files/placeholder.jpg"> <div class="box"> <div class="work-title">Example Site 4</div> <div class="work-tools">jQuery and SCSS</div> </div> </div> <div class="flex-col work"> <img class="work-pic" src="http://www.engraversnetwork.com/files/placeholder.jpg"> <div class="box"> <div class="work-title">Example Site 5</div> <div class="work-tools">Angular.js 2</div> </div> </div> <div class="flex-col work"> <img class="work-pic" src="http://www.engraversnetwork.com/files/placeholder.jpg"> <div class="box"> <div class="work-title">Example Site 6</div> <div class="work-tools">Pure CSS3 and HTML5</div> </div> </div> </div>
</div>
<div class="contact section" id="contact"> <h3>Connect with Inkfinity Web Studio</h3> <ul> <li class="email"><i class="fa fa-envelope"></i>[email protected]</li> <li class="twitter"><a href="http://twitter.com/freecodecamp" target="_blank"><i class="fa fa-twitter"></i>Twitter</a></li> <li class="github"><a href="http://github.com/freecodecamp" target="_blank"><i class="fa fa-github"></i>GitHub</a></li> <li class="linkedin"><a href="http://www.linkedin.com/edu/school?id=166029" target="_blank"><i class="fa fa-linkedin"></i>Linkedin</a></li> <li class="fcc"><a href="http://freecodecamp.com/" target="_blank"><i class="fa fa-fire"></i>FreeCodeCamp</a></li> </ul>
</div>
<div class="footer section"> <ul> <li><a href="#home">Home</a></li> <span class="dot">&#9679;</span> <li><a href="#about">About</a></li> <span class="dot">&#9679;</span> <li><a href="#portfolio">Portfolio</a></li> <span class="dot">&#9679;</span> <li><a href="#contact">Contact</a></li> </ul> <div class="credit"> Pretend Copyright &copy; Infinity Web Studio 2015. All Imaginary Rights Reserved </div>
</div>
</div>
</div> <script src="js/index.js"></script>
</body>
</html>

Portfolio Clone for FreeCodeCamp - Script Codes CSS Codes

body { background-color: #f6f6f6; background-image: url(https://upload.wikimedia.org/wikipedia/commons/e/e7/Blue_ink.jpg); background-size: cover; font-family: 'Lato', sans-serif; letter-spacing: 0.05em; -webkit-transition: all 0.2s; transition: all 0.2s;
}
body .line { background-color: #000; height: 2px; margin: 0 auto; width: 70%;
}
body ul { list-style-type: none;
}
body a { color: #0c0c14; text-decoration: none;
}
body i { margin: 0.5em;
}
body .box { background-color: #0c0c14; border: 1px solid #000; border-radius: 1em; box-shadow: -3px 5px 5px 1px rgba(0, 0, 0, 0.75); color: #cccccc; padding: 2%; width: 40em;
}
body .box li { margin-bottom: 0.5em;
}
.flex-container { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
}
.flex-container .header, .flex-container .footer { -webkit-box-flex: 1; -ms-flex: 1 100%; flex: 1 100%;
}
.flex-container-col { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: nowrap; flex-flow: nowrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
}
.navbar { background-color: #0c0c14; position: fixed; text-align: right; top: 0; width: 100%;
}
.navbar ul { margin: 0;
}
.navbar ul li { display: inline-block;
}
.navbar ul li a { color: #cccccc; line-height: 3em; padding: 1em 2.5em;
}
.navbar ul li a:hover { background-color: #01223f;
}
.section { padding: 2% 3%;
}
.section h3 { font-size: 1.5em; letter-spacing: 0.15em;
}
.header { letter-spacing: 0.1em; padding: 10em 0; padding-top: 14em; text-align: center;
}
.header h1 { color: #f6f6f6; font-size: 2.5em; font-weight: 300; letter-spacing: 0.2em;
}
.header .subhead { font-size: 1.2em; margin-top: 1.5em; margin-bottom: 1em;
}
.header ul li { display: inline-block; margin: 0.5em 0; padding: 0;
}
.header ul li a { background-color: #cccccc; border: 2px solid black; border-radius: 1em; box-shadow: -3px 5px 5px 1px rgba(0, 0, 0, 0.75); line-height: 3em; margin-right: 0.5em; padding: 1em 2em;
}
.header ul li a:hover { background-color: #0c0c14; color: #cccccc; margin: 0.25em 0em; padding: 1.25em 2.25em; -webkit-transition: all 0.2s; transition: all 0.2s;
}
.about { background-color: rgba(171, 171, 171, 0.5); padding: 2% 5%;
}
.about .descr { margin-right: 3em;
}
.portfolio h3 { background-color: rgba(171, 171, 171, 0.5); margin-bottom: 2em;
}
.portfolio .work-pic { height: auto; width: 85%;
}
.portfolio .box { border-radius: 0; margin-bottom: 5%; text-align: center; width: 81%;
}
.portfolio .box .work-title { font-size: 1.3em;
}
.portfolio .box .work-tools { font-size: 0.8em; margin-top: 1em;
}
.contact { background-color: rgba(171, 171, 171, 0.5);
}
.footer { background-color: #0c0c14; color: #cccccc;
}
.footer ul li { display: inline-block;
}
.footer ul li a { color: #cccccc;
}
.footer ul li a:hover { color: #03559e;
}
.footer .dot { font-size: 0.5em; text-align: center; vertical-align: middle; margin: 0 1em;
}
.footer .credit { color: #909090; font-size: 0.8em; margin-left: 3em; margin-top: 3em;
}

Portfolio Clone for FreeCodeCamp - Script Codes JS Codes

$('a').attr("target", "_blank").click(function(event) { $(window).open(this.href);
});
Portfolio Clone for FreeCodeCamp - Script Codes
Portfolio Clone for FreeCodeCamp - Script Codes
Home Page Home
Developer Katie Inkblotty
Username inkblotty
Uploaded August 08, 2022
Rating 3
Size 5,223 Kb
Views 38,456
Do you need developer help for Portfolio Clone for FreeCodeCamp?

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!

Katie Inkblotty (inkblotty) Script Codes
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!