diff --git a/m1/examen-m1/index.html b/m1/examen-m1/index.html index e69de29..930e50e 100644 --- a/m1/examen-m1/index.html +++ b/m1/examen-m1/index.html @@ -0,0 +1,40 @@ + + + + + + + + Examen + + +
+

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..4f244dc --- /dev/null +++ b/m1/examen-m1/style.css @@ -0,0 +1,100 @@ +/*RESET Y PROPIEDADES GLOBALES*/ +* { + margin: 0; + padding: 0; +} + +body { + font-family: Arial, Helvetica, sans-serif; + font-size: 1rem; + color: whitesmoke; +} + +h1 { + font-size: 2.8rem; +} + +h2 { + font-size: 2.3rem; +} + +a { + text-decoration: none; + color: whitesmoke; +} + +li { + list-style-type: none; +} + +footer { + background-color: #333; + display: flex; + align-items: flex-end; + justify-content: center; + font-size: 0.8rem; +} + +/*LAYOUT*/ +header, footer { + width: 100%; + height: 220px; +} + +.my-header { + padding-top: 3rem; + text-align: center; + background-image: url("https://concepto.de/wp-content/uploads/2019/02/paisaje-natural-item-5.jpg"); + background-repeat: no-repeat; + background-size: cover; + filter: grayscale(100%); +} + +main { + min-height: 36vh; + margin: 2rem; + padding: 1.5rem; +} + +/*DETALLES*/ +nav ul { + display: flex; + justify-content: center; + padding-top: 5em; +} +nav li { + padding: 1rem; +} + +.flex-container { + display: flex; + flex-wrap: wrap; + align-content: center; + justify-content: space-between; + margin-left: 1em; + margin-right: 1em; +} + +.box { + display: flex; + justify-content: center; + align-items: center; + width: 400px; + height: 200px; + border-radius: 15px; +} + +.box:hover { + filter: drop-shadow(16px 16px 20px #333); + background-color: #333; + opacity: 0.1; + z-index: 0; +} + +h2:hover { + position: relative; + z-index: 1; + filter: drop-shadow(30px 10px 4px #333); +} + +/*# 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..6690d63 --- /dev/null +++ b/m1/examen-m1/style.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["style.scss"],"names":[],"mappings":"AAAA;AAEA;EAAI;EAAU;;;AAId;EACI;EACA;EACA,OALY;;;AAShB;EACI;;;AAIJ;EAAG;;;AAEH;EACI;EACA,OAlBY;;;AAsBhB;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAEJ;AAEA;EACI;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAKJ;AAIA;EACI;EACA;EACA;;AAIJ;EACI;;;AAKJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAKJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;;;AAKJ;EACI;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..05476b5 100644 --- a/m1/examen-m1/style.scss +++ b/m1/examen-m1/style.scss @@ -0,0 +1,115 @@ +/*RESET Y PROPIEDADES GLOBALES*/ + +*{ margin:0; padding:0; } + +$primary-color: whitesmoke; + +body{ + font-family: Arial, Helvetica, sans-serif; + font-size:1rem; + color: $primary-color; + +} + +h1{ + font-size: 2.8rem; + +} + +h2{font-size: 2.3rem; } + +a{ + text-decoration: none; + color: $primary-color; +} + + +li { + list-style-type: none; +} + +footer{ + background-color:#333; + display: flex; + align-items: flex-end; + justify-content: center; + font-size: 0.8rem; +} +/*LAYOUT*/ + +header,footer{ + width:100%; + height:220px; +} + +.my-header{ + padding-top:3rem; + text-align: center; + background-image:url('https://concepto.de/wp-content/uploads/2019/02/paisaje-natural-item-5.jpg'); + background-repeat: no-repeat; + background-size: cover; + filter: grayscale(100%); + } + +main{ + min-height: 36vh; + margin:2rem; + padding:1.5rem; + + } + + +/*DETALLES*/ + +nav{ + +ul{ + display: flex; + justify-content: center; + padding-top: 5em; + + +} +li { + padding:1rem; + +} +} + +.flex-container{ + display:flex; + flex-wrap: wrap; + align-content: center; + justify-content: space-between; + margin-left:1em; + margin-right:1em; + +} + + +.box{ + display: flex; + justify-content: center; + align-items: center; + width:400px; + height:200px; + border-radius: 15px; +} + + + .box:hover{ + filter: drop-shadow(16px 16px 20px #333); + background-color: #333; + opacity:0.1; + z-index: 0; + + + } + +h2:hover { + position: relative; + z-index: 1; + filter: drop-shadow(30px 10px 4px #333); + + +} \ No newline at end of file