added mainPage design

cupOfTea321 · Jan 20, 2023 · 6effd41 · 6effd41
1 parent bc1cfd6
commit 6effd41
Show file tree

Hide file tree

Showing 6 changed files with 145 additions and 19 deletions.
diff --git a/img/BASEwithout.png b/img/BASEwithout.png
diff --git a/src/components/Layout.css b/src/components/Layout.css
@@ -0,0 +1,61 @@
+.mainRoot{
+    background-color: #e7f3ff;
+    height: 100%;
+}
+
+.appMain{
+    /*margin: 0 auto;*/
+    margin-left: 45px;
+    margin-right: 45px;
+    display: grid;
+
+    grid-template-areas:
+  "header header"
+  "main main"
+  "footer footer ";
+}
+/*HEADER*/
+
+header{
+    grid-area: header;
+    background-color: #e7f3ff;
+    display: flex;
+    align-items: center;
+}
+header .logo{
+    flex:1;
+}
+header h1 {
+    /*margin-top: 25px;*/
+}
+header nav{
+    flex:3;
+    /*margin-top: 35px;*/
+    margin-left: 100px;
+}
+header nav a{
+    margin-right: 15px;
+    text-decoration: none;
+    color: black;
+}
+header .logIn{
+    flex:1;
+    /*margin-top: 25px;*/
+}
+header .logIn a{
+    margin-right: 15px;
+    text-decoration: none;
+    color: black;
+}
+
+
+
+.inputMail{
+    border: none;
+    /*color: white;*/
+    /*background-color: #5b5ab8;*/
+    padding: 10px;
+    border-radius: 5px;
+}
+
+
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
@@ -1,19 +1,27 @@
 import React from 'react';
 import {NavLink, Outlet} from "react-router-dom";
-
+import  './Layout.css'
 const Layout = () => {
     return (
-        <>
-            <header>
-                <nav>
-                    <NavLink to={'/'} >Main page</NavLink>
-                    <NavLink to={'/todo'} >Todos page</NavLink>
-                </nav>
-            </header>
-            <main className={'container'}>
-                <Outlet/>
-            </main>
-        </>
+        <div className={'mainRoot'}>
+            <div className={'appMain'}>
+                <header>
+                    <h1>FlexMess</h1>
+                    <nav className={'nav'}>
+                        <NavLink to={'/'} >Main page</NavLink>
+                        <NavLink to={'/todo'} >Todos page</NavLink>
+                    </nav>
+                    <div className={'logIn'}>
+                        <a href="#s">log In</a>
+                        <button value="log In" className="buttonUse">Getting Started</button>
+                    </div>
+                </header>
+                <main className={'container'}>
+                    <Outlet/>
+                </main>
+            </div>
+        </div>
+
 
 
     );

diff --git a/src/index.css b/src/index.css
@@ -1,6 +1,6 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+/*@tailwind base;*/
+/*@tailwind components;*/
+/*@tailwind utilities;*/
 
 body {
   margin: 0;

diff --git a/src/pages/Main.css b/src/pages/Main.css
@@ -0,0 +1,42 @@
+/*MAIN*/
+main{
+    margin-top: 3%;
+    grid-area: main;
+    /*background-color: bisque;*/
+    display: flex;
+    height: 1000px;
+    justify-content: space-between;
+}
+main div{
+    flex: 1;
+}
+main .right-side{
+
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-image: url("./../../img/BASEwithout.png");
+    width: 800px;
+    margin-right: -30%;
+
+}
+main .left-side {
+    padding-top: 10%;
+}
+.left-side-msg p{
+    color:#6a6691;
+}
+.left-side-msg h2{
+    color:#fa676d;
+}
+.left-side-msg h2 span{
+    color:#2d2c62;
+}
+
+/*COMMON*/
+.buttonUse{
+    border: none;
+    color: white;
+    background-color: #5b5ab8;
+    padding: 10px;
+    border-radius: 5px;
+}
diff --git a/src/pages/MainPage.tsx b/src/pages/MainPage.tsx
@@ -1,10 +1,25 @@
 import React from 'react';
-
+import './Main.css'
 const MainPage: React.FC = () => {
     return (
-        <div>
-            MainPage
-        </div>
+        <main>
+            <div className="left-side">
+                <div className="left-side-msg">
+                    <h2><span>Grow your media with</span> FlexMess!</h2>
+                    <p>This organization is non-profit.</p>
+                    <p>All data is protected!</p>
+                </div>
+                <div className="forms">
+                    <input className="inputMail" placeholder="Email Adress" type="text" />
+                    <button className="buttonUse">Learn More</button>
+
+                </div>
+            </div>
+
+            <div className="right-side">
+
+            </div>
+        </main>
     );
 };