Skip to content

Instantly share code, notes, and snippets.

@harunpehlivan

harunpehlivan/harun-pehlivan-portfolio.markdown

Last active October 29, 2017 08:54
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save harunpehlivan/3760ebfb421c960bc825223f39a8ec94 to your computer and use it in GitHub Desktop.
Save harunpehlivan/3760ebfb421c960bc825223f39a8ec94 to your computer and use it in GitHub Desktop.
Download ZIP
HARUN PEHLİVAN Portfolio
Raw
harun-pehlivan-portfolio.markdown
Raw
index.html
<body data-spy="scroll" data-target=".navbar-default">
<nav class="navbar navbar-default" data-spy="affix" data-offset-top="0" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse-menu" 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="navbar-brand" href="#">HARUN PEHLİVAN</a>
</div>
<div class="collapse navbar-collapse" id="collapse-menu">
<ul class="nav navbar-nav navbar-right">
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio &amp; Testimonials</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!-- .collapse navbar-collapse -->
</div><!-- .container -->
</nav>
<!-- HERO -->
<section class="feature-image feature-image-default-alt" data-type="background" data-speed="2"></section>
<!-- ABOUT -->
<section id="about">
<div class="container">
<div class="row">
<div class="col-sm-2">
<img class="img-responsive img-circle center-block" src="http://www.doyoubuzz.com/var/users/_/2016/11/15/18/1300826/avatar/1253797/avatar_cp_630.jpg?t=1508690340" height="140" width="140" alt="Rebecca Mooneyham">
</div>
<div class="col-sm-6">
<p class="lead"><a href="https://harunpehlivantebimtebitagem.carrd.co" target="_blank"> FOUNDER,CEO BLOGGER</a></p>
</div><!-- col -->
<div class="col-sm-4 contactButton">
<a href="#contact" class="btn btn-default btn-lg btn-block" role="button">Contact Me!</a>
</div><!-- col -->
</div><!-- row -->
</div><!-- container -->
</section><!-- contact -->
<!-- PORTFOLIO/WEB DESIGNS -->
<div id="portfolio">
<div class="container content-padding portfolio">
<div class="row">
<h2>MY WEB</h2>
<hr>
<ul>
<li class="thumbnail col-xs-12 col-sm-5 col-sm-offset-1">
<a href="#emptynest" data-toggle="modal"><img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Ftercuman-bilisim-mer.ticiz.com?w=360" alt="The Happy Empty Nest website"></a>
<div class="caption">
<p><a href="#emptynest" data-toggle="modal" class="btn btn-default" role="button">Read About It</a></p>
</div>
</li>
<li class="thumbnail col-xs-12 col-sm-5">
<a href="#sagecreek" data-toggle="modal"><img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Ftebm.wordpress.com?w=360" alt="Sage Creek Accounting website"></a>
<div class="caption">
<p><a href="#sagecreek" data-toggle="modal" class="btn btn-default" role="button">Read About It</a></p>
</div>
</li>
<li class="thumbnail col-xs-12 col-sm-5 col-sm-offset-1">
<a href="moon" data-toggle="modal"><img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Fharunpehlivan.thefanbase.net?w=360" alt="Moon Graphic Designs website"></a>
<div class="caption">
<p><a href="#moon" data-toggle="modal" class="btn btn-default" role="button">Read About It</a></p>
</div>
</li>
<li class="thumbnail col-xs-12 col-sm-5">
<a href="statiq" data-toggle="modal"><img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Fharunpehlivan.jimdo.com?w=360" alt="Blu StatiQ website"></a>
<div class="caption">
<p><a href="#statiq" data-toggle="modal" class="btn btn-default" role="button">Read About It</a></p>
</div>
</li>
<li class="thumbnail col-xs-12 col-sm-5 col-sm-offset-1">
<a href="#weeks" data-toggle="modal"><img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Fharunpehlivantebimtebitagem.4adim.com?w=360" alt="for 52 weeks website"></a>
<div class="caption">
<p><a href="#weeks" data-toggle="modal" class="btn btn-default" role="button">Read About It</a></p>
</div>
</li>
<li class="thumbnail col-xs-12 col-sm-5">
<a href="#ada" data-toggle="modal"><img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Fwww.tercumanbiliimmerkezi.flazio.com?w=360" alt="for 52 weeks website"></a>
<div class="caption">
<p><a href="#ada" data-toggle="modal" class="btn btn-default" role="button">Read About It</a></p>
</div>
</li>
</ul>
</div><!-- .row -->
</div><!-- .container -->
<!-- PORTFOLIO/GRAPHIC DESIGNS -->
<div class="container content-padding portfolio">
<div class="row">
<h2>Graphic Designs</h2>
<hr>
<ul>
<li class="thumbnail col-xs-12 col-sm-5 col-sm-offset-1">
<a href="#konig" data-toggle="modal"><img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Fharunpehlivantebimtebitagem.carrd.co?w=360" alt="Crossfit Flyer"></a>
<div class="caption">
<p><a href="#konig" data-toggle="modal" class="btn btn-default" role="button">Read About It</a></p>
</div>
</li>
<li class="thumbnail col-xs-12 col-sm-5">
<a href="#blu" data-toggle="modal"><img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Fhpitgroupwebdesignstudio.bitballoon.com?w=360" alt="Blu Statiq business card"></a>
<div class="caption">
<p><a href="#blu" data-toggle="modal" class="btn btn-default" role="button">Read About It</a></p>
</div>
</li>
<li class="thumbnail col-xs-12 col-sm-5 col-sm-offset-1">
<a href="#space" data-toggle="modal"><img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Fharunpehlivanresumeflexbox.bitballoon.com?w=360" alt="Space Whales and Angels album cover"></a>
<div class="caption">
<p><a href="#space" data-toggle="modal" class="btn btn-default" role="button">Read About It</a></p>
</div>
</li>
<li class="thumbnail col-xs-12 col-sm-5">
<a href="#forever" data-toggle="modal"><img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Fharunpehlivantebimtebitagem.bitballoon.com?w=360" alt="Forever album cover"></a>
<div class="caption">
<p><a href="#forever" data-toggle="modal" class="btn btn-default" role="button">Read About It</a></p>
</div>
</li>
<li class="thumbnail col-xs-12 col-sm-5 col-sm-offset-1">
<a href="#smooth" data-toggle="modal"><img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Fharunpehlivantebimtebitagemmobile.bitballoon.com?w=360" alt="Smooth Space album cover"></a>
<div class="caption">
<p><a href="#smooth" data-toggle="modal" class="btn btn-default" role="button">Read About It</a></p>
</div>
</li>
<li class="thumbnail col-xs-12 col-sm-5"><a href="#planet" data-toggle="modal"><img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Fharunpehlivanbiobox.bitballoon.com?w=360" alt="Unveiled Virus album cover"></a>
<div class="caption">
<p><a href="#planet" data-toggle="modal" class="btn btn-default" role="button">Read About It</a></p>
</div>
</li>
<li class="thumbnail col-xs-12 col-sm-5 col-sm-offset-1">
<a href="#sup" data-toggle="modal"><img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Fhptube.bitballoon.com?w=360" alt="Sup! album cover"></a>
<div class="caption">
<p><a href="#sup" data-toggle="modal" class="btn btn-default" role="button">Read About It</a></p>
</div>
</li>
<li class="thumbnail col-xs-12 col-sm-5">
<a href="#sun" data-toggle="modal"><img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Fcssresponsivegridofhexagons.bitballoon.com?w=360" alt="Sundown album cover"></a>
<div class="caption">
<p><a href="#sun" data-toggle="modal" class="btn btn-default" role="button">Read About It</a></p>
</div>
</li>
</ul>
</div><!-- .row -->
</div><!-- .container -->
<!-- TESTIMONIAL CONTAINER -->
<section id="kudos">
<div class="container">
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<h2>Testimonials</h2>
<hr>
<!-- INDIVIDUAL TESTIMONIALS -->
<div class="row testimonial">
<div class="col-sm-5">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/76692/profile/profile-80.jpg?100000" alt="Kevin - Blu StatiQ">
</div><!-- col -->
<div class="col-sm-7">
<blockquote>
<a href="https://codepen.io/harunpehlivan" target="_blank">
Codegen
</a>
<a href="https://tr.gravatar.com/tebm" target="_blank">
Gravatar
</a>
<cite>&mdash; HARUN PEHLİVAN <a href="http://www.doyoubuzz.com/harun-pehlivan" target="_blank">
E-CV
</a></cite>
</blockquote>
</div><!-- col -->
</div><!-- row -->
</div><!-- col -->
</div><!-- row -->
</div><!-- container -->
</section><!-- kudos -->
</div><!-- portfolio -->
<!-- FOOTER -->
<footer id="contact">
<div class="container">
<div class="row">
<div class="col-sm-4">
<p class="keepInTouch"><a href="mailto:trcmnhp@hotmail.com">HARUN PEHLİVAN</a></p>
</div><!-- col-sm-4 -->
<div class="col-sm-3 col-sm-offset-1 socialMedia">
<a href="https://www.linkedin.com/in/harun-pehlivan-0aa34252/" target="_blank" class="badge social linkedin"><i class="fa fa-linkedin"></i></a>
<a href="https://www.facebook.com/profile.php?id=100008152065270" target="_blank" class="badge social facebook"><i class="fa fa-facebook"></i></a>
<a href="https://twitter.com/HTERCUMANP" target="_blank" class="badge social twitter"><i class="fa fa-twitter"></i></a>
</div><!-- col -->
<div class="col-sm-3 col-sm-offset-1">
<p class="copy">&copy;2017 - <a href="http://www.doyoubuzz.com/harun-pehlivan" target="_blank">HARUN PEHLİVAN</a></p>
</div><!-- col -->
</div><!-- row -->
</div><!-- .container -->
</footer>
<!-- MODAL -->
<div id="emptynest" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-header">
<h3>TERCUMAN BİLİŞİM MERKEZİ</h3>
</div>
<div class="modal-body">
<p><img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Ftercuman-bilisim-mer.ticiz.com?w=360" alt="The Happy Empty Nest website" class="img-responsive"><a href="http://tercuman-bilisim-mer.ticiz.com/" target="_blank">TERCUMAN EĞİTİM BİLİM TEKNİK ARAŞTIRMA GELİŞTİRME MERKEZİ</a></p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!--.modal-dialog -->
</div><!-- #emptynest -->
<div id="sagecreek" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-header">
<h3>BİLİŞİM TEKNOLOJİLERİ</h3>
</div>
<div class="modal-body">
<p><img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Ftebm.wordpress.com?w=360" alt="Sage Creek Accounting website" class="img-responsive"><a href="https://tebm.wordpress.com/" target="_blank">BİLİŞİM TEKNOLOJİLERİ</a></p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!--.modal-dialog -->
</div><!-- #sagecreek -->
<div id="moon" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-header">
<h3>HARUN PEHLİVAN</h3>
</div>
<div class="modal-body">
<p><img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Fharunpehlivan.thefanbase.net?w=360" alt="Moon Graphic Designs website" class="img-responsive"><a href="http://harunpehlivan.thefanbase.net/" target="_blank">HARUN PEHLİVAN</a></p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!--.modal-dialog -->
</div><!-- #moon -->
<div id="statiq" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-header">
<h3>
HARUN PEHLİVAN TEBİM/TEBİTAGEM FOUNDER,CEO BLOGGER Islamic sciences and IT computer science
</h3>
</div>
<div class="modal-body">
<p><img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Fharunpehlivan.jimdo.com?w=360" alt="Blu StatiQ website" class="img-responsive"><a href="https://harunpehlivan.jimdo.com/" target="_blank">
HARUN PEHLİVAN TEBİM/TEBİTAGEM FOUNDER,CEO BLOGGER Islamic sciences and IT computer science
</a></p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!--.modal-dialog -->
</div><!-- #statiq -->
<div id="weeks" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-header">
<h3>TERCUMAN INFORMATICS CENTER TERCUMAN EDUCATION, SCIENCE, TECHNICAL RESEARCH AND DEVELOPMENT CENTER</h3>
</div>
<div class="modal-body">
<p><img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Fharunpehlivantebimtebitagem.4adim.com?w=360" alt="for 52 weeks website" class="img-responsive"><a href="http://harunpehlivantebimtebitagem.4adim.com/" target="_blank">
TERCUMAN INFORMATICS CENTER TERCUMAN EDUCATION, SCIENCE, TECHNICAL RESEARCH AND DEVELOPMENT CENTER
</a><a href="https://rebeccamooneyham.github.io/for-52-weeks/" target="_blank">for 52 weeks on GitHub</a>.</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!--.modal-dialog -->
</div><!-- #weeks -->
<div id="ada" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-header">
<h3>flazio</h3>
</div>
<div class="modal-body">
<p><img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Fwww.tercumanbiliimmerkezi.flazio.com?w=360" alt="Ada Lovelace Tribute Page" class="img-responsive"><a href="http://www.tercumanbiliimmerkezi.flazio.com/" target="_blank">
flazio
</a></p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!--.modal-dialog -->
</div><!-- #weeks -->
<div id="konig" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-header">
<h3>carrd</h3>
</div>
<div class="modal-body">
<p><img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Fharunpehlivantebimtebitagem.carrd.co?w=360" alt="Konig B's Crossfit Kaiserslautern flyer" class="img-responsive"><a href="https://harunpehlivantebimtebitagem.carrd.co/" target="_blank">
carrd
</a></p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!--.modal-dialog -->
</div><!-- #konig -->
<div id="blu" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-header">
<h3>HP IT GROUP Web Design Studio</h3>
</div>
<div class="modal-body">
<p><img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Fhpitgroupwebdesignstudio.bitballoon.com?w=360" alt="Blu StatiQ logo and business card" class="img-responsive"><a href="http://hpitgroupwebdesignstudio.bitballoon.com/" target="_blank">
HP IT GROUP Web Design Studio
</a></p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!--.modal-dialog -->
</div><!-- #blu -->
<div id="space" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-header">
<h3>Hi there!
I'm HARUN PEHLİVAN</h3>
</div>
<div class="modal-body">
<p><img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Fharunpehlivanresumeflexbox.bitballoon.com?w=360" alt="Space Whales and Angels album cover" class="img-responsive"><a href="http://harunpehlivanresumeflexbox.bitballoon.com/" target="_blank">
Hi there!
I'm HARUN PEHLİVAN
</a></p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!--.modal-dialog -->
</div><!-- #space -->
<div id="forever" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-header">
<h3>Hi There !</h3>
</div>
<div class="modal-body">
<p><img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Fharunpehlivantebimtebitagem.bitballoon.com?w=360" alt="Forever album cover" class="img-responsive"><a href="http://harunpehlivantebimtebitagem.bitballoon.com/" target="_blank">
Hi There !
</a></p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!--.modal-dialog -->
</div><!-- #forever -->
<div id="smooth" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-header">
<h3>Borism Business Card</h3>
</div>
<div class="modal-body">
<p><img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Fharunpehlivantebimtebitagemmobile.bitballoon.com?w=360" alt="Smooth Space album cover" class="img-responsive"><a href="http://harunpehlivantebimtebitagemmobile.bitballoon.com/" target="_blank">
Borism Business Card
</a></p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!--.modal-dialog -->
</div><!-- #smooth -->
<div id="planet" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-header">
<h3>Pure Css Popup Box</h3>
</div>
<div class="modal-body">
<p><img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Fharunpehlivanbiobox.bitballoon.com?w=360" alt="Planet Virus album cover" class="img-responsive"><a href="http://harunpehlivanbiobox.bitballoon.com/" target="_blank">
Pure Css Popup Box
</a></p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!--.modal-dialog -->
</div><!-- #planet -->
<div id="sup" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-header">
<h3>HPTUBE </h3>
</div>
<div class="modal-body">
<p><img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Fhptube.bitballoon.com?w=360" alt="Sup! album cover" class="img-responsive"><a href="http://hptube.bitballoon.com/" target="_blank">
HPTUBE
</a></p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!--.modal-dialog -->
</div><!-- #sup -->
<div id="sun" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-header">
<h3>CSS responsive grid of hexagons</h3>
</div>
<div class="modal-body">
<p><img src="https://s-ssl.wordpress.com/mshots/v1/http%3A%2F%2Fcssresponsivegridofhexagons.bitballoon.com?w=360" alt="Sundown" class="img-responsive"><a href="http://cssresponsivegridofhexagons.bitballoon.com/" target="_blank">
CSS responsive grid of hexagons
</a></p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!--.modal-dialog -->
</div><!-- #sun -->
</body>
Raw
script.js
$(function() {
// Cache the Window object
var $window = $(window);
// Parallax Backgrounds
$('section[data-type="background"]').each(function(){
var $bgobj = $(this); // assigning the object
$(window).scroll(function() {
// Scroll the background at var speed
// the yPos is a negative value because we're scrolling it UP!
var yPos = -($window.scrollTop() / $bgobj.data('speed'));
// Put together our final background position
var coords = '50% '+ yPos + 'px';
// Move the background
$bgobj.css({ backgroundPosition: coords });
}); // end window scroll
});
});
Raw
scripts
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Raw
style.css
/* === Base Styles === */
body {
font-family: 'Droid Serif', serif;
background: url("https://res.cloudinary.com/rebeccamooneyham/image/upload/v1472137496/debut_light_dhccuq.png") top left repeat;
position: relative;
}
h1, h2, h3 {
font-family: Raleway, sans-serif;
font-weight: 700;
text-transform: uppercase;
text-align: center;
}
h2, h3 {
color: #0f3169;
}
hr {
border: 0;
height: 1px;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(15, 49, 105, 0.75), rgba(0, 0, 0, 0));
}
.modal-body {
background: url("https://res.cloudinary.com/rebeccamooneyham/image/upload/v1472137496/debut_light_dhccuq.png") top left repeat;
}
.modal-body {
background: url("https://res.cloudinary.com/rebeccamooneyham/image/upload/v1472137496/debut_light_dhccuq.png") top left repeat;
}
/* === Navbar === */
.navbar {
border-radius: 0;
margin-bottom: 0;
}
.navbar-header .navbar-brand {
font-family: Raleway, sans-serif;
letter-spacing: 2px;
text-transform: uppercase;
color: white;
}
.navbar-header a.navbar-brand:hover {
color: #fff;
}
.navbar-right {
padding-top: 0;
padding-bottom: 0;
}
.navbar-nav > li {
font-weight: bold;
}
.navbar-nav > li > a {
font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
letter-spacing: 2px;
}
.navbar-default .navbar-nav > li > a:hover {
color: #fff;
}
.navbar-default {
background-color: #222;
border: none;
width: 100%;
z-index: 100;
}
.navbar-default .navbar-nav > .active > a {
color: #fff;
background: #080808;
}
/* == HERO == */
.feature-image {
width: 100%;
height: 250px;
}
.feature-image-default-alt {
background: url("http://files.snackwebsites.net.s3.amazonaws.com/sites/upmg3mu2/files/58?_=1499262491") no-repeat;
background-size: cover;
}
/* === ABOUT === */
#about {
background: #3e4249;
padding: 20px 0 20px;
color: white;
font-size: 1.2em;
margin-bottom: 20px;
padding-top: 1.5em;
}
a.btn.btn-default.btn-lg {
margin-top: 1.5em;
background-color: #0f3169;
border: none;
color: #fff;
font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
font-size: 1.25em;
font-variant: small-caps;
font-weight: bold;
letter-spacing: 2px;
box-shadow: 1px 1px 1px #000;
transition-duration: 200ms;
transition-timing-function: ease-in;
}
a.btn.btn-default.btn-lg:hover {
background-color: #eee;
color: #0f3169;
font-weight: 600;
box-shadow: 1px 1px 1px #7a7a7a;
}
.img-circle {
box-shadow: 1px 1px 3px #333;
margin-bottom: 20px;
}
/* === PORTFOLIO === */
ul {
padding: 5px;
}
.portfolio .col-sm-5 {
margin-right: 20px;
}
.caption {
text-align: center;
}
.caption .btn {
margin-top: 20px;
}
.modal-body img {
margin: 0 auto 20px;
}
.modal-dialog {
background-color: #eee;
}
.modal-header h3 {
text-align: center;
}
a.btn.btn-default, .btn.btn-default {
background-color: #0f3169;
border: none;
color: #eee;
font-family: Futura, "Century Gothic", AppleGothic, sans-serif;
font-variant: small-caps;
font-weight: bold;
letter-spacing: 2px;
box-shadow: .75px .75px 1px #7a7a7a;
}
a.btn.btn-default:hover, .btn.btn-default:hover {
background-color: #eee;
color: #0f3169;
font-weight: 600;
box-shadow: 1px 1px 1px #7a7a7a;
}
/* === TESTIMONIALS === */
#kudos {
text-align: center;
}
.testimonial {
margin-bottom: 60px;
}
.testimonial img {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
/* === FOOTER === */
footer {
background: #222;
color: white;
font-size: 12px;
}
.keepInTouch{
font-size: 2em;
font-variant: small-caps;
padding-top: 25px;
}
footer a:link, footer a:visited {
color: white;
}
footer a:hover {
color: #ef937d;
text-decoration: none;
}
.copy {
font-size: 1em;
padding-top: 30px;
}
.socialMedia {
padding-top: 20px;
}
.badge.social {
background: #0f3169;
font-size: 24px;
height: 40px;
width: 40px;
text-align: center;
line-height: 43px;
margin: 0 5px 20px 0;
padding: 0;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
color: white;
}
.badge.social.linkedin:hover {
background: #db4b39;
}
.badge.social.facebook:hover {
background: #3b5998;
}
.badge.social.twitter:hover {
background: #55acee;
}
/* === MEDIA QUERIES === */
@media screen and (max-width: 767px) {
footer {
text-align: center;
}
.copy, .socialMedia {
padding-top: 0;
}
.contactButton {
margin-top: 20px;
}
@media screen and (min-width: 767px) {
#keepInTouch {
margin-bottom: 1em;
}
#about {
margin-bottom: 100px;
}
#contact {
padding-bottom: 10px;
}
}
@media screen and (max-width: 395px) {
.navbar-header .navbar-brand {
font-size: 1em;
}
}
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment