Skip to content

Instantly share code, notes, and snippets.

@Joejhorn

Joejhorn/index.html

Forked from anonymous/index.html
Created November 30, 2017 01:59
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Joejhorn/5c1014c12208f730b04aa939b891a53d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Joejhorn/5c1014c12208f730b04aa939b891a53d to your computer and use it in GitHub Desktop.
Download ZIP
Joe Horn - Portfolio & About
Raw
index.html
<html lang="en">
<head>
<title>Joe Horn Portfolio</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://use.fontawesome.com/0b9b403b99.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-light navbar-light fixed-top">
<!-- Brand/logo -->
<div class="container col-sm-12">
<a class="navbar-brand" href="#">
<img src="http://dishtruck.com/joethumbnail.jpg" alt="logo" height="40px">
</a>
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#portfolio">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#socialMedia">Social Media</a>
</ul>
<ul class="nav navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</ul>
</div>
</nav>
<div class="container">
<div class="jumbotron">
<div class="row">
<div class="col-sm-12 text-center top-buffer">
<h1 id="about" class="text-info">Portfolio and About Me Page</h1>
<p>Experience Entrepreneur / Start Up Experience / Succesfull</p>
<img src="http://speakermagazine.com/wp-content/uploads/2016/10/computer-1209641_1920-1100x400.jpg" class="img-thumbnail">
</div>
</div>
<div class="col-sm-12 text-center top-buffer">
<a id="portfolio" </a>
<h1 class="text-info">Just a Few Projects</h1>
<p>Click on each for more information</p>
</div>
<div class="row">
<div class="col-sm-6 top-buffer">
<img src="http://mukalab.com/wp-content/uploads/2015/06/NEW_coming-soon.jpg " class="img-thumbnail "></div>
<div class="col-sm-6 top-buffer">
<img src="http://mukalab.com/wp-content/uploads/2015/06/NEW_coming-soon.jpg " class="img-thumbnail "></div>
</div>
<div class="row " id="top-buffer">
<div class="col-sm-6 ">
<img src="http://mukalab.com/wp-content/uploads/2015/06/NEW_coming-soon.jpg " class="img-thumbnail "></div>
<div class="col-sm-6">
<img src="http://mukalab.com/wp-content/uploads/2015/06/NEW_coming-soon.jpg " class="img-thumbnail "></div>
</div>
<div class="row text-center ">
<div class="col-sm-12 top-buffer">
<a id="contact">
<h2>I would love to hear from you</h2>
</div>
</div>
<form class="formClass center-div ">
<div class="form-group">
<label for="name">Name:</label>
<input type="name" class="form-control " placeholder="Name " id="name">
</div>
<div class="form-group ">
<label for="email ">Email address:</label>
<input type="email " class="form-control " placeholder="Email Address " id="email ">
</div>
<div class="form-group ">
<label for="phoneNumber ">Phone Number:</label>
<input type="tel " class="form-control " placeholder="Phone Number " id="phoneNumber ">
</div>
<div class="form-group ">
<label for="message ">Message:</label>
<textarea class="form-control " rows="5 " id="message " placeholder="Message "></textarea>
<!-- <input type="text "class="form-control " placeholder="Message " id="message "> -->
</div>
<button type="submit " class="btn btn-primary ">Submit</button>
</form>
<footer>
<hr>
<div class="row ">
<div class="col-sm-6 top-buffer ">
<a id="socialMedia"></a>
<p>Track me Down</p>
<ul>
<a href="https://github.com/Joejhorn "><i class="fa fa-github fa-3x " aria-hidden="true "></i></a>
<a href="# "><i class="fa fa-twitter fa-3x "></i></a>
<a href="# "><i class="fa fa-facebook fa-3x "></i></a>
<a href="# "><i class="fa fa-linkedin fa-3x "></i></a>
</ul>
</div>
</div>
</footer>
</body>
Raw
script.js
window.addEventListener("hashchange", function() { scrollBy(0, -70) })
//need to understand how this works, case I have no idea!!
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
Raw
style.css
ul {
padding: 0;
}
#formClass {
width: 80%;
}
.center-div {
margin: 0 auto;
width: 70%; /* value of your choice which suits your alignment */
}
.top-buffer {
margin-top: 30px;
}
#bottom-buffer {
margin-top: 30px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment