Skip to content
Snippets Groups Projects
Commit 83e5c790 authored by Muba006's avatar Muba006
Browse files

building a seller-login page finsh a design 80percent balance finshed

parent 3414d39f
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/App.jsx
+ 2
− 0
View file @ 83e5c790
import React from "react";
import Landing from "./pages/Landing";
import Seller_login from "./pages/seller_login";
import Create_account from "./pages/Create_account";
import { Route, Routes } from "react-router-dom";
function App() {
......@@ -8,6 +9,7 @@ function App() {
<>
<Routes>
<Route path="/seller-login" element={<Seller_login />} />
<Route path="/create-account" element={<Create_account />} />
<Route path="/" element={<Landing />} />
</Routes>
......
src/assets/seller-login/eye.svg 0 → 100644
+ 3
− 0
View file @ 83e5c790
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M23.3743 0.592098C22.9568 0.183537 22.2858 0.187233 21.8729 0.600411L17.625 4.85055C15.9336 3.94485 14.054 3.44962 12.1003 3.44962C7.2019 3.44962 2.76985 6.56269 0.598807 11.4526C0.477924 11.7249 0.477924 12.0356 0.598807 12.3079C1.57943 14.5166 3.02135 16.3628 4.75917 17.7233L0.817631 21.667C0.401593 22.0833 0.405382 22.7567 0.826032 23.1683C1.24357 23.5769 1.91452 23.5732 2.32748 23.16L6.57534 18.9099C8.26687 19.8156 10.1465 20.3109 12.1003 20.3109C16.9986 20.3109 21.4307 17.1978 23.6017 12.3079C23.7226 12.0356 23.7226 11.7249 23.6017 11.4526C22.6211 9.24385 21.1791 7.39762 19.4412 6.03706L23.3827 2.09343C23.7988 1.67716 23.795 1.00371 23.3743 0.592098ZM16.0528 6.42366C14.8152 5.86009 13.4777 5.55737 12.1003 5.55737C8.20254 5.55737 4.62504 7.98126 2.72421 11.8803C3.59511 13.6668 4.81796 15.1435 6.26231 16.2194L8.46502 14.0155C8.09639 13.3893 7.88495 12.6594 7.88495 11.8802C7.88495 9.55212 9.77221 7.66486 12.1003 7.66486C12.8787 7.66486 13.6078 7.87585 14.2336 8.24378L16.0528 6.42366ZM15.7355 9.7448L17.938 7.54112C19.3824 8.61699 20.6054 10.0938 21.4763 11.8803C19.5755 15.7794 15.998 18.2033 12.1003 18.2033C10.7227 18.2033 9.38514 17.9006 8.14746 17.3369L9.96685 15.5165C10.5927 15.8845 11.3218 16.0955 12.1003 16.0955C14.4283 16.0955 16.3156 14.2082 16.3156 11.8802C16.3156 11.1009 16.1041 10.371 15.7355 9.7448ZM12.6368 9.84146C12.4655 9.79652 12.2857 9.77258 12.1003 9.77258C10.9363 9.77258 9.99267 10.7162 9.99267 11.8802C9.99267 12.066 10.0167 12.2462 10.0618 12.4178L12.6368 9.84146ZM11.5636 13.9189L14.1387 11.3424C14.1839 11.5141 14.208 11.6944 14.208 11.8802C14.208 13.0443 13.2644 13.9879 12.1003 13.9879C11.9148 13.9879 11.735 13.9639 11.5636 13.9189Z" fill="#8B9BB1"/>
</svg>
src/assets/seller-login/mail.svg 0 → 100644
+ 4
− 0
View file @ 83e5c790
<svg width="24" height="19" viewBox="0 0 24 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.97611 1.83539H20.4159C21.5461 1.83539 22.4708 2.7048 22.4708 3.76741V15.3595C22.4708 16.4221 21.5461 17.2916 20.4159 17.2916H3.97611C2.84588 17.2916 1.92114 16.4221 1.92114 15.3595V3.76741C1.92114 2.7048 2.84588 1.83539 3.97611 1.83539Z" stroke="#8B9BB1" stroke-width="2.12136" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M22.4708 3.76746L12.196 10.5295L1.92114 3.76746" stroke="#8B9BB1" stroke-width="2.12136" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
src/pages/Create_account.jsx 0 → 100644
+ 12
− 0
View file @ 83e5c790
import React from 'react'
const Create_account = () => {
return (
<div>
<h1 className='text-9xl'> Hello</h1>
</div>
)
}
export default Create_account
src/pages/seller_login.jsx
+ 77
− 13
View file @ 83e5c790
import React from 'react';
import React from "react";
import key from "../assets/seller-login/first!.svg";
import icon2 from "../assets/seller-login/eye.svg";
import icon from "../assets/seller-login/mail.svg";
import { useNavigate } from "react-router-dom";
function Seller_login() {
return (
<>
<div className="relative bg-[#E9FAFF] p-4 flex flex-col md:flex-row font-montserrat" >
<div className="relative w-full" >
<h2 className="font-bold text-[15px] md:text-5xl px-2 md:px-16 py-3 md:py-10 ">OMPOI-Seller</h2>
<div className=" bg-[#FFFFFF] grid grid-cols-1 md:grid-cols-2 gap-4 p-4 items-center shadow-lg rounded-[15.3px] md:rounded-[32.6px] ">
<img src={key} alt="illutration" className="size-[180px] md:size-[480px] px-4 md:px-12" />
<div><hr className="bg-[#E2E7EE] rotate-90 "></hr></div>
<div className="flex flex-col p-4 bg-[#FFFFFF] border-none"></div>
const navigate = useNavigate();
const goto = () => {
navigate("/create-account");
}
return (
<>
<div className="relative bg-[#E9FAFF] p-4 flex flex-col md:flex-row font-montserrat">
<div className="relative w-full">
<h2 className="font-bold text-[15px] md:text-5xl px-2 md:px-10 py-3 md:py-10 ">
OMPOI-Seller
</h2>
<div className=" bg-[#FFFFFF] grid grid-cols-1 md:grid-cols-3 items-center justify-center gap-3 p-10 shadow-lg rounded-[15.3px] md:rounded-[32.6px] left-[10px] right-[10px] ">
<img
src={key}
alt="illutration"
className="size-full md:size-[380px] px-4 md:px-12"
/>
<div className="hidden md:flex bg-[#E2E7EE] w-[3px] h-full ml-[180px] "></div>
<div className="flex flex-col p-4 bg-[#FFFFFF] border-none">
<form className="mt-0 md:mt-[-150px] ml-0 md:ml-[-150px] ">
<div className="flex justify-center items-center mt-[70px]">
<div className="font-[600px] text-center text-[16.48px] mt-[50px] md:text-[33.91px] mb-[15px] md:mb-[30px] ">LOGIN</div>
</div>
<div>
<label
htmlFor="merchant_id"
className="text-[10px] md:text-[18px] text-[#45505F] p-[0.5px] bg-white relative top-1 left-6 px-1"
>
Merchant ID
</label>
<input
type="text"
className="w-full p-2 md:p-3 border border-[#C4CFDE] rounded-[12px] mt-[-10px] text-[10px] md:text-[18px] focus:outline-none"
placeholder="Enter id"
required
/>
<span className="flex inset-y-0 justify-end ">
<img src={icon} alt="icon" className=" relative items-center w-3 md:w-5 h-3 md:h-5 mt-[-25px] md:mt-[-35px] mr-[12px] md:mr-[20px] " />
</span>
<br />
<div>
<label
htmlFor="password"
className="text-[10px] md:text-[18px] text-[#45505F] p-[0.5px] bg-white relative top-1 left-6 px-1 "
>
Password
</label>
<input
type="text"
className="w-full p-2 md:p-3 border border-[#C4CFDE] rounded-[12px] mt-[-10px] text-[10px] md:text-[18px] focus:outline-none"
placeholder="Enter your password"
required
/>
<span className="flex inset-y-0 justify-end ">
<img src={icon2} alt="icon" className=" relative items-center w-3 md:w-5 h-3 md:h-5 mt-[-25px] md:mt-[-35px] mr-[12px] md:mr-[20px]" />
</span>
<div className="flex flex-col md:flex-row gap-1 md:gap-3 items-center justify-center md:justify-between p-3 md:p-4">
<span className="relative font-[300px] md:font-[600px] text-[10px] md:text-[18.26px] ">Forgot Password</span>
<span className="relative font-[300px] md:font-[600px] text-[10px] md:text-[18.26px] cursor-pointer hover:text-[#FFBD69] " onClick={goto}>Create Account</span>
</div>
<div className="flex justify-center p-4">
<button className="bg-[#FFBD69] pb-[13.04px] pt-[13.04px] pr-[39.12px] pl-[39.12px] w-full h-flt rounded-[32.60px] inline-flex justify-center items-center text-[20.87px] font-[800px] ">Sign in</button>
</div>
<div className="flex justify-center p-4">
<button className="bg-white pb-[13.04px] pt-[13.04px] pr-[39.12px] pl-[39.12px] w-fit h-fit rounded-[32.60px] border-[#FFBD69] border-2 inline-flex justify-center items-center ">check Status</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</>
)
</div>
</>
);
}
export default Seller_login;
\ No newline at end of file
export default Seller_login;
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment