Responsive and generic template...the goal is strengthen basic concepts about responsive design. :)
A Pen by Carlos Moreno on CodePen.
<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?" | |
} |
Responsive and generic template...the goal is strengthen basic concepts about responsive design. :)
A Pen by Carlos Moreno on CodePen.
* { | |
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%; | |
} | |
} |