diff --git a/src/components/Button.tsx b/src/components/Button.tsx new file mode 100644 index 0000000..e55eadc --- /dev/null +++ b/src/components/Button.tsx @@ -0,0 +1,14 @@ +interface ButtonProps { + link: string; + text: string; +} + +const Button = (props: ButtonProps) => { + return ( + + + + ); +}; + +export default Button; diff --git a/src/components/Main.tsx b/src/components/Main.tsx new file mode 100644 index 0000000..82e9978 --- /dev/null +++ b/src/components/Main.tsx @@ -0,0 +1,19 @@ +import iconHome from "../assets/img/iconHome.png"; +import arrow from "../assets/img/arrow.png"; +import SubjectMain from "./SubjectMain"; + +const Main = () => { + return ( +
+
+ + + INSTITUCIONAL +
+

INSTITUCIONAL

+ +
+ ); +}; + +export default Main; diff --git a/src/components/SubjectMain.tsx b/src/components/SubjectMain.tsx new file mode 100644 index 0000000..ce2a766 --- /dev/null +++ b/src/components/SubjectMain.tsx @@ -0,0 +1,22 @@ +import Button from "./Button"; +import SubjectText from "./SubjectText"; + +const SubjectMain = () => { + return ( +
+
+
+
+ +
+
+ ); +}; + +export default SubjectMain; diff --git a/src/components/SubjectText.tsx b/src/components/SubjectText.tsx new file mode 100644 index 0000000..057290a --- /dev/null +++ b/src/components/SubjectText.tsx @@ -0,0 +1,38 @@ +interface SubjectTextProps { + title: string; +} + +const SubjectText = (props: SubjectTextProps) => { + return ( + <> +

{props.title}

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim + veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea + commodo consequat. Duis aute irure dolor in reprehenderit in voluptate + velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint + occaecat cupidatat non proident, sunt in culpa qui officia deserunt + mollit anim id est laborum.
+
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem + accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab + illo inventore veritatis et quasi architecto beatae vitae dicta sunt + explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut + odit aut fugit, sed quia consequuntur magni dolores eos qui ratione + voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum + quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam + eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat + voluptatem.
+
+ Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis + suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis + autem vel eum iure reprehenderit qui in ea voluptate velit esse quam + nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo + voluptas nulla pariatur? +

+ + ); +}; + +export default SubjectText; diff --git a/src/global.scss b/src/global.scss index 30ea1ef..0156f3a 100644 --- a/src/global.scss +++ b/src/global.scss @@ -1,3 +1,4 @@ @import './styles/variables.scss'; @import './styles/reset.scss'; -@import './styles/header.scss'; \ No newline at end of file +@import './styles/header.scss'; +@import './styles/main.scss' \ No newline at end of file diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index b78ef42..58f12df 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -1,9 +1,11 @@ import Header from "../components/Header"; +import Main from "../components/Main"; const Home = () => { return ( <>
+
); }; diff --git a/src/styles/header.scss b/src/styles/header.scss index 47bf0c0..a00fcb9 100644 --- a/src/styles/header.scss +++ b/src/styles/header.scss @@ -29,19 +29,19 @@ width: 100%; height: 32px; background: $white; - border: 2px solid $gray-700; + border: 2px solid $gray-800; border-radius: 5px; font-weight: 400; font-size: 14px; line-height: 16px; - color: $gray-500; + color: $gray-600; padding: 0; outline: 0; padding-left: 16px; &::placeholder { - color: $gray-500; + color: $gray-600; } } @@ -191,11 +191,11 @@ @media screen and (min-width: 1025px) { &__container-top { padding: 0 100px; - border-bottom: 1px solid $gray-600; + border-bottom: 1px solid $gray-700; } &__menu, - &__mobile { + &__container-bottom-mobile { display: none; } } diff --git a/src/styles/main.scss b/src/styles/main.scss new file mode 100644 index 0000000..f680ea1 --- /dev/null +++ b/src/styles/main.scss @@ -0,0 +1,82 @@ +.page-main { + padding: 0 100px; + + &__menu { + display: flex; + align-items: center; + gap: 10px; + margin-top: 30px; + } + + &__text { + font-weight: 400; + font-size: 12px; + line-height: 14px; + color: $gray-700; + } + + &__title { + margin-top: 80px; + text-align: center; + font-weight: 400; + font-size: 24px; + line-height: 28px; + letter-spacing: 0.1em; + color: $gray; + } + + .page-subject { + display: flex; + margin-top: 80px; + gap: 30px; + + &__menu { + width: 302px; + border-right: 1px solid $black ; + } + + &__button { + border: 0; + outline: 0; + background: transparent; + font-weight: 400; + font-size: 16px; + line-height: 19px; + color: $gray-400; + width: 302px; + height: 39px; + text-align: start; + padding-left: 16px; + + &:hover, + &:active { + background: $black; + font-weight: 700; + color: $white; + } + } + + &__text { + display: flex; + flex-direction: column; + gap: 12px; + justify-content: center; + margin-top: 10px; + + h2 { + font-weight: 700; + font-size: 24px; + line-height: 28px; + color: $gray; + } + + p { + font-weight: 400; + font-size: 13px; + line-height: 15px; + color: $gray-400; + } + + } + } +} \ No newline at end of file diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 4525ed6..04b774c 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -4,12 +4,14 @@ $font-family: 'Roboto', sans-serif; $black: #000; $white: #fff; +$gray: #292929; $gray-200: #303030; $gray-300: #5E5E5E; -$gray-400: #919191; -$gray-500: #C6C6C6; -$gray-600: #C4C4C4; -$gray-700: #F2F2F2; -$gray-800: #F9F9F9; +$gray-400: #7D7D7D; +$gray-500: #919191; +$gray-600: #C6C6C6; +$gray-700: #C4C4C4; +$gray-800: #F2F2F2; +$gray-900: #F9F9F9; $red: #FF0000; \ No newline at end of file