cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              

<body ng-app='myApp'>

	<div class="main" ng-controller="MainController">
		<div class="container">

			<h1 class="grow">{{title}}</h1>
			<hr>
			<h2 class="grow">{{promo}}</h2>
			<hr>

			<div ng-repeat="product in products" class="col-md-6">
				<div class="thumbnail">
					<img ng-src="{{ product.cover }}">
					<p class="title">{{ product.name }}</p>
					<p class="price grow">{{ product.price | currency }}</p>
					<p class="date">{{ product.pubdate | date }}</p>
					<div class="rating">
						<p class="likes" ng-click="plusOne($index)">+ {{ product.likes }} </p>
						<p class="dislikes" ng-click="minusOne($index)">- {{ product.dislikes }} </p>
				
					</div>
				</div>
			</div>

		</div>
	</div>
<hr>

	<div class="me grow">
		<h5><a href="http://vaniananthuni.com" target="_blank" class="paw">
 <i class="fa fa-code fa-2x"> </i>  with  <i class="fa fa-heart fa-2x"></i> by Vani Ananthuni &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;

	<i class="fa fa-paw fa-2x"></i> visit my portfolio </h5>
		</a>
		<h6> * books not for sale</h6>
	</div>
</body>
            
          
!
            
              html, body
  font-family: sans-serif
  background-color: #f2f2f2
  cursor: default

.main
  background-color: #f2f2f2

  h1
    color: #F65A5B
    font-size: 64px
    line-height: 90px
    width: 70%
    margin: 10px
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.4)

  h2
    color: #39D1B4
    font-size: 20px
    margin: 1 0 40px 0
    padding: 0px 0
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.1)

.thumbnail
  border: 0px
  position: relative
  padding: 50px

  img
    margin-bottom: 30px
    max-width: 80%
    height: 300px
    width: 200px

.title
  color: #444
  margin: 0
  font-size: 18px
  font-weight: 800

.date
  color: #444
  margin: 0
  font-size: 18px
  font-weight: 800
  color: #a3a3a3
  font-size: 14px
  font-weight: 200

.price
  background-color: #39D1B4
  color: #fff
  font-size: 18px
  border-radius: 50%
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4)
  font-weight: 200
  height: 80px
  line-height: 80px
  text-align: center
  width: 80px
  position: absolute
  top: -0px
  right: 20px

.rating
  text-align: right
  -webkit-user-select: none
  -moz-user-select: none
  -ms-user-select: none
  margin: 30px 0 -30px 20px

.likes, .dislikes
  background: #F65A5B
  color: #fff
  cursor: pointer
  display: inline-block
  font-size: 15px
  line-height: 40px
  min-width: 40px
  height: 40px
  border-radius: 50%
  margin: 0 -30px 0 40px
  text-align: center
  font-weight: 200
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4)
  transition: background 500ms

.likes:hover, .dislikes:hover
  color: #F65A5B
  background: rgba(246, 90, 91, 0.25)
  transition: background 500ms

a
  color: #F65A5B !important
  text-decoration: none !important

  &:active, &:visited
    color: #F65A5B !important
    text-decoration: none !important

.me, .paw
  text-align: center
  color: #F65A5B

.grow
  transition: all .5s ease-in-out

  &:hover
    transform: scale(1.1)

hr
  display: block
  height: 1px
  border: 0
  border-top: 1px solid #ccc
  margin: 1em 0
  padding: 0
            
          
!
            
              var app = angular.module("myApp", []); 

app.controller('MainController', ['$scope', function($scope) { 
  $scope.title = 'JK Rowling'; 
  $scope.promo = 'Harry Potter books';
  $scope.products = [
																	{ 
    	name: 'Harry Potter and the cursed child', 
    	price: 18, 
    	pubdate: new Date('2016', '07', '31'),
    	cover: 'http://www.download-books.com/wp-content/uploads/2016/07/J.K.-Rowling-Harry-Potter-and-the-Cursed-Child.jpg',
    	likes: 0,
    	dislikes: 0
  	},
  	{ 
    	name: 'Harry Potter and the sorcerers stone', 
    	price: 7, 
    	pubdate: new Date('1999', '08', '08'), 
    	cover: 'http://ecx.images-amazon.com/images/I/51MU5VilKpL._SY344_BO1,204,203,200_.jpg',
    	likes: 0,
    	dislikes: 0
  	},
																	{ 
    	name: 'Harry Potter and The Chamber of Secrets', 
    	price: 7, 
    	pubdate: new Date('2000', '08', '15'), 
    	cover: 'https://images-na.ssl-images-amazon.com/images/I/51jNORv6nQL._AC_UL320_SR218,320_.jpg',
    	likes: 0,
    	dislikes: 0
  	},
																	{ 
    	name: 'Harry Potter & The Prisoner of Azkaban', 
    	price: 7, 
    	pubdate: new Date('2001', '08', '11'), 
    	cover: 'https://upload.wikimedia.org/wikipedia/id/thumb/1/11/Prisoner_of_Azkaban_cover.jpg/220px-Prisoner_of_Azkaban_cover.jpg',
    	likes: 0,
    	dislikes: 0 
  	}, 
																	{ 
    	name: 'Harry Potter and The Goblet of Fire', 
    	price: 8, 
    	pubdate: new Date('2002', '07', '30'), 
    	cover: 'https://ak1.ostkcdn.com/images/products//bmmg/books/P9780807282595.JPG',
    	likes: 0,
    	dislikes: 0 
  	}, 
																	{ 
    	name: 'Harry Potter and The Order of Phoenix', 
    	price: 8, 
    	pubdate: new Date('2004', '08', '10'), 
    	cover: 'http://img.timeinc.net/time/2007/harry_potter/hp_books/order_of_the_phoenix.jpg',
    	likes: 0,
    	dislikes: 0 
  	}, 
																	{ 
    	name: 'Harry Potter and The Half Blood Prince', 
    	price: 8, 
    	pubdate: new Date('2006', '07', '25'), 
    	cover: 'https://upload.wikimedia.org/wikipedia/en/f/f0/Harry_Potter_and_the_Half-Blood_Prince.jpg',
    	likes: 0,
    	dislikes: 0 
  	}, 
																	{ 
    	name: 'Harry Potter and The Deathly Hollows', 
    	price: 8, 
    	pubdate: new Date('2009', '07', '07'), 
    	cover: 'http://s-ak.buzzfed.com/static/enhanced/terminal01/2010/11/18/12/enhanced-buzz-20434-1290100276-0.jpg',
    	likes: 0,
    	dislikes: 0 
  	}
  	
  ];
  $scope.plusOne = function(index) { 
  	$scope.products[index].likes += 1; 
	};
	$scope.minusOne = function(index) { 
  	$scope.products[index].dislikes += 1; 
	};
}]);


            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console