anumsh/Gruntfile.js

## Gruntfile.js
module.exports = function(grunt) {

  grunt.initConfig({
    responsive_images: {
      dev: {
        options: {
          engine: 'im',
          sizes: [{
            width: 1600,
        suffix: '_large_2x',
        quality: 30
      },{
        width: 800,
        suffix: '_large_1x',
        quality: 30
      },{
          width: 500,
          suffix:'_medium',
          quality:30
      }]
        },
        files: [{
          expand: true,
          src: ['*.{gif,jpg,png}'],
          cwd: 'img_src/',
          dest: 'images/'
        }]
      }
    },
  });

  grunt.loadNpmTasks('grunt-responsive-images');
  grunt.registerTask('default', ['responsive_images']);

};

## index.html
<!DOCTYPE html>
<html>
<head>

  <meta name="description" content="Udacity Responsive Images course project" />
  <meta name="author" content="//samdutton.com">
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
  <meta charset="utf-8">
  <meta itemprop="name" content="Udacity Responsive Images course project">
  <meta itemprop="image" content="images/icon.png">
  <meta name="mobile-web-app-capable" content="yes">
  <meta id="theme-color" name="theme-color" content="#307699">

  <base target="_blank">

  <title>grunt responsive images</title>

  <link rel="icon" sizes="192x192" href="images/icon.png">
  <link href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="css/main.css" />
  <link rel="stylesheet" href="http://weloveiconfonts.com/api/?family=zocial" />

  <!-- loads the Udacity Feedback extension -->
  <meta name="udacity-grader" content="http://udacity.github.io/responsive-images/project/project-grader.json" unit-tests="http://udacity.github.io/responsive-images/project/project-grader.js">

</head>

<body>
  <header>
    <a href="//github.com/udacity/responsive-images/" title="Home page for course examples">
      <svg id="logo" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
        <title>My Blog</title>
        <path d="M20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69zM12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6zm0-10c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4z"></path>
      </svg>
    </a>
  </header>

  <article>

    <h1>San Fransisco Places</h1>

    <picture id="banner">
      <source media="(min-width: 750px)" srcset="images/golden_bridge-1600_large_2x.jpg 2x, images/golden_bridge-800_large_1x.jpg" />
      <source media="(min-width: 500px)" srcset="images/golden_bridge-500_medium.jpg" />
      <img src="img_src/golden_bridge.jpg" alt="golden bridge">
    </picture>

    <section id="post">

      <h2>Popular Places in San Fransisco</h2>

      <p class="lead">San Francisco, in northern California, is a city on the tip of a peninsula surrounded by the Pacific Ocean and San Francisco Bay. It's known for its hilly landscape, year-round fog, iconic Golden Gate Bridge, cable cars and colorful Victorian houses. The Financial District's Transamerica Pyramid is its most distinctive skyscraper. In the bay sits Alcatraz Island, site of the notorious former prison.</p>

      <figure>
        <picture>
          <source media="(min-width: 750px)" srcset="images/house-1600_large_2x.jpg 2x, images/house-800_large_1x.jpg" />
      <source media="(min-width: 500px)" srcset="images/house-500_medium.jpg" />
      <img src="img_src/house.jpg" alt="san fransisco houses">
        </picture>
        <figcaption>San Fransisco Houses</figcaption>
      </figure>

      <p>San Francisco, in northern California, is a city on the tip of a peninsula surrounded by the Pacific Ocean and San Francisco Bay. It's known for its hilly landscape, year-round fog, iconic Golden Gate Bridge, cable cars and colorful Victorian houses. The Financial District's Transamerica Pyramid is its most distinctive skyscraper. In the bay sits Alcatraz Island, site of the notorious former prison.</p>

      <p>San Francisco, in northern California, is a city on the tip of a peninsula surrounded by the Pacific Ocean and San Francisco Bay. It's known for its hilly landscape, year-round fog, iconic Golden Gate Bridge, cable cars and colorful Victorian houses. The Financial District's Transamerica Pyramid is its most distinctive skyscraper. In the bay sits Alcatraz Island, site of the notorious former prison.</p>

      <figure>
        <picture>
          <source media="(min-width: 750px)" srcset="images/Fisherman-1600_large_2x.jpg 2x, images/Fisherman-800_large_1x.jpg" />
      <source media="(min-width: 500px)" srcset="images/Fisherman-500_medium.jpg" />
      <img src="img_src/Fisherman.jpg" alt="fishmanwharf">
        </picture>
        <figcaption>Fisherman wharf in San Fransisco</figcaption>
      </figure>

      <p>San Francisco, in northern California, is a city on the tip of a peninsula surrounded by the Pacific Ocean and San Francisco Bay. It's known for its hilly landscape, year-round fog, iconic Golden Gate Bridge, cable cars and colorful Victorian houses. The Financial District's Transamerica Pyramid is its most distinctive skyscraper. In the bay sits Alcatraz Island, site of the notorious former prison..</p>

    </section>
  </article>
</body>
</html>

## main.css
[class*="zocial-"]:before {
  color: black;
  display: inline-block;
  font-family: 'zocial', sans-serif;
  text-shadow: 3px 3px 3px #aaa;
  width: 2em;
}

a:hover [class*="zocial-"]:before {
  color: #3d85c6;
}

a {
  color: #4183C4;
  font-weight: 300;
  text-decoration: none;
}

a:hover {
  color: #3d85c6;
  text-decoration: underline;
}

a#viewSource {
  border-top: 1px solid #ddd;
  display: block;
  margin: 1.3em 0 0 0;
  padding: 1em 0 0 0;
}

div#social a {
  margin: 0 1em 0 0;
}

div#social a:last-of-type {
  margin: 0;
}

h1 a {
  font-weight: 300;
  white-space: nowrap;
}

article {
  align-items: center;
  display: flex;
  flex-direction: column;
  max-width: 50em;
  border-bottom: 1px solid #ddd;
}

body {
  align-items: center;
  display: flex;
  flex-direction: column;
  font-family: 'Roboto', sans-serif;
  margin: 3vh 0 3vh 0;
  text-align: center;
}

div#social {
  line-height: 2em;
}

figcaption {
  color: #bb021e;
  font-family: 'Roboto condensed', sans-serif;
  padding: 2em 0;
  text-align: center;
}

figure {
  margin: 1em 0 1em 0;
}

footer {
  text-align: center;
}

h1 {
  color: #444;
  font-family: 'Roboto condensed', sans-serif;
  font-size: 6vw;
  font-weight: 500;
  margin: 0 0 1em 0;
}

header:hover h1 {
  color: #3d85c6;
}

h2 {
  border-bottom: 1px solid #ddd;
  color: #bb021e;
  font-family: 'Roboto condensed', sans-serif;
  font-size: 5vw;
  margin: 0 0 1em 0;
  padding: 0 0 1em 0;
}

img {
  max-width: 100%;
}

picture#banner img {
  -webkit-filter: saturate(3) opacity(0.7);
  margin: 0 0 2em 0;
  max-width: 100vw;
  width: 100vw;
}

p {
  color: #444;
  font-size: 1em;
  font-weight: 300;
  line-height: 1.6em;
  margin: 0 auto 1em auto;
  text-align: justify;
}

p.borderBelow {
  border-bottom: 1px solid #eee;
  padding: 0 0 1em 0;
}

section p:last-of-type {
  margin: 0;
}

section {
  border-bottom: 1px solid #eee;
  margin: 0 0 3vh 0;
}

section:last-of-type {
  border-bottom: 1px solid #ccc;
  margin: 0 0 2em 0;
  padding: 0 0 2em 0;
}

section#post {
  max-width: 50em;
  width: 90vw;
}

svg#logo {
  fill: #666;
  height: 6vw;
  margin: 0 auto 0.5em auto;
  width: 6vw;
}

header:hover svg#logo {
  fill: #3d85c6;
  -webkit-filter: drop-shadow(3px 3px 3px #ddd);
  filter: drop-shadow(3px 3px 3px #ddd);
}
	module.exports = function(grunt) {

	grunt.initConfig({
	responsive_images: {
	dev: {
	options: {
	engine: 'im',
	sizes: [{
	width: 1600,
	suffix: '_large_2x',
	quality: 30
	},{
	width: 800,
	suffix: '_large_1x',
	quality: 30
	},{
	width: 500,
	suffix:'_medium',
	quality:30
	}]
	},
	files: [{
	expand: true,
	src: ['*.{gif,jpg,png}'],
	cwd: 'img_src/',
	dest: 'images/'
	}]
	}
	},
	});

	grunt.loadNpmTasks('grunt-responsive-images');
	grunt.registerTask('default', ['responsive_images']);

	};
	<!DOCTYPE html>
	<html>
	<head>

	<meta name="description" content="Udacity Responsive Images course project" />
	<meta name="author" content="//samdutton.com">
	<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
	<meta charset="utf-8">
	<meta itemprop="name" content="Udacity Responsive Images course project">
	<meta itemprop="image" content="images/icon.png">
	<meta name="mobile-web-app-capable" content="yes">
	<meta id="theme-color" name="theme-color" content="#307699">

	<base target="_blank">

	<title>grunt responsive images</title>

	<link rel="icon" sizes="192x192" href="images/icon.png">
	<link href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet" type="text/css">
	<link rel="stylesheet" href="css/main.css" />
	<link rel="stylesheet" href="http://weloveiconfonts.com/api/?family=zocial" />

	<!-- loads the Udacity Feedback extension -->
	<meta name="udacity-grader" content="http://udacity.github.io/responsive-images/project/project-grader.json" unit-tests="http://udacity.github.io/responsive-images/project/project-grader.js">

	</head>

	<body>
	<header>
	<a href="//github.com/udacity/responsive-images/" title="Home page for course examples">
	<svg id="logo" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
	<title>My Blog</title>
	<path d="M20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69zM12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6zm0-10c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4z"></path>
	</svg>
	</a>
	</header>

	<article>

	<h1>San Fransisco Places</h1>

	<picture id="banner">
	<source media="(min-width: 750px)" srcset="images/golden_bridge-1600_large_2x.jpg 2x, images/golden_bridge-800_large_1x.jpg" />
	<source media="(min-width: 500px)" srcset="images/golden_bridge-500_medium.jpg" />
	<img src="img_src/golden_bridge.jpg" alt="golden bridge">
	</picture>

	<section id="post">

	<h2>Popular Places in San Fransisco</h2>

	<p class="lead">San Francisco, in northern California, is a city on the tip of a peninsula surrounded by the Pacific Ocean and San Francisco Bay. It's known for its hilly landscape, year-round fog, iconic Golden Gate Bridge, cable cars and colorful Victorian houses. The Financial District's Transamerica Pyramid is its most distinctive skyscraper. In the bay sits Alcatraz Island, site of the notorious former prison.</p>

	<figure>
	<picture>
	<source media="(min-width: 750px)" srcset="images/house-1600_large_2x.jpg 2x, images/house-800_large_1x.jpg" />
	<source media="(min-width: 500px)" srcset="images/house-500_medium.jpg" />
	<img src="img_src/house.jpg" alt="san fransisco houses">
	</picture>
	<figcaption>San Fransisco Houses</figcaption>
	</figure>

	<p>San Francisco, in northern California, is a city on the tip of a peninsula surrounded by the Pacific Ocean and San Francisco Bay. It's known for its hilly landscape, year-round fog, iconic Golden Gate Bridge, cable cars and colorful Victorian houses. The Financial District's Transamerica Pyramid is its most distinctive skyscraper. In the bay sits Alcatraz Island, site of the notorious former prison.</p>

	<p>San Francisco, in northern California, is a city on the tip of a peninsula surrounded by the Pacific Ocean and San Francisco Bay. It's known for its hilly landscape, year-round fog, iconic Golden Gate Bridge, cable cars and colorful Victorian houses. The Financial District's Transamerica Pyramid is its most distinctive skyscraper. In the bay sits Alcatraz Island, site of the notorious former prison.</p>

	<figure>
	<picture>
	<source media="(min-width: 750px)" srcset="images/Fisherman-1600_large_2x.jpg 2x, images/Fisherman-800_large_1x.jpg" />
	<source media="(min-width: 500px)" srcset="images/Fisherman-500_medium.jpg" />
	<img src="img_src/Fisherman.jpg" alt="fishmanwharf">
	</picture>
	<figcaption>Fisherman wharf in San Fransisco</figcaption>
	</figure>

	<p>San Francisco, in northern California, is a city on the tip of a peninsula surrounded by the Pacific Ocean and San Francisco Bay. It's known for its hilly landscape, year-round fog, iconic Golden Gate Bridge, cable cars and colorful Victorian houses. The Financial District's Transamerica Pyramid is its most distinctive skyscraper. In the bay sits Alcatraz Island, site of the notorious former prison..</p>

	</section>
	</article>
	</body>
	</html>
	[class*="zocial-"]:before {
	color: black;
	display: inline-block;
	font-family: 'zocial', sans-serif;
	text-shadow: 3px 3px 3px #aaa;
	width: 2em;
	}

	a:hover [class*="zocial-"]:before {
	color: #3d85c6;
	}

	a {
	color: #4183C4;
	font-weight: 300;
	text-decoration: none;
	}

	a:hover {
	color: #3d85c6;
	text-decoration: underline;
	}

	a#viewSource {
	border-top: 1px solid #ddd;
	display: block;
	margin: 1.3em 0 0 0;
	padding: 1em 0 0 0;
	}

	div#social a {
	margin: 0 1em 0 0;
	}

	div#social a:last-of-type {
	margin: 0;
	}

	h1 a {
	font-weight: 300;
	white-space: nowrap;
	}

	article {
	align-items: center;
	display: flex;
	flex-direction: column;
	max-width: 50em;
	border-bottom: 1px solid #ddd;
	}

	body {
	align-items: center;
	display: flex;
	flex-direction: column;
	font-family: 'Roboto', sans-serif;
	margin: 3vh 0 3vh 0;
	text-align: center;
	}

	div#social {
	line-height: 2em;
	}

	figcaption {
	color: #bb021e;
	font-family: 'Roboto condensed', sans-serif;
	padding: 2em 0;
	text-align: center;
	}

	figure {
	margin: 1em 0 1em 0;
	}

	footer {
	text-align: center;
	}

	h1 {
	color: #444;
	font-family: 'Roboto condensed', sans-serif;
	font-size: 6vw;
	font-weight: 500;
	margin: 0 0 1em 0;
	}

	header:hover h1 {
	color: #3d85c6;
	}

	h2 {
	border-bottom: 1px solid #ddd;
	color: #bb021e;
	font-family: 'Roboto condensed', sans-serif;
	font-size: 5vw;
	margin: 0 0 1em 0;
	padding: 0 0 1em 0;
	}

	img {
	max-width: 100%;
	}

	picture#banner img {
	-webkit-filter: saturate(3) opacity(0.7);
	margin: 0 0 2em 0;
	max-width: 100vw;
	width: 100vw;
	}

	p {
	color: #444;
	font-size: 1em;
	font-weight: 300;
	line-height: 1.6em;
	margin: 0 auto 1em auto;
	text-align: justify;
	}

	p.borderBelow {
	border-bottom: 1px solid #eee;
	padding: 0 0 1em 0;
	}

	section p:last-of-type {
	margin: 0;
	}

	section {
	border-bottom: 1px solid #eee;
	margin: 0 0 3vh 0;
	}

	section:last-of-type {
	border-bottom: 1px solid #ccc;
	margin: 0 0 2em 0;
	padding: 0 0 2em 0;
	}

	section#post {
	max-width: 50em;
	width: 90vw;
	}

	svg#logo {
	fill: #666;
	height: 6vw;
	margin: 0 auto 0.5em auto;
	width: 6vw;
	}

	header:hover svg#logo {
	fill: #3d85c6;
	-webkit-filter: drop-shadow(3px 3px 3px #ddd);
	filter: drop-shadow(3px 3px 3px #ddd);
	}