diff --git a/src/App.js b/src/App.js index b9258a4..ec5ce47 100644 --- a/src/App.js +++ b/src/App.js @@ -1,23 +1,23 @@ // IMPORT MODULES import React from "react"; +import { Routes, Route } from "react-router-dom"; + +// IMPORT STYLES +import "./styles/style.scss"; + +// IMPORT PERMANENT COMPONENTS +import Nav from "./components/global/Nav"; + +// IMPORT PAGES +import Main from "./pages/Main"; const App = () => { return (
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
+
); }; diff --git a/src/components/global/Nav.js b/src/components/global/Nav.js new file mode 100644 index 0000000..f2d2078 --- /dev/null +++ b/src/components/global/Nav.js @@ -0,0 +1,85 @@ +// IMPORT MODULES +import React, { useState } from "react"; +import { Link } from "react-router-dom"; + +// IMPORT IMAGES +import hb from "../../images/logo.jpg"; +import lang from "../../icons/lang.svg"; +import arrow from "../../icons/arrow-down.svg"; + +const Nav = () => { + const handleLanguage = (lang) => { + setLanguage(lang); + }; + + const [langOpen, setLangOpen] = useState(false); + const [language, setLanguage] = useState("РУС"); + return ( + + ); +}; + +export default Nav; diff --git a/src/icons/arrow-down.svg b/src/icons/arrow-down.svg new file mode 100644 index 0000000..b00c6f6 --- /dev/null +++ b/src/icons/arrow-down.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/icons/lang.svg b/src/icons/lang.svg new file mode 100644 index 0000000..5721bfd --- /dev/null +++ b/src/icons/lang.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/images/logo.jpg b/src/images/logo.jpg new file mode 100644 index 0000000..667ae08 Binary files /dev/null and b/src/images/logo.jpg differ diff --git a/src/index.js b/src/index.js index b1ef1c0..9a51fb3 100644 --- a/src/index.js +++ b/src/index.js @@ -1,10 +1,13 @@ import React from "react"; import ReactDOM from "react-dom"; import App from "./App"; +import { BrowserRouter } from "react-router-dom"; ReactDOM.render( - + + + , document.getElementById("root") ); diff --git a/src/pages/Main.js b/src/pages/Main.js new file mode 100644 index 0000000..2505bb4 --- /dev/null +++ b/src/pages/Main.js @@ -0,0 +1,8 @@ +// IMPORT MODULES +import React from "react"; + +const Main = () => { + return

Main

; +}; + +export default Main; diff --git a/src/styles/_global.scss b/src/styles/_global.scss index 17fc35c..ea30b7a 100644 --- a/src/styles/_global.scss +++ b/src/styles/_global.scss @@ -6,3 +6,22 @@ a { text-decoration: none; color: $text-black; } + +h1, +h2, +h3, +h4, +h5, +h6, +a, +p, +span, +li { + font-family: $font-family; +} + +.container { + max-width: 150rem; + padding: 0 4rem; + margin: 0 auto; +} diff --git a/src/styles/_nav.scss b/src/styles/_nav.scss new file mode 100644 index 0000000..1e2a41d --- /dev/null +++ b/src/styles/_nav.scss @@ -0,0 +1,132 @@ +.nav { + .line { + width: 100%; + border-top: 0.2rem solid $base-grey; + } + padding-bottom: 5rem; +} + +.nav-inner { + margin: 3rem 0; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 3rem; +} + +.nav__left { + justify-self: left; + display: flex; + align-items: center; + gap: 1rem; +} + +.nav-logo { + display: block; + width: 12.4rem; + height: 6rem; + + img { + width: 100%; + height: 100%; + object-fit: contain; + } +} + +.nav-title { + display: flex; + flex-direction: column; + + h1 { + font-size: 2.8rem; + color: $base-green; + } + + h4 { + font-size: 1.6rem; + color: $text-black; + font-weight: normal; + } +} + +.nav__right { + justify-self: right; + align-self: center; +} + +.language { + position: relative; + cursor: pointer; + padding: 1rem; + border-radius: 1rem; + background: transparent; + transition: 0.4s all ease; + + &.active { + background: rgba(192, 192, 192, 0.733); + transition: 0.4s all ease; + } + + .lang-wrapper { + display: flex; + align-items: center; + gap: 0.8rem; + } +} + +.lang-img { + width: 2rem; + height: 2rem; + + img { + width: 100%; + height: 100%; + object-fit: contain; + } +} + +.lang-arrow { + transform: rotateZ(0deg); + transition: 0.4s all ease; + + &.active { + transform: rotateZ(180deg); + transition: 0.4s all ease; + } +} + +.lang-text { + font-size: 1.6rem; + font-weight: normal; +} + +.lang-el { + text-align: center; + width: 100%; + font-size: 1.6rem; + padding: 1rem 2rem; + justify-content: center; + background: transparent; + transition: 0.4s all ease; + + &:hover { + background: rgba(192, 192, 192, 0.733); + transition: 0.4s all ease; + } +} + +.lang-dropdown { + border-radius: 1rem; + background: $base-grey; + position: absolute; + top: calc(100% + 1rem); + left: 0; + width: 100%; + max-height: 0; + overflow: hidden; + transition: 0.4s all ease; + + &.active { + max-height: 15rem; + transition: 0.4s all ease; + } +} diff --git a/src/styles/_nullifier.scss b/src/styles/_nullifier.scss index 8fa042a..f296d53 100644 --- a/src/styles/_nullifier.scss +++ b/src/styles/_nullifier.scss @@ -1,4 +1,6 @@ -* { +*, +*::after, +*::before { padding: 0; margin: 0; box-sizing: border-box; diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index f972553..c0aaa10 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -3,3 +3,5 @@ $base-green: rgba(1, 129, 94, 1); $text-black: rgba(58, 58, 58, 1); $base-grey: rgba(242, 242, 242, 1); + +$font-family: "Open Sans", sans-serif; ; diff --git a/src/styles/style.scss b/src/styles/style.scss index d4ee8df..4409658 100644 --- a/src/styles/style.scss +++ b/src/styles/style.scss @@ -5,3 +5,4 @@ @import "./variables"; @import "./nullifier"; @import "./global"; +@import "./nav";