andrew-ml · DanilRotan · May 30, 2019 · May 30, 2019 · May 30, 2019 · May 30, 2019
diff --git a/Danil/Olios_Template/img/LOGO.svg b/Danil/Olios_Template/img/LOGO.svg
diff --git a/Danil/Olios_Template/img/basket.svg b/Danil/Olios_Template/img/basket.svg
diff --git a/Danil/Olios_Template/img/bg.jpg b/Danil/Olios_Template/img/bg.jpg
diff --git a/Danil/Olios_Template/img/home.svg b/Danil/Olios_Template/img/home.svg
diff --git a/Danil/Olios_Template/img/in.svg b/Danil/Olios_Template/img/in.svg
diff --git a/Danil/Olios_Template/img/logo.png b/Danil/Olios_Template/img/logo.png
diff --git a/Danil/Olios_Template/img/[email protected] b/Danil/Olios_Template/img/[email protected]
diff --git a/Danil/Olios_Template/img/[email protected] b/Danil/Olios_Template/img/[email protected]
diff --git a/Danil/Olios_Template/img/search.svg b/Danil/Olios_Template/img/search.svg
diff --git a/Danil/Olios_Template/index.html b/Danil/Olios_Template/index.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="ru">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Olios</title>
+    <link rel="icon" href="img/logo.png" type="image/png" />
+    <link rel="stylesheet" href="style.css" />
+    <link
+      href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+  <body>
+    <div class="home">
+      <header class="header">
+        <div class="bg_text">
+          <h2>Newest</h2>
+        </div>
+        <div class="header_content">
+          <h1>Olios</h1>
+          <p>Newest furniture shop template</p>
+          <button>View more</button>
+        </div>
+      </header>
+      <aside class="aside">
+        <div class="logo">
+          <a href="#"><img src="img/LOGO.svg" alt="/"></a>
+          </a>
+        </div>
+        <nav class="nav">
+          <ul>
+            <li class="nav_logo">
+              <a href="#"
+                ><svg class="nav_home" xmlns="http://www.w3.org/2000/svg" width="26" height="32">
+                  <path
+
+                    fill-rule="evenodd"
+                    d="M13 3.743l10 10V29h-5v-7a2 2 0 0 0-2-2h-6a2 2 0 0 0-2 2v7H3V13.743l10-10m.884-3.359a1.249 1.249 0 0 0-1.768 0L.586 11.914A2 2 0 0 0 0 13.328V30a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2v-7h4v7a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2V13.328a2 2 0 0 0-.586-1.414L13.884.384z"
+                  />
+                </svg>
+              </a>
+            </li>
+            <li class="nav_logo">
+              <a href="#"
+                ><svg xmlns="http://www.w3.org/2000/svg" width="36" height="32">
+                  <path
+                    fill="#D8D8D8"
+                    fill-rule="evenodd"
+                    d="M33 9h-5.095a1.526 1.526 0 0 0-.132-.294l-4.999-8a1.502 1.502 0 0 0-2.547 1.588L24.418 9H11.582l4.192-6.706A1.5 1.5 0 0 0 13.227.706l-5 8A1.526 1.526 0 0 0 8.095 9H3a3 3 0 0 0-3 3v2c0 1.421.991 2.604 2.317 2.915l3.804 12.933A3.002 3.002 0 0 0 9 32h18a3.002 3.002 0 0 0 2.879-2.152l3.804-12.933A2.998 2.998 0 0 0 36 14v-2a3 3 0 0 0-3-3zM3 12h30v2H3v-2zm24 17l-18.001.002L5.47 17h25.06L27 29z"
+                  />
+                </svg>
+              </a>
+            </li>
+            <li>
+              <a href="#"
+                ><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">
+                  <path
+                    fill="#D8D8D8"
+                    fill-rule="evenodd"
+                    d="M20 0C13.373 0 8 5.373 8 12c0 2.772.949 5.318 2.529 7.349L.439 29.439A1.494 1.494 0 0 0 0 30.5a1.496 1.496 0 0 0 2.56 1.06l10.09-10.089A11.927 11.927 0 0 0 20 24c6.627 0 12-5.373 12-12S26.627 0 20 0zm0 21c-4.963 0-9-4.037-9-9s4.037-9 9-9 9 4.037 9 9-4.037 9-9 9z"
+                  />
+                </svg>
+              </a>
+            </li>
+          </ul>
+        </nav>
+        <div class="add">
+          <a href="#"
+            ><svg xmlns="http://www.w3.org/2000/svg" width="27" height="32">
+              <path
+                fill="#D8D8D8"
+                fill-rule="evenodd"
+                d="M25 32H2c-1.103 0-2-.898-2-2V9c0-1.103.897-2 2-2h5.5a1.5 1.5 0 1 1 0 3H3v19h21V10h-4.5a1.5 1.5 0 0 1 0-3H25c1.103 0 2 .897 2 2v21c0 1.102-.897 2-2 2zm-5-15.5c0 .414-.168.789-.439 1.06l-5 5a1.496 1.496 0 0 1-2.121 0l-5-5a1.5 1.5 0 0 1 2.121-2.121L12 17.879V1.5a1.5 1.5 0 0 1 3 0v16.379l2.44-2.44A1.5 1.5 0 0 1 20 16.5z"
+              />
+            </svg>
+          </a>
+        </div>
+	  </aside>
+	  <div class="humburger">
+			<a href="#" class="menu-btn">
+					<span></span>
+			</a>
+	  </div>
+	  <div class="nav_right">
+
+	  </div>
+	</div>
+	<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
+
+	<script src="js/index.js">
+	</script>
+  </body>
+</html>
diff --git a/Danil/Olios_Template/index.js b/Danil/Olios_Template/index.js
@@ -0,0 +1,5 @@
+$(".menu-btn").on("click", function(event) {
+  event.preventDefault();
+  $(this).toggleClass("menu-btn-active");
+  $(".nav_right").toggleClass("nav_right_active");
+});
diff --git a/Danil/Olios_Template/style.css b/Danil/Olios_Template/style.css
@@ -0,0 +1,211 @@
+* {
+	padding: 0;
+	margin: 0;
+	box-sizing: border-box;
+}
+
+@-webkit-keyframes button {
+	from {
+		-webkit-transform: scale(1);
+		transform: scale(1);
+	}
+	to {
+		-webkit-transform: scale(0.9);
+		transform: scale(0.9);
+	}
+}
+
+body {
+	font-family: 'Lato', sans-serif;
+}
+
+.header {
+	position: relative;
+	width: 100%;
+	height: 100vh;
+	background: url(img/bg.jpg) center no-repeat;
+	background-size: cover;
+}
+
+.header_content {
+	position: relative;
+	z-index: 5;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+}
+
+.header_content h1 {
+	text-transform: uppercase;
+	font-size: 110px;
+	font-weight: 100;
+	margin-top: 138px;
+	margin-bottom: 28px;
+}
+
+.header_content p {
+	text-transform: uppercase;
+	font-size: 18px;
+	font-weight: 300;
+	margin-bottom: 21px;
+}
+
+.header_content button {
+	width: 215px;
+	height: 55px;
+	background-color: #0023ff;
+	border-radius: 50px;
+	text-transform: uppercase;
+	color: #ffffff;
+	font-size: 9px;
+	font-weight: 900;
+	cursor: pointer;
+	animation-name: button;
+	animation-duration: 1.5s;
+	animation-iteration-count: infinite;
+	animation-direction: alternate;
+	animation-timing-function: ease-in-out;
+	transition: all 0.5s ease;
+}
+
+.header_content button:hover {
+	background-color: #001cd3;
+}
+
+.bg_text {
+	position: absolute;
+	top: 130px;
+	left: 415px;
+	z-index: 0;
+}
+
+.bg_text h2 {
+	color: rgba(231, 231, 231, 0.7);
+	font-size: 200px;
+	font-weight: 900;
+	text-transform: uppercase;
+}
+
+.aside {
+	width: 75px;
+	height: 100vh;
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	background-color: #ffffff;
+}
+
+.logo {
+	display: flex;
+	justify-content: center;
+	margin-top: 25px;
+}
+
+.logo img {
+	width: 42px;
+	height: 42px;
+}
+
+.nav {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	margin-top: 115px;
+}
+
+.nav ul {
+	list-style: none;
+	text-align: center;
+}
+
+.nav_logo {
+	margin-bottom: 80px;
+}
+
+.add {
+	display: flex;
+	justify-content: center;
+	margin-top: 315px;
+}
+
+.nav_home {
+	fill: #D8D8D8;
+}
+
+.nav_home:hover {
+	fill: #001cd3;
+}
+
+.humburger {
+	position: fixed;
+	top: 75px;
+	right: 55px;
+	z-index: 5;
+	display: flex;
+	justify-content: flex-end;
+}
+
+.menu-btn {
+	position: relative;
+	box-shadow: 0 0 12.5px 0 rgba(219, 219, 219, 0.5);
+	width: 50px;
+	height: 50px;
+	background-color: #ffffff;
+	border-radius: 50%;
+}
+
+.menu-btn span {
+	position: absolute;
+	top: 50%;
+	margin-top: -1px;
+	left: 50%;
+	margin-left: -10px;
+	width: 20px;
+	height: 2px;
+	background-color: #0023ff;
+}
+
+.menu-btn span::before, .menu-btn span::after {
+	content: "";
+	display: block;
+	transition: 0.2s;
+	background-color: #0023ff;
+	width: 20px;
+	height: 2px;
+}
+
+.menu-btn span::before {
+	transform: translateY(-5px);
+}
+
+.menu-btn span::after {
+	transform: translateY(3px);
+}
+
+.menu-btn-active span {
+	height: 0;
+}
+
+.menu-btn-active span::before {
+	transform: translateY(0px);
+}
+
+.menu-btn-active span::after {
+	transform: translateY(0px);
+}
+
+.nav_right {
+	width: 185px;
+	height: 100vh;
+	position: fixed;
+	z-index: 3;
+	top: 0;
+	right: 0;
+	background-color: #ffffff;
+	transform: translateX(+100%);
+}
+
+.nav_right_active {
+	transform: translateX(0%);
+}
diff --git a/Danil/Weather/img/appstore.png b/Danil/Weather/img/appstore.png
diff --git a/Danil/Weather/img/[email protected] b/Danil/Weather/img/[email protected]
diff --git a/Danil/Weather/img/arrow.png b/Danil/Weather/img/arrow.png
diff --git a/Danil/Weather/img/[email protected] b/Danil/Weather/img/[email protected]
diff --git a/Danil/Weather/img/bg.png b/Danil/Weather/img/bg.png
diff --git a/Danil/Weather/img/[email protected] b/Danil/Weather/img/[email protected]
diff --git a/Danil/Weather/img/circle_blue.png b/Danil/Weather/img/circle_blue.png
diff --git a/Danil/Weather/img/circle_orange.png b/Danil/Weather/img/circle_orange.png
diff --git a/Danil/Weather/img/circle_white.png b/Danil/Weather/img/circle_white.png
diff --git a/Danil/Weather/img/circle_yelow.png b/Danil/Weather/img/circle_yelow.png
diff --git a/Danil/Weather/img/close.png b/Danil/Weather/img/close.png
diff --git a/Danil/Weather/img/cloudy.png b/Danil/Weather/img/cloudy.png
diff --git a/Danil/Weather/img/[email protected] b/Danil/Weather/img/[email protected]
diff --git a/Danil/Weather/img/[email protected] b/Danil/Weather/img/[email protected]
diff --git a/Danil/Weather/img/diamond.png b/Danil/Weather/img/diamond.png
diff --git a/Danil/Weather/img/facebook.png b/Danil/Weather/img/facebook.png
diff --git a/Danil/Weather/img/[email protected] b/Danil/Weather/img/[email protected]
diff --git a/Danil/Weather/img/[email protected] b/Danil/Weather/img/[email protected]
diff --git a/Danil/Weather/img/fun-weather.png b/Danil/Weather/img/fun-weather.png
diff --git a/Danil/Weather/img/[email protected] b/Danil/Weather/img/[email protected]
diff --git a/Danil/Weather/img/[email protected] b/Danil/Weather/img/[email protected]
diff --git a/Danil/Weather/img/google-play.png b/Danil/Weather/img/google-play.png
diff --git a/Danil/Weather/img/[email protected] b/Danil/Weather/img/[email protected]
diff --git a/Danil/Weather/img/icon-cloudy.png b/Danil/Weather/img/icon-cloudy.png
diff --git a/Danil/Weather/img/[email protected] b/Danil/Weather/img/[email protected]
diff --git a/Danil/Weather/img/icon-rainy.png b/Danil/Weather/img/icon-rainy.png
diff --git a/Danil/Weather/img/[email protected] b/Danil/Weather/img/[email protected]
diff --git a/Danil/Weather/img/icon-sunny.png b/Danil/Weather/img/icon-sunny.png
diff --git a/Danil/Weather/img/image-center.png b/Danil/Weather/img/image-center.png
diff --git a/Danil/Weather/img/[email protected] b/Danil/Weather/img/[email protected]
diff --git a/Danil/Weather/img/image-left.png b/Danil/Weather/img/image-left.png
diff --git a/Danil/Weather/img/[email protected] b/Danil/Weather/img/[email protected]
diff --git a/Danil/Weather/img/image-right.png b/Danil/Weather/img/image-right.png
diff --git a/Danil/Weather/img/[email protected] b/Danil/Weather/img/[email protected]
diff --git a/Danil/Weather/img/instagram.png b/Danil/Weather/img/instagram.png
diff --git a/Danil/Weather/img/[email protected] b/Danil/Weather/img/[email protected]
diff --git a/Danil/Weather/img/[email protected] b/Danil/Weather/img/[email protected]
diff --git a/Danil/Weather/img/left-arrow.png b/Danil/Weather/img/left-arrow.png
diff --git a/Danil/Weather/img/[email protected] b/Danil/Weather/img/[email protected]
diff --git a/Danil/Weather/img/list.png b/Danil/Weather/img/list.png
diff --git a/Danil/Weather/img/main_bg.png b/Danil/Weather/img/main_bg.png
diff --git a/Danil/Weather/img/open.png b/Danil/Weather/img/open.png
diff --git a/Danil/Weather/img/palette.png b/Danil/Weather/img/palette.png
diff --git a/Danil/Weather/img/phone-image.png b/Danil/Weather/img/phone-image.png
diff --git a/Danil/Weather/img/[email protected] b/Danil/Weather/img/[email protected]
diff --git a/Danil/Weather/img/phone-image_1.png b/Danil/Weather/img/phone-image_1.png
diff --git a/Danil/Weather/img/[email protected] b/Danil/Weather/img/[email protected]
diff --git a/Danil/Weather/img/phone-image_2.png b/Danil/Weather/img/phone-image_2.png
diff --git a/Danil/Weather/img/[email protected] b/Danil/Weather/img/[email protected]
diff --git a/Danil/Weather/img/phone.png b/Danil/Weather/img/phone.png
diff --git a/Danil/Weather/img/[email protected] b/Danil/Weather/img/[email protected]
diff --git a/Danil/Weather/img/rainy.png b/Danil/Weather/img/rainy.png
diff --git a/Danil/Weather/img/[email protected] b/Danil/Weather/img/[email protected]
diff --git a/Danil/Weather/img/[email protected] b/Danil/Weather/img/[email protected]
diff --git a/Danil/Weather/img/right-arrow.png b/Danil/Weather/img/right-arrow.png
diff --git a/Danil/Weather/img/[email protected] b/Danil/Weather/img/[email protected]
diff --git a/Danil/Weather/img/screen-cloudy.png b/Danil/Weather/img/screen-cloudy.png
diff --git a/Danil/Weather/img/[email protected] b/Danil/Weather/img/[email protected]
diff --git a/Danil/Weather/img/screen-rainy.png b/Danil/Weather/img/screen-rainy.png
diff --git a/Danil/Weather/img/[email protected] b/Danil/Weather/img/[email protected]
diff --git a/Danil/Weather/img/screen-sunny-2.png b/Danil/Weather/img/screen-sunny-2.png
diff --git a/Danil/Weather/img/[email protected] b/Danil/Weather/img/[email protected]
diff --git a/Danil/Weather/img/scroll_down.png b/Danil/Weather/img/scroll_down.png
diff --git a/Danil/Weather/img/sunny.png b/Danil/Weather/img/sunny.png
diff --git a/Danil/Weather/img/[email protected] b/Danil/Weather/img/[email protected]
diff --git a/Danil/Weather/img/[email protected] b/Danil/Weather/img/[email protected]
diff --git a/Danil/Weather/img/twitter.png b/Danil/Weather/img/twitter.png
diff --git a/Danil/Weather/img/[email protected] b/Danil/Weather/img/[email protected]
diff --git a/Danil/Weather/img/[email protected] b/Danil/Weather/img/[email protected]