Business Website

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+	"git.ignoreLimitWarning": true
+}

css/fonts.css

@@ -0,0 +1,60 @@
+@font-face {
+  font-family: 'icomoon';
+  src:  url('../fonts/icomoon.eot?wfq3mh');
+  src:  url('../fonts/icomoon.eot?wfq3mh#iefix') format('embedded-opentype'),
+    url('../fonts/icomoon.ttf?wfq3mh') format('truetype'),
+    url('../fonts/icomoon.woff?wfq3mh') format('woff'),
+    url('../fonts/icomoon.svg?wfq3mh#icomoon') format('svg');
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+
+[class^="icon-"], [class*=" icon-"] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'icomoon' !important;
+  speak: never;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-envelope-o:before {
+  content: "\f003";
+}
+.icon-check:before {
+  content: "\f00c";
+}
+.icon-map-marker:before {
+  content: "\f041";
+}
+.icon-phone:before {
+  content: "\f095";
+}
+.icon-briefcase:before {
+  content: "\f0b1";
+}
+.icon-bars:before {
+  content: "\f0c9";
+}
+.icon-navicon:before {
+  content: "\f0c9";
+}
+.icon-reorder:before {
+  content: "\f0c9";
+}
+.icon-angle-left:before {
+  content: "\f104";
+}
+.icon-angle-right:before {
+  content: "\f105";
+}
+.icon-quote-right:before {
+  content: "\f10e";
+}

css/jquery.formstyler.css

@@ -0,0 +1,112 @@
+.jq-checkbox,
+.jq-radio {
+	position: relative;
+	display: inline-block;
+	overflow: hidden;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+.jq-checkbox input,
+.jq-radio input {
+	position: absolute;
+	z-index: -1;
+	margin: 0;
+	padding: 0;
+	opacity: 0;
+}
+.jq-file {
+	position: relative;
+	display: inline-block;
+	overflow: hidden;
+}
+.jq-file input {
+	position: absolute;
+	top: 0;
+	right: 0;
+	height: auto;
+	margin: 0;
+	padding: 0;
+	opacity: 0;
+	font-size: 100px;
+	line-height: 1em;
+}
+.jq-file__name {
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
+.jq-selectbox,
+.jq-select-multiple {
+	position: relative;
+	display: inline-block;
+}
+.jq-selectbox select,
+.jq-select-multiple select {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	margin: 0;
+	padding: 0;
+	opacity: 0;
+}
+.jq-selectbox li,
+.jq-select-multiple li {
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+	white-space: nowrap;
+}
+.jq-selectbox {
+	z-index: 10;
+}
+.jq-selectbox__select {
+	position: relative;
+}
+.jq-selectbox__select-text {
+	overflow: hidden;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
+.jq-selectbox__dropdown {
+	position: absolute;
+}
+.jq-selectbox__search input {
+	-webkit-appearance: textfield;
+}
+.jq-selectbox__search input::-webkit-search-cancel-button,
+.jq-selectbox__search input::-webkit-search-decoration {
+	-webkit-appearance: none;
+}
+.jq-selectbox__dropdown ul {
+	position: relative;
+	overflow: auto;
+	overflow-x: hidden;
+	list-style: none;
+	-webkit-overflow-scrolling: touch;
+}
+.jq-select-multiple ul {
+	position: relative;
+	overflow-x: hidden;
+	-webkit-overflow-scrolling: touch;
+}
+.jq-number {
+	display: inline-block;
+}
+.jq-number__field input {
+	-moz-appearance: textfield;
+	text-align: left; /* для Opera Presto */
+}
+.jq-number__field input::-webkit-inner-spin-button,
+.jq-number__field input::-webkit-outer-spin-button {
+	margin: 0; /* в каких-то браузерах присутствует отступ */
+	-webkit-appearance: none;
+}

css/media.css

@@ -0,0 +1,220 @@
+@media (max-width: 1156px){
+	.about__items{
+		display: block;
+	}
+
+	.about__item{
+		max-width: 80%;
+		min-height: 330px;
+		margin: 30px auto;
+	}
+	.form__inner{
+		background-image: none;
+	}
+
+	.news__inner{
+		display: block;
+	}
+
+	.news__slider{
+		max-width: 100%;
+		margin-bottom: 90px;
+	}
+
+	.news__blog{
+		max-width: 100%;
+		display: block;
+		margin-bottom: 30px;
+	}
+
+	.news__blog:after{
+		content: '';
+		clear: both;
+		display: block;
+	}
+
+	.news__images{
+		float: left;
+		margin-right: 50px;
+	}
+	.news{
+		padding-bottom: 60px;
+	}
+	.footer__info{
+		max-width: 465px;
+		margin-bottom: 25px;
+	}
+}
+
+@media (max-width: 1050px){
+	.footer__inner{
+		display: block;
+	}
+	.footer__map{
+		max-width: 100%;
+	}
+}
+
+@media (max-width: 900px){
+	.slider .slick-btn{
+		display: none;
+	}
+
+	.about__top, .news__top{
+		display: block;
+	}
+
+	.about__title-box, .form__title-box, .news__title-box{
+		padding-left: 0;
+		text-align: center;
+		margin: 0 auto 30px;        
+	}
+
+	.about__title-box:before, .form__title-box:before, .news__title-box:before{
+		display: none;
+	}
+	.about__btn, .news__btn{
+		text-align: center;
+	}
+
+	.form__box-inner{
+		display: block;
+	}
+
+	.form__box-left{
+		max-width: 100%;
+	}
+	
+	.form__box-right{
+		max-width: 100%;
+	}
+
+	.form__box-inner .jq-selectbox__select{
+		margin-bottom: 10px;
+	}
+
+	.form{
+		padding-bottom: 25px;
+	}
+
+	.advantages__inner{
+		display: block;
+	}
+
+	.advantages__item{
+		max-width: 100%;
+		margin-bottom: 30px;
+	}
+}
+
+@media (max-width: 700px){
+	.header__btn{
+		float: none;
+	}
+
+	.header__contacts{
+		text-align: center;
+	}
+
+	.header__btn:before{
+		display: none;
+	}
+
+	.footer__info .header__btn:before{
+		display: block;
+	}
+
+	.header__btn-menu{
+		display: block;
+	}
+
+	.menu ul{
+		display: none;
+		position: absolute;
+		left: 0;
+		right: 0;
+		margin-top: 20px;
+		z-index: 50;
+	}
+
+	.menu li{
+		display: block;
+		text-align: center;
+	}
+
+	.menu a{
+		display: block;
+		background-color: #ffc222;
+		border-top: 1px solid #fff;
+		border-bottom: 1px solid #fff;
+	}
+
+	.menu li + li{
+		padding-left: 0;
+	}
+}
+
+@media (max-width: 600px){
+	.about__item{
+		max-width: 100%;
+		min-height: 375px;
+		margin: 30px auto;
+	}
+}
+
+@media (max-width: 540px){
+	.news__slider{
+		padding: 50px 15px 25px 25px;
+	}
+
+	.news__slider:before{
+		left: 25px;
+	}
+
+	.news__slider-inner .slick-next{
+		right: -20px;
+	}
+
+	.news__slider-inner .slick-prev{
+		right: 35px;
+	}
+
+	.news__images{
+		float: none;
+	}
+
+	.news__slider-inner .slick-btn{
+		bottom: -90px;
+	}
+}
+
+@media (max-width: 414px){
+	.slider__title{
+		font-size: 24px;
+	}
+	.slider__text{
+		font-size: 16px;
+	}
+}
+
+@media (max-width: 400px){
+	.header__btn:before{
+		display: block;
+	}
+
+	.advantages__item{
+		padding: 0;
+	}
+}
+
+@media (max-width: 375px){
+	.header__email{
+		padding-right: 30px;
+	}
+}
+
+@media (min-width: 700px){
+	.menu ul{
+		display: block !important;
+	}
+}

css/normalize.css

@@ -0,0 +1,349 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+
+main {
+  display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+  display: none;
+}

css/slick.css

@@ -0,0 +1,119 @@
+/* Slider */
+.slick-slider
+{
+    position: relative;
+
+    display: block;
+    box-sizing: border-box;
+
+    -webkit-user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
+
+    -webkit-touch-callout: none;
+    -khtml-user-select: none;
+    -ms-touch-action: pan-y;
+        touch-action: pan-y;
+    -webkit-tap-highlight-color: transparent;
+}
+
+.slick-list
+{
+    position: relative;
+
+    display: block;
+    overflow: hidden;
+
+    margin: 0;
+    padding: 0;
+}
+.slick-list:focus
+{
+    outline: none;
+}
+.slick-list.dragging
+{
+    cursor: pointer;
+    cursor: hand;
+}
+
+.slick-slider .slick-track,
+.slick-slider .slick-list
+{
+    -webkit-transform: translate3d(0, 0, 0);
+       -moz-transform: translate3d(0, 0, 0);
+        -ms-transform: translate3d(0, 0, 0);
+         -o-transform: translate3d(0, 0, 0);
+            transform: translate3d(0, 0, 0);
+}
+
+.slick-track
+{
+    position: relative;
+    top: 0;
+    left: 0;
+
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+}
+.slick-track:before,
+.slick-track:after
+{
+    display: table;
+
+    content: '';
+}
+.slick-track:after
+{
+    clear: both;
+}
+.slick-loading .slick-track
+{
+    visibility: hidden;
+}
+
+.slick-slide
+{
+    display: none;
+    float: left;
+
+    height: 100%;
+    min-height: 1px;
+}
+[dir='rtl'] .slick-slide
+{
+    float: right;
+}
+.slick-slide img
+{
+    display: block;
+}
+.slick-slide.slick-loading img
+{
+    display: none;
+}
+.slick-slide.dragging img
+{
+    pointer-events: none;
+}
+.slick-initialized .slick-slide
+{
+    display: block;
+}
+.slick-loading .slick-slide
+{
+    visibility: hidden;
+}
+.slick-vertical .slick-slide
+{
+    display: block;
+
+    height: auto;
+
+    border: 1px solid transparent;
+}
+.slick-arrow.slick-hidden {
+    display: none;
+}

css/style.css

@@ -0,0 +1,791 @@
+*{
+	box-sizing: border-box;
+}
+body{
+	font-family: 'PT Serif', serif;
+	/* font-family: 'Roboto', sans-serif; */
+	font-weight: 400;
+	font-size: 14px;
+	line-height: 18px;
+	color: #5e5e5e;
+}
+
+a{
+	text-decoration: none;
+	display: inline-block;
+}
+
+ul, li{
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+
+.container{
+	max-width: 1170px;
+	margin: 0 auto;
+	padding: 0 15px;
+}
+
+.header{
+	font-family: 'Roboto', sans-serif;
+}
+
+.header__top{
+	background-color: #303030;
+}
+
+.header__btn{
+	float: right;
+	line-height: 36px;
+	color: #1b1b1b;
+	background-color: #ffc222;
+	padding: 5px 20px 4px 50px;
+	font-size: 16px;
+	position: relative;
+}
+
+.header__btn:before{
+	content: "\f0b1";
+	font-family: 'icomoon';
+	position: absolute;
+	left: 22px;
+	color: #1b1b1b;
+}
+
+.header__contacts:after{
+	content: '';
+	clear: both;
+	display: block;
+}
+
+.header__phone, .header__email{
+	color: #cbcacb;
+	letter-spacing: 0.25px;
+	line-height: 45px;
+	position: relative;
+}
+
+.header__phone{
+	padding-left: 20px;
+	padding-right: 30px;
+}
+
+.header__phone:before{
+	content: "\f095";
+	font-family: 'icomoon';
+	position: absolute;
+	left: 0;
+	color: #ffc222;
+}
+
+.header__email{
+	padding-left: 24px;
+}
+
+.header__email:before{
+	font-family: 'icomoon';
+	content: "\f003";
+	position: absolute;
+	left: 0;
+	color: #ffc222;
+}
+
+.header__content{
+	padding: 34px 0px 23px;
+}
+
+.header__content-inner{
+	display: flex;
+	justify-content: space-between;
+}
+
+.menu li{
+	display: inline-block;
+}
+
+.menu a{
+	color: #323232;
+	font-size: 16px;
+	line-height: 36px;
+	border: 1px solid transparent;
+	padding: 0px 16px;
+	transition: all .3s;
+}
+
+.menu a:hover{
+	border-color: #ffc222;
+}
+
+.menu li + li{
+	padding-left: 10px;
+}
+
+#modal{
+	display: none;
+}
+
+.slider{
+	background: url('../img/slider-fon.jpg');
+	background-repeat: no-repeat;
+	background-size: cover;
+	background-position: center;
+	min-height: 500px;
+}
+
+.slider__item{
+	text-align: center;
+	padding-top: 110px;
+	min-width: 665px;
+	margin: 0 auto;
+}
+
+.slider__title{
+	text-transform: uppercase;
+	font-size: 30px;
+	line-height: 36px;
+	color: #fff;
+	font-weight: 500;
+	letter-spacing: 1.5px;
+	margin-bottom: 22px;
+	font-family: 'Roboto', sans-serif;
+}
+
+.slider__text{
+	line-height: 24px;
+	font-size: 18px;
+	color: #d3d2d2;
+	margin-bottom: 50px;
+}
+
+.default-btn{
+	font-size: 14px;
+	line-height: 24px;
+	color: #fff;
+	font-weight: 500;
+	font-family: 'Roboto', sans-serif;
+	padding: 8px 50px 8px 24px;
+	border: 1px solid #ffc222;
+	border-right-width: 20px;
+	position: relative;
+	outline: none;
+}
+
+.default-btn:after{
+	content: "\f105";
+	font-family: 'icomoon';
+	position: absolute;
+	top: 50%;
+	transform: translateY(-50%);
+	right: -13px;
+}
+
+.slider__inner{
+	position: relative;
+}
+
+.slick-btn{
+	position: absolute;
+	top: 74%;
+	z-index: 3;
+	width: 40px;
+	height: 40px;
+	border: 1px solid #fff;
+	background-color: transparent;
+	cursor: pointer;
+	outline: none;
+	background-color: #ffc222;
+}
+
+.slick-btn.slick-disabled{
+	cursor: default;
+	background-color: transparent;
+}
+
+.slick-btn:before{
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	font-family: 'icomoon';
+	color: #fff;
+}
+
+.slick-next{
+	right: 0;
+}
+
+.slick-next:before{
+	content: "\f105";
+}
+
+.slick-prev{
+	left: 0;
+}
+
+.slick-prev:before{
+	content: "\f104";
+}
+
+.about{
+	padding: 50px 0 30px;
+}
+
+.about__top, .news__top{
+	display: flex;
+	justify-content: space-between;
+	margin-bottom: 60px;
+}
+
+.about__title-box, .form__title-box, .news__title-box{
+	max-width: 520px;
+	padding-left: 140px;
+	position: relative;
+}
+
+.about__title-box:before,
+.form__title-box:before,
+.news__title-box:before{
+	content: '';
+	position: absolute;
+	width: 100px;
+	height: 2px;
+	background-color: #ffc222;
+	left: 0;
+	top: 11px;
+}
+
+.about__title,
+.form__title,
+.news__title{
+	font-size: 24px;
+	font-weight: 500;
+	line-height: 24px;
+	color: #212020;
+	font-family: 'Roboto', sans-serif;
+	margin-bottom: 10px;
+}
+
+.about__text, .form__text, .news__text{
+	letter-spacing: 0.1px;
+}
+
+.about__btn a, .news__btn a{
+	color: #373636;
+	line-height: 24px;
+	letter-spacing: 0.25px;
+	padding: 5px 38px;
+	border: 3px solid #e6e6e6;
+	font-family: 'Roboto', sans-serif;
+}
+
+.about__items{
+	display: flex;
+	justify-content: space-between;
+}
+
+.about__item{
+	max-width: 360px;
+	text-align: center;
+	padding: 30px 0 80px;
+	position: relative;
+	min-height: 375px;
+	background-color: #f9f9f9;
+	box-shadow: 0px 7px 24.3px 2.7px rgba(91, 89, 89, 0.14);
+}
+
+.about__item-title{
+	color: #212020;
+	font-size: 18px;
+	line-height: 24px;
+	font-family: 'Roboto', sans-serif;
+	padding: 25px 0;
+}
+
+.about__item-text{
+	letter-spacing: 0.1px;
+	padding: 0 30px 30px;
+	
+}
+
+.about__item-btn{
+	position: absolute;
+	bottom: 40px;
+	left: 0;
+	right: 0;
+}
+
+.about__item-btn .default-btn{
+	color: #373636;
+}
+
+.about__item-btn .default-btn:after{
+	color: #fff;
+}
+
+.about__item-link{
+	color: #050505;
+	font-family: 'Roboto', sans-serif;
+	border-bottom: 1px solid #050505;
+	margin-right: 60px;
+}
+
+.about1{
+	background-image: url(../img/img-2.jpg);
+	background-size: cover;
+	background-position: center;
+	min-height: 300px;
+	background-repeat: no-repeat;
+	padding: 25px 0 45px;
+}
+
+.about1__inner{
+	max-width: 545px;
+}
+
+.about1__title{
+	padding: 10px 0 25px;
+	font-size: 24px;
+	line-height: 24px;
+	color: #fff;
+	font-weight: 500;
+	font-family: 'Roboto', sans-serif;
+}
+
+.about1__text{
+	margin-bottom: 30px;
+	letter-spacing: 0.1px;
+	line-height: 24px;
+	color: #d3d2d2;
+}
+
+.about1__btn.default-btn::after{
+	color: #000;
+}
+
+.form{
+	padding-top: 30px;
+}
+
+.form__inner{
+	padding-bottom: 40px;
+	background-image: url(../img/girl.png);
+	min-height: 460px;
+	background-repeat: no-repeat;
+	background-position: bottom right;
+}
+
+.form__box{
+	max-width: 850px;
+	padding-top: 45px;
+}
+
+.form__box-inner{
+	display: flex;
+	justify-content: space-between;
+}
+
+.form__box-left{
+	max-width: 260px;
+	width: 100%;
+}
+
+.form__box-right{
+	max-width: 555px;
+	width: 100%;
+}
+
+.form__box-inner label,
+.form__box-inner input,
+.form__box-inner textarea{
+	display: block;
+	width: 100%;
+}
+
+.form__box-inner label{
+	line-height: 36px;
+	color: #282828;
+	font-family: 'Roboto', sans-serif;
+}
+
+.form__box-inner input{
+	margin-bottom: 8px;
+	outline: none;
+	height: 40px;
+	border: 1px solid #e6e6e6;
+	padding: 0 10px;
+}
+
+.form__box-inner select{
+	outline: none;	
+	padding-left: 17px;
+}
+
+.form__box-inner .jq-selectbox.jqselect{
+	display: block;
+	width: 100%;
+}
+
+.form__box-inner .jq-selectbox__select{
+	height: 40px;
+	border: 1px solid #e6e6e6;
+	padding-left: 17px;
+}
+
+.form__box-inner .jq-selectbox__trigger-arrow:before{
+	content: '\f105';
+	font-family: 'icomoon';
+	position: absolute;
+	right: 17px;
+	top: 0;
+	transform: rotate(90deg);
+}
+
+.form__box-inner .jq-selectbox__dropdown{
+	width: 100%;
+	margin: 2px 0 0;
+	padding: 0;
+	border: 1px solid #e6e6e6;
+	background: #fff;
+	box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
+}
+
+.form__box-inner .jq-selectbox li{
+	min-height: 18px;
+	padding: 5px 17px 6px;
+	color: #231f20;
+}
+
+.form__box-inner .jq-selectbox li.selected{
+	background-color: #a3abb1;
+	color: #fff;
+}
+
+.form__box-inner .jq-selectbox li:hover{
+	background-color: #08c;
+	color: #fff;
+}
+
+.form__box-inner .jq-selectbox li.disabled{
+	color: #aaa;
+}
+
+.form__box-inner .jq-selectbox li.disabled:hover{
+	background: none;
+}
+
+.form__box-inner .jq-selectbox li.optgroup{
+	font-weight: bold;
+}
+
+.form__box-inner .jq-selectbox li.optgroup:hover{
+	background: none;
+	color: #231f20;
+	cursor: default;
+}
+
+ .jq-selectbox li.option{
+	padding-left: 25px;
+}
+
+.form__box-inner textarea{
+	outline: none;
+	border: 1px solid #e6e6e6;	
+	padding: 10px;
+	height: 208px;
+	resize: none;
+	margin-bottom: 40px;
+}
+
+.form__box-inner button{
+	background-color: transparent;
+	color: #282828;
+	float: right;
+}
+
+.advantages{
+	padding: 55px 0 40px;
+	background-image: url('../img/advantege.jpg');
+	background-repeat: no-repeat;
+	background-position: center;
+	min-height: 285px;
+	background-size: cover;
+}
+
+.advantages__inner{
+	color: #fff;
+	text-align: center;
+	display: flex;
+	justify-content: space-between;
+}
+
+.advantages__item{
+	max-width: 360px;
+	padding: 0 20px;
+}
+
+.advantages__title{
+	font-size: 18px;
+	line-height: 24px;
+	font-weight: 500;
+	font-family: 'Roboto', sans-serif;
+	padding: 60px 0 15px;
+	position: relative;
+}
+
+.advantages__title:before{
+	content: '';
+	position: absolute;
+	width: 40px;
+	height: 40px;
+	border: 2px solid #ffc222;
+	top: 0;
+	left: 50%;
+	transform: translateX(-50%);
+}
+
+.advantages__title:after{
+	content: "\f00c";
+	font-family: 'icomoon';
+	font-size: 14px;
+	position: absolute;
+	top: 9px;
+	left: 50%;
+	transform: translateX(-50%);
+}
+
+.advantages__text{
+	line-height: 24px;
+	color: #d3d2d2;
+	letter-spacing: 0.1px;
+}
+
+.news{
+	padding: 55px 0 110px;
+	background-color: #f9f9f9;
+}
+
+.news__inner{
+	display: flex;
+	justify-content: space-between;
+}
+
+.news__slider{
+	max-width: 555px;
+	width: 100%;
+	background-color: #fff;
+	box-shadow: 0px 5px 15.36px 0.64px rgba(128, 127, 127, 0.13);
+	padding: 60px 35px 45px 70px;
+	position: relative;
+}
+
+.news__slider:before{
+	content: "\f10e";
+	font-family: 'icomoon';
+	position: absolute;
+	top: 0;
+	left: 70px;
+	color: #fff;
+	font-size: 16px;
+	width: 65px;
+	height: 30px;
+	text-align: center;
+	line-height: 30px;
+	background-color: #ffc222;
+}
+
+.news__blog{
+	max-width: 260px;
+	width: 100%;
+}
+
+.news__images{
+	position: relative;
+}
+
+.new__date{
+	position: absolute;
+	background-color: #ffc222;
+	width: 50px;
+	height: 55px;
+	color: #fff;
+	text-align: center;
+	padding-top: 30px;
+	font-weight: 700;
+	top: 0;
+	left: 10px;
+}
+
+.new__blog-title{
+	font-size: 16px;
+	font-weight: 500;
+	font-family: 'Roboto', sans-serif;
+	letter-spacing: 0.5px;
+	color: #242424;
+	padding: 12px 0;
+}
+
+.new__blog-text{
+	letter-spacing: 0.1px;
+	color: #5e5e5e;
+}
+
+.news__slider-title{
+	font-size: 18px;
+	line-height: 24px;
+	color: #242424;
+	font-weight: 500;
+	font-family: 'Roboto', sans-serif;
+	letter-spacing: 0.5px;
+	margin-bottom: 15px;
+}
+
+.news__slider-text{
+	margin-bottom: 30px;
+}
+
+.news__slider-author{
+	letter-spacing: 0.1px;
+	color: #212020;
+	font-weight: 500;
+	font-family: 'Roboto', sans-serif;
+}
+
+.news__slider-inner .slick-btn{
+	top: auto;
+	bottom: -110px;
+}
+
+.news__slider-inner .slick-next{
+	right: -35px;
+}
+
+.news__slider-inner .slick-prev{
+	right: 20px;
+	left: auto;
+}
+
+.news__slider-inner .slick-disabled{
+	
+	border-color: #dadada;
+}
+
+.news__slider-inner .slick-disabled:before{
+	color: #dadada;
+}
+
+.footer__content{
+	background-color: #595959;
+	padding: 20px 0 30px;
+}
+
+.footer__inner{
+	display: flex;
+	justify-content: space-between;
+}
+
+.footer__inner .header__btn{
+	float: none;
+	display: inline-block;
+}
+
+.footer__map{
+	padding-top: 10px;
+	max-width: 630px;
+	width: 100%;
+}
+
+.footer__map iframe{
+	width: 100%;
+}
+
+.footer__title{
+	font-family: 'Roboto', sans-serif;
+	font-weight: 500;
+	font-size: 16px;
+	color: #fff;
+	line-height: 36px;
+	letter-spacing: 0.5px;
+}
+
+.footer__text{
+	color: #d3d2d2;
+	margin-bottom: 20px;
+}
+
+.footer__info{
+	max-width: 360px;
+}
+
+.footer__list{
+	padding-top: 10px;
+}
+
+.footer__list li{
+	margin-top: 10px;
+}
+
+.footer__list a{
+	font-size: 16px;
+	line-height: 24px;
+	letter-spacing: 0.25px;
+	color: #fff;
+	font-weight: 400;
+	font-family: 'Roboto', sans-serif;
+	padding-left: 33px;
+	position: relative;
+}
+
+.footer__list a:before{
+	content: "\f003";
+	position: absolute;
+	left: 0;
+	color: #ffc222;
+	font-family: 'icomoon';
+}
+
+.footer__list .footer__phone:before{
+	content: "\f095";
+	left: 3px;
+}
+
+.footer__list .footer__adress:before{
+	content: "\f041";
+	left: 3px;
+}
+
+.footer__copy{
+	background-color: #303030;
+	text-align: center;
+	font-size: 12px;
+	line-height: 24px;
+	padding: 8px 0;
+	font-weight: 400;
+	font-family: 'Roboto', sans-serif;
+}
+
+#modal{
+	width: 300px;
+}
+
+#modal input{
+	display: block;
+	width: 100%;
+	margin-bottom: 20px;
+	height: 40px;
+	outline: none;
+	border: 1px solid #e6e6e6;
+	padding: 0 10px;
+	font-family: 'Roboto', sans-serif;
+	font-weight: 400;
+}
+
+#modal input[type='submit']{
+	background-color: #ffc222;
+	border: none;
+}
+
+.header__btn-menu{
+	display: none;
+	font-size: 28px;
+}

index.html

@@ -0,0 +1,422 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Business Websitet</title>
+	<link rel="preconnect" href="https://fonts.gstatic.com">
+	<link href="https://fonts.googleapis.com/css2?family=PT+Serif:wght@400;700&family=Roboto:wght@400;500&display=swap" rel="stylesheet">
+	<link rel="stylesheet" href="./css/normalize.css">
+	<link rel="stylesheet" href="./css/fonts.css">
+	<link rel="stylesheet" href="./css/jquery.fancybox.min.css">
+	<link rel="stylesheet" href="./css/slick.css">
+	<link rel="stylesheet" href="./css/jquery.formstyler.css">
+	<link rel="stylesheet" href="./css/style.css">
+	<link rel="stylesheet" href="./css/media.css">
+</head>
+<body>
+	<header class="header">
+		<div class="header__top">
+			<div class="container">
+				<div class="header__contacts">
+					<a class="header__phone" href="tel:380963092145">+38 (096) 309 21 45</a>
+					<a class="header__email" href="#">layout585@gmail.com</a>
+					<a data-fancybox data-src="#modal" href="javascript:;" class="header__btn" href="#">Бесплатная консультация</a>
+				</div>
+			</div>	                  
+		</div>
+		<div class="header__content">
+			<div class="container">
+				<div class="header__content-inner">
+					<div class="header__logo">
+						<a href="#">
+							<img src="./img/logo.png" alt="logo">
+						</a>
+					</div>
+					<nav class="menu">
+						<div class="header__btn-menu">
+							<span class="icon-bars"></span>
+						</div>
+						<ul>                              
+							<li><a href="#">Главная</a></li>
+							<li><a href="#"> О компании </a></li>
+							<li><a href="#"> Услуги </a></li>
+							<li><a href="#">Контакт</a></li>
+						</ul>
+					</nav>
+				</div>	
+			</div>
+			
+		</div>
+	</header>
+	 <section class="slider">
+		<div class="container">
+			<div class="slider__inner">
+				<div class="slider__item">
+					<div class="slider__item-content">
+						<div class="slider__title">
+							КОМПЛЕКСНОЕ ЗАКРЫТИЕ ПРЕДПРИЯТИЯ
+						</div>
+						<div class="slider__text">
+							Полное прекращение существования юридического лица с сохранением<br> легальности
+							 всей предыдущей деятельности.
+						</div>
+						<a data-fancybox data-src="#modal" href="javascript:;" class="slider__btn default-btn">
+							Оставить заявку
+						</a>
+					</div>								
+				</div>
+				<div class="slider__item">
+					<div class="slider__item-content">
+						<div class="slider__title">
+							оказание риэлторских услуг
+						</div>
+						<div class="slider__text">
+							Полное прекращение существования юридического лица с сохранением <br>легальности
+							 всей предыдущей деятельности.
+						</div>
+						<a data-fancybox data-src="#modal" href="javascript:;" class="slider__btn default-btn">
+							Оставить заявку
+						</a>
+					</div>								
+				</div>
+				<div class="slider__item">
+					<div class="slider__item-content">
+						<div class="slider__title">
+							услуги в судебных делах
+						</div>
+						<div class="slider__text">
+							Полное прекращение существования юридического лица с сохранением <br> легальности
+							 всей предыдущей деятельности.
+						</div>
+						<a data-fancybox data-src="#modal" href="javascript:;" class="slider__btn default-btn">
+							Оставить заявку
+						</a>
+					</div>								
+				</div>
+			</div>
+		</div>
+	</section>
+	
+	<section class="about">
+		<div class="container">
+			<div class="about__top">
+				<div class="about__title-box">
+					<div class="about__title">
+						Наши Услуги
+					</div>
+					<div class="about__text">
+						Комплексный подход к вашему вопросу, своевременная правовую помощь,
+						 представление интересов во всех судебных инстанциях.
+					</div>
+				</div>
+				<div class="about__btn">
+					<a href="#">Показать все услуги</a>
+				</div>	
+			</div>
+			<div class="about__items">
+				<div class="about__item">
+					<img src="./img/about-1.png" alt="">
+					<div class="about__item-title">
+						Банкротство и ликвидация
+					</div>
+					<div class="about__item-text">
+						 Полное прекращение существования юридического лица с сохранением легальности
+						 всей предыдущей деятельности
+					</div>
+					<div class="about__item-btn">
+						<a class="about__item-link" href="#">Подробнее</a>
+						<a data-fancybox data-src="#modal" href="javascript:;" class="default-btn">
+							Заказать
+						</a>
+					</div>
+				</div>
+			
+			
+				<div class="about__item">
+					<img src="./img/about-2.png" alt="">
+					<div class="about__item-title">
+						Адвокатское сопровождение
+					</div>
+					<div class="about__item-text">
+						Мы гарантируем полное профессиональное обслуживание клиентов в заявленных
+						 сферах деятельности и соблюдение конфиденциальности.
+					</div>
+					<div class="about__item-btn">
+						<a class="about__item-link" href="#">Подробнее</a>
+						<a data-fancybox data-src="#modal" href="javascript:;" class="default-btn">
+							Заказать
+						</a>
+					</div>
+				</div>
+			
+				<div class="about__item">
+					<img src="./img/about-3.png" alt="">
+					<div class="about__item-title">
+						Налоговый аудит
+					</div>
+					<div class="about__item-text">
+						Налоговый аудит проводят перед проведением налоговых проверок; при оценке 
+						возможных налоговых рисков; при оптимизации налогообложения.
+					</div>
+					<div class="about__item-btn">
+						<a class="about__item-link" href="#">Подробнее</a>
+						<a data-fancybox data-src="#modal" href="javascript:;" class="default-btn">
+							Заказать
+						</a>
+					</div>
+				</div>
+			</div>
+		</div>
+	</section>
+	
+	<section class="about1">
+		<div class="container">
+			<div class="about1__inner">
+				<div class="about1__title">
+					О компании 
+				</div>
+				<div class="about1__text">
+					Компания специализируется на оказании услуг в сфере корпоративного права,
+					налогового консалтинга, представительства в судах, ликвидации и банкротства предприятий.
+					На сегодняшний день, коллектив компании объединяет 
+					высокопрофессиональных экспертов имеющих 
+				</div>
+				<a href="#" class="about1__btn default-btn">
+					Узнать больше
+				</a>
+			</div>
+		</div>
+	</section>
+	
+	<section class="form">
+		<div class="container">
+			<div class="form__inner">
+				<div class="form__content">
+					<div class="form__title-box">
+						<div class="form__title">
+							Получить Консультацию
+						</div>
+						<div class="form__text">
+							Комплексный подход к вашему вопросу, своевременная правовую помощь, представление
+							 интересов во всех судебных инстанциях.
+						</div>
+					</div>
+					<div class="form__box">
+						<form>
+							<div class="form__box-inner">
+								<div class="form__box-left">
+									<label>
+										E-mail 
+										<input type="text">
+									</label>
+									<label>
+										Контактный телефон 
+										<input type="text">
+									</label>
+									<label>
+										ФИО 
+										<input type="text">
+									</label>
+									<label>
+										Тема вопроса 
+										<select>
+											<option>Финансовые проблеммы</option>
+											<option>Выход из кризиса</option>
+											<option>Юридические услуги</option>
+											<option>Сопровождение юристами</option>
+										</select>
+									</label>
+								</div>
+								<div class="form__box-right">
+									<label>
+										Сообщение 
+										<textarea></textarea>
+									</label>
+									<button class="default-btn" type="submit">Получить консультацию</button>
+								</div>
+							</div>
+						</form>
+					</div>
+				</div>
+			</div>
+		</div>
+	</section>
+	
+	<section class="advantages">
+		 <div class="container">
+			 <div class="advantages__inner">
+				 <div class="advantages__item">
+					 <div class="advantages__title">
+						Десятки добровольных ликвидаций ежемесячно
+					 </div>
+					 <div class="advantages__text">
+						Мы умеем минимизировать все риски в процессе добровольной ликвидации юридических лиц.
+					 </div>
+				 </div>
+				 <div class="advantages__item">
+					 <div class="advantages__title">
+						Отличное знание законов в сфере банкротства 
+					</div>
+					<div class="advantages__text">
+						Позволяют нам эффективно отстаивать как интересы кредиторов, так и интересы
+						 собственников проблемной организации.
+					</div>
+				</div>
+				<div class="advantages__item">
+					<div class="advantages__title">
+						Большой опыт сопровождения банкротства
+					</div>
+					<div class="advantages__text">
+						Мы обладаем большим опытом сопровождения процедур банкротства предприятий.
+					</div>
+				</div>
+			 </div>
+		 </div>
+	</section>
+	
+	<section class="news">
+		<div class="container">
+			<div class="news__top">
+				<div class="news__title-box">
+					<div class="news__title">
+						Новости Компании
+					</div>
+					<div class="news__text">
+						Комплексный подход к вашему вопросу, своевременная правовую помощь,
+						 представление интересов во всех судебных инстанциях.
+					</div>
+				</div>
+				<div class="news__btn">
+					<a href="#">Открыть все новости</a>
+				</div>	
+			</div>
+			<div class="news__inner">
+				<div class="news__slider">
+					<div class="news__slider-inner">
+						<div class="news__slider-item">
+							<div class="news__slider-title">Банкротство и ликвидация предприятия в Украине</div>
+							<div class="news__slider-text">
+								«На сегодняшний день, коллектив компании объединяет высокопрофессиональных 
+								экспертов имеющих специализации в отдельных областях права. На сегодняшний день, 
+								коллектив компании объединяет высокопрофессиональных экспертов имеющих
+								 специализации в отдельных областях права. На сегодняшний день, коллектив 
+								 компании объединяет высокопрофессиональных экспертов имеющих специализации 
+								 в отдельных областях права...»
+							</div>
+							<div class="news__slider-author">Андрей Ворошилов, генеральный д иректор 
+								компании Bankom</div>
+						</div>
+						<div class="news__slider-item">
+							<div class="news__slider-title">Банкротство и ликвидация предприятия в Украине</div>
+							<div class="news__slider-text">
+								«На сегодняшний день, коллектив компании объединяет высокопрофессиональных 
+								экспертов имеющих специализации в отдельных областях права. На сегодняшний день, 
+								коллектив компании объединяет высокопрофессиональных экспертов имеющих
+								 специализации в отдельных областях права. На сегодняшний день, коллектив 
+								 компании объединяет высокопрофессиональных экспертов имеющих специализации 
+								 в отдельных областях права...»
+							</div>
+							<div class="news__slider-author">Андрей Ворошилов, генеральный д иректор 
+								компании Bankom</div>
+						</div>
+						<div class="news__slider-item">
+							<div class="news__slider-title">Банкротство и ликвидация предприятия в Украине</div>
+							<div class="news__slider-text">
+								«На сегодняшний день, коллектив компании объединяет высокопрофессиональных 
+								экспертов имеющих специализации в отдельных областях права. На сегодняшний день, 
+								коллектив компании объединяет высокопрофессиональных экспертов имеющих
+								 специализации в отдельных областях права. На сегодняшний день, коллектив 
+								 компании объединяет высокопрофессиональных экспертов имеющих специализации 
+								 в отдельных областях права...»
+							</div>
+							<div class="news__slider-author">Андрей Ворошилов, генеральный д иректор 
+								компании Bankom</div>
+						</div>
+					</div>
+				</div>
+				<a href="#" class="news__blog">
+					<div class="news__images">
+						<img src="./img/news-1.jpg" alt="news">
+						<div class="new__date">03.04</div>
+					</div>
+					<div class="new__blog-title">
+						Новость компании
+					</div>
+					<div class="new__blog-text">
+						На сегодняшний день, коллектив компании объединяет высокопрофессиональных
+						экспертов имеющих специализации в отдельных областях права...»
+					</div>
+				</a>
+				<a href="#" class="news__blog">
+					<div class="news__images">
+						<img src="./img/news-2.jpg" alt="news">
+						<div class="new__date">03.04</div>
+					</div>
+					<div class="new__blog-title">
+						Новость компании
+					</div>
+					<div class="new__blog-text">
+						На сегодняшний день, коллектив компании объединяет высокопрофессиональных
+						экспертов имеющих специализации в отдельных областях права...»
+					</div>
+				</a>
+			</div>
+		</div>
+	</section>
+	
+	<footer class="footer">
+		<div class="footer__content">
+			<div class="container">
+				<div class="footer__inner">
+					<div class="footer__info">
+						<div class="footer__title">
+							Комплексное закрытие предприятия
+						</div>
+						<div class="footer__text">
+							Полное прекращение существования юридического лица с сохранением легальности
+							всей предыдущей деятельности.
+						</div>
+						<a data-fancybox data-src="#modal" href="javascript:;" class="header__btn" 
+						href="#">Бесплатная консультация</a>
+						<ul class="footer__list">
+							<li><a class="footer__phone" href="tel:380963092145">+38 (096) 309 21 45  </a></li>
+							<li><a href="#">layout585@gmail.com</a></li>
+							<li><a class="footer__adress" href="#">Киев, ул.Пушиной, 13  </a></li>
+						</ul>     
+					</div>
+					<div class="footer__map">
+						<iframe height="250px" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2540.124391996489!2d30.
+						364922015731644!3d50.457408279476354!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.
+						1!3m3!1m2!1s0x40d4cc919501b4ef%3A0x71a476f68f4c8246!2z0YPQuy4g0KTQtdC-0LTQvtGA0Ysg0J_Rg9GI0LjQvdC
+						-0LksIDEzLCDQmtC40LXQsiwgMDIwMDA!5e0!3m2!1sru!2sua!4v1619454443525!5m2!1sru!2sua" 
+						style="border:0;" allowfullscreen="" loading="lazy"></iframe>
+					</div>
+				</div>
+			</div>
+			<div class="footer__copy">
+				<div class="container">
+					<div class="copy__text">
+						© 2017 Template by Anastasia Shaposhnyk. Все права защищены.
+					</div>
+				</div>
+			</div>
+		</div>
+	</footer> 
+
+
+	<div id="modal">
+		<input type="text" placeholder="Ваше имя">
+		<input type="text" placeholder="Ваш телефон">
+		<input type="submit" value="Отправить">
+	  </div>
+
+
+	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+	<script src="./js/jquery.fancybox.min.js"></script>
+	<script src="./js/slick.min.js"></script>
+	<script src="./js/jquery.formstyler.min.js"></script>
+	<script src="./js/main.js"></script>
+</body>
+</html>

js/main.js

@@ -0,0 +1,16 @@
+$(function(){
+
+	$('.slider__inner, .news__slider-inner').slick({
+		nextArrow: '<button type="button" class="slick-btn slick-next"></button>',
+		prevArrow: '<button type="button" class="slick-btn slick-prev"></button>',
+		infinite: false
+	});
+
+	$('select').styler();
+
+	$('.header__btn-menu').on('click', function(){
+		$('.menu ul').slideToggle();
+	});
+
+
+});