cifo-training · fparrar · May 17, 2019 · May 17, 2019 · May 17, 2019
diff --git a/m1/examen-m1/assets/paisaje-natural-item-5.jpg b/m1/examen-m1/assets/paisaje-natural-item-5.jpg
diff --git a/m1/examen-m1/index.html b/m1/examen-m1/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="style.css">
+    <title>Document</title>
+</head>
+<body>
+    <header>
+        <h1 class="white-letter">Curs Mean-Stack 2019</h1>
+        <nav>
+            <ul class="list">
+                <li class="list-item white-letter"><a href="#">Inici    </a></li>
+                <li class="list-item white-letter"><a href="#">Calendari</a></li>
+                <li class="list-item white-letter"><a href="#">Persones </a></li>
+                <li class="list-item white-letter"><a href="#">Activitats</a></li>
+                <li class="list-item white-letter"><a href="#">Projectes</a></li>
+            </ul>
+        </nav>        
+    </header>   
+        <section id="alumnes">
+            <a id="prueba" href="#"><h2>alumnes</h2></a>
+        </section>
+        <section id="recursos">
+            <a href="#"><h2>recursos</h2></a>
+        </section>    
+    <footer>
+        <span>Copyright © mean-stack - html | css | javascript</span>
+    </footer>
+</body>
+</html>
diff --git a/m1/examen-m1/style.css b/m1/examen-m1/style.css
diff --git a/m1/examen-m1/style.css.map b/m1/examen-m1/style.css.map
diff --git 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;
+}