Skip to content

Instantly share code, notes, and snippets.

@amfischer

amfischer/index.html

Last active October 13, 2015 22:35
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save amfischer/fa0a26dfd13045b65a71 to your computer and use it in GitHub Desktop.
Save amfischer/fa0a26dfd13045b65a71 to your computer and use it in GitHub Desktop.
Download ZIP
CF Portfolio
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Aaron's Portfolio</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/scripts.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="css/magnific-popup.css">
<link rel="stylesheet" href="css/styles.css">
<link href='https://fonts.googleapis.com/css?family=Shadows+Into+Light' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Droid+Sans+Mono' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Righteous' rel='stylesheet' type='text/css'>
<!-- 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]-->
<!-- tooltips -->
<script>$(function(){$('[data-toggle="tooltip"]').tooltip();});</script>
<!-- twitter 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>
</head>
<body data-spy="scroll" data-target=".navbar">
<!-- Load Facebook SDK for JavaScript -->
<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.4";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- 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 collapsed" 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>
<a href="#" class="navbar-brand">Project-AA</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Work <span class="caret"></span>
</a>
<ul class="dropdown-menu inner-nav">
<li><a href="#work">Profiles</a></li>
<li><a href="#work1">Batman & Joker</a></li>
<li><a href="#work2">Harley Quinn & Catwoman</a></li>
</ul>
</li>
<li><a href="#faq">FAQ</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div> <!-- end nav container -->
</nav> <!-- navbar ends here -->
<!-- Image Carousel -->
<div class="container-fluid" 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/arkham3.jpg" alt="batman logo" class="img-responsive">
<div class="carousel-caption">
<p>Aaron Fischer - Web Developer</p>
</div>
</div>
<div class="item">
<img src="img/batman3.jpg" alt="batman" class="img-responsive">
<div class="carousel-caption">
<p>Arkham Knight</p>
</div>
</div>
<div class="item">
<img src="img/joker3.jpg" alt="joker" class="img-responsive">
<div class="carousel-caption">
<p>Arkham Asylum</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>
</div>
<!-- Portfolio & Course Information -->
<div class="container-fluid goals" data-stellar-background-ratio=".5">
<div class="row">
<div class="col-md-3 col-md-offset-2 col-xs-12">
<h2>Portfolio Concept</h2>
<p>Right now I am completely new to this field, and I'm not sure where my nich in web development will be. I do, however, want to showcase myself as a fun and responsible individual who knows how to get the job done. </p>
<p><a class="btn btn-default" href="#" role="button" data-toggle="tooltip" data-placement="top" title="This button leads to oblivion">View details &raquo;</a></p>
</div>
<div class="col-md-3 col-xs-12">
<h2>Project Goals</h2>
<p>I'm going to switch to the 6 month plan, but I hope to finish this course in 4 - 5 months. I want to commit at least 20 hours a week to studying, and have a clear understanding of what to do next when I finish the course.</p>
<p><a class="btn btn-default" href="#" role="button" data-toggle="tooltip" data-placement="top" title="Is this some kind of trick?">View details &raquo;</a></p>
</div>
<div class="col-md-3 col-xs-12">
<h2>Course Goals</h2>
<p>I want to learn the skills for creating quality websites that will hopefully attract potential clients. Right now my goal is to try and break into the freelancing world, but I want to have the ability to apply for entry level jobs as well if I decide to stay put.</p>
<p><a class="btn btn-default" href="#" role="button" data-toggle="tooltip" data-placement="top" title="Hahahaha!">View details &raquo;</a></p>
</div>
<div class="col-md-8 col-md-offset-2 zebra-table">
<table class="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>
</div>
</div><!-- end row -->
</div><!-- end container -->
<!-- About Section -->
<div class="container-fluid" id="about">
<div class="row">
<div class="col-md-7 col-md-offset-2 about-spacing">
<h1>About Me</h1>
<p>I've worked in the service industry for many years and I love interacting with people. After dabbling in education for a couple of years I've decided to try my hand at a career in techonolgy and web services. The information age that we are currently in is an exciting time and it's something I want to understand more intimately.</p>
</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-2 about-spacing">
<h2>My Skills</h2>
<ul>
<li>10+ years working in customer service</li>
<li>Hard worker and Reliable</li>
<li>Intermediate level of Spanish</li>
</ul>
<div class="modal-button">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Resume - CV</button>
</div>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<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 aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">Resume - CV</h4>
</div>
<div class="modal-body">
<embed id="modalembed" src="img/evalotta_lamm.pdf">
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3 about-spacing">
<h2>My Hobbies</h2>
<ul>
<li>Playing and watching most sports</li>
<li>Video games and nerdy stuff</li>
<li>Eating like there's no tomorrow</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Work Section -->
<div class="container-fluid" id="work" data-stellar-background-ratio=".5">
<h1>Character Profiles</h1>
<div class="row">
<div class="col-md-3 col-lg-3 col-sm-12 col-xs-12 col-md-offset-0">
<h2>Batman</h2>
<div class="bman-profile image" id="0"></div>
<div class="row">
<div class="col-md-8 col-md-offset-0">
<p class="fact">Real Name:</p>
<p class="answer">Bruce Wayne</p>
<p class="fact">Occupation:</p>
<p class="answer">CEO/Philanthropist</p>
<p class="fact">Base Of Operations:</p>
<p class="answer">Gotham City</p>
<p class="fact">First Apperance:</p>
<p class="answer">Detective Comics #27(May, 1939)</p>
</div>
<div class="col-md-4">
<p class="fact">Eyes:</p>
<p class="answer">Blue</p>
<p class="fact">Hair:</p>
<p class="answer">Black</p>
<p class="fact">Height:</p>
<p class="answer">6ft 2in</p>
<p class="fact">Weight:</p>
<p class="answer">210 lbs</p>
</div>
</div>
</div>
<div class="col-md-3 col-lg-3 col-sm-12 col-xs-12">
<h2>The Joker</h2>
<div class="joker-profile image" id="1"></div>
<div class="row">
<div class="col-md-8 col-md-offset-0">
<p class="fact">Real Name:</p>
<p class="answer">Unknown</p>
<p class="fact">Occupation:</p>
<p class="answer">Professional Criminal</p>
<p class="fact">Base Of Operations:</p>
<p class="answer">Gotham City</p>
<p class="fact">First Apperance:</p>
<p class="answer">Batman #1(Spring, 1940)</p>
</div>
<div class="col-md-4">
<p class="fact">Eyes:</p>
<p class="answer">Green</p>
<p class="fact">Hair:</p>
<p class="answer">Green</p>
<p class="fact">Height:</p>
<p class="answer">6ft</p>
<p class="fact">Weight:</p>
<p class="answer">160 lbs</p>
</div>
</div>
</div>
<div class="col-md-3 col-lg-3 col-sm-12 col-xs-12 col-md-offset-0">
<h2>Harley Quinn</h2>
<div class="quinn-profile image" id="2"></div>
<div class="row">
<div class="col-md-8 col-md-offset-0">
<p class="fact">Real Name:</p>
<p class="answer">Dr. Harleen Quinzel</p>
<p class="fact">Occupation:</p>
<p class="answer">Professional Criminal</p>
<p class="fact">Base Of Operations:</p>
<p class="answer">Gotham City</p>
<p class="fact">First Apperance:</p>
<p class="answer">Batman: Harley Quinn #1(October, 1999)</p><br>
<a class="popup-youtube" href="https://www.youtube.com/watch?v=oKQ6-TT9DEw">Watch Trailer</a>
</div>
<div class="col-md-4">
<p class="fact">Eyes:</p>
<p class="answer">Blue</p>
<p class="fact">Hair:</p>
<p class="answer">Blonde</p>
<p class="fact">Height:</p>
<p class="answer">5ft 7in</p>
<p class="fact">Weight:</p>
<p class="answer">140 lbs</p>
</div>
</div>
</div>
<div class="col-md-3 col-lg-3 col-sm-12 col-xs-12">
<h2>Catwoman</h2>
<div class="cat-profile image" id="3"></div>
<div class="row">
<div class="col-md-8 col-md-offset-0">
<p class="fact">Real Name:</p>
<p class="answer">Selina Kyle</p>
<p class="fact">Occupation:</p>
<p class="answer">Professional Thief</p>
<p class="fact">Base Of Operations:</p>
<p class="answer">Gotham City</p>
<p class="fact">First Apperance:</p>
<p class="answer">Batman #1(Spring, 1940)</p>
</div>
<div class="col-md-4">
<p class="fact">Eyes:</p>
<p class="answer">Green</p>
<p class="fact">Hair:</p>
<p class="answer">Black</p>
<p class="fact">Height:</p>
<p class="answer">5ft 7in</p>
<p class="fact">Weight:</p>
<p class="answer">125 lbs</p>
</div>
</div>
</div>
</div> <!-- end row -->
</div> <!-- end container -->
<!-- FAQ Section -->
<div class="container-fluid" id="faq">
<h1>Frequently Asked Questions</h1>
<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 alt4"></span> What is your development process?
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<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-signal alt4"></span> What types of projects and clients do you typically take on?
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<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-ok alt4"></span> What is your price range and how long do projects take?
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<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-th-large alt4"></span> Do you include SEO and other marketing services?
</a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<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-check alt4"></span> Do you offer any ongoing maintenance services?
</a>
</h4>
</div>
<div id="collapseFive" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div> <!-- end accordion -->
</div> <!-- end container -->
<!-- Contact Section -->
<div class="contaier-fluid" id="contact" data-stellar-background-ratio=".5">
<h1>Contact me</h1>
<div class="row">
<div class="col-md-3 col-md-offset-2 contact-info">
<p><span class="glyphicon glyphicon-send send"></span>amfischer21@gmail.com</p><br>
<p><span class="glyphicon glyphicon-earphone phone"></span>1(800)685-1942 ext: 142</p><br>
<address><span class="glyphicon glyphicon-envelope envelope"></span>Aaron Fischer<br>
13706 N 51st Ave<br>
Glendale, AZ 85304</address>
</div>
<div class="col-md-5 form-group">
<form>
<div class="row">
<div class="col-md-6">
<label for="name">Name</label>
<input type="text" class="form-control" placeholder="Enter your name" id="name" required="required">
</div>
<div class="col-md-6">
<label for="number">Phone Number</label>
<input type="number" max="999-999-9999" class="form-control" placeholder="Enter your phone number" id="number">
</div>
</div>
<label for="email">Email</label>
<input type="email" class="form-control" placeholder="Enter your email" id="email" required="required">
<label for="message-box">Message</label>
<textarea style="resize:none" class="form-control message-box" placeholder="Enter a message"></textarea>
<br><p id="visible-comment"></p><br>
<button type="submit" id="submit" class="btn btn-default">Submit</button>
</form>
</div>
<div class="col-md-8 col-md-offset-2 contact-border">
<div id="map"></div>
<div>
</div> <!-- end row -->
<div class="row">
<div class="col-md-2 col-md-offset-5">
<footer>
<p>&copy Aaron Fischer 2015</p>
<a href="https://twitter.com/amfische" class="twitter-follow-button" data-show-count="false" data-size="large">Follow @amfische</a>
<div class="fb-like"
data-href="https://www.facebook.com/aaron.fischer.161"
data-layout="button_count"
data-action="like"
data-show-faces="true"
data-share="true">
</footer>
</div>
</div> <!-- end row -->
</div> <!-- end container -->
<!-- ================================================== -->
<!-- Can place script tags with JavaScript files here -->
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="js/jquery.stellar.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB-PNnc_tK-KWidiDnOk4J0I18WJRiSX7g&signed_in=true&callback=initMap">
</script>
<!-- magnific popup -->
<script>$(document).ready(function() {
$('.popup-youtube').magnificPopup({
type: 'iframe',
iframe: {
markup: '<div class="mfp-iframe-scaler">'+
'<div class="mfp-close"></div>'+
'<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
'</div>'
},
});
});
</script>
<!-- stellar.js -->
<script>
$(window).stellar();
</script>
<!-- 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>
</body>
</html>
Raw
scripts.js
var myWork = [
{ title: 'First Project', pic: 'img/bman1.png' },
{ title: 'Second Project', pic: 'img/joker1.png' },
{ title: 'Third Project', pic: 'img/quinn1.png' },
{ title: 'Fourth Project', pic: 'img/cat1.png' }
];
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 33.5276292, lng: -112.264748},
zoom: 11
});
};
var marker;
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: {lat: 33.5276292, lng: -112.264748}
});
marker = new google.maps.Marker({
map: map,
draggable: true,
animation: google.maps.Animation.DROP,
position: {lat: 33.5276292, lng: -112.264748}
});
marker.addListener('click', toggleBounce);
}
function toggleBounce() {
if (marker.getAnimation() !== null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
}
$(document).ready(function() {
for (var i = 0; i < myWork.length; ++i) {
$('#' + i).css('background-image', 'url(' + myWork[i].pic + ')');
}
$('.image').mouseenter( function() {
console.log(this);
$(this).html('<p class="info"><span class="proj-title"></span>' + myWork[this.id].title + '</p>');
}).mouseleave( function() {
$('p.info').html('');
});
$("textarea").css("background-color", "pink");
$("#submit").on("click", function() { //event listener for button click
var comment = $('textarea').val(); //set textarea content to variable
console.log(comment); //test variable
$('#visible-comment').html(comment); //paste variable to id="visible-comment"
});
$('textarea').on('keyup', function() { //event listener for typing
console.log('success'); //test event listener
var charCount = $('textarea').val().length; //set length of textarea content to variable
console.log(charCount); //test variable
$('#visible-comment').html(charCount); //show running character count to user
if (charCount > 50) { //conditional statement that changes txt color based on character count
$('#visible-comment').css('color', 'red');
} else {
$('#visible-comment').css('color', 'black');
};
});
var rows = $('.my-row'); //set variable
console.log(rows); //test variable
for (var i = 0; i < rows.length; ++i) { //for loop that iterates through array
if (i%2===0) { //targets even rows
$(rows[i]).css('background-color', 'black');
$(rows[i]).css('opacity', '.7');
};
if (i%2 > 0) { //targets odd rows
$(rows[i]).css('background-color', 'grey');
$(rows[i]).css('opacity', '.7');
};
};
$('.zebra-table').css('padding-top', '2em');
false;
});
Raw
styles.css
* {
box-sizing: border-box;
}
body {
position: relative;
}
h1, h2, p , ul, li, a, th, td, .navbar-brand, .panel-title, .panel-body, address {
font-family: Righteous, "Lucidia Console", Consolas, monospace;
letter-spacing: .15em;
color: white;
}
h1 {
text-align: center;
padding-top: 2em;
padding-bottom: 2em;
font-size: 4em;
}
/* Navigation */
.navbar-brand {
padding-left: 100px;
}
.nav {
float: right;
padding-right: 100px;
}
.navbar {
opacity: .8;
}
.nav li:hover, .dropdown-menu > li > a:hover {
background-color: #080808;
color: #fff;
}
.dropdown-menu {
background-color: #222;
}
.dropdown-menu > li > a {
color: #777;
}
/*Image Carousel*/
.container-fluid {
padding-left: 0px;
padding-right: 0px;
}
.carousel-inner p {
font-weight: bold;
letter-spacing: .2em;
font-size: 2em;
}
@media (max-width: 767px) {
#home {
margin-top: 50px;
}
}
/* Portfolio & Course Information */
.goals {
padding-top: 15em;
padding-bottom: 15em;
background-image: url(../img/black.jpg);
background-attachment: fixed;
text-shadow: 0 0 .7em black;
}
.goals h2 {
text-decoration: underline;
padding-bottom: .5em;
}
.goals p:nth-child(2) {
min-height: 250px;
font-size: 1.15em;
}
.goals p:nth-child(3) {
position: absolute;
bottom: 0;
}
/* About Section */
#about {
background-image: url(../img/bat1.png);
text-shadow: 0 0 .7em white;
}
#about h2 {
text-align: center;
}
#about p {
font-size: 1.5em;
}
#about ul {
padding-left: 20%;
font-size: 1.15em;
}
.about-spacing {
padding-bottom: 8em;
}
.modal-button {
padding-left: 20%;
padding-top: 10%;
}
#modalembed {
margin-right: 10%;
margin-left: 10%;
width: 80%;
min-height: 700px;
}
/* Work Section */
#work {
background-image: url(../img/black.jpg);
background-attachment: fixed;
padding-bottom: 5em;
}
#work h1 {
text-shadow: 0 0 .7em red;
}
#work h2 {
text-align: center;
text-shadow: 0 0 .7em red;
}
.bman-profile, .joker-profile, .quinn-profile, .cat-profile {
margin-bottom: 2em;
border: 2px solid white;
width: 100%;
height: 225px;
position: relative;
}
.bman-profile {
background-image: url(../img/bman1.png);
}
.joker-profile {
background-image: url(../img/joker1.png);
}
.quinn-profile {
background-image: url(../img/quinn1.png);
}
.cat-profile {
background-image: url(../img/cat1.png);
}
.fact, .answer {
font-size: 1.15em;
padding-left: 10%;
text-shadow: 0 0 .7em yellow;
}
.fact {
text-decoration: underline;
}
.answer {
color: blue;
}
#work a {
padding-left: 10%;
text-shadow: 0 0 .7em black;
}
/* JS Hover Effect */
.info {
display: inline-block;
color: orange;
font-family: Futura;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 0.5em;
line-height: 1.6;
padding-left: 7em;
}
.proj-title {
font-weight: 100;
}
/* FAQ Section */
#faq {
background-image: url(../img/blogo.jpg);
background-size: cover;
padding-bottom: 7em;
}
#faq h1, .panel-title, .panel-body {
text-shadow: 0 0 .7em yellow;
}
#accordion {
padding-right: 20%;
padding-left: 20%;
}
.panel-body {
font-size: 1.15em;
}
.panel-default, .panel > .panel-heading {
background-color: black;
opacity: .8;
}
.glyphicon:before {
margin-right: 15px;
}
/* Contact Section */
#contact {
background-image: url(../img/black.jpg);
background-attachment: fixed;
text-shadow: 0 0 .7em black;
}
#contact h1 {
margin-top: 0;
text-shadow: 0 0 .7em black;
}
.contact-info {
font-size: 1.15em;
padding-top: 3em;
}
address {
margin-left: 2em;
text-indent: -1em;
}
.send:hover, .phone:hover, .envelope:hover {
color: blue;
}
.form-control {
margin-bottom: 10px;
}
.contact-border {
border-top: 4px solid black;
margin-top: 3em;
padding-top: 3em;
}
#map {
width: 100%;
height: 500px;
}
/* footer section */
footer {
padding-top: 3em;
padding-bottom: 3em;
}
footer > p {
padding-bottom: 1em;
}
label {
text-shadow: 0 0 .7em white;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment