diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..49e57db --- /dev/null +++ b/css/style.css @@ -0,0 +1,277 @@ +/* Estilos generales */ + +body { + font-size: 15px; + font-family: Arial, Helvetica, sans-serif; + line-height: 1.5em; + padding: 0; + margin: 0; + background-color: #f4f4f4; +} + +.container { + width: 80%; + margin: auto; + overflow: hidden; + +} + +ul { + margin: 0; + padding: 0; +} + +/* Header */ + +header { + background: #35424a; + color: white; + padding-top: 30px; + min-height: 70px; + border-bottom: #ffc600 3px solid; +} + +header a { + color: white; + text-decoration: none; + text-transform: uppercase; + font-size: 16px; +} + +header li { + display: inline; + padding: 0 20px 0 20px; +} + +header #branding { + float: left; +} + +header nav { + float: right; + margin-top: -41px; +} + +header .highlight { + color: #ffc600; + font-weight: bold; +} + +header a:hover { + color: #cccccc; + font-weight: bold; +} + +/* Footer */ + +footer { + padding: 30px; + padding-top: 14px; + margin-top: 20px; + color: white; + background-color: #00c3ff; + text-align: center; + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; +/* position: fixed; */ + left: 0; + bottom: 0; + width: 100%; + height: 25px; +} + +.primary { + background-color: #555; + box-shadow: none !important; + color: #fff !important; + font-family: Arial, Helvetica, sans-serif; + font-size: 15px; + width: 200px; + height: 30px; +} + +.principal label { + font-family: Arial, Helvetica, sans-serif; +} + +/* Media Queries */ +@media(max-width: 768px) { + + header #branding, + header nav, + #boxes .box, + article#main-col, + aside#sidebar { + float: none; + text-align: center; + width: 100%; + } + + aside#sidebar { + margin-bottom: 120px; + } + + header nav { + margin-top: 20px; + } + + #showcase h1 { + font-size: 25px; + } + + #boxes .box:nth-child(3) { + margin-bottom: 80px; + } + +} + +/* Menú con submenus */ + +.navbar { + overflow: hidden; + background-color: #333; +} + +.navbar a { + float: left; + font-size: 16px; + color: white; + text-align: center; + padding: 14px 16px; + text-decoration: none; +} + +.subnav { + float: left; + overflow: hidden; +} + +.subnav .subnavbtn { + font-size: 16px; + border: none; + outline: none; + color: white; + padding: 14px 16px; + background-color: inherit; + font-family: inherit; + margin: 0; + text-transform: uppercase; +} + +.navbar a:hover, +.subnav:hover .subnavbtn { + background-color: #0763ee; +} + +.subnav-content { + display: none; + position: absolute; + left: 0; + background-color: #0763ee; + width: 100%; + z-index: 1; +} + +.subnav-content a { + float: left; + color: white; + text-decoration: none; +} + +.subnav-content a:hover { + background-color: #eee; + color: black; +} + +.subnav:hover .subnav-content { + display: block; +} + +/* Formato de las tablas */ + +table { + margin: 0 0 2em 0; + width: 100%; +} + +table tbody tr { + border-left: 0; + border-right: 0; +} + +table tbody tr:nth-child(2n + 1) { + background-color: rgba(144, 144, 144, 0.075); +} + +table td { + padding: 0.75em 0.75em; +} + +table th { + color: #555; + font-size: 0.9em; + font-weight: 400; + padding: 0 0.75em 0.75em 0.75em; + text-align: left; +} + +table thead { + border-bottom: solid 1px rgba(144, 144, 144, 0.5); +} + +table tfoot { + border-top: solid 1px rgba(144, 144, 144, 0.5); +} + +table.alt { + border-collapse: separate; +} + +table.alt tbody tr td { + border: solid 1px rgba(144, 144, 144, 0.5); + border-left-width: 0; + border-top-width: 0; +} + +table.alt tbody tr td:first-child { + border-left-width: 1px; +} + +table.alt tbody tr:first-child td { + border-top-width: 1px; +} + +table.alt thead { + border-bottom: 0; +} + +table.alt tfoot { + border-top: 0; +} + +/* Formularios */ + +input[type=text], +select { + width: 100%; + padding: 12px 20px; + margin: 8px 0; + display: inline-block; + border: 1px solid #ccc; + border-radius: 4px; + box-sizing: border-box; +} + +input[type=submit] { + width: 100%; + background-color: #4CAF50; + color: white; + padding: 1px 20px; + margin: 8px 0; + border: none; + border-radius: 4px; + cursor: pointer; +} + +input[type=submit]:hover { + background-color: #45a049; +} diff --git a/estilos.html b/estilos.html new file mode 100644 index 0000000..3e852d3 --- /dev/null +++ b/estilos.html @@ -0,0 +1,473 @@ + + + + + K8S cluster de C.Rey + + + + + + + + + + + +
+
+
+
+
+

Cargar archivo de música

+
+ + +
+ + +
+ +

El archivo seleccionado se subirá al servidor para ser escuchado desde el teléfono.

+
+
+ +
+
+
+
+ + +
+
+
+
+
    +
    • +
    • +
    • +
    • +
    • +
    • +
+
+
+
+

Lorem ipsum dolor adipiscing
+ amet dolor consequat

+
+

Adipiscing a commodo ante nunc accumsan interdum mi ante adipiscing. A nunc lobortis non nisl amet vis volutpat aclacus nascetur ac non. Lorem curae eu ante amet sapien in tempus ac. Adipiscing id accumsan adipiscing ipsum.

+

Blandit faucibus proin. Ac aliquam integer adipiscing enim non praesent vis commodo nunc phasellus cubilia ac risus accumsan. Accumsan blandit. Lobortis phasellus non lobortis dit varius mi varius accumsan lobortis. Blandit ante aliquam lacinia lorem lobortis semper morbi col faucibus vitae integer placerat accumsan orci eu mi odio tempus adipiscing adipiscing adipiscing curae consequat feugiat etiam dolore.

+

Adipiscing a commodo ante nunc accumsan interdum mi ante adipiscing. A nunc lobortis non nisl amet vis volutpat aclacus nascetur ac non. Lorem curae eu ante amet sapien in tempus ac. Adipiscing id accumsan adipiscing ipsum.

+
+
+
+
+ + +
+
+
+

Adipiscing amet consequat

+
+

Ante nunc accumsan et aclacus nascetur ac ante amet sapien sed.

+
+
+ +

Magna feugiat lorem

+

Adipiscing a commodo ante nunc magna lorem et interdum mi ante nunc lobortis non amet vis sed volutpat et nascetur.

+ +
+
+ +

Magna feugiat lorem

+

Adipiscing a commodo ante nunc magna lorem et interdum mi ante nunc lobortis non amet vis sed volutpat et nascetur.

+ +
+
+ +

Magna feugiat lorem

+

Adipiscing a commodo ante nunc magna lorem et interdum mi ante nunc lobortis non amet vis sed volutpat et nascetur.

+ +
+
+
+
+ + +
+
+
+

Ipsum feugiat consequat?

+
+

Sed lacus nascetur ac ante amet sapien.

+ +
+
+ + + +
+
+
+

Elements

+
+ +
+

Text

+

This is bold and this is strong. This is italic and this is emphasized. + This is superscript text and this is subscript text. + This is underlined and this is code: for (;;) { ... }. Finally, this is a link.

+
+
+

Heading with a Subtitle

+

Lorem ipsum dolor sit amet nullam id egestas urna aliquam

+
+

Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit tempus accumsan.

+
+
Heading with a Subtitle
+

Lorem ipsum dolor sit amet nullam id egestas urna aliquam

+
+

Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit tempus accumsan.

+
+

Heading Level 2

+

Heading Level 3

+

Heading Level 4

+
Heading Level 5
+
Heading Level 6
+
+
Blockquote
+
Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan faucibus. Vestibulum ante ipsum primis in faucibus lorem ipsum dolor sit amet nullam adipiscing eu felis.
+
Preformatted
+ 
i = 0;
+
+while (!deck.isInOrder()) {
+print 'Iteration ' + i;
+deck.shuffle();
+i++;
+}
+
+print 'It took ' + i + ' iterations to sort the deck.';
+
+ +
+

Lists

+
+
+
Unordered
+
    +
  • Dolor pulvinar etiam.
    • +
  • Sagittis adipiscing.
    • +
  • Felis enim feugiat.
    • +
+
Alternate
+
    +
  • Dolor pulvinar etiam.
    • +
  • Sagittis adipiscing.
    • +
  • Felis enim feugiat.
    • +
+
+
+
Ordered
+
    +
  1. Dolor pulvinar etiam.
    2. +
  2. Etiam vel felis viverra.
    3. +
  3. Felis enim feugiat.
    4. +
  4. Dolor pulvinar etiam.
    5. +
  5. Etiam vel felis lorem.
    6. +
  6. Felis enim et feugiat.
    7. +
+
Icons
+ +
+
+
Actions
+
+
+ + + + +
+
+ + +
+
+
+ +
+

Table

+
Default
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionPrice
Item OneAnte turpis integer aliquet porttitor.29.99
Item TwoVis ac commodo adipiscing arcu aliquet.19.99
Item Three Morbi faucibus arcu accumsan lorem.29.99
Item FourVitae integer tempus condimentum.19.99
Item FiveAnte turpis integer aliquet porttitor.29.99
100.00
+
+ +
Alternate
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionPrice
Item OneAnte turpis integer aliquet porttitor.29.99
Item TwoVis ac commodo adipiscing arcu aliquet.19.99
Item Three Morbi faucibus arcu accumsan lorem.29.99
Item FourVitae integer tempus condimentum.19.99
Item FiveAnte turpis integer aliquet porttitor.29.99
100.00
+
+
+ +
+

Buttons

+ + + + + +
    +
  • Disabled
    • +
  • Disabled
    • +
+
+ +
+

Form

+
+
+
+ +
+
+ +
+
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+
    +
    • +
    • +
+
+
+
+
+ +
+

Image

+
Fit
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Left & Right
+

Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent.

+

Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent.

+
+ +
+
+ + + + + + + + + + + + + + +