diff --git a/topic0/css/css/style.css b/topic0/css/css/style.css new file mode 100644 index 00000000..d2224b51 --- /dev/null +++ b/topic0/css/css/style.css @@ -0,0 +1,72 @@ +html{ + font-family: 'Verdana', sans-serif; + font-size: 14px; + font-weight: 800; +} + +header{ + background-color: red; + text-align: center; +} + +footer{ + background-color: orange; + text-align: center; +} + +aside{ + background-color: orangered; +} + +nav{ + background-color: gold; +} + +.header{ + float: left; + width: 100%; + display: block; + box-sizing: border-box; + font-size: 46px; +} +.footer{ + float: left; + width: 100%; + display: block; + box-sizing: border-box; + font-size: 10px; +} +.content{ + float: left; + width: 50%; + display: inline-block; + box-sizing: border-box; + font-size: 14px; +} +.navigation{ + float: left; + width: 25%; + display: inline-block; + box-sizing: border-box; + font-size: 12px; +} +.sidebar{ + float: left; + width: 25%; + display: inline-block; + font-size: 10px; + box-sizing: border-box; +} + + +*[class$="r"]{ + background-color: magenta; +} + +[class*="a"]:not(*[class$="r"]) { + background-color: blue; +} + + .oh-no-inline-styles{ + background: green !important; + } \ No newline at end of file diff --git a/topic0/css/css/stylex.css b/topic0/css/css/stylex.css new file mode 100644 index 00000000..2222f211 --- /dev/null +++ b/topic0/css/css/stylex.css @@ -0,0 +1,100 @@ +html{ + font-family: 'Arial', 'Verdana', sans-serif; + font-size: 12px; +} + + +.container{ + float: left; + padding: 10px; + box-sizing: border-box; +} + +.header{ + float: left; + width: 100%; + box-sizing: border-box; + padding: 50px; + background-color: white; + margin-bottom: 10px; +} +.header .module-title{ + float: left; + width: 33.3%; +} +.header .module-description{ + float: left; + width: 66.6%; +} + +.content{ + float: left; + width: 100%; +} +.content .box{ + float: left; + width: 33.3%; + position: relative; + padding: 10px; + box-sizing: border-box; +} +.content .box img{ + width: auto; + height: auto; + max-width: 100%; +} + +.content .box:hover .box-content{ + opacity: 1; +} + +.content .box-content{ + display: flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + padding: 20px; + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + opacity: 0; + background-color: rgba(0,0,0,0.3); + transition: all 0.5s ease; + -webkit-transition: all 0.2s ease; +} +.content .box-content p{ + margin: 0; + color: #fff; +} + + + +@media only screen and (max-width: 670px){ + .header{ + padding: 15px; + } + .header .module-title{ + width: 100%; + } + .header .module-description{ + width: 100%; + } + .content .box, + .content .box-content{ + padding: 5px; + } + .content .box{ + width: 50%; + } +} + +@media only screen and (max-width: 480px){ + .header{ + padding: 10px; + } + .content .box{ + width: 100%; + } +} \ No newline at end of file diff --git a/topic0/css/img/01.jpg b/topic0/css/img/01.jpg new file mode 100644 index 00000000..51264afc Binary files /dev/null and b/topic0/css/img/01.jpg differ diff --git a/topic0/css/img/02.jpg b/topic0/css/img/02.jpg new file mode 100644 index 00000000..9092cab4 Binary files /dev/null and b/topic0/css/img/02.jpg differ diff --git a/topic0/css/img/03.jpg b/topic0/css/img/03.jpg new file mode 100644 index 00000000..b77c59b0 Binary files /dev/null and b/topic0/css/img/03.jpg differ diff --git a/topic0/css/img/04.jpg b/topic0/css/img/04.jpg new file mode 100644 index 00000000..916e5b68 Binary files /dev/null and b/topic0/css/img/04.jpg differ diff --git a/topic0/css/img/05.jpg b/topic0/css/img/05.jpg new file mode 100644 index 00000000..98333c4b Binary files /dev/null and b/topic0/css/img/05.jpg differ diff --git a/topic0/css/img/06.jpg b/topic0/css/img/06.jpg new file mode 100644 index 00000000..34888478 Binary files /dev/null and b/topic0/css/img/06.jpg differ diff --git a/topic0/css/index.html b/topic0/css/index.html new file mode 100644 index 00000000..59015eb3 --- /dev/null +++ b/topic0/css/index.html @@ -0,0 +1,65 @@ + + + + + + + + + + + + + + + + + + + + + + + +
+

header

+
+ + + +
+

section

+

header

+

article

+ +
+ + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/topic0/css/mockup.html b/topic0/css/mockup.html new file mode 100644 index 00000000..1cd8b841 --- /dev/null +++ b/topic0/css/mockup.html @@ -0,0 +1,96 @@ + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+

Showcase

+
+ +
+

Una mañana, tras un sueño intranquilo, Gregorio Samsa se despertó convertido en un monstruoso insecto. Estaba echado de espaldas sobre un duro caparazón y, al alzar la cabeza, vio su vientre convexo y oscuro, surcado por curvadas callosidades, sobre el que casi no se aguantaba la colcha, que estaba a punto de escurrirse hasta el suelo. Numerosas patas, penosamente delgadas en comparación con el grosor normal de sus piernas, se agitaban sin concierto. - ¿Qué me ha ocurrido? No estaba soñando. Su habitación, una habitación normal, aunque muy pequeña, tenía el aspecto habitual. Sobre la mesa había desparramado un muestrario de paños - Samsa era viajante de comercio-, y de la pared colgaba una estampa recientemente recortada de una revista ilustrada y puesta en un marco dorado. La estampa mostraba a una mujer tocada con un gorro de pieles, envuelta en una estola también de pieles, y que, muy erguida,

+
+
+
+ +
+
+
+ img01 +
+

Una mañana, tras un sueño intranquilo, Gregorio Samsa se despertó

+
+
+ +
+ img02 +
+

Una mañana, tras un sueño intranquilo, Gregorio Samsa se despertó

+
+
+ +
+ img03 +
+

Una mañana, tras un sueño intranquilo, Gregorio Samsa se despertó

+
+
+ +
+ img04 +
+

Una mañana, tras un sueño intranquilo, Gregorio Samsa se despertó

+
+
+ +
+ img05 +
+

Una mañana, tras un sueño intranquilo, Gregorio Samsa se despertó

+
+
+ +
+ img06 +
+

Una mañana, tras un sueño intranquilo, Gregorio Samsa se despertó

+
+
+
+
+ + + + + + + + + + + \ No newline at end of file diff --git a/topic0/html/audio/miraclecure.mp3 b/topic0/html/audio/miraclecure.mp3 new file mode 100644 index 00000000..a959272e Binary files /dev/null and b/topic0/html/audio/miraclecure.mp3 differ diff --git a/topic0/html/ejercicio1-1.html b/topic0/html/ejercicio1-1.html new file mode 100644 index 00000000..3cc963a7 --- /dev/null +++ b/topic0/html/ejercicio1-1.html @@ -0,0 +1,26 @@ + + + + + + Ejercicio1-1 + + + + + + + +

My todo list

+ + + + \ No newline at end of file diff --git a/topic0/html/ejercicio1-4.html b/topic0/html/ejercicio1-4.html new file mode 100644 index 00000000..b83cdedc --- /dev/null +++ b/topic0/html/ejercicio1-4.html @@ -0,0 +1,34 @@ + + + + + + Ejercicio1-4 + + + + + + + + + + + + + + + + + + + + + + + + +
DescripcionMonto
Telefono200
Luz100
Agua300
+ + + \ No newline at end of file diff --git a/topic0/html/ejercicio1-5.html b/topic0/html/ejercicio1-5.html new file mode 100644 index 00000000..e38ac530 --- /dev/null +++ b/topic0/html/ejercicio1-5.html @@ -0,0 +1,30 @@ + + + + + + Ejercicio1-5 + + + + + + + + beach + +
+ + + +
+
+ + + + + \ No newline at end of file diff --git a/topic0/html/ejercicio1-6.html b/topic0/html/ejercicio1-6.html new file mode 100644 index 00000000..5f4541dd --- /dev/null +++ b/topic0/html/ejercicio1-6.html @@ -0,0 +1,35 @@ + + + + Title + + + + + + Ejercicio1-6 + + + + + + + +
+ + + + + + + +
+ + + \ No newline at end of file diff --git a/topic0/html/img/beach.jpg b/topic0/html/img/beach.jpg new file mode 100644 index 00000000..415b91a8 Binary files /dev/null and b/topic0/html/img/beach.jpg differ diff --git a/topic0/html/video/video01.mp4 b/topic0/html/video/video01.mp4 new file mode 100644 index 00000000..36397a8a Binary files /dev/null and b/topic0/html/video/video01.mp4 differ