Skip to content

Commit

Permalink
Primer commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@noricumbo
noricumbo committed Jun 28, 2014
0 parents commit 16d7462
Show file tree
Hide file tree
Showing 5 changed files with 170 additions and 0 deletions.
54 changes: 54 additions & 0 deletions css/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
/* Global styles */

body {
background-color: #dedede;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
margin: 0;
}

.contenedor_principal {
max-width: 960px;
/*min-width: 300px;*/
margin: 0 auto;
background-color: #fff;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.7em; }
h3 { font-size: 1.5em; }

p { line-height: 1.5em; }

header { height: 200px; background-color: #ccc; }
header h1 { margin: 0; }

nav { background-color: #333; color: #fff; }
nav a { display: inline-block; color: #fff; text-decoration: none; padding: 15px 25px; }
nav a:hover { background-color: #aaa; }

.descripcion { padding: 10px; }

footer { background-color: #dedede; clear: both; }
footer p { margin: 0; font-size: 0.8em; }

/* Clear fix = Group (Revisar: http://css-tricks.com/snippets/css/clear-fix/) */
.group:after {
content: "";
display: table;
clear: both;
}



/* Media query para cambiar gráficos para retina display. Tienen que ser del doble del tamaño normal a 72dpi. Revisar también http://css-tricks.com/snippets/css/retina-display-media-query/ */
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx)
{

}
22 changes: 22 additions & 0 deletions css/style_large_screen.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
/* Large screen styles */

header { height: 200px; background: url('http://placehold.it/960x200') top center; }

.nota {
width: 33%;
float: left;
position: relative;
}

.nota img { float: left; margin: 10px 10px 0 10px; }
.nota p { padding: 0 10px; }

@media screen and (max-width: 980px) {
footer { padding-left: 10px; }
}






8 changes: 8 additions & 0 deletions css/style_medium_screen.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
/* Medium screen styles */

header { height: 150px; background: url('http://placehold.it/800x150') top center; }

.nota img { float: none; }
.nota h2 { padding: 0 10px; }

footer { padding-left: 10px; }
16 changes: 16 additions & 0 deletions css/style_small_screen.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
/* Small screen styles */

header { height: 80px; background: url('http://placehold.it/500x80') top center; }

nav a { display: block; margin: 0; padding: 10px 25px; }

.nota {
float: none;
width: 100%;
margin-bottom: 3em;
}

.nota img { float: left; width: 90px; height: 90px; margin: 0 10px; }
.nota h2 { margin: 0 0 0.5em 0; }

footer { padding-left: 10px; }
70 changes: 70 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Configura las escalas iniciales y previene la rotación del sitio en el dispositivo -->
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0">
<title>Test Responsive Web Design</title>
<!-- Normalize: resetea y escribe estilos globales para todos los navegadores -->
<link rel="stylesheet" src="//normalize-css.googlecode.com/svn/trunk/normalize.css" />
<!-- Estilos globales y 'large' configurados por defecto para todos los anchos mayores a 801px -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/style_large_screen.css">
<!-- Si el ancho del dispositivo es mayor a 500px y menor a 801 carga los estilos 'medium_screen' -->
<link rel="stylesheet" type="text/css" media="only screen and (min-width:501px) and (max-width:800px)" href="css/style_medium_screen.css">
<!-- Si el ancho del dispositivo es mayor a 50 y menor a 501px carga los estilos 'small' -->
<link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-width:500px)" href="css/style_small_screen.css">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="contenedor_principal group">

<!-- Encabezado general -->
<header>
<h1>Test Responsive Web Design</h1>
</header>

<!-- Navegación principal -->
<nav>
<a href="#">About us</a>
<a href="#">Sección 1</a>
<a href="#">Sección 2</a>
<a href="#">Contacto</a>
</nav>

<!-- Descripción del sitio -->
<div class="descripcion">
<h2>Hola, bienvenido</h2>
<p>Cupcake ipsum dolor sit amet brownie biscuit danish. Caramels I love oat cake jelly-o chupa chups soufflé ice cream chocolate bar jelly beans. I love marshmallow dessert ice cream caramels tart. I love cheesecake apple pie. Chupa chups ice cream caramels. I love I love lollipop I love biscuit lemon drops sweet chupa chups. Danish chocolate powder I love chupa chups.</p>
</div>

<!-- Nota 01 -->
<div class="nota">
<img src="http://placehold.it/150x150" alt="place holder image">
<h2>Título de nota</h2>
<p>Cupcake ipsum dolor sit amet brownie biscuit danish. Caramels I love oat cake jelly-o chupa chups soufflé ice cream chocolate bar jelly beans. I love marshmallow dessert ice cream caramels tart. I love cheesecake apple pie.</p>
</div>

<!-- Nota 02 -->
<div class="nota">
<img src="http://placehold.it/150x150" alt="place holder image">
<h2>Título de nota</h2>
<p>Cupcake ipsum dolor sit amet brownie biscuit danish. Caramels I love oat cake jelly-o chupa chups soufflé ice cream chocolate bar jelly beans. I love marshmallow dessert ice cream caramels tart. I love cheesecake apple pie.</p>
</div>

<!-- Nota 03 -->
<div class="nota">
<img src="http://placehold.it/150x150" alt="place holder image">
<h2>Título de nota</h2>
<p>Cupcake ipsum dolor sit amet brownie biscuit danish. Caramels I love oat cake jelly-o chupa chups soufflé ice cream chocolate bar jelly beans. I love marshmallow dessert ice cream caramels tart. I love cheesecake apple pie.</p>
</div>

<footer>
<p>&copy; Jorge Noricumbo - <a href="http://www.hacemoscodigo.com" title="Liga a Hacemos Código">HacemosCódigo.com</a></p>
</footer>

</div>
</body>
</html>

0 comments on commit 16d7462

Please sign in to comment.