goofyahead/index.html

## index.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 rel="stylesheet" href="styles.css">
    </head>
    <body>
        <main>
            <header>
                <div class="content header-content">
                    <img class="udacity-logo" src="http://cameronwp.github.io/cpcom/static/udacity_logo.svg" alt="Udacity Logo">
                    <h1>Front-End Apprentice</h1>
                </div>
            </header>
            <section class="hero">
                <div class="content">
                    <img class="my-picture" src="http://www.gravatar.com/avatar/cd351ae83b3a49c828bc6b4b5320844e?s=300" alt="Alex picture with a backpack">
                    <p class="iama">My name is...</p>
                    <p class="my-name my-info">Alex</p>
                    <p class="iama">I want to be...</p>
                    <p class="my-info">a front-end master</p>
                </div>
            </section>
            <section class="about-me content">
                <p class="iama">I live in...</p>
                <p class="my-info">Madrid</p>
                <p class="iama">My favorite way to work is...</p>
                <p class="my-info">constant challenges</p>
                <p class="iama">In my free time, I like to...</p>
                <p class="my-info">play voleiball and dance bachata :)</p>
            </section>
        </main>
    </body>
</html>

## jWWdxV.markdown

      
    Raw
  

              jWWdxV.markdown
            
          
    jWWdxV

A Pen by Alejandro on CodePen.
License.

  
## style.css
body {
  font-family: sans-serif;
  margin: 0;
}

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


/* HEADING */

.header-content {
  height: 100%;
}

header {
  height: 25vw;
  max-height: 150px;
  width: 100%;
}

.udacity-logo {
  max-height: 100%;
  width: 20%;
  float: left;
}

h1 {
  float: left;
  padding-top: 5%;
  width: 80%;
  font-weight: normal;
  -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: #294860;
  color: white;
}

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

.iama {
  max-width: 100%;
  color: #969696;
  letter-spacing: 0.05em;
  font-size: 20px;
  margin: 0;
}

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

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

.my-name {
  color: white;
}

.about-me {
  padding: 1em;
}
	<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 rel="stylesheet" href="styles.css">
	</head>
	<body>
	<main>
	<header>
	<div class="content header-content">
	<img class="udacity-logo" src="http://cameronwp.github.io/cpcom/static/udacity_logo.svg" alt="Udacity Logo">
	<h1>Front-End Apprentice</h1>
	</div>
	</header>
	<section class="hero">
	<div class="content">
	<img class="my-picture" src="http://www.gravatar.com/avatar/cd351ae83b3a49c828bc6b4b5320844e?s=300" alt="Alex picture with a backpack">
	<p class="iama">My name is...</p>
	<p class="my-name my-info">Alex</p>
	<p class="iama">I want to be...</p>
	<p class="my-info">a front-end master</p>
	</div>
	</section>
	<section class="about-me content">
	<p class="iama">I live in...</p>
	<p class="my-info">Madrid</p>
	<p class="iama">My favorite way to work is...</p>
	<p class="my-info">constant challenges</p>
	<p class="iama">In my free time, I like to...</p>
	<p class="my-info">play voleiball and dance bachata :)</p>
	</section>
	</main>
	</body>
	</html>
	body {
	font-family: sans-serif;
	margin: 0;
	}

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


	/* HEADING */

	.header-content {
	height: 100%;
	}

	header {
	height: 25vw;
	max-height: 150px;
	width: 100%;
	}

	.udacity-logo {
	max-height: 100%;
	width: 20%;
	float: left;
	}

	h1 {
	float: left;
	padding-top: 5%;
	width: 80%;
	font-weight: normal;
	-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: #294860;
	color: white;
	}

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

	.iama {
	max-width: 100%;
	color: #969696;
	letter-spacing: 0.05em;
	font-size: 20px;
	margin: 0;
	}

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

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

	.my-name {
	color: white;
	}

	.about-me {
	padding: 1em;
	}