doctors card

src/components/header/index.js

@@ -1,5 +1,4 @@
 import React from "react";
-// import Scrollchor from 'react-scrollchor';
 import {Link}  from "react-router-dom"
 import logo from "../../assets/images/logo.png";
 import Navigation from "./navigation"

src/components/header/navigation.js

@@ -1,5 +1,4 @@
 import React, {Component} from "react";
-// import Scrollchor from 'react-scrollchor';
 import { Link, withRouter } from "react-router-dom";
 import { connect } from "react-redux";
 

src/components/specialists/Doctors.js

@@ -13,10 +13,12 @@ export class Doctors extends React.Component {
                             data.map(el => (
                                 <div className="item"  key = {el._id} >
                                     <div className="photo">
-                                        <img src= {el.photo} alt= {el.name}/>
-                                        <div className="hover-block">
-                                            <Link to = {`/doctors/${el._id}`} className = "btn link more">Подробнее ...</Link>
-                                        </div>
+                                        <Link to = {`/doctors/${el._id}`} >
+                                            <img src= {el.photo} alt= {el.name}/>
+                                            <div className="hover-block">
+                                                <div className = "btn link more">Подробнее ... </div>
+                                            </div>
+                                        </Link>
                                     </div>
                                     
                                     <div className="desc">

src/style/all.scss

@@ -445,73 +445,6 @@ h2 {
 	}
 }
 
-// .doctors-wrap {
-// 	.item {
-// 		.photo {
-// 			height: 30vh;
-// 		}
-// 		.desc {
-// 			background-color: $opacity-color;
-// 		}
-// 	}
-// }
-
-//  ______Footer______
-.footer {
-	font-family: 'Montserrat', sans-serif;
-	position: static;
-	background-image: url(../assets/images/bg2.jpg);
-	background-size: cover;
-	background-repeat: no-repeat;
-	justify-content: space-between;
-	padding: 0px 0px;
-	color: $opacity-color;
-	font-size: 1.3em;
-	@media (max-width: 768px) {
-		justify-content: center;
-	}
-	h4 {
-		font-family: 'Montserrat', sans-serif;
-		font-weight: 700;
-		font-size: 1.3em;
-		margin: 5px;
-	}
-	.logo-box {
-		margin-right: 0px;
-		padding-top: 15px;
-		@media (max-width: 768px) {
-			margin-right: 0;
-			order: -1;	
-		}
-	}
-	.logo-box  img {
-		width: 300px;
-		@media (max-width: 768px) {
-			width: 250px;	
-		}
-		@media (max-width: 414px) {
-			width: 200px;	
-		}
-		@media (max-width: 375px) {
-			width: 150px;	
-		}
-	}	
-	.contacts {
-		background-color: $opacity-color;
-		color: $header-color;
-		padding: 20px 15px;
-		min-width: 30%;
-		text-align: center;
-		font-size: 1em;
-		@media (max-width: 768px) {
-			width: 100%;
-		}
-		@media (max-width: 768px) {
-			font-size: 0.7em;
-		}
-	}
-	
-}
 
 
 
@@ -527,6 +460,7 @@ h2 {
 		
 		.photo {
 			position: relative;
+			line-height: 0;
 			.hover-block {
 				display: none;
 				height: 100%;
@@ -537,7 +471,10 @@ h2 {
 				left: 0;
 			}
 			&:hover .hover-block {
-				display: block;
+				display: flex;
+				flex-direction: column;
+				align-items: bottom;
+				justify-content: flex-end;
 			}
 		}
 
@@ -595,6 +532,7 @@ h2 {
 }
 
 
+
 // _____ APPOINTMENT _________
 
 .appointment {
@@ -653,6 +591,63 @@ h2 {
 
 
 
+//  ______Footer______
+.footer {
+	font-family: 'Montserrat', sans-serif;
+	position: static;
+	background-image: url(../assets/images/bg2.jpg);
+	background-size: cover;
+	background-repeat: no-repeat;
+	justify-content: space-between;
+	padding: 0px 0px;
+	color: $opacity-color;
+	font-size: 1.3em;
+	@media (max-width: 768px) {
+		justify-content: center;
+	}
+	h4 {
+		font-family: 'Montserrat', sans-serif;
+		font-weight: 700;
+		font-size: 1.3em;
+		margin: 5px;
+	}
+	.logo-box {
+		margin-right: 0px;
+		padding-top: 15px;
+		@media (max-width: 768px) {
+			margin-right: 0;
+			order: -1;	
+		}
+	}
+	.logo-box  img {
+		width: 300px;
+		@media (max-width: 768px) {
+			width: 250px;	
+		}
+		@media (max-width: 414px) {
+			width: 200px;	
+		}
+		@media (max-width: 375px) {
+			width: 150px;	
+		}
+	}	
+	.contacts {
+		background-color: $opacity-color;
+		color: $header-color;
+		padding: 20px 15px;
+		min-width: 30%;
+		text-align: center;
+		font-size: 1em;
+		@media (max-width: 768px) {
+			width: 100%;
+		}
+		@media (max-width: 768px) {
+			font-size: 0.7em;
+		}
+	}
+	
+}
+
 
 
 

src/style/style.css

@@ -21,7 +21,6 @@
 [class^="icon-"], [class*=" icon-"] {
   /* use !important to prevent issues with browser extensions that change fonts */
   font-family: 'icomoon' !important;
-  speak: none;
   font-style: normal;
   font-weight: normal;
   font-variant: normal;
@@ -117,7 +116,7 @@
 }
 .icon-exit:before {
   content: "\ea14";
-  color:  var(--opacity-color);
+  color:  var(--hover-color);
   font-size: 1.6em;
 }
 .icon-location:before {