add cards doctors and services

package-lock.json

@@ -2907,8 +2907,7 @@
             },
             "ansi-regex": {
               "version": "2.1.1",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "aproba": {
               "version": "1.2.0",
@@ -2926,13 +2925,11 @@
             },
             "balanced-match": {
               "version": "1.0.0",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "brace-expansion": {
               "version": "1.1.11",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "balanced-match": "^1.0.0",
                 "concat-map": "0.0.1"
@@ -2945,18 +2942,15 @@
             },
             "code-point-at": {
               "version": "1.1.0",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "concat-map": {
               "version": "0.0.1",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "console-control-strings": {
               "version": "1.1.0",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -3059,8 +3053,7 @@
             },
             "inherits": {
               "version": "2.0.3",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "ini": {
               "version": "1.3.5",
@@ -3070,7 +3063,6 @@
             "is-fullwidth-code-point": {
               "version": "1.0.0",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -3083,20 +3075,17 @@
             "minimatch": {
               "version": "3.0.4",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "brace-expansion": "^1.1.7"
               }
             },
             "minimist": {
               "version": "0.0.8",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "minipass": {
               "version": "2.3.5",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.2",
                 "yallist": "^3.0.0"
@@ -3113,7 +3102,6 @@
             "mkdirp": {
               "version": "0.5.1",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "minimist": "0.0.8"
               }
@@ -3186,8 +3174,7 @@
             },
             "number-is-nan": {
               "version": "1.0.1",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "object-assign": {
               "version": "4.1.1",
@@ -3197,7 +3184,6 @@
             "once": {
               "version": "1.4.0",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -3273,8 +3259,7 @@
             },
             "safe-buffer": {
               "version": "5.1.2",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "safer-buffer": {
               "version": "2.1.2",
@@ -3304,7 +3289,6 @@
             "string-width": {
               "version": "1.0.2",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",
@@ -3322,7 +3306,6 @@
             "strip-ansi": {
               "version": "3.0.1",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "ansi-regex": "^2.0.0"
               }
@@ -3361,13 +3344,11 @@
             },
             "wrappy": {
               "version": "1.0.2",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "yallist": {
               "version": "3.0.3",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             }
           }
         },
@@ -5792,6 +5773,11 @@
         "minimatch": "~3.0.2"
       }
     },
+    "google-maps-react": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/google-maps-react/-/google-maps-react-2.0.2.tgz",
+      "integrity": "sha512-6cYauGwt22haDUrWxKQ6yoNOqjiuxHo8YYcmb+aBvNICokdXmZOUB6Ah4vD5VexMVlrwP2PFqA/D8sHpEB52KA=="
+    },
     "graceful-fs": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.0.tgz",
@@ -6951,8 +6937,7 @@
             },
             "ansi-regex": {
               "version": "2.1.1",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "aproba": {
               "version": "1.2.0",
@@ -6976,7 +6961,6 @@
             "brace-expansion": {
               "version": "1.1.11",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "balanced-match": "^1.0.0",
                 "concat-map": "0.0.1"
@@ -6989,8 +6973,7 @@
             },
             "code-point-at": {
               "version": "1.1.0",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "concat-map": {
               "version": "0.0.1",
@@ -6999,8 +6982,7 @@
             },
             "console-control-strings": {
               "version": "1.1.0",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -7103,8 +7085,7 @@
             },
             "inherits": {
               "version": "2.0.3",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "ini": {
               "version": "1.3.5",
@@ -7114,7 +7095,6 @@
             "is-fullwidth-code-point": {
               "version": "1.0.0",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -7127,20 +7107,17 @@
             "minimatch": {
               "version": "3.0.4",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "brace-expansion": "^1.1.7"
               }
             },
             "minimist": {
               "version": "0.0.8",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "minipass": {
               "version": "2.3.5",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.2",
                 "yallist": "^3.0.0"
@@ -7157,7 +7134,6 @@
             "mkdirp": {
               "version": "0.5.1",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "minimist": "0.0.8"
               }
@@ -7230,8 +7206,7 @@
             },
             "number-is-nan": {
               "version": "1.0.1",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "object-assign": {
               "version": "4.1.1",
@@ -7241,7 +7216,6 @@
             "once": {
               "version": "1.4.0",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -7317,8 +7291,7 @@
             },
             "safe-buffer": {
               "version": "5.1.2",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "safer-buffer": {
               "version": "2.1.2",
@@ -7348,7 +7321,6 @@
             "string-width": {
               "version": "1.0.2",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",
@@ -7366,7 +7338,6 @@
             "strip-ansi": {
               "version": "3.0.1",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "ansi-regex": "^2.0.0"
               }
@@ -7405,13 +7376,11 @@
             },
             "wrappy": {
               "version": "1.0.2",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "yallist": {
               "version": "3.0.3",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             }
           }
         }
@@ -10661,6 +10630,14 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-5.1.6.tgz",
       "integrity": "sha512-X1Y+0jR47ImDVr54Ab6V9eGk0Hnu7fVWGeHQSOXHf/C2pF9c6uy3gef8QUeuUiWlNb0i08InPSE5a/KJzNzw1Q=="
     },
+    "react-history": {
+      "version": "0.18.2",
+      "resolved": "https://registry.npmjs.org/react-history/-/react-history-0.18.2.tgz",
+      "integrity": "sha1-tv6XB1Fgav4AOcGoKLqHZt6Vj2o=",
+      "requires": {
+        "history": "^4.5.0"
+      }
+    },
     "react-is": {
       "version": "16.8.6",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz",

package.json

@@ -4,9 +4,11 @@
   "private": true,
   "dependencies": {
     "axios": "^0.19.0",
+    "google-maps-react": "^2.0.2",
     "node-sass": "^4.12.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
+    "react-history": "^0.18.2",
     "react-redux": "^7.1.0",
     "react-router-dom": "^5.0.1",
     "react-scripts": "3.0.1",

src/App.js

@@ -1,23 +1,27 @@
 import React from 'react';
 import {connect} from 'react-redux'
 import {Switch, Route} from "react-router-dom";
+// import { BrowserHistory } from 'react-history'
 
 import {
     getDoctors,
     getServices,
 } from "./actions/actions";
 
+import Loader from "./components/loader"
 import Header from "./components/header/index"
-import Footer from "./components/Footer";
 import Main from "./components/main/Main";
 import Doctors from "./components/specialists/doctors";
-import Service from "./components/Service";
-import Appointment from "./components/Appointment";
+import MoreInfo from "./components/specialists/MoreInfo"
+// import Service from "./components/Service";
 import Services from "./components/Services"
+import Appointment from "./components/Appointment";
 import Auth from './containers/auth'
+import Footer from "./components/Footer";
 import Admin from './components/Admin/Admin'
 
 
+
 export class App extends React.Component {
 
     componentDidMount() {
@@ -64,16 +68,22 @@ export class App extends React.Component {
     render() {
         // console.log(this.props.app)
         return (
-            <>
+              <Loader flag={this.props.isFetching}>
                     <Header/>
                     <Switch>
                         <Route exact path="/" component={Main} />
                         <Route exact path="/doctors" render={() => <Doctors data={this.props.app.doctors} /> } />
+                        <Route exact path="/doctors/:doctor" render={(props) =>
+                            <MoreInfo
+                                his={props}
+                                data={this.props.app.doctors}
+                            />}
+                        />
                         <Route exact path="/services" render={() => <Services data={this.props.app.services} />} />
                         <Route exact path="/reviews" render={() => <div>Reviews</div>} />
                         <Route path="/admin/" component={Admin} />
                         <Route exact path="/services/:service" render={(props) =>
-                            <Service
+                            <MoreInfo
                                 his={props}
                                 data={this.props.app.services}
                             />}
@@ -82,7 +92,7 @@ export class App extends React.Component {
                         <Route exact path="/auth" component={Auth} />
                     </Switch>
                 <Footer/>
-             </>
+             </Loader>
         );
     }
 }

src/components/Appointment.js

@@ -55,7 +55,7 @@ export class Appoint extends React.Component {
                                 <p>{spec.name}</p>
                                 <p>Duration:{spec.duration}h</p>
                                 <p>{spec.description}</p>
-                                <p>Price:{spec.price}$</p>
+                                <p>Price: {spec.price} грн.</p>
                             </div>
                         }
                         <select  onChange={(e)=>setAppointmentSpec(e.target.value)} defaultValue='choose spec'>

src/components/Footer.js

@@ -3,7 +3,7 @@ import React from 'react';
 const Footer = () => {
     return (
         <footer className = "footer">
-           <div className="footer-part">
+           <div className="footer-part contacts">
                     <h4>Адрес</h4>
                     <p> г. Харьков</p>
                     <p>пр. Науки, 64</p>
@@ -11,7 +11,7 @@ const Footer = () => {
            <div className="footer-part logo-box">
                <img src="./images/logo.png" alt="logo"/>
                </div>
-           <div className="footer-part">
+           <div className="footer-part contacts">
               <h4> Контакты</h4>
               <p>+38 ( 096 ) 123 - 45 - 67</p>
               <p>+38 ( 050 ) 123 - 45 - 67</p>

src/components/main/reviews.js

@@ -8,15 +8,13 @@ import Button from "../buttons/button";
 
 export default class Reviews extends React.Component {
     render( ) {
-        const {postDoctors } = this.props
+        // 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/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/Services.js

@@ -15,7 +15,7 @@ export default class Services extends React.Component {
                             <p>{el.name}</p>
                             <p>Duration:{el.duration}h</p>
                             <p>{el.description}</p>
-                            <p>Price:{el.price}$</p>
+                            <p>Price:{el.price}грн.</p>
                             <div>
                                 <Link to={`/services/${el._id}`}>More Info</Link>
                                 <button>Make appointment</button>

src/components/header/navigation.js

@@ -14,8 +14,10 @@ const liArr = [
 ];
 
 export default ( props ) => (
-    <nav className=" nav">
-		<ul className=" list">
+	<nav className=" nav icon-dehaze" 
+		// onClick = { ( ) => { document.querySelector('.list').style.display = " block"    }  }
+	>
+		<ul className=" list ">
 			{liArr.map(el => (
 				<li className="item" key={el.id}> 
 					<Link to={el.path}>{el.text}</Link>  

src/components/main/Main.js

@@ -1,14 +1,9 @@
 import React from 'react';
-// import {Link} from 'react-router-dom';
-
-
-import {postDoctors, postServices} from "../../actions/actions";
 
 import Button from "../buttons/button";
 import About from "./aboutUs";
 import Team from "./team";
 // import MyMap from "./myMap";
-import Reviews from "./reviews";
 
 import {connect} from 'react-redux'
 
@@ -30,7 +25,8 @@ export class Main extends React.Component {
                         </div>
                 </div>
                  <div className="wrapper">
-                    <About/>
+                    <Team doctorsArr = {this.props.app.doctors}/>
+                  
                  </div>
                 <div className=" case">
                         <img className = "banner" src="./images/medical.jpeg" alt="medical"/>
@@ -39,13 +35,10 @@ export class Main extends React.Component {
                         </div>     
                  </div>
                  <div className="wrapper">
-                    <Team doctorsArr = {this.props.app.doctors}/>
+                 <About/>
                  </div>
                 <div className="case">
-                  {/* <MyMap /> */}
-                </div>
-                <div className="wrapper">
-                    <Reviews services = {this.props.app.doctors} postDoctors = {this.props.postDoctors}/>
+                    {/* <MyMap /> */}
                 </div>
             </main> 
         )
@@ -59,8 +52,8 @@ export class Main extends React.Component {
     };
     
     const mapDispatchToProps = {
-        postDoctors,
-        postServices
+        // postDoctors,
+        // postServices
     };
     
     export default connect (mapStateToProps,mapDispatchToProps)(Main)

src/components/main/myMap.js

@@ -1,6 +1,6 @@
 import React from "react"
 import { compose, withProps } from "recompose"
-import { withScriptjs, withGoogleMap, GoogleMap, Marker, InfoWindow } from "react-google-maps"
+import { withScriptjs, withGoogleMap, GoogleMap, Marker } from "react-google-maps"
 // import InfoBox from "react-google-maps/lib/components/addons/InfoBox";
 
 // const { InfoBox } = require("react-google-maps/lib/components/addons/InfoBox");

src/components/main/team.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import {Link} from 'react-router-dom';
+// import {Link} from 'react-router-dom';
 // import Button from "../buttons/button";
 
 
@@ -20,10 +20,10 @@ export default class Team extends React.Component {
                                 <p className="experience">Опыт работы {new Date().toISOString().split('T')[0].split('-')[0] - el.experience.split('T')[0].split('-')[0]} лет</p>
                                 <p className="rank">{el.profession}</p>
                             </div>
-                             <div className="link-box">
+                             {/* <div className="link-box">
                                 <Link to = "/doctors" className = "btn link more">Подробнее ...</Link>
                                 <Link to ={`/appointment/${el._id}`} className = "btn link ">Записаться на приём</Link>
-                            </div>
+                            </div> */}
                         </div>
                     )}
                  </div>

src/components/specialists/MoreInfo.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import {Link} from 'react-router-dom'
+
+export default class MoreInfo extends React.Component {
+
+
+    render() {
+        const {his,data} = this.props;
+        const doctor = data.find(el => el._id === his.match.params.doctor);
+        const service = data.find(el => el._id === his.match.params.service);
+
+        console.log (this.props, doctor)
+        return (
+            <>
+           {doctor && <div >
+               <h3>{doctor.name}</h3> 
+                <p>Duration:{doctor.profession}</p>
+                <p>{doctor.description}</p>
+                <p>Price:{doctor.experience}грн.</p>
+                <Link to={`/doctors/${doctor}`}>Make an appointment</Link>
+            </div>} 
+            {
+                service  &&             <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/specialists/doctors.js

@@ -7,9 +7,9 @@ export default class Doctors extends React.Component {
     render() {
         const {data} = this.props;
         return (
-            <div style={{margin:"100px 0"}}>
+            <div className="main">
                 <div className="wrapper">
-                    <div className = "team-container">
+                    <div className = "doctors-wrap">
                         {data.map(el => (
                             <div className="item"  key = {el._id} >
                                 <div className="photo"><img src= {el.photo} alt= {el.name}/></div>
@@ -19,13 +19,13 @@ export default class Doctors extends React.Component {
                                     <p className="rank">{el.profession}</p>
                                 </div>
                                 <div className="link-box">
-                                    <Link to = "/doctors" className = "btn link more">Подробнее ...</Link>
+                                    <Link to = {`/doctors/${el._id}`} className = "btn link more">Подробнее ...</Link>
                                     <Link to={`/appointment/${el._id}`} className = "btn link ">Записаться на приём</Link>
                                 </div>
                             </div>
                         ))}
                     </div>
-                </div>
+                </div>                
             </div>
         );
     }

src/index.js

@@ -10,6 +10,7 @@ import {Provider} from "react-redux";
 
 import "./style/normalize.css"
 import './style/all.scss'
+import "./style/style.css"
 import "./style/auth.scss"
 
 ReactDOM.render(

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%;
+		}
+	}
 	
 }
 
@@ -321,95 +350,10 @@ h2 {
 
 
 
+// _____DOCTORS_____ 
 
+.doctors-wrap {
+	margin-top: 120px;
+}
 
 
-
-
-
-
-
-
-
-// _____________________
-
-// footer {
-// 	background-color: $footer-color;
-// 	padding: 60px 25px;
-// 	color: $header-color;
-// 	.wrapper {
-// 		display: flex;
-// 		justify-content: space-between;
-// 		@media (max-width: 768px) {
-// 			flex-direction: column;	
-// 			align-items: center;
-// 			.logo-box {
-// 				display: none;
-// 			}
-// 		}
-// 		.contacts {
-// 			position: relative;
-// 		}
-// 	}
-// 	.nav {
-// 		font-family: 'PT Serif', serif;
-// 		margin-top: 25px;
-// 		font-size: 13px;
-// 		line-height: 21px;
-// 		letter-spacing: 0.075em;
-// 		@media (max-width: 768px) {
-// 			margin-top: 10px;	
-// 		}
-// 		.list {
-// 			list-style: none;
-// 			padding: 2px;
-// 			margin: 0;
-// 			display: flex;
-// 			flex-direction: column;
-// 			justify-content: space-between;
-// 			flex-wrap: wrap;
-// 			text-transform: uppercase;
-// 		}
-// 	}
-// 	.item {
-// 		padding: 0;
-// 		&:not(:last-child) {
-// 			// margin-right: 25px;
-// 			@media (max-width: 768px) {
-// 				// margin-right: 10px;	
-// 			}
-// 		}
-// 		a {
-// 			text-decoration: none;
-// 			color: $header-color;
-// 			&:hover {
-// 				color: $hover-color;
-// 			}
-// 		}
-// 	}
-// }
-
-// h5 {
-// 	font-size: 16px;
-// 	line-height: 24px;
-// 	font-weight: bold;
-// 	text-transform: uppercase;
-// // }
-// footer  {
-// 	.logo-box,
-// 	.footer-nav,
-// 	.contacts {
-// 		width: 25%;
-// 		@media (max-width: 768px) {
-// 			align-self: center;
-// 			width: 50%;
-// 		}
-// 	}
-// 	span {
-// 		color:  $header-color;
-// 		&:hover {
-// 			color: $hover-color;
-// 		}
-// 	}
-// }
-

src/style/style.css

@@ -1,10 +1,19 @@
+:root {
+  --header-color: #d4d5d7;;
+ --hover-color: #b1e8ca;
+	--opacity-color: rgba(17,17,17,0.8);
+}
+
+
+
+
 @font-face {
   font-family: 'icomoon';
-  src:  url('../assets/fonts/icomoon.eot?fc5bra');
-  src:  url('../assets/fonts/icomoon.eot?fc5bra#iefix') format('embedded-opentype'),
-    url('../assets/fonts/icomoon.ttf?fc5bra') format('truetype'),
-    url('../assets/fonts/icomoon.woff?fc5bra') format('woff'),
-    url('../assets/fonts/icomoon.svg?fc5bra#icomoon') format('svg');
+  src:  url('../assets/fonts/icomoon.eot?slshll');
+  src:  url('../assets/fonts/icomoon.eot?slshll#iefix') format('embedded-opentype'),
+    url('../assets/fonts/icomoon.ttf?slshll') format('truetype'),
+    url('../assets/fonts/icomoon.woff?slshll') format('woff'),
+    url('../assets/fonts/icomoon.svg?slshll#icomoon') format('svg');
   font-weight: normal;
   font-style: normal;
 }
@@ -12,7 +21,7 @@
 [class^="icon-"], [class*=" icon-"] {
   /* use !important to prevent issues with browser extensions that change fonts */
   font-family: 'icomoon' !important;
-  /* speak: none; */
+  speak: none;
   font-style: normal;
   font-weight: normal;
   font-variant: normal;
@@ -24,77 +33,64 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-
-.icon-angle-double-down:after {
-  content: "\f103";
-  font-size: 20px;
-  top: 100%;
-  right: 45%;
-  margin-top: 15px;
-  color: #fff;
+.icon-dehaze:before {
+  content: "\e903";
+  display: none;
+  color:  var(--header-color);
+  font-size: 35px;
+  position: relative;
+  top: 15%;
+ }
+ @media (max-width: 768px) {
+  .icon-dehaze:before  {
+      display: block;	
+  }
 }
-.icon-angle-double-down:hover:after {
-  color: #ff6633;
+.icon-chevron-right:before {
+  content: "\e900";
+}
+.icon-chevron-left:before {
+  content: "\e901";
+}
+.icon-th-menu:before {
+  content: "\e902";
 }
-
 .icon-calendar:before {
   content: "\f073";
-  top: 30%;
-  right: 20px;
-
 }
-.icon-tripadvisor:before {
-  content: "\f262";
-  left: 150px;
-  
-
+.icon-angle-double-down:before {
+  content: "\f103";
+}
+.icon-angle-left:before {
+  content: "\f104";
+}
+.icon-angle-right:before {
+  content: "\f105";
+}
+.icon-commenting-o:before {
+  content: "\f27b";
+}
+.icon-phone:before {
+  content: "\e942";
 }
 .icon-clock:before {
   content: "\e94e";
-
+}
+.icon-bubbles4:before {
+  content: "\e970";
 }
 .icon-user:before {
   content: "\e971";
 }
-.icon-users:before {
-  content: "\e972";
+.icon-menu:before {
+  content: "\e9bd";
+}
+.icon-exit:before {
+  content: "\ea14";
 }
 .icon-facebook:before {
   content: "\ea90";
-  left: 0;
 }
 .icon-instagram:before {
   content: "\ea92";
-  left: 100px;
-}
-.icon-twitter:before {
-  content: "\ea96";
-  left: 50px;
 }
-
-
-
-.icon-angle-double-down:after,
-.icon-user:before,
-.icon-calendar:before,
-.icon-clock:before,
-.icon-users:before, 
-.icon-tripadvisor:before,
-.icon-facebook:before,
-.icon-instagram:before,
-.icon-twitter:before {
-    position: absolute;
-}
-
-.icon-calendar:before,
-.icon-clock:before {
-    color: #222222;
-    font-size: 12px;
-    font-weight: bold;
-    width: 20px;
-    height: 20px;
-    top: 2px;
-    left: 0;
-}
-
-