Skip to content

Instantly share code, notes, and snippets.

@AttyC

AttyC/index.html

Created May 12, 2015 12:39
Show Gist options
  • Save AttyC/aec33e806f188bc5c632 to your computer and use it in GitHub Desktop.
Save AttyC/aec33e806f188bc5c632 to your computer and use it in GitHub Desktop.
Download ZIP
scripts.js
Raw
gistfile1.txt
$(document).ready(function(){
$(".message-box").css("background-color","#ccc");
$("#contact_button").on("click", function() {
var comment = $(".message-box").val();
$("#visible_comment").html(comment.toUpperCase() + "! jQuery is working beautifully!");
return false;
});
});
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Atty's Web Portfolio</title>
<!-- Twitter button -->
<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>
<!-- /Twitter -->
<!-- jQuery Media file -->
<script src="js/js.media.js" type="text/javascript"></script>
<!-- jQuery SCript -->
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- jQuery is required for Bootstrap to work -->
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="css/normalize.css" rel="stylesheet" />
<!-- Bootstrap core CSS -->
<!--<link rel="stylesheet" href="css/bootstrap.css"/>-->
<link href="css/styles.css" rel="stylesheet"/>
<link href="css/carousel.css" rel="stylesheet"/>
<link href="css/panel.css" rel="stylesheet" />
<link href='http://fonts.googleapis.com/css?family=Special+Elite' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Rokkitt:400,700' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Dancing+Script:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Bree+Serif' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Slabo+27px' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Courgette' rel='stylesheet' type='text/css'>
<!-- jQuery for Tooltip <a> -->
<script>
$(function() {
$('#item1').tooltip();
});
</script>
<!-- tooltip for WEXAS Travel -->
<script>
$(function() {
$('#tooltip1').tooltip();
});
</script>
<!-- tooltip for IPC Media -->
<script>
$(function() {
$('#tooltip2').tooltip();
});
</script>
<!-- jQuery for Tooltip <button> -->
<script>
$ (function() {
$('[data-toggle="tooltip"]').tooltip();
});
</script>
<script src="js/scripts.js"></script>
<!-- Custom styles for this template go here -->
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body data-spy="scroll" data-target="#myScrollSpy" data-offset="20">
<!-- navbar starts here -->
<nav class="navbar navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Home</a>
<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>
<div class="navbar-collapse collapse" id="myScrollSpy" >
<ul class="navbar-nav nav" >
<li><a href="#about">About</a></li>
<li><a href="#work">Work</a></li>
<li><a href="#faq">FAQ</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--end navbar collapse -->
</div><!--end navbar container-->
</nav><!-- navbar ends here-->
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container-fluid">
<h1><span class="tease">Who knew</span>Creating Websites<span class="tease">could be so much fun?</span></h1>
</div>
</div>
<div class="container anchor" id="about"><!--container about -->
<h2>I build websites</h2>
<div class="row">
<div class="col-md-6">
<div class="inner"><!-- inner class background for text only -->
<!--<img src="img/attyc.jpg"class="img-responsive" alt="Atty Cronin portrait">-->
<p>Hi,</p>
<p>I'm Atty Cronin and I'm a web developer.</p>
<p>I cut my teeth in <a href="http://www.wexas.com/" title="WEXAS Travel" id="tooltip1">travel</a> web, moved to <a href="http://www.timeincuk.com/" id="tooltip2" title="Time Inc UK">digital magazines</a> and got some skills. </p>
<p>I'm now freelancing and looking for websites to build. </p>
<!--Modal for CV -->
<div class="modal-button">
<!-- Small modal button -->
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">View CV</button>
</div>
<!-- Small modal -->
<div class="modal fade bs-example-modal-lg" tab-index="-1" rol="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">CV</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="close"><span aria-hidden="true">&times;</span></button>
</div><!-- /modal header -->
<div class="modal-body">
<!-- CV as PDF -->
<iframe src="img/Antonia_Cronin_CV.pdf" id="modalFrame"></iframe>
</div><!-- /modal body -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div><!-- /modal footer -->
</div>
</div>
</div><!-- /modal -->
</div><!-- /inner class -->
</div>
<div class="col-md-6" id="skill_list">
<div class="inner"><!-- inner class background for text only -->
<h2>My Skills</h2>
<ul>
<li>HTML &amp; CSS</li>
<li>PHP &amp; MySQL</li>
<li>Bootstrap Front End Framework</li>
<li>Javascript</li>
<li>jQuery</li>
<li>AJAX</li>
<li>Git Version Control</li>
<li>Heroku</li>
<li>Ruby Programming Language</li>
<li>Ruby on Rails MVC Framework</li>
<li>User Authentication &amp; Authorization</li>
<li>Stripe Payment Processing</li>
<li>Caching</li>
</ul>
</div><!-- /inner class -->
</div>
</div>
</div><!-- /container about-->
<div class="container anchor" id="work"><!--container work-->
<h2>Projects</h2>
<div class="row"><!-- row of images for projects -->
<div class="col-md-3 col-xs-6">
<a href="https://attycool.wordpress.com/" title="Atty C blog"> <img src="img/blog.jpg" alt="blog web dev mum" class="img-responsive center-block"/>
</a>
</div>
<div class="col-md-3 col-xs-6">
<a href="#" title="red brick wall chimney">
<img src="img/chimney.jpg" alt="red brick wall chimney" class="img-responsive center-block"/>
</a>
</div>
<div class="col-md-3 col-xs-6">
<a href="#" title="red brick wall chimney">
<img src="img/chimney.jpg" alt="red brick wall chimney" class="img-responsive center-block"/>
</a>
</div>
<div class="col-md-3 col-xs-6">
<a href="#" title="red brick wall chimney">
<img src="img/chimney.jpg" alt="red brick wall chimney" class="img-responsive center-block"/>
</a>
</div>
</div><!-- end row -->
</div><!-- /container work-->
<div class="container anchor" id="faq"><!--container faq -->
<h2>FAQs</h2>
<div class="row">
<!-- FAQ accordion -->
<div class="col-md-6" id="accordion">
<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 data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<span class="glyphicon glyphicon-cloud"></span>How did you get into web development?
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<p>I was working in travel and got involved in implementing an online flight booking system. I helped with further IT projects then moved departments to assist the marketing team with the launch of a brand new website. I learned a huge amount about coding and web project cycles.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<span class="glyphicon glyphicon-cloud"></span>
What is your turnaround time?
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<p>This will depend entirely on the site we're building. We'll discuss your requirements and see what we can do. A quality site will reflect well on you and your brand.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<span class="glyphicon glyphicon-cloud"></span>How will we set a budget?
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<p>I will discuss your budget with you and we will come up with a plan that fits within that, with room for contingency.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
<span class="glyphicon glyphicon-cloud"></span>Who are your clients?
</a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
<div class="panel-body">
<p>I have built sites for a photographer, a community organisation, Mandarin teacher and psychologist. See their testimonials <a href="#">here</a>.</p>
</div>
</div>
</div><div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
<span class="glyphicon glyphicon-cloud"></span>
What do you do for fun?
</a>
</h4>
</div>
<div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive">
<div class="panel-body">
<p>I sing with a covers band and host music classes for babies and toddlers. Smile.</p>
</div>
</div>
</div>
</div>
</div>
<!-- /FAQ accordion -->
<!-- video -->
<div class="col-md-6" id="video">
<iframe width="100%" height="315" src="https://www.youtube.com/embed/Pwrwf_8H25Y" frameborder="0" allowfullscreen></iframe>
</div>
<!-- /video -->
</div><!--/row div -->
</div><!-- /container faq-->
<div class="container anchor" id="contact"><!--container contact-->
<h2>Get in touch</h2>
<div class="row">
<div class="col-md-4 col-md-offset-2 contact">
<ul>
<li><span class="glyphicon glyphicon-envelope"></span> <a href="www.google.com">email: [email protected]</a></li>
<li><span class="glyphicon glyphicon-phone-alt"></span>phone (+44) 555 5555</li>
<li><span class="glyphicon glyphicon-map-marker"></span>address: London, England</li>
</ul>
</div>
<div class="col-md-6" id="form">
<form>
<div class="form-group">
<label for="name">Your name</label>
<input type="text" class="form-control" placeholder="Enter name" id="name">
</div>
<div class="form-group" id="phone">
<label for="phone">Your phone no.</label>
<input type="tel" class="form-control" placeholder="e.g. 07..." id="tel">
</div>
<div class="form-group">
<label for="email">Your email *</label>
<input type="email" class="form-control" placeholder="Enter email" id="email" required="required">
</div>
<div class="form-group">
<label for="message">Your message *</label>
<textarea style="resize:none" cols="40" rows="5" class="message-box form-control" placeholder="Write your message here" id="message" required="required"></textarea>
<p>* = required</p>
<button type="submit" class="btn btn-default" id="contact_button">Submit</button>
<p id="visible_comment"></p>
</div>
</form>
</div>
</div><!-- /row -->
</div><!-- /container contact-->
<footer class="container">
<ul>
<li class="twitter">
<a href="https://twitter.com/AttyCronin" class="twitter-follow-button" data-show-count="false" data-size="large">Follow @AttyCronin</a>
</li>
<li>
<div class="fb-like" data-href="http://attycronin.bitballoon.com/" data-layout="standard" data-action="like" data-show-faces="false" data-share="true"></div>
</li>
</ul>
<span class="copyright">&copy; Antonia Cronin 2015
</span>
</footer>
<!--
================================================== -->
<!-- Can place script tags with JavaScript files here -->
<!-- script to enable smooth scrolling -->
<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 to run Facebook like/share buttons -->
<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_GB/sdk.js#xfbml=1&version=v2.3";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment