Código HTML:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="shortcut icon" href="favicon.ico"/> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="galleria/galleria-1.2.9.min.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" type="text/css" href="css/mobile.css" media="only screen and (max-width: 480px)" /> <link rel="stylesheet" type="text/css" href="css/main.css" media="only screen and (min-width: 481px)" /> <link rel="stylesheet" type="text/css" href="css/main.css" media="all" /> </head> <body> <div id="galleria"> <img src="images/inicio/1.jpg"> <img src="images/inicio/2.jpg"> <img src="images/inicio/3.jpg"> <img src="images/inicio/4.jpg"> <img src="images/inicio/5.jpg"> <img src="images/inicio/6.jpg"> <img src="images/inicio/7.jpg"> <img src="images/inicio/8.jpg"> <img src="images/inicio/9.jpg"> <img src="images/inicio/10.jpg"> <img src="images/inicio/11.jpg"> <img src="images/inicio/12.jpg"> </div> <div class="logo"><a href="/"></a></div> <div id="rights" class="rights">2013©</div> <nav class="mobil"> <ul> <li><a href="selected.html">SELECTED</a></li> <li><a href="editorial">EDITORIAL</a></li> <li><a href="adv">ADV</a></li> <li><a href="personal">PERSONAL</a></li> <li><a class="espacio" href="makingof">MAKING OF</a></li> <li><a href="about.html">ABOUT</a></li> <li><a href="contact.html">CONTACT</a></li> </ul> </nav> <div class="social"> <a href="http://facebook.com/"><img src="images/facebook.png" alt="Facebook" /></a> <a href="http://twitter.com/"><img src="images/twitter.png" alt="Twitter" /></a> <a href="http://vimeo.com"><img src="images/vimeo.png" alt="Vimeo" /></a> <a href="index.html"><img src="images/youtube.png" alt="Youtube" /></a> <a href="index.html"><img src="images/tumblr.png" alt="Tumblr" /></a> <a href="index.html"><img src="images/instagram.png" alt="Instagram" /></a> </div> <script> Galleria.loadTheme('galleria/themes/fullscreen/galleria.fullscreen.min.js'); Galleria.run('#galleria', { transition: 'fade', autoplay: 2000, transitionSpeed: 1000, imageCrop: true, thumbnails: 'false', }); </script> <script type="text/javascript">document.oncontextmenu = function(){return false}</script> </body></html>
Código HTML:
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,nav ul,nav li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
a{text-decoration:none;}
body { -webkit-font-smoothing: antialiased; }
@font-face {
font-family: 'BebasNeueRegular';
src: url('font/BebasNeue-webfont.eot');
src: url('font/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
url('font/BebasNeue-webfont.woff') format('woff'),
url('font/BebasNeue-webfont.ttf') format('truetype'),
url('font/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'PTSansCaptionRegular';
src: url('font/PTC55F-webfont.eot');
src: url('font/PTC55F-webfont.eot?#iefix') format('embedded-opentype'),
url('font/PTC55F-webfont.woff') format('woff'),
url('font/PTC55F-webfont.ttf') format('truetype'),
url('font/PTC55F-webfont.svg#PTSansCaptionRegular') format('svg');
font-weight: normal;
font-style: normal;
}
#rights {
font-family: 'TimesNewRoman';
font-size: 12px;
color:#777777;
text-shadow: 1px 1px 0 rgba(119,119,119,0.3);
position: absolute;
right: 9px;
bottom: 44px;
z-index: 9999999;
}
nav {
font-family: 'BebasNeueRegular', 'MoolBoran';
font-size: 36px; letter-spacing: 1px;
background-color: #050505;
position: fixed;
height: 40px;
bottom: 0;
padding-left: 10px;
width: 100%;
text-align:center;
z-index: 9999999;
}
nav ul {
margin: auto;
}
nav ul li {
line-height: 40px;
display: inline-block;
padding-right: 20px;
padding-top: 3px;
}
nav ul li a {
color: #fff;
}
nav ul li a:hover {
color:#777777;
}
a.espacio { padding-left: 30px }
.social {
position: relative;
float: right;
padding: 4px 4px;
z-index: 9999999;
}
.social a:hover {
filter: alpha(opacity=50);
-khtml-opacity: 0.5;
-moz-opacity: 0.5;
opacity: 0.5;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; }
.galleria-image-nav { display: none; }
@media screen and (min-width:1600px){
.social {
position: absolute;
padding: 0;
padding-left: 5px;
bottom: 0; }
}
@media screen and (max-width:920px){
a.espacio { padding-left: 0 }
nav { font-size: 29px; }}
@media screen and (max-width:800px){
nav { font-size: 26px; }}
@media screen and (max-width:720px){
#rights { font-size: 9px;}
nav { font-size: 20px; padding-left: 8px;}}
@media screen and (max-width:580px){
nav { font-size: 15px; }}
Código HTML:
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,nav ul,nav li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
body{ background-color: #050505; overflow: scroll; }
#galleria,.galleria-container { display: none;}
a.espacio { padding-left: 0px }
nav.mobil {
font-family: 'BebasNeueRegular', 'MoolBoran';
font-size: 36px; letter-spacing: 1px;
background-color: #050505;
position: relative;
height: auto;
margin-top: 20px;
width: 100%;
}
nav.mobil ul li {
display: block;
}
.social {
position: relative;
width: 100%;
text-align:center;
margin-top: 10px;
margin-bottom: 20px;
}
#rights {
display: none;
position: relative;
display: none;
right: auto;
bottom: auto;
}
.logo {
position: relative;
margin-top: 20px;
width: 100%;
z-index: 9999999;
background: url(../images/logo.png) center no-repeat;
width: 248x;
height: 143px;
}
