Skip to content

Instantly share code, notes, and snippets.

@ymoregola

ymoregola/index.html

Last active September 10, 2015 03:07
Show Gist options
  • Save ymoregola/e84310ee4923525f94f2 to your computer and use it in GitHub Desktop.
Save ymoregola/e84310ee4923525f94f2 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello World!</title>
<!-- Bootstrap core CSS -->
<!-- <link href="css/bootstrap.css" rel="stylesheet"> -->
<link href="css/style.css" rel="stylesheet">
<!-- Custom styles for this template go here -->
<!--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>
<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>
<script>
$(function () {
$('#tooltip1').tooltip();
});
</script>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip();
});
</script>
<script src="js/scripts.js"></script>
</head>
<!--Head End-->
<!--Body Sarts-->
<body data-spy="scroll" data-target=".navbar">
<!--navbar starts here-->
<nav class="navbar navbar-inverse navbar-static-top navbar-fixed-top" role="navigation">
<div class="container-fluid">
<a href="#" class="navbar-brand">Yanick Moregola</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 class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<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>
</div>
</nav> <!--navbar ends here-->
<!-- Start Carousel-->
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target = "#myCarousel" data-slide-to = "0" class="active"></li>
<li data-target = "#myCarousel" data-slide-to = "1"></li>
<li data-target = "#myCarousel" data-slide-to = "2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="img/portfolioheroimage1.jpg" alt="desktop_picture" class="img-responsive">
<div class="carousel-caption">
<h3> Text 1</h3>
<p>Lorem ipsum dolor site amet.</p>
</div>
</div>
<div class="item">
<img src="img/portfolioheroimage2.jpg" alt="typewriter" class="img-responsive">
<div class="carousel-caption">
<h3> Text 2</h3>
</div>
</div>
<div class="item">
<img src="img/portfolioheroimage3.jpg" alt="desk" class="img-responsive">
<div class="carousel-caption">
<h3> Text 3</h3>
</div>
</div>
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
<!-- End Carousel-->
<div class="container"> <!--Main Container-->
<div class="row">
<div class="col-md-4 col-xs-12 col-lg-8" class="image- responsive">
<h2>Portfolio Concept</h2>
<p>Currently don't have any projects to showcase.</p>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">View More.</button>
</div>
<div class="col-md-4 col-xs-12 col-lg-8" class="image-responsive">
<h2>Project Goals</h2>
<p>Currently working 40 hours a <a href="#" title="More information" id="tooltip1"Tooltips>week</a>, but can squeeze in an extra 30 hours.</p>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">View More.</button>
</div>
<div class="col-md-4 col-xs-12 col-lg-8" class="image-responsive">
<h2>Course Goals</h2>
<p>After this course, a career change into development would be great. Freelancing opportunities woul also be great for an extra income and to increase the projects on my portfolio.</p>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">View More.</button>
</div>
</div>
<!--About-->
<div class="container anchor" id="about">
<div class="header">
<h1>About</h1>
</div>
<img class="ympic" src="img/ympic.jpg" alt="ym picture">
<div class="intro column">
<h2>Introduction</h2>
<p>paragraph paragraph paragraph</p>
</div>
<div class="weapons column">
<h3>My Weapons</h3>
<ul id="weapons_list">
<ul>
<li>HTML5</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Ruby on Rails</li>
</ul>
</div>
<div class="main_text">
<h3>More about me</h3>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div> <!--End About Container-->
<!--Work-->
<div class="container anchor" id="work">
<div class="header">
<h1>Work</h1>
</div>
<div class="test_content_work">
<h3>This is test text for WORK section.</h3>
</div>
</div>
<!--Learn More / FAQ-->
<div class="container anchor" id="faq">
<div class="row-learnmore">
<h1 class="learn-more">Learn More</h1>
</div>
<div class="modal-button">
<button class="btn btn-primary" data-toggle="modal" data-target="bs-example-modal-sm">Small modal</button>
</div>
</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" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<span class= "glyphicon glyphicon-plus"></span> Question 1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<span class= "glyphicon glyphicon-plus"></span> Question 2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
Answer 2.....................
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<span class= "glyphicon glyphicon-plus"></span> Question 3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
Answer 3.....................
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingFour">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
<span class= "glyphicon glyphicon-plus"></span> Question 4
</a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
<div class="panel-body">
Answer 4.....................
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingFive">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
<span class= "glyphicon glyphicon-plus"></span> Question 5
</a>
</h4>
</div>
<div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive">
<div class="panel-body">
Answer 5.....................
</div>
</div>
</div>
</div>
</div>
<table>
<tr class="my-row">
<th>Services</th>
<th>Service 1</th>
<th>Service 2</th>
</tr>
<tr class="my-row">
<td>Feature 1</td>
<td>Property 1</td>
<td>Property 2</td>
</tr>
<tr class="my-row">
<td>Feature 2</td>
<td>Property 1</td>
<td>Property 2</td>
</tr>
<tr class="my-row">
<td>Feature 3</td>
<td>Property 1</td>
<td>Property 2</td>
</tr>
<tr class="my-row">
<td>Feature 4</td>
<td>Property 1</td>
<td>Property 2</td>
</tr>
<tr class="my-row">
<td>Feature 5</td>
<td>Property 1</td>
<td>Property 2</td>
</tr>
</table>
<!--projects (inside Work section)-->
<div class="image" id="0"></div>
<div class="image" id="1"></div>
<div class="image" id="2"></div>
<div class="image" id="3"></div>
</div>
<!--Contact-->
<div class="container anchor" id="contact">
<div class="col-lg-4 col-md-4">
<div class="header">
<h1>Contact</h1>
</div>
<div class="email">
<span class= "glyphicon glyphicon-envelope"></span>
[email protected]
</div>
<div class="mobile_phone">
<span class= "glyphicon glyphicon-phone"></span>
787-587-0839
</div>
<!-- <a href="https://www.linkedin.com/in/yanickmoregola">
<img class="linkedin_logo" src="img/linkedinblue.png">
</a>
<a href="https://github.com/ymoregola">
<img class="github_logo" src="img/githubblack.png">
</a> -->
</div>
<div class="col-lg-8 col-md-8">
<form>
<div class="form-group">
<label for="name-label">Name</label>
<input class="form-control" placeholder="Enter name" type="text" id="name">
</div>
<div class="form-group">
<label for="email-label">Email</label>
<input class="form-control" placeholder="Enter email" type="email" id="email">
</div>
<div class="form-group">
<label for="message-label">Message</label>
<textarea class="message-box" placeholder="Write your message here" style="resize: none" cols="40" rows="5" id="message"></textarea>
</div>
<button type="submit" class="btn btn-primary" id="submit-button">Submit</button>
</form>
</div>
<p id="visible-comment"></p>
<p id="char-count"></p>
</div>
<!--End Contact container-->
<footer>
Yanick Moregola 2015&copy;
<a href="https://twitter.com/share" class="twitter-share-button" data-via="PlankingFever">Tweet</a>
<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/yanickmoregola" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>
</footer>
</body>
</html>
Raw
scripts.js
var myKitties = [ { title: "First Project", pic: "https://www.petfinder.com/wp-content/uploads/2012/09/Blog-Kitty-Cam-solo.jpg" }, { title: "Second Project", pic: "http://www.animal-photography.com/thumbs/red_tabby_long_hair_kitten_~AP-0UJFTC-TH.jpg" },
{ title: "Third Project", pic: "http://www.animal-photography.com/thumbs/silver_tabby_kittens~AP-0JO6Y9-TH.jpg" },
{ title: "Fourth Project", pic: "http://www.animal-photography.com/thumbs/silver_tabby_kitten_looking_up~AP-0DLVMB-TH.jpg" }
];
$(document).ready(function(){
$(".message-box").css("background-color", "pink");
$("#submit-button").on("click", function() {
// now we're going to work in here
console.log("clicked");
var comment = $(".message-box").val();
console.log(comment);
$("#visible-comment").html(comment);
return false;
});
$(".message-box").on("keyup", function() {
console.log("keyup happened");
var charCount = $(".message-box").val().length;
console.log(charCount);
$("#char-count").html(charCount);
if(charCount > 50) {
$("#char-count").css("color", "red");
} else {
$("#char-count").css("color", "black");
};
});
var rows = $(".my-row");
console.log("rows working");
for(var i=0; i<rows.length; ++i) {
if (i%2===0) {
$(rows[i]).css("background-color", "orange");
};
};
// Project pictures
for(var i=0; i<myKitties.length; ++i) {
$( "#" + i ).css("background-image", "url(" + myKitties[i].pic + ")" );
};
$(".image").mouseenter( function() {
console.log(myKitties[this.id].title);
$(this).html("<p class='info'><span class='proj-title'>Title:</span> " + myKitties[this.id].title + "</p>");
}).mouseleave( function() {
$("p.info").html("");
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment