add cards doctors and services

src/components/Service.js

@@ -1,21 +0,0 @@
-import React from 'react';
-import {Link} from "react-router-dom";
-
-
-export default class Service extends React.Component {
-
-
-    render() {
-        const {his,data} = this.props;
-        const service = data.find(el => el._id === his.match.params.service);
-        return (
-            <div style={{display:'flex',flexDirection:'column', width:'200px', margin:'100px 20px'}}>
-                {service.name}
-                <p>Duration:{service.duration}h</p>
-                <p>{service.description}</p>
-                <p>Price:{service.price}$</p>
-                <Link to={`/appointment/${service}`}>Make an appointment</Link>
-            </div>
-        );
-    }
-}

src/components/main/reviews.js

@@ -1,24 +0,0 @@
-import React from 'react';
-// import {Link} from 'react-router-dom';
-import Button from "../buttons/button";
-// import { postServices} from "../../store/app/actions";
-
-
-
-
-export default class Reviews extends React.Component {
-    render( ) {
-        const {postDoctors } = this.props
-        
-        return (
-            <>
-                <h2>Отзывы</h2>
-                <div classdescription = "reviews-container">
-                    <Button className = "btn" text = "POST to doctors"
-                        // onClick = { ( ) => {   doctors.map ( el => postDoctors ( el ) )  }  }
-                    />
-                 </div>
-            </>
-        ) 
-    }
-}        

src/style/all.scss

@@ -64,6 +64,9 @@ body {
 		justify-content: space-between;
 		flex-wrap: wrap;
 		text-transform: uppercase;
+		@media (max-width: 768px) {
+			display: none;	
+		}
 	}
 	& .item {
 		padding: 0;
@@ -164,13 +167,14 @@ body {
 	}
 	@media (max-width: 768px) {
 		width: 100%;
-		margin: 25px auto;	
+		margin: 20px 0px;	
 	}
 }
 
 //  section About Us
 .aboutsection, 
 .team-container,
+.doctors-wrap,
 h2  {
 	background-color: $opacity-color;
 	box-shadow: 0px 0px 15px 15px  $opacity-color;
@@ -221,6 +225,7 @@ h2 {
 			margin: 20px 10px;
 			@media (max-width: 768px) {
 				width: 100%;
+				margin: 20px 0px;
 			}
 		}
 		@media (max-width: 768px) {
@@ -230,15 +235,19 @@ h2 {
 }
 
 // shortly about doctors 
-.team-container {
+.team-container,
+.doctors-wrap {
 	color: $header-color;
 	display: flex;
 	flex-wrap: wrap;
 	justify-content: space-around;
+	align-items: stretch;
 	padding: 15px 5px 50px;
-
+	@media (max-width: 768px) {
+		justify-content: center;
+	}
 	.item {
-		width: 27%;
+		width: 25%;
 		margin: 10px; 
 		text-align: center;
 		display: flex;
@@ -246,13 +255,18 @@ h2 {
 		border-radius: 5px;
 		box-shadow: 0px 2px 8px 1px $main-color;
 		.photo {
-			overflow: hidden;
-			height: 45%;
 			border-radius: 5px;
 			img {
 				border-radius: 5px;
+				width: 100%;
 			}
 		}
+		h3 {
+			margin: 10px;
+		}
+		p {
+			margin: 5px;
+		}
 		.link-box {
 			margin-top: 20px;
 		}
@@ -283,11 +297,16 @@ h2 {
 	background-image: url(../assets/images/bg2.jpg);
 	background-size: cover;
 	background-repeat: no-repeat;
-	padding: 60px 25px;
+	justify-content: space-between;
+	padding: 0px 0px;
 	color: $opacity-color;
 	font-size: 1.3em;
+	@media (max-width: 768px) {
+		justify-content: center;
+	}
 	.logo-box {
 		margin-right: 50px;
+		padding-top: 15px;
 		@media (max-width: 768px) {
 			margin-right: 0;	
 		}
@@ -295,9 +314,19 @@ h2 {
 	.logo-box  img {
 		width: 300px;
 		@media (max-width: 768px) {
-			width: 200px;	
+			width: 250px;	
 		}
 	}	
+	.contacts {
+		background-color: $opacity-color;
+		color: $header-color;
+		padding: 20px 15px;
+		min-width: 30%;
+		text-align: center;
+		@media (max-width: 768px) {
+			width: 100%;
+		}
+	}
 	
 }
 
@@ -320,3 +349,11 @@ h2 {
 
 
 
+
+// _____DOCTORS_____ 
+
+.doctors-wrap {
+	margin-top: 120px;
+}
+
+