diff --git a/about.html b/about.html
index 3f70aaa0..cd9f3f85 100644
--- a/about.html
+++ b/about.html
@@ -48,7 +48,7 @@
-
diff --git a/sass/base/_media.scss b/sass/base/_media.scss
index a7c0c911..51b37fd2 100755
--- a/sass/base/_media.scss
+++ b/sass/base/_media.scss
@@ -63,25 +63,56 @@
}
.nav__row {
+
flex-direction: column;
align-items: center;
}
.navigation-list ul {
+
display: none;
margin-top: 20px;
}
+ .navigation-list.show {
+ width: 100%;
+ }
+
.navigation-list.show ul {
+ box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
display: flex;
flex-direction: column;
+ // justify-content: center;
+ align-items: center;
+ align-content: center;
+ // width: 100%;
+ text-align: center;
+ // padding: auto;
}
.navigation-list li {
margin-right: 20px;
- width: 100vw;
- padding: auto 10px;
- background-color: red;
+ // width: 100vw;
+ padding: 20px auto;
+ width: 100%;
+
+ &:last-child{
+ margin: 0;
+ }
+
+ a {
+ padding: 10px;
+ border-bottom: 1px solid rgb(205, 205, 205);
+
+ background-color: rgb(235, 235, 235);
+
+ }
+ }
+
+ .dash-under-link ul{
+
+ justify-content: center;
+ align-items: center;
}
.hamburger {
@@ -161,6 +192,11 @@
// Адаптивність для дуже маленьких екранів (до 480px)
@media screen and (max-width: 480px) {
+
+ .container {
+
+ }
+
.nav__row {
flex-direction: column;
justify-content: center;
diff --git a/sass/blocks/_about.scss b/sass/blocks/_about.scss
index ab7de2f6..ec205f87 100644
--- a/sass/blocks/_about.scss
+++ b/sass/blocks/_about.scss
@@ -1,8 +1,10 @@
.about-us {
- padding: 20px;
+ margin-top: 50px;
+ // padding: 20px;
}
+
.about-us__row {
display: flex;
align-items: center;
diff --git a/sass/blocks/_parallax.scss b/sass/blocks/_parallax.scss
deleted file mode 100644
index 96343945..00000000
--- a/sass/blocks/_parallax.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-.parallax {
- //margin-top: 50px;
- /* The image used */
- // background-image: url("./img/img_parallax.jpg");
- background-image: url(../img/parallax/img_parallax.jpg);
-
- // filter: blur(0.2rem);
- box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset,rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
-
- /* Full height */
- height: 35vh;
-
- /* Create the parallax scrolling effect */
- background-attachment: fixed;
- background-position: top;
- background-repeat: no-repeat;
- background-size: cover;
- overflow: hidden;
-
- &__bottom {
- height: 35vh;
- background-position: bottom;
- }
-
- &__about-us {
- background-image: url(../img/parallax/shtukaturka_parallax.jpg);
- margin: 50px 0;
- height: 50vh;
- filter: blur(0.15rem);
-
- }
-}
diff --git a/sass/blocks/_tell-me.scss b/sass/blocks/_tell-me.scss
new file mode 100644
index 00000000..7df61faf
--- /dev/null
+++ b/sass/blocks/_tell-me.scss
@@ -0,0 +1,135 @@
+.tell-me__block {
+display: flex;
+align-items: center;
+padding: 0 30px;
+
+height: 200px;
+ width: 100%;
+ background-color: rgb(235, 235, 235);
+ // box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;
+ box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
+ // box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
+
+ input[name=name], [name=phone] {
+ min-width: 13em;
+ width: 13vw;
+ padding: 12px 10px 12px 35px;
+ margin: 8px 0;
+ display: inline-block;
+ border: 1px solid darkgray;
+ background: none;
+ border-top: none;
+ border-left: none;
+ border-right: none;
+ // border-radius: 3px;
+ box-sizing: border-box;
+ &::placeholder {
+ // color: rgba(255, 255, 255, 0.8);
+ color: rgb(46, 45, 45);
+ }
+
+ &:focus {
+ background: none;
+ }
+ }
+}
+
+.tell-me__inputs {
+ flex: 1;
+ display: flex;
+ justify-content: space-evenly;
+}
+
+.tell-me__row {
+ column-gap: 50px;
+ width: 100%;
+ display: flex;
+ align-items: center;
+ // text-align: center;
+
+ h1{
+ flex: 1;
+ color: rgb(46, 45, 45);
+ width: auto;
+ font-weight: 700;
+ // font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+ font-size: 24px;
+ }
+
+ form {
+ flex: 2;
+ display: flex;
+ justify-content: space-between;
+ position: relative;
+
+ svg {
+ // margin: 0 auto;
+ margin-top: 1.3em;
+ position: absolute;
+ // margin-right: -50px;
+ width: 1.3em;
+ height: 1.3em;
+ }
+ }
+
+ button {
+ margin: auto 0;
+ padding: 0 50px;
+ }
+}
+
+
+@media screen and (max-width: 1090px) {
+ .tell-me__row {
+ flex-direction: column;
+ // height: 100%;
+ row-gap: 20px;
+ justify-content: space-evenly;
+
+ form {
+ // flex: 1;
+ width: 100%;
+ justify-content: space-evenly;
+ }
+ }
+}
+
+@media screen and (max-width: 800px) {
+
+ .tell-me__block {
+ height: auto;
+ padding: 20px;
+ }
+
+ .tell-me__row {
+
+ form {
+ row-gap: 20px;
+
+ flex-direction: column;
+ }
+ }
+}
+
+@media screen and (max-width: 560px) {
+
+ .tell-me__block {
+ text-align: center;
+
+ }
+
+ .tell-me__row {
+ h1 {
+ font-size: 22px;
+ }
+
+ }
+
+ .tell-me__inputs {
+ flex-direction: column;
+ align-items: center;
+ row-gap: 20px;
+ }
+
+
+ }
diff --git a/sass/blocks/_testimonials.scss b/sass/blocks/_testimonials.scss
index 81521e42..40ec3936 100755
--- a/sass/blocks/_testimonials.scss
+++ b/sass/blocks/_testimonials.scss
@@ -3,7 +3,6 @@
padding-bottom: 30px;
// background-color: white;
- box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
// box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
}
diff --git a/sass/main.scss b/sass/main.scss
index 42fa5e3a..9aa76bb0 100755
--- a/sass/main.scss
+++ b/sass/main.scss
@@ -21,7 +21,7 @@
@import './blocks/about';
@import './blocks/slides';
-@import './blocks/parallax';
+@import './blocks/tell-me';
// Media
@@ -66,55 +66,79 @@
- 
-