diff --git a/m1/examen-m1/index.html b/m1/examen-m1/index.html index e69de29..259af13 100644 --- a/m1/examen-m1/index.html +++ b/m1/examen-m1/index.html @@ -0,0 +1,37 @@ + + + + + + + + Prueba práctica + + +
+
+

Curs Mean-stack 2019

+ +
+
+
+

alumnes

+
+
+

recursos

+
+
+ +
+ + \ No newline at end of file diff --git a/m1/examen-m1/reset.scss b/m1/examen-m1/reset.scss new file mode 100644 index 0000000..1354a8d --- /dev/null +++ b/m1/examen-m1/reset.scss @@ -0,0 +1,5 @@ +body{ + margin: 0; + padding: 0; + font-family: Arial, Helvetica, sans-serif; +} \ 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..abb86d0 --- /dev/null +++ b/m1/examen-m1/style.css @@ -0,0 +1,104 @@ +body { + margin: 0; + padding: 0; + font-family: Arial, Helvetica, sans-serif; +} + +#grid { + display: grid; + height: 100vh; + grid-template-columns: 1fr; + grid-template-rows: 1fr 2fr 1fr; +} + +/*Header*/ +header { + display: flex; + flex-direction: column; + justify-content: center; + color: #fff; + background-image: url(https://concepto.de/wp-content/uploads/2019/02/paisaje-natural-item-5.jpg); + background-repeat: no-repeat; + background-position: center top; + background-size: cover; + filter: grayscale(100%); +} + +h1 { + text-align: center; + font-size: 3.5em; +} + +nav ul { + display: flex; + justify-content: center; +} + +nav ul li { + list-style: none; +} + +nav ul li a { + text-decoration: none; + padding: 5px 12px; + color: whitesmoke; +} + +nav ul li a:hover { + text-shadow: 2px 2px 20px #333; +} + +/*main*/ +main { + background-color: #fff; + display: grid; + grid-template-areas: "alumnes recursos"; + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr; + grid-gap: 1rem; + margin: 50px 0 0; +} + +.alumnes, .recursos { + display: grid; + width: 20rem; + height: 15rem; + margin: 0 auto; + color: whitesmoke; + border: 1px solid whitesmoke; + border-radius: 8px; +} + +.alumnes:hover, +.recursos:hover { + filter: drop-shadow(16px 16px 20px #333); + background-color: #000; + opacity: 0.1; +} + +.alumnes h2, +.recursos h2 { + font-size: 3em; + align-self: center; + text-align: center; + color: whitesmoke; +} + +.alumnes h2:hover { + filter: drop-shadow(16px 16px 20px #333); +} + +/*footer*/ +footer { + background-color: #333; + color: whitesmoke; + display: flex; + justify-content: center; +} + +footer p { + font-size: calc(75%); + align-self: 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..4793b4c --- /dev/null +++ b/m1/examen-m1/style.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["reset.scss","style.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;;;ACIJ;EACI;EACA;EACA;EACA;;;AAEJ;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI;;;AAEJ;EACI;EACA;EACA,OArCc;;;AAuClB;EACI;;;AAEJ;AACA;EACI,kBA3CS;EA4CT;EACA;EACA;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;EACA;EACA,OAzDc;EA0Dd;EACA;;;AAEJ;AAAA;EAEI;EACA;EACA;;;AAEJ;AAAA;EAEI;EACA;EACA;EACA,OAxEc;;;AA0ElB;EACI;;;AAEJ;AACA;EACI,kBAhFY;EAiFZ,OAhFc;EAiFd;EACA;;;AAEJ;EACI;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..f0fc117 100644 --- a/m1/examen-m1/style.scss +++ b/m1/examen-m1/style.scss @@ -0,0 +1,90 @@ +@import 'reset.scss'; +$primary-color: #333; +$secondary-color: whitesmoke; +$back-color: #fff; +$main-font: Arial, sans-serif; +$manin-font: 1em; + +#grid{ + display: grid; + height: 100vh; + grid-template-columns: 1fr; + grid-template-rows: 1fr 2fr 1fr; +} +/*Header*/ +header{ + display: flex; + flex-direction: column; + justify-content: center; + color: #fff; + background-image: url(https://concepto.de/wp-content/uploads/2019/02/paisaje-natural-item-5.jpg); + background-repeat: no-repeat; + background-position: center top; + background-size: cover; + filter: grayscale(100%); +} +h1{ + text-align: center; + font-size: 3.5em; +} +nav ul{ + display: flex; + justify-content: center; +} +nav ul li{ + list-style: none; +} +nav ul li a{ + text-decoration: none; + padding: 5px 12px; + color: $secondary-color; +} +nav ul li a:hover{ + text-shadow: 2px 2px 20px $primary-color; +} +/*main*/ +main{ + background-color: $back-color; + display: grid; + grid-template-areas: "alumnes recursos"; + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr; + grid-gap: 1rem; + margin: 50px 0 0; +} +.alumnes, .recursos{ + display: grid; + width: 20rem; + height: 15rem; + margin: 0 auto; + color: $secondary-color; + border: 1px solid $secondary-color; + border-radius: 8px; +} +.alumnes:hover, +.recursos:hover{ + filter: drop-shadow(16px 16px 20px #333); + background-color: #000; + opacity: 0.1; +} +.alumnes h2, +.recursos h2{ + font-size: 3em; + align-self: center; + text-align: center; + color: $secondary-color; +} +.alumnes h2:hover{ + filter: drop-shadow(16px 16px 20px #333); +} +/*footer*/ +footer{ + background-color: $primary-color; + color: $secondary-color; + display: flex; + justify-content: center; +} +footer p{ + font-size: calc(75%); + align-self: flex-end; +} \ No newline at end of file