diff --git a/m1/examen-m1/index.html b/m1/examen-m1/index.html
index e69de29..f165242 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/paisaje-natural-item-5.jpg b/m1/examen-m1/paisaje-natural-item-5.jpg
new file mode 100644
index 0000000..9222e46
Binary files /dev/null and b/m1/examen-m1/paisaje-natural-item-5.jpg differ
diff --git a/m1/examen-m1/style.css b/m1/examen-m1/style.css
new file mode 100644
index 0000000..11b3f84
--- /dev/null
+++ b/m1/examen-m1/style.css
@@ -0,0 +1,83 @@
+body {
+ margin: 0;
+ padding: 0;
+ font-family: Helvetica, Arial, sans-serif;
+ display: flex;
+ flex-direction: column;
+}
+body header {
+ background-image: url("./paisaje-natural-item-5.jpg");
+ background-attachment: fixed;
+ background-repeat: no-repeat;
+ background-size: 100%, auto, cover;
+ filter: grayscale(100%);
+}
+body header h1 {
+ color: whitesmoke;
+ text-align: center;
+ margin: 0;
+}
+body header Nav {
+ height: 35px;
+ font-size: 0.65rem;
+}
+body header ul.Nav {
+ list-style-type: none;
+ display: flex;
+ justify-content: center;
+}
+body header li > a.Nav {
+ text-decoration: none;
+ margin: 0px 3px;
+ color: whitesmoke;
+ cursor: pointer;
+ font-weight: bold;
+}
+body main {
+ height: 200px;
+ display: flex;
+ flex-direction: line;
+ justify-content: space-between;
+ align-items: flex-start;
+}
+body main div {
+ background-color: white;
+ border: 1px solid whitesmoke;
+ border-radius: 5%;
+ margin: 10px;
+ padding-top: 40px;
+ padding-bottom: 70px;
+ padding-right: 50px;
+ padding-left: 50px;
+ color: whitesmoke;
+ font-size: 1.5rem;
+ font-weight: bold;
+}
+body main div a {
+ text-decoration: none;
+ color: whitesmoke;
+ cursor: pointer;
+ margin: 0;
+}
+body main div:hover {
+ text-decoration: none;
+ background-color: whitesmoke;
+ color: white;
+}
+body main div:hover a {
+ filter: drop-shadow(16px 16px 20px #333);
+ color: white;
+}
+body footer {
+ height: 100px;
+ background-color: #333;
+ color: whitesmoke;
+ font-size: 0.5rem;
+ text-align: center;
+ display: flex;
+ flex-direction: line;
+ justify-content: center;
+ align-items: flex-end;
+}
+
+/*# 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..5979541
--- /dev/null
+++ b/m1/examen-m1/style.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["style.scss"],"names":[],"mappings":"AAKA;EACI;EACA;EACA,aALQ;EAMR;EACA;;AAEA;EAEI;EACA;EACA;EACA;EACA;;AAEA;EACI,OAnBG;EAoBH;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA,OAtCG;EAuCH;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OA3DG;EA4DH;EACA;;AAEA;EACI;EACA,OAjED;EAkEC;EACA;;AAIR;EACI;EACA,kBAzEG;EA0EH;;AACA;EACI;EACA;;AAKZ;EACI;EACA,kBArFM;EAsFN,OArFO;EAsFP;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..0e3465e 100644
--- a/m1/examen-m1/style.scss
+++ b/m1/examen-m1/style.scss
@@ -0,0 +1,98 @@
+// Reset y propiedades globales
+$negroDiseny: #333;
+$blancoDiseny: whitesmoke;
+$tipoLetra: Helvetica, Arial, sans-serif;
+
+body {
+ margin: 0;
+ padding: 0;
+ font-family: $tipoLetra;
+ display: flex;
+ flex-direction: column;
+
+ header {
+
+ background-image: url('./paisaje-natural-item-5.jpg');
+ background-attachment: fixed;
+ background-repeat: no-repeat;
+ background-size: 100%, auto,cover;
+ filter: grayscale(100%);
+
+ h1 {
+ color: $blancoDiseny;
+ text-align: center;
+ margin:0;
+ }
+
+ Nav {
+ height: 35px;
+ font-size: 0.65rem;
+ }
+
+ ul.Nav {
+ list-style-type: none;
+ display: flex;
+ justify-content: center;
+ }
+
+ li > a.Nav {
+ text-decoration: none;
+ margin: 0px 3px;
+ color: $blancoDiseny;
+ cursor: pointer;
+ font-weight: bold;
+ }
+ }
+
+ main {
+ height: 200px;
+ display: flex;
+ flex-direction: line;
+ justify-content: space-between;
+ align-items: flex-start;
+ div {
+ background-color:white;
+ border: 1px solid $blancoDiseny;
+ border-radius: 5%;
+ margin: 10px;
+ padding-top: 40px;
+ padding-bottom: 70px;
+ padding-right: 50px;
+ padding-left: 50px;
+ color: $blancoDiseny;
+ font-size: 1.5rem;
+ font-weight: bold;
+
+ a {
+ text-decoration: none;
+ color: $blancoDiseny;
+ cursor: pointer;
+ margin:0;
+ }
+ }
+
+ div:hover {
+ text-decoration: none;
+ background-color:$blancoDiseny;
+ color: white;
+ a {
+ filter: drop-shadow(16px 16px 20px #333);
+ color: white;
+ }
+ }
+ }
+
+ footer {
+ height: 100px;
+ background-color:$negroDiseny;
+ color: $blancoDiseny;
+ font-size: 0.50rem;
+ text-align: center;
+ display:flex;
+ flex-direction: line;
+ justify-content: center;
+ align-items: flex-end;
+ }
+}
+
+