novohispano · August 27, 2015 04:21
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
    <head>
        <title>About Me</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700" rel="stylesheet">
        <link href="assets/stylesheets/styles.css" rel="stylesheet" media="screen" title="no title" charset="utf-8">
    </head>
    <body>
        <main>
            <header>
                <div class="header-content content">
                    <img class="udacity-logo" src="http://www.bertelsmann.com/media/news-und-media/logos/logo-udacity-1600-900px_article_landscape_gt_1200_grid.jpg" alt="Udacity Logo">
                    <h1>Front-End Nanodegree<br>Project 0</h1>
                </div>
            </header>
            <section class="hero content">
                <img class="my-picture" src="https://pbs.twimg.com/profile_images/545426238173888512/2cfTVpu0.jpeg" alt="This is a picture of me">
            </section>
            <section class="about-me content">
                <p class="iama">NAME</p>
                <p class="my-info">Jorge Téllez</p>
                <p class="iama">GOAL</p>
                <p class="my-info">I want to become a front-end developer</p>
                <p class="iama">LOCATION</p>
                <p class="my-info">Denver, CO</p>
                <p class="iama">WORKSTYLE</p>
                <p class="my-info">I like to work listening to music.</p>
                <p class="iama">HOBBIES</p>
                <p class="my-info">Hang out with my toddler and my wife.</p>
            </section>
        </main>
    </body>
 </html>
diff --git a/LpPNRv.markdown b/LpPNRv.markdown
diff --git a/style.css b/style.css
 body {
  font-family: sans-serif;
  margin: 0;
  color: #666666
 }

 main {
  height: 100vh;
 }

 .content {
  max-width: 500px;
  margin: 0 auto;
 }


 /* HEADING */

 .header-content {
  height: 100%;
 }

 header {
  height: 180px;
  margin-bottom: 2em;
 }

 .udacity-logo {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 150px;
 }

 h1 {
  text-align: center;
  font-weight: lighter;
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
 }

 /* MEDIA QUERIES */

 @media screen and (max-width: 380px) {
  h1 {
    font-size: 24px;
  }
 }

 @media screen and (max-width: 464px) and (min-width: 381px) {
  h1 {
    font-size: 32px;
  }
 }

 @media screen and (min-width: 465px) {
  h1 {
    font-size: 36px;
  }
 }

 @media screen and (min-width: 550px) {
  .header-content {
    padding-top: 15px;
  }
 }

 @media screen and (max-width: 549px) {
  .header-content {
    padding-top: 5px;
  }
 }


 /* MAIN SECTIONS */

 .hero {
  padding: 1em;
  max-width: 100%;
  background-color: #263248;
  color: white;
 }

 .my-picture {
  display: block;
  margin: 0 auto 10px;
  max-width: 100%;
  border: 4px solid #FFFFFF;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
 }

 .iama {
  max-width: 100%;
  color: #FF9800;
  font-size: 18px;
  font-weight: lighter;
  margin: 0;
 }

 .my-info {
  max-width: 100%;
  font-size: 22px;
  margin: 0 auto 20px;
  font-weight: lighter;
 }

 .my-info:last-of-type {
  margin: 0;
 }

 .my-name {
  color: white;
 }

 .about-me {
  padding: 1em;
  margin-top: 2em;
 }
	<!DOCTYPE html>
	<html>
	<head>
	<title>About Me</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700" rel="stylesheet">
	<link href="assets/stylesheets/styles.css" rel="stylesheet" media="screen" title="no title" charset="utf-8">
	</head>
	<body>
	<main>
	<header>
	<div class="header-content content">
	<img class="udacity-logo" src="http://www.bertelsmann.com/media/news-und-media/logos/logo-udacity-1600-900px_article_landscape_gt_1200_grid.jpg" alt="Udacity Logo">
	<h1>Front-End Nanodegree<br>Project 0</h1>
	</div>
	</header>
	<section class="hero content">
	<img class="my-picture" src="https://pbs.twimg.com/profile_images/545426238173888512/2cfTVpu0.jpeg" alt="This is a picture of me">
	</section>
	<section class="about-me content">
	<p class="iama">NAME</p>
	<p class="my-info">Jorge Téllez</p>
	<p class="iama">GOAL</p>
	<p class="my-info">I want to become a front-end developer</p>
	<p class="iama">LOCATION</p>
	<p class="my-info">Denver, CO</p>
	<p class="iama">WORKSTYLE</p>
	<p class="my-info">I like to work listening to music.</p>
	<p class="iama">HOBBIES</p>
	<p class="my-info">Hang out with my toddler and my wife.</p>
	</section>
	</main>
	</body>
	</html>
	body {
	font-family: sans-serif;
	margin: 0;
	color: #666666
	}

	main {
	height: 100vh;
	}

	.content {
	max-width: 500px;
	margin: 0 auto;
	}


	/* HEADING */

	.header-content {
	height: 100%;
	}

	header {
	height: 180px;
	margin-bottom: 2em;
	}

	.udacity-logo {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 150px;
	}

	h1 {
	text-align: center;
	font-weight: lighter;
	-webkit-margin-before: 0;
	-webkit-margin-after: 0;
	}

	/* MEDIA QUERIES */

	@media screen and (max-width: 380px) {
	h1 {
	font-size: 24px;
	}
	}

	@media screen and (max-width: 464px) and (min-width: 381px) {
	h1 {
	font-size: 32px;
	}
	}

	@media screen and (min-width: 465px) {
	h1 {
	font-size: 36px;
	}
	}

	@media screen and (min-width: 550px) {
	.header-content {
	padding-top: 15px;
	}
	}

	@media screen and (max-width: 549px) {
	.header-content {
	padding-top: 5px;
	}
	}


	/* MAIN SECTIONS */

	.hero {
	padding: 1em;
	max-width: 100%;
	background-color: #263248;
	color: white;
	}

	.my-picture {
	display: block;
	margin: 0 auto 10px;
	max-width: 100%;
	border: 4px solid #FFFFFF;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	}

	.iama {
	max-width: 100%;
	color: #FF9800;
	font-size: 18px;
	font-weight: lighter;
	margin: 0;
	}

	.my-info {
	max-width: 100%;
	font-size: 22px;
	margin: 0 auto 20px;
	font-weight: lighter;
	}

	.my-info:last-of-type {
	margin: 0;
	}

	.my-name {
	color: white;
	}

	.about-me {
	padding: 1em;
	margin-top: 2em;
	}