diff --git a/src/App.tsx b/src/App.tsx
index 85bff93..1fcf0b6 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -15,6 +15,7 @@ import Rating from "./pages/Rating";
import Profile from "./pages/Profile";
import EventItem from "./pages/EventItem";
import Structure from "./pages/Structure";
+import Contacts from "./pages/Contact";
const App = () => {
return (
@@ -28,6 +29,7 @@ const App = () => {
} />
} />
} />
+ } />
diff --git a/src/components/contact/ContactForm.tsx b/src/components/contact/ContactForm.tsx
new file mode 100644
index 0000000..f6aa2c4
--- /dev/null
+++ b/src/components/contact/ContactForm.tsx
@@ -0,0 +1,139 @@
+// Modules
+
+// Images
+import board from "../../images/board.jpg";
+
+// Icons
+import forward from "../../icons/arrow-forward.svg";
+import email from "../../icons/email-black.svg";
+import phone from "../../icons/phone-gray.svg";
+import pin from "../../icons/pin.svg";
+import fb from "../../icons/facebook-gray.svg";
+import yt from "../../icons/youtube-gray.svg";
+import ig from "../../icons/instagram-grey.svg";
+import twitter from "../../icons/twitter-gray.svg";
+
+const ContactForm = () => {
+ return (
+
+ );
+};
+
+export default ContactForm;
diff --git a/src/components/global/Nav.tsx b/src/components/global/Nav.tsx
index ed4d161..e1fb09b 100644
--- a/src/components/global/Nav.tsx
+++ b/src/components/global/Nav.tsx
@@ -38,8 +38,12 @@ const Nav = () => {
>
Рейтинг
-
- Контакты
+
+ Контакты
diff --git a/src/icons/arrow-forward.svg b/src/icons/arrow-forward.svg
new file mode 100644
index 0000000..0b0522d
--- /dev/null
+++ b/src/icons/arrow-forward.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/icons/email-black.svg b/src/icons/email-black.svg
new file mode 100644
index 0000000..936358b
--- /dev/null
+++ b/src/icons/email-black.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/icons/facebook-gray.svg b/src/icons/facebook-gray.svg
new file mode 100644
index 0000000..43a9ab0
--- /dev/null
+++ b/src/icons/facebook-gray.svg
@@ -0,0 +1,10 @@
+
diff --git a/src/icons/green-bg.svg b/src/icons/green-bg.svg
new file mode 100644
index 0000000..4175794
--- /dev/null
+++ b/src/icons/green-bg.svg
@@ -0,0 +1,20 @@
+
diff --git a/src/icons/instagram-grey.svg b/src/icons/instagram-grey.svg
new file mode 100644
index 0000000..7616cb0
--- /dev/null
+++ b/src/icons/instagram-grey.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/icons/phone-gray.svg b/src/icons/phone-gray.svg
new file mode 100644
index 0000000..185deeb
--- /dev/null
+++ b/src/icons/phone-gray.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/icons/pin.svg b/src/icons/pin.svg
new file mode 100644
index 0000000..0039a85
--- /dev/null
+++ b/src/icons/pin.svg
@@ -0,0 +1,4 @@
+
diff --git a/src/icons/twitter-gray.svg b/src/icons/twitter-gray.svg
new file mode 100644
index 0000000..6702c60
--- /dev/null
+++ b/src/icons/twitter-gray.svg
@@ -0,0 +1,10 @@
+
diff --git a/src/icons/youtube-gray.svg b/src/icons/youtube-gray.svg
new file mode 100644
index 0000000..2c74f0f
--- /dev/null
+++ b/src/icons/youtube-gray.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/images/board.jpg b/src/images/board.jpg
new file mode 100644
index 0000000..bf1be9d
Binary files /dev/null and b/src/images/board.jpg differ
diff --git a/src/pages/Contact.tsx b/src/pages/Contact.tsx
new file mode 100644
index 0000000..19771ac
--- /dev/null
+++ b/src/pages/Contact.tsx
@@ -0,0 +1,24 @@
+// Modules
+
+// Icons
+import bg from "../icons/green-bg.svg";
+
+// Components
+import ContactForm from "../components/contact/ContactForm";
+
+const Contacts = () => {
+ return (
+
+
+

+
+
+
+ );
+};
+
+export default Contacts;
diff --git a/src/styles/_contact.scss b/src/styles/_contact.scss
new file mode 100644
index 0000000..d7fd62d
--- /dev/null
+++ b/src/styles/_contact.scss
@@ -0,0 +1,153 @@
+.contact {
+ position: relative;
+}
+
+.contact-inner {
+ padding: 8rem 0 16rem 0;
+ position: relative;
+}
+
+.contact-bg {
+ z-index: 0;
+ pointer-events: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ max-height: 75.1rem;
+
+ img {
+ object-fit: cover;
+ width: 100%;
+ height: 100%;
+ }
+}
+
+.contact-form {
+ box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.25);
+ border-radius: 5px;
+ background: #fff;
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 3rem;
+}
+
+.contact-img {
+ width: 100%;
+ height: 100%;
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+}
+
+.contact-form-right {
+ padding: 5rem 3rem 5rem 0;
+ display: flex;
+ flex-direction: column;
+ gap: 4rem;
+}
+
+.contact-title {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 2.4rem;
+}
+
+.contact-title-inner {
+ display: flex;
+ align-items: center;
+ gap: 2.4rem;
+
+ h3 {
+ font-size: 4rem;
+ }
+}
+
+.contact-icon {
+ width: 4rem;
+ height: 4rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ img {
+ width: 3.6rem;
+ height: 3.6rem;
+ }
+
+ &:last-child {
+ justify-self: flex-end;
+ }
+}
+
+.contact-form-link {
+ display: flex;
+ align-items: center;
+ gap: 3rem;
+ justify-content: space-between;
+}
+
+.contact-form-link-left {
+ display: flex;
+ gap: 1.6rem;
+ align-items: center;
+ font-size: 1.4rem;
+ font-weight: bold;
+ color: #7d7d7d;
+}
+
+.contact-form-link-right {
+ display: flex;
+ gap: 2.4rem;
+ align-items: center;
+}
+
+.contact-form-right-middle {
+ display: flex;
+ flex-direction: column;
+ gap: 1.6rem;
+}
+
+.contact-form-right-bottom,
+.input-blocks-wrapper {
+ display: flex;
+ flex-direction: column;
+ gap: 4rem;
+
+ button {
+ width: 100%;
+ @include button-std(0.5rem, 2.4rem, true);
+ }
+}
+
+.input-block {
+ display: flex;
+ flex-direction: column;
+ gap: 1.6rem;
+
+ label {
+ font-size: 1.8rem;
+ font-weight: bold;
+ }
+
+ input,
+ textarea {
+ outline: none;
+ color: #000;
+ resize: none;
+ padding: 1.6rem;
+ border: 0.2rem solid #7d7d7d;
+ border-radius: 0.5rem;
+ @include transition-std;
+
+ &:focus {
+ @include transition-std;
+ border: 0.2rem solid $base-green;
+ color: $base-green;
+ }
+ }
+}
diff --git a/src/styles/_search-table.scss b/src/styles/_search-table.scss
index 0a2b016..759aacd 100644
--- a/src/styles/_search-table.scss
+++ b/src/styles/_search-table.scss
@@ -25,10 +25,9 @@
}
.search-button {
+ @include button-std(0, 1.7rem, $scaled: false);
height: 100%;
min-width: 24rem;
- padding: 1.7rem 0;
- background: $base-green;
color: #fff;
font-size: 1.8rem;
cursor: pointer;
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index 5a84424..98832aa 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -41,3 +41,25 @@ $hover-green: #0e654e;
transform: scale(1);
@include transition-std();
}
+
+@mixin button-std($border-radius, $padding, $scaled) {
+ padding: $padding;
+ border-radius: $border-radius;
+ background: $base-green;
+ color: #fff;
+ font-size: 1.8rem;
+ cursor: pointer;
+
+ @if $scaled {
+ @include button-start;
+
+ &:active {
+ @include button-end;
+ }
+ }
+
+ &:hover {
+ background: $hover-green;
+ @include transition-std;
+ }
+}
diff --git a/src/styles/style.scss b/src/styles/style.scss
index dddb47a..bc0ca9f 100644
--- a/src/styles/style.scss
+++ b/src/styles/style.scss
@@ -12,3 +12,4 @@
@import "./profile";
@import "./event-item";
@import "./structure";
+@import "./contact";