Skip to content

Instantly share code, notes, and snippets.

@ScorpIan555

ScorpIan555/index.html

Created September 27, 2016 18:49
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ScorpIan555/fe2a3ba5ffa7587cc96fe2b07a966ba0 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ScorpIan555/fe2a3ba5ffa7587cc96fe2b07a966ba0 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<!--Title-->
<title>ZF Home</title>
<!--meta tags-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 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/mad_styles.css">
</head><!--head-->
<body data-spy="scroll" data-target=".navbar">
<!--navbar 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><!--/button-->
<div class="projectName navbar-brand">
<a href="#">Zen Franklin</a>
</div><!--end project name -->
</div> <!--/navbar-header -->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="list-item"><a href="http://www.guardian.co.uk" title="Guardian">Guardian</a></li>
<li class="list-item"><a href="http://www.google.com" title="Google">Google</a></li>
<li class="list-item"><a href="#about" title="About Zen Franklin">About</a></li>
<li class="list-item"><a href="#faq" title="FAQ">FAQ</a></li>
<li class="list-item"><a href="#contact" title="Contact Us">Contact</a></li>
<li class="list-item"><a href="#" title="Zen Franklin Home">Home</a></li>
</ul><!--/navbar-nav-->
</div> <!--/navbar-collapse-->
</div> <!--/nav container-->
</nav><!--/navbar-->
<!-- *************** -->
<!-- *************** -->
<!-- *************** #index ***************-->
<!--index body-->
<div id="index">
<!--start of carousel-->
<div class="container-fluid">
<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>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
<li data-target="#carousel-example-generic" data-slide-to="4"></li>
</ol><!-- Close Carousel Indicators-->
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/Persistence of Memory.jpg" alt="Hero Image 2" class="img-responsive">
<div class="carousel-caption">
<h3>"Persistence of Memory"</h3>
<p>Salvador Dali</p>
</div><!-- Close Carousel Caption -->
</div><!-- Close Item -->
<div class="item">
<img src="img/Starry Night.jpg" alt="Hero Image 3" class="img-responsive">
<div class="carousel-caption">
<h3>"Starry Night"</h3>
<p>Vincent van Gogh</p>
</div><!-- Close Carousel Caption -->
</div><!-- Close Item -->
<div class="item">
<img src="img/Water Lillies1.jpg" alt="Hero Image 3" class="img-responsive">
<div class="carousel-caption">
<h3>"Water Lillies"</h3>
<p>Claude Monet</p>
</div><!-- Close Carousel Caption -->
</div><!-- Close Item -->
<div class="item">
<img src="img/Water Lillies2.jpg" alt="Hero Image 3" class="img-responsive">
<div class="carousel-caption">
<h3>"Water Lillies"</h3>
<p>Claude Monet</p>
</div><!-- Close Carousel Caption -->
</div><!-- Close Item -->
<div class="item">
<img src="img/Water Lillies3.jpg" alt="Hero Image 3" class="img-responsive">
<div class="carousel-caption">
<h3>"Water Lillies"</h3>
<p>Claude Monet</p>
</div><!-- Close Carousel Caption -->
</div><!-- Close Item -->
<!-- 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><!--/Left Carousel -->
<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><!-- /Right Carousel -->
</div><!-- /carousel-inner -->
</div><!--/carousel-example-generic -->
</div><!--/container-fluid-->
<hr>
<!--index course goal columns-->
<div class="container">
<div class="row">
<div class="col-md-4">
<h2>Portfolio Concept</h2>
<p>My portfolio will showcase my two distinct professional pursuits, web development and my work as a stand-up comic and writer.</p> <p>I have branded my website as <span class="branded-text">Zen Franklin</span> as a strategic choice. </p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div><!-- /col -->
<div class="col-md-4">
<h2>Project Goals</h2>
<p>I want to build a clean, sophisticated, professional portfolio site showcasing my skills as a web developer.</p> <p>At the same time, I want to build a structure which will house a variety of material which will comprise my portfolio as a comic.</p> <p>One important goal for 2017 will be producing and recording my first special. I also want to have a blog, a space to store and display short stories and contact information.</p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div><!-- /col -->
<div class="col-md-4">
<h2>Course Goals</h2>
<p>I am looking to complete the course by the end of 2016. I am working part-time to give myself enough time to work and complete tasks. I also worked hard to learn material before class started.</p> <p>I have some front-end dev skills so I am hoping to get a bit more advanced in the front end while becoming competent with Ruby and back-end development.</p> <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div><!-- /col -->
</div><!-- /row -->
</div> <!-- /container -->
<hr>
</div><!--/index-->
<hr>
<!-- *************** -->
<!-- *************** -->
<!-- *************** #about ***************-->
<!--about body-->
<div id="about">
<!--about container-->
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-4">
<h2>Comic</h2>
<img src="img/Louis_CK.jpg" class="img-responsive" alt="Louis CK" title="Louis CK" class="image-class1" height="100%" width="100%" </img>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div><!-- /col -->
<div class="col-xs-6 col-md-4 intro column">
<h2>Intro</h2>
<p>duction.</p>
</div><!-- /col -->
<div class="col-xs-6 col-md-4 skills column">
<ul id="skill-list">
<h3>Mad Skills</h3>
<li>M</li>
<li>A</li>
<li>D</li>
<li>S</li>
<li>K</li>
<li>I</li>
<li>L</li>
<li>L</li>
<li>S</li>
</ul>
</div><!-- /col -->
</div><!-- /row -->
</div><!--/container-->
<hr>
<!--about me -->
<div class="jumbotron">
<div class="row">
<div class="col-md-4">
<h2>Portfolio Concept</h2>
<p>My portfolio will showcase my two distinct professional pursuits, web development and my work as a stand-up comic and writer.</p> <p>I have branded my website as <span class="branded-text">Zen Franklin</span> as a strategic choice. </p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div><!-- /col -->
<div class="col-md-4">
<h2>Project Goals</h2>
<p>I want to build a clean, sophisticated, professional portfolio site showcasing my skills as a web developer.</p> <p>At the same time, I want to build a structure which will house a variety of material which will comprise my portfolio as a comic.</p> <p>One important goal for 2017 will be producing and recording my first special. I also want to have a blog, a space to store and display short stories and contact information.</p>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div><!-- /col -->
<div class="col-md-4">
<h2>Course Goals</h2>
<p>I am looking to complete the course by the end of 2016. I am working part-time to give myself enough time to work and complete tasks. I also worked hard to learn material before class started.</p> <p>I have some front-end dev skills so I am hoping to get a bit more advanced in the front end while becoming competent with Ruby and back-end development.</p> <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div><!-- /col -->
</div><!-- /row -->
</div><!-- /jumbotron -->
<hr>
<!--about q's-->
<div class="container">
<h2>Questions 1.9</h2>
<p>1.) Describe the advantages and disadvantages of designing for mobile-first, and</p>
<p>2.) the differences between responsive and adaptive design</p>
<hr>
<p>1.) Mobile design necessarily prioritizes content over decoration, so it does limit some of the design work that is possible. However, it is more complex because more types and sizes of device need to be perpetually considered. </p>
<p>2.) Adaptive designs are not necessarily built on a fluid grid, they can have fixed grids. They can introduce media queries to target devices so they represent something of a compromise from static to mobile design. Adaptive pages tend to load quicker than responsive, however, mobile is the wave of the future.</p>
<hr>
</div><!--container-->
<hr>
<!-- about container -->
<div class="container ">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-2">
<h2>Comic</h2>
<img src="img/Louis_CK.jpg" class="img-responsive" alt="Louis CK" title="Louis CK" class="image-class1" height="100%" width="100%" </img>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div><!-- /col -->
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-2">
<h2>Web</h2>
<img src="img/Groucho_Marx.jpg" class="img-responsive" alt="Groucho Marx" title="Groucho Marx" class="image-class1" height="100%" width="100%" </img>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div><!-- /col -->
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-2">
<h2>Engineer</h2>
<img src="img/Bill_Hicks.jpg" class="img-responsive" alt="Bill Hicks" title="Bill Hicks" class="image-class1" height="100%" width="100%" </img>
</div><!-- /col -->
</div><!-- /row -->
</div><!--/container-->
<hr>
</div><!--/about-->
<hr>
<!-- *************** -->
<!-- *************** -->
<!-- *************** #faq ***************-->
<!-- faq body-->
<div id="faq">
<!-- faq accordion-->
<div class="container-fluid">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><span class="glyphicon glyphicon-plus">
So... What kinda questions do people ask you frequently?
</span>
</a><!--/question-->
</h4><!--/panel-title-->
</div><!--/panel heading-->
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<p>I really have no idea, I just started.</p>
</div><!-- close panel-body-->
</div><!-- close panel-collapse collapse-->
</div><!--close panel panel-default-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"><span class="glyphicon glyphicon-plus">
So... What is Zen Franklin?
</span></a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<span class="branded-text">ZenFranklin.com</span> is my portfolio page.
</div><!-- close panel-body-->
</div><!-- close panel-collapse collapse-->
</div><!--close panel panel-defaul-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"><span class="glyphicon glyphicon-plus">
Is it true you're running out of questions to ask yourself?
</span></a>
</h4><!--close panel-title-->
</div><!--close panel heading-->
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
At the moment, yes.
</div><!-- close panel-body-->
</div><!-- close panel-collapse collapse-->
</div><!--close panel panel-defaul-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseFour"><span class="glyphicon glyphicon-plus">
Is this the fourth question?
</span></a>
</h4><!--close panel-title-->
</div><!--close panel heading-->
<div id="collapseFour" class="panel-collapse collapse">
<div class="panel-body">
Yes it is!
</div><!-- close panel-body-->
</div><!-- close panel-collapse collapse-->
</div><!--close panel panel-defaul-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseFive"><span class="glyphicon glyphicon-plus">
Are you done yet?
</span></a>
</h4><!--close panel-title-->
</div><!--close panel heading-->
<div id="collapseFive" class="panel-collapse collapse">
<div class="panel-body">
Now I am.
</div><!-- close panel-body-->
</div><!-- close panel-collapse collapse-->
</div><!--close panel panel-defaul-->
</div><!--panel-group-->
</div><!--container-fluid-->
</div><!--faq-body-->
<hr>
<!-- *************** -->
<!-- *************** -->
<!-- *************** #contact ***************-->
<!--contact body-->
<div id="contact">
<div class="container">
<div class="contact_us">
<h4>Contact Us</h4>
</div><!--/contact-->
<div class="mission">
<p><span class="branded-text"><strong>Zen Franklin</strong></span> aspires to inspire. For general inquiries, feel free to send love, hate, yin or yang to:</p>
</div><!--/mission-->
<div class="email_address">
<p><a href="mailto:contact@zenfranklin.com" target="_blank"><span class="glyphicon glyphicon-envelope"> </span> contact@zenfranklin.com</a></p>
</div><!--/email_address-->
<div class="email_contact">
<h4>Other Email Inquiries:</h4>
</div><!--/email_contact-->
<div class="email_list">
<p><span class="glyphicon glyphicon-flash"></span> General inquiries: <a href="mailto:contact@zenfranklin.com" target="_blank">contact@zenfranklin.com</a></p>
<p><span class="glyphicon glyphicon-film"></span> Media requests: <a href="mailto:media@zenfranklin.com" target="_blank">media@zenfranklin.com</a></p>
<p><span class="glyphicon glyphicon-earphone"></span> Sales inquiries: <a href="mailto:sales@zenfranklin.com" target="_blank">sales@zenfranklin.com</a></p>
<p><span class="glyphicon glyphicon-sunglasses"></span> Ian Daley: <a href="mailto:ian@zenfranklin.com" target="_blank">ian@zenfranklin.com</a></p>
</div><!--/email_list -->
<div class="snailmail1">
<h4>Snail Mail</h4>
</div><!--/snailmail1-->
<div class="snailmail2">
<p>123 Fake St</p>
<p>Brooklyn, NY 11011</p>
<p>U.S.A.</p>
</div><!--/snailmail2-->
</div><!--/container-->
<hr>
</div><!--/contact body-->
<!-- *************** -->
<!-- *************** -->
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Javascript-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- *************** -->
<!-- *************** -->
<!-- Javascript-->
<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>
</body><!--/body-->
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment