Skip to content

Instantly share code, notes, and snippets.

@Sammykhaleel

Sammykhaleel/index.html

Created April 9, 2016 21:30
Show Gist options
  • Save Sammykhaleel/b0abddbb350814db84d8dd9201ecba73 to your computer and use it in GitHub Desktop.
Save Sammykhaleel/b0abddbb350814db84d8dd9201ecba73 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" href="css/styles.css">
<!-- 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>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<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-->
<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/img11.jpg" alt=img11>
<div class="carousel-caption">
<h3>Responsive Website</h3>
<p>More than just text on a page, it's a complete responsive website!</p>
</div>
</div>
<div class="item">
<img src="img/img22.jpg" alt=img22>
<div class="carousel-caption">
<h3>Gorgeous Looking Pages</h3>
<p>I add graphics, style fonts, and position elements to create a beautiful looking website. </p>
</div>
</div>
<div class="item">
<img src="img/img33.jpg"
alt=img33>
<div class="carousel-caption">
<h3>Navigation</h3>
<p>Fixed navigation bars and single page scrolling</p>
</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>I want to showcase websites I have created and coding projects I have completed. </p>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Web Development Course">View details &raquo;</button>
</div><!-- /col -->
<div class="col-md-4">
<h2>Project Goals</h2>
<p>I will complete 3 projects a week for 6 months in order to finish the course on time. I would like to commit about 15 hours per week to acheive my goal. </p>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">View details &raquo;</button>
</div><!-- /col -->
<div class="col-md-4">
<h2>Course Goals</h2>
<p>I want to get hired as an entry level developer or work as a freelancer after this course.</p>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Obtainable after complettion of course">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="img/giants.jpg" class="img-responsive">
</div>
</div>
<div class="col-md-4">
<div class="image">
<img src="img/giants.jpg" class="img-responsive">
</div>
</div>
<div class="col-md-4">
<div class="image">
<img src="img/giants.jpg" class="img-responsive">
</div>
</div>
<div class="col-md-4">
<div class="image">
<img src="img/giants.jpg" class="img-responsive">
</div>
</div>
<div class="col-md-4">
<div class="image">
<img src="img/giants.jpg" class="img-responsive">
</div>
</div>
<div class="col-md-4">
<div class="image">
<img src="img/giants.jpg" class="img-responsive">
</div>
</div>
<div class="col-md-4">
<div class="image">
<img src="img/giants.jpg" class="img-responsive">
</div>
</div>
<div class="col-md-4">
<div class="image">
<img src="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="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 video"> <!-- VIDEO -->
<iframe width="560" height="315" src="https://www.youtube.com/embed/DcHKOC64KnE" frameborder="0" allowfullscreen></iframe>
</div> <!-- END VIDEO -->
<div class="container contactdiv" id="contact" data-stellar-background-ratio="50"> <!-- /START CONTACT -->
<div class="header"><h1>contact</h1></div>
<div class="row">
<div class="col-md-4">
<p><span class="glyphicon glyphicon-user"></span><strong>Email:</strong>John@john.com</p>
<p><span class="glyphicon glyphicon-home"></span><strong>Address:</strong>Plateia Karitsi 25</p>
<p><span class="glyphicon glyphicon-asterisk"></span><strong>Telephone:</strong>+30 1654984</p>
</div>
<div class="col-md-8">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" <textarea placeholder="Write your Name" maxlength=50>
<label for="email">Email*</label>
<input type="email" class="form-control" id="email" <textarea placeholder="Write your email" required="required">
<label for="text">Message*</label>
<textarea style="resize:none" cols="40" rows="5" id="message" <textarea placeholder="Write your message" class="form-control message-box" required="required" minlength=5></textarea>
</div>
<button type="submit" class="btn btn-warning">Submit</button>
</form> <!-- /END CONTACT -->
</div>
</div>
</div> <!-- /END CONTACT -->
<div class="container"> <!-- /START FOOTER -->
<footer>
<div id="copyright">&copy;John 2016</div>
<div id="twitterbutton"><a href="https://twitter.com/aptbs" class="twitter-follow-button" data-show-count="false" data-show-screen-name="false">Follow @aptbs</a></div>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<div class="fb-like" data-href="https://www.facebook.com/QOTSA/?fref=ts" data-layout="button" data-action="like" data-show-faces="true" data-share="false"></div>
</footer>
</div>
<!-- ============================= -->
<!-- All your JavaScript comes now -->
<!-- ============================= -->
<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>
<script>
$(function () {
$("#item1").tooltip();
});
</script>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip();
});
</script>
<!-- Can place script tags with JavaScript files here -->
<script src="js/jquery.stellar.min.js"></script>
<script type="text/javascript">
var $root = $('html, body');
$('.navbar-nav a').click(function() {
var href = $.attr(this, 'href');
$root.animate({
scrollTop: $(href).offset().top
}, 500, function () {
window.location.hash = href;
});
return false;
});
</script>
<script>$('.contactdiv').stellar();</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment