diff --git a/README.md b/README.md index 2dab718..688ecae 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,4 @@ -# invie-github -Las mejores guitarras invie-sibles by @iman_col +# invie +Las guitarras más locas + +http://leonidasesteban.github.io/invie-responsive/ diff --git a/css/invie.css b/css/invie.css new file mode 100644 index 0000000..3df3e39 --- /dev/null +++ b/css/invie.css @@ -0,0 +1,597 @@ +@font-face { + font-family: 'icomoon'; + src: url('../fonts/icomoon.eot?6s6d3k'); + src: url('../fonts/icomoon.eot?6s6d3k#iefix') format('embedded-opentype'), + url('../fonts/icomoon.ttf?6s6d3k') format('truetype'), + url('../fonts/icomoon.woff?6s6d3k') format('woff'), + url('../fonts/icomoon.svg?6s6d3k#icomoon') format('svg'); + font-weight: normal; + font-style: normal; +} + +[class^="icon-"], [class*=" icon-"] { + /* use !important to prevent issues with browser extensions that change fonts */ + font-family: 'icomoon' !important; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + + /* Better Font Rendering =========== */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-envelope:before { + content: "\e900"; +} +.icon-phone:before { + content: "\e901"; +} +.icon-menu:before { + content: "\e902"; +} +.icon-close:before { + content: "\e903"; +} + + + +/** { + width: tamaño; + height: tamaño; + padding: 10px; + padding-top: 10px; + padding-right: 13px; + padding-left: 15px; + padding-bottom: 5px; + padding: 10px 13px 5px 15px; + margin: 10px; + margin-top: 10px; + margin-right: 13px; + margin-left: 15px; + margin-bottom: 5px; + margin: 10px 13px 5px 15px; + border: 2px solid red; +}*/ + +body { + font-family: 'Allerta', sans-serif; + margin: 0; +} + + +table { + width: 100%; +} + +th { + background: #273b47; + color: white; +} + +th { + padding: 10px 20px; + text-align: left; +} + +td { + padding: 20px; +} + +table, td, th { + border: 1px solid #273b47; + border-collapse: collapse; +} + +input, textarea { + outline: 0; +} + +input:focus, textarea:focus { + background: lightgray; +} + +.contenedor { + max-width: 800px; + margin: auto; + position: relative; +} + +.background { + background-color: #466173; + background-image: url('../images/background.png'); + background-size: cover; +} + +.button { + border-radius: 12px; + border: none; + color: white; + padding: 7px 12px; + cursor: pointer; + text-decoration: none; + font-size: 18px; + background: #fd324e; + background: linear-gradient(to left, #fe344e, #ff7250); + /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f3c5bd+0,e86c57+50,ea2803+51,ff6600+75,c72200+100;Red+Gloss */ + /*background: rgb(243,197,189); /* Old browsers */ + /* background: -moz-linear-gradient(top, rgba(243,197,189,1) 0%, rgba(232,108,87,1) 50%, rgba(234,40,3,1) 51%, rgba(255,102,0,1) 75%, rgba(199,34,0,1) 100%); + background: -webkit-linear-gradient(top, rgba(243,197,189,1) 0%,rgba(232,108,87,1) 50%,rgba(234,40,3,1) 51%,rgba(255,102,0,1) 75%,rgba(199,34,0,1) 100%); + background: linear-gradient(to bottom, rgba(243,197,189,1) 0%,rgba(232,108,87,1) 50%,rgba(234,40,3,1) 51%,rgba(255,102,0,1) 75%,rgba(199,34,0,1) 100%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3c5bd', endColorstr='#c72200',GradientType=0 ); */ + +} + +.titulo { + font-family: 'Montserrat', sans-serif; + font-size: 70px; + margin-bottom: 0; + margin-top: 70px; +} + +.titulo span { + text-decoration: underline; +} + +.title-a { + font-size: 24px; + margin-top: 0; +} + +.title-b { + font-size: 50px; + margin-bottom: 20px; +} + +.guitarras { + color: #1F313C; + margin-bottom: 60px; +} + +.guitarras h2 { + font-family: 'Montserrat', sans-serif; + font-size: 35px; +} + + + +.portada { + + color: white; + padding: 20px; + height: 500px; +} + +.portada button { + margin-bottom: 70px; +} + + +.menu { + font-size: 24px; + display: inline-block; + position: absolute; + right: 0; +} + +.menu li { + display: inline-block; + margin-left: 30px; +} + +.menu li:before{ + content: '∘'; + font-size: 50px; + line-height: 20px; + color: white; +} + +.menu a { + color: white; + text-decoration: none; +} + +.logotipo { + display: inline-block; + margin-left: 0; +} + + +.guitarra { + margin: 10px 10px 40px 10px; + padding: 10px; + /*overflow: hidden;*/ + border: 1px solid #1F313C; + border-radius: 8px; +} +.guitarra ol { + padding: 0; +} +.guitarra.b { + height: 190px; +} + + +.derecha { + float: right; + position: relative; + top: -127px; +} + +.izquierda { + float: left; + position: relative; +} + +.contenedor-guitarra-a { + padding-left: 20px; +} +.contenedor-guitarra-b { + margin-left: 370px; + position: relative; + bottom: 90px; + +} + +.header { + position: relative; +} + + +.footer { + background: #273b47; + padding: 50px 10px; +} + +.contacto { + display: flex; + width: 300px; + flex-wrap: wrap; + align-items: center; +} + +.contacto img { + display: block; +} + +.contacto strong { + display: block; +} + +.contacto a { + color: white; + text-decoration: none; + margin: 10px 10px 10px 0; +} + + +.footer .contenedor { + display: flex; + justify-content: space-between; +} + + +.formulario { + display: flex; + width: 400px; + color: white; +} + + +.col1, .col2 { + display: flex; + flex-direction: column; +} + +.col1 { + margin-right: 15px; +} +.col2 { + align-items: flex-start; +} + +.col2 .button { + margin-top: 15px; +} + +.intereses label { + font-size: 12px; +} + +.formulario label, .sexo, .intereses { + margin-bottom: 10px; +} + + +.sexo { + margin-top: 10px; +} + + +.tabla { + margin: 50px 0; +} + + +.burguer-button { + width: 40px; + border-radius: 50%; + line-height: 40px; + height: 40px; + background: #395667; + display: inline-block; + text-align: center; + cursor: pointer; + position: fixed; + left: 20px; + top: 20px; + color: white; + z-index: 3; + display: none; +} + +.video-demo { + max-width: 500px; + width: 100%; + border: 5px solid #3c5b6e; +} + +.video-demo-contenedor { + display: flex; + justify-content: center; + margin-bottom: 80px; +} + +@media screen and (max-width: 800px) { + /*body { + border: 10px solid red; + }*/ + /*.contenedor { + width: auto; + max-width: 800px; + }*/ + + /* precios */ + .tabla { + margin: 50px 20px; + } + .tabla .contenedor { + overflow: auto; + border: 1px solid #273b47; + } + /* precios */ + /* portada */ + .titulo { + font-size: 45px; + margin-top: 30px; + } + .title-a { + font-size: 18px; + } + .portada { + height: auto; + } + .portada .button { + margin-bottom: 30px; + display: inline-block; + } + /* portada */ + + + /* guitarras */ + .video-demo-contenedor { + margin-bottom: 30px; + } + .guitarras { + text-align:center; + } + .izquierda, .derecha { + float: none; + position: static; + } + .title-b { + margin: 0; + } + .guitarra li { + list-style: none; + } + .guitarra.b { + height: auto; + } + .contenedor-guitarra-b { + position: static; + margin: 0; + } + .contenedor-guitarra-a { + padding: 0; + } + /* guitarras */ + +} + +@media screen and (max-width: 767px) { + /* footer */ + .footer .contenedor { + display: block; + } + + .contacto { + margin: 0 auto; + } + .formulario { + display: block; + margin: 0 auto; + width: 300px; + } + + .intereses label { + display: block; + font-size: 16px; + } + .col1 { + margin: 0; + } + input[type="text"], + input[type="email"] { + font-size: 16px; + padding: 5px; + } + textarea { + width: 100%; + } + input[type="radio"], + input[type="checkbox"] { + zoom: 1.5; + } + /* footer */ +} + +@media screen and (max-width: 650px) { + + .header { + text-align: center; + } + + .logotipo { + margin: 0; + } + + .menu { + position: static; + display: block; + } + + .menu li:first-child { + margin: 0; + } + + .menu ul { + padding: 0; + } + + /* guitarras */ + /*.video-demo { + margin: 0 10px; + }*/ + /* guitarras */ + +} + + +@media screen and (max-width: 500px) { + /* portada */ + .portada .button { + display: block; + } + .precios .header .logotipo { + margin: 50px 0; + } + .burguer-button { + display: block; + } + .portada .contenedor { + position: static; + } + .header { + position: static; + } + .header .contenedor { + position: static; + } + .menu { + background: rgba(255, 60, 88, .8); + position: fixed; + left: -100%; + top: 0; + z-index: 2; + bottom: 0; + right: 0; + display: flex; + width: 100%; + align-items: center; + transition: .3s; + } + .menu.active { + left: 0; + } + + .menu ul { + flex: 1; + } + .menu li { + display: block; + margin: 0; + padding: 8px 0; + border-bottom: 1px solid white; + } + + .menu li:before { + display: none; + } + + .menu li:first-child { + border-top: 1px solid white; + } + .portada { + text-align: center; + } + .titulo { + font-size: 30px; + } + + .title { + font-size: 16px + } + /* portada */ + + /* guitarras */ + .guitarra img { + width: 200px; + /*height: auto;*/ + } + .title-b { + font-size: 30px; + } + .video-demo-contenedor { + margin: 0 10px 30px 10px; + } + /* guitarras */ + + /* footer */ + .col2 { + align-items: stretch; + } + /* footer */ + +} + + +video { + width: 100%; +} + + +.video-responsive-contenedor { + position: relative; + padding-top: 56.25%; +} + +.video-responsive-src { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + width: 100%; + height: 100%; +} + + +@media screen and (-webkit-min-device-pixel-ratio: 2) { + .background { + background-image: url('../images/background2x.png'); + } +} diff --git a/css/media-querie.css b/css/media-querie.css new file mode 100644 index 0000000..6eebca6 --- /dev/null +++ b/css/media-querie.css @@ -0,0 +1,4 @@ +body { + background: red; + border: 10px solid blue; +} diff --git a/fonts/icomoon.eot b/fonts/icomoon.eot new file mode 100644 index 0000000..816aef2 Binary files /dev/null and b/fonts/icomoon.eot differ diff --git a/fonts/icomoon.svg b/fonts/icomoon.svg new file mode 100644 index 0000000..7a915cf --- /dev/null +++ b/fonts/icomoon.svg @@ -0,0 +1,14 @@ + + + +Generated by IcoMoon + + + + + + + + + + \ No newline at end of file diff --git a/fonts/icomoon.ttf b/fonts/icomoon.ttf new file mode 100644 index 0000000..eb9a88c Binary files /dev/null and b/fonts/icomoon.ttf differ diff --git a/fonts/icomoon.woff b/fonts/icomoon.woff new file mode 100644 index 0000000..a82fa5c Binary files /dev/null and b/fonts/icomoon.woff differ diff --git a/images/Untitled.sketch b/images/Untitled.sketch new file mode 100644 index 0000000..6e777a5 Binary files /dev/null and b/images/Untitled.sketch differ diff --git a/images/background.png b/images/background.png new file mode 100644 index 0000000..7e35f37 Binary files /dev/null and b/images/background.png differ diff --git a/images/background2x.png b/images/background2x.png new file mode 100644 index 0000000..8dcff55 Binary files /dev/null and b/images/background2x.png differ diff --git a/images/invie-acustica.png b/images/invie-acustica.png new file mode 100644 index 0000000..8bbd69e Binary files /dev/null and b/images/invie-acustica.png differ diff --git a/images/invie-acustica2x.png b/images/invie-acustica2x.png new file mode 100644 index 0000000..ad39e5d Binary files /dev/null and b/images/invie-acustica2x.png differ diff --git a/images/invie-classic.png b/images/invie-classic.png new file mode 100644 index 0000000..e97db53 Binary files /dev/null and b/images/invie-classic.png differ diff --git a/images/invie-classic2x.png b/images/invie-classic2x.png new file mode 100644 index 0000000..b968d73 Binary files /dev/null and b/images/invie-classic2x.png differ diff --git a/images/invie-white.png b/images/invie-white.png new file mode 100644 index 0000000..b12e309 Binary files /dev/null and b/images/invie-white.png differ diff --git a/images/invie-white2x.png b/images/invie-white2x.png new file mode 100644 index 0000000..b12e309 Binary files /dev/null and b/images/invie-white2x.png differ diff --git a/images/invie.png b/images/invie.png new file mode 100644 index 0000000..26a5a51 Binary files /dev/null and b/images/invie.png differ diff --git a/images/invie2x.png b/images/invie2x.png new file mode 100644 index 0000000..945c740 Binary files /dev/null and b/images/invie2x.png differ diff --git a/index.html b/index.html index 4fbfcf8..4d9e490 100644 --- a/index.html +++ b/index.html @@ -1,27 +1,164 @@ + - Invie - + Invie - tus mejores guitarras!! + + + + + - - +
+ +
+

Guitarras inviesibles

+

Sé la estrella de rock que siempre quisiste ser

+ Conoce mas +
+
+
+

Nuestra guitarras

+
+
+
+ +
+
+
+ +
+ Guitarra Invie Acustica +
+

Invie Acustica

+
    +
  1. Estilo vintage
    2. +
  2. Madera pura
    3. +
  3. Incluye estuche invisible de aluminio
    4. +
+
+
+
+ Guitarra Invie Classic +
+

Invie Classic

+
    +
  1. Estilo vintage
    2. +
  2. Liviana
    3. +
  3. Inicia tu camino como Rockstar
    4. +
+
+
+
+ + + + diff --git a/precios.html b/precios.html new file mode 100644 index 0000000..89839e8 --- /dev/null +++ b/precios.html @@ -0,0 +1,153 @@ + + + + Precios de tus mejores guitarras!! + + + + + + + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ModeloPrecioDescripciónModeloPrecioDescripción
Invie classic$100000Una guitarra muy proInvie classic$100000Una guitarra muy pro
Invie classic$100000Una guitarra muy proInvie classic$100000Una guitarra muy pro
Invie classic$100000Una guitarra muy proInvie classic$100000Una guitarra muy pro
+
+
+ + + + + diff --git a/update-z b/update-z new file mode 100644 index 0000000..e69de29 diff --git a/video/320x240.ogg b/video/320x240.ogg new file mode 100644 index 0000000..ac7ece3 Binary files /dev/null and b/video/320x240.ogg differ