JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Империя Sky</title>
<link rel="stylesheet" href="./css/style.css">
<script src="./js/jquery-3.1.0.min.js"></script>
<link href="./lib/jquery-ui-1.12.0.custom/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="./lib/jquery-ui-1.12.0.custom/jquery-ui.js"></script>
<script src="./js/main.js"></script>
</head>
<body>
<header>
<div class="container header clearfix">
<div class="left-column">
<img src="./img/logo.png" alt="">
<p>г.Москва, Пресненская Набережная д.6 к.2</p>
<p>ММДЦ "Москва-Сити" Башня "Империя"</p>
</div>
<div class="right-column">
<div class="phone">
<p class="colored">+7 (915) 335-89-08</p>
<p>OPEN 24/7</p>
</div>
<div class="buttons">
<div class="button-call">Заказать звонок</div>
<a href="./files/test.pdf" download>Скачать презентацию</a>
</div>
</div>
</div>
</header>
<nav>
<div id="menu" class="container nav">
<ul >
<li><a href="#video" class="video-nav-icon"><img src="./img/blank.gif" alt=""></a></li>
<li><a href="#whyus" class="whyus-nav-icon"><img src="./img/blank.gif" alt=""></a></li>
<li><a href="#possibility" class="possibility-nav-icon"><img src="./img/blank.gif" alt=""></a></li>
<li><a href="#gallery" class="photo-nav-icon"><img src="./img/blank.gif" alt=""></a></li>
<li><a href="#price" class="price-nav-icon"><img src="./img/blank.gif" alt=""></a></li>
<li><a href="#portfolio" class="portfolio-nav-icon"><img src="./img/blank.gif" alt=""></a></li>
<li><a href="#contacts" class="contacts-nav-icon"><img src="./img/blank.gif" alt=""></a></li>
</ul>
</div>
</nav>
<section id="main">
<div class="background"><h1>Проведение мероприятий в LOFT “ИМПЕРИЯ-SKY”</h1></div>
<div class="main container">
<div class="head">
<div class="bash">
<ul...
CSS
/*--General--*/
* {
font-family: pt-sans, sans-serif, tahoma, arial;
box-sizing: border-box;
font-weight: normal;
font-size: 100%;
padding: 0;
margin: 0;
}
html, body {
height: 100%;
}
a {
text-decoration: none;
color: #000;
}
ul {
list-style: none;
}
.clearfix::before, .clearfix::after {
overflow: hidden;
display: block;
content: '';
height: 0px;
clear: both;
}
.container {
max-width: 1200px;
margin: 0 auto;
width: 100%;
}
.fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
margin: 0 auto;
z-index: 1001;
}
/*--MainPage -> Header--*/
header {
height: 100%;
max-height: 123px;
}
.header {
padding: 0 66px;
height: 100%;
max-height: 123px;
}
.left-column {
display: inline-block;
float: left;
width: 50%;
}
.right-column {
display: inline-block;
height: 100%;
width: 50%;
max-height: 123px;
float: left;
}
.left-column > img {
height: 100%;
width: 100%;
max-width: 188px;
max-height: 79px;
}
.left-column > p {
line-height: 20px;
text-align: left;
font-size: 17px;
color: #652CAB;
font-weight: bold;
word-wrap: break-word;
}
.right-column > .phone {
width: calc(100% - 175px);
display: inline-block;
padding-left: 13%;
height: 100%;
float:left;
}
.right-column > .phone > p {
text-transform: uppercase;
text-align: center;
font-weight: 700;
font-size: 27px;
color: #FF7B00;
height: 50%;
}
.right-column > .phone > p.colored {
padding-top: 11%;
color: #612CAA;
font-size: 31px;
}
.right-column > .buttons {
display: inline-block;
text-align: center;
padding: 12px 0;
float: right;
width: 175px;
}
.right-column > .buttons > .button-call, .right-column > .buttons > a {
width: 178px;
}
.right-column > .buttons > .button-call {
height: 47px;
line-height: 44px;
text-align: center;
font-size: 17px;
color: #fff;
font-weight: bold;
border: 2px solid #FFD326;
border-radius: 50px;
background: linear-gradient(to bottom,#FFC700 ,#FF7B00 100%);
cursor: pointer;
}
.right-column > .buttons >...
JavaScript
console.log('Welcome Mr.Ten')
$(document).ready(function() {
$('.action > form > input').hover(function() {
$('.action > form').css('padding-top','18px')
},
function() {
$('.action > form').css('padding-top', '20px')
})
$(window).scroll(function () {
if ($(window).scrollTop() > 123) {
$('nav').addClass('fixed');
} else {
$('nav').removeClass('fixed');
}
});
$('.center-pos, .center-pos-full').hover(function(){
$('.center-pos').css('display', 'none');
$('.center-pos-full').css('display','block')
}, function() {
$('.center-pos').css('display', 'block');
$('.center-pos-full').css('display','none')
})
$("#menu").on("click","a", function (event) {
event.preventDefault();
var id = $(this).attr('href'),
top = $(id).offset().top;
$('body,html').animate({scrollTop: top - 100}, 1500);
});
$(window).scroll(function() {
if (window.scrollY >= 956 && window.scrollY <=1531) {
$('.video-nav-icon').addClass('active-menu')
} else {
$('.video-nav-icon').removeClass('active-menu')
}
if (window.scrollY >= 1531 && window.scrollY <=2411) {
$('.whyus-nav-icon').addClass('active-menu')
} else {
$('.whyus-nav-icon').removeClass('active-menu')
}
if (window.scrollY >= 2411 && window.scrollY <=3355) {
$('.possibility-nav-icon').addClass('active-menu')
} else {
$('.possibility-nav-icon').removeClass('active-menu')
}
if (window.scrollY >= 3355 && window.scrollY <=4095) {
$('.photo-nav-icon').addClass('active-menu')
} else {
$('.photo-nav-icon').removeClass('active-menu')
}
if (window.scrollY >= 4095 && window.scrollY <= 4733) {
$('.price-nav-icon').addClass('active-menu')
} else {
$('.price-nav-icon').removeClass('active-menu')
}
if (window.scrollY >= 4733 && window.scrollY <= 5359) {
$('.portfolio-nav-icon').addClass('active-menu')
} else {
...