myProject

main.js

@@ -0,0 +1,64 @@
+$(document).ready(function() {
+	$('.menu-icon').click(function(){
+	$('.menu').slideToggle(1000);
+});
+
+
+ $(".menu, .position").on("click","a", function (event) {
+
+        event.preventDefault();
+        var id  = $(this).attr('href'),
+         top = $(id).offset().top;
+        $('body,html').animate({scrollTop: top}, 1200);
+
+    });
+
+	
+$(window).scroll(function() {
+if ($(this).scrollTop() > 150){  
+$('.position').addClass("glide");
+}
+else{
+$('.position').removeClass("glide");
+}
+});
+
+
+
+$('a#go').click( function(event){ // лoвим клик пo ссылки с id="go"
+		event.preventDefault(); // выключaем стaндaртную рoль элементa
+		$('#overlay').fadeIn(400, // снaчaлa плaвнo пoкaзывaем темную пoдлoжку
+		 	function(){ // пoсле выпoлнения предъидущей aнимaции
+				$('#modal_form') 
+					.css('display', 'block') // убирaем у мoдaльнoгo oкнa display: none;
+					.animate({opacity: 1, top: '23%'}, 200); // плaвнo прибaвляем прoзрaчнoсть oднoвременнo сo съезжaнием вниз
+		});
+	});
+	/* Зaкрытие мoдaльнoгo oкнa, тут делaем тo же сaмoе нo в oбрaтнoм пoрядке */
+	$('#modal_close, #overlay').click( function(){ // лoвим клик пo крестику или пoдлoжке
+		$('#modal_form')
+			.animate({opacity: 0, top: '45%'}, 200,  // плaвнo меняем прoзрaчнoсть нa 0 и oднoвременнo двигaем oкнo вверх
+				function(){ // пoсле aнимaции
+					$(this).css('display', 'none'); // делaем ему display: none;
+					$('#overlay').fadeOut(400); // скрывaем пoдлoжку
+				}
+			);
+	});
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+});	

media.css

@@ -0,0 +1,219 @@
+@media only screen and (min-device-width : 320px) and (max-device-width : 480px){
+	.position{
+		width:100%;
+		padding:6px;
+		padding-bottom:0px;
+		background: rgba(154, 175, 202,0.78);
+	}
+	.logo{
+		width:120px;
+		height:25px;
+	}
+	.menu-icon{
+		display:block;
+		transition:1s;
+	}
+	.menu{
+		display:none;
+		width:100%;
+		position:absolute;
+		left:0;
+		text-align:center;
+		z-index:100;
+		padding-top:0px;
+		background:rgba(154, 175, 202,0.78);
+		
+	}
+	.menu li{
+		margin-right:0;
+		padding:10px;
+		border-bottom:1px solid #8e9fb3;
+	}
+	.menu li a:focus {
+		color:#bfeff5;
+	}
+	.menu li a{
+		font-size:20px;
+	}
+	.menu li:last-child a{
+		font-size:20px;
+	}
+	
+	.header{
+		padding:0px;
+		height:232px;
+	}
+	
+	.room{
+		width:100%;
+		padding:5px 10px 0px 10px;
+		height:80px;
+	}
+	.room h2{
+		margin-bottom:10px;
+		font-size:16px;
+	}
+	.button-one{
+		width:210px;
+		padding:5px 7px;
+		font-size:14px;
+		text-align:center;
+		margin:0 auto;
+		border-radius:4px;
+		-webkit-border-radius:4px;
+		-moz-border-radius:4px;
+	}
+	.block-two{
+		display:block;
+		padding-bottom:50px;
+	}
+	.block-two .image-two {
+		width: 100%;
+		height: 300px;
+	}
+	
+	.image-three {
+		position: absolute;
+		left: 22%;
+		top: 22%;
+		width: 170px;
+	}
+	
+	.content{
+		width:100%;
+		padding:0px 10px; 
+		text-align:justify;
+	}
+	.content h2{
+		font-size:20px;
+		padding-bottom:20px;
+	}
+	.content p{
+		font-size:15px;
+		margin-bottom:80px;
+	}
+	.button-two{
+		padding: 15px 20px 13px 20px;
+		margin:0 auto;
+		text-align:center;
+		font-size:18px;
+		border-radius:4px;
+		-webkit-border-radius:4px;
+		-moz-border-radius:4px;
+	}
+	
+	.block-three{
+		height:500px;
+		background-size:100% 46%;
+		padding:0px;
+		margin-bottom:50px;
+		
+	}
+	.dis{
+		width:100%;
+		padding:76% 10px 0px 10px;
+		text-align:justify;
+	}
+	.dis h2{
+		font-size:20px;
+		padding-bottom:10px;
+	}
+	.dis p{
+		font-size:14px;
+		line-height:20px;
+	}
+	.block-four{
+		padding:0px;
+		height:800px;
+	}
+	.block-four .fx{
+		display:block;
+		padding-bottom:20px;
+	}
+	.content-four{
+		width:100%;	
+		padding:0px 10px;
+		padding-top:220px;
+	}
+	
+	
+	.block-four .fx img {
+    width: 100%;
+    height: 200px;
+    position: absolute;
+    top: 0;
+}
+	
+	.content-four h2{
+		font-size:20px;
+		padding-bottom:20px;
+		padding-left:0px;
+	}
+	.content-four p{
+		font-size:14px;
+		text-align:justify;
+	}
+	
+	.image-four{
+		position:relative;
+		top:0;
+		left:0;
+		width:100%;
+		height:200px;
+	}
+	.footer{
+		height:400px;
+	}
+	.footer h2{
+		width:100%;
+		font-size:20px;
+		padding:33px 0px 50px 0px;
+	}
+	.footer form{
+		width:100%;
+		padding:0px 10px;
+	}
+	
+	.footer form p input{
+		font-size:16px;
+		padding:10px;
+		border-radius:4px;
+		-webkit-border-radius:4px;
+		-moz-border-radius:4px
+	
+	}
+	
+	
+	
+	#modal_form {
+		width:310px;
+		margin-left:-155px;
+		top:13% !important;
+	}
+	
+	#modal_form #modal_close {
+		display:block;
+	}
+	#modal_form h2{
+		font-size:24px;
+	}
+	#modal_form p{
+		font-size:18px;
+		padding-bottom:20px;
+	}
+	#modal_form form p input{
+		height:50px;
+		font-size:16px;
+	}
+	#modal_form form :last-child {
+    	padding-top:15px;
+	}
+	#modal_form form :last-child input{
+		padding-top:5px;
+	}
+	#modal_close img{
+		width:20px;
+	}
+	
+	
+}

style.css

@@ -0,0 +1,380 @@
+*{
+	box-sizing:border-box;
+}
+#wrapper{
+	
+	max-width:1200px;
+	margin: 0 auto;
+	}
+.header{
+	position:relative;
+	height:675px;
+	background: url('images/bg1.png') no-repeat;
+	background-size:100% 100%;
+	padding:25px 0px 0px 35px;
+}
+.menu-icon{
+	text-align:right;
+	display:none;
+	cursor:pointer;
+}
+.menu-icon img{
+	width:32px;
+	height:32px;
+}
+.fx{
+	display:flex;
+}
+.position{
+	position:fixed;
+	width:1200px;
+	padding:25px 0px 0px 35px;
+	z-index:99;
+	transition:1s;
+	-moz-transition:1s;
+	-webkit-transition:1s;
+}
+.glide{
+	background-color:rgba(154, 175, 202,0.78);
+	padding-bottom:23px;
+}
+.nav{
+	margin-left:auto;
+	margin-right:0px;
+	padding-right:10px;
+}
+.menu{
+	display:flex;
+	padding-top:20px;
+}
+.menu li{
+	margin-right:40px;
+}
+.menu li a{
+	display:block;
+	text-decoration:none;
+	text-transform:uppercase;
+	color:#fff;
+	font:bold 24.62px 'PT Mono', monospace;
+	transition:1s;
+	-moz-transition:1s;
+	-webkit-transition:1s;
+}
+
+.menu li:last-child a{
+	color:#000;
+	font-size:28px;
+}
+.menu li a:hover {
+		color:#bfeff5;
+	}
+.menu li:last-child a:hover{
+	color:#000;
+	
+}	
+.room{
+	position:absolute;
+	width:43%;
+	height:240px;
+	padding:30px 40px 50px 50px;
+	background:rgba(0, 0, 0, 0.3);
+	right:0;
+	bottom:0;
+}
+.room h2{
+	text-transform:uppercase;
+	color:#fff;
+	font:bold 24.62px 'PT Mono', monospace;
+	margin-bottom:60px;
+}
+.button{
+	display:block;
+	font:bold 24px Arial, sans-serif;
+	color:#fff;
+	text-decoration:none;
+	text-transform:uppercase;
+	background-color:#d4aa80;
+	
+}
+.button-one{
+	width:410px;
+	padding:25px 60px 25px 105px;
+	margin-left:auto;
+	margin-right:0px;
+	transition:1s;
+	-moz-transition:1s;
+	-webkit-transition:1s;
+}
+.block-two{
+	position:relative;
+	display:flex;
+	height:auto;
+	padding-bottom:150px;
+	
+}
+
+.block-two .image-two{
+	opacity: 0.5;
+}
+
+.content{
+	width:610px;
+	padding-left:60px;
+}
+.content h2{
+	text-transform:uppercase;
+	color:#000;
+	font:bold 28px 'PT Mono', monospace;
+	padding:50px 40px 40px 0px;
+}
+
+.content p{
+	color:#7d7a7a;
+	font:16px 'Open Sans', sans-serif;
+	line-height:25px;
+	margin-bottom:200px;
+ }
+
+ .image-three{
+	 position:absolute;
+	 left:33%;
+	 top:36%;
+	
+ }
+
+.button-two{
+	width:300px;
+	padding:30px 30px 20px 30px;
+	margin-left:auto;
+	margin-right:0px;
+	transition:1s;
+	-moz-transition:1s;
+	-webkit-transition:1s;
+}
+
+.button-two:hover,
+.button-one:hover{
+	background-color:#b18050;
+}
+
+
+
+.block-three{
+	height:675px;
+	background: url('images/bg2.png') no-repeat;
+	background-size:100% 100%;
+	padding-top:210px;
+	padding-left:40px;
+}
+.dis{
+	width:340px;
+	
+}
+.dis h2{
+	text-transform:uppercase;
+	color:#000;
+	font:bold 28px 'PT Mono', monospace;
+	padding-bottom:15px;
+	text-align:center;
+}
+.dis p{
+	font: 18px 'Arial',sans-serif;
+	color:#000;
+	line-height:23px;
+	letter-spacing: 1px;
+}
+
+.block-four{
+	position:relative;
+	padding:0px 45px;
+	height:920px;
+	margin-bottom:50px;
+}
+.content-four{
+	width:430px;
+	padding-top:50px;
+	z-index:10;
+}
+.content-four h2{
+	text-transform:uppercase;
+	color:#000;
+	font:bold 28px 'PT Mono', monospace;
+	padding-left:10px;
+	padding-bottom:30px;
+}
+.content-four p{
+	font: 18px 'Arial',sans-serif;
+	color:#000;
+	line-height:23px;
+}
+
+.block-four .fx img{
+	margin-left:auto;
+	z-index:10;
+}
+
+.image-four{
+	position:absolute;
+	top:38.5%;
+	left:26%;
+	opacity:0.5;
+	z-index:7;
+}
+.footer{
+	height:565px;
+	background:#d4aa80;
+}
+.footer h2{
+	display:block;
+	width:555px;
+	margin:0 auto;
+	padding:65px 0px 55px 0px;
+	font:bold 36px 'Arial', sans-serif;
+	color:#fff;
+	text-transform:uppercase;
+	text-align:center;
+}
+.footer form{
+	width:350px;
+	margin:0 auto;
+}
+.footer form p{
+	padding-bottom:10px;
+}
+.footer form p input{
+	width:100%;
+	font:18px 'Arial', sans-serif;
+	color:#808080;
+	padding:15px;
+	border:none;
+}
+.footer form p .button-form{
+	text-transform:uppercase;
+	color:#fff;
+	font-weight:bold;
+	background-color:#a67a4f;
+	cursor:pointer;
+	transition:1s;
+	-moz-transition:1s;
+	-webkit-transition:1s;
+}
+.footer form p .button-form:hover{
+	background-color:#bd8249;
+	
+}
+
+
+
+
+/*Модульное окно*/
+#modal_form {
+	width: 420px;
+	height: 500px; /* Рaзмеры дoлжны быть фиксирoвaны */
+	border-radius: 20px;
+	
+	background: rgba(198, 210, 212, 0.8);
+	position: fixed; /* чтoбы oкнo былo в видимoй зoне в любoм месте */
+	top: 70%; /* oтступaем сверху 45%, oстaльные 5% пoдвинет скрипт */
+	left: 50%; /* пoлoвинa экрaнa слевa */
+	margin-top: -50px;
+	margin-left: -200px; /* тут вся мaгия центрoвки css, oтступaем влевo и вверх минус пoлoвину ширины и высoты сooтветственнo =) */
+	display: none; /* в oбычнoм сoстoянии oкнa не дoлжнo быть */
+	opacity: 0; /* пoлнoстью прoзрaчнo для aнимирoвaния */
+	z-index: 999; /* oкнo дoлжнo быть нaибoлее бoльшем слoе */
+	padding:30px;
+	text-align:center;
+
+}
+/* Кнoпкa зaкрыть для тех ктo в тaнке) */
+#modal_form #modal_close {
+	display:none;
+	width: 21px;
+	height: 21px;
+	position: absolute;
+	top: 10px;
+	right: 15px;
+	cursor: pointer;
+}
+
+/* Пoдлoжкa */
+#overlay {
+	z-index:998; /* пoдлoжкa дoлжнa быть выше слoев элементoв сaйтa, нo ниже слoя мoдaльнoгo oкнa */
+	position:fixed; /* всегдa перекрывaет весь сaйт */
+	background-color:#000; /* чернaя */
+	opacity:0.8; /* нo немнoгo прoзрaчнa */
+	-moz-opacity:0.8; /* фикс прозрачности для старых браузеров */
+	filter:alpha(opacity=80);
+	width:100%; 
+	height:100%; /* рaзмерoм вo весь экрaн */
+	top:0; /* сверху и слевa 0, oбязaтельные свoйствa! */
+	left:0;
+	cursor:pointer;
+	display:none; /* в oбычнoм сoстoянии её нет) */
+}
+
+#modal_form h2{
+	font:bold 28px 'PT Mono', monospace;
+	text-transform:uppercase;
+	color:#fff;
+	padding-bottom:10px;
+}
+#modal_form p{
+	font:bold 18px 'PT Mono', monospace;
+	color:#fff;
+	padding-bottom:35px;
+}
+#modal_form form p{
+	padding-bottom:25px;
+	border-radius:50px;
+	-webkit-border-radius:50px;
+	-moz-border-radius:50px;
+}
+#modal_form form p input{
+	width:100%;
+	height:60px;
+	border-radius:50px;
+	-webkit-border-radius:50px;
+	-moz-border-radius:50px;
+	padding:5px 20px;
+	background-color:rgba(198, 210, 212, 0.8);
+	color:#fff;
+	font:22px 'PT Mono', monospace;
+	border:1px solid #7f999a;
+	outline:none;
+}
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+    /* display: none; <- Crashes Chrome on hover */
+    -webkit-appearance: none;
+    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
+}
+#modal_form form :last-child input{
+	background-color:#96a3a5;
+}
+#modal_form form :last-child input:hover{
+	background-color:#66a0a9;
+	border:1px solid #7f999a;
+}
+#modal_form form :last-child input:focus{
+	background-color:#66a0a9;
+	border:1px solid #7f999a;
+}
+
+
+
+#modal_form form p input:hover{
+	border-color:#3f618c;
+	cursor:pointer;
+}
+#modal_form form p input:focus{
+	border-color:#053b69;
+	border-radius:50px;
+	-webkit-border-radius:50px;
+	-moz-border-radius:50px;
+}
+
+
+
+
+