CarMoreno/Simple and Responsive Template..markdown

## index.html
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Responsive Template</title>
</head>
<body>
  <div class="container">
    <header>
    <h1>My Personal Blog</h1>
    <nav>
    <ul>
      <li><a href="#" id="home">Home</a></li>
      <li><a href="#" id="about">About</a></li>
      <li><a href="#" id="hobbies">Hobbies</a></li>
      <li><a href="#" id="contact">Contact me</a></li>
      <li><p id ="location"></p></li>
    </ul>
    </nav>
</header>
    <div class="main">
      <div class="sections">
    <section>
      <h2 id="title1">Come on!</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse ad sapiente natus aperiam. Veritatis itaque nemo porro cupiditate? Molestias vel ratione iure ipsum incidunt libero soluta deleniti consequuntur maiores est.</p>
    </section>
    <section>
      <h2 id="title2">Welcome to my blog</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint facilis vel velit enim repudiandae quos, commodi accusamus veniam. Magni assumenda pariatur non, in dolor, deleniti optio vitae quisquam! Consequuntur, sequi.</p>
    </section>
    <section class="articles">
      <h2>Posts</h2>
      <article>Html5, new tags</article>
      <article>Javax Library</article>
      <article>Django is Cool</article>
      <article>Python 3.5 is here</article>
    </section>
</div>
      <aside>
    <h3>Widgets</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est et, animi quibusdam quia pariatur dolorum omnis assumenda cupiditate incidunt repellat nam accusamus eligendi fugiat ratione magni ipsa debitis earum dolor!</p>
</aside>
    </div>
    <footer>
    Copyright 2015 <a href="http://carmoreno.github.io" target="_blank">Carlos Andrés Moreno</a>
    </footer>
 </div>
</body>
</html>

## script.js
/*Simple simulation about generic behavior...*/
window.onload = function() {
  document.getElementById('location').innerHTML = "You're in <strong>Home</strong>"
  document.getElementById('title1').innerHTML = "come on!"
  document.getElementById('title2').innerHTML = "Welcome to my blog"
  document.getElementById('about').onclick = showAbout;
  document.getElementById('hobbies').onclick = showHobbies;
  document.getElementById('contact').onclick = showContact;
};
//Functions change headers and show you location in template.
function showAbout(){
  document.getElementById('location').innerHTML = "You're in <strong>About</strong>"
  document.getElementById('title1').innerHTML = "About Blog"
  document.getElementById('title2').innerHTML = "About topics in Blog"
}
function showHobbies(){
  document.getElementById('location').innerHTML = "You're in <strong>Hobbies</strong>"
  document.getElementById('title1').innerHTML = "Origami and Tv Series"
  document.getElementById('title2').innerHTML = "Studio Ghibli's films"
}

function showContact(){
  document.getElementById('location').innerHTML = "You're in <strong>Contact me</strong>"
  document.getElementById('title1').innerHTML = "Who Am I?"
  document.getElementById('title2').innerHTML = "Do you want contact me?"
}

## Simple and Responsive Template..markdown

      
    Raw
  

              Simple and Responsive Template..markdown
            
          
    Simple and Responsive Template.

Responsive and generic template...the goal is strengthen basic
concepts about responsive design. :)
A Pen by Carlos Moreno on CodePen.
License.

  
## style.css
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Courier';
  color: #464646;
  text-align: justify;
}

body {
  background-color: #252525;
}

div.container {
  width: 70%;
  margin: 4% auto 0%;
}

div.sections {
  float: left;
  width: 67%;
  margin-right: 3%;
}

header,
footer,
div.main {
  width: 100%;
  padding: 20px;
}

header,
footer,
section,
aside,
article {
  border-radius: 3px;
}

header {
  background-color: salmon;
  float: left;
  margin-bottom: 4%;
}

header h1 {
  text-align: center;
}

section {
  background-color: lightgreen;
  margin-bottom: 2%;
  padding: 15px;
}

aside {
  width: 30%;
  float: left;
  background-color: #f1f1f1;
  padding: 15px;
}

nav ul li {
  list-style: none;
  float: left;
  margin-right: 8%;
  margin-top: 2%;
}

nav ul li a,
nav ul li p {
  text-decoration: none;
  display: block;
  padding: 10px;
  border-radius: 2px;
}

nav ul li p,
nav ul li strong {
  background-color: rgb(200, 80, 80);
  color: #e4e4e4
}

nav ul li a:hover {
  background-color: rgb(200, 80, 80);
}

section.articles {
  float: left;
  width: 100%;
}

article {
  width: 25%;
  background-color: rgb(80, 200, 80);
  padding: 10px;
  margin: 4% 2%;
  float: left;
}

article:hover {
  background-color: rgb(20, 100, 30);
  color: #f1f1f1;
  cursor: pointer;
}

footer {
  margin-top: 4%;
  background-color: black;
  color: #f5f5f5;
  float: left;
  text-align: center;
}

footer a {
  color: salmon;
  text-decoration: none;
}

footer a:hover {
  color: rgb(200, 80, 80);
}

@media only screen and (max-width:800px) {
  div.sections {
    width: 100%;
  }
  aside {
    width: 100%;
  }
  nav ul li {
    margin-right: 4%;
  }
  article {
    width: 40%;
  }
}

@media only screen and (max-width:480px) {
  div.container {
    width: 100%;
  }
  article {
    width: 40%;
  }
}
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<title>Responsive Template</title>
	</head>
	<body>
	<div class="container">
	<header>
	<h1>My Personal Blog</h1>
	<nav>
	<ul>
	<li><a href="#" id="home">Home</a></li>
	<li><a href="#" id="about">About</a></li>
	<li><a href="#" id="hobbies">Hobbies</a></li>
	<li><a href="#" id="contact">Contact me</a></li>
	<li><p id ="location"></p></li>
	</ul>
	</nav>
	</header>
	<div class="main">
	<div class="sections">
	<section>
	<h2 id="title1">Come on!</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse ad sapiente natus aperiam. Veritatis itaque nemo porro cupiditate? Molestias vel ratione iure ipsum incidunt libero soluta deleniti consequuntur maiores est.</p>
	</section>
	<section>
	<h2 id="title2">Welcome to my blog</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint facilis vel velit enim repudiandae quos, commodi accusamus veniam. Magni assumenda pariatur non, in dolor, deleniti optio vitae quisquam! Consequuntur, sequi.</p>
	</section>
	<section class="articles">
	<h2>Posts</h2>
	<article>Html5, new tags</article>
	<article>Javax Library</article>
	<article>Django is Cool</article>
	<article>Python 3.5 is here</article>
	</section>
	</div>
	<aside>
	<h3>Widgets</h3>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est et, animi quibusdam quia pariatur dolorum omnis assumenda cupiditate incidunt repellat nam accusamus eligendi fugiat ratione magni ipsa debitis earum dolor!</p>
	</aside>
	</div>
	<footer>
	Copyright 2015 <a href="http://carmoreno.github.io" target="_blank">Carlos Andrés Moreno</a>
	</footer>
	</div>
	</body>
	</html>
	/Simple simulation about generic behavior.../
	window.onload = function() {
	document.getElementById('location').innerHTML = "You're in <strong>Home</strong>"
	document.getElementById('title1').innerHTML = "come on!"
	document.getElementById('title2').innerHTML = "Welcome to my blog"
	document.getElementById('about').onclick = showAbout;
	document.getElementById('hobbies').onclick = showHobbies;
	document.getElementById('contact').onclick = showContact;
	};
	//Functions change headers and show you location in template.
	function showAbout(){
	document.getElementById('location').innerHTML = "You're in <strong>About</strong>"
	document.getElementById('title1').innerHTML = "About Blog"
	document.getElementById('title2').innerHTML = "About topics in Blog"
	}
	function showHobbies(){
	document.getElementById('location').innerHTML = "You're in <strong>Hobbies</strong>"
	document.getElementById('title1').innerHTML = "Origami and Tv Series"
	document.getElementById('title2').innerHTML = "Studio Ghibli's films"
	}

	function showContact(){
	document.getElementById('location').innerHTML = "You're in <strong>Contact me</strong>"
	document.getElementById('title1').innerHTML = "Who Am I?"
	document.getElementById('title2').innerHTML = "Do you want contact me?"
	}
	* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: 'Courier';
	color: #464646;
	text-align: justify;
	}

	body {
	background-color: #252525;
	}

	div.container {
	width: 70%;
	margin: 4% auto 0%;
	}

	div.sections {
	float: left;
	width: 67%;
	margin-right: 3%;
	}

	header,
	footer,
	div.main {
	width: 100%;
	padding: 20px;
	}

	header,
	footer,
	section,
	aside,
	article {
	border-radius: 3px;
	}

	header {
	background-color: salmon;
	float: left;
	margin-bottom: 4%;
	}

	header h1 {
	text-align: center;
	}

	section {
	background-color: lightgreen;
	margin-bottom: 2%;
	padding: 15px;
	}

	aside {
	width: 30%;
	float: left;
	background-color: #f1f1f1;
	padding: 15px;
	}

	nav ul li {
	list-style: none;
	float: left;
	margin-right: 8%;
	margin-top: 2%;
	}

	nav ul li a,
	nav ul li p {
	text-decoration: none;
	display: block;
	padding: 10px;
	border-radius: 2px;
	}

	nav ul li p,
	nav ul li strong {
	background-color: rgb(200, 80, 80);
	color: #e4e4e4
	}

	nav ul li a:hover {
	background-color: rgb(200, 80, 80);
	}

	section.articles {
	float: left;
	width: 100%;
	}

	article {
	width: 25%;
	background-color: rgb(80, 200, 80);
	padding: 10px;
	margin: 4% 2%;
	float: left;
	}

	article:hover {
	background-color: rgb(20, 100, 30);
	color: #f1f1f1;
	cursor: pointer;
	}

	footer {
	margin-top: 4%;
	background-color: black;
	color: #f5f5f5;
	float: left;
	text-align: center;
	}

	footer a {
	color: salmon;
	text-decoration: none;
	}

	footer a:hover {
	color: rgb(200, 80, 80);
	}

	@media only screen and (max-width:800px) {
	div.sections {
	width: 100%;
	}
	aside {
	width: 100%;
	}
	nav ul li {
	margin-right: 4%;
	}
	article {
	width: 40%;
	}
	}

	@media only screen and (max-width:480px) {
	div.container {
	width: 100%;
	}
	article {
	width: 40%;
	}
	}