Skip to content

Instantly share code, notes, and snippets.

@syedirfan7

syedirfan7/My Portfolio Page.markdown

Created March 19, 2016 12:48
Show Gist options
  • Save syedirfan7/53a2f8f4e4f54e524e71 to your computer and use it in GitHub Desktop.
Save syedirfan7/53a2f8f4e4f54e524e71 to your computer and use it in GitHub Desktop.
Download ZIP
My Portfolio Page
Raw
index.html
<html class="bckgimg" >
<head>
<meta name="viewport" content="width=device-width, user-scalable=yes">
<link href='https://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Chewy' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lato:100' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<title>Irfan's Page</title>
</head>
<a name="home"></a>
<body>
<div>
<p>
<div>
<div><a href="#home">
<img border="0" alt="To Home Page" src="https://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-xpa1/v/t1.0-9/1484542_888327641207787_331423269693737226_n.jpg?oh=a5063b4a8e8cb8f6020f775819cbc3db&oe=573B499F&__gda__=1463619101_d2c8a829d855be131e2776c6895e206e"width="75" height="75" class="img-thumbnail"></a><h3>Irfan Syed</h3></div>
<div class="row"><nav id="buttonsId" class="btn-group">
<a href="#home"><div class="col-xs-3"><button type="button" class="btn btn-info btn-lg">
<span style="color:green;font-weight:bold"> <span class="glyphicon glyphicon-home"></span> Home</span>
</button></div></a>
<a href="#about">
<div class="col-xs-3 col-sm-3"><button type="button" class="btn btn-info btn-lg"> <span style="color:green;font-weight:bold"><span class="glyphicon glyphicon-info-sign"></span> About</span></button></div></a>
<a href="#profile">
<div class="col-xs-3 col-sm-3">
<button type="button" class="btn btn-info btn-lg">
<span style="color:green;font-weight:bold"> <span class="glyphicon glyphicon-briefcase"></span> Profile</span>
</button></div></a>
<a href="#connect">
<div class="col-xs-3 col-sm-3"><button type="button" class="btn btn-info btn-lg"><span style="color:green;font-weight:bold"><span class="glyphicon glyphicon-random"></span> Connect</span></button></div></a>
</nav></div>
</div>
<div class="had container ">
<h1 class="had-r1">Welcome<span class="had-num">2</span> Irfan's Page</h1>
</p>
</div>
<div class="container">
<div id="blank" class="jumbotron">
</div>
<a name="about"></a>
<div id="aboutId" class="jumbotron">
<article>
<p>
<h2><u>About Me</u></h2></p>
<p>Hello World!!!</p>
<p>I am Irfan Syed , an aspirant to learn to code well and build things which can make impact.</p>
<p>Also I have a Full-Time Degree in <span><a href="https://en.wikipedia.org/wiki/Instrumentation_and_control_engineering"target="_blank">Instrumentaion and Control Engineering</a></span>.</p>
<ul id="list">
<li>In College, I did a certification course on <span><a href="https://en.wikipedia.org/wiki/Programmable_logic_controller" target="blank">PLC</a></span> programming for various PLCs from manufacturers like Keyence, Omron, GEFANUC, ABB and Siemens
along with <span><a href="https://en.wikipedia.org/wiki/SCADA"target="blank">SCADA</a></span>.</li>
<p />
<li>Worked on GUI Language called <span><a href="https://en.wikipedia.org/wiki/LabVIEW" target="_blank">LabVIEW</a><span> as intern at <span><a href="http://www.ni.com/en-in.html" target="_blank">National Instruments</a></span>.</li>
<p />
<li>I started coding with C-language and did a mini project on online food management (console).</li>
<p />
<li>On a typical day I work on <span><a href="https://en.wikipedia.org/wiki/SQL"target="_blank">SQL</a></span>.</li>
<p />
<li>I can say I know Hadoop and its ecosystem, having done a 30 day hands-on-practice right from the scratch using <span><a href="https://hadoop.apache.org/"target="_blank">Apache Hadoop</a>.</span></li>
<p />
<li>On <span><a href="http://www.freecodecamp.com/syedirfan7"target="blank">FreeCodeCamp</a></span> I learn HTML5, CSS3 and JavaScript.
</li>
<p />
</ul>
</article>
</div>
<div id="blank" class="jumbotron">
</div>
<a name="profile"></a>
<div id="profileId" class="jumbotron">
<u><h2>Profile</h2></u>
<p class="prebuttontext">See My Latest Works here
</p>
<iframe class="embed-responsive-item" src="http://codepen.io/shaafiirfan7/full/VeRxrJ" width="600" height="200"></iframe>
<iframe src="http://codepen.io/shaafiirfan7/full/ONRgGv"></iframe>
<p class="prebuttontext">UpComing Project: A Random Quote Machine!!</p>
</div>
<div id="blank" class="jumbotron">
</div>
<a name="connect"></a>
<div id="connectId" class="jumbotron container"><span><h2 style="text-align:center;line-height:-3px;font-family:Lobster" ><u>Connect with me</u></h2></span>
<aside class="email">
<p class="prebuttontext">Please send your suggestions/reviews via
<a href="mailto:shaafiirfan7@gmail.com" target="">
<button class="btn btn-lg gmailbutton"><img class="gmailbutton" src="https://www.google.com/images/icons/product/googlemail-16.png"> <span style="font-family:arial,sans-serif; color:#222;vertical-align: bottom;">Gmail</span></button>
</a>
</p>
</aside>
<aside class="social">
<p class="prebuttontext">Tweet Me on
<a href="https://twitter.com/SHAAFIIRFAN" target="_blank">
<button id="twitter" class="btn btn-lg"><span><i class="fa fa-twitter"<i class="fa fa-twitter"></i> Twitter</span></button>
</a>
</p>
<p class="prebuttontext">Become a friend on
<a href="https://www.facebook.com/irfan.syed.94" target="_blank">
<button id="facebook" class="btn btn-lg"><span> <i class="fa fa-facebook-official"></i> Facebook</span>
</button>
</a>
</p>
<p class="prebuttontext">Follow me on
<a href="https://plus.google.com/u/0/+IrfanSyed917" target="_blank">
<button id="google" class="btn btn-lg"><span style="color:#DC4E41;font-weight:bold"> <i class="fa fa-google-plus"></i> Google</span>
</button>
</a>
</p>
<p class="prebuttontext">Lets code on
<a href="http://www.freecodecamp.com/syedirfan7" target="_blank">
<button id="fcc" class="btn btn-lg"><span style="color:darkgreen;font-weight:bold">freeCodeCamp<img id="fccimg" src="https://avatars2.githubusercontent.com/u/9892522?v=3&s=400"></img></span>
</button>
</a>
</p>
<p class="prebuttontext">Connect me on
<a href="https://www.linkedin.com/in/syed-irfan-8a061549" target="_blank">
<button id="linkedin" class="btn btn-lg"><span style="color:#0077B5;font-weight:bold">Linked<script src="//platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/MemberProfile" data-id="https://www.linkedin.com/in/syed-irfan-8a061549" data-format="click"></script></span>
</button>
</a>
</p>
<p class="prebuttontext">Fork me on
<a href="https://github.com/syedirfan7" target="_blank">
<button id="github" class="btn btn-lg"><span style="color:#181717;font-weight:bold"> <i class="fa fa-github"></i> Github</span>
</button>
</a>
</p>
</aside>
</div>
</body>
<div id="blank" class="jumbotron">
</div>
<div id="blank" class="jumbotron">
</div>
<footer id="footerWrapper" class="footer">
<section id="mainFooter">
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="footerWidget">
<h3>About this Page</h3>
<p class="footerText">
<a href="#" title="Irfan Syed,Learner"></a> I just completed my first web page.I feel accomplished about this as it made me learn many new concepts.I Thank <a href="http://www.freecodecamp.com/about" target="_blank">freeCodeCamp</a> for this.</p>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="footerWidget">
<h3>That's what he said</h3>
<article class="boxTestimonial footerText">
<blockquote>
"Tell me and I forget. Teach me and I remember. Involve me and I learn."
</blockquote>
<div class="clientIcon">
<span><strong>Benjamin Franklin</strong></span>
</div>
</article>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="footerWidget">
<h3>Keep in touch</h3>
<h1 class="phone footerText">+91-9566041387</h1>
<h3 class="name">Irfan Syed</h3>
<address class="footerText"> <p>
Hinjawadi, Pune<br>
Maharashtra-411057, India<br>
<i class="icon-mail-alt"></i>&nbsp;<a href="mailto:shaafiirfan7@gmail.com" target="_blank">shaafiirfan7@gmail.com</a>
</p>
</address>
<ul class="socialNetwork">
<li><a href="https://www.facebook.com/irfan.syed.94" target="_blank" class="tips" title="Become a friend on Facebook"><i class="fa fa-facebook-official"></i></a></li>
<li><a href="https://twitter.com/SHAAFIIRFAN" target="_blank" class="tips" title="Tweet Me on Twitter"><i class="fa fa-twitter"></i></a></li>
<li><a href="https://plus.google.com/u/0/+IrfanSyed917" target="_blank" class="tips" title="Follow me on Google+"><i class="fa fa-google-plus"></i></a></li>
<li><a href="https://www.linkedin.com/in/syed-irfan-8a061549" target="_blank" class="tips" title="Connect me on Linkedin"><i class="fa fa-linkedin"></i></a></li>
<li><a href="http://www.freecodecamp.com/syedirfan7" class="tips" title="Lets code on Freecodecamp" target="_blank"><span style="width:1px,height:1px"><img id="fccimg" src="https://avatars2.githubusercontent.com/u/9892522?v=3&s=400"></img></a></li>
<li><a href="https://github.com/syedirfan7" target="_blank" class="tips" title="Fork me on Github"><i class="fa fa-github"></i></a></li>
</ul>
</div>
</div>
<div id="footerRights"class="col-md-3 col-sm-6">
<ul class="quickMenu">
<li><a href="#home" class="linkLeft">Home</a></li>
<li><a href="#about">About Me</a></li>
<li><a href="#profile">Profile</a></li>
<li><a href="#connect">Connect</a></li>
</ul>
</div>
</div>
</div>
</section>
<section >
<div class="container">
<div class="row">
</div>
</div>
</section>
</footer>
</html>
Raw
My Portfolio Page.markdown
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Raw
style.css
body{width:100%;
background:transparent;
overflow-y: scroll;
overflow-x: hidden;
}
img{
margin-left:2em;
margin-top:-.5em;
}
#buttonsId {
float:right;
margin-top:-2.5em;
margin-right:1em;
border-radius: 25px;
}
#home{
width:5%;
height:5%;
}
h3{
color:white;
font:bold;
margin-top:0;
margin-left:.5em;
font-family: 'Lobster', cursive;
}
.had {
color: #d44b15;
text-align: center;
font-size: 1em;
font-family: Lato,serif;
padding: 14em 0em 16em;
margin-bottom: 5em;
}
.had-r1 {
line-height: 1em;
font-size: 7em;
font-weight: 100;
font-size:09vw;
}
.had-num {
font-size: 3em;
font-style: italic;
vertical-align: bottom;
margin: 0 -0.3em;
font-size:20vw;
}
.bckgimg{
background: url(
https://lh3.googleusercontent.com/-YauCHTSIW2U/VUa8nb-8H6I/AAAAAAAABfQ/uUwWBXUUa9A/w2560-h1440/polygon-wallpaper-12.jpg) no-repeat center center fixed;
// background-repeat:no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding-top:5px;
padding-right:18px;
}
#aboutId{
background:#C0C0C0;
border-radius:100px;
text-align:center;
position:relative;
margin-left:1em;
margin-top: 5em;
font-family: 'Lobster';
}
#list{
text-align:left;
margin-left:2em;
font-family: 'Chewy';
font-size:16px;
}
#blank{
background:transparent;
}
#profileId{
background:#FFFF99;
margin-top: 10em;
font-family: Lobster;
border-radius:100px;
text-align:center;
position:relative;
margin-left:1em;
}
iframe{
width:50vw;
height:25vw;
}
.portfolioPreview{
foreground:url(http://codepen.io/shaafiirfan7/full/VeRxrJ)no-repeat center center fixed ;
position:relative;
width:200px;
height:200px;
top:5px;
left:5px;
display:block;
}
#connectId{
background:#ff9800;
border-radius:100px;
position:relative;
margin-left:1em;
// font-family:Lobster;
//font-size:50vw;
}
.email{
text-align:left;
position:float;
margin-top:10em;
}
.gmailbutton{
margin-left:-.2em;
font-weight:bold;
}
.social{
margin-top:-15em;
margin-left:-10em;
// float:right;
text-align:right;
}
#fccimg{
height:20px;
width: 20px;
margin-left:.2em;
}
#twitter{
font-family:Helvetica Neue;
color:#55ACEE;font-weight:bold
}
#google{
font-family:Roboto;
color:#dd4b39;font-weight:bold;
}
#facebook{
color:#3B5998;font-weight:bold;
font-family:Lucida Grande;
}
#github{
font-family:Collegiate;
}
#linkedin{
font-family:Avenir Next;
}
#fcc{
font-family:'Abel';
//font-size:17vw;
}
.prebuttontext{
font-size:160px;
font-family: 'Chewy';
font-size:20vw;
}
footer{
background-color:skyblue;
position:relative;
margin-left:1em;
}
.footerText{
font-family: 'Chewy';
}
#mainFooter{
font-family:Lobster;
margin-top:2em;
}
ul.socialNetwork li{
display: inline-block;
}
ul.socialNetwork{
margin-left:-2em;
margin-top:-1.5em;
}
#footerRights{
margin-top:3em;
font-family: 'Chewy';
}
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment