FCC: Build a Personal Portfolio
How do I make an fcc: build a personal portfolio?
What is a fcc: build a personal portfolio? How do you make a fcc: build a personal portfolio? This script and codes were developed by Jeanine on 12 September 2022, Monday.
FCC: Build a Personal Portfolio Previews
FCC: Build a Personal Portfolio - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>FCC: Build a Personal Portfolio</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body> <div class="container"> <div id="wrapper"> <div class="overlay"></div> <!-- Sidebar --> <header class="header row"> <nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation"> <ul id="top" class="nav sidebar-nav"> <li class="sidebar-brand"> <a href="#"> <img src="http://satinflame.com/wp-content/uploads/2016/01/satinflame-trim.png" /> </a> </li> <li> <a href="#top">Home</a> </li> <li> <a href="#social"><i class="fa fa-star"></i> Follow Me</a> </li> <li> <a href="#portfolio"><i class="fa fa-code"></i> Portfolio</a> </li> <li> <a href="#about"><i class="fa fa-quote-left"></i> What Clients Say</a> </li> <li> <a href="#contact"><i class="fa fa-envelope"></i> Contact Me</a> </li> </ul> </nav> <div class="pull-right col-md-4 col-sm-6 col-sm-offset-6 col-xs-12"><img src="http://satinflame.com/wp-content/uploads/2016/01/satinflame-trim.png" /></div> </header> <!-- /#sidebar-wrapper --> <!-- Page Content --> <div id="page-content-wrapper"> <button type="button" class="hamburger is-closed" data-toggle="offcanvas"> <span class="hamb-top"></span> <span class="hamb-middle"></span> <span class="hamb-bottom"></span> </button> <div class="container-fluid social"> <div class="row"> <div class="col-lg-8 col-lg-offset-2"> <h1 id="social">Follow Me <small>Check out my social links ;)</small></h1> <ul class="clearfix list-unstyled list-horizontal"> <li><a class="btn btn-primary" href="http://fb.com/satinflamedesign"><i class="fa fa-facebook-official"></i> Facebook</a></li> <li><a href="https://twitter.com/graphical" class="btn btn-primary"><i class="fa fa-twitter"></i> Twitter</a></li> <li><a href="https://github.com/virtual" class="btn btn-primary"><i class="fa fa-github"></i> github</a></li> </ul> </div> </div> </div> <div class="row"> <div class="col-lg-8 col-lg-offset-2"> <h1 id="portfolio">Portfolio</h1> <div class="col-md-6"> <div class="card"> <div class="card-image"> <img class="img-responsive" src="http://satinflame.com/wp-content/uploads/2016/01/naropa-768x439.jpg"> <span class="card-title">Naropa University</span> </div> <div class="card-content"> <p>A redesign to help put users’ needs first for the Naropa University website.</p> </div> <div class="card-action"> <a href="http://naropa.edu" target="new_blank">View Site</a> <a href="http://omniupdate.com/" target="new_blank">Learn More</a> </div> </div> </div> <div class="col-md-6"> <div class="card"> <div class="card-image"> <img class="img-responsive" src="http://satinflame.com/wp-content/uploads/2016/01/ecsu-wp-768x439.jpg"> <span class="card-title">Elizabeth City State University</span> </div> <div class="card-content"> <p>ECSU’s redesign included many creative design pieces that presented fun challenges for implementing in a responsive environment.</p> </div> <div class="card-action"> <a href="http://ecsu.edu" target="new_blank">View Site</a> <a href="http://omniupdate.com/" target="new_blank">Learn More</a> </div> </div> </div> </div> </div> </div> <div class="row" id="about"> <div class="col-lg-8 col-lg-offset-2"> <h1>Client Testimonials</h1> <blockquote> <p>Jeanine did an outstanding job with our website. I was impressed with her professionalism, care for details, listening skills, and patience! I can’t recommend her enough!<br> <small>Salima Yacoubi, Global Leaders Today</small></p> </blockquote> <blockquote> <p>Your stature has risen above my hairdresser -- thank you for all you do on the website.<br> <small>Lora Wier, Montana Public Health Association</small></p> </blockquote> <blockquote> <p>The website looks great – we are getting so many compliments on it – thank you.<br> <small>Jennifer Murrin, Bergen County CASA</small></p> </blockquote> <blockquote> <p>You’re truly a lifesaver, since I have no time to even update the records with all of the data, let alone organize them. You really are an angel!!<br> <small>Jill Gurr, Create Now</small></p> </blockquote> <blockquote> <p>Jeanine is the busiest little worker bee that does so much behind the scenes to make Unique better, and no one even knows she has done anything! She has spent countless hours each month working on the newsletter as well as doing awesome stuff behind the scenes such as coming up with codes to help with the forum!<br> <small>Unique Guild</small></p> </blockquote> </div> </div> </div> <div class="row"> <div class="col-lg-8 col-lg-offset-2"> <h1 id="contact">Let's Work Together</h1> <div class="col-md-8"> <div class="well well-sm"> <form> <div class="row"> <div class="col-md-6"> <div class="form-group"> <label for="name"> Name</label> <input type="text" class="form-control" id="name" placeholder="Enter name" required="required" /> </div> <div class="form-group"> <label for="email"> Email Address</label> <div class="input-group"> <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span> </span> <input type="email" class="form-control" id="email" placeholder="Enter email" required="required" /></div> </div> <div class="form-group"> <label for="subject"> Subject</label> <select id="subject" name="subject" class="form-control" required="required"> <option value="na" selected="">Choose One:</option> <option value="service">General Customer Service</option> <option value="suggestions">Suggestions</option> <option value="product">Product Support</option> </select> </div> </div> <div class="col-md-6"> <div class="form-group"> <label for="name"> Message</label> <textarea name="message" id="message" class="form-control" rows="9" cols="25" required="required" placeholder="Message"></textarea> </div> </div> <div class="col-md-12"> <button type="submit" class="btn btn-primary pull-right" id="btnContactUs"> Send Message</button> </div> </div> </form> </div> </div> <div class="col-md-4"> <form> <legend><span class="glyphicon glyphicon-globe"></span> Our office</legend> <address> <strong>satinflame design</strong><br> Somewhere Far<br> Belgrade, MT 59714<br> <abbr title="Phone"> P:</abbr> (123) 456-7890 </address> <address> <strong>Full Name</strong><br> <a href="mailto:#">[email protected]</a> </address> </form> </div> </div> </div> </div> </div> <!-- /#page-content-wrapper --> </div> </div> <!-- /#wrapper --> </div> </div>
<!-- Origional snipet by msurguy<https://bootsnipp.com/msurguy>, I editted his snipet so that it works with bootstrap 3.3 -->
<footer class="container-fluid footer"> <div class="row"> <div class="container"><div class="row"> <div class="col-xs-5"> <ul class="list-unstyled"> <li> <a href="#top">Home</a> </li> <li> <a href="#social"><i class="fa fa-star"></i> Follow Me</a> </li> <li> <a href="#portfolio"><i class="fa fa-code"></i> Portfolio</a> </li> <li> <a href="#about"><i class="fa fa-quote-left"></i> What Clients Say</a> </li> <li> <a href="#contact"><i class="fa fa-envelope"></i> Contact Me</a> </li> </ul> </div> <div class="col-sm-3 col-xs-3 col-xs-offset-1 col-sm-offset-3"> <p class="text-muted pull-right"><img src="http://satinflame.com/wp-content/uploads/2016/01/satinflame-trim.png" /></p> </div> </div> <hr> <div class="row"> <div class="col-xs-8"> <ul class="list-unstyled list-inline pull-left"> <li><a href="#">Terms of Service</a></li> <li><a href="#">Contact Us</a></li> <li><a href="#">Privacy</a></li> </ul> </div> </div> </div> </div>
</footer> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
FCC: Build a Personal Portfolio - Script Codes CSS Codes
img { width:100%; height:auto;}
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {background-color: transparent;}
/*-------------------------------*/
/* Wrappers */
/*-------------------------------*/
#wrapper { padding-left: 0; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;
}
#wrapper.toggled { padding-left: 220px;
}
#sidebar-wrapper { z-index: 1000; left: 220px; width: 0; height: 100%; margin-left: -220px; overflow-y: auto; overflow-x: hidden; background: #1a1a1a; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;
}
#sidebar-wrapper::-webkit-scrollbar { display: none;
}
#wrapper.toggled #sidebar-wrapper { width: 220px;
}
#page-content-wrapper { width: 100%; padding-top: 70px;
}
#wrapper.toggled #page-content-wrapper { position: absolute; margin-right: -220px;
}
/*-------------------------------*/
/* Sidebar nav styles */
/*-------------------------------*/
.sidebar-nav { position: absolute; top: 0; width: 220px; margin: 0; padding: 0; list-style: none;
}
.sidebar-nav li { position: relative; line-height: 20px; display: inline-block; width: 100%;
}
.sidebar-nav li:before { content: ''; position: absolute; top: 0; left: 0; z-index: -1; height: 100%; width: 3px; background-color: #1c1c1c; -webkit-transition: width .2s ease-in; -moz-transition: width .2s ease-in; -ms-transition: width .2s ease-in; transition: width .2s ease-in;
}
.sidebar-nav li a { color: #fff; background-color: #1a1a1a;
}
.sidebar-nav li:nth-child(1):before { background-color: transparent;
}
.sidebar-nav li:before { background-color: #a40a60;
}
.sidebar-nav li:hover:before,
.sidebar-nav li.open:hover:before { width: 100%; -webkit-transition: width .2s ease-in; -moz-transition: width .2s ease-in; -ms-transition: width .2s ease-in; transition: width .2s ease-in;
}
.sidebar-nav li a { display: block; color: #ddd; text-decoration: none; padding: 10px 15px 10px 30px;
}
.sidebar-nav li a:hover,
.sidebar-nav li a:active,
.sidebar-nav li a:focus,
.sidebar-nav li.open a:hover,
.sidebar-nav li.open a:active,
.sidebar-nav li.open a:focus{ color: #fff; text-decoration: none; background-color: transparent;
}
.sidebar-nav > .sidebar-brand { height: 65px; font-size: 20px; line-height: 44px;
}
.sidebar-nav .dropdown-menu { position: relative; width: 100%; padding: 0; margin: 0; border-radius: 0; border: none; background-color: #222; box-shadow: none;
}
/*-------------------------------*/
/* Hamburger-Cross */
/*-------------------------------*/
.hamburger { position: fixed; top: 20px; z-index: 999; display: block; width: 32px; height: 32px; margin-left: 15px; background: transparent; border: none;
}
.hamburger:hover,
.hamburger:focus,
.hamburger:active { outline: none;
}
.hamburger.is-closed:before { content: ''; display: block; width: 100px; font-size: 14px; color: #fff; line-height: 32px; text-align: center; opacity: 0; -webkit-transform: translate3d(0,0,0); -webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed:hover:before { opacity: 1; display: block; -webkit-transform: translate3d(-100px,0,0); -webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed .hamb-top,
.hamburger.is-closed .hamb-middle,
.hamburger.is-closed .hamb-bottom,
.hamburger.is-open .hamb-top,
.hamburger.is-open .hamb-middle,
.hamburger.is-open .hamb-bottom { position: absolute; left: 0; height: 4px; width: 100%;
}
.hamburger.is-closed .hamb-top,
.hamburger.is-closed .hamb-middle,
.hamburger.is-closed .hamb-bottom { background-color: #1a1a1a;
}
.hamburger.is-closed .hamb-top { top: 5px; -webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed .hamb-middle { top: 50%; margin-top: -2px;
}
.hamburger.is-closed .hamb-bottom { bottom: 5px; -webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed:hover .hamb-top { top: 0; -webkit-transition: all .35s ease-in-out;
}
.hamburger.is-closed:hover .hamb-bottom { bottom: 0; -webkit-transition: all .35s ease-in-out;
}
.hamburger.is-open .hamb-top,
.hamburger.is-open .hamb-middle,
.hamburger.is-open .hamb-bottom { background-color: #1a1a1a;
}
.hamburger.is-open .hamb-top,
.hamburger.is-open .hamb-bottom { top: 50%; margin-top: -2px;
}
.hamburger.is-open .hamb-top { -webkit-transform: rotate(45deg); -webkit-transition: -webkit-transform .2s cubic-bezier(.73,1,.28,.08);
}
.hamburger.is-open .hamb-middle { display: none; }
.hamburger.is-open .hamb-bottom { -webkit-transform: rotate(-45deg); -webkit-transition: -webkit-transform .2s cubic-bezier(.73,1,.28,.08);
}
.hamburger.is-open:before { content: ''; display: block; width: 100px; font-size: 14px; color: #fff; line-height: 32px; text-align: center; opacity: 0; -webkit-transform: translate3d(0,0,0); -webkit-transition: all .35s ease-in-out;
}
.hamburger.is-open:hover:before { opacity: 1; display: block; -webkit-transform: translate3d(-100px,0,0); -webkit-transition: all .35s ease-in-out;
}
/*-------------------------------*/
/* Overlay */
/*-------------------------------*/
.overlay { position: fixed; display: none; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(250,250,250,.8); z-index: 1;
}
h1, h2, h3, h4 { color:#a71068;font-family: 'Roboto Condensed', sans-serif;}
.header { border-bottom: 4px dashed #a71068;padding-bottom:20px;}
.sidebar-nav > .sidebar-brand { height:auto;}
.nav i {color:#f19d2d;}
.social.container-fluid > div >div { background-color:#fefefe; padding:30px; border: 1px solid #f19d2d;}
.btn-primary {background:#a71068; border:1px solid #900;}
.btn-primary:hover { background:#333; border:1px solid #000;}
.list-horizontal li { margin-right:15px; float:left;}
#about > div { padding-top:15px; padding-bottom:15px; background:url('http://satinflame.com/wp-content/uploads/2016/01/butterflies2.jpg'); background-size:cover; box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.8); border-top:1px solid #ccc; margin-top:20px; clear:both;}
blockquote { background: #f9f9f9; border-left: 2px solid #a71068; margin: 1.5em 10px; padding: 0.5em 10px; quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before { color: #a71068; content: open-quote; font-size: 4em; line-height: 0.1em; margin-right: 0.25em; vertical-align: -0.4em;
}
blockquote p { display: inline;
}
blockquote small { color:#000;text-align:right;font-style:italic;}
/* card */
.card { box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.card { margin-top: 10px; box-sizing: border-box; border-radius: 2px; background-clip: padding-box;
}
.card span.card-title { color: #fff; text-shadow:0 0 25px #000; font-size: 14px; font-weight: 600; text-transform: uppercase;
}
.card .card-image { position: relative; overflow: hidden;
}
.card .card-image img { border-radius: 2px 2px 0 0; background-clip: padding-box; position: relative; z-index: -1;
}
.card .card-image span.card-title { position: absolute; bottom: 0; left: 0; padding: 16px;
}
.card .card-content { padding: 16px; border-radius: 0 0 2px 2px; background-clip: padding-box; box-sizing: border-box;
}
.card .card-content p { margin: 0; color: inherit;
}
.card .card-content span.card-title { line-height: 48px;
}
.card .card-action { border-top: 1px solid rgba(160, 160, 160, 0.2); padding: 16px;
}
.card .card-action a { color: #a71068; margin-right: 16px; transition: color 0.3s ease; text-transform: uppercase;
}
.card .card-action a:hover { color: #000; text-decoration: none;
}
.footer { background:#ccc; padding-top:30px; }
.footer li { color:#333; font-weight:bold; }
.footer a { color:#000; font-weight:300; }
.well { background:#fff; border:0;padding:0;margin:0;}
form,.wrapper { padding-bottom:20px;}
FCC: Build a Personal Portfolio - Script Codes JS Codes
$(document).ready(function () { var trigger = $('.hamburger'), overlay = $('.overlay'), isClosed = false; trigger.click(function () { hamburger_cross(); }); function hamburger_cross() { if (isClosed == true) { overlay.hide(); trigger.removeClass('is-open'); trigger.addClass('is-closed'); isClosed = false; } else { overlay.show(); trigger.removeClass('is-closed'); trigger.addClass('is-open'); isClosed = true; } } $('.hamburger').click(function () { $('#wrapper').toggleClass('toggled'); });
});
| Developer | Jeanine |
| Username | virtual |
| Uploaded | September 12, 2022 |
| Rating | 3 |
| Size | 6,424 Kb |
| Views | 20,240 |
Do you need developer help for FCC: Build a Personal Portfolio?
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!
Jeanine (virtual) Script Codes
| Name | Size |
| Simple React Template | 2,233 Kb |
| Expanding Info Boxes | 5,141 Kb |
| Flexbox | 2,263 Kb |
| Simple Event Box | 1,623 Kb |
| Font-Awesome Icon Card with heading | 2,882 Kb |
| Parallax Cats | 6,553 Kb |
| Bootstrap 4 | 2,121 Kb |
| 3 Piece Slider | 3,881 Kb |
| Table Sorter Data | 3,347 Kb |
| 3 Piece Slider with featured center | 3,920 Kb |
Create amazing love letters 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!
Similar Scripts & Codes
| Name | Username | Size |
| My Interests | Anshusaxenaarora | 2,015 Kb |
| Caputre Cam with JS | KimmoCommit | 2,795 Kb |
| Classy Blockquote Styling | Andrewwright | 3,212 Kb |
| Horizontal slider on scroll | Alojzije | 2,672 Kb |
| Masonry | Uriuriuriu | 5,005 Kb |
| 03 - CSS Variables | Run-time | 2,682 Kb |
| Exploring css spinners | Akagr | 3,569 Kb |
| CSS3 iPad | Vikvarg | 1,766 Kb |
| CSS Link Zoom On Click | Bryce | 1,960 Kb |
| Image grid with captions | Mchernin34 | 2,222 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!