modul1

modulPO/css/media-queries.css

@@ -0,0 +1,54 @@
+
+
+@media (max-width: 768px){
+	body{
+		font-size: 12px;
+	}
+	h1{
+		font-size: 18px;
+	}
+	h2{
+		font-size: 18px;
+	}
+	.toggle-menu{
+		display: block;
+		
+	}
+	.content{
+		width: 95%;
+	}
+	.info{
+		padding-top: 10%!important;
+	}
+	nav{
+		display: none;
+		width: 100%;
+		height: 100%;
+		background: transparent;
+	}
+	nav, nav li{
+		float: none;
+	}
+	nav li a{
+	font-size: 15px;
+    padding: 20px 0px;
+    display: inline-block;
+	width: 100%;
+	text-align: center;
+	}
+	.iphone img{
+		width: 60%;
+		height: 60%;
+	}
+}
+
+@media (min-width: 769px){
+	nav{
+		display: block !important;
+	}
+}
+
+
+
+
+

modulPO/css/style.css

@@ -0,0 +1,348 @@
+*{
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+}
+
+ul{
+	list-style: none;
+}
+
+a{
+	text-decoration: none;
+}
+
+@font-face{
+    font-family: 'Helvetica' !important;
+    src: url('../fonts/Helvetica/HelveticaNeueCyr-Bold.eot') format('eot');
+    src: url('../fonts/Helvetica/HelveticaNeueCyr-Bold.eot?iefix') format('embedded-opentype'),
+    url('../fonts/Helvetica/HelveticaNeueCyr-Bold.woff') format('woff'),
+    url('../fonts/Helvetica/HelveticaNeueCyr-Bold.ttf') format('truetype');
+    font-weight: normal;  
+    font-style: normal;
+    }
+
+@font-face {
+	font-family: "HelveticaRegular";
+	src: url("../fonts/HelveticaRegular/HelveticaRegular.eot");
+	src: url("../fonts/HelveticaRegular/HelveticaRegular.eot?#iefix")format("embedded-opentype"),
+	url("../fonts/HelveticaRegular/HelveticaRegular.woff") format("woff"),
+	url("../fonts/HelveticaRegular/HelveticaRegular.ttf") format("truetype");
+	font-style: normal;
+	font-weight: normal;
+}
+
+
+header{
+	background-image: linear-gradient(to bottom right, #fc5a59 10%, #fc6351 30%, #fd7b3d 50%, #ff9526 75%
+);
+}
+
+.clearfix::after{
+	content:"";
+	display: block;
+	clear: both;
+}
+
+.content{
+	max-width: 70%;
+	margin: 0 auto;
+	padding: 0 20 auto;
+}
+
+
+body{
+	background: #fff;
+	min-width: 320px;
+	width: 100%;
+	min-width: 320px;
+	font-family: 'Helvetica', "HelveticaRegular", sans-serif;
+	text-align: center;
+	font-size: 15px;
+	letter-spacing: 0.5px;
+}
+
+nav{
+	float: right;
+	background: transparent! important;
+}
+
+nav li{
+	float: left;
+	list-style: none;
+}
+
+nav li a{
+	color: #fff;
+	padding: 60px 40px;
+	display: inline-block;
+	font-family: "HelveticaRegular", sans-serif;
+}
+
+nav li a:last-child{
+	padding-right: 0;
+}
+
+.iphone{
+	width: 45%;
+	height: 100%;
+	float: right;
+	
+}
+
+.iphone img{
+	float: right;
+	width: 70%;
+	height: 70%;
+}
+
+
+.top-line{
+	padding-bottom: 10%;
+}
+
+.pan{
+	float: left;
+	margin-top: 25px;
+}
+
+.logo{
+	padding-top: 10%;
+	color: #fff;
+	width: 55%;
+	float: left;
+	text-align: left;
+	clear: both;
+}
+
+.logo p{
+	width: 85%;
+	margin-bottom: 20%;
+	line-height: 1.8;
+	
+}
+
+h1{
+	margin-bottom: 10%;
+	font-size: 26px;
+	font-weight: bold;
+    line-height: 1.789;
+}
+
+h1 a{
+	color: #fff;
+	margin-bottom: 10px;
+}
+
+button[type="button"]{
+	width: 45%;
+	height: 40px;
+	background: transparent;
+	color: #fff;
+	border: 1px solid #fff;
+	border-radius: 5px;
+}
+
+
+
+.toggle-menu{
+	position: absolute;
+	right: 10%;
+	top: 25px;
+	width: 28px;
+	height: 25px;
+	cursor: pointer;
+	display: none;
+}
+
+.toggle-menu span, .toggle-menu span:after, .toggle-menu span:before{
+	width: 100%;
+	height: 2px;
+	background-color: #fff;
+	border-radius: 2px;
+	transition: 0.8s;
+	display: inline-block;
+	position: absolute;
+	left: 0;
+
+}
+
+.toggle-menu span:after{
+	content: '';
+	top: 9px;
+}
+
+.toggle-menu span:before{
+	content: '';
+	top: 18px;
+}
+.toggle-menu.on span{
+	background-color: transparent;
+}
+
+.toggle-menu.on span:after{
+	transform: rotate(45deg);
+}
+
+.toggle-menu.on span:before{
+	transform: rotate(-45deg);
+	top: 9px;
+}
+
+
+
+.list .icon{
+	width: 33%;
+	display: inline-block;
+	min-width: 220px;
+	margin-bottom: 50px;
+	padding-right: 1%;
+}
+
+.list{
+	padding-top: 10%;
+	margin-bottom: 13%;
+}
+
+.icon img{
+	margin-bottom: 7%;
+}
+
+.icon span{
+	color: #878787;
+}
+
+h3{
+	margin-bottom: 5%;
+	
+}
+
+
+.how{
+	color: #ff8400;
+	text-transform: uppercase;
+}
+
+h2{
+	font-size: 24px;
+	padding-top: 10px;
+	margin-bottom: 5%;
+}
+
+
+footer{
+	background-image: linear-gradient(to bottom right,  #fc5a59 10%, #fc6351 30%, #fd7b3d 50%, #ff9526 75%
+);
+}
+
+.foot{
+	padding-top: 9%;
+}
+
+.foot p{
+	color: #fff;
+	padding-left: 20px;
+	padding-right: 20px;
+	margin-bottom: 10%;
+	line-height: 24px;
+	font-weight: none;
+}
+
+.content-foot{
+	max-width: 600px;
+	margin: 0 auto;
+	padding: 0 20 auto;
+}
+
+.receive{
+	text-transform: uppercase;
+	color: #fff;
+	letter-spacing: 4px;
+	
+}
+
+
+
+
+
+.down{
+    width: 60%;
+    margin: 0 auto;
+    padding-bottom: 100px;
+}
+.down input{
+    border-width: 2px;
+    background: inherit;
+    border-color: rgb(255, 255, 255);
+    border-style: solid;
+    border-radius: 5px;
+    width: 60%;
+    height: 51px;
+    margin-right: 5%;
+    text-align: left;
+}
+::-webkit-input-placeholder{
+    color: #ffffff;
+    padding-left: 10px;
+}
+.down button{
+    border-radius: 5px;
+    background-color: rgb(255, 255, 255);
+    box-shadow: 0px 0px 25px 0px rgba(255, 132, 0, 0.65);
+    width: 30%;
+    height: 51px;    
+}
+.button{
+    font-size: 15px;
+    color: rgb(255, 132, 0);
+    line-height: 2;
+    cursor: pointer;
+    font-weight: bold;
+}
+
+@media (max-width: 320px){
+	.receive{
+		font-size: 15px!important;
+		letter-spacing: 2px!important;
+	}
+	.toggle-menu{
+		margin-top: -265px!important;
+	}
+}
+
+@media (max-width: 600px){
+	.iphone img{
+		display: none;
+	}
+	.toggle-menu{
+		top: 7%!important;
+	}
+	.logo{
+		width: 100%;
+	}
+	.form-s{
+		width: 80%;
+	}
+	input[type="search"]{
+		height: 40px;
+		width: 100px;
+		padding-left: 1px;
+	}
+	.form-s li{
+		
+		margin-bottom: 9%;
+		padding-right: 1px;
+	}
+	input[type="email"]{
+		display: inline-block;
+		width: 100%;
+		padding-left: 1px;
+	}
+	button[type="submit"]{
+		width: 100%;
+		margin-top: 5%;
+		font-size: 12px;
+	}
+
+}
+

modulPO/index.html

@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<meta http-equiv="X-UA-Compatible" content="ie=edge">
+	<link rel="stylesheet" href="fonts">
+	<link rel="stylesheet" href="css/style.css">
+	<link rel="stylesheet" href="css/media-queries.css">
+	<title>Comtrua</title>
+</head>
+<body>
+	<header>
+		
+			<div class="top-line content clearfix">
+				<div class="pan">
+					<img class="" src="images/bg-head.png" alt="">
+				</div>
+				<nav>
+					<ul>
+						<li><a href="#">About</a></li>
+						<li><a href="#">Download</a></li>
+						<li><a href="#">Workflow</a></li>
+						<li><a href="#">Support</a></li>
+						<li><a href="#">User Stories</a></li>
+						<li><a href="#">Contact</a></li>
+					</ul>
+				</nav>
+				<div class="info"></div>	
+					<div class="logo">
+						<h1><a href="/">Built with app designers in mind</a></h1>
+						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet.
+						</p>
+						<a href="#"><button type="button">How it works</button></a>
+					</div>
+					<div class="iphone">
+						<img src="images/bg-iphone.png" alt="">
+					</div>
+				
+			</div>
+		
+		
+		<div class="clearfix"></div>		
+		<div class="toggle-menu">
+			<span></span>
+		</div>
+	</header>
+
+	
+	<div class="content clearfix">
+		<div class="main">
+			<section class="list">
+				<a class="how" href="#">How it works</a>
+				<h2>Lorem ipsum dolor sit</h2>
+				<div class="icon">
+					<div class="img_icon"></div>
+					<img src="images/ic_food.png" alt="">
+					<h3>Lorem ipsum dolor sit amet</h3>
+					<span>Lorem ipsum dolor sit amet consectetur adipisicing elit nobis reprehenderit perspiciatis ducimus</span>
+				</div>
+				<div class="icon">
+					<div class="img_icon"></div>
+					<img src="images/cart.png" alt="">
+					<h3>Lorem ipsum dolor sit amet</h3>
+					<span>Lorem ipsum dolor sit amet consectetur adipisicing elit nobis reprehenderit perspiciatis ducimus</span>
+				</div>
+				<div class="icon">
+					<div class="img_icon"></div>
+					<img src="images/gear.png" alt="">
+					<h3>Lorem ipsum dolor sit amet</h3>
+					<span>Lorem ipsum dolor sit amet consectetur adipisicing elit nobis reprehenderit perspiciatis ducimus</span>
+				</div>
+				<div class="icon">
+					<div class="img_icon"></div>
+					<img src="images/user.png" alt="">
+					<h3>Lorem ipsum dolor sit amet</h3>
+					<span>Lorem ipsum dolor sit amet consectetur adipisicing elit nobis reprehenderit perspiciatis ducimus</span>
+				</div>
+				<div class="icon">
+					<div class="img_icon"></div>
+					<img src="images/edit.png" alt="">
+					<h3>Lorem ipsum dolor sit amet</h3>
+					<span>Lorem ipsum dolor sit amet consectetur adipisicing elit nobis reprehenderit perspiciatis ducimus</span>
+				</div>
+				<div class="icon">
+					<div class="img_icon"></div>
+					<img src="images/email.png" alt="">
+					<h3>Lorem ipsum dolor sit amet</h3>
+					<span>Lorem ipsum dolor sit amet consectetur adipisicing elit nobis reprehenderit perspiciatis ducimus</span>
+				</div>
+			</section>
+		</div>
+	</div>
+	<div class="clear"></div>
+	<footer>
+		<div class="foot content-foot clearfix">
+			<h2 class="receive">Receive notification now</h2>
+			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet debitis esse mollitia, rem a excepturi ratione aperiam labore, dicta, atque praesentium repudiandae.</p>
+		</div>
+		<div class="down">
+			<input type="email" placeholder="You're email address..." id="input">
+			<button type="submit" class="button">I'M READY!</button>
+		</div>
+	</footer>
+	<script src="js/libs.min.js"></script>
+	<script src="js/script2.js"></script>
+</body>
+</html>

modulPO/js/script2.js

@@ -0,0 +1,4 @@
+$('.toggle-menu').click(function(){
+	$(this).toggleClass("on");
+	$('nav').slideToggle();
+});