Skip to content

Instantly share code, notes, and snippets.

@rifen

rifen/My Portfolio Page.markdown

Created July 10, 2016 15:10
Show Gist options
  • Save rifen/5ab77347dccf9c0f9cea384a5ec56a5f to your computer and use it in GitHub Desktop.
Save rifen/5ab77347dccf9c0f9cea384a5ec56a5f to your computer and use it in GitHub Desktop.
Download ZIP
My Portfolio Page
Raw
index.html
<div class="container-fluid">
<body>
<div class="navigation navbar-collapse">
<div class="nav icon-bar navbar-fixed-top">
<div class="media">
<a href="https://github.com/rifen" id="email" target="_blank"><img class="sm img-responsive" src="http://image.flaticon.com/icons/svg/38/38401.svg">
</img>
</a>
<a href="https://www.linkedin.com/in/seth1881" id="linkedin" target="_blank"><img class="sm img-responsive" src="http://image.flaticon.com/icons/svg/124/124011.svg">
</img>
</a>
<a href="https://www.instagram.com/seth_1881/" id="insta" target="_blank"><img class="sm img-responsive" src="http://image.flaticon.com/icons/svg/124/124032.svg">
</img>
</a>
<a href="https://www.youtube.com/user/Riffy1881" id="youtube" target="_blank"><img class="sm img-responsive" src="http://image.flaticon.com/icons/svg/124/124015.svg">
</img>
</a>
<a href="https://twitter.com/seth_1881" id="twitter" target="_blank"><img class="sm img-responsive" src="http://image.flaticon.com/icons/svg/124/124021.svg">
</img>
</a>
<a href="https://www.facebook.com/sethgehring1881" target="_blank"><img class="sm img-responsive" id="facebook" src="http://image.flaticon.com/icons/svg/124/124010.svg">
</img>
</a>
</div>
</nav>
<nav class="navbar navbar-default navbar-right" id="nav">
<div class="navbar-header">
<a href="#" class="navbar-brand">Seth Gehring</a>
</div>
<ul class="nav navbar-nav">
<li id="btn-nav"><a href="#about-click">About</a></li>
<li id="btn-nav"><a href="#portfolio-click">Portfolio</a></li>
<li id="btn-nav"><a href="#contact-click">Contact</a></li>
</ul>
</nav>
</div>
</div>
<span class="anchor" id="about-click"></span>
<div class="container-fluid" id="about">
<h1 class="well h1 about">About</h1>
<div class="row">
<div class="col-md-8" id="well1">
<p class="h4">Name:</p>
<p><mark>Seth Alexzandre Gehring</mark></p>
<p class="h4">Who is Seth?</p>
<p>Seth is someone who wants to make it in the IT world! He is doing whatever it takes to work with cool technology everyday. He also really wants to become a great developer. Web development and design have been his passion every since he was
really young. That passion has only gotten stronger as his life rolls on.</p>
<p class="h4">
His Hobbies?
</p>
<p>
<ul>
<li>Web development and design</li>
<li>Games (like every other tech nerd)</li>
<ul>
<li>Current Games</li>
<ul>
<li>Overwatch</li>
<li>The Witcher (Trying to complete the series slowly but surely)</li>
</ul>
</ul>
<li>Hanging out with friends :)</li>
<li>Music! An avid Hip-Hop/Rap <a href="https://open.spotify.com/user/1257282335" class="text-warning" target="_blank">follower</a> and <em>dabble</em> at music <a href="https://soundcloud.com/speedy1881" class="text-muted" target="_blank">production</a>.</li>
<li>Working out! Seth works out 3/4 times a week at least. He love's it and it keeps him super healthy.
</ul>
</div>
<div class="col-xs-5" id="well2">
<img src="https://cloud.githubusercontent.com/assets/10360333/16708563/036c55ae-45be-11e6-8de1-0b913bb2dfe7.jpg" class="img-responsive img-rounded" id="portrait"></img>
</div>
<div class="col-xs-5" id="well3">
<p class="h4">Currently Working on:</p>
<p>Getting my <a href="https://www.freecodecamp.com" class="text-danger" target="_blank">Free Code Camp</a> Full Stack Development Certification and an eventual six pack :/</p>
<p class="h4">My Best Qualities</p>
<ol>
<li>Loyalty</li>
<li>Respect</li>
<li>Honesty</li>
<li>Great Work Ethic</li>
</ol>
<p class="h4">How Seth can help you!</p>
<p>Seth will try to fix all of your computer problems, no matter how hard. He will even help you with any other problems, he's very reliable. As well, he can give you some fitness tips.</p>
<p class="h4">Seth's Life Missions</p>
<p>> Impact the world</p>
<p>> Self-improvement</p>
<p>> Friends and Familiy</p>
<p>> Travel the world</p>
</div>
</div>
</div>
<span class="anchor" id="portfolio-click"></span>
<div class="container-fluid" id="portfolio">
<h1 class="well h1 portfolio">Portfolio</h1>
<div class="container-fluid" id="image-container">
<img class="img-thumbnail" src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder1.png"></img>
<img class="img-thumbnail" src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder1.png"></img>
<img class="img-thumbnail" src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder1.png"></img>
<img class="img-thumbnail" src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder1.png"></img>
<img class="img-thumbnail" src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder1.png"></img>
<img class="img-thumbnail" src="http://www.pacinno.eu/wp-content/uploads/2014/05/placeholder1.png"></img>
</div>
</div>
<span class="anchor" id="contact-click"></span>
<div class="container-fluid" id="contact">
<h1 class="well h1 contact">Contact</h1>
<div class="container-fluid">
<blockquote>
<p><b>Want to get in touch with me?</b> Contact me anytime if you have any questions, concerns or just want to chat. I am a pretty busy person but I make as much time as possible for people!</p>
</blockquote>
</div>
<form class="form-horizontal" method="post" action="mailto:seth.a.gehring@gmail.com">
<div class="form-group">
<label class="col-xs-2 control-label" for="inputSuccess">First Name:</label>
<div class="col-xs-5">
<input type="text" id="inputSuccess" class="form-control" placeholder="First Name" name="firstname" required></div>
</div>
<div class="form-group">
<label for="inputEmail" class="control-label col-xs-2">Email:</label>
<div class="col-xs-5">
<input type="email" class="form-control" id="inputEmail" placeholder="Email" name="Email" required>
</div>
</div>
<div class="form-group">
<label for="inputMessage" class="control-label col-xs-2">Message:
</label>
<div class="col-xs-5">
<textarea type="text" class="form-control" id="inputMessage" placeholder="Ask me anything!" tabindex="4" name="Message" required></textarea>
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-6">
<button type="submit" class="btn btn-primary" id="send">Send!</button>
</div>
</div>
</form>
</div>
<div class="container-fluid" id="footer">
<footer>
<p style="float:left;">Copyright Seth Gehring 2016</p>
<p style="float:right;">Icons designed by <a href="https://www.iconfinder.com/CloudSponge">Cloud Sponge</a> and Freepik and distributed by Flaticon</p>
</footer>
</div>
</body>
</div>
Raw
My Portfolio Page.markdown
Raw
style.css
@import url(https://fonts.googleapis.com/css?family=Lato);
@media (min-width: 768px) {
body {
background-color: #3366CC;
color: black;
font-family: 'Lato';
width: 80%;
}
.media {
max-width: 99.999999%;
max-height: 50%;
overflow: auto;
display: block;
}
.sm {
max-width: 2.8%;
max-height: 2.8%;
float: right;
clear: left;
margin-right: 3px;
background-color: white;
display: block;
}
h1 {
text-align: center;
}
#nav {
background-color: #333399;
border-color: white;
margin: .2%;
max-width: 18%;
display: block;
}
.navbar-default {
text-align: right;
}
ul.nav li a,
ul.nav li a:visited {
color: #fff !important;
}
ul.nav li a:hover,
ul.nav li a:active {
color: black !important;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:active {
color: black !important;
}
.navbar-default .navbar-brand {
color: white !important;
}
.about {
background-color: black;
color: #4ABDAC;
}
#about {
height: 25%;
background-color: #4ABDAC;
}
.well {
border: none;
}
#well1 {
background-color: #4ABDAC;
padding: 10px;
width: 33%;
float: left;
margin-left: 5px;
border: none;
}
#well2 {
background-color: #4ABDAC;
width: 33%;
clear: right;
border: none;
}
#well3 {
clear: right;
background-color: #4ABDAC;
padding: 10px;
width: 33%;
border: none;
}
.portfolio {
background-color: black;
color: #FC4A1A;
}
#portfolio {
height: 25%;
background-color: #FC4A1A;
}
#image-container{
clear: both;
margin-bottom: 30px;
}
#portfolio img {
max-width: 32.4%;
min-width: 30%;
margin: 4px;
}
.contact {
background-color: black;
color: #F7B733;
}
#contact {
height: 25%;
background-color: #F7B733;
}
.contact-message {}
form {
margin-left: 25%;
}
#footer {
background-color: #333399;
height: 25%;
border-radius: 0px 0px 10px 10px;
}
}
@media (max-width: 767px) {
body {
background-color: #3366CC;
color: black;
font-family: 'Lato';
width: 100%;
margin-top: 280px;
}
span{
display: block;
height: 300px; /*same height as header*/
margin-top: -300px; /*same height as header*/
visibility: hidden;
}
.media {
background-color: #3366CC;
}
.sm {
max-width: 16.5%;
max-height: 10%;
float: right;
background-color: white;
}
h1 {
text-align: center;
}
#nav {
background-color: #333399;
border-color: white;
}
ul.nav li a,
ul.nav li a:visited {
text-align: center;
color: #fff !important;
}
ul.nav li a:hover,
ul.nav li a:active {
text-align: center;
color: black !important;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:active {
text-align: center;
color: black !important;
}
.navbar-default .navbar-brand {
text-align: center;
color: white !important;
}
.about {
background-color: black;
color: #4ABDAC;
}
#about {
height: 25%;
background-color: #4ABDAC;
}
.well {
border: none;
}
#well1 {
background-color: #4ABDAC;
padding: 10px;
margin-left: 5px;
border: none;
}
#well2 {
background-color: #4ABDAC;
border: none;
clear: both;
text-align: center;
min-width: 100%;
}
#well3 {
width: 100%;
float: left;
clear: both;
background-color: #4ABDAC;
border: none;
}
.portfolio {
background-color: black;
color: #FC4A1A;
}
#portfolio {
height: 25%;
background-color: #FC4A1A;
}
#image-container{
clear: both;
margin-bottom: 30px;
}
#portfolio img {
margin: 4px;
}
.contact {
background-color: black;
color: #F7B733;
}
#contact {
height: 25%;
background-color: #F7B733;
}
form {
}
#inputSuccess {
width: 200%;
}
#inputEmail {
width: 200%;
}
#inputMessage {
width: 200%;
}
#send {
width: 100%;
}
#footer {
background-color: #333399;
height: 25%;
border-radius: 0px 0px 10px 10px;
}
}
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment