diff --git a/m1/examen-m1/assets/paisaje-natural-item-5.jpg b/m1/examen-m1/assets/paisaje-natural-item-5.jpg
new file mode 100644
index 0000000..9222e46
Binary files /dev/null and b/m1/examen-m1/assets/paisaje-natural-item-5.jpg differ
diff --git a/m1/examen-m1/index.html b/m1/examen-m1/index.html
index e69de29..73ba1d8 100644
--- a/m1/examen-m1/index.html
+++ b/m1/examen-m1/index.html
@@ -0,0 +1,33 @@
+
+
+
+
+
+
+
+ Document
+
+
+
+ Curs Mean-Stack 2019
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/m1/examen-m1/style.css b/m1/examen-m1/style.css
new file mode 100644
index 0000000..1c748f1
--- /dev/null
+++ b/m1/examen-m1/style.css
@@ -0,0 +1,118 @@
+/* Reset */
+* {
+ margin: 0px;
+ box-sizing: border-box;
+ list-style: none;
+ text-decoration: none;
+ font-family: Arial, Helvetica, sans-serif;
+ color: whitesmoke;
+}
+
+/* Layout */
+body {
+ display: grid;
+ width: 100vw;
+ height: 100vh;
+ grid-template-areas: "cabecera cabecera cabecera" "alumnes . recursos" "pie pie pie";
+ grid-template-columns: 1fr 0.8fr 1fr;
+ grid-template-rows: 1fr 2fr 0.8fr;
+ grid-gap: 20px;
+ padding: 0px 20px;
+ overflow: hidden;
+}
+
+header {
+ grid-area: cabecera;
+ background: url("./assets/paisaje-natural-item-5.jpg") no-repeat;
+ background-size: 100%;
+ margin: 0px -20px;
+ filter: grayscale(100%);
+}
+
+#recursos {
+ grid-area: recursos;
+}
+
+#alumnes {
+ grid-area: alumnes;
+}
+
+footer {
+ grid-area: pie;
+}
+
+/* detalles */
+header {
+ display: flex;
+ align-items: center;
+ justify-content: space-evenly;
+ flex-direction: column;
+}
+
+ul {
+ display: flex;
+ flex-direction: row;
+}
+
+li {
+ margin: 0px 5px;
+}
+li a {
+ color: whitesmoke;
+ padding: 5px;
+}
+
+li a:hover {
+ background-color: #333;
+ opacity: 0.6;
+}
+
+h1 {
+ font-size: 4em;
+}
+
+h2 {
+ font-size: 3em;
+}
+
+section {
+ border: 1px solid whitesmoke;
+ height: 90%;
+ border-radius: 5px;
+}
+
+section:hover {
+ background-color: black;
+ opacity: 0.1;
+ color: white;
+ filter: drop-shadow(16px 16px 20px #333);
+}
+
+section:hover h2 {
+ filter: drop-shadow(16px 16px 20px #333);
+ display: absolute;
+}
+
+section a {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+footer {
+ display: flex;
+ background-color: #333;
+ justify-content: center;
+ align-items: end;
+ color: white;
+ font-size: 0.8rem;
+}
+
+span {
+ align-self: flex-end;/* Por algún motivo, align-items en el padre (footer) sí funciona en firefox, pero no en chrome) */
+ font-size: 0.8rem; /*idem con font-size en medida rem, en chrome*/
+}
+
+/*# sourceMappingURL=style.css.map */
diff --git a/m1/examen-m1/style.css.map b/m1/examen-m1/style.css.map
new file mode 100644
index 0000000..5de4d61
--- /dev/null
+++ b/m1/examen-m1/style.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["style.scss"],"names":[],"mappings":"AAAA;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;;AAGJ;AAEA;EACI;EACA;EACA;EAEA;EAGA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;EACI;;;AAGJ;AAEA;EACI;EACA;EACA;EACA;;;AAKJ;EACI;EACA;;;AAGJ;EACI;;AACA;EACI;EACA;;;AAKR;EACI;EACA;;;AAGJ;EACI;;;AAGJ;EACI;;;AAIJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAUJ;EACI;EACA;;;AAIJ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA","file":"style.css"}
\ No newline at end of file
diff --git a/m1/examen-m1/style.scss b/m1/examen-m1/style.scss
index e69de29..b6c1a52 100644
--- a/m1/examen-m1/style.scss
+++ b/m1/examen-m1/style.scss
@@ -0,0 +1,128 @@
+/* Reset */
+
+* {
+ margin:0px;
+ box-sizing: border-box;
+ list-style: none;
+ text-decoration: none;
+ font-family: Arial, Helvetica, sans-serif;
+ color: whitesmoke;
+}
+
+/* Layout */
+
+body {
+ display: grid;
+ width: 100vw;
+ height: 100vh;
+
+ grid-template-areas: "cabecera cabecera cabecera"
+ "alumnes . recursos"
+ "pie pie pie";
+ grid-template-columns: 1fr 0.8fr 1fr;
+ grid-template-rows: 1fr 2fr 0.8fr;
+ grid-gap: 20px;
+ padding: 0px 20px;
+
+}
+header {
+ grid-area: cabecera;
+ background: url("./assets/paisaje-natural-item-5.jpg") no-repeat;
+ background-size: 100%;
+ margin: 0px -20px;
+ filter: grayscale(100%);
+}
+
+#recursos {
+ grid-area: recursos;
+}
+
+#alumnes {
+ grid-area: alumnes;
+}
+
+footer {
+ grid-area: pie;
+}
+
+/* detalles */
+
+header{
+ display: flex;
+ align-items: center;
+ justify-content: space-evenly;
+ flex-direction: column;
+}
+
+//Menu
+
+ul {
+ display: flex;
+ flex-direction: row;
+}
+
+li {
+ margin: 0px 5px;
+ a{
+ color: whitesmoke;
+ padding: 5px;
+ }
+
+}
+
+li a:hover {
+ background-color:#333;
+ opacity: 0.6;
+}
+
+h1 {
+ font-size: 4em;
+}
+
+h2 {
+ font-size: 3em;
+}
+
+
+section {
+ border: 1px solid whitesmoke;
+ height: 90%;
+ border-radius: 5px;
+}
+
+section:hover{
+ background-color: black;
+ opacity: .1;
+ color: white;
+ filter: drop-shadow(16px 16px 20px #333);
+}
+
+// h2:before{
+// content: "recursos";
+// filter: drop-shadow(16px 16px 20px #333);
+// display:none;
+// }
+
+
+section:hover h2{
+ filter: drop-shadow(16px 16px 20px #333);
+ display: absolute;
+}
+
+
+section a {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+footer {
+ display: flex;
+ background-color: #333;
+ justify-content: center;
+ align-items: end;
+ color: white;
+ font-size: .8em;
+}
\ No newline at end of file