modul

css/clean.css

@@ -0,0 +1,43 @@
+ html, body, div, span, applet, object, iframe,
+    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+    a, abbr, acronym, address, big, cite, code,
+    del, dfn, em, img, ins, kbd, q, s, samp,
+    small, strike, strong, sub, sup, tt, var,
+    b, u, i, center,
+    dl, dt, dd, ol, ul, li,
+    fieldset, form, label, legend,
+    table, caption, tbody, tfoot, thead, tr, th, td,
+    article, aside, canvas, details, embed, 
+    figure, figcaption, footer, header, hgroup, 
+    menu, nav, output, ruby, section, summary,
+    time, mark, audio, video {
+    	margin: 0;
+    	padding: 0;
+    	border: 0;
+    	font-size: 100%;
+    	font: inherit;
+    	vertical-align: baseline;
+    }
+    /* HTML5 display-role reset for older browsers */
+    article, aside, details, figcaption, figure, 
+    footer, header, hgroup, menu, nav, section {
+    	display: block;
+    }
+    body {
+    	line-height: 1;
+    }
+    ol, ul {
+    	list-style: none;
+    }
+    blockquote, q {
+    	quotes: none;
+    }
+    blockquote:before, blockquote:after,
+    q:before, q:after {
+    	content: '';
+    	content: none;
+    }
+    table {
+    	border-collapse: collapse;
+    	border-spacing: 0;
+    }

css/style.css

@@ -0,0 +1,666 @@
+*,
+*:after,
+*:before {
+  box-sizing: border-box;
+}
+body{
+	font: 14px/1.57 ;
+	font-family: 'Open Sans', sans-serif;
+  color: rgb(96, 96, 96);
+}
+
+.wrapper{
+	display: flex;
+	flex-direction: column;
+	max-height: 100vh;
+}
+.header{
+	display: flex;
+	background:#fff;
+	justify-content: center;
+	padding: 15px;
+}
+.header-nav{
+	display: flex;
+	align-items: center;
+}
+.header-burger{
+  display: none;
+}
+.header-menu{
+	display: inline-flex;
+}
+.header-logo{
+	display: inline-flex;
+	align-items: center;
+	margin: 0 125px ; 
+}
+.header-logo img{
+	margin-left: -50%;
+}
+.header-menu a{
+	text-decoration: none;
+	color: rgb(96, 96, 96);
+	margin:0 20px;
+	left: 100%;
+}
+.header-menu a:hover{
+  color: rgb(83, 99, 219);
+  border-bottom: 2px solid rgb(83, 99, 219);
+  width: 30px;
+}
+#menu__toggle {
+  opacity: 0; 
+}
+.menu__btn {
+  display: flex;
+  align-items: center; 
+  position: fixed;
+  top: 20px;
+  left: 20px;
+  width: 26px;
+  height: 26px;
+  cursor: pointer;
+  opacity: 0;
+  z-index: 99;
+}
+.menu__btn > span,
+.menu__btn > span::before,
+.menu__btn > span::after {
+  display: block;
+  position: absolute;
+  width: 100%;
+  height: 2px;
+  background-color: #616161;
+}
+.menu__btn > span::before {
+  content: '';
+  top: -8px;
+}
+.menu__btn > span::after {
+  content: '';
+  top: 8px;
+}
+.intro{
+  display: flex;
+  position: relative;
+  background:url('../img/img-visual.jpg');
+  background-size: cover ;
+  background-position: 50% 50%;
+  justify-content: center;
+  align-items: center;
+  height: calc(100vh - 98px);
+  padding:15px;
+}
+.intro:after{
+  content:'';
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  position: absolute;
+  background-color: rgba(83, 99, 219, 0.7);
+}
+.intro-form{ 
+  display: flex;
+  background: #fff;
+  flex-direction: column;
+  z-index:100;
+  border-radius: 20px;
+  margin-left: 10vw;
+}
+.intro-form p{
+  color: rgba(83, 99, 219);
+  margin: 40px 30px 10px;
+}
+.btn{
+  background: rgba(83, 99, 219);
+  color: #fff;
+  border-radius: 10px;
+  border:none;
+  margin: 25px 25px 35px 75px;
+  max-width: 180px;
+  height: 55px;
+}
+.btn a{
+  text-decoration: none;
+  color: #fff;
+}
+input[type="text"],
+select {
+  display: inline-flex;
+  height: 50px;
+  border-radius: 3px;
+  box-shadow: none;
+  border: 1px solid #ccc;
+  padding: 3px;
+  width:230px; 
+  margin: 20px 40px 0 30px;
+  background: #d5d5d5;
+}
+.intro-text{
+  color:#fff ;
+  z-index: 100;
+  margin-left: 100px;
+}
+.intro-text H1{
+  font-size: 48px;
+  font-weight: 800;
+  line-height: 70px;
+  margin-bottom: 70px;
+}
+.intro-text p{
+  font-family: 'Satisfy', cursive;
+      font-size: 1.8em;
+}
+.info{
+height: auto;
+ align-content: center;
+}
+
+.info-container{
+  margin-bottom: 100px;
+}
+.info-box{
+  display: flex;
+   flex-wrap: nowrap;
+   background: #fff;
+   margin: 15px;
+   border-radius: 10px;
+   overflow-x: hidden;
+   box-shadow: 0px 0px 18px -4px rgba(0,0,0,0.75);
+}
+.info-box img{
+  object-fit:cover; 
+  width: 270px;
+  height: 300px;
+  overflow-x: hidden;
+}
+.info-txt{
+  width: 300px;
+  text-align: left;
+  align-items: center;
+  padding: 50px 30px;
+}
+.info-txt h3{
+  font-weight: 600;
+  margin-bottom: 30px;
+}
+.info-txt p{
+  margin-bottom: 30px;
+}
+.info-txt span{
+  font-size: 0.9em;
+  color: #CDCCCC;
+}
+.info-content{
+  display: flex;
+  justify-content: center;
+   align-content: center;
+}
+.info-text{
+  margin:100px 0;
+  align-items: center;
+  text-align: center;
+}
+.info-text h2{
+  color:rgb(83,96,219);
+  font-size: 2em;
+  font-weight: 600;
+  margin: 15px;
+}
+.info-text p{
+  font-family: 'Satisfy', cursive;
+font-size: 1.5em;
+margin: 15px;
+}
+.ch-box{
+  display: flex;
+  position: relative;
+  background:url('../img/lotus.png');
+  background-size: cover ;
+  background-position: 50% 50%;
+  justify-content: center;
+  align-items: center;
+/*  height: calc(100vh - 98px);*/
+  padding:15px;
+}
+.card-holder {
+  display: flex;
+  justify-content: center;
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  max-width: 475px;
+  margin: 20px;
+  border: solid 1px silver;
+  border-radius: 10px;
+  overflow-x: hidden;
+  background: #fff;
+  box-shadow: 0px 0px 35px -14px rgba(0,0,0,0.68);
+}
+
+.price {
+  display:inline-flex;
+  justify-content:center;
+  background: rgb(91,108,235);
+  width: 100%;
+  max-width: 100%;
+  padding:50px;
+  
+}
+.price h3{
+  font-size: 3em;
+  color:#fff;
+  margin:-10px 0 0 0;
+}
+.price p {
+  text-align: center;
+  color: #fff;
+  font-weight: bold;
+  font-size: 1.5em;
+}
+.price p:last-child{
+  margin-top: 20px;
+  font-size: 1.2em;
+}
+.btn-cont {
+  display: flex;
+  background: rgb(91,108,235);
+  text-decoration: none;
+  color: #fff;
+  margin-bottom: 50px;
+  padding: 10px;
+  border-radius: 15px;
+  width:150px;
+  vertical-align:middle;
+  justify-content: center;
+}
+.card-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding:25px 0;
+}
+
+.card-content p{
+  display: block;
+  padding: 10px;
+  margin:15px;
+  
+}
+.footer{
+  display: block;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 10vh;
+  background: #5063d9;
+}
+.footer-duwn{
+ background: #586ceb;
+ margin: 0;
+ display: flex;
+ justify-content: center;
+  padding: 100px ;
+  color: #fff;
+}
+.footer-page{
+  display: flex;
+  justify-content: center;
+  color: #818fe8;
+  align-items: center;
+  height: 100%;
+}
+.about-duwn{
+  width: 450px ;
+  display: block;
+  margin-right: 200px;
+}
+.social-networks{
+   margin: 15px 0 0 55px;
+text-align: left;
+}
+.social-networks a{
+  text-decoration: none;
+}
+.about-icon{
+  margin: 15px;
+}
+.about-icon li{
+  display: inline;
+  margin: 5px;
+}
+.contact-duwm{
+  display: flex;
+  flex-direction: column;
+}
+.c-duwn{
+  display: inline-flex;
+  max-width: 500px;
+}
+.dl{
+  margin-right: 15px 0;
+  display: inline-flex;
+}
+.phone{
+  display: inline-flex;
+}
+.ph0ne{
+  display: flex;
+  flex-direction: column;
+}
+.u-duwn{
+      margin-left: 20px;
+}
+.u-duwn h2{
+      font-weight: 600;
+}
+.dl a{
+  text-decoration: none;
+  margin: 15px 0 0 15px ;
+  color: #fff;
+}
+.about-txt-h{
+  margin-bottom: 15px;
+}
+.about-txt-h h2{
+    font-weight: 600;
+}
+.photo{
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+.g-photo{
+  object-fit: cover;
+  width: 25%;
+  margin:-2px 0;
+}
+.g-photo img{
+  width: 100%;
+}
+.photo a{
+  display: block;
+  position: relative; 
+}
+.photo a:after { 
+  content: ''; 
+  position: absolute; 
+  top: 0;
+  left: 0; 
+  right: 0;
+  bottom: 0;
+  background: rgba(83, 99, 219, 0.7);;
+  opacity: 0; 
+}
+.photo a:before {
+  content: ''; 
+  position: absolute;
+  top: 40%;
+  left: 40%;
+  right: 40%;
+  bottom: 40%;
+  background: url(../img/icon-search.png);
+  opacity: 0; 
+  background-repeat:no-repeat;
+  z-index: 256;
+}
+.photo>a:hover:before,
+.photo>a:hover:after {
+  opacity: 1; 
+}
+
+@font-face {
+  font-family: 'icomoon';
+  src:  url('../fonts/icomoon.eot?aaw3ee');
+  src:  url('../fonts/icomoon.eot?aaw3ee#iefix') format('embedded-opentype'),
+    url('../fonts/icomoon.ttf?aaw3ee') format('truetype'),
+    url('../fonts/icomoon.woff?aaw3ee') format('woff'),
+    url('../fonts/icomoon.svg?aaw3ee#icomoon') format('svg');
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+
+[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;
+  
+  /* Enable Ligatures ================ */
+  letter-spacing: 0;
+  -webkit-font-feature-settings: "liga";
+  -moz-font-feature-settings: "liga=1";
+  -moz-font-feature-settings: "liga";
+  -ms-font-feature-settings: "liga" 1;
+  font-feature-settings: "liga";
+  -webkit-font-variant-ligatures: discretionary-ligatures;
+  font-variant-ligatures: discretionary-ligatures;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-position:before {
+  content: "\e904";
+  color: #fff;
+  font-size: 20px;
+}
+.icon-pinterest-p:before {
+  content: "\e903";
+    color: #fff;
+  font-size: 20px;
+}
+.icon-google:before {
+  content: "\e900";text-decoration: none;
+  color: #fff;
+  font-size: 20px;
+}
+.icon-facebook:before {
+  content: "\e901";
+    color: #fff;
+  font-size: 20px;
+}
+.icon-twitter:before {
+  content: "\e902";
+    color: #fff;
+  font-size: 20px;
+
+}
+.icon-phone:before {
+  content: "\e942";
+  color: #fff;
+  font-size: 20px;
+}
+.icon-envelop:before {
+  content: "\e945";
+  color: #fff;
+  font-size: 20px;
+}
+.icon-earth:before {
+  content: "\e9ca";
+  color: #fff;
+  font-size: 20px;
+}
+.icon-instagram:before {
+  content: "\ea92";
+  color: #fff;
+  font-size: 20px;
+}
+.phone{
+  text-decoration: none;
+  color: #fff;
+}
+
+@media (max-width: 960px){
+.header-logo img{
+  margin-left: -26px;
+}
+.header-nav{
+  z-index: 8000;
+}
+.header-menu{
+  display: none;
+}
+.header-burger{
+  display: block;
+  position: fixed;
+  visibility: hidden;
+  top: -100%;
+  left: 0;
+  width: 100%;
+  height: auto;
+  margin: 0;
+  padding: 10px 0;
+  list-style: none;
+  text-align: center;
+  background-color:#7A89F6;
+  box-shadow: 1px 0px 6px rgba(0, 0, 0, .2);
+  z-index: -1;
+}
+.header-burger li{
+	margin: 15px;
+}
+.menu__item {
+  display: block;
+  padding: 12px 24px;
+  color: #fff;
+  font-weight: 600;
+  text-decoration: none;
+}
+#menu__toggle:checked ~ .menu__btn > span {
+  transform: rotate(45deg);
+}
+#menu__toggle:checked ~ .menu__btn > span::before {
+  top: 0;
+  transform: rotate(0);
+}
+#menu__toggle:checked ~ .menu__btn > span::after {
+  top: 0;
+  transform: rotate(90deg);
+}
+#menu__toggle:checked ~ .header-burger {
+  visibility: visible;
+  left: 0;
+  top: 0;
+  z-index: 6;
+}
+.menu__btn > span,
+.menu__btn > span::before,
+.menu__btn > span::after {
+  transition-duration: .25s;
+}
+.menu__btn{
+	opacity: 1;
+}
+.header-burger {
+  transition-duration: 0.25s;
+}
+.menu__item {
+  transition-duration: 0.25s;
+}
+.intro{
+  flex-direction: column-reverse;
+  height: 100vh;
+  padding: 15px;
+}
+.intro-form{
+  margin :15px 15px;
+
+}
+.intro-text{
+  text-align: center;
+  margin-left: -0vw;
+}
+.info{
+  display: flex;
+  flex-direction: column;
+}
+.info-content{
+  display: flex;
+  flex-direction: column;
+}
+.info-txt{
+  width: auto;
+  align-content: center;
+}
+
+.info-box img{
+  min-width: 270px;
+  height: auto;
+}
+.info-container{
+  margin-bottom: 15px;
+}
+.footer-duwn{
+  flex-direction: column;
+  padding: 100px 10px 100px 10px;
+ }
+.about-duwn{
+  width: 100%;
+  margin: 0;
+  margin-right: 10px;
+}
+.card{
+  width: 90vw;
+}
+.contact-duwn{
+  margin-top: 50px;
+}
+.c-duwn{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.card-holder {
+  flex-direction: column;
+  height: 100%;
+  background-position: 25% 25%;
+}
+.about-txt-h{
+  text-align: center;
+}
+.about-txt-p{
+  text-align: center;
+}
+.u-duwn{
+   text-align: center;
+}
+.info-txt{
+  text-align: center;
+}
+.photo{
+width: 100%;
+}
+.g-photo{
+  width: 50%;
+  }}
+@media (max-width: 560px){
+  .intro{
+  flex-direction: column-reverse;
+  height: 140vh;
+}
+.info-box img{
+  width: 100%;
+}
+.info-box{
+  flex-direction: column;
+}
+.text-galery{
+  margin-bottom: 50px;
+}
+.g-photo{
+  width: 100%;
+  }
+}

index.html

@@ -0,0 +1,216 @@
+<!DOCTYPE html >
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>Pavlov_Maik_FSA3</title>
+	<link rel="stylesheet" href="css/clean.css">
+	<link rel="stylesheet" href="css/style.css">
+	<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap" rel="stylesheet">
+	<link rel="stylesheet" href="css/icon.css">
+	<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&display=swap" rel="stylesheet">
+	<link href="https://fonts.googleapis.com/css?family=Satisfy&display=swap" rel="stylesheet">
+	<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
+    <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<script></script>
+</head>
+<body>
+	<div class="wraper">
+		<header class="header">
+			<nav class="header-nav">
+				<input id="menu__toggle" type="checkbox" />
+  				<label class="menu__btn" for="menu__toggle"><span></span>
+  				</label>
+  				<ul class="header-burger">
+					<li><a href="#" class="menu__item">About us</a></li>
+					<li><a href="#" class="menu__item">Reservation</a></li>
+					<li><a href="#" class="menu__item">Galery</a></li>
+					<li><a href="#" class="menu__item">Blog</a></li>
+					<li><a href="#" class="menu__item">Elements</a></li>
+					<li><a href="#" class="menu__item">Shop</a></li>
+				</ul>
+				<ul class="header-menu">
+					<li><a href="#" >About us</a></li>
+					<li><a href="#" >Reservation</a></li>
+					<li><a href="#" >Galery</a></li>
+				</ul>
+				<a href="#" class="header-logo" ><img src="img/logo.png" alt="LOGO"></a>
+				<ul class="header-menu">
+					<li><a href="#" >Blog</a></li>
+					<li><a href="#" >Elements</a></li>
+					<li><a href="#" >Shop</a></li>
+				</ul>
+			</nav>
+		</header>
+		<main>
+			<div class="intro">
+				<div class="intro-form">
+					<p>Trial class</p>
+					<input type="text" placeholder="Enter You Name">
+					<input type="text" placeholder="Enter You Phone">
+					<select>
+						<option value="Chose Your class">Chose your class</option>
+						<option value="1">1</option>
+						<option value="2">2</option>
+						<option value="3">3</option>
+					</select>
+					<button class="btn"><a href="#">Try it</a></button>
+				</div>
+				<div class="intro-text">
+					<h1>JUST BALANCE <br>YOUR MIND & BODY</h1>
+					<p>Create the healthy living <br> for yourself</p>
+				</div>
+			</div>
+			<div class="info-container">
+				<div class="info-text">
+					<h2>YOGA FEATURE PROGRAM</h2>
+					<p>Our Classes</p>
+				</div>
+				<div class="info">
+					<div class="info-content">
+					<div class="info-box">
+						<img src="img/info-girl.png" alt="photo girl">
+						<div class="info-txt">
+							<h3>YOGA FOR HEALTH</h3>
+							<p>Minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
+							<span>Ashtanga - Hatha</span>
+						</div>
+					</div>
+					<div class="info-box">
+						<img src="img/info-girl-up.png" alt="photo girl">
+						<div class="info-txt">
+							<h3>YOGA FOR LOSE WEIGHT</h3>
+							<p>Minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
+							<span>Ashtanga - Hatha</span>
+						</div>
+					</div>
+				</div>
+				<div class="info-content">
+					<div class="info-box">
+						<img src="img/info-children.png" alt="photo children">
+						<div class="info-txt">
+							<h3>YOGA FOR CHILDREN</h3>
+							<p>Minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
+							<span>Ashtanga - Hatha</span>
+						</div>
+					</div>
+					<div class="info-box">
+						<img src="img/info-old-children.png" alt="photo old children">
+						<div class="info-txt">
+							<h3>YOGA FOR ELDERY</h3>
+							<p>Minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
+							<span>Ashtanga - Hatha</span>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="photo">
+				<a href="#" class="g-photo"><img src="img/img-grid01.jpg" alt="pic"></a>
+				<a href="#" class="g-photo"><img src="img/img-grid02.jpg" alt="pic"></a>
+				<a href="#" class="g-photo"><img src="img/img-grid03.jpg" alt="pic"></a>
+				<a href="#" class="g-photo"><img src="img/img-grid04.jpg" alt="pic"></a>
+				<a href="#" class="g-photo"><img src="img/img-grid05.jpg" alt="pic"></a>
+				<a href="#" class="g-photo"><img src="img/img-grid06.jpg" alt="pic"></a>
+				<a href="#" class="g-photo"><img src="img/img-grid07.jpg" alt="pic"></a>
+				<a href="#" class="g-photo"><img src="img/img-grid08.jpg" alt="pic"></a>
+		</div>
+		<div class="ch-box">
+			<div class="card-holder">
+				  <div class="card">
+				    <div class="price">
+				      <p>$</p>
+				      <h3>49</h3>
+				      <p>/MONTH</p>
+				  </div>
+				    <div class="card-content">
+				    <p>ENTRY DATE: MON – FR</p>
+				    <p>ENTRY TIME: 8A.M – 8P.M</p>
+				    <p>NUTRITION ADVICER: NO</p>
+				      </div>
+				    <a href="#" class="btn-cont">Buy now</a>
+				  </div>
+				  <div class="card">
+				    <div class="price">
+				      <p>$</p>
+				      <h3>69</h3>
+				      <p>/MONTH</p>
+				  </div>
+				     <div class="card-content">
+				       <p>ENTRY DATE: MON – FR</p> 
+				       <p>ENTRY TIME: 8A.M – 8P.M</p>
+				       <p>NUTRITION ADVICER: YES</p>
+				      </div>
+				    <a href="#" class="btn-cont">Buy now</a>
+				  </div>
+				  <div class="card">
+				    <div class="price">
+				      <p>$</p>
+				      <h3>99</h3>
+				      <p>/MONTH</p>
+				  </div>
+				     <div class="card-content">
+				    <p>ENTRY DATE: MON – SUN</p>
+				    <p>ENTRY TIME: 8A.M – 8P.M</p>
+				    <p>NUTRITION ADVICER: YES</p>
+				      </div>
+				    <a href="#" class="btn-cont">Buy now</a>
+				  </div>
+				</div>
+		</div>
+		<div class="footer-duwn">
+				<div class="about-duwn">
+					<div class="about-txt-h">
+						<h2>ABOUT</h2>
+					</div>
+					<div class="about-txt-p"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad m inim veniam, quis nostrud exercitation toui ullamcomi laboris nisi ut aliquip ex ea commodo consequat.</p></div>
+					<div class="about-icon">
+						<ul class="social-networks">
+							<li><a href="#" class="icon-pinterest-p"></a></li>
+							<li><a href="#" class="icon-twitter"></a></li>
+							<li><a href="#" class="icon-facebook"></a></li>
+							<li><a href="#" class="icon-google"></a></li>
+							<li><a href="#" class="icon-instagram"></a></li>
+						</ul>
+					</div>
+				</div>
+				<div class="contact-duwn">
+					<div class="u-duwn">
+						<h2>CONTACT US</h2>
+					</div>
+					<div class="c-duwn">
+						<div class="lc-duwn">
+							<div class="dl maps">
+								<a href="#" class="icon-position"></a>
+								<a href="#">5419 Joseph Mountains<br>Apt. 716</a>
+							</div>
+							<div class="dl phone">
+								<a href="#" class="icon-phone"></a>
+								<div class="ph0ne">
+									<a href="tel:"+1 234 567 89>+1 234 567 89</a>
+									<a href="tel:+1 234 678 90">+1 234 678 90</a>
+								</div>
+							</div>
+						</div>
+						<div class="rc-duwn">
+							<div class="dl mail">
+								<a href="#" class="icon-envelop"></a>
+								<a href="#">joga.info@example.com</a>
+							</div>
+							<div class="dl adres">
+								<a href="#" class="icon-earth"></a>
+								<a href="#">www.example.com</a>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</main>
+		<footer class="footer">
+			<div class="footer-page">
+				<p>Copyright  ©  2016-2017 Yoga classes</p>
+			</div>
+		</footer>
+	</div>
+</body>
+</html>

slick/slick-theme.css

@@ -0,0 +1,204 @@
+@charset 'UTF-8';
+/* Slider */
+.slick-loading .slick-list
+{
+    background: #fff url('./ajax-loader.gif') center center no-repeat;
+}
+
+/* Icons */
+@font-face
+{
+    font-family: 'slick';
+    font-weight: normal;
+    font-style: normal;
+
+    src: url('./fonts/slick.eot');
+    src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('./fonts/slick.woff') format('woff'), url('./fonts/slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg');
+}
+/* Arrows */
+.slick-prev,
+.slick-next
+{
+    font-size: 0;
+    line-height: 0;
+
+    position: absolute;
+    top: 50%;
+
+    display: block;
+
+    width: 20px;
+    height: 20px;
+    padding: 0;
+    -webkit-transform: translate(0, -50%);
+    -ms-transform: translate(0, -50%);
+    transform: translate(0, -50%);
+
+    cursor: pointer;
+
+    color: transparent;
+    border: none;
+    outline: none;
+    background: transparent;
+}
+.slick-prev:hover,
+.slick-prev:focus,
+.slick-next:hover,
+.slick-next:focus
+{
+    color: transparent;
+    outline: none;
+    background: transparent;
+}
+.slick-prev:hover:before,
+.slick-prev:focus:before,
+.slick-next:hover:before,
+.slick-next:focus:before
+{
+    opacity: 1;
+}
+.slick-prev.slick-disabled:before,
+.slick-next.slick-disabled:before
+{
+    opacity: .25;
+}
+
+.slick-prev:before,
+.slick-next:before
+{
+    font-family: 'slick';
+    font-size: 20px;
+    line-height: 1;
+
+    opacity: .75;
+    color: white;
+
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.slick-prev
+{
+    left: -25px;
+}
+[dir='rtl'] .slick-prev
+{
+    right: -25px;
+    left: auto;
+}
+.slick-prev:before
+{
+    content: '←';
+}
+[dir='rtl'] .slick-prev:before
+{
+    content: '→';
+}
+
+.slick-next
+{
+    right: -25px;
+}
+[dir='rtl'] .slick-next
+{
+    right: auto;
+    left: -25px;
+}
+.slick-next:before
+{
+    content: '→';
+}
+[dir='rtl'] .slick-next:before
+{
+    content: '←';
+}
+
+/* Dots */
+.slick-dotted.slick-slider
+{
+    margin-bottom: 30px;
+}
+
+.slick-dots
+{
+    position: absolute;
+    bottom: -25px;
+
+    display: block;
+
+    width: 100%;
+    padding: 0;
+    margin: 0;
+
+    list-style: none;
+
+    text-align: center;
+}
+.slick-dots li
+{
+    position: relative;
+
+    display: inline-block;
+
+    width: 20px;
+    height: 20px;
+    margin: 0 5px;
+    padding: 0;
+
+    cursor: pointer;
+}
+.slick-dots li button
+{
+    font-size: 0;
+    line-height: 0;
+
+    display: block;
+
+    width: 20px;
+    height: 20px;
+    padding: 5px;
+
+    cursor: pointer;
+
+    color: transparent;
+    border: 0;
+    outline: none;
+    background: transparent;
+}
+.slick-dots li button:hover,
+.slick-dots li button:focus
+{
+    outline: none;
+}
+.slick-dots li button:hover:before,
+.slick-dots li button:focus:before
+{
+    opacity: 1;
+}
+.slick-dots li button:before
+{
+    font-family: 'slick';
+    font-size: 6px;
+    line-height: 20px;
+
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    width: 20px;
+    height: 20px;
+
+    content: '•';
+    text-align: center;
+
+    opacity: .25;
+    color: black;
+
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+.slick-dots li.slick-active button:before
+{
+    opacity: .75;
+    color: black;
+}

slick/slick.css

@@ -0,0 +1,119 @@
+/* Slider */
+.slick-slider
+{
+    position: relative;
+
+    display: block;
+    box-sizing: border-box;
+
+    -webkit-user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
+
+    -webkit-touch-callout: none;
+    -khtml-user-select: none;
+    -ms-touch-action: pan-y;
+        touch-action: pan-y;
+    -webkit-tap-highlight-color: transparent;
+}
+
+.slick-list
+{
+    position: relative;
+
+    display: block;
+    overflow: hidden;
+
+    margin: 0;
+    padding: 0;
+}
+.slick-list:focus
+{
+    outline: none;
+}
+.slick-list.dragging
+{
+    cursor: pointer;
+    cursor: hand;
+}
+
+.slick-slider .slick-track,
+.slick-slider .slick-list
+{
+    -webkit-transform: translate3d(0, 0, 0);
+       -moz-transform: translate3d(0, 0, 0);
+        -ms-transform: translate3d(0, 0, 0);
+         -o-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+}
+
+.slick-track
+{
+    position: relative;
+    top: 0;
+    left: 0;
+
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+}
+.slick-track:before,
+.slick-track:after
+{
+    display: table;
+
+    content: '';
+}
+.slick-track:after
+{
+    clear: both;
+}
+.slick-loading .slick-track
+{
+    visibility: hidden;
+}
+
+.slick-slide
+{
+    display: none;
+    float: left;
+
+    height: 100%;
+    min-height: 1px;
+}
+[dir='rtl'] .slick-slide
+{
+    float: right;
+}
+.slick-slide img
+{
+    display: block;
+}
+.slick-slide.slick-loading img
+{
+    display: none;
+}
+.slick-slide.dragging img
+{
+    pointer-events: none;
+}
+.slick-initialized .slick-slide
+{
+    display: block;
+}
+.slick-loading .slick-slide
+{
+    visibility: hidden;
+}
+.slick-vertical .slick-slide
+{
+    display: block;
+
+    height: auto;
+
+    border: 1px solid transparent;
+}
+.slick-arrow.slick-hidden {
+    display: none;
+}