Portfolio - Work In Progress

Developer
Sky
Size
4,572 Kb
Views
4,048
  1. Portfolio - Work In Progress Previews
  2. Portfolio - Work In Progress HTML Codes
  3. Portfolio - Work In Progress CSS Codes
  4. Portfolio - Work In Progress JS Codes

How do I make an portfolio - work in progress?

What is a portfolio - work in progress? How do you make a portfolio - work in progress? This script and codes were developed by Sky on 29 January 2023, Sunday.

Portfolio - Work In Progress Previews
IQ Test

Portfolio - Work In Progress - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Portfolio - Work In Progress</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header id="home"> <div class="container text-center header-content"> <h1>Portfolio<p class="lead">A project for Free Code Camp</p></h1> </div>
</header>
<nav class="navbar navbar-default navbar-inverse" data-spy="affix" data-offset="340"> <div class="container-fluid"> <!-- 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="smooth-scroll navbar-brand" href="#home">Home</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 navbar-right"> <li><a class="smooth-scroll" href="#about">About</a></li> <li><a class="smooth-scroll" href="#portfolio">Portfolio</a></li> <li><a class="smooth-scroll" href="#contact">Contact</a></li> </ul> </div> </div>
</nav>
<main> <section id="about"> <div class="container"> <h2 class="text-center section-title">About</h2> <div class="row"> <div class="col-xs-12 text-center section-summary"> Hello, I'm Sky! I'm a student at Free Code Camp and this is my portfolio. I hope you like it! </div> </div> </div> </section> <section id="portfolio"> <div class="container"> <h2 class="text-center section-title">Portfolio</h2> <div class="row text-center"> <div class="col-sm-6 col-md-4"> <div class="portfolio-col-content"> <a href="https://codepen.io/skycoder/full/LxOzBj" target="_blank"> <img class="img-responsive img-portfolio" src="https://s24.postimg.org/u6qxmgued/jokemachine.jpg"> </a> <p>Random Joke Machine</p> </div> </div> <div class="col-sm-6 col-md-4"> <div class="portfolio-col-content"> <a href="https://codepen.io/skycoder/full/GrQBdw/" target="_blank"> <img class="img-responsive img-portfolio" src="https://s23.postimg.org/99xvg2857/Show_The_Local_Weather.jpg"> </a> <p>Show the Local Weather</p> </div> </div> <div class="col-sm-6 col-md-4"> <div class="portfolio-col-content"> <a href="https://codepen.io/skycoder/pen/LxOzBj" target="_blank"> <img class="img-responsive img-portfolio" src="https://s14.postimg.org/3sxushtkh/Wikipedia.gif"> </a> <p>Wikipedia Search</p> </div> </div> <div class="col-sm-6 col-md-4"> <div class="portfolio-col-content"> <a href="https://codepen.io/skycoder/full/XpyrYN" target="_blank"> <img class="img-responsive img-portfolio" src="https://s3-us-west-2.amazonaws.com/i.cdpn.io/1025626.prrOvy.ccf18e0f-6bf3-4573-b5b1-fae7b484c06a.png"> </a> <p>Twitch.TV API</p> </div> </div> <div class="col-sm-6 col-md-4"> <div class="portfolio-col-content"> <a href="https://codepen.io/skycoder/full/XRXJJP" target="_blank"> <img class="img-responsive img-portfolio" src="https://s15.postimg.org/41p9djg17/calculator.gif"> </a> <p>Calculator</p> </div> </div> <div class="col-sm-6 col-md-4"> <div class="portfolio-col-content"> <a href="https://codepen.io/skycoder/pen/LxOzBj" target="_blank"> <img class="img-responsive img-portfolio" src="https://placehold.it/1024x600"> </a> <p>Tic Tac Toe</p> </div> </div> </div> </div> </section> <section id="contact"> <div class="container"> <h2 class="text-center section-title">Contact</h2> <div class="row social"> <div class="col-xs-12 text-center"> <a href="#"><i class="fa fa-linkedin-square"></i></a> <a href="#"><i class="fa fa-twitter-square"></i></a> <a href="#"><i class="fa fa-dribbble"></i></a> <a href="#"><i class="fa fa-codepen"></i></a> <a href="#"><i class="fa fa-github"></i></a> <a href="#"><i class="fa fa-free-code-camp"></i></a> </div> </div> </div> </section>
</main>
<footer class="text-muted container-fluid"> <div class="row text-center"> Sky &copy; 2017 </div>
</footer> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Portfolio - Work In Progress - Script Codes CSS Codes

html { background-color: #222;
}
body { background-color: #041526; color: #CCCFD5; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; min-height: 500px; min-width: 280px; max-width: 1200px; margin: 0 auto; position: relative;
}
header { height: 40vh; min-height: 200px; background-image: url('https://source.unsplash.com/7KLa-xLbSXA/1200x400'); background-size: cover; background-position: top center; background-repeat: no-repeat;
}
.header-content .lead { vertical-align: .35em;
}
.affix { z-index: 9999 !important;
}
.navbar { background-color: #000; border-radius: 0; border-style: none; width: 1200px; max-width: 100%;
}
.navbar .navbar-nav li a,
.navbar .navbar-header a { color: inherit; outline: none;
}
section { padding-bottom: 4em;
}
.section-title { margin-bottom: 1em;
}
.social a { border-radius: 50%; color: inherit; display: inline-block; font-size: 36px; height: 2.25em; line-height: 2.25em; margin-top: 1em; outline: none; -webkit-transition: background-color .5s ease-out; transition: background-color .5s ease-out; width: 2.25em;
}
.social a:hover { background-color: rgba(52,131,181,0.3);
}
#portfolio { background-color: #033649;
}
.portfolio-row { margin-bottom: 70px;
}
.img-portfolio:hover { -webkit-transition: box-shadow .25s; transition: box-shadow .25s; -webkit-transition: border-radius .5s; transition: border-radius .5s; box-shadow: 0 18px 17px 10px rgba(0, 0, 0, 0.2), 0 16px 20px 10px rgba(0, 0, 0, 0.19); border-radius: 12px;
}
.portfolio-col-content { background-color: #FFFFFF; color: #222; border: 1px solid white; margin-top: 1em; text-align: center;
}
.portfolio-col-content img { border: 1px solid #aaa;
}
.portfolio-col-content p { line-height: 3em; text-shadow: 0 2px #ddd; white-space: nowrap;
}
footer { background-color: #033649; -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; padding: 1em; width: 100%;
}

Portfolio - Work In Progress - Script Codes JS Codes

"use strict";
$(document).ready(function () { // Add scroll spy settings to <body> $('body').attr({ "data-spy": "scroll", "data-target": ".navbar", "data-offset": "50" }); // smooth scrolling $('.smooth-scroll').on('click', function (e) { $('html, body').stop().animate({ scrollTop: $($(e.target).attr('href')).offset().top - 35 }, 1200, 'easeInOutExpo'); e.preventDefault(); }); // social icon animations $('.social a').on('mouseenter', function (e) { return $(e.target).animateCss('jello'); });
});
// https://github.com/daneden/animate.css#usage
$.fn.extend({ animateCss: function animateCss(animationName) { var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend'; this.addClass('animated ' + animationName).one(animationEnd, function () { $(this).removeClass('animated ' + animationName); }); }
});
Portfolio - Work In Progress - Script Codes
Portfolio - Work In Progress - Script Codes
Home Page Home
Developer Sky
Username skycoder
Uploaded January 29, 2023
Rating 3
Size 4,572 Kb
Views 4,048
Do you need developer help for Portfolio - Work In Progress?

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!

Sky (skycoder) Script Codes
Name
Bootstrap 3 Grid Example
Wikipedia Viewer
Show the Local Weather - and a local background image
A Pen by Sky
FCC Leaderboard - vanilla JS
Feather Icons
Dark Sky - Simple 5-day Forecast
Vanilla JS Forismatic Example
Colors and Sounds
Calculator
Create amazing blog posts 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!