commit

MySlider/css/main-Animation.css

@@ -0,0 +1,176 @@
+@import url('https://fonts.googleapis.com/css?family=Hammersmith+One|Playfair+Display:900|Roboto:100,300,400,900');
+
+html{
+	font-size: 10px;
+}
+
+.clearfix::after {
+	content:"";
+	display: block;
+	clear: both;
+	
+}
+
+body * {
+	box-sizing: border-box;
+}
+
+body {
+	margin: 0;
+	padding: 0;
+	font-family: "roboto", sans-serif;
+	font-size: 1.4rem;
+	overflow: hidden;
+}
+
+h1,h2,h3,h4 {
+	margin: 0;
+	padding: 0;
+}
+
+p {
+	font-weight: 100;
+	letter-spacing: 0.05em;
+}
+
+header {
+	background: url("../img/header-background.png") center top / cover;
+	height: 670px;
+}
+
+header .container {
+	width: 940px;
+	margin: 0 auto;
+}
+
+header .top-line .logo {
+	font-size: 3rem;
+	color: #42a0c4;
+	font-weight: 100;
+	float: left;
+}
+
+header .top-line .logo img {
+	position: relative;
+	top: 15px;
+}
+
+header .top-line .nav {
+	float: right;
+	margin-top: 35px;
+}
+
+header .top-line .nav ul {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+header .top-line .nav li {
+	padding: 0;
+	display: inline-block;
+	margin-left: 25px;
+}
+
+header .top-line .nav a{
+	font-size: 1.3rem;
+	font-weight: 900;
+	color: #fff;
+	text-decoration: none;
+	transition: color 0.5s ease;
+}
+
+header .top-line .nav a:hover {
+	color: #00e0d0;
+}
+
+header .slider {
+	position: relative;
+	width: 100%;
+	height: 500px;
+	overflow: hidden;
+
+}
+
+header .slides {
+	
+	display: flex;
+	flex-direction: row;
+	width: 100%;
+}
+
+header .slider .slide {
+	text-align: center;
+	display: inline-block;
+	width: 80%;
+	position: absolute;
+	left: 100px;
+}
+
+header .slider .slide h1 {
+	color: #fff;
+	font-weight: 900;
+	font-size: 3.2rem;
+	margin-top: 160px;
+	margin-bottom: 45px;
+	font-family: 'Playfair Display', sans-serif;
+}
+
+header .slider .slide h1::after {
+	content: "";
+	height: 1px;
+	width: 50px;
+	background-color: #00e0d0;
+	display: block;
+	position: relative;
+	left: 350px;
+	top: 20px;
+}
+
+
+header .slider .slide p {
+	color: #fff;
+	line-height: 24px;
+}
+
+header .slider .slide input[type="button"] {
+	background: none;
+	border: 1px solid #00e0d0;
+	padding: 10px 15px;
+	color: #00e0d0;
+	font-family: 'Hammersmith One', sans-serif;
+	font-size: 1.6rem;
+	margin-top: 40px;
+}
+
+header .slider .arrows img{
+	position: absolute;
+	z-index: 1;
+}
+
+header .slider .arrows img:first-child {
+	top: 50%;
+}
+
+header .slider .arrows img:last-child {
+	top: 50%;
+	right: 0;
+}
+
+/*header .slider .slide:nth-child(1){
+	
+}
+
+header .slider .slide:nth-child(2){
+	
+}
+
+header .slider .slide:nth-child(3){
+	
+}
+
+header .slider .slide:nth-child(4){
+	
+}
+*/
+

MySlider/css/main-noAnimation.css

@@ -0,0 +1,159 @@
+@import url('https://fonts.googleapis.com/css?family=Hammersmith+One|Playfair+Display:900|Roboto:100,300,400,900');
+
+html{
+	font-size: 10px;
+}
+
+.clearfix::after {
+	content:"";
+	display: block;
+	clear: both;
+	
+}
+
+body * {
+	box-sizing: border-box;
+}
+
+body {
+	margin: 0;
+	padding: 0;
+	font-family: "roboto", sans-serif;
+	font-size: 1.4rem;
+}
+
+h1,h2,h3,h4 {
+	margin: 0;
+	padding: 0;
+}
+
+p {
+	font-weight: 100;
+	letter-spacing: 0.05em;
+}
+
+header {
+	background: url("../img/header-background.png") center top / cover;
+	height: 670px;
+}
+
+header .container {
+	width: 940px;
+	margin: 0 auto;
+}
+
+header .top-line .logo {
+	font-size: 3rem;
+	color: #42a0c4;
+	font-weight: 100;
+	float: left;
+}
+
+header .top-line .logo img {
+	position: relative;
+	top: 15px;
+}
+
+header .top-line .nav {
+	float: right;
+	margin-top: 35px;
+}
+
+header .top-line .nav ul {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+header .top-line .nav li {
+	padding: 0;
+	display: inline-block;
+	margin-left: 25px;
+}
+
+header .top-line .nav a{
+	font-size: 1.3rem;
+	font-weight: 900;
+	color: #fff;
+	text-decoration: none;
+	transition: color 0.5s ease;
+}
+
+header .top-line .nav a:hover {
+	color: #00e0d0;
+}
+
+header .slider {
+	position: relative;
+	width: 100%;
+	height: 500px;
+}
+
+header .slider .slide {
+	text-align: center;
+	position: absolute;
+	opacity: 0;
+
+	left: 100px;
+	width: 80%;
+	transition: opacity 0.3s ease;
+	
+}
+
+header .slider .slide h1 {
+	color: #fff;
+	font-weight: 900;
+	font-size: 3.2rem;
+	margin-top: 160px;
+	margin-bottom: 45px;
+	font-family: 'Playfair Display', sans-serif;
+}
+
+header .slider .slide h1::after {
+	content: "";
+	height: 1px;
+	width: 50px;
+	background-color: #00e0d0;
+	display: block;
+	position: relative;
+	left: 350px;
+	top: 20px;
+}
+
+
+header .slider .slide p {
+	color: #fff;
+	line-height: 24px;
+}
+
+
+header .slider .slide:first-child {
+	opacity: 1;
+	z-index: 1;
+}
+
+header .slider .slide input[type="button"] {
+	background: none;
+	border: 1px solid #00e0d0;
+	padding: 10px 15px;
+	color: #00e0d0;
+	font-family: 'Hammersmith One', sans-serif;
+	font-size: 1.6rem;
+	margin-top: 40px;
+}
+
+header .slider .arrows img{
+	position: absolute;
+	z-index: 1;
+}
+
+header .slider .arrows img:first-child {
+	top: 50%;
+}
+
+header .slider .arrows img:last-child {
+	top: 50%;
+	right: 0;
+}
+
+

MySlider/css/main.css

@@ -0,0 +1,159 @@
+@import url('https://fonts.googleapis.com/css?family=Hammersmith+One|Playfair+Display:900|Roboto:100,300,400,900');
+
+html{
+	font-size: 10px;
+}
+
+.clearfix::after {
+	content:"";
+	display: block;
+	clear: both;
+	
+}
+
+body * {
+	box-sizing: border-box;
+}
+
+body {
+	margin: 0;
+	padding: 0;
+	font-family: "roboto", sans-serif;
+	font-size: 1.4rem;
+}
+
+h1,h2,h3,h4 {
+	margin: 0;
+	padding: 0;
+}
+
+p {
+	font-weight: 100;
+	letter-spacing: 0.05em;
+}
+
+header {
+	background: url("../img/header-background.png") center top / cover;
+	height: 670px;
+}
+
+header .container {
+	width: 940px;
+	margin: 0 auto;
+}
+
+header .top-line .logo {
+	font-size: 3rem;
+	color: #42a0c4;
+	font-weight: 100;
+	float: left;
+}
+
+header .top-line .logo img {
+	position: relative;
+	top: 15px;
+}
+
+header .top-line .nav {
+	float: right;
+	margin-top: 35px;
+}
+
+header .top-line .nav ul {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+header .top-line .nav li {
+	padding: 0;
+	display: inline-block;
+	margin-left: 25px;
+}
+
+header .top-line .nav a{
+	font-size: 1.3rem;
+	font-weight: 900;
+	color: #fff;
+	text-decoration: none;
+	transition: color 0.5s ease;
+}
+
+header .top-line .nav a:hover {
+	color: #00e0d0;
+}
+
+header .slider {
+	position: relative;
+	width: 100%;
+	height: 500px;
+}
+
+header .slider .slide {
+	text-align: center;
+	position: absolute;
+	opacity: 0;
+
+	left: 100px;
+	width: 80%;
+	transition: opacity 0.3s ease;
+	
+}
+
+header .slider .slide h1 {
+	color: #fff;
+	font-weight: 900;
+	font-size: 3.2rem;
+	margin-top: 160px;
+	margin-bottom: 45px;
+	font-family: 'Playfair Display', sans-serif;
+}
+
+header .slider .slide h1::after {
+	content: "";
+	height: 1px;
+	width: 50px;
+	background-color: #00e0d0;
+	display: block;
+	position: relative;
+	left: 350px;
+	top: 20px;
+}
+
+
+header .slider .slide p {
+	color: #fff;
+	line-height: 24px;
+}
+
+
+header .slider .slide:first-child {
+	opacity: 1;
+	z-index: 1;
+}
+
+header .slider .slide input[type="button"] {
+	background: none;
+	border: 1px solid #00e0d0;
+	padding: 10px 15px;
+	color: #00e0d0;
+	font-family: 'Hammersmith One', sans-serif;
+	font-size: 1.6rem;
+	margin-top: 40px;
+}
+
+header .slider .arrows img{
+	position: absolute;
+	z-index: 1;
+}
+
+header .slider .arrows img:first-child {
+	top: 50%;
+}
+
+header .slider .arrows img:last-child {
+	top: 50%;
+	right: 0;
+}
+
+

MySlider/index.html

@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>Site 7</title>
+	<link rel="stylesheet" href="css/main-Animation.css">
+</head>
+<body>
+	<header>
+		<div class="container">
+			<div class="top-line clearfix">
+				<div class="logo">
+					<img src="img/logo.png" alt="logo">
+					tajam
+				</div>
+				<div class="nav">
+					<ul>
+						<li><a href="#">HOME</a></li>
+						<li><a href="#">ABOUT</a></li>
+						<li><a href="#">EXPERTISE</a></li>
+						<li><a href="#">TEAMS</a></li>
+						<li><a href="#">WORKS</a></li>
+						<li><a href="#">PEOPLE SAY</a></li>
+						<li><a href="#">CONTACT</a></li>
+					</ul>
+				</div>
+			</div>
+			<div class="slider">
+				<div class="arrows">
+					<img src="img/slider-arrow-left.png" alt="img" id="arrow-left">
+					<img src="img/slider-arrow-right.png" alt="img" id="arrow-right">
+				</div>
+				<div class="slides">
+					<div class="slide">
+						<h1>We Are Awesome Creative Agency</h1>
+						<p>This is Photoshop's version  of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit.(1)</p>
+						<input type="button" value="LEARN MORE"><br>
+					</div>
+					<div class="slide">
+						<h1>We Are Awesome Creative Agency</h1>
+						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum maxime tenetur ullam, consectetur, dolorum, dolor eligendi atque praesentium corporis porro, quo veniam suscipit optio dolorem ducimus cupiditate accusantium dignissimos. Debitis accusantium quas, pariatur mollitia. Quas, unde. Totam magni harum architecto odit, consequatur autem ipsam eligendi.(2)</p>
+						<input type="button" value="LEARN MORE"><br>
+					</div>
+					<div class="slide">
+						<h1>We Are Awesome Creative Agency</h1>
+						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos, autem, nesciunt. Consequuntur totam, explicabo similique fuga architecto ea laborum, harum cupiditate ex reprehenderit pariatur doloribus aliquid obcaecati nam maiores voluptates officia id, sint nesciunt! A voluptatum ipsam recusandae aperiam sint, ducimus obcaecati nobis. Odit, at.(3)</p>
+						<input type="button" value="LEARN MORE"><br>
+					</div>
+					<div class="slide">
+						<h1>We Are Awesome Creative Agency</h1>
+						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate at, tempora eum nobis, dolore consequuntur. Delectus, dicta illum adipisci itaque modi aperiam consectetur, dolorem, natus mollitia labore facere architecto. Doloremque dolor, consequatur, rerum natus assumenda cum temporibus beatae saepe eligendi eaque corporis, ipsam sunt velit.(4)</p>
+						<input type="button" value="LEARN MORE"><br>
+					</div>
+				</div>
+				
+			</div>
+			
+		</div>
+	</header>
+
+	<script src="js/slider-Animation.js"></script>
+</body>
+</html>

MySlider/js/slider-Animation.js

@@ -0,0 +1,121 @@
+'use strict'
+var body = document.querySelector("body");
+var slider = document.querySelector(".slider");
+var slides = document.querySelector(".slides");
+var bodyWidth = +getComputedStyle(body).width.replace("px","");
+var arrowLeft = document.getElementById("arrow-left");
+var arrowRight = document.getElementById("arrow-right");
+var slideNum = 1;
+var	isCanSlide = true;
+for (let i = 0; i < slides.children.length; i++) {
+	slides.children[i].style.left = (100 + bodyWidth * i) + "px";
+}
+
+ function nextSlide(){
+ 	
+	if(slideNum < slides.children.length && isCanSlide){
+		isCanSlide = false;
+		for (var k = 0; k < slides.children.length; k++) {
+			slides.children[k].style.left = +getComputedStyle(slides.children[k]).left.replace("px","") - bodyWidth + "px";
+		}
+		slideNum++;
+		setTimeout(function(){
+			isCanSlide = true;
+		},1500)
+		for (let i = 0; i < dotContainer.children.length; i++) {
+				dotContainer.children[i].style.border = "1px solid #fff"; 
+				dotContainer.children[i].style.backgroundColor = "transparent"; 
+		}
+		var activeDot = document.getElementById(slideNum);
+		activeDot.style.border = "1px solid #00e0d0"; 
+		activeDot.style.backgroundColor = "#00e0d0"; 
+	}	
+	
+}
+
+arrowRight.onclick = nextSlide;
+
+function previousSlide(){
+	
+	if(slideNum > 1 && isCanSlide){
+		isCanSlide = false;
+		for (var k = 0; k < slides.children.length; k++) {
+			slides.children[k].style.left = +getComputedStyle(slides.children[k]).left.replace("px","") + bodyWidth  + "px";
+		}
+		slideNum--;
+		setTimeout(function(){
+			isCanSlide = true;
+		},1500)
+		for (let i = 0; i < dotContainer.children.length; i++) {
+				dotContainer.children[i].style.border = "1px solid #fff"; 
+				dotContainer.children[i].style.backgroundColor = "transparent"; 
+		}
+		var activeDot = document.getElementById(slideNum);
+		activeDot.style.border = "1px solid #00e0d0"; 
+		activeDot.style.backgroundColor = "#00e0d0"; 
+	}	
+	
+}
+
+arrowLeft.onclick = previousSlide;
+
+setTimeout(function(){
+	for (let i = 0; i < slides.children.length; i++) {
+		slides.children[i].style.transition = "all 1.5s ease";
+	}
+},1);
+
+///////////////////////////////////////////
+
+var dotContainer = document.createElement("div"); 
+dotContainer.className = "dot-container";
+dotContainer.setAttribute("style","position: absolute; top: 97%; left: 48%;")
+for (let i = 0; i < slides.children.length; i++) {
+	var dot = document.createElement("div");
+	dot.setAttribute("id",i + 1);
+	dot.onclick = function(){
+		if(isCanSlide){
+			for (let i = 0; i < dotContainer.children.length; i++) {
+				dotContainer.children[i].style.border = "1px solid #fff"; 
+				dotContainer.children[i].style.backgroundColor = "transparent"; 
+			}
+			this.style.border = "1px solid #00e0d0"; 
+			this.style.backgroundColor = "#00e0d0"; 
+		}
+		if(this.getAttribute("id") > slideNum){
+			if(slideNum < slides.children.length && isCanSlide){
+				isCanSlide = false;
+				for (var k = 0; k < slides.children.length; k++) {
+					slides.children[k].style.left = +getComputedStyle(slides.children[k]).left.replace("px","") - bodyWidth * (this.getAttribute("id") - slideNum) + "px";
+				}
+				slideNum += this.getAttribute("id") - slideNum;
+				setTimeout(function(){
+					isCanSlide = true;
+				},1500)
+			}	
+			
+		}
+		else if(this.getAttribute("id") < slideNum){
+			if(slideNum > 1 && isCanSlide){
+				isCanSlide = false;
+				for (var k = 0; k < slides.children.length; k++) {
+					slides.children[k].style.left = +getComputedStyle(slides.children[k]).left.replace("px","") + bodyWidth * (slideNum - this.getAttribute("id"))  + "px";
+				}
+				slideNum -= slideNum - this.getAttribute("id");
+				setTimeout(function(){
+					isCanSlide = true;
+				},1500)
+			}	
+			
+		}
+	}
+	dot.setAttribute("style","border-radius: 50%; margin-right: 5px; border:1px solid #fff; width: 10px; height: 10px; display: inline-block; ");
+	if(i === 0){
+		dot.setAttribute("style","border-radius: 50%; margin-right: 5px; background-color: #00e0d0; border:1px solid #00e0d0; width: 10px; height: 10px; display: inline-block; ");
+	}
+	dotContainer.appendChild(dot);
+}
+slider.appendChild(dotContainer);
+
+
+

MySlider/js/slider-noAnimation.js

@@ -0,0 +1,71 @@
+var arrowLeft = document.getElementById("arrow-left");
+var arrowRight = document.getElementById("arrow-right");
+var slides = document.querySelector(".slides");
+var i = 0;
+arrowRight.onclick = function(){
+	if(i === slides.children.length - 1){
+		slides.children[i].style.opacity = "0";
+		slides.children[i].style.zIndex = "0";
+		slides.children[0].style.opacity = "1";
+		slides.children[0].style.zIndex = "1";
+		i = 0;
+	}
+	else{
+		slides.children[i].style.opacity = "0";
+		slides.children[i].style.zIndex = "0";
+		slides.children[i + 1].style.opacity = "1";
+		slides.children[i + 1].style.zIndex = "1";
+		i++;
+	}
+}
+arrowLeft.onclick = function(){
+	if(i === 0){
+		slides.children[0].style.opacity = "0";
+		slides.children[0].style.zIndex = "0";
+		slides.children[slides.children.length - 1].style.opacity = "1";
+		slides.children[slides.children.length - 1].style.zIndex = "1";
+		i = slides.children.length - 1;
+	}
+	else{
+		slides.children[i].style.opacity = "0";
+		slides.children[i].style.zIndex = "0";
+		slides.children[i - 1].style.opacity = "1";
+		slides.children[i - 1].style.zIndex = "1";
+		i--;
+	}
+}
+for (var k = 0; k < slides.children.length; k++) {
+	var dotsContainer = document.createElement("div");
+	dotsContainer.setAttribute("class", "dots-container");
+	dotsContainer.setAttribute("style","margin-top: 50px; ");
+	slides.children[k].appendChild(dotsContainer);
+	for (var j = 0; j < slides.children.length; j++) {
+		var dot = document.createElement("div");
+		dot.setAttribute("name",j)
+		dot.onclick = function(){
+			if(!this.getAttribute("class") ){
+				
+				slides.children[i].style.opacity = "0";
+				slides.children[i].style.zIndex = "0";
+				i = +this.getAttribute("name");
+				slides.children[i].style.opacity = "1";
+				slides.children[i].style.zIndex = "1";
+
+			}
+
+		}
+		if(j === k){
+			
+			dot.setAttribute("style","border-radius: 50%; margin-right: 5px; border:1px solid #00e0d0; background-color: #00e0d0; width: 10px; height: 10px; display: inline-block; ");
+			dot.setAttribute("class", "active");
+			slides.children[k].querySelector(".dots-container").appendChild(dot);
+		}
+		else{
+			
+			dot.setAttribute("style","border-radius: 50%; margin-right: 5px; border:1px solid #fff; width: 10px; height: 10px; display: inline-block; ");
+			slides.children[k].querySelector(".dots-container").appendChild(dot);
+		}
+			}
+		
+	}
+	

MySlider/link.md

@@ -0,0 +1 @@
+http://homework.pavelefimen95.fe.a-level.com.ua/MySlider