Skip to content

Instantly share code, notes, and snippets.

@MelSumner

MelSumner/AngularJS-+-Bootstrap-=-Awesome..markdown

Created October 28, 2014 00:04
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save MelSumner/6830fe179ca134fa735a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save MelSumner/6830fe179ca134fa735a to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Melanie Sumner.
Raw
AngularJS-+-Bootstrap-=-Awesome..markdown
Raw
index.html
<html ng-app="finalFantasy">
<body ng-controller="FinalFantasyClasses as finalFantasy">
<header>
<h1 class="center-block text-center"> Final Fantasy Classes </h1>
</header>
<main>
<div ng-repeat="ffClasses in finalFantasy.ffClasses" class="container">
<div class="media">
<a class="pull-left" href="#">
<img class="media-object ffArt" src="{{ ffClasses.imageUrl }}" alt=""/>
</a>
<div class="media-body">
<h3 class="media-heading"> {{ffClasses.name}}</h3>
<ul class="list-unstyled">
<li>
<strong>Class Strength: </strong> {{ffClasses.strength}}
</li>
<li>
<strong>Theme Song: </strong>{{ffClasses.themeSong}}
</li>
<li>
<strong>Description: </strong>{{ffClasses.description}}
</li>
</ul>
</div>
</div>
</div>
</main>
<footer>
<div class="container">
<hr />
<p><small>Images from the series "Final Fantasyland" by the monstrously talented artist known as <a href="https://www.etsy.com/shop/theGorgonist?section_id=10492060&ref=shopsection_leftnav_6" target="_blank">The Gorgonist</a>. No affiliation, unless fandom counts.</small></p>
</div>
</footer>
</body>
</html>
Raw
script.js
(function(){
var app = angular.module('finalFantasy', []);
app.controller('FinalFantasyClasses', function(){
this.ffClasses = ffJobs;
});
var ffJobs = [
{
name:"Red Mage",
strength: "Enfeebling Magic",
themeSong: "Seymour's Theme",
description:"Red Mages- the jack of all trades and master of most...or none, depending on who you ask. I was always surprised that Red Mages have such a high skill in daggers because...really?",
imageUrl:"https://s3-us-west-2.amazonaws.com/s.cdpn.io/45544/redMage.jpg",
},
{
name: "White Mage",
strength: "Healing Magic",
themeSong: "Aeris' Theme",
description: "White Mages soothe the wounds of the body and calm the ravages of the mind...plus, a white mage who dual wields clubs is pretty awesome. Even people who were irritated with Aeris cried when she died- and understood those who thought that her death was some mistake on their part.",
imageUrl:"https://s3-us-west-2.amazonaws.com/s.cdpn.io/45544/whiteMage.jpg",
},
{
name:"Black Mage",
strength:"Elemental Magic",
themeSong: "Lulu's Theme",
description:"Final Fantasy proved that the elements didn't work the way you thought they would...in what other world could you cast fire on a crab (water-based animal) and have it do damage?! But mostly, Vivi. 'Nuff said.",
imageUrl:"https://s3-us-west-2.amazonaws.com/s.cdpn.io/45544/blackMage.jpg",
},
{
name: "Thief",
strength: "Stealing",
themeSong: "Zidane's Theme",
description: "Thieves are known for stealing. And awesome dagger skill. And falling in love with Princesses. But mostly stealing.",
imageUrl:"https://s3-us-west-2.amazonaws.com/s.cdpn.io/45544/thief.jpg",
},
{
name: "Dragoon",
strength: "Jump!",
themeSong: "Freya's theme song (FFIX)",
description: "Did you look for Cid in every game or was that just me?",
imageUrl: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/45544/dragoon.jpg",
}
];
})();
Raw
style.css
@import url(http://fonts.googleapis.com/css?family=Raleway:500);
body {
font-family: 'Raleway', sans-serif;
}
h3 {
text-transform: uppercase;
letter-spacing: 2px;
color: #66785e;
}
.ffArt {
max-height: 200px;
}
.media {
margin-bottom: 2em;
}
.media-heading {
border-bottom: 1px solid #ccc;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment