diff --git a/src/css/fonts.css b/src/css/fonts.css new file mode 100644 index 0000000..4200961 --- /dev/null +++ b/src/css/fonts.css @@ -0,0 +1,18 @@ + +@font-face { + font-family: MarkerLitterBox; + src: url('fonts/markerlitterbox.eot'); + src: local('☺'), url('fonts/markerlitterbox.woff') format('woff'), url('fonts/markerlitterbox.ttf') format('truetype'), url('fonts/markerlitterbox.svg') format('svg'); + font-weight: normal; + font-style: normal; +} + + +@font-face { + font-family: Hectic; + src: url('fonts/hectic.eot'); + src: local('☺'), url('fonts/hectic.woff') format('woff'), url('fonts/hectic.ttf') format('truetype'), url('fonts/hectic.svg') format('svg'); + font-weight: normal; + font-style: normal; +} + diff --git a/src/css/fonts/hectic.eot b/src/css/fonts/hectic.eot new file mode 100644 index 0000000..f5a2399 Binary files /dev/null and b/src/css/fonts/hectic.eot differ diff --git a/src/css/fonts/hectic.otf b/src/css/fonts/hectic.otf new file mode 100644 index 0000000..37aed27 Binary files /dev/null and b/src/css/fonts/hectic.otf differ diff --git a/src/css/fonts/hectic.svg b/src/css/fonts/hectic.svg new file mode 100644 index 0000000..931fc6e --- /dev/null +++ b/src/css/fonts/hectic.svg @@ -0,0 +1,762 @@ + + + + +Created by FontForge 20090914 at Thu Jun 20 15:57:35 2013 + By www-data +Copyright (c) Andi Darnell, 1999. All rights reserved. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/css/fonts/hectic.ttf b/src/css/fonts/hectic.ttf new file mode 100644 index 0000000..e5c09f2 Binary files /dev/null and b/src/css/fonts/hectic.ttf differ diff --git a/src/css/fonts/hectic.woff b/src/css/fonts/hectic.woff new file mode 100644 index 0000000..cfef854 Binary files /dev/null and b/src/css/fonts/hectic.woff differ diff --git a/src/css/fonts/markerlitterbox.eot b/src/css/fonts/markerlitterbox.eot new file mode 100644 index 0000000..0bbcc4a Binary files /dev/null and b/src/css/fonts/markerlitterbox.eot differ diff --git a/src/css/fonts/markerlitterbox.otf b/src/css/fonts/markerlitterbox.otf new file mode 100644 index 0000000..0852158 Binary files /dev/null and b/src/css/fonts/markerlitterbox.otf differ diff --git a/src/css/fonts/markerlitterbox.svg b/src/css/fonts/markerlitterbox.svg new file mode 100644 index 0000000..bb3feef --- /dev/null +++ b/src/css/fonts/markerlitterbox.svg @@ -0,0 +1,1634 @@ + + + + +Created by FontForge 20090914 at Thu Jun 20 15:58:01 2013 + By www-data +Copyright 1995 Image Club Graphics, Inc. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/css/fonts/markerlitterbox.ttf b/src/css/fonts/markerlitterbox.ttf new file mode 100644 index 0000000..f6b2eb6 Binary files /dev/null and b/src/css/fonts/markerlitterbox.ttf differ diff --git a/src/css/fonts/markerlitterbox.woff b/src/css/fonts/markerlitterbox.woff new file mode 100644 index 0000000..58c9dcd Binary files /dev/null and b/src/css/fonts/markerlitterbox.woff differ diff --git a/src/css/main.css b/src/css/main.css index 9a52fc1..af245e9 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -7,7 +7,7 @@ button, input, select, textarea { - color: #222; + color: #3b3b3b; } body { @@ -16,12 +16,12 @@ body { } ::-moz-selection { - background: #b3d4fc; + background: #fafd05; text-shadow: none; } ::selection { - background: #b3d4fc; + background: #fafd05; text-shadow: none; } @@ -55,96 +55,184 @@ textarea { padding: 0.2em 0; } +a { + color: #3b3b3b; + text-decoration: none; +} + +a:hover { + color: #fafd05; +} + +h1, h2, h3, h4 { + font-weight: normal; +} /* ===== Initializr Styles ================================================== Author: Jonathan Verrecchia - verekia.com/initializr/responsive-template ========================================================================== */ body { - font: 16px/26px Helvetica, Helvetica Neue, Arial; + font: 21px/30px Hectic, serif; + color: #3b3b3b; + background-image: url("../img/background-general.jpg"); + overflow: hidden; } .wrapper { - width: 90%; - margin: 0 5%; } /* =================== ALL: Orange Theme =================== */ -.header-container { - border-bottom: 20px solid #e44d26; +.general-container { + text-align: center; + padding-top: 50px; } -.footer-container, -.main aside { - border-top: 20px solid #e44d26; +.main-container { + width: 1024px; + height: 550px; + margin: 0 auto; + text-align: left; + background: #7f7f7f url('../img/background-fotos.jpg') no-repeat right top; + position: relative; + -moz-box-shadow: 5px 5px 50px #000; + -webkit-box-shadow: 5px 5px 50px #000; + box-shadow: 5px 5px 50px #000; } -.header-container, -.footer-container, -.main aside { - background: #f16529; +.main-container aside { + float: left; + width: 160px; +} + +.main-container .main { + padding-left: 163px; + display: table; +} + +.main article { + top: 0; + right: 0; + position: absolute; + float: right; + width: 800px; + display: table-cell; + margin: 100px 20px 20px 40px; + +} + +.main article section { + margin: 0 0px; + } .title { - color: white; + background: #7f7f7f url('../img/logo.jpg') no-repeat center; + overflow: hidden; + height: 166px; + width: 160px; + text-indent: -9000px; + margin: 0 0 10px 0; + padding: 0; } +.footer-container { + top: 0; + right: 0; + position: absolute; +} + +.footer-container footer p { + font: 18px/24px Hectic, serif; + margin-right: 80px; + text-indent: -80px; +} + +.footer-container footer a { + font: 30px/24px MarkerLitterBox, serif; +} + + /* ============== - MOBILE: Menu + Menu ============== */ nav ul { - margin: 0; + margin: 0 0 0 20px; padding: 0; } nav a { + font: 22px/28px Hectic, serif; display: block; - margin-bottom: 10px; - padding: 15px 0; - - text-align: center; + margin-bottom: 0; + padding: 0; + text-align: left; text-decoration: none; - font-weight: bold; - - color: white; - background: #e44d26; -} - -nav a:hover, -nav a:visited { + font-weight: normal; color: white; } -nav a:hover { - text-decoration: underline; +nav a.current { + color: #fafd05; } /* ============== - MOBILE: Main + Links ============== */ -.main { - padding: 30px 0; +.links { + display: block; + margin-top: 15px; } -.main article h1 { - font-size: 2em; +.links * { + overflow: hidden; + text-indent: -9000px; + margin: 0; + padding: 0; + display: inline-block; } -.main aside { - color: white; - padding: 0px 5% 10px; +.links .escuela { + background: url('../img/logo-surfagua.jpg') no-repeat center; + height: 95px; + width: 160px; + text-indent: -9000px; + margin: 0 0 10px 0; } -.footer-container footer { - color: white; - padding: 20px 0; +.links .icon { + height: 30px; + width: 30px; + margin: 5px 0; + padding: 0; } +.links .icon:nth-of-type(2) { + margin-left: 20px; +} + +.links .icon:last-of-type { + margin-right: 20px; +} + +.links .facebook { + background: url('../img/facebook.png') no-repeat center; +} + +.links .twitter { + background: url('../img/twitter.png') no-repeat center; +} + +.links .flickr { + background: url('../img/flickr.png') no-repeat center; +} + + /* =============== ALL: IE Fixes =============== */ @@ -153,116 +241,6 @@ nav a:hover { padding-top: 20px; } -/* ========================================================================== - Author's custom styles - ========================================================================== */ - - - - - - - - - - - - - - - -/* ========================================================================== - Media Queries - ========================================================================== */ - -@media only screen and (min-width: 480px) { - -/* ==================== - INTERMEDIATE: Menu - ==================== */ - - nav a { - float: left; - width: 27%; - margin: 0 1.7%; - padding: 25px 2%; - margin-bottom: 0; - } - - nav li:first-child a { - margin-left: 0; - } - - nav li:last-child a { - margin-right: 0; - } - -/* ======================== - INTERMEDIATE: IE Fixes - ======================== */ - - nav ul li { - display: inline; - } - - .oldie nav a { - margin: 0 0.7%; - } -} - -@media only screen and (min-width: 768px) { - -/* ==================== - WIDE: CSS3 Effects - ==================== */ - - .header-container, - .main aside { - -webkit-box-shadow: 0 5px 10px #aaa; - -moz-box-shadow: 0 5px 10px #aaa; - box-shadow: 0 5px 10px #aaa; - } - -/* ============ - WIDE: Menu - ============ */ - - .title { - float: left; - } - - nav { - float: right; - width: 38%; - } - -/* ============ - WIDE: Main - ============ */ - - .main article { - float: left; - width: 57%; - } - - .main aside { - float: right; - width: 28%; - } -} - -@media only screen and (min-width: 1140px) { - -/* =============== - Maximal Width - =============== */ - - .wrapper { - width: 1026px; /* 1140px - 10% for margins */ - margin: 0 auto; - } -} - /* ========================================================================== Helper classes ========================================================================== */ @@ -332,7 +310,7 @@ nav a:hover { @media print { * { background: transparent !important; - color: #000 !important; /* Black prints faster: h5bp.com/s */ + color: #000 !important; box-shadow: none !important; text-shadow: none !important; } @@ -350,10 +328,6 @@ nav a:hover { content: " (" attr(title) ")"; } - /* - * Don't show links for images, or javascript/internal links - */ - .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { @@ -367,7 +341,7 @@ nav a:hover { } thead { - display: table-header-group; /* h5bp.com/t */ + display: table-header-group; } tr, diff --git a/src/humans.txt b/src/humans.txt deleted file mode 100644 index 5b037cf..0000000 --- a/src/humans.txt +++ /dev/null @@ -1,15 +0,0 @@ -# humanstxt.org/ -# The humans responsible & technology colophon - -# TEAM - - -- -- - -# THANKS - - - -# TECHNOLOGY COLOPHON - - HTML5, CSS3 - jQuery, Modernizr diff --git a/src/img/background-fotos.jpg b/src/img/background-fotos.jpg new file mode 100644 index 0000000..227cc0a Binary files /dev/null and b/src/img/background-fotos.jpg differ diff --git a/src/img/background-general.jpg b/src/img/background-general.jpg new file mode 100644 index 0000000..46cd32b Binary files /dev/null and b/src/img/background-general.jpg differ diff --git a/src/img/background.jpg b/src/img/background.jpg new file mode 100644 index 0000000..645df06 Binary files /dev/null and b/src/img/background.jpg differ diff --git a/src/img/facebook.png b/src/img/facebook.png new file mode 100644 index 0000000..1403595 Binary files /dev/null and b/src/img/facebook.png differ diff --git a/src/img/flickr.png b/src/img/flickr.png new file mode 100644 index 0000000..6de4103 Binary files /dev/null and b/src/img/flickr.png differ diff --git a/src/img/logo-surfagua.jpg b/src/img/logo-surfagua.jpg new file mode 100644 index 0000000..08b82fa Binary files /dev/null and b/src/img/logo-surfagua.jpg differ diff --git a/src/img/logo.jpg b/src/img/logo.jpg new file mode 100644 index 0000000..971d94d Binary files /dev/null and b/src/img/logo.jpg differ diff --git a/src/img/twitter.png b/src/img/twitter.png new file mode 100644 index 0000000..63a0b4f Binary files /dev/null and b/src/img/twitter.png differ diff --git a/src/index.html b/src/index.html index 38dbf29..83c933e 100644 --- a/src/index.html +++ b/src/index.html @@ -11,6 +11,7 @@ + @@ -20,55 +21,59 @@

You are using an outdated browser. Please upgrade your browser or activate Google Chrome Frame to improve your experience.

-
-
-

h1.title

- -
-
- -
-
- -
-
-

article header h1

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec.

-
-
-

article section h2

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Proin in est sed erat facilisis pharetra.

-
-
-

article section h2

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Proin in est sed erat facilisis pharetra.

-
-
-

article footer h3

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor.

-
-
- +
+
-
-
+
+
+
+

Disfrutar del AGUA? Surfear?

+

Y todo ello de la forma mas exclusiva y cómoda posible?
+ Eso es lo que te ofrecemos en la escuela de surf AWA.

+ +

Aprendizaje individualizado al mismo precio que
+ una clase mutitudinaria.

+ +

Comodidad ante todo, nosotros te llevamos
+ todo a la playa.
+ Todo todo hasta el refrigerio.
+ Eso si la ilusiÓn por aprender
+ corre de tu cuenta.

+
+
+ +
+
+

Calle Calabazas 26 > Suesa > Cantabria (Junto al Cementerio)
tlfs: 607 382 604> 661 962 924 Mail: info@surfagua.com

+
+
+
+
+ -
-
-

footer

-
- @@ -76,10 +81,12 @@