Skip to content

Instantly share code, notes, and snippets.

@mihaisavezi

mihaisavezi/RPzpGm.markdown

Created August 21, 2015 07:17
Show Gist options
  • Save mihaisavezi/1c8b8b2a138296c79304 to your computer and use it in GitHub Desktop.
Save mihaisavezi/1c8b8b2a138296c79304 to your computer and use it in GitHub Desktop.
Download ZIP
RPzpGm
Raw
index.html
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial scale=1">
<title> Mihaisavezi Portfolio </title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<!-- The navigation bar -->
<nav class="navbar navbar-default navbar-fixed-top topnav ">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"><kbd>Mihai</kbd></a>
</div>
<div>
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">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>
</nav>
<!-- The landing page jumbotron -->
<div class="container-fluid">
<div class="jumbotron text-center">
<div class="intro-message">
<h1 id="header">Websites that convert!</h1>
<p id="sub-header">Where awesome websites come and grow.</p>
</div>
<hr class="intro-divider">
<ul class="list-inline intro-social-buttons">
<li>
<a href="https://twitter.com/Ferreir4Thiago" target="_blank" class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span></a>
</li>
<li>
<a href="https://twitter.com/Ferreir4Thiago" target="_blank" class="btn btn-default btn-lg"><i class="fa fa-github fa-fw"></i> <span class="network-name">Github</span></a>
</li>
<li>
<a href="https://twitter.com/Ferreir4Thiago" target="_blank" class="btn btn-default btn-lg"><i class="fa fa-linkedin fa-fw"></i> <span class="network-name">Linkedin</span></a>
</li>
<li>
<a href="https://twitter.com/Ferreir4Thiago" target="_blank" class="btn btn-default btn-lg"><i class="fa fa-fire fa-fw"></i> <span class="network-name">Freecodecamp</span></a>
</li>
</ul>
</div>
<hr class="divider">
<!-- The about me phase -->
<div id="About" class="container-fluid">
<div class="row">
<div class="col-md-6">
<h2>Infinito Webdesign Studio.</h2>I'm a self taught web designer, developer, co-founder and entrepreneur based in Finland. I'm currently part of a small web development team in a upcoming start-up, building web and mobile applications.
<br> My passion is to use technology based solutions, to help solve real world challenges.
<br> Languages and Frameworks: Javascript, HTML5, CSS3, jQuery, Bootstrap3, Angular.js, Meteor.js, Ionic Frameworks.
<br> Tools & expertise: Git, Responsive Web Development and Agile Methodologies.</div>
<div class="col-md-4 col-md-offset-2"><img class="img-circle img-responsive" src="https://scontent-ams3-1.xx.fbcdn.net/hphotos-xpf1/v/t1.0-9/10846145_10152980222990929_8526315828281707814_n.jpg?oh=1139bc0ef8d546784c3def1b810cf7aa&oe=561E3275" alt=""></div>
</div>
</div>
</div>
</div>
<hr class="divider">
<div id="Portfolio" class="container-fluid">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Awesomeness Portfolio.</h2>
<h3 id="below-section" class="section-subheading text-muted">Below you'll find some of my recent work.</h3>
</div>
</div>
<div class="row text-center">
<div class="col-md-4">
<a href="http://codepen.io/ThiagoFerreir4/full/gpvJOK" class="portfolio-link">
<img src="https://scontent-ams3-1.xx.fbcdn.net/hphotos-xpt1/v/t1.0-9/11707627_10153522203165929_7676178806200668521_n.jpg?oh=52d391165a739719d7c6bd31bc675907&oe=56136AAE" class="img-responsive" alt="">
</a>
<h3 class="portfolio-caption"> Project 1 </h3>
<h4>Twitch.tv API project</h4>
<p id="small-text" class="text-muted">Bootstrap and Angularjs</p>
</a>
</div>
<div class="col-md-4">
<a href="http://codepen.io/ThiagoFerreir4/full/gpvJOK" class="portfolio-link">
<img src="https://scontent-ams3-1.xx.fbcdn.net/hphotos-xpt1/v/t1.0-9/11707627_10153522203165929_7676178806200668521_n.jpg?oh=52d391165a739719d7c6bd31bc675907&oe=56136AAE" class="img-responsive" alt="">
</a>
<h3 class="portfolio-caption"> Project 1 </h3>
<h4>Twitch.tv API project</h4>
<p id="small-text" class="text-muted">Bootstrap and Angularjs</p>
</a>
</div>
<div class="col-md-4">
<a href="http://codepen.io/ThiagoFerreir4/full/gpvJOK" class="portfolio-link">
<img src="https://scontent-ams3-1.xx.fbcdn.net/hphotos-xpt1/v/t1.0-9/11707627_10153522203165929_7676178806200668521_n.jpg?oh=52d391165a739719d7c6bd31bc675907&oe=56136AAE" class="img-responsive" alt="">
</a>
<h3 class="portfolio-caption"> Project 1 </h3>
<h4>Twitch.tv API project</h4>
<p id="small-text" class="text-muted">Bootstrap and Angularjs</p>
</a>
</div>
</div>
</div>
<hr class="divider">
<div id="Contact" class="container">
<div class="row">
<div class="col-lg-6 text-left">
<div>
<h3>Connect with Infinito Web Design Studio:<br> [email protected]</h3>
</div>
</div>
<div class="col-lg-2 col-lg-offset-3 text-left ">
<ul class="list-inline banner-social-buttons">
<li>
<a href="https://twitter.com/Ferreir4Thiago" target="_blank" class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span></a>
</li>
<li>
<a href="https://twitter.com/Ferreir4Thiago" target="_blank" class="btn btn-default btn-lg"><i class="fa fa-github fa-fw"></i> <span class="network-name">Github</span></a>
</li>
<li>
<a href="https://twitter.com/Ferreir4Thiago" target="_blank" class="btn btn-default btn-lg"><i class="fa fa-linkedin fa-fw"></i> <span class="network-name">Linkedin</span></a>
</li>
<li>
<a href="https://twitter.com/Ferreir4Thiago" target="_blank" class="btn btn-default btn-lg"><i class="fa fa-fire fa-fw"></i> <span class="network-name">Freecodecamp</span></a>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Raw
script.js
// ------------------------------
// http://twitter.com/mattsince87
// ------------------------------
function scrollNav() {
$('.nav a').click(function(){
//Toggle Class
$(".active").removeClass("active");
$(this).closest('li').addClass("active");
var theClass = $(this).attr("class");
$('.'+theClass).parent('li').addClass('active');
//Animate
$('html, body').stop().animate({
scrollTop: $( $(this).attr('href') ).offset().top - 60
}, 400);
return false;
});
$('.scrollTop a').scrollTop();
}
scrollNav();
Raw
style.css
body,
html {
width: 100%;
height: 100%;
}
#Contact, #About, #Portfolio {
height: 100%;
padding-top: 20px;
}
.jumbotron {
height: 760px;
padding-top: 50px; /* If you're making other pages, make sure there is 50px of padding to make sure the navbar doesn't overlap content! */
text-align: center;
background: url('https://40.media.tumblr.com/1b916597d3e174399cb7adadddb66ede/tumblr_nt5uk4psl31ud7rr3o1_1280.jpg') center center ;
background-size: cover;
}
#header {
color: rgba(240, 240, 255, 1);
background-color: rgba(0,0,65,0.5)
}
#sub-header {
color: rgba(0,0,65,0.5);
background-color: rgba(240, 240, 255, 1);
}
.intro-message {
position: relative;
padding-top: 20%;
}
.intro-divider {
color: #fff;
}
.banner-social-buttons {
float: right;
margin-top: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment