"Cardi B Portfolio"
Bootstrap 4.0.0 Snippet by trappedinlimbo

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href='https://fonts.googleapis.com/css?family=Quattrocento+Sans:400,700,400italic|Montserrat:400,700|Cardo:400italic|Advent+Pro:100' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- HOME -->
<div id="home" class="content-section">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>CARDI B</h1>
<h5>A PORTFOLIO BY BRANDON DOWHANIUK</h5>
</div>
</div>
</div>
</div>
<!-- ABOUT -->
<div id="about" class="content-section">
<div class="container">
<div class="row">
<div class="col-sm-8 col-lg-7">
<h1>ABOUT</h1>
<p class="lead">Objective: Build a CodePen.io app that successfully reverse-engineers <a href="https://codepen.io/ThiagoFerreir4/full/eNMxEp" target="_blank">this <em class="fa fa-external-link"></em></a></p>
<p><strong>Rule #1:</strong> Don't look at the example project's code on CodePen. Figure it out for yourself.</p>
<p><strong>Rule #2:</strong> You may use whichever libraries or APIs you need.</p>
<p><strong>Rule #3:</strong> Reverse engineer the example project's functionality, and also feel free to personalize it.</p>
<p><strong>Hint:</strong> If you don't want to start from scratch, you can fork this simple Bootstrap portfolio template on <a href="https://codepen.io/FreeCodeCamp/pen/mJNqQj" target="_blank">CodePen <em class="fa fa-external-link"></em></a></p>
<p>Here are the user stories you must enable, and optional bonus user stories:</p>
<p><strong>User Story:</strong> As a user, I can access all of the portfolio webpage's content just by scrolling.</p>
<p><strong>User Story:</strong> As a user, I can click different buttons that will take me to the portfolio creator's different social media pages.</p>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/*--- GENERAL STYLES ---*/
body { font-size: 16px; line-height: 1.5em; font-family: 'Quattrocento Sans', sans-serif; }
h1, h2, h3, h4, h5, h6 { font-family: 'Montserrat', serif; font-weight: 700; color: #1a1a1a; }
.content-section { min-height: 100vh; padding-top: 70px; padding-bottom: 20px; }
.content-section h1 { color: #9C9C9C; font-weight: 400; font-size: 30px; display: inline-block; }
.content-section h1:after { content: ''; display: block; border-bottom: 1px solid #DFDFDF; padding-top: 3px; }
.content-section p.lead { font-family: 'Cardo', serif; font-size: 19px; line-height: 1.35em; margin-bottom: 25px; }
.content-section p.lead em { font-size: 14px; }
.content-section p em { font-size: 14px;}
.content-section p mark em { font-size: inherit;}
.content-section img.pull-right { border:1px solid #DFDFDF; margin-top: 140px; }
@media screen and (min-width: 768px) {
.content-section { padding-top: 130px; }
.content-section h1 { font-size: 34px; }
.content-section p.lead { margin-bottom: 30px; }
}
@media screen and (min-width: 992px) {
.content-section { padding-top: 160px; }
.content-section h1 { font-size: 38px; }
.content-section h1:after { padding-top: 5px; }
.content-section p.lead { font-size: 21px; margin-bottom: 35px; }
}
@media screen and (min-width: 1200px) {
.content-section { padding-top: 160px; }
.content-section h1:after { padding-top: 7px; }
.content-section p.lead { font-size: 22px; margin-bottom: 35px; }
}
/*--- NAVBAR ---*/
.navbar-default { font-family: 'Montserrat', serif; background: #FFFFFF; border-bottom-color: #DFDFDF; height: 60px; margin-bottom: 0; }
.navbar-header .navbar-toggle { margin-top: 12px; }
.navbar-header .navbar-brand { letter-spacing: -0.03em; height: 60px; padding: 30px 10px 0 10px; font-size: 36px; line-height: 0px; font-weight: 700; color: #111; white-space: nowrap; }
.navbar-default .navbar-brand:focus { color: #111; }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
$(document).ready(function(){
$(".scroll").click(function(event){
event.preventDefault();
$("html,body").animate({scrollTop:$(this.hash).offset().top}, 500);
$('.navbar-default a').removeClass('selected');
$(this).addClass('selected');
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Fresh Bootstrap Table
Portfolio Gallery with filtering category
Portfolio using Panels
Portfolio using Panels No JavaScript!

Questions / Comments: