5 anos atrás · 835e052b91
--- a/public/images/doctors/alison.jpg
+++ b/public/images/doctors/alison.jpg
--- a/public/images/doctors/ericforman.jpg
+++ b/public/images/doctors/ericforman.jpg
--- a/public/images/doctors/gregoryhaus.jpg
+++ b/public/images/doctors/gregoryhaus.jpg
--- a/public/images/doctors/kris_taub.jpg
+++ b/public/images/doctors/kris_taub.jpg
--- a/public/images/doctors/lisa.jpg
+++ b/public/images/doctors/lisa.jpg
--- a/public/images/doctors/lorenskatner.jpg
+++ b/public/images/doctors/lorenskatner.jpg
--- a/public/images/doctors/robert.jpg
+++ b/public/images/doctors/robert.jpg
--- a/public/images/favicon.png
+++ b/public/images/favicon.png
--- a/public/images/fon1.jpg
+++ b/public/images/fon1.jpg
--- a/public/images/fon2.jpg
+++ b/public/images/fon2.jpg
--- a/public/images/fon4.jpg
+++ b/public/images/fon4.jpg
--- a/public/images/fon7.jpg
+++ b/public/images/fon7.jpg
--- a/public/images/logo.png
+++ b/public/images/logo.png
--- a/public/images/medical.jpeg
+++ b/public/images/medical.jpeg
--- a/public/index.html
+++ b/public/index.html
@@ -0,0 +1,43 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="ru">
			
 
				+  <head>
			
 
				+    <meta charset="utf-8" />
			
 
				+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1" />
			
 
				+    <meta  name="viewport"   content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no" />
			
 
				+   
			
 
				+    <meta name="theme-color" content="#000000" />
			
 
				+    <!--
			
 
				+      manifest.json provides metadata used when your web app is installed on a
			
 
				+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
			
 
				+    -->
			
 
				+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
			
 
				+    <link rel="shortcut icon" href="./images/favicon.png" />
			
 
				+    <link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i&display=swap" rel="stylesheet">
			
 
				+    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700&display=swap" rel="stylesheet">
			
 
				+    <!--
			
 
				+      Notice the use of %PUBLIC_URL% in the tags above.
			
 
				+      It will be replaced with the URL of the `public` folder during the build.
			
 
				+      Only files inside the `public` folder can be referenced from the HTML.
			
 
				+
			
 
				+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
			
 
				+      work correctly both with client-side routing and a non-root public URL.
			
 
				+      Learn how to configure a non-root public URL by running `npm run build`.
			
 
				+    -->
			
 
				+    <title>Royal Dental</title>
			
 
				+  </head>
			
 
				+  <body>
			
 
				+    <noscript>You need to enable JavaScript to run this app.</noscript>
			
 
				+    <div id="root"></div>
			
 
				+    <!--
			
 
				+      This HTML file is a template.
			
 
				+      If you open it directly in the browser, you will see an empty page.
			
 
				+
			
 
				+      You can add webfonts, meta tags, or analytics to this file.
			
 
				+      The build step will place the bundled scripts into the <body> tag.
			
 
				+
			
 
				+      To begin the development, run `npm start` or `yarn start`.
			
 
				+      To create a production bundle, use `npm run build` or `yarn build`.
			
 
				+    -->
			
 
				+  </body>
			
 
				+</html>
			
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -0,0 +1,15 @@
 
				+{
			
 
				+  "short_name": "React App",
			
 
				+  "name": "Create React App Sample",
			
 
				+  "icons": [
			
 
				+    {
			
 
				+      "src": "favicon.ico",
			
 
				+      "sizes": "64x64 32x32 24x24 16x16",
			
 
				+      "type": "image/x-icon"
			
 
				+    }
			
 
				+  ],
			
 
				+  "start_url": ".",
			
 
				+  "display": "standalone",
			
 
				+  "theme_color": "#000000",
			
 
				+  "background_color": "#ffffff"
			
 
				+}
			
--- a/src/App.js
+++ b/src/App.js
@@ -0,0 +1,62 @@
 
				+import React from 'react';
			
 
				+import {connect} from 'react-redux'
			
 
				+import {Switch, Route} from "react-router-dom";
			
 
				+// import axios from "axios";
			
 
				+
			
 
				+import {getDoctors,getServices,getDoctorsRequest} from "./store/app/actions";
			
 
				+
			
 
				+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";
			
 
				+
			
 
				+
			
 
				+export class App extends React.Component {
			
 
				+
			
 
				+    componentDidMount() {
			
 
				+        this.props.getDoctors();
			
 
				+        this.props.getServices( )
			
 
				+     
			
 
				+        fetch("https://api-clinics.herokuapp.com/api/v1/doctors", {
			
 
				+            method: "GET",
			
 
				+            credentials: "include"
			
 
				+        })
			
 
				+            .then(res => res.json())
			
 
				+            .then(res => console.log (res))
			
 
				+}
			
 
				+
			
 
				+
			
 
				+    render() {
			
 
				+
			
 
				+        return (
			
 
				+            <div className="App">
			
 
				+                <Header/>
			
 
				+                    <Switch>
			
 
				+                        <Route exact path="/" component={Main} />
			
 
				+                        <Route exact path="/doctors" render={() => <Doctors data={this.props.app.doctors} flag={'doctors'}/> } />
			
 
				+                        <Route exact path="/services" render={() => <Doctors data={Array.from(Object.values(this.props.app.services))} flag={'services'}/>} />
			
 
				+                        <Route exact path="/services/:service" render={(props) => <Service his={props} data={this.props.app.services}/>} />
			
 
				+                        <Route  path="/appointment/:doctor" render={(props) => <Appointment his={props} dataDoctors={this.props.app.doctors} dataServices={this.props.app.services}/>} />
			
 
				+                    </Switch>
			
 
				+                <Footer/>
			
 
				+            </div>
			
 
				+        );
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+const mapStateToProps = state => {
			
 
				+    return {
			
 
				+        app:state.app,
			
 
				+    }
			
 
				+};
			
 
				+
			
 
				+const mapDispatchToProps = {
			
 
				+    getDoctors,
			
 
				+    getServices,
			
 
				+    getDoctorsRequest
			
 
				+
			
 
				+};
			
 
				+
			
 
				+export default connect (mapStateToProps,mapDispatchToProps)(App)
			
--- a/src/assets/images/fon1.jpg
+++ b/src/assets/images/fon1.jpg
--- a/src/assets/images/fon2.jpg
+++ b/src/assets/images/fon2.jpg
--- a/src/assets/images/logo.png
+++ b/src/assets/images/logo.png
--- a/src/assets/images/reception2.jpg
+++ b/src/assets/images/reception2.jpg
--- a/src/components/Appointment.js
+++ b/src/components/Appointment.js
@@ -0,0 +1,93 @@
 
				+import React from 'react';
			
 
				+
			
 
				+
			
 
				+export default class Appointment extends React.Component {
			
 
				+    state={
			
 
				+        date:{
			
 
				+            year:0,
			
 
				+            month:0,
			
 
				+            day:0
			
 
				+        },
			
 
				+        spec:null,
			
 
				+        time:null
			
 
				+    };
			
 
				+
			
 
				+
			
 
				+    changeDate =(e) => {
			
 
				+        const date = e.target.value.split('-');
			
 
				+        this.setState({
			
 
				+            date:{
			
 
				+                year:date[0],
			
 
				+                month:date[1],
			
 
				+                day:date[2]
			
 
				+            }
			
 
				+        })
			
 
				+    };
			
 
				+
			
 
				+    chooseSpeciality = (e) => {
			
 
				+        this.setState({spec:e.target.value})
			
 
				+    }
			
 
				+
			
 
				+    chooseTime =(e) => {
			
 
				+        this.setState({time:e.target.value})
			
 
				+    }
			
 
				+
			
 
				+    render() {
			
 
				+        let schedule
			
 
				+        const {his,dataDoctors,dataServices} = this.props;
			
 
				+        const path = his.match.params.doctor;
			
 
				+        const doctor = dataDoctors.find(el => el.id === +path);
			
 
				+        if(doctor){
			
 
				+            schedule = doctor.schedule
			
 
				+
			
 
				+
			
 
				+        }
			
 
				+
			
 
				+
			
 
				+        // if (doctor){
			
 
				+        //     schedule = doctor.schedule[`${this.state.date.month<10 ? '0'+this.state.date.month : this.state.date.month}`][`${this.state.date.day<10 ? '0'+this.state.date.day : this.state.date.day}`]
			
 
				+        //     console.log(doctor.schedule[`${this.state.date.month<10 ? '0'+this.state.date.month : this.state.date.month}`][`${this.state.date.day<10 ? '0'+this.state.date.day : this.state.date.day}`])
			
 
				+        // }
			
 
				+        if (this.state.time){
			
 
				+        console.log(this.state.time)
			
 
				+        console.log(this.state.time.split(':'))
			
 
				+        console.log(dataServices[this.state.spec].duration)
			
 
				+            console.log(+this.state.time.split(':')[0] + dataServices[this.state.spec].duration)
			
 
				+        }
			
 
				+
			
 
				+        return (
			
 
				+            <>
			
 
				+                {doctor && <div style={{display:'flex',flexDirection:'column',width:'400px'}}>
			
 
				+                    <p>{doctor.photo}</p>
			
 
				+                    <p>{doctor.name}</p>
			
 
				+                    <p>{doctor.lastName}</p>
			
 
				+                    <p>{doctor.skillsDescription}</p>
			
 
				+                    <select onChange={this.chooseSpeciality} defaultValue='choose spec'>
			
 
				+                        <option disabled >choose spec</option>
			
 
				+                        {doctor.speciality.map(el=> (
			
 
				+                            <option key={el}>{el}</option>
			
 
				+                        ))}
			
 
				+
			
 
				+                    </select>
			
 
				+                    {this.state.spec && <input type="date" onChange={this.changeDate}/>}
			
 
				+                    {this.state.date.year !== 0 &&
			
 
				+                    <div>
			
 
				+                        {Object.values(schedule)[0][this.state.date.day] ?
			
 
				+                            <div>
			
 
				+                            <select onChange={this.chooseTime}>
			
 
				+                                {Object.values(schedule)[0][this.state.date.day].map(el=> (
			
 
				+                                    <option key={el}>{el}</option>
			
 
				+                                ))}
			
 
				+                                
			
 
				+                            </select>
			
 
				+                                <input type="time" readOnly placeholder="Time will be calculated" value={this.state.time ? +this.state.time.split(':')[0] + dataServices[this.state.spec].duration + ':00' : ''}/>
			
 
				+                            </div>
			
 
				+                            : <p>No work today</p>}
			
 
				+                    </div>
			
 
				+                    }
			
 
				+            </div>}
			
 
				+                </>
			
 
				+        );
			
 
				+    }
			
 
				+}
			
 
				+
			
--- a/src/components/Calendar.js
+++ b/src/components/Calendar.js
@@ -0,0 +1,54 @@
 
				+import React, {Component} from 'react';
			
 
				+
			
 
				+class Calendar extends Component {
			
 
				+
			
 
				+    componentDidMount() {
			
 
				+
			
 
				+    }
			
 
				+    setDate = (e) => {
			
 
				+        console.log(`${new Date().getFullYear()}-${new Date().getMonth() < 10 ? '0' + new Date().getMonth() : new Date().getMonth()}-${e.target.id < 10 ? '0' + e.target.id : e.target.id}`)
			
 
				+        document.getElementById('inp_date').value=`${new Date().getFullYear()}-${new Date().getMonth() < 10 ? '0' + new Date().getMonth() : new Date().getMonth()}-${e.target.id < 10 ? '0' + e.target.id : e.target.id}`
			
 
				+    }
			
 
				+
			
 
				+    render() {
			
 
				+        const date = new Date();
			
 
				+        const start = new Date(2019, 6, 1);
			
 
				+        const month = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
			
 
				+        const currentMonth = [];
			
 
				+        const week = ['пн', 'вт', 'ср', 'чт', 'пт', 'сб', 'вс'];
			
 
				+        for (let x = 1; x <= month[date.getMonth()]; x++) currentMonth.push(x);
			
 
				+        const startOfMonth = week.indexOf(week.find(el => el === 'чт'));
			
 
				+        console.log(date.getDate());
			
 
				+
			
 
				+        return (
			
 
				+            <div>
			
 
				+                <table cols={7}>
			
 
				+                    <caption><button>{'<'}</button>{start.toLocaleString('ru', {month: 'short'})}<button>{'>'}</button></caption>
			
 
				+                    <tbody>
			
 
				+                    <tr>
			
 
				+                        {week.map(el => (<th key={el}>{el}</th>))}
			
 
				+                    </tr>
			
 
				+                    <tr >
			
 
				+                        {currentMonth.map(el=> (el >startOfMonth && el<=7) ? <td key={el} className='cal__td'><button id={el -  startOfMonth} onClick={this.setDate}>{el -  startOfMonth}</button></td> : el <=7 ? <td key={el}><button id={el} disabled>none</button></td> : null) }
			
 
				+                    </tr>
			
 
				+                    <tr >
			
 
				+                        {currentMonth.map(el=> (el > 7-startOfMonth && el <= 14-startOfMonth)?(<td key={el} className='cal__td'><button id={el} onClick={this.setDate}>{el}</button></td>):null)}
			
 
				+                    </tr>
			
 
				+                    <tr >
			
 
				+                        {currentMonth.map(el=> (el > 14-startOfMonth && el <= 21-startOfMonth)?(<td key={el} className='cal__td' ><button id={el} onClick={this.setDate}>{el}</button></td>):null)}
			
 
				+                    </tr>
			
 
				+                    <tr >
			
 
				+                        {currentMonth.map(el=> (el > 21-startOfMonth && el <= 28-startOfMonth)?(<td key={el} className='cal__td'><button id={el}  onClick={this.setDate}>{el}</button></td>):null)}
			
 
				+                    </tr>
			
 
				+                    <tr >
			
 
				+                        {currentMonth.map(el=> el > 28-startOfMonth?(<td key={el} className='cal__td'><button id={el} onClick={this.setDate}>{el}</button></td>):null)}
			
 
				+                    </tr>
			
 
				+                    </tbody>
			
 
				+                </table>
			
 
				+                <input type="date" id='inp_date'/>
			
 
				+            </div>
			
 
				+        );
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+export default Calendar
			
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
@@ -0,0 +1,11 @@
 
				+import React from 'react';
			
 
				+
			
 
				+const Footer = () => {
			
 
				+    return (
			
 
				+        <div>
			
 
				+            <h1>Footer</h1>
			
 
				+        </div>
			
 
				+    );
			
 
				+};
			
 
				+
			
 
				+export default Footer;
			
--- a/src/components/Service.js
+++ b/src/components/Service.js
@@ -0,0 +1,18 @@
 
				+import React from 'react';
			
 
				+
			
 
				+
			
 
				+export default class Service extends React.Component {
			
 
				+
			
 
				+
			
 
				+    render() {
			
 
				+        const {his,data} = this.props;
			
 
				+        const path = his.match.params.service;
			
 
				+        return (
			
 
				+            <div >
			
 
				+                {data[path].name}
			
 
				+                {data[path].description}
			
 
				+                {data[path].price}
			
 
				+            </div>
			
 
				+        );
			
 
				+    }
			
 
				+}
			
--- a/src/components/buttons/button.js
+++ b/src/components/buttons/button.js
@@ -0,0 +1,5 @@
 
				+import React from "react";
			
 
				+
			
 
				+
			
 
				+export default ({ text, ...rest }) => 
			
 
				+<button {...rest}>{text}</button>;
			
--- a/src/components/header/index.js
+++ b/src/components/header/index.js
@@ -0,0 +1,19 @@
 
				+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"
			
 
				+
			
 
				+
			
 
				+
			
 
				+export default () => (
			
 
				+	<header className="header">
			
 
				+		<div className="logo-box">
			
 
				+				<Link to = "/">
			
 
				+					<img src= {logo} className = "logo" alt="logo"/>
			
 
				+				</Link>
			
 
				+			</div>
			
 
				+			<Navigation></Navigation>
			
 
				+	</header>
			
 
				+);
			
 
				+
			
--- a/src/components/header/navigation.js
+++ b/src/components/header/navigation.js
@@ -0,0 +1,26 @@
 
				+import React from "react";
			
 
				+// import Scrollchor from 'react-scrollchor';
			
 
				+import {Link} from 'react-router-dom'
			
 
				+
			
 
				+
			
 
				+
			
 
				+const liArr = [
			
 
				+	{ path: "/", id: 1, text: "Главная" },
			
 
				+	{ path: "/doctors",  id: 2,  text: "Специалисты"  },
			
 
				+	{ path: "/services", id: 3,  text: "Услуги" },
			
 
				+	{ path: "/reviews", id: 4, text: "Отзывы"  },
			
 
				+	{ path: "/authorization", id: 5, text: "Войти" },
			
 
				+];
			
 
				+
			
 
				+export default ( props ) => (
			
 
				+    <nav className=" nav">
			
 
				+		<ul className=" list">
			
 
				+			{liArr.map(el => (
			
 
				+				<li className="item" key={el.id}> 
			
 
				+					<Link to={el.path}>{el.text}</Link>  
			
 
				+				</li>
			
 
				+			) ) }
			
 
				+		</ul>
			
 
				+	</nav>
			
 
				+);
			
 
				+
			
--- a/src/components/main/Main.js
+++ b/src/components/main/Main.js
@@ -0,0 +1,66 @@
 
				+import React from 'react';
			
 
				+// import {Link} from 'react-router-dom';
			
 
				+import {postDoctors} from "../../store/app/actions"
			
 
				+
			
 
				+import Button from "../buttons/button";
			
 
				+import About from "./aboutUs";
			
 
				+import Team from "./team"
			
 
				+
			
 
				+import {connect} from 'react-redux'
			
 
				+
			
 
				+    const doctor = {
			
 
				+        name: "Грегори Хаус",
			
 
				+        photo: "./images/doctors/gregoryhaus.jpg",
			
 
				+        experience: "1990-02-13",
			
 
				+        profession: "Стоматолог-хирург",
			
 
				+        speciality: [   ],
			
 
				+        skillsDescription: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, magnam. Maxime nisi dolorum consectetur dolor impedit veniam placeat nobis repudiandae quibusdam aperiam!",
			
 
				+    }
			
 
				+
			
 
				+export class Main extends React.Component {
			
 
				+   render() {
			
 
				+
			
 
				+        return (
			
 
				+            <main className = "main">
			
 
				+                <div className="container">
			
 
				+                    <div className="wrapper">
			
 
				+                                <div className="title-box">
			
 
				+                                    <img className = "logotype" src="./images/logo.png" alt=""/>
			
 
				+                                    <h1>Стоматология для всей семьи</h1>
			
 
				+                                    <Button className = "btn" text = "Записаться на приём" 
			
 
				+                                        onClick = { ( ) => { this.props.postDoctors (doctor) } } />
			
 
				+                                </div>
			
 
				+                        </div>
			
 
				+                </div>
			
 
				+                 <div className="wrapper">
			
 
				+                    <About/>
			
 
				+                 </div>
			
 
				+                <div className=" case">
			
 
				+                        <img className = "banner" src="./images/medical.jpeg" alt="medical"/>
			
 
				+                        <div className="button-box">
			
 
				+                            <Button className = "btn" text = "Записаться на приём" onClick = { ( ) => { } }/>
			
 
				+                        </div>     
			
 
				+                 </div>
			
 
				+                 <div className="wrapper">
			
 
				+                    <Team doctorsArr = {this.props.app}/>
			
 
				+                 </div>
			
 
				+
			
 
				+            </main>
			
 
				+        )
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+    const mapStateToProps = state => {
			
 
				+        return {
			
 
				+            app:state.app.doctors,
			
 
				+            
			
 
				+        }
			
 
				+    };
			
 
				+    
			
 
				+    const mapDispatchToProps = {
			
 
				+        postDoctors
			
 
				+    };
			
 
				+    
			
 
				+    export default connect (mapStateToProps,mapDispatchToProps)(Main)
			
 
				+
			
 
				+
			
--- a/src/components/main/aboutUs.js
+++ b/src/components/main/aboutUs.js
@@ -0,0 +1,57 @@
 
				+import React from 'react';
			
 
				+
			
 
				+
			
 
				+export default class AboutSection extends React.Component {
			
 
				+
			
 
				+
			
 
				+    render() {
			
 
				+        return (
			
 
				+            <>
			
 
				+                <div className="wrapper">
			
 
				+                    <div className="aboutsection">
			
 
				+                        <h2>О клинике</h2>
			
 
				+                        <p>Стоматологическая клиника «Art Dental studio» – это современное медучреждение, 
			
 
				+                            которое оказывает полный спектр стоматологических услуг и использует при этом новейшее 
			
 
				+                            оборудование ведущих мировых производителей. 
			
 
				+                        </p>
			
 
				+                        <p> Нашими постоянными пациентами являются не только взрослые, но и дети. 
			
 
				+                            Специально для них у нас есть услуги серебрения зубов, удаления молочных зубов, 
			
 
				+                            стеклоиономерное пломбирование и аппаратное ортодонтическое исправление прикуса
			
 
				+                            (до 16 лет). Также в нашей клинике Вы можете получить консультацию профессионального 
			
 
				+                            ортодонта и пародонтолога. Или решить любую проблему, связанную с зубами – наши врачи могут 
			
 
				+                            поставить хоть фотополимерную пломбу, хоть установить имплант. Дабы Вы не испытывали страха и не 
			
 
				+                            чувствовали боли, мы используем только эффективную высококачественную анестезию. У нас Вы 
			
 
				+                            сможете сделать как профессиональную чистку зубов, так и украсить ваши зубки модными украшениями. Если зубной 
			
 
				+                            ряд нуждается в отбеливании или реставрации, с ними мы тоже справимся без проблем. Стоматологи клиники
			
 
				+                            «Art Dental studio» поставят коронку, подберут протез, микропротез, проведут шинирование, 
			
 
				+                            пломбирование и сделают все, чтобы Вы гордились своей улыбкой. У Вас проблемы с прикусом или 
			
 
				+                            неровные зубы? Обратитесь к нам и убедитесь, что всё реально исправить с помощью грамотно 
			
 
				+                            подобранной брекет-системы. Вас гарантированно перестанет беспокоить даже чувствительность 
			
 
				+                            зубов, если с ними поработает наш высококвалифицированный стоматолог.
			
 
				+                        </p> 
			
 
				+                        <p>  И это далеко еще не весь спектр наших стоматологических услуг. С полным списком, 
			
 
				+                            а заодно и расценками, можно ознакомиться в разделе «Услуги». 
			
 
				+                            Стоматологическая клиника «Art Dental studio» работает со всеми 
			
 
				+                            страховыми компаниями. Мы любим и ценим наших пациентов, поэтому всегда настоятельно 
			
 
				+                            рекомендуем им посещать стоматолога не реже двух раз в год. Профилактический осмотр очень 
			
 
				+                            важен, так что зря многие им пренебрегают. Только так можно предупредить развитие заболеваний 
			
 
				+                            пародонта и принять своевременные меры по устранению неприятных симптомов и дискомфорта в 
			
 
				+                            ротовой полости.
			
 
				+                        </p>
			
 
				+                        <p>«Art Dental studio» работает на рынке стоматологических услуг не первый год, поэтому мы 
			
 
				+                            применяем только новейшие технологии и находим индивидуальные решения для каждого 
			
 
				+                            пациента. Благодаря всему этому Вам будет комфортно с нами сотрудничать. Улыбайтесь на 
			
 
				+                            здоровье!
			
 
				+                        </p>
			
 
				+                    </div>
			
 
				+                </div>
			
 
				+            </>
			
 
				+        )
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
--- a/src/components/main/team.js
+++ b/src/components/main/team.js
@@ -0,0 +1,32 @@
 
				+import React from 'react';
			
 
				+import {Link} from 'react-router-dom';
			
 
				+// import Button from "../buttons/button";
			
 
				+
			
 
				+
			
 
				+
			
 
				+export default class Team extends React.Component {
			
 
				+    render( ) {
			
 
				+        const {doctorsArr } = this.props
			
 
				+        return (
			
 
				+            <>
			
 
				+            <h2>Наши врачи</h2>
			
 
				+                <div className="team-container">
			
 
				+                    {doctorsArr.map  ( el => 
			
 
				+                        <div className="item"  key = {el.id} >
			
 
				+                            <div className="photo"><img src= {el.photo} alt= {el.name}/></div>
			
 
				+                            <h3>{el.name}</h3>
			
 
				+                            <div className="desc">
			
 
				+                                <p className="experience">Опыт работы {el.experience} лет</p>
			
 
				+                                <p className="rank">{el.rank}</p>
			
 
				+                            </div>
			
 
				+                            <div className="link-box">
			
 
				+                                <Link to = "/doctors" className = "btn link more">Подробнее ...</Link>
			
 
				+                                <Link to = "/doctors" className = "btn link ">Записаться на приём</Link>
			
 
				+                            </div>
			
 
				+                        </div>
			
 
				+                    )}
			
 
				+                 </div>
			
 
				+            </>
			
 
				+        ) 
			
 
				+    }
			
 
				+}        
			
--- a/src/components/specialists/doctors.js
+++ b/src/components/specialists/doctors.js
@@ -0,0 +1,39 @@
 
				+import React from 'react';
			
 
				+import {Link} from 'react-router-dom'
			
 
				+
			
 
				+export default class Doctors extends React.Component {
			
 
				+
			
 
				+
			
 
				+    render() {
			
 
				+        const {data, flag} = this.props
			
 
				+        return (
			
 
				+           
			
 
				+            <div style={{display:'flex', justifyContent:'center', flexWrap:'wrap'}}>
			
 
				+                {(flag==='doctors') ? data.map(el=>(
			
 
				+                        <div key={el.id} style={{display:'flex',flexDirection:'column', width:'300px', margin:'10px 20px'}}>
			
 
				+                            <Link to={`/doctors/${el.id}`} >
			
 
				+                                <p>{el.photo}</p>
			
 
				+                                <p>{el.name}</p>
			
 
				+                                <p>{el.lastName}</p>
			
 
				+                                <p>{el.age}</p>
			
 
				+                                <p>{el.skillsDescription}</p>
			
 
				+                            </Link>
			
 
				+                            {el.speciality.map(el=>(
			
 
				+                                <Link to={`/services/${el}`} key={el}>{el}</Link>
			
 
				+                            ))}
			
 
				+                            <Link to={`/appointment/${el.id}`}>Make an appointment</Link>
			
 
				+                        </div>
			
 
				+                    )) : (flag==='services') ?
			
 
				+                data.map(el => (
			
 
				+                   <div key={el.id} style={{width:'300px', margin:'10px 20px'}}>
			
 
				+                       <p>{el.name}</p>
			
 
				+                       <p>{el.description}</p>
			
 
				+                       <p>Price:{el.price}$</p>
			
 
				+                   </div>
			
 
				+                )) : <p>null</p>
			
 
				+                }
			
 
				+
			
 
				+            </div>
			
 
				+        );
			
 
				+    }
			
 
				+}
			
--- a/src/db.json
+++ b/src/db.json
@@ -0,0 +1,23 @@
 
				+{
			
 
				+  "doctors": [
			
 
				+    {
			
 
				+      "age":30,
			
 
				+      "id":1,
			
 
				+      "lastName":"Sidorov",
			
 
				+      "name":"Ivan",
			
 
				+      "photo":"some photo here",
			
 
				+      "skillsDescription":"Lorem ipsum dolor sit amet, consectetur adipisi...",
			
 
				+      "schedule": {
			
 
				+        "07": {
			
 
				+          "09": ["8:00","09:00","10:00","11:00","12:00","13:00","14:00","15:00","16:00","17:00"],
			
 
				+          "10": ["8:00", "09:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00"],
			
 
				+          "11": ["8:00", "09:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00"],
			
 
				+          "12": ["8:00","09:00","10:00","11:00","12:00","13:00","14:00","15:00","16:00","17:00"],
			
 
				+          "13": false,
			
 
				+          "14": false
			
 
				+        }
			
 
				+      }
			
 
				+
			
 
				+    }
			
 
				+  ]
			
 
				+}
			
--- a/src/index.js
+++ b/src/index.js
@@ -0,0 +1,25 @@
 
				+import React from 'react';
			
 
				+import ReactDOM from 'react-dom';
			
 
				+import App from './App'
			
 
				+import * as serviceWorker from './serviceWorker';
			
 
				+
			
 
				+import {BrowserRouter} from "react-router-dom";
			
 
				+import {store} from './store'
			
 
				+import {Provider} from "react-redux";
			
 
				+
			
 
				+
			
 
				+import "./style/normalize.css"
			
 
				+// import "./style/style.css"
			
 
				+import "./style/all.scss";
			
 
				+
			
 
				+ReactDOM.render(
			
 
				+    <Provider store={store}>
			
 
				+        <BrowserRouter>
			
 
				+            <App/>
			
 
				+        </BrowserRouter>
			
 
				+    </Provider>,
			
 
				+    document.getElementById('root')
			
 
				+);
			
 
				+
			
 
				+
			
 
				+serviceWorker.unregister();
			
--- a/src/serviceWorker.js
+++ b/src/serviceWorker.js
@@ -0,0 +1,135 @@
 
				+// This optional code is used to register a service worker.
			
 
				+// register() is not called by default.
			
 
				+
			
 
				+// This lets the app load faster on subsequent visits in production, and gives
			
 
				+// it offline capabilities. However, it also means that developers (and users)
			
 
				+// will only see deployed updates on subsequent visits to a page, after all the
			
 
				+// existing tabs open on the page have been closed, since previously cached
			
 
				+// resources are updated in the background.
			
 
				+
			
 
				+// To learn more about the benefits of this model and instructions on how to
			
 
				+// opt-in, read https://bit.ly/CRA-PWA
			
 
				+
			
 
				+const isLocalhost = Boolean(
			
 
				+  window.location.hostname === 'localhost' ||
			
 
				+    // [::1] is the IPv6 localhost address.
			
 
				+    window.location.hostname === '[::1]' ||
			
 
				+    // 127.0.0.1/8 is considered localhost for IPv4.
			
 
				+    window.location.hostname.match(
			
 
				+      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
			
 
				+    )
			
 
				+);
			
 
				+
			
 
				+export function register(config) {
			
 
				+  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
			
 
				+    // The URL constructor is available in all browsers that support SW.
			
 
				+    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
			
 
				+    if (publicUrl.origin !== window.location.origin) {
			
 
				+      // Our service worker won't work if PUBLIC_URL is on a different origin
			
 
				+      // from what our page is served on. This might happen if a CDN is used to
			
 
				+      // serve assets; see https://github.com/facebook/create-react-app/issues/2374
			
 
				+      return;
			
 
				+    }
			
 
				+
			
 
				+    window.addEventListener('load', () => {
			
 
				+      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
			
 
				+
			
 
				+      if (isLocalhost) {
			
 
				+        // This is running on localhost. Let's check if a service worker still exists or not.
			
 
				+        checkValidServiceWorker(swUrl, config);
			
 
				+
			
 
				+        // Add some additional logging to localhost, pointing developers to the
			
 
				+        // service worker/PWA documentation.
			
 
				+        navigator.serviceWorker.ready.then(() => {
			
 
				+          console.log(
			
 
				+            'This web app is being served cache-first by a service ' +
			
 
				+              'worker. To learn more, visit https://bit.ly/CRA-PWA'
			
 
				+          );
			
 
				+        });
			
 
				+      } else {
			
 
				+        // Is not localhost. Just register service worker
			
 
				+        registerValidSW(swUrl, config);
			
 
				+      }
			
 
				+    });
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+function registerValidSW(swUrl, config) {
			
 
				+  navigator.serviceWorker
			
 
				+    .register(swUrl)
			
 
				+    .then(registration => {
			
 
				+      registration.onupdatefound = () => {
			
 
				+        const installingWorker = registration.installing;
			
 
				+        if (installingWorker == null) {
			
 
				+          return;
			
 
				+        }
			
 
				+        installingWorker.onstatechange = () => {
			
 
				+          if (installingWorker.state === 'installed') {
			
 
				+            if (navigator.serviceWorker.controller) {
			
 
				+              // At this point, the updated precached content has been fetched,
			
 
				+              // but the previous service worker will still serve the older
			
 
				+              // content until all client tabs are closed.
			
 
				+              console.log(
			
 
				+                'New content is available and will be used when all ' +
			
 
				+                  'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
			
 
				+              );
			
 
				+
			
 
				+              // Execute callback
			
 
				+              if (config && config.onUpdate) {
			
 
				+                config.onUpdate(registration);
			
 
				+              }
			
 
				+            } else {
			
 
				+              // At this point, everything has been precached.
			
 
				+              // It's the perfect time to display a
			
 
				+              // "Content is cached for offline use." message.
			
 
				+              console.log('Content is cached for offline use.');
			
 
				+
			
 
				+              // Execute callback
			
 
				+              if (config && config.onSuccess) {
			
 
				+                config.onSuccess(registration);
			
 
				+              }
			
 
				+            }
			
 
				+          }
			
 
				+        };
			
 
				+      };
			
 
				+    })
			
 
				+    .catch(error => {
			
 
				+      console.error('Error during service worker registration:', error);
			
 
				+    });
			
 
				+}
			
 
				+
			
 
				+function checkValidServiceWorker(swUrl, config) {
			
 
				+  // Check if the service worker can be found. If it can't reload the page.
			
 
				+  fetch(swUrl)
			
 
				+    .then(response => {
			
 
				+      // Ensure service worker exists, and that we really are getting a JS file.
			
 
				+      const contentType = response.headers.get('content-type');
			
 
				+      if (
			
 
				+        response.status === 404 ||
			
 
				+        (contentType != null && contentType.indexOf('javascript') === -1)
			
 
				+      ) {
			
 
				+        // No service worker found. Probably a different app. Reload the page.
			
 
				+        navigator.serviceWorker.ready.then(registration => {
			
 
				+          registration.unregister().then(() => {
			
 
				+            window.location.reload();
			
 
				+          });
			
 
				+        });
			
 
				+      } else {
			
 
				+        // Service worker found. Proceed as normal.
			
 
				+        registerValidSW(swUrl, config);
			
 
				+      }
			
 
				+    })
			
 
				+    .catch(() => {
			
 
				+      console.log(
			
 
				+        'No internet connection found. App is running in offline mode.'
			
 
				+      );
			
 
				+    });
			
 
				+}
			
 
				+
			
 
				+export function unregister() {
			
 
				+  if ('serviceWorker' in navigator) {
			
 
				+    navigator.serviceWorker.ready.then(registration => {
			
 
				+      registration.unregister();
			
 
				+    });
			
 
				+  }
			
 
				+}
			
--- a/src/store.js
+++ b/src/store.js
@@ -0,0 +1,6 @@
 
				+import { createStore, applyMiddleware } from "redux";
			
 
				+import thunk from "redux-thunk";
			
 
				+
			
 
				+import rootReducer from './store/reducers'
			
 
				+
			
 
				+export const store = createStore(rootReducer, applyMiddleware(thunk));
			
--- a/src/store/app/actions.js
+++ b/src/store/app/actions.js
@@ -0,0 +1,103 @@
 
				+export const GET_DOCTORS_REQUEST = "GET_DOCTORS_REQUEST";
			
 
				+export const GET_DOCTORS_REQUEST_SUCCESS = "GET_DOCTORS_REQUEST_SUCCESS";
			
 
				+export const GET_DOCTORS_REQUEST_FAIL = "GET_DOCTORS_REQUEST_FAIL";
			
 
				+
			
 
				+export const GET_SERVICES_REQUEST = "GET_SERVICES_REQUEST";
			
 
				+export const GET_SERVICES_REQUEST_SUCCESS = "GET_SERVICES_REQUEST_SUCCESS";
			
 
				+export const GET_SERVICES_REQUEST_FAIL = "GET_SERVICES_REQUEST_FAIL";
			
 
				+
			
 
				+export const POST_DOCTORS_REQUEST = "POST_DOCTORS_REQUEST";
			
 
				+export const POST_DOCTORS_REQUEST_SUCCESS = "POST_DOCTORS_REQUEST_SUCCESS";
			
 
				+export const POST_DOCTORS_REQUEST_FAIL = "POST_DOCTORS_REQUEST_FAIL";
			
 
				+
			
 
				+const URL = "https://team-app-28f4a.firebaseio.com/";
			
 
				+// https://api-clinics.herokuapp.com/api/v1/services"
			
 
				+
			
 
				+// -----------------------------------------------------------------------------------------------------------------
			
 
				+
			
 
				+export const getDoctorsRequest = payload => ({
			
 
				+    type: GET_DOCTORS_REQUEST,
			
 
				+    payload
			
 
				+});
			
 
				+
			
 
				+const getDoctorsRequestSuccess = payload => ({
			
 
				+    type: GET_DOCTORS_REQUEST_SUCCESS,
			
 
				+    payload
			
 
				+});
			
 
				+
			
 
				+const getDoctorsRequestFail = payload => ({
			
 
				+    type: GET_DOCTORS_REQUEST_FAIL,
			
 
				+    payload
			
 
				+});
			
 
				+
			
 
				+export const getDoctors = () => dispatch => {
			
 
				+    dispatch(getDoctorsRequest());
			
 
				+    return fetch(`${URL}doctors.json`, {
			
 
				+        method: "GET",
			
 
				+        // credentials: "include"
			
 
				+    })
			
 
				+        .then(res => res.json())
			
 
				+        .then(res => dispatch(getDoctorsRequestSuccess(res)))
			
 
				+        .catch(err => dispatch(getDoctorsRequestFail(err)));
			
 
				+};
			
 
				+// _____________________________________________________________________________________
			
 
				+
			
 
				+export const postDoctorsRequest = payload => ({
			
 
				+    type: POST_DOCTORS_REQUEST,
			
 
				+    payload
			
 
				+});
			
 
				+
			
 
				+const postDoctorsRequestSuccess = payload => ({
			
 
				+    type: POST_DOCTORS_REQUEST_SUCCESS,
			
 
				+    payload
			
 
				+});
			
 
				+
			
 
				+const postDoctorsRequestFail = payload => ({
			
 
				+    type: POST_DOCTORS_REQUEST_FAIL,
			
 
				+    payload
			
 
				+});
			
 
				+
			
 
				+export const postDoctors = (payload) => dispatch => {
			
 
				+    console.log(payload)
			
 
				+    dispatch(postDoctorsRequest());
			
 
				+    return fetch("https://api-clinics.herokuapp.com/api/v1/doctors", {
			
 
				+        method: "POST",
			
 
				+        credentials: "include",
			
 
				+        headers: {
			
 
				+            "Content-Type": "application/json"
			
 
				+        },
			
 
				+        body: JSON.stringify(payload)
			
 
				+    })
			
 
				+        .then(res => res.json())
			
 
				+        .then(res =>console.log(res))
			
 
				+        .catch(err => dispatch(postDoctorsRequestFail(err)));
			
 
				+};
			
 
				+
			
 
				+// -----------------------------------------------------------------------------------------------------------------
			
 
				+const getServicesRequest = payload => ({
			
 
				+    type: GET_SERVICES_REQUEST,
			
 
				+    payload
			
 
				+});
			
 
				+
			
 
				+const getServicesRequestSuccess = payload => ({
			
 
				+    type: GET_SERVICES_REQUEST_SUCCESS,
			
 
				+    payload
			
 
				+});
			
 
				+
			
 
				+const getServicesRequestFail = payload => ({
			
 
				+    type: GET_SERVICES_REQUEST_FAIL,
			
 
				+    payload
			
 
				+});
			
 
				+
			
 
				+export const getServices = () => dispatch => {
			
 
				+    dispatch(getServicesRequest());
			
 
				+    return fetch(`${URL}services.json`, {
			
 
				+        method: "GET",
			
 
				+        // credentials: "include"
			
 
				+    })
			
 
				+        .then(res => res.json())
			
 
				+        .then(res => dispatch(getServicesRequestSuccess(res)))
			
 
				+        .catch(err => dispatch(getServicesRequestFail(err)));
			
 
				+};
			
 
				+
			
 
				+
			
--- a/src/store/app/reducers.js
+++ b/src/store/app/reducers.js
@@ -0,0 +1,121 @@
 
				+import {
			
 
				+    GET_DOCTORS_REQUEST,
			
 
				+    GET_DOCTORS_REQUEST_SUCCESS,
			
 
				+    GET_DOCTORS_REQUEST_FAIL,
			
 
				+
			
 
				+    GET_SERVICES_REQUEST,
			
 
				+    GET_SERVICES_REQUEST_SUCCESS,
			
 
				+    GET_SERVICES_REQUEST_FAIL,
			
 
				+
			
 
				+    POST_DOCTORS_REQUEST,
			
 
				+    POST_DOCTORS_REQUEST_SUCCESS,
			
 
				+    POST_DOCTORS_REQUEST_FAIL
			
 
				+
			
 
				+
			
 
				+} from './actions'
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+const defaultState = {
			
 
				+    doctors:[  ],
			
 
				+    services:{
			
 
				+        service1:{id:1},
			
 
				+        service2:{id:2},
			
 
				+        service3:{id:3},
			
 
				+        service4:{id:4},
			
 
				+        service5:{id:5},
			
 
				+        service6:{id:6},
			
 
				+        service7:{id:7},
			
 
				+        service8:{id:8},
			
 
				+        service9:{id:9},
			
 
				+    },
			
 
				+    isFetching:false,
			
 
				+    error: null,
			
 
				+
			
 
				+};
			
 
				+
			
 
				+// -----------------------------------------------------------------------------------------------------------------
			
 
				+
			
 
				+export const appReducer = (state = defaultState,action) => {
			
 
				+
			
 
				+    switch (action.type) {
			
 
				+// -----------------------------------------------------------------------------------------------------------------
			
 
				+
			
 
				+        case GET_DOCTORS_REQUEST : {
			
 
				+            return {
			
 
				+                ...state,
			
 
				+                isFetching: true
			
 
				+            };
			
 
				+        }
			
 
				+
			
 
				+        case GET_DOCTORS_REQUEST_SUCCESS : {
			
 
				+            return {
			
 
				+                ...state,
			
 
				+                doctors:action.payload,
			
 
				+                isFetching: false
			
 
				+            }
			
 
				+        }
			
 
				+
			
 
				+        case GET_DOCTORS_REQUEST_FAIL : {
			
 
				+            return {
			
 
				+                ...state,
			
 
				+                error:action.payload,
			
 
				+                isFetching: false
			
 
				+            }
			
 
				+        }
			
 
				+
			
 
				+// -----------------------------------------------------------------------------------------------------------------
			
 
				+
			
 
				+        case GET_SERVICES_REQUEST : {
			
 
				+            return {
			
 
				+                ...state,
			
 
				+                isFetching: true
			
 
				+            };
			
 
				+        }
			
 
				+
			
 
				+        case GET_SERVICES_REQUEST_SUCCESS : {
			
 
				+            return {
			
 
				+                ...state,
			
 
				+                services:action.payload,
			
 
				+                isFetching: false
			
 
				+            }
			
 
				+        }
			
 
				+
			
 
				+        case GET_SERVICES_REQUEST_FAIL : {
			
 
				+            return {
			
 
				+                ...state,
			
 
				+                error:action.payload,
			
 
				+                isFetching: false
			
 
				+            }
			
 
				+        }
			
 
				+
			
 
				+// -----------------------------------------------------------------------------------------------------------------
			
 
				+case POST_DOCTORS_REQUEST : {
			
 
				+    return {
			
 
				+        ...state,
			
 
				+        isFetching: true
			
 
				+    };
			
 
				+}
			
 
				+
			
 
				+case POST_DOCTORS_REQUEST_SUCCESS : {
			
 
				+    return {
			
 
				+        ...state,
			
 
				+        isFetching: false
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+case POST_DOCTORS_REQUEST_FAIL : {
			
 
				+    return {
			
 
				+        ...state,
			
 
				+        error: action.payload,
			
 
				+        isFetching: false
			
 
				+    }
			
 
				+}
			
 
				+
			
 
				+// _______________________________________________________________________________
			
 
				+
			
 
				+        default:
			
 
				+            return state
			
 
				+    }
			
 
				+};
			
--- a/src/store/reducers.js
+++ b/src/store/reducers.js
@@ -0,0 +1,9 @@
 
				+import {combineReducers} from "redux";
			
 
				+
			
 
				+import {appReducer} from "./app/reducers";
			
 
				+
			
 
				+
			
 
				+
			
 
				+export default combineReducers({
			
 
				+    app:appReducer
			
 
				+})
			
--- a/src/style/App.css
+++ b/src/style/App.css
@@ -0,0 +1,33 @@
 
				+.App {
			
 
				+  text-align: center;
			
 
				+}
			
 
				+
			
 
				+.App-logo {
			
 
				+  animation: App-logo-spin infinite 20s linear;
			
 
				+  height: 40vmin;
			
 
				+  pointer-events: none;
			
 
				+}
			
 
				+
			
 
				+.App-header {
			
 
				+  background-color: #282c34;
			
 
				+  min-height: 100vh;
			
 
				+  display: flex;
			
 
				+  flex-direction: column;
			
 
				+  align-items: center;
			
 
				+  justify-content: center;
			
 
				+  font-size: calc(10px + 2vmin);
			
 
				+  color: white;
			
 
				+}
			
 
				+
			
 
				+.App-link {
			
 
				+  color: #61dafb;
			
 
				+}
			
 
				+
			
 
				+@keyframes App-logo-spin {
			
 
				+  from {
			
 
				+    transform: rotate(0deg);
			
 
				+  }
			
 
				+  to {
			
 
				+    transform: rotate(360deg);
			
 
				+  }
			
 
				+}
			
--- a/src/style/all.scss
+++ b/src/style/all.scss
@@ -0,0 +1,357 @@
 
				+$header-color: #d4d5d7;
			
 
				+$main-title-color: #3b3b3b;
			
 
				+$main-text-color: #101010;
			
 
				+$main-color:   #789084;
			
 
				+$hover-color: #b1e8ca;
			
 
				+$opacity-color: rgba(17,17,17,0.7);
			
 
				+
			
 
				+//
			
 
				+
			
 
				+body {
			
 
				+	font-family: 'Lato', sans-serif;
			
 
				+	font-size: 16px;
			
 
				+
			
 
				+}
			
 
				+
			
 
				+// .main {
			
 
				+// 	background-color: $hover-color;
			
 
				+// }
			
 
				+
			
 
				+.container {
			
 
				+	background-image: url(../assets/images/fon1.jpg);
			
 
				+	background-size: cover;
			
 
				+}
			
 
				+.wrapper {
			
 
				+	max-width: 1180px;
			
 
				+	margin: 0 auto;
			
 
				+}
			
 
				+
			
 
				+// header +  navigation
			
 
				+.header {
			
 
				+	width: 100%;
			
 
				+	padding: 10px;
			
 
				+	display: flex;
			
 
				+	justify-content: space-around;
			
 
				+	flex-wrap: wrap;
			
 
				+   	margin: 0 auto;
			
 
				+    vertical-align: middle;
			
 
				+	font-weight: 700;
			
 
				+	background-color: $opacity-color;
			
 
				+	position: fixed;
			
 
				+	top: 0;
			
 
				+	z-index: 99999;
			
 
				+
			
 
				+	& .nav {
			
 
				+		margin-top: 25px;
			
 
				+		font-size: 14px;
			
 
				+		line-height: 24px;
			
 
				+		font-weight: bold;
			
 
				+		letter-spacing: 0.075em;
			
 
				+		@media (max-width: 768px) {
			
 
				+			margin-top: 10px;	
			
 
				+		}
			
 
				+	}
			
 
				+	& .list {
			
 
				+		list-style: none;
			
 
				+		padding: 2px;
			
 
				+		margin: 0;
			
 
				+        display: flex;
			
 
				+		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;	
			
 
				+			}
			
 
				+		}
			
 
				+		&:last-child a {
			
 
				+			color: $hover-color;
			
 
				+			&:hover {
			
 
				+				color: $main-title-color;
			
 
				+			}
			
 
				+		}
			
 
				+		a {
			
 
				+			text-decoration: none;
			
 
				+			color: $header-color;
			
 
				+			&:hover {
			
 
				+				color: $hover-color;
			
 
				+			}
			
 
				+		}
			
 
				+	}
			
 
				+	.logo-box {
			
 
				+		margin-right: 50px;
			
 
				+		@media (max-width: 768px) {
			
 
				+			margin-right: 0;	
			
 
				+		}
			
 
				+	}
			
 
				+	.logo-box  img {
			
 
				+		width: 100px;
			
 
				+		@media (max-width: 768px) {
			
 
				+			// width: 150px;	
			
 
				+		}
			
 
				+	}	
			
 
				+}
			
 
				+	
			
 
				+// banner + title
			
 
				+.title-box {
			
 
				+	color: $header-color;
			
 
				+	margin: 0px 40px;
			
 
				+	padding-bottom: 45px;
			
 
				+	display: flex;
			
 
				+	flex-direction: column;
			
 
				+	text-align: center;
			
 
				+	@media (max-width: 768px) {
			
 
				+	width: 100%;
			
 
				+	margin: 0;
			
 
				+	}
			
 
				+	img {
			
 
				+		margin: 150px auto 30px;
			
 
				+		@media (max-width: 768px) {
			
 
				+			max-width: 200px;	
			
 
				+		}
			
 
				+	}
			
 
				+	h1{
			
 
				+		text-transform: uppercase;
			
 
				+		background-color: $opacity-color;
			
 
				+		font-size: 52px;
			
 
				+		padding: 35px;
			
 
				+		line-height: 50px;
			
 
				+		font-weight: bold;
			
 
				+		margin: 70px auto 0;
			
 
				+		text-align: center;
			
 
				+		@media (max-width: 768px) {
			
 
				+			font-size: 30px;
			
 
				+			padding: 15px;	
			
 
				+		}
			
 
				+	}
			
 
				+}
			
 
				+
			
 
				+// button
			
 
				+.btn {
			
 
				+	min-height: 50px;
			
 
				+	width: 70%;
			
 
				+	margin: 20px auto;
			
 
				+	color: $main-color;
			
 
				+	text-transform: uppercase;
			
 
				+	text-decoration: none;
			
 
				+	letter-spacing: 0.05em;
			
 
				+	font-size: 15px;
			
 
				+	font-weight: bold;
			
 
				+	line-height: 35px;
			
 
				+	border: none;
			
 
				+	border-radius: 2px;
			
 
				+	background-color:  $hover-color;
			
 
				+	transition-duration: 0.4s;
			
 
				+	&:hover {
			
 
				+		box-shadow: none;
			
 
				+		background-color: $opacity-color;
			
 
				+		color: $header-color;
			
 
				+	}
			
 
				+	&:focus {
			
 
				+		outline: none;
			
 
				+	}
			
 
				+	@media (max-width: 768px) {
			
 
				+		width: 100%;
			
 
				+		margin: 25px auto;	
			
 
				+	}
			
 
				+}
			
 
				+
			
 
				+//  section About Us
			
 
				+.aboutsection, 
			
 
				+.team-container,
			
 
				+h2  {
			
 
				+	font-size: 20px;
			
 
				+	line-height: 1.5em;
			
 
				+	font-family: 'Montserrat', sans-serif;
			
 
				+	color: $main-color;
			
 
				+	text-align: justify;
			
 
				+	border-bottom: 1px solid $opacity-color;
			
 
				+	padding-bottom: 50px;
			
 
				+	@media (max-width: 768px) {
			
 
				+		padding: 3px;
			
 
				+		margin: 25px 10px;	
			
 
				+	}
			
 
				+}
			
 
				+h2 {
			
 
				+	// border: none;
			
 
				+	font-size: 36px;
			
 
				+	padding-bottom: 2px;
			
 
				+}
			
 
				+
			
 
				+// second banner 
			
 
				+.case {
			
 
				+	position: relative;
			
 
				+	.banner {
			
 
				+		display: block;
			
 
				+		width: 100%;
			
 
				+		margin: 15px auto;
			
 
				+	}
			
 
				+	.button-box {
			
 
				+		position: absolute; 
			
 
				+		top: 70%;
			
 
				+		right: 0%;
			
 
				+		height: 90px;
			
 
				+		width: 100%;
			
 
				+		background-color: rgba(255,255,255,0.4);
			
 
				+		margin: 20px 0;
			
 
				+		text-align: right;
			
 
				+		.btn {
			
 
				+			width: 35%;
			
 
				+			margin: 20px 10px;
			
 
				+		}
			
 
				+		@media (max-width: 768px) {
			
 
				+			top: 50%;
			
 
				+		}
			
 
				+	}
			
 
				+}
			
 
				+
			
 
				+// shortly about doctors 
			
 
				+.team-container {
			
 
				+	color: $main-color;
			
 
				+	display: flex;
			
 
				+	flex-wrap: wrap;
			
 
				+	justify-content: space-between;
			
 
				+	padding-bottom: 50px;
			
 
				+
			
 
				+	.item {
			
 
				+		width: 25%;
			
 
				+		margin: 10px; 
			
 
				+		text-align: center;
			
 
				+		display: flex;
			
 
				+		flex-direction: column;
			
 
				+		border-radius: 5px;
			
 
				+		box-shadow: 0px 2px 8px 1px $main-color;
			
 
				+		.photo {
			
 
				+			overflow: hidden;
			
 
				+			height: 45%;
			
 
				+			border-radius: 5px;
			
 
				+		}
			
 
				+		.link-box {
			
 
				+			margin-top: 20px;
			
 
				+		}
			
 
				+		.link {
			
 
				+			width: 100%;
			
 
				+			display: block;
			
 
				+			padding: 15px 2px;
			
 
				+		}
			
 
				+		.more {
			
 
				+			background-color: $opacity-color;
			
 
				+			&:hover {
			
 
				+				background-color: $main-color;
			
 
				+			}
			
 
				+		}
			
 
				+		@media (max-width: 768px) {
			
 
				+			width: 45%;
			
 
				+		}
			
 
				+		@media (max-width: 630px) {
			
 
				+			width: 100%;
			
 
				+		}
			
 
				+	}
			
 
				+
			
 
				+}
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+
			
 
				+// _____________________
			
 
				+
			
 
				+// 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;
			
 
				+// 		}
			
 
				+// 	}
			
 
				+// }
			
 
				+
			
--- a/src/style/index.css
+++ b/src/style/index.css
@@ -0,0 +1,13 @@
 
				+body {
			
 
				+  margin: 0;
			
 
				+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
			
 
				+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
			
 
				+    sans-serif;
			
 
				+  -webkit-font-smoothing: antialiased;
			
 
				+  -moz-osx-font-smoothing: grayscale;
			
 
				+}
			
 
				+
			
 
				+code {
			
 
				+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
			
 
				+    monospace;
			
 
				+}
			
--- a/src/style/mod.module.css
+++ b/src/style/mod.module.css
@@ -0,0 +1,11 @@
 
				+.dude {
			
 
				+	color: blue;
			
 
				+}
			
 
				+
			
 
				+.success {
			
 
				+	background-color: green;
			
 
				+}
			
 
				+
			
 
				+.fail {
			
 
				+	background-color: red;
			
 
				+}
			
--- a/src/style/normalize.css
+++ b/src/style/normalize.css
@@ -0,0 +1,356 @@
 
				+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
			
 
				+
			
 
				+/* Document
			
 
				+   ========================================================================== */
			
 
				+
			
 
				+/**
			
 
				+ * 1. Correct the line height in all browsers.
			
 
				+ * 2. Prevent adjustments of font size after orientation changes in iOS.
			
 
				+ */
			
 
				+
			
 
				+html {
			
 
				+  line-height: 1.15; /* 1 */
			
 
				+  -webkit-text-size-adjust: 100%; /* 2 */
			
 
				+}
			
 
				+
			
 
				+/* Sections
			
 
				+   ========================================================================== */
			
 
				+
			
 
				+/**
			
 
				+ * Remove the margin in all browsers.
			
 
				+ */
			
 
				+
			
 
				+body {
			
 
				+  margin: 0;
			
 
				+  padding: 0;
			
 
				+}
			
 
				+
			
 
				+/**
			
 
				+ * Render the `main` element consistently in IE.
			
 
				+ */
			
 
				+
			
 
				+main {
			
 
				+  display: block;
			
 
				+}
			
 
				+
			
 
				+/**
			
 
				+ * Correct the font size and margin on `h1` elements within `section` and
			
 
				+ * `article` contexts in Chrome, Firefox, and Safari.
			
 
				+ */
			
 
				+
			
 
				+h1 {
			
 
				+  font-size: 2em;
			
 
				+  margin: 0.67em 0;
			
 
				+}
			
 
				+
			
 
				+/* Grouping content
			
 
				+   ========================================================================== */
			
 
				+
			
 
				+/**
			
 
				+ * 1. Add the correct box sizing in Firefox.
			
 
				+ * 2. Show the overflow in Edge and IE.
			
 
				+ */
			
 
				+
			
 
				+hr {
			
 
				+  box-sizing: content-box; /* 1 */
			
 
				+  height: 0; /* 1 */
			
 
				+  overflow: visible; /* 2 */
			
 
				+}
			
 
				+
			
 
				+/**
			
 
				+ * 1. Correct the inheritance and scaling of font size in all browsers.
			
 
				+ * 2. Correct the odd `em` font sizing in all browsers.
			
 
				+ */
			
 
				+
			
 
				+pre {
			
 
				+  font-family: monospace, monospace; /* 1 */
			
 
				+  font-size: 1em; /* 2 */
			
 
				+}
			
 
				+
			
 
				+/* Text-level semantics
			
 
				+   ========================================================================== */
			
 
				+
			
 
				+/**
			
 
				+ * Remove the gray background on active links in IE 10.
			
 
				+ */
			
 
				+
			
 
				+a {
			
 
				+  background-color: transparent;
			
 
				+}
			
 
				+
			
 
				+/**
			
 
				+ * 1. Remove the bottom border in Chrome 57-
			
 
				+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
			
 
				+ */
			
 
				+
			
 
				+abbr[title] {
			
 
				+  border-bottom: none; /* 1 */
			
 
				+  text-decoration: underline; /* 2 */
			
 
				+  text-decoration: underline dotted; /* 2 */
			
 
				+}
			
 
				+
			
 
				+/**
			
 
				+ * Add the correct font weight in Chrome, Edge, and Safari.
			
 
				+ */
			
 
				+
			
 
				+b,
			
 
				+strong {
			
 
				+  font-weight: bolder;
			
 
				+}
			
 
				+
			
 
				+/**
			
 
				+ * 1. Correct the inheritance and scaling of font size in all browsers.
			
 
				+ * 2. Correct the odd `em` font sizing in all browsers.
			
 
				+ */
			
 
				+
			
 
				+code,
			
 
				+kbd,
			
 
				+samp {
			
 
				+  font-family: monospace, monospace; /* 1 */
			
 
				+  font-size: 1em; /* 2 */
			
 
				+}
			
 
				+
			
 
				+/**
			
 
				+ * Add the correct font size in all browsers.
			
 
				+ */
			
 
				+
			
 
				+small {
			
 
				+  font-size: 80%;
			
 
				+}
			
 
				+
			
 
				+/**
			
 
				+ * Prevent `sub` and `sup` elements from affecting the line height in
			
 
				+ * all browsers.
			
 
				+ */
			
 
				+
			
 
				+sub,
			
 
				+sup {
			
 
				+  font-size: 75%;
			
 
				+  line-height: 0;
			
 
				+  position: relative;
			
 
				+  vertical-align: baseline;
			
 
				+}
			
 
				+
			
 
				+sub {
			
 
				+  bottom: -0.25em;
			
 
				+}
			
 
				+
			
 
				+sup {
			
 
				+  top: -0.5em;
			
 
				+}
			
 
				+
			
 
				+/* Embedded content
			
 
				+   ========================================================================== */
			
 
				+
			
 
				+/**
			
 
				+ * Remove the border on images inside links in IE 10.
			
 
				+ */
			
 
				+
			
 
				+img {
			
 
				+  border-style: none;
			
 
				+}
			
 
				+
			
 
				+/* Forms
			
 
				+   ========================================================================== */
			
 
				+
			
 
				+/**
			
 
				+ * 1. Change the font styles in all browsers.
			
 
				+ * 2. Remove the margin in Firefox and Safari.
			
 
				+ */
			
 
				+
			
 
				+button,
			
 
				+input,
			
 
				+optgroup,
			
 
				+select,
			
 
				+textarea {
			
 
				+  font-family: inherit; /* 1 */
			
 
				+  font-size: 100%; /* 1 */
			
 
				+  line-height: 1.15; /* 1 */
			
 
				+  margin: 0; /* 2 */
			
 
				+}
			
 
				+
			
 
				+/**
			
 
				+ * Show the overflow in IE.
			
 
				+ * 1. Show the overflow in Edge.
			
 
				+ */
			
 
				+
			
 
				+button,
			
 
				+input { /* 1 */
			
 
				+  overflow: visible;
			
 
				+}
			
 
				+
			
 
				+/**
			
 
				+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
			
 
				+ * 1. Remove the inheritance of text transform in Firefox.
			
 
				+ */
			
 
				+
			
 
				+button,
			
 
				+select { /* 1 */
			
 
				+  text-transform: none;
			
 
				+}
			
 
				+
			
 
				+/**
			
 
				+ * Correct the inability to style clickable types in iOS and Safari.
			
 
				+ */
			
 
				+
			
 
				+button,
			
 
				+[type="button"],
			
 
				+[type="reset"],
			
 
				+[type="submit"] {
			
 
				+  -webkit-appearance: button;
			
 
				+}
			
 
				+
			
 
				+/**
			
 
				+ * Remove the inner border and padding in Firefox.
			
 
				+ */
			
 
				+
			
 
				+button::-moz-focus-inner,
			
 
				+[type="button"]::-moz-focus-inner,
			
 
				+[type="reset"]::-moz-focus-inner,
			
 
				+[type="submit"]::-moz-focus-inner {
			
 
				+  border-style: none;
			
 
				+  padding: 0;
			
 
				+}
			
 
				+
			
 
				+/**
			
 
				+ * Restore the focus styles unset by the previous rule.
			
 
				+ */
			
 
				+
			
 
				+button:-moz-focusring,
			
 
				+[type="button"]:-moz-focusring,
			
 
				+[type="reset"]:-moz-focusring,
			
 
				+[type="submit"]:-moz-focusring {
			
 
				+  outline: 1px dotted ButtonText;
			
 
				+}
			
 
				+
			
 
				+/**
			
 
				+ * Correct the padding in Firefox.
			
 
				+ */
			
 
				+
			
 
				+fieldset {
			
 
				+  padding: 0.35em 0.75em 0.625em;
			
 
				+}
			
 
				+
			
 
				+/**
			
 
				+ * 1. Correct the text wrapping in Edge and IE.
			
 
				+ * 2. Correct the color inheritance from `fieldset` elements in IE.
			
 
				+ * 3. Remove the padding so developers are not caught out when they zero out
			
 
				+ *    `fieldset` elements in all browsers.
			
 
				+ */
			
 
				+
			
 
				+legend {
			
 
				+  box-sizing: border-box; /* 1 */
			
 
				+  color: inherit; /* 2 */
			
 
				+  display: table; /* 1 */
			
 
				+  max-width: 100%; /* 1 */
			
 
				+  padding: 0; /* 3 */
			
 
				+  white-space: normal; /* 1 */
			
 
				+}
			
 
				+
			
 
				+/**
			
 
				+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
			
 
				+ */
			
 
				+
			
 
				+progress {
			
 
				+  vertical-align: baseline;
			
 
				+}
			
 
				+
			
 
				+/**
			
 
				+ * Remove the default vertical scrollbar in IE 10+.
			
 
				+ */
			
 
				+
			
 
				+textarea {
			
 
				+  overflow: auto;
			
 
				+}
			
 
				+
			
 
				+/**
			
 
				+ * 1. Add the correct box sizing in IE 10.
			
 
				+ * 2. Remove the padding in IE 10.
			
 
				+ */
			
 
				+
			
 
				+[type="checkbox"],
			
 
				+[type="radio"] {
			
 
				+  box-sizing: border-box; /* 1 */
			
 
				+  padding: 0; /* 2 */
			
 
				+}
			
 
				+
			
 
				+/**
			
 
				+ * Correct the cursor style of increment and decrement buttons in Chrome.
			
 
				+ */
			
 
				+
			
 
				+[type="number"]::-webkit-inner-spin-button,
			
 
				+[type="number"]::-webkit-outer-spin-button {
			
 
				+  height: auto;
			
 
				+}
			
 
				+
			
 
				+/**
			
 
				+ * 1. Correct the odd appearance in Chrome and Safari.
			
 
				+ * 2. Correct the outline style in Safari.
			
 
				+ */
			
 
				+
			
 
				+[type="search"] {
			
 
				+  -webkit-appearance: textfield; /* 1 */
			
 
				+  outline-offset: -2px; /* 2 */
			
 
				+}
			
 
				+
			
 
				+/**
			
 
				+ * Remove the inner padding in Chrome and Safari on macOS.
			
 
				+ */
			
 
				+
			
 
				+[type="search"]::-webkit-search-decoration {
			
 
				+  -webkit-appearance: none;
			
 
				+}
			
 
				+
			
 
				+/**
			
 
				+ * 1. Correct the inability to style clickable types in iOS and Safari.
			
 
				+ * 2. Change font properties to `inherit` in Safari.
			
 
				+ */
			
 
				+
			
 
				+::-webkit-file-upload-button {
			
 
				+  -webkit-appearance: button; /* 1 */
			
 
				+  font: inherit; /* 2 */
			
 
				+}
			
 
				+
			
 
				+/* Interactive
			
 
				+   ========================================================================== */
			
 
				+
			
 
				+/*
			
 
				+ * Add the correct display in Edge, IE 10+, and Firefox.
			
 
				+ */
			
 
				+
			
 
				+details {
			
 
				+  display: block;
			
 
				+}
			
 
				+
			
 
				+/*
			
 
				+ * Add the correct display in all browsers.
			
 
				+ */
			
 
				+
			
 
				+summary {
			
 
				+  display: list-item;
			
 
				+}
			
 
				+
			
 
				+/* Misc
			
 
				+   ========================================================================== */
			
 
				+
			
 
				+/**
			
 
				+ * Add the correct display in IE 10+.
			
 
				+ */
			
 
				+
			
 
				+template {
			
 
				+  display: none;
			
 
				+}
			
 
				+
			
 
				+/**
			
 
				+ * Add the correct display in IE 10.
			
 
				+ */
			
 
				+
			
 
				+[hidden] {
			
 
				+  display: none;
			
 
				+}
			
 
				+
			
 
				+* {
			
 
				+  -webkit-box-sizing: border-box;
			
 
				+-moz-box-sizing: border-box;
			
 
				+box-sizing: border-box;
			
 
				+}
			
--- a/src/style/style.css
+++ b/src/style/style.css
@@ -0,0 +1,100 @@
 
				+@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');
			
 
				+  font-weight: normal;
			
 
				+  font-style: normal;
			
 
				+}
			
 
				+
			
 
				+[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;
			
 
				+  text-transform: none;
			
 
				+  line-height: 1;
			
 
				+
			
 
				+  /* Better Font Rendering =========== */
			
 
				+  -webkit-font-smoothing: antialiased;
			
 
				+  -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-angle-double-down:hover:after {
			
 
				+  color: #ff6633;
			
 
				+}
			
 
				+
			
 
				+.icon-calendar:before {
			
 
				+  content: "\f073";
			
 
				+  top: 30%;
			
 
				+  right: 20px;
			
 
				+
			
 
				+}
			
 
				+.icon-tripadvisor:before {
			
 
				+  content: "\f262";
			
 
				+  left: 150px;
			
 
				+  
			
 
				+
			
 
				+}
			
 
				+.icon-clock:before {
			
 
				+  content: "\e94e";
			
 
				+
			
 
				+}
			
 
				+.icon-user:before {
			
 
				+  content: "\e971";
			
 
				+}
			
 
				+.icon-users:before {
			
 
				+  content: "\e972";
			
 
				+}
			
 
				+.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;
			
 
				+}
			
 
				+
			
 
				+