Home Explore Help
Sign In
pavelefimen95
/
homework
Watch 1
Star 0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

commit

Pavel 7 years ago
parent
474182d283
commit
a2cbdb97ad
23 changed files with 3341 additions and 1 deletions
Split View Show Diff Stats
  1. 1 1
      ModuleFirst/index.html
  2. 4 0
      ModuleFirstTest/css/font-awesome.min.css
  3. 426 0
      ModuleFirstTest/css/styles.css
  4. BIN
      ModuleFirstTest/fonts/FontAwesome.otf
  5. BIN
      ModuleFirstTest/fonts/fontawesome-webfont.eot
  6. 2671 0
      ModuleFirstTest/fonts/fontawesome-webfont.svg
  7. BIN
      ModuleFirstTest/fonts/fontawesome-webfont.ttf
  8. BIN
      ModuleFirstTest/fonts/fontawesome-webfont.woff
  9. BIN
      ModuleFirstTest/fonts/fontawesome-webfont.woff2
  10. BIN
      ModuleFirstTest/images/banner.jpg
  11. BIN
      ModuleFirstTest/images/header-background.png
  12. BIN
      ModuleFirstTest/images/img2.png
  13. BIN
      ModuleFirstTest/images/img3.png
  14. BIN
      ModuleFirstTest/images/img4.gif
  15. BIN
      ModuleFirstTest/images/img4.png
  16. BIN
      ModuleFirstTest/images/logo.png
  17. BIN
      ModuleFirstTest/images/slider-arrow-left.png
  18. BIN
      ModuleFirstTest/images/slider-arrow-right.png
  19. 115 0
      ModuleFirstTest/index.html
  20. 1 0
      ModuleFirstTest/link.md
  21. 121 0
      ModuleFirstTest/slider-Animation.js
  22. 1 0
      TEST/ModuleFirstTest.md
  23. 1 0
      TEST/link.md

+ 1 - 1
ModuleFirst/index.html
View File 

@@ -3,7 +3,7 @@
 
 <head>
 
 	<meta charset="UTF-8">
 
 	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
-	<title>Modul</title>
 
+	<title>Module</title>
 
 	<link rel="stylesheet" href="css/font-awesome.min.css">
 
 	<link rel="stylesheet" href="css/styles.css">
 
 </head>

File diff suppressed because it is too large
+ 4 - 0
ModuleFirstTest/css/font-awesome.min.css


+ 426 - 0
ModuleFirstTest/css/styles.css
View File 

@@ -0,0 +1,426 @@
 
+@import url('https://fonts.googleapis.com/css?family=PT+Sans');
 
+
 
+html {
 
+	font-size: 10px;
 
+}
 
+
 
+body {
 
+	margin: 0;
 
+	padding: 0;
 
+	font-family: 'PT Sans', helvetica, sans-serif;
 
+	color: #909090;
 
+	background: #fff;
 
+	font-weight: normal;
 
+}
 
+
 
+.container {
 
+	margin: 0 auto;
 
+	max-width: 1024px;
 
+}
 
+
 
+.clearfix::after {
 
+	content: "";
 
+	clear: both;
 
+	display: block;
 
+}
 
+
 
+h1, h2 {
 
+	color: #6f7173;
 
+	font-weight: normal;
 
+}
 
+
 
+h1 {
 
+	font-size: 3.6rem;
 
+	color: #6f7173;
 
+}
 
+
 
+h2 {
 
+	font-size: 3rem;
 
+	margin: 0;
 
+}
 
+
 
+h3 {
 
+	font-size: 2.4rem;
 
+	color: #5094f2;
 
+	font-weight: normal;
 
+}
 
+
 
+p {
 
+	color: #909090;
 
+}
 
+
 
+header {
 
+	height: 104px;
 
+	padding: 24px 30px 0px;
 
+}
 
+
 
+header a {
 
+	float: left;
 
+}
 
+
 
+header form {
 
+	float: right;
 
+}
 
+
 
+header form #search {
 
+	height: 40px;
 
+	width: 390px;
 
+	background-color: #f3f3f3;
 
+	border: 1px solid #e5e5e5;
 
+	font-size: 1.6rem;
 
+	color: #c7c5c5;
 
+	font-family: 'PT Sans', helvetica, sans-serif;
 
+	outline: none;
 
+}
 
+
 
+input::-webkit-input-placeholder {
 
+ 	color: #c7c5c5; 
+ 	padding-left: 10px;
 
+ 	
+}
 
+
 
+header form label {
 
+	font-size: 30px;
 
+	color: #c7c5c5;
 
+}
 
+
 
+header form label i {
 
+	position: relative;
 
+	top: 4px;
 
+}
 
+
 
+header form #search-btn {
 
+	display: none;
 
+}
 
+
 
+section.banner {
 
+	background: #2f3943;
 
+	margin-top: -26px;
 
+}
 
+
 
+section.banner img {
 
+	width: 100%;
 
+}
 
+
 
+section.circles {
 
+	padding-top: 80px;
 
+}
 
+
 
+section.circles .circle-flex {
 
+	display: flex;
 
+	justify-content: space-between;
 
+}
 
+
 
+section.circles .circle-item {
 
+	width: 33%;
 
+	
+	display: flex;
 
+	flex-direction: column;
 
+	text-align: center;
 
+	
+}
 
+
 
+section.circles .circle-item i {
 
+	position: relative;
 
+}
 
+
 
+section.circles .circle-item i::after {
 
+	content: "";
 
+	position: absolute;
 
+	width: 186px;
 
+	height: 186px;
 
+	background-color: #d94748;
 
+	border-radius: 50%;
 
+	right: -45px;
 
+	bottom: -40px;
 
+	z-index: -1;
 
+}
 
+
 
+section.circles .circle-item:nth-child(1) i::after {
 
+	background-color: #5094f2;
 
+
 
+}
 
+
 
+section.circles .circle-item:nth-child(2) i::after {
 
+	background-color: #d94748;
 
+	right: -35px;
 
+	bottom: -43px;
 
+}
 
+
 
+section.circles .circle-item:nth-child(3) i::after {
 
+	background-color: #ebbb11;
 
+	right: -49px;
 
+	bottom: -43px;
 
+}
 
+
 
+section.circles .icon {
 
+	font-size: 100px;
 
+	color: #fff;
 
+}
 
+
 
+section.circles h3 {
 
+	margin-top: 50px;
 
+	margin-bottom: 0px;
 
+}
 
+
 
+section.circles p {
 
+	margin-top: 5px;
 
+	font-size: 1.6em;
 
+	padding: 0 20px;
 
+}
 
+
 
+section.shopping-cart {
 
+	padding-bottom: 60px;
 
+}
 
+
 
+section.shopping-cart .shop-flex {
 
+	display: flex;
 
+	justify-content: space-between;
 
+}
 
+
 
+section.shopping-cart .shop-img {
 
+	width: 50%;
 
+	padding-top: 25px;
 
+	padding-left: 25px;
 
+}
 
+
 
+section.shopping-cart .shop-img a{
 
+	color: #4364a1;
 
+	font-size: 200px;
 
+}
 
+
 
+section.shopping-cart .shop-text {
 
+	width: 50%;
 
+}
 
+
 
+section.shopping-cart p {
 
+	font-size: 1.6rem;
 
+	line-height: 36px;
 
+}
 
+
 
+footer {
 
+	padding: 30px 0 40px;
 
+	border-top: 1px solid #e5e5e5;
 
+	color: #909090;
 
+	text-align: center;
 
+	font-size: 1.4rem;
 
+}
 
+
 
+@media screen and (max-width: 769px) {
 
+	header {
 
+		height: 89px;
 
+		padding-top: 22px;
 
+		padding-bottom: -12px;
 
+	}
 
+
 
+	header form #search {
 
+		width: 200px;
 
+	}
 
+
 
+	section.circles .circle-item i::after {
 
+		width: 136px;
 
+		height: 136px;
 
+	}
 
+
 
+	section.circles {
 
+		padding: 32px 0px 18px;
 
+	}
 
+
 
+	section.circles .icon {
 
+		font-size: 80px;
 
+	}
 
+
 
+	section.circles .circle-flex {
 
+		flex-direction: column;
 
+	}
 
+
 
+	section.circles .circle-item {
 
+		padding: 0 30px;
 
+		flex-direction: row;
 
+		width: 100%;
 
+		justify-content: space-around;
 
+		padding-bottom: 40px;
 
+		border-bottom: 1px solid #CCCCCC;
 
+	}
 
+
 
+	section.circles .circle-text {
 
+		text-align: left;
 
+		max-width: 70%;
 
+	}
 
+
 
+	section.circles .circle-text p{
 
+		font-size: 2rem;
 
+
 
+	}
 
+
 
+	section.circles .circle-text h3{
 
+		padding-left: 20px;
 
+		margin-top: 10px;
 
+		font-size: 3.6rem;
 
+		color: #5094f2;
 
+	}
 
+
 
+	section.circles .circle-flex {
 
+		flex-direction: column;
 
+	}
 
+
 
+
 
+	section.circles .circle-item:nth-child(1) i::after {
 
+		right: -29px;
 
+		bottom: -23px;
 
+
 
+	}
 
+
 
+	section.circles .circle-item:nth-child(2) i::after {
 
+		right: -20px;
 
+		bottom: -30px;
 
+	}
 
+
 
+	section.circles .circle-item:nth-child(3) i::after {
 
+		
+		right: -35px;
 
+		bottom: -30px;
 
+	}
 
+	
+	section.circles .circle-item:nth-child(3) i {
 
+		margin-left: 13px;
 
+	}
 
+	
+	.circle-item {
 
+		margin: 20px 0;
 
+	}
 
+
 
+	.shop-flex {
 
+		flex-direction: column;
 
+		align-items: center;
 
+		text-align: center;
 
+		
+	}
 
+
 
+	section.shopping-cart .header-h1{
 
+		
+		text-align: center;
 
+		
+	}
 
+
 
+	.shop-img {
 
+		width: 100%!important;
 
+	}
 
+
 
+	.shop-text {
 
+		width: 100%!important;
 
+	}
 
+
 
+	.shop-text p{
 
+		text-align: left;
 
+		padding-left: 40px;
 
+	}
 
+
 
+	.shopping-cart h1{
 
+		font-size: 4.8rem;
 
+		margin: 0px;
 
+	}
 
+
 
+	.shop-img a {
 
+		font-size: 160px;
 
+	}
 
+
 
+	.h2-header {
 
+		text-align: left;
 
+	}
 
+
 
+	h2 {
 
+		margin-left: 40px;
 
+		font-size: 3.6rem;
 
+	}
 
+
 
+	.shop-text p {
 
+		line-height: 34px;
 
+		font-size: 1.8rem;
 
+	}
 
+
 
+	footer {
 
+		font-size: 1.6rem;
 
+	}
 
+}
 
+
 
+.slider {
 
+	position: relative;
 
+	width: 100%;
 
+	height: 500px;
 
+	overflow: hidden;
 
+
 
+}
 
+
 
+.slides {
 
+	
+	display: flex;
 
+	flex-direction: row;
 
+	width: 100%;
 
+
 
+}
 
+
 
+
 
+.slider .slide {
 
+	text-align: center;
 
+	display: inline-block;
 
+	width: 80%;
 
+	position: absolute;
 
+	left: 100px;
 
+}
 
+
 
+.slider .slide h1 {
 
+	color: #fff;
 
+	font-weight: 900;
 
+	font-size: 3.2rem;
 
+	margin-top: 160px;
 
+	margin-bottom: 45px;
 
+	font-family: 'Playfair Display', sans-serif;
 
+}
 
+
 
+.slider .slide h1::after {
 
+	content: "";
 
+	height: 1px;
 
+	width: 50px;
 
+	background-color: #00e0d0;
 
+	display: block;
 
+	position: relative;
 
+	left: 350px;
 
+	top: 20px;
 
+}
 
+
 
+
 
+.slider .slide p {
 
+	color: #fff;
 
+	line-height: 24px;
 
+}
 
+
 
+.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;
 
+}
 
+
 
+.slider .arrows img{
 
+	position: absolute;
 
+	z-index: 1;
 
+	height: 30px;
 
+	width: 30px;
 
+}
 
+
 
+.slider .arrows img:first-child {
 
+	top: 50%;
 
+}
 
+
 
+.slider .arrows img:last-child {
 
+	top: 50%;
 
+	right: 0;
 
+}
 
+
 
+.slider {
 
+	max-height: 454px;
 
+}

BIN
ModuleFirstTest/fonts/FontAwesome.otf
View File


BIN
ModuleFirstTest/fonts/fontawesome-webfont.eot
View File


File diff suppressed because it is too large
+ 2671 - 0
ModuleFirstTest/fonts/fontawesome-webfont.svg


BIN
ModuleFirstTest/fonts/fontawesome-webfont.ttf
View File


BIN
ModuleFirstTest/fonts/fontawesome-webfont.woff
View File


BIN
ModuleFirstTest/fonts/fontawesome-webfont.woff2
View File


BIN
ModuleFirstTest/images/banner.jpg
View File


BIN
ModuleFirstTest/images/header-background.png
View File


BIN
ModuleFirstTest/images/img2.png
View File


BIN
ModuleFirstTest/images/img3.png
View File


BIN
ModuleFirstTest/images/img4.gif
View File


BIN
ModuleFirstTest/images/img4.png
View File


BIN
ModuleFirstTest/images/logo.png
View File


BIN
ModuleFirstTest/images/slider-arrow-left.png
View File


BIN
ModuleFirstTest/images/slider-arrow-right.png
View File


+ 115 - 0
ModuleFirstTest/index.html
View File 

@@ -0,0 +1,115 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+	<meta charset="UTF-8">
 
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
+	<title>Modul</title>
 
+	<link rel="stylesheet" href="css/font-awesome.min.css">
 
+	<link rel="stylesheet" href="css/styles.css">
 
+</head>
 
+<body>
 
+	<header>
 
+		<div class="container clearfix">
 
+			<a href="/"><img src="images/logo.png" alt="Prechu"></a>
 
+			<form>
 
+				<label for="search">
 
+					<input type="text" id="search" placeholder="Search">
 
+				</label>
 
+				<label for="search-btn"><i class="fa"></i></label>
 
+				<input type="submit" id="search-btn">
 
+			</form>
 
+		</div>
 
+	</header>
 
+	<section class="banner">
 
+		<div class="container">
 
+			<div class="slider">
 
+				<div class="arrows">
 
+					<img src="images/slider-arrow-left.png" alt="img" id="arrow-left">
 
+					<img src="images/slider-arrow-right.png" alt="img" id="arrow-right">
 
+				</div>
 
+				<div class="slides">
 
+					<div class="slide">
 
+						<img src="images/banner.jpg" alt="">
 
+					</div>
 
+					<div class="slide">
 
+						<img src="images/img2.png" alt="">
 
+					</div>
 
+					<div class="slide">
 
+						<img src="images/img3.png" alt="" style = "width: 356px; height: 350px; margin-top: 50px;">
 
+					</div>
 
+					<div class="slide">
 
+						<img src="images/img4.gif" alt="" style = "width: 356px; height: 350px; margin-top: 50px">
 
+					</div>
 
+				</div>
 
+				
+			</div>
 
+		</div>
 
+	</section>
 
+	<section class="circles">
 
+		<div class="container circle-flex">
 
+			<div class="circle-item">
 
+				<div class="icon">
 
+					<i class="fa"></i>
 
+				</div>
 
+				<div class="circle-text">
 
+					<h3>Contrary to popular</h3>
 
+					<p>Lorem Ipsum is not simply random text. It has roots in a piece </p>
 
+				</div>
 
+			</div>
 
+			<div class="circle-item">
 
+				<div class="icon">
 
+					<i class="fa"></i>
 
+				</div>
 
+				<div class="circle-text">
 
+					<h3>Contrary to popular</h3>
 
+					<p>Lorem Ipsum is not simply random text. It has roots in a piece </p>
 
+				</div>
 
+			</div>
 
+			<div class="circle-item">
 
+				<div class="icon">
 
+					<i class="fa"></i>
 
+				</div>
 
+				<div class="circle-text">
 
+					<h3>Contrary to popular</h3>
 
+					<p>Lorem Ipsum is not simply random text. It has roots in a piece </p>
 
+				</div>
 
+				
+			</div>
 
+		</div>
 
+	</section>
 
+	<section class="shopping-cart">
 
+		<div class="container">
 
+			<div class="header-h1">
 
+				<h1>The Shopping cart</h1>
 
+			</div>
 
+			
+			<div class="shop-flex">
 
+				<div class="shop-img">
 
+					<a href="#" class="shop-icon">
 
+						<i class="fa"></i>
 
+					</a>
 
+				</div>
 
+				<div class="shop-text">
 
+					<div class="h2-header">
 
+						<h2>Some Bullet text here</h2>
 
+					</div>
 
+					
+					<p>Lorem Ipsum is simply dummy text of the printing and typesetting 
+					Lorem Ipsum has been the industry's standard dummy text ever 
+					When an unknown printer took a galley of type and scrambled 
+					It to make a type specimen book. It has survived not only five centuries
 
+					But also the leap into electronic typesetting,
 
+					Remaining essentially unchanged. It was popularised 
+					The release of Letraset sheets containing Lorem Ipsum passages
 
+					</p>
 
+				</div>
 
+			</div>
 
+		</div>
 
+	</section>
 
+	<footer>
 
+		<span>Copyright © 2017 A-Level</span>
 
+	</footer>
 
+
 
+	<script src="slider-Animation.js"></script>
 
+</body>
 
+</html>

+ 1 - 0
ModuleFirstTest/link.md
View File 

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

+ 121 - 0
ModuleFirstTest/slider-Animation.js
View File 

@@ -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);
 
+
 
+
 
+

+ 1 - 0
TEST/ModuleFirstTest.md
View File 

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

+ 1 - 0
TEST/link.md
View File 

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