Código HTML
:
<!DOCTYPE HTML>
<html lang="es">
<head>
<title>Primer página HTML5</title>
<meta charset = "utf-8" />
<meta name = "viewport" content="width=device-width">
<link rel="icon" href="IMG/ico/Icono.ico">
<link rel="stylesheet" type="text/css" href="CSS/estilos.css">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
.active {
background-color: #BF6763;
}
</style>
<style>
p.test {
width: 11em;
border: 1px solid #000000;
word-wrap: break-word;
}
</style>
</head>
<body background="IMG/fondo/dos.png">
<section class = "contenedor">
<section class = "contenido_principal">
<aside class = "sin_nada">
<article>
<ul>
<li><a href="" class="active">Home</a></li>
<li><a href="">New items</a></li>
<li><a href="">My cart</a></li>
<li><a href="">Contact</a></li>
</ul>
</article>
</aside>
<article class="contenido_PW2">
<form id="searchbox" action="">
<input id="search" type="text" placeholder="Que quieres buscar">
<input id="submit" type="submit" value="buscar">
</form>
</article>
<center class="Oswald">
<h2>Bienvenido a tu GameShop</h2>
<h1>Aqui podras encontrar todo tipo de articulos</h1>
</center>
<center>
<a href="">Celulares</a>
<hr>
<?php
for ($i=1; $i <= 6; $i++) {
echo '<section>';
echo '</section>';
}
?>
</center>
<center>
<a href="">Laptop</a>
<hr>
</center>
<center>
<a href="">Equipo de sonido</a>
<hr>
</center>
</section>
</section>
<footer class = "pie_pagina">
<center>
<a href="https://www.facebook.com/jeffrey.lionelwoods.52" target="_blank">
<img alt="sigueme en facebook" height="40" src="http://3.bp.blogspot.com/-MQuocq7OzfU/UiXwUY81yQI/AAAAAAAAB0Q/h6-R_R2-buI/s1600/face.png" title="sigueme en facebook" width="40" />
</a>
<a href="https://plus.google.com/u/0/108730066220357188830" target="_blank">
<img alt="sigueme en Google+" height="40" src="http://1.bp.blogspot.com/-LzgEeObkOc0/UiX1TupB_KI/AAAAAAAAB5I/Ox_ZllZY90g/s1600/Google%252B+alt.png" title="sigueme en Google+" width="40" />
</a>
<a href="https://twitter.com/Ramses_Sep" target="_blank">
<img alt="sigueme en Twitter" height="40" src="http://2.bp.blogspot.com/-B0wCtNXYV3U/UiX1VnAQSrI/AAAAAAAAB6Q/ILY3m0NJVE8/s1600/Twitter+NEW.png" title="sigueme en Twitter" width="40" />
</a>
</center>
</footer>
</body>
Código CSS3
:
body{
background-color: none;
font-family: Verdana;
margin: 0;
padding: 0;
}
section{
background-color: none;
height: 100px;
width: 50%;
margin-bottom: 10px;
padding: 10px;
}
.contenedor{
width: 100%;
height: 600px;
background-color: none;
}
.contenido_principal{
width: 100%;
height: 560px;
background-color: none;
float: left;
margin-top: -10px;
}
.pie_pagina{
width: 100%;
height: 300px;
background-color: black;
clear: both;
}
.sin_nada{
margin-top: -20px;
margin-left: -30px;
}
.Oswald{
font-family: 'Oswald', sans-serif;
}
.letra{
font-family: 'Raleway', sans-serif;
}
.buscador{
margin-left: 50%;
}
.contenido_PW{
margin-top: 50%;
height: 50%;
margin-left: 30em;
}
#searchbox
{
background-color: none;
border-width: 1px;
width: 500px;
height: 35px;
padding: 1px;
margin: 0 auto 0;
overflow: hidden;
margin-left: 76%;
margin-top: .6%;
/* Clear floats / border-radius: 35px; / border-style: solid; / border-color: #c4d9df #a4c3ca #83afb7; /
#fff / #d4e8ec / background-image: linear-gradient(, ); / #eaf8fc */
}
#search,
#submit {
float: left;
}
#search {
padding: 5px 9px;
height: 15px;
width: 200px;
border: 1px solid #a4c3ca;
font: normal 11px 'trebuchet MS', arial, helvetica;
border-radius: 3px 3px 3px 3px;
box-shadow: 10 10px 30px rgba(0, 0, 0, 0.25) inset, 0 1px 0 rgba(255, 255, 255, 1);
}
#submit
{
background-image: linear-gradient(#95d788, #6cbb6b);
border-radius: 3px 3px 3px 3px;
border-width: 3px;
border-style: solid;
border-color: #7eba7c #578e57 #447d43;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
height: 27px;
margin: 0 0 0 4px;
width: 70px;
cursor: pointer;
font: bold 14px Arial, Helvetica;
color: #23441e;
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
#submit:hover {
background-color: #95d788;
background-image: linear-gradient(#6cbb6b, #95d788);
}
#submit:active {
background: #95d788;
outline: none;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
}
#submit::-moz-focus-inner {
border: 0;
}
#search::-webkit-input-placeholder {
color: #9c9c9c;
font-style: italic;
}
#search:-moz-placeholder {
color: #9c9c9c;
font-style: italic;
}
#search:-ms-placeholder {
color: #9c9c9c;
font-style: italic;
}