Skip to content

Instantly share code, notes, and snippets.

/PortFolio.markdown

Created May 28, 2016 07:17
Show Gist options

  • Select an option

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

Select an option

Learn more about clone URLs
Save anonymous/a9cf24388f204101a17f4cdc376952db to your computer and use it in GitHub Desktop.
Download ZIP
PortFolio
Raw
index.html
<head>
<title>Dilip pashi Web Design Portfolio</title>
</head>
<body>
<!-- Navigation -->
<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="http://www.facebook.com/dilip.pashi143" target="_blank">Dilip Pashi</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">Portfolio</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>Welcome to My Web Design Portfolio</h1>
<h3>Where Awesomeness Is Brought To Life.</h3>
<hr class="intro-divider">
<ul class="list-inline intro-social-buttons">
<li>
<a href="https://twitter.com/dilip_pashi" target="_blank" class="tweet 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://github.com/Diliprocks1986" target="_blank" class="git 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/in/diliprocks1986" target="_blank" class=" linked 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/diliprocks1986" target="_blank" class=" freecode 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">About My Journey to Web Design.</h2>
<br>
<p class="lead">I'm a <a class="link" target="_blank" href="http://www.freecodecamp.com/diliprocks1986">self taught</a> web designer, developer, co-founder and entrepreneur based in Kharagpur.<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, Angular.js, Meteor.js.<br>
Tools & expertise:<br>
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://pbs.twimg.com/profile_images/687587645912780800/taTg6il9_400x400.jpg" alt="">
</div>
</div>
</div>
<!-- /.container -->
</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">Awesomeness Portfolio.</h2>
<h3 id="below-section" class="section-subheading text-muted">Below you'll find some of my recent work.</h3>
</div>
</div>
<!-- Portfolio img1 -->
<div class="row">
<div class="col-md-4 col-sm-6 portfolio-item">
<img src= "http://placehold.it/400x150/ff66ff/000000" class="img-responsive" alt="PINK" >
<div class="portfolio-caption">
<h4>Placeholder 1</h4>
<p id="small-text" class="text-muted">Example portfolio</p>
</div>
</div>
<!-- End of Portfolio img1 -->
<!-- Portfolio img2 -->
<div class="col-md-4 col-sm-6 portfolio-item portfolio2">
<img src= "http://placehold.it/400x150/00ff00/000000" class="img-responsive" alt="GREEN" >
<div class="portfolio-caption">
<h4>Placeholder 2</h4>
<p id="small-text" class="text-muted">Example portfolio</p>
</div>
</div>
<!-- End of Portfolio img2 -->
<!-- Portfolio img3 -->
<div class="col-md-4 col-sm-6 portfolio-item">
<img src= "http://placehold.it/400x150/ff0000/000000" class="img-responsive" alt="RED" >
<div class="portfolio-caption">
<h4>Placeholder 3</h4>
<p id="small-text" class="text-muted">Example portfolio</p>
</div>
</div>
<!-- End of Portfolio img3 -->
<!-- Portfolio img4 -->
<div class="col-md-4 col-sm-6 portfolio-item">
<img src= "http://placehold.it/400x150/0000ff/000000" class="img-responsive" alt="BLUE" >
<div class="portfolio-caption">
<h4>Placeholder 4</h4>
<p id="small-text" class="text-muted">Example portfolio</p>
</div>
</div>
<!-- End of Portfolio img4 -->
<!-- Portfolio img5 -->
<div class="col-md-4 col-sm-6 portfolio-item">
<img src= "http://placehold.it/400x150/ffff00/000000" class="img-responsive" alt="YELLOW" >
<div class="portfolio-caption">
<h4>Placeholder 5</h4>
<p id="small-text" class="text-muted">Example portfolio</p>
</div>
</div>
<!-- End of Portfolio img5 -->
<!-- Portfolio img6 -->
<div class="col-md-4 col-sm-6 portfolio-item">
<img src= "http://placehold.it/400x150/00ffff/000000" class="img-responsive" alt="SKYBLUE" >
<div class="portfolio-caption">
<h4>Placeholder 6</h4>
<p id="small-text" class="text-muted">Example portfolio</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-6">
<h2 class="connect">Connect with My Web Design Studio: [email protected]</h2>
</div>
<br>
<div class="col-lg-6">
<ul class="list-inline banner-social-buttons">
<li>
<a href="https://facebook.com/dilip.pashi143" target="_blank" class=" facebook btn btn-default btn-lg"><i class="fa fa-facebook fa-fw"></i> <span class="network-name">Facebook</span></a>
</li>
<li>
<a href="https://plus.google.com/u/0/102792612631927493726" target="_blank" class=" google btn btn-default btn-lg "><i class="fa fa-google fa-fw"></i> <span class="network-name">Google+</span></a>
</li>
<li>
<a href="https://www.instagram.com" target="_blank" class=" instagram btn btn-default btn-lg"><i class="fa fa-instagram"></i> <span class="network-name">Instagram</span></a>
</li>
<li>
<a href="http://www.freecodecamp.com/diliprocks1986" target="_blank" class=" freecode btn btn-default btn-lg"><i class="fa fa-fire fa-fw"></i> <span class="network-name">freeCodeCamp</span></a>
</li>
</ul>
</div>
</div>
<!-- /.container -->
</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">Portfolio</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; Dilip pashi Web Design Studio 2016. All Rights Reserved</p>
</div>
</div>
</div>
</footer>
</body>
Raw
PortFolio.markdown
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 {
background: rgba(28, 28, 28, 0.1);
color: #000;
}
.topnav ul.navbar-nav li a:hover,
.topnav ul.navbar-nav li a:focus
{
background: rgba(255, 255, 255, 0.5);
color: #000;
}
.topnav .navbar-brand {
background: rgba(28, 28, 28, 0.0);
color: #000;
}
.topnav .navbar-brand:hover,
.topnav .navbar-brand:focus {
background: rgba(255, 255, 255, 0.5);
color: #000;
}
.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: url('https://www.colourbox.com/preview/10133993-html-code-green-screen-background-concept.jpg') no-repeat center center fixed;
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: 6em;
color: rgba(200, 50, 50, 10);
}
.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: 2px 2px 2px rgba(,0,0,0.6);
color: yellow;
}
@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: #C0C0C0;
letter-spacing: 2px;
transition: 0.2s;
}
.tweet{
background-color: rgba( 0, 172, 237, 1);
box-shadow: 0 5px 20px rgba(0, 172, 237, .5);
}
.tweet:hover{
color: #00aced;
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;
}
.git {
background-color: rgba(255, 255, 255, 1);
box-shadow: 0 5px 20px rgba(255, 255, 255, .5);
}
.git:hover{
color: #FFFFFF;
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;
}
.linked {
background-color: rgba( 0, 123, 181, 1);
box-shadow: 0 5px 20px rgba(0, 123, 181, .5);
}
.linked:hover{
color: #007bb5;
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;
}
.freecode {
background-color: #d2691e;
box-shadow: 0 5px 20px rgba(210,105,30, .5);
}
.freecode:hover{
color: #d2691e;
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;
}
.facebook{
background-color: rgba( 59, 89, 152, 1);
box-shadow: 0 5px 20px rgba(59, 89, 152, .5);
}
.facebook:hover{
color: #3b5998;
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;
}
.google{
background-color: rgba( 221, 75, 57, 1);
box-shadow: 0 5px 20px rgba(221, 75, 57, .5);
}
.google:hover{
color: #dd4b39;
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;
}
.instagram{
background-color: rgba( 18, 86, 136, 1);
box-shadow: 0 5px 20px rgba(18, 86, 136, .5);
}
.instagram:hover{
color: #125688;
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: url('http://www.stimulbrain.com/wp-content/uploads/2012/10/Goal-Setting-The-Key-to-Success.jpg') 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(0,128,0);
font-weight: bold;
font-size: 22px;
}
.container .link:hover {
color: rgb(220,20,60);
font-weight: bold;
font-size: 22.5px;
}
h2.section-heading {
margin-top: 100px;
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('http://web.mit.edu/aloomis/www/portfolio/background.jpg') no-repeat center center fixed;
background-size: cover;
}
#below-section {
color: #000;
}
#small-text {
color: white;
}
/*Portfolio items*/
#portfolio .portfolio-item {
margin: 0 0 15px;
right: 0;
border: 1px outset rgba(255, 255, 255, 0.6);
}
#portfolio .portfolio-item:hover {
border: 1px outset rgba(0, 0, 0, 0.9);
background: rgba(0,0,0, 0.9);
transform:scale(.7);
transition: 0.5s;
text-shadow: 1px 1px 1px rgba(0,0,0, 20);
box-shadow: 3px 3px 3px rgba(0,0,0,0.5);
}
#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: 5;
}
#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: url('http://pizzaworld.in/pages/backgrounds/background_contact.jpg') 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.5/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