Skip to content

Instantly share code, notes, and snippets.

@Sammykhaleel

Sammykhaleel/index.html

Created March 30, 2016 23:29
Show Gist options
  • Save Sammykhaleel/5eac3f38a36f23fa6881ddacb3a5ab41 to your computer and use it in GitHub Desktop.
Save Sammykhaleel/5eac3f38a36f23fa6881ddacb3a5ab41 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Hello World!</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Custom styles for this template go here -->
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script>
</script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body data-spy="scroll" data-target=".navbar">
<div id="fb-root"></div>
<script>
</script>
<!-- nav bar starts here -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="David Heil">
<a href="#">David Heil</a>
</div>
</div> <!--end navbar-header -->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#index">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li><a>Work</a></li>
<li><a href="#faq">FAQ</a></li>
</ul>
</div> <!--nav-->
</div> <!--end nav container-->
</nav> <!--navbar ends here-->
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="container" id="home">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/portfolioheroimage_1.jpg" alt="portfolio image #1">
<div class="carousel-caption">
<h1 id="first">Creative spark that catches the eye</h1>
</div>
</div>
<div class="item">
<img src="img/lesson8-portfolioheroimage2_2.jpg" alt="portfolio image #2">
<div class="carousel-caption">
<h1 id="second">Imagination that stirs the soul</h1>
</div>
</div>
<div class="item">
<img src="img/portfolioheroimage3_3.jpg" alt="Portfolio Image #3">
<div class="carousel-caption">
<h1 id="third">Vision that brings them to life</h1>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<h2>Portfolio Concept</h2>
<p>More than just another web developer. Experienced Healthcare IT professional with a passion for learning and having fun.</p>
<!--<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p> -->
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top column 1">View Details &raquo;</button>
</div><!-- /col -->
<div class="col-md-4">
<h2>Project Goals</h2>
<p>15 to 20 hours a week. Working towards career as freelance web developer!</p>
<!--<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p> -->
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top Column 2">View Details &raquo;</button>
</div><!-- /col -->
<div class="col-md-4">
<h2>Course Goals</h2>
<p>Focused on developing the competency to embark on a freelance web developer career, where I can embrace the freedom of a virtual workplace and more freely express my creativity.</p>
<!-- <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p> -->
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top column 3">View Details &raquo;</button>
</div><!-- /col -->
</div><!-- /row -->
<hr>
</div> <!-- end of container div-->
<!-- /container -->
<div class="embed-responsive embed-responsive-4by3">
<iframe width="420" height="315" src="https://www.youtube.com/embed/Q2L2YIZLsO4" frameborder="0" allowfullscreen></iframe>
</div>
<div class="container">
<div class="row" id="work">
<div class="col-md-4">
<div class="image">
<img src="http://bitballoon.scdn4.secure.raxcdn.com/f3343f7128c223c9b6beb9ab0f0410d8eab85546/58358/img/giants.jpg" class="img-responsive">
</div>
</div>
<div class="col-md-4">
<div class="image">
<img src="http://bitballoon.scdn4.secure.raxcdn.com/f3343f7128c223c9b6beb9ab0f0410d8eab85546/58358/img/giants.jpg" class="img-responsive">
</div>
</div>
<div class="col-md-4">
<div class="image">
<img src="http://bitballoon.scdn4.secure.raxcdn.com/f3343f7128c223c9b6beb9ab0f0410d8eab85546/58358/img/giants.jpg" class="img-responsive">
</div>
</div>
<div class="col-md-4">
<div class="image">
<img src="http://bitballoon.scdn4.secure.raxcdn.com/f3343f7128c223c9b6beb9ab0f0410d8eab85546/58358/img/giants.jpg" class="img-responsive">
</div>
</div>
<div class="col-md-4">
<div class="image">
<img src="http://bitballoon.scdn4.secure.raxcdn.com/f3343f7128c223c9b6beb9ab0f0410d8eab85546/58358/img/giants.jpg" class="img-responsive">
</div>
</div>
<div class="col-md-4">
<div class="image">
<img src="http://bitballoon.scdn4.secure.raxcdn.com/f3343f7128c223c9b6beb9ab0f0410d8eab85546/58358/img/giants.jpg" class="img-responsive">
</div>
</div>
<div class="col-md-4">
<div class="image">
<img src="http://bitballoon.scdn4.secure.raxcdn.com/f3343f7128c223c9b6beb9ab0f0410d8eab85546/58358/img/giants.jpg" class="img-responsive">
</div>
</div>
<div class="col-md-4">
<div class="image">
<img src="http://bitballoon.scdn4.secure.raxcdn.com/f3343f7128c223c9b6beb9ab0f0410d8eab85546/58358/img/giants.jpg" class="img-responsive">
</div>
</div>
</div>
</div>
<div class="container-fluid" id="about">
<div class="container">
<div class="header">
<h1>About Me</h1>
</div>
<div class="container">
<div class="row" id="columns">
<div class="col-md-4">
<div class="image">
<img src="http://bitballoon.scdn4.secure.raxcdn.com/747b2ec7086b896e2c313d62fab6212e5740dc93/c9583/img/baseball.jpg" class="img-responsive">
</div>
</div>
<div class="col-md-4">
<div class="intro column">
<h2>Introduction</h2>
<p>I am an aspiring web developer <a href="#" title="Creating websites" id="item1">Tooltips</a> living in Seattle, WA. </p>
</div>
</div>
<div class="col-md-4">
<div class="skills column">
<h3>My Skills</h3>
<ul id="skill-list">
<li>creating and styling HTML websites</li>
</ul>
</div>
</div>
<div class="main-text">
<h3>My Story</h3>
<p>I moved to Seattle a year ago with the goal of creating a happy life for myself in a city I could call my own. Becoming a web developer fits that goal on a professional level, and I enjoy learning as much as I can in order to become profficient at it.
My hobbies include baseball, video games, and playing tennis on the weekends for fun. </p>
</div>
</div><!-- end container -->
<div class="container-fluid" id="contact">
<div class="container">
<div class="header">
<h1>Contact Me</h1>
</div>
<div class="Contact Info">
<h2>Drop me a line!</h2>
<p><span class="glyphicon glyphicon-asterisk"></span>Email me at davidheil55@gmail.com</p>
</div>
</div>
<form>
<div class="form-group">
<input type="text" id="name" class="form-control">
<label for="name">Your Name</label>
</div>
<div class="form-group">
<input type="email" id="email" class="form-control" required="required">
<label for="email">*Your Email</label>
</div>
<textarea style="resize:none"cols="40"rows="5"id="text"class="form-control"required="required"><label for="text">Message</label></textarea>
<button type="submit" class="btn btn-default">Submit</button>
<form action='”/login”' method='”post”' name='”login”'><input type='hidden' name='form-name' value='”login”' />
</form>
<div class="container" id="contact" data-stellar-background-ratio=".5">
<div class="container" id="faq">
<div class="row">
<h1 class="learn-more">Learn More</h1>
<div class="modal-button">
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">My Resume</button>
</div> <!-- end of modal button div -->
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" <span aira-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">Resume</h4>
</div>
<div class="modal-body">
<embed id="modalembed" src="Glatts_Resume_SA-2.pdf">
</div> <!-- end modal-body div -->
</div>
</div>
</div>
</div> <!-- end of row div -->
<!-- <div class="container"> -->
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" date-togel="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">What other IT experience do you have?
</a>
</h4>
</div> <!-- end of panel-heading -->
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
I have been working in Healthcare IT for 13 years performing implementations of new enterperise medical records, enhancing and optimizing existing electronic medical records and developing integration between separate healthcare entities.
</div> <!-- end panel-body -->
</div> <!-- end of panel-collapse -->
</div> <!-- end of panel panel default -->
</div> <!--end of panel-group div -->
<!--</div>--> <!--end of container -->
</div> <!-- end of faq div -->
</div>
<!-- ============================= -->
<!-- All your JavaScript comes now -->
<!-- ============================= -->
<!-- JQuery file to load before bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Bootstrap core JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Can place script tags with JavaScript files here -->
<script type="text/javascript" src="js/jquery.stellar.min.js"></script>
<script type="text/javascript" src="js/work.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<footer>
<div class="footerRight">
<ul>
<li>&copy; Philip James 2016</li>
<li><a href="https://twitter.com/PhilipJamesDev" class="twitter-follow-button" data-show-count="false" data-show-screen-name="false">Follow @PhilipJamesDev</a></li>
<li>
<div class="fb-share-button" data-href="http://driver-sun-42628.bitballoon.com" data-layout="button"></div>
</li>
</div>
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment