Skip to content

Instantly share code, notes, and snippets.

@alegmal

alegmal/Portfolio.markdown

Created January 1, 2016 08:05
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save alegmal/f6f43b2dfc0c8c65f035 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save alegmal/f6f43b2dfc0c8c65f035 to your computer and use it in GitHub Desktop.
Download ZIP
Portfolio
Raw
index.html
<body data-spy="scroll" data-target=".navbar-collapse">
<header>
<link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
</header>
<div class="pageOne" id="home">
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a href="#" class="navbar-brand headera">Oleg Malinovsky</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="glyphicon glyphicon-search"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#home">Contact</a></li>
<li><a href="#aboutme">About Oleg</a></li>
<li><a href="#portfolio">Portfolio</a></li>
</ul>
</div>
</div>
</div>
<div class="container" id="bg">
<h1 class="text-center mainname">Oleg Malinovsky</h1>
<h4 class="page-header text-center">On adventure to the future</h4>
<div class="btnlist text-center">
<a class="btn btn-default" href="https://twitter.com/olegitoweb" target="_blank">Twitter</a>
<a class="btn btn-default" href="https://github.com/Cerberussian" target="_blank">GitHub</a>
<a class="btn btn-default" href="https://www.linkedin.com/profile/view?id=AAIAABv46Y4BcFdTgZt6cF4FHx80gsp_ovareio&trk=nav_responsive_tab_profile_pic" target="_blank">Linkedin</a>
<a class="btn btn-default" href="http://www.freecodecamp.com/cerberussian" target="_blank">FreeCodeCamp</a>
</div>
</div>
<div class="bgmarger"></div>
<!--end of pageOne container-->
</div>
<div class="pageTwo" id="aboutme">
<div class="container">
<div class="row">
<div class="maincontentabout col-xs-12 col-sm-6 col-md-8">
<h1 class="text-center abouth page-header">About Oleg</h1>
<p class="text-center aboutp">
<br>Hello to you!<br>
I'm 26 years old and about to finish BA in Psychology.<br><br>
Through last year I have taught myself Python (<a href="http://www.codecademy.com" target="_blank"> codecademy.com</a>, <a href="http://learnpythonthehardway.org/" target="_blank">learn python the hard way</a>), Java (<a href="http://www.udemy.com" target="_blank"> udemy.com</a>) and now I took interest in web development through <a href="http://www.udemy.com" target="_blank">udemy</a> and <a href="www.freecodecamp.com/cerberussian" target="_blank">freecodecamp.com</a> (this site is a direct result of it).<br><br>
This is my portfolio site I plan to update with projects I do throught my adventure in coding!<br><br>You are welcome to follow and <a href="#home">contact me</a> on <a href="https://twitter.com/olegitoweb" target="_blank">twitter</a> or by <a href="mailto:[email protected]?Subject=Hello%20from%20olegito.com!" target="_blank">mail</a><br><br>
</p>
</div> <!--main content about-->
<img src="http://www.olegito.com/images/me.jpg" class="img-thumbnail img-responsive col-md-4 hidden-xs">
</div> <!--row-->
</div> <!--container end-->
<div class="bgmarger"></div>
<!--end of pageTwo container-->
</div>
<div class="pageThree" id="portfolio">
<div class="container">
<h1 class="text-center portfolioh page-header">Portfolio</h1>
<div class="row adventures">
<div class="col-xs-6 col-md-4">
<a href="#" class="thumbnail adventuresthumb">
<img src="http://www.olegito.com/images/adventuredwarfs.jpg" alt="Adventure Is In Progress">
</a>
</div>
<div class="col-xs-6 col-md-4">
<a href="#" class="thumbnail adventuresthumb">
<img src="http://www.olegito.com/images/adventureprincess.jpg" alt="Adventure Is In Progress">
</a>
</div>
<div class="col-xs-6 col-md-4">
<a href="#" class="thumbnail adventuresthumb">
<img src="http://www.olegito.com/images/adventuredragon.jpg" alt="Adventure Is In Progress">
</a>
</div>
</div>
<!--end of pageThree container-->
<div class="text-center">
<button type="button" id="totop" class="btn btn-default"><a href="#home">Back to the top!</a></button>
</div>
</div>
<div class="bgmarger"></div>
</div>
Raw
Portfolio.markdown
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Raw
style.css
body {
background-color: white;
font-family: Lobster;
padding: 0;
margin:0;
}
a {
color: #337ab7 !important;
}
.bgmarger {
padding-top: 70px;
padding-bottom: 70px;
}
.pageOne {
background:url("http://www.olegito.com/images/pbg1.jpg") no-repeat center center fixed;
background-size: cover;
margin:0;
padding: 0;
}
.headera {
font-size: 2em !important;
}
.navbar-nav{
font-size: 1.5em;
}
.mainname {
margin-top: 140px;
margin-bottom: -20px;
font-size: 5.5em;
color: #FFFFFF;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
h4 {
font-size: 1.8em;
font-family: Open Sans;
color: #FFFFFF;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
.btn-default {
color: #337ab7;
font-size: 1.3em;
margin: 5px;
}
.pageTwo {
background:url("http://www.olegito.com/images/pbg7.jpg");
background-size: cover;
}
.abouth {
padding: 110px 0 0 0;
margin:0;
font-size: 4em;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #FFFFFF,
-1px 1px 0 #FFFFFF,
1px 1px 0 #000;
}
.aboutp {
margin-top: 10px;
background-color: white;
font-family: Open Sans;
font-size:1.8em;
color: #505050;
border: 1px solid black;
box-shadow: 4px 4px 1px rgba(0,0,0,0.6);
}
.img-thumbnail {
margin-top: 260px;
margin-left: 50px;
width: 250px;
border: 1px solid black;
box-shadow: 4px 4px 1px rgba(0,0,0,0.6);
}
.pageThree {
background:url("http://www.olegito.com/images/pbg5.jpg") no-repeat center center fixed;
background-size: cover;
}
.portfolioh {
font-size: 4em;
color: #FFFFFF;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
.adventures {
margin-top: 100px;
margin-bottom: 50px;
}
.adventuresthumb {
transition: 2s;
}
.adventuresthumb:hover {
transition: 0.3s;
box-shadow: 10px 10px 5px rgb(0,0,0);
}
#totop {
margin-top: 30px;
}
Raw
styles
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment