hover courses

blackrock/src/app/pages/courses/courses.component.html

@@ -2,21 +2,21 @@
 <h1>¡Estos son los cursos recomendados para ti!</h1>
 <div class='content'>
     <div class='card' *ngFor="let course of CourseLevel1">
-        <mat-card class="course-card">
+        <mat-card class="course-card" (click)="openDialog()">
             <div class="maininfo">
                 <img mat-card-image src='{{course.image}}' alt="courseimage">
                 <mat-card-title>{{course.name}}</mat-card-title>
                 <mat-card-subtitle>{{course.topic}}</mat-card-subtitle>
             </div>
-            <div class='hover-info'>         
+            <div class='hover-info'>
             <mat-card-content>
                 <p>{{course.description}}</p>
             </mat-card-content>
             <mat-card-actions>
                 <button mat-button> Comenzar </button>
                 <button mat-button> Compartir </button>
             </mat-card-actions>
-            </div>   
+            </div>
         </mat-card>
     </div>
 </div>

blackrock/src/app/pages/courses/courses.component.scss

@@ -1,40 +1,47 @@
-@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap");
 
-.course-card{
- font-family: "Noto Sans", sans-serif;
- width: 100%;
- box-shadow : 0 5px 20px rgba(0,0,0,0.5);
-  button{
+.course-card {
+  font-family: "Noto Sans", sans-serif;
+  width: 100%;
+  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
+  button {
     background-color: black;
     color: white;
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 12px;
-    margin-left: 3px;    
+    margin-left: 3px;
   }
   .mat-card-actions {
     display: flex;
     justify-content: space-around;
-}
+  }
 }
 
-.content{
-    display:flex;
+.content {
+  display: flex;
 }
-.card{
-    margin: 2em;
-    display:flex;
-
+.card {
+  margin: 2em;
+  display: flex;
+  &:nth-child(n + 2) {
+    -webkit-filter: grayscale(100%);
+    filter: grayscale(100%);
+  }
+  &:hover {
+    -webkit-filter: grayscale(0%);
+    filter: grayscale(0%);
+  }
 }
-h1{
-    margin: 1em 0 0 1em;
-    font-family: "Noto Sans", sans-serif;
+h1 {
+  margin: 1em 0 0 1em;
+  font-family: "Noto Sans", sans-serif;
 }
-footer{
-    margin: 0%;
-    width: 100%;
-    height: 50px;
-    background-color: #FECE00;
-    margin-top: 5.4rem;
+footer {
+  margin: 0%;
+  width: 100%;
+  height: 50px;
+  background-color: #fece00;
+  margin-top: 5.4rem;
 }

blackrock/src/app/pages/results/results.component.html

@@ -18,7 +18,7 @@ <h3 (click)="openDialog()">Registrate para comenzar a aprender</h3>
 		</div>
 	</section>
 	<section class="img">
-		<img src="../../../assets/obi-results.png" alt="guerrero">
+		<img id=levelimg  alt="guerrero">
 	</section>
 </div>
 <div class="white-div"></div>

blackrock/src/app/pages/results/results.component.ts

@@ -16,6 +16,22 @@ level: any
   ngOnInit(){
     this.userName= sessionStorage.getItem('Nombre')
 		this.level = sessionStorage.getItem("level")
+		const img = document.querySelector("#levelimg") as Element;
+		if(this.level === "Iniciado Jedi"){
+			img.setAttribute("src", "../../../assets/yoda_1.jpg");
+		}
+		if(this.level === "Padawan Jedi"){
+			img.setAttribute("src", "../../../assets/padawan_2.png")
+		}
+		if(this.level === "Caballero Jedi"){
+	img.setAttribute("src", "../../../assets/obi-results.png")
+}
+if(this.level === "Maestro Jedi"){
+	img.setAttribute("src", "../../../assets/mace_windu_4.jpg")
+}
+if(this.level === "Maestro Yoda"){
+	img.setAttribute("src", "../../../assets/yoda_5.jpg")
+}
   }
   openDialog() {
     const dialogRef = this.dialog.open(RegisterComponent);