Skip to content

Instantly share code, notes, and snippets.

@sedera-tax

sedera-tax/index.html

Created December 28, 2015 18:04
Show Gist options
  • Save sedera-tax/f87ec3c0ca156ffa83cf to your computer and use it in GitHub Desktop.
Save sedera-tax/f87ec3c0ca156ffa83cf to your computer and use it in GitHub Desktop.
Download ZIP
sedera-tax
Raw
index.html
<nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
<div class="container topnav">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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 topnav" href="#home">Razafindrakoto Yannick Sedera Aina</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 href="#home">Home</a>
</li>
<li>
<a href="#about">About</a>
</li>
<li>
<a href="#portfolio">Services</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Header -->
<a name="home"></a>
<div class="intro-header">
<div class="bg-overlay">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="intro-message">
<h1>Software Engineer</h1>
<h3>“the people who are crazy enough to think they can change the world are the ones who do.” <strong>Steve Jobs</strong></h3>
<hr class="intro-divider">
<ul class="list-inline intro-social-buttons">
<li>
<a href="http://mg.viadeo.com/fr/profile/sedera.razafindrakoto" target="_blank" class="btn btn-default btn-lg"> <span class="network-name">Viadeo</span></a>
</li>
<li>
<a href="https://github.com/sedera-tax" 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://www.linkedin.com/profile/view?id=AAIAAAvcV4IBsrJ1hv8manftq8Tgwr4MpxvztB0&trk=nav_responsive_tab_profile" 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="http://www.freecodecamp.com/sedera-tax" 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>
</div>
<!-- /.container -->
</div>
</div>
<!-- /.intro-header -->
<!-- Page Content -->
<a name="about"></a>
<div class="content-section-a">
<div class="bg-overlay2">
<div class="container">
<div class="row">
<div class="col-lg-5 col-sm-6">
<div class="clearfix"></div>
<h2 class="section-heading">Software Engineer.</h2>
</br>
<p class="lead">I'm a <a class="link" target="_blank" href="http://www.freecodecamp.com/thiagoferreira">software engineer</a> developer, co-founder and entrepreneur based in Madagascar.</br>
I'm currently part of a small web development team in an upcoming start-up, building web and mobile applications.</br>
My passion is to use technology based solutions, to help solve real world challenges.</br>
Competences:</br>
Languages and Frameworks:</br>
Javascript, HTML5, CSS3, jQuery, Bootstrap3, PHP, JAVA, C#.</br>
Tools & expertise:</br>
SVN, Git, Responsive Web Design, Agile Methodologies.
</p>
</div>
<div class="col-lg-5 col-lg-offset-2 col-sm-6 collapse navbar-collapse">
<img class="img-circle img-responsive" src="https://avatars.githubusercontent.com/u/11041908?v=3" alt="">
</div>
</div>
</div>
<!-- /.container -->
</div>
</div>
</div>
<!-- Portfolio Grid Section -->
<a name="portfolio"></a>
<section id="portfolio" class="bg-light-gray bounds">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Services.</h2>
</div>
</div>
<!-- Service img1 -->
<div class="row">
<div class="col-md-4 col-sm-6 portfolio-item">
<a href="#" class="portfolio-link" data-toggle="modal">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-fire fa-3x"></i>
</div>
</div>
<img src="http://www.singularissoftwares.com/img/free-php-mysql-training-course-online-tutorial.jpg" class="img-responsive" alt="">
</a>
<div class="portfolio-caption">
<h4>PHP & MySQL</h4>
<p id="small-text" class="text-muted">PHP and MySQL</p>
</div>
</div>
<!-- End of Portfolio img1 -->
<!-- Portfolio img2 -->
<div class="col-md-4 col-sm-6 portfolio-item portfolio2">
<a href="#" class="portfolio-link" data-toggle="modal">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-fire fa-3x"></i>
</div>
</div>
<img src="http://img0.mxstatic.com/wallpapers/64f9d357e0685201bdf8c65cd7257c42_large.png" class="img-responsive" alt="">
</a>
<div class="portfolio-caption">
<h4>JAVA</h4>
</div>
</div>
<!-- End of Portfolio img2 -->
<!-- Portfolio img3 -->
<div class="col-md-4 col-sm-6 portfolio-item">
<a href="#" class="portfolio-link" data-toggle="modal">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-fire fa-3x"></i>
</div>
</div>
<img src="http://taswar.zeytinsoft.com/wp-content/uploads/2012/11/dotnet.png" class="img-responsive" alt="">
</a>
<div class="portfolio-caption">
<h4>.NET</h4>
<p id="small-text" class="text-muted">C# .NET</p>
</div>
</div>
<!-- End of Portfolio img3 -->
<!-- Portfolio img4 -->
<div class="col-md-4 col-sm-6 portfolio-item">
<a href="#" class="portfolio-link" data-toggle="modal">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-fire fa-3x"></i>
</div>
</div>
<img src="http://welego.org/public/files/2015/06/jquery.png" class="img-responsive" alt="">
</a>
<div class="portfolio-caption">
<h4>JQuery</h4>
<p id="small-text" class="text-muted"></p>
</div>
</div>
<!-- End of Portfolio img4 -->
<!-- Portfolio img5 -->
<div class="col-md-4 col-sm-6 portfolio-item">
<a href="#" class="portfolio-link" data-toggle="modal">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-fire fa-3x"></i>
</div>
</div>
<img src="http://www.canon.fr/Images/Android-logo_tcm79-1232684.png" class="img-responsive" alt="">
</a>
<div class="portfolio-caption">
<h4>Android App</h4>
<p id="small-text" class="text-muted"></p>
</div>
</div>
<!-- End of Portfolio img5 -->
<!-- Portfolio img6 -->
<div class="col-md-4 col-sm-6 portfolio-item">
<a href="#" class="portfolio-link" data-toggle="modal">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-fire fa-3x"></i>
</div>
</div>
<img src="http://ericmurat.com/wp-content/gallery/bootstrap/bootstrap_logo.png" class="img-responsive" alt="">
</a>
<div class="portfolio-caption">
<h4>RWD</h4>
<p id="small-text" class="text-muted">Bootstrap</p>
</div>
</div>
<!-- End of Portfolio img6 -->
</div>
</div>
</section>
<a name="contact"></a>
<div class="banner">
<div class="bg-overlay4">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Contact</h2>
</div>
</div>
<br />
<div class="row">
<div class="col-lg-6">
<h2 class="connect">Email: [email protected]</h2>
</div>
<div class="col-lg-6">
<h2 class="connect">Skype: sedera-tax</h2>
</div>
</div>
<!-- /.container -->
</div>
</div>
</div>
</div>
<!-- /.banner -->
<!-- Footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-lg-12">
<ul class="list-inline">
<li>
<a href="#">Home</a>
</li>
<li class="footer-menu-divider">&sdot;</li>
<li>
<a href="#about">About</a>
</li>
<li class="footer-menu-divider">&sdot;</li>
<li>
<a href="#portfolio">Services</a>
</li>
<li class="footer-menu-divider">&sdot;</li>
<li>
<a href="#contact">Contact</a>
</li>
</ul>
<p class="copyright text-muted small">Copyright &copy; Yannick Sedera 2015. All Rights Reserved</p>
</div>
</div>
</div>
</footer>
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Raw
style.css
body,
html {
width: 100%;
height: 100%;
}
body,
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 700;
}
.topnav {
font-size: 16px;
border-bottom: 1px outset rgba(192, 192, 192, 0.5);
background: rgba(192, 192, 192, 0.9);
box-shadow: 0px 1px rgba(0, 0, 0, 0.3);
}
.topnav ul.navbar-nav li a {
color: #fff;
font-size: 18px;
}
.topnav ul.navbar-nav li a:hover,
.topnav ul.navbar-nav li a:focus
{
color: #96c223;
}
.topnav .navbar-brand {
background: rgba(28, 28, 28, 0.0);
color: #FFF;
}
.topnav .navbar-brand:hover,
.topnav .navbar-brand:focus {
color: #96c223;
transform:scale(1.1);
transition: 0.2s;
}
.lead {
font-size: 18px;
font-weight: 400;
}
/*top background*/
.intro-header {
height: 855px;
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! */
padding-bottom: 50px;
text-align: center;
background-color: #fff;
background-size: cover;
height: 855px;
}
.bg-overlay {
//background:rgba(0,0,0, 0.3);
height: 855px;
}
.intro-message {
position: relative;
padding-top: 20%;
padding-bottom: 20%;
}
/*Big header*/
.intro-message > h1 {
margin-top: -50px;
text-shadow: 2px 1px 2px #000;
font-size: 5em;
color: #96c223;
}
.intro-divider {
width: 400px;
border-top: 1px solid #f8f8f8;
border-bottom: 1px solid rgba(0,0,0,0.2);
}
/*small header*/
.intro-message > h3 {
text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
color: black;
}
@media(max-width:767px) {
.intro-message {
padding-bottom: 15%;
}
.intro-message > h1 {
font-size: 3em;
}
ul.intro-social-buttons > li {
display: block;
margin-bottom: 20px;
padding: 0;
}
ul.intro-social-buttons > li:last-child {
margin-bottom: 0;
}
.intro-divider {
width: 100%;
}
}
/*line*/
hr.intro-divider {
border: 1px outset rgba(255, 255, 255, 0.2);
box-shadow: 1px 1px 1px rgba(0,0,0,0.6);
width: 100%;
}
/* social buttons */
.btn {
display: inline-block;
color: #000;
border: 2px outset rgba(0, 0, 0, 0.9);
background: #96c223;
text-shadow: 1px 1px 1px rgba(0,0,0, 20);
box-shadow: 3px 3px 3px rgba(0,0,0,0.5);
letter-spacing: 2px;
transition: 0.2s;
}
.btn:hover {
color: #fff;
border: 2px outset rgba(0, 0, 0, 0.9);
background: rgba(0,0,0, 0.9);
transform:scale(1.1);
transition: 0.2s;
text-shadow: 1px 1px 1px rgba(0,0,0, 20);
box-shadow: 3px 3px 3px rgba(0,0,0,0.5);
letter-spacing: 2px;
}
/*section 2*/
.content-section-a {
padding: 50px 0;
background: #272525 no-repeat center center fixed;
background-size: cover;
height: 855px;
}
.bg-overlay2 {
margin-top: -50px;
background: rgba(255, 255, 255, 0.2);
height: 855px;
}
/*self-taught*/
.container .link {
color: rgb(255, 255, 255);
font-weight: bold;
font-size: 22px;
}
.container .link:hover {
color: rgb(0,0,128);
font-weight: bold;
font-size: 22.5px;
}
h2.section-heading {
margin-top: 50px;
font-size: 3em;
color: rgba(0, 0, 0, 0.9);
}
/*text*/
.content-section-a p {
font-size: 22px;
font-weight: bold;
color: #000;
}
.content-section-a p a {
color: silver;
font-weight: bold;
}
/*profile picture*/
.img-circle {
margin-top: 150px;
border: 1px outset rgba(255, 255, 255, 0.3);
box-shadow: 1px 1px 1px rgba(0,0,0,0.6);
}
/* Portfolio section*/
section {
color: black;
background: url('https://41.media.tumblr.com/92e61775d4c3edcc5145936e3703d125/tumblr_nt5uo9fH9y1ud7rr3o1_1280.jpg') no-repeat center center fixed;
background-size: cover;
}
#below-section {
color: #000;
}
#small-text {
color: white;
}
/*.portfolio-item {
overflow: hidden;
padding: 7px;
color: white;
height: 308px;
}*/
/*Portfolio items*/
#portfolio .portfolio-item {
margin: 0 0 15px;
right: 0;
border: 1px outset rgba(255, 255, 255, 0.6);
}
#portfolio .portfolio-item:hover {
transition: 0.5s;
box-shadow: 5px 10px 5px rgba(0,0,0,0.9);
}
#portfolio .portfolio-item .portfolio-link {
display: block;
position: relative;
max-width: 400px;
margin: 0 auto;
}
#portfolio .portfolio-item .portfolio-link .portfolio-hover {
background: rgba(0, 0, 0, .7);
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
transition: all ease .5s;
-webkit-transition: all ease .5s;
-moz-transition: all ease .5s,
}
#portfolio .portfolio-item .portfolio-link .portfolio-hover:hover {
opacity: 1;
}
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content {
position: absolute;
width: 100%;
height: 20px;
font-size: 20px;
text-align: center;
top: 50%;
margin-top: -12px;
color: #fff;
}
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content i {
margin-top: -12px;
}
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h3,
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h4 {
margin: 0;
}
#portfolio .portfolio-item .portfolio-caption {
max-width: 400px;
margin: 0 auto;
background-color: rgba(0,0,0, 0.8);
text-align: center;
padding: 25px;
}
#portfolio .portfolio-item .portfolio-caption h4 {
color: #fff;
text-transform: none;
margin: 0;
}
#portfolio .portfolio-item .portfolio-caption p {
font-family: "Droid Serif", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-style: italic;
font-size: 13px;
margin: 0;
}
#portfolio * {
z-index: 2;
}
@media (min-width:767px) {
#portfolio .portfolio-item {
margin: 0 0 30px;
}
}
/*.col-md-4 {
overflow: hidden;
display: inline-block;
border: 1px outset rgba(255, 255, 255, 0.6);
background: rgba(0, 0, 0, 0.6);
border-radius: 1%;
text-align: center;
box-shadow: 2px 3px 2px rgba(0,0,0,0.3);
text-shadow: 1px 2px 1px rgba(0,0,0,0.3);
cursor: pointer;
}
.col-md-4:hover {
transition: 0.5s;
box-shadow: 5px 10px 5px rgba(0,0,0,0.9);
}*/
.section-heading-spacer {
float: left;
width: 200px;
border-top: 3px solid #e7e7e7;
}
.banner {
padding: 100px 0;
background: #FFF no-repeat center center fixed;
background-size: cover;
height: 755px;
}
.bg-overlay4 {
margin-top: -100px;
padding: 100px 0;
background: rgba(255,255,255, 0.3);
height: 755px;
}
.banner ul {
margin-bottom: 0;
}
.banner-social-buttons {
float: right;
margin-top: 0;
}
@media(max-width:1199px) {
ul.banner-social-buttons {
float: left;
margin-top: 15px;
}
}
ul.banner-social-buttons > li {
display: block;
margin-bottom: 20px;
padding: 0;
}
ul.banner-social-buttons > li:last-child {
margin-bottom: 0;
}
h2.connect {
margin: 0;
color: rgba(0, 0, 0, 0.9);
}
footer {
padding: 50px 0;
background: rgba(192, 192, 192, 0.9);
}
p.copyright {
margin: 15px 0 0;
}
Raw
styles
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="//fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment