Skip to content

Instantly share code, notes, and snippets.

@joeybronzoni

joeybronzoni/index.html

Last active February 3, 2017 01:09
Show Gist options
  • Save joeybronzoni/b2ae24219bd0ac51f85d5027b6f87829 to your computer and use it in GitHub Desktop.
Save joeybronzoni/b2ae24219bd0ac51f85d5027b6f87829 to your computer and use it in GitHub Desktop.
Download ZIP
OWZNvp
Raw
index.html
<html lang="en">
<head>
<title>Joseph Skrzysowski</title>
<!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><!--I had to add this link for certain functions to work -->
<!--check my bootstrap link-->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"/><!--link to bootstrap-->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css"/><!--link to font awesome-->
<link href="https://fonts.googleapis.com/css?family=Cinzel+Decorative|Fredericka+the+Great|Great+Vibes|Open+Sans|Oranienbaum|Satisfy|Six+Caps" rel="stylesheet"> <!--link to google fonts-->
<!--css to use for fonts below
font-family: 'Open Sans', sans-serif;
font-family: 'Satisfy', cursive; //maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css <-my original bootstrap ref
font-family: 'Great Vibes', cursive; //maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css <-my original font-awesome
font-family: 'Oranienbaum', serif;
font-family: 'Cinzel Decorative', cursive;
font-family: 'Six Caps', sans-serif;
font-family: 'Fredericka the Great', cursive;-->
<link rel="stylesheet" type="text/css" href="JSkrzysowskiPortfolio.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<div class ="pageOne text-center container-fluid"><!--I may need to remove container-fluid class-->
<ul class ="nav nav-pills">
<li>
<a href="#p1">Joseph P. Skrzysowski</a>
</li>
<li class="pull-right">
<a href="#p2">About Me</a>
</li>
<li class="pull-right">
<a href="#p3">CodePen</a>
</li>
<li class="pull-right">
<a href="#p3">Portfolio</a>
</li>
<li class="pull-right">
<a href="#p4">Contact Me</a>
</li>
</ul>
<div class="pageOne">
<div class="block text-center"></div>
<h1 id="name1">Joseph P. Skrzysowski</h1>
<h3>Always Learning Always Evolving</h3>
<div class="btnList text-center">
<a class="btn btn-default" href="#"><i class="fa fa-twitter fa-lg" id="twitterIcon" aria-hidden ="true"></i> Twitter</a>
<a class="btn btn-default" href="https://www.facebook.com/profile.php?id=100002098035855"><i class="fa fa-facebook-official" id="facebookIcon" aria-hidden="true"></i> FaceBook</a>
<a class="btn btn-default" href="#"><i class="fa fa-github fa-lg" id="githubIcon" aria-hidden="true"></i> Github</a>
<a class="btn btn-default" href="#"><i class="fa fa-linkedin" id="LinkedinIcon" aria-hidden="true"></i> LinkedIn</a>
<a class="btn btn-default" href="#"><i class="fa fa-codepen" id="codepenIcon" aria-hidden="true"></i> CodePen</a>
</div>
</div>
</div>
<div class="pageTwo" id="p2">
<div class="row">
<div class="col-md-6 text-center">
<h1 id="meabout">Joseph P. Skrzysowski</h1>
<p id="aboutme">Personal portfolio websites are crucial nowadays if you want to make a name for yourself in creative circles. A good portfolio design can make the difference between you and another creative professional with similar qualifications. Employers these days like to know what you are capable of before they hire you. Why not put your best foot forward by creating a fantastic portfolio website?</p>
<hr><!--this creates A line break under ptag, can i style it?-->
</div>
<div class="col-md-6 text-center">
<img src="https://scontent.fewr1-1.fna.fbcdn.net/v/t1.0-1/p160x160/16142286_1280359575377298_2232876494431467213_n.jpg?oh=27660317459215c7e8fd3a35cf1327fc&oe=5948D1CE" class="me" id="meme">
</div>
</div>
</div>
<div class="pageThree text-center" id="p3">
<div class="paddingTop">
<h1 id="orange">Next Level Portfolio</h1>
<h2>Portfolio Best Above the Rest</h2>
</div>
<div class="container">
<div class="row">
<div class="col-md-6">
<p data-height="265" data-theme-id="0" data-slug-hash="VmqoPQ" data-default-tab="result" data-user="josephskrzysowski" data-embed-version="2" data-pen-title="VmqoPQ" class="codepen">See the Pen <a href="http://codepen.io/josephskrzysowski/pen/VmqoPQ/">VmqoPQ</a> by Joseph Skrzysowski (<a href="http://codepen.io/josephskrzysowski">@josephskrzysowski</a>) on <a href="http://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
<a href="http://codepen.io/josephskrzysowski" target="blank"><h3>Someone I Look Up to!</h3></a>
</div>
<div class="col-md-6">
<p data-height="265" data-theme-id="0" data-slug-hash="EZbKqv" data-default-tab="result" data-user="josephskrzysowski" data-embed-version="2" data-pen-title="EZbKqv" class="codepen">See the Pen <a href="http://codepen.io/josephskrzysowski/pen/EZbKqv/">EZbKqv</a> by Joseph Skrzysowski (<a href="http://codepen.io/josephskrzysowski">@josephskrzysowski</a>) on <a href="http://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
<a href="http://codepen.io/josephskrzysowski" target="blank"><h3>Let the music move you!</h3></a>
</div>
</div>
</div>
<!--i pasted beneath this mark!!! if i need to remove and fix-->
<div class="container">
<div class="row">
<div class="col-md-6">
<p data-height="265" data-theme-id="0" data-slug-hash="zNPBqE" data-default-tab="result" data-user="josephskrzysowski" data-embed-version="2" data-pen-title="zNPBqE" class="codepen">See the Pen <a href="http://codepen.io/josephskrzysowski/pen/zNPBqE/">zNPBqE</a> by Joseph Skrzysowski (<a href="http://codepen.io/josephskrzysowski">@josephskrzysowski</a>) on <a href="http://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
<a href="http://codepen.io/josephskrzysowski" target="blank"><h3>Someone I Look Up to!</h3></a>
</div>
<div class="col-md-6">
<p data-height="265" data-theme-id="0" data-slug-hash="VmqoPQ" data-default-tab="result" data-user="josephskrzysowski" data-embed-version="2" data-pen-title="VmqoPQ" class="codepen">See the Pen <a href="http://codepen.io/josephskrzysowski/pen/VmqoPQ/">VmqoPQ</a> by Joseph Skrzysowski (<a href="http://codepen.io/josephskrzysowski">@josephskrzysowski</a>) on <a href="http://codepen.io">CodePen</a>.</p>
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
<a href="http://codepen.io/josephskrzysowski" target="blank"><h3>Someone I Look Up to!</h3></a>
</div>
</div>
</div>
</div>
<div class="pageFour text-center" id="p4">
<div class="row">
<div class="col-md-8">
<p style="color: orange; font-size:15px;">Email:<a href="mailto:josephskrzysowski@gmail.com" style="color: orange;">josephskrzysowski@gmail.com</a></p>
</div>
</div>
<div class="footer">
<h3 style="font-family: 'Great Vibes', cursive; font-size: 2em;" id="tall">
<a href="#" target="blank">Joseph P. Skrzysowski </a>
<a href="http://codepen.io/josephskrzysowski/" target="blank">CodePen </a>
<a href="#p3" target="blank">Portfolio </a>
<a href="#p4" class="inset">Contact_Me!<span class="info">570.313.2280</span></a>
</h3>
<p style="color: white; font-size:15px;">Copyright @ Housepitalitychefs 2015. All Rights Reserved</p>
</div>
<!--<div class="circle">Call Us!<span class="info">570.313.2280</span></div>-->
</div>
<script type="text/javascript" src="JSkrzysowskiPortfolio.js"></script>
</body>
</html>
Raw
style.css
#twitterIcon{
color: rgb(0, 172, 237) !important;
}
#githubIcon{
color: rgb(102,43,129);
}
#facebookIcon{
color: rgb(0,172,237);
}
#LinkedinIcon{
color: white;
}
#codepenIcon{
color: rgb(53, 94, 59);
}
.block{
background-color: black;
opacity:.7;
padding: 10px;
display: inline-block;
border-radius: 25px;
margin-top: auto;
margin-bottom: auto;
}
.nav-pills{
font-family: 'Oranienbaum', serif;
font-size: 1.7em;
background-color: black;
margin-bottom: -10%;
margin-top: -25%;
}
#name1{
color: #6E7B8B;
}
body{
background-color: white;
font-family: 'Cinzel Decorative', cursive;
color:white;
}
h1{
padding: 0;
margin-top: 0px;
font-size: 7.5em;
}
h2{
color: orange;
}
h3{
color: orange;
}
#orange{
color: orange;
}
#orange2{
color: orange !important;
}
.btn-default{
background-color: black;
border-color: none;
color: red;
font-size: 1.7em;
}
/* comments*/
.pageOne{
background:url("https://scontent.fewr1-1.fna.fbcdn.net/v/t1.0-9/12994499_1048253558587902_7308223679272538839_n.jpg?oh=a4b37de30588119ff18e7f0801f57561&oe=590F1F77");
background-size: cover;
padding-top: 25%;
padding-bottom: 0%;
}
.pageTwo{
background:url("http://mathr.co.uk/blog/2013-04-01_interior_coordinates_in_the_mandelbrot_set.jpg");
background-size: cover;
padding-top: 2%;
}
p{
font-size: 2.0em;
}
#aboutme{
color: yellow;
}
#meabout{color: white !important;
}
.me{
height:300px;
}
#meme{
border-radius: 50%;
}
.pageThree{
background: url(http://wallpoper.com/images/00/41/31/17/mandelbrot-set_00413117.png);
background-size: cover;
padding-top: 5%;
padding-bottom: 5%;
}
#embed-nav{
opacity: 50%;
}
.pageFour{
background: url(https://drnorth.files.wordpress.com/2010/06/le-voyage-dans-la-lune-georges-melies-1902-tableau-1.png?w=584&h=438);
background-size: cover;
padding-bottom: 15%;
padding-top: 15%;
}
.inset{
display:block;width:100px;
height:100px;border-radius:50px;
font-size:20px;color:white;
line-height:100px;
text-shadow:0 1px 0 #666;
text-align:center;text-decoration:none;box-shadow:1px 1px 2px #000;
background:#cccbbb;
opacity:0.95
}.inset:hover{
color:orange;
text-shadow:0 0 1px #666;
text-decoration:none;
box-shadow:0 0 4px #222 inset;opacity:1
}
.paddingBTM{
padding-top: 25%;
padding-bottom: 25%;
width: 200px;
margin-bottom: 25px;
}
.paddingTop{
padding-top: 2%;
padding-bottom: 2%;
}
.footer{
color: orange;
background-color: black;
}
#tall{
height: 15px;
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-mfizz/2.3.0/font-mfizz.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment