Skip to content

front page #23

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
PRATHAMKARMARKAR merged 1 commit into from
Jul 4, 2024
Merged

front page #23

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion Frontend/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Saket</title>
<title>Assmeble</title>
</head>
<body>
<div id="root"></div>
Expand Down
2 changes: 1 addition & 1 deletion Frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,6 @@
"eslint-plugin-react-refresh": "^0.4.7",
"postcss": "^8.4.39",
"tailwindcss": "^3.4.4",
"vite": "^5.3.2"
"vite": "^5.3.3"
}
}
17 changes: 11 additions & 6 deletions Frontend/src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,18 @@
import React from 'react'
import Body from './components/Body'
import Header from './components/Header'
// import Header from './components/Header'


const App = () => {
return (
<div>
<Header/>
<Body/>
</div>
<Body/>
)
}

export default App
export default App






68 changes: 53 additions & 15 deletions Frontend/src/components/Body.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,60 @@
import React from 'react'

const body = () => {
import { SiValorant } from "react-icons/si";
import { SiPubg } from "react-icons/si";
import Header from './Header';
const Body = () => {
return (
<div>
<div classname = "main">
<div classname = "background-image">
<img src = "https://cdn.discordapp.com/attachments/1241785032725631079/1257564641433878568/vite.png?ex=6684ddd6&is=66838c56&hm=06cdcfad5d2e4f69e071e0856571babec173b898564b3d73533184c869400a65&" alt = "background"/>
</div>
</div>
<div classname = "page-footer">
<ul classname = "footer-list">
<li classname = "footer-list-item">CONTACT US</li>
<li classname = "footer-list-item">TERMS OF SERVICE </li>
<li classname = "footer-list-item">PRIVACY POLICY</li>
</ul>
</div>
<div class='body'>
<div class="page">
<Header/>
<div class="sign-in-box">
<h2 class="sign-in-box-heading">Sign In</h2>
<input
class="input-text"
type="text"
placeholder="USERNAME"
name="username"
/>
<input
class="input-text"
type="password"
placeholder="PASSWORD"
name="username"
/>
<input type="checkbox" id="checkbox" name="scales" checked />
<label for="checkbox">Stay Signed In</label>
<button class="sign-in-button">Continue</button>
<div class="sign-in-div">
<p class="text">Can't Sign In</p>
<p class="text">Create new acccount</p>
</div>
<div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<p class="end-text">Tournament Supported Games</p>
<div class = "logo flex justify-between ml-5 mr-5">
<div><SiValorant size={25} /></div>
<div>< SiPubg size={25} /></div>
<div><SiValorant size={25} /></div>
<div><SiValorant size={25} /></div>
</div>
</div>

<footer class="page-footer">
<ul class="footer-list">
<li class="list-item">CONTACT US</li>
<li class="list-item">TERMS OF SERVICE</li>
<li class="list-item">PRIVACY POLICY</li>
</ul>
</footer>
</div>
</div>
</div>
)
}

export default body
export default Body
12 changes: 6 additions & 6 deletions Frontend/src/components/Header.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import React from 'react'

const Header = () => {
return (
<div>
<div className="navbar bg-zinc-700">
return (
<div>
<div className="navbar flex">
<div className="logo flex px-2 py-2 text-white">
<svg className='mt-1' width="50" height="50" viewBox="0 0 250 250" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M242.768 107.57C253.468 107.57 251.292 144.197 242.768 144.197C234.244 144.197 170.223 144.197 170.223 144.197V107.57C170.223 107.57 232.068 107.57 242.768 107.57Z" fill="white" />
Expand All @@ -21,8 +21,8 @@ const Header = () => {
</div>

</div>
</div>
)
</div>
)
}

export default Header
export default Header
93 changes: 84 additions & 9 deletions Frontend/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,91 @@
@tailwind components;
@tailwind utilities;
*{

margin: 0%;
padding: 0%;
box-sizing: border-box;
font-family: SF PRO DISPLAY;}
html,
body {
height: 100%;
width: 100%;
margin : 0;
padding : 0;
font-family :'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.body{
background-image: url("https://cdn.discordapp.com/attachments/1241785032725631079/1257564641433878568/vite.png?ex=6684ddd6&is=66838c56&hm=06cdcfad5d2e4f69e071e0856571babec173b898564b3d73533184c869400a65&");
background-size: 100% 100%;
background-repeat: no-repeat;
}
.page{
height : 100vh;
width: 100vw;
margin-bottom: 0px;
}
img{
width : 100%;
height : 100%;
}
/* sign in box */

.sign-in-box{
background-color: white;
height : 60vh;
width : 23vw;
border-radius : 20px;
padding : 20px;
position : absolute;
top : 20%;
left : 65%;
opacity : 90%;
}
.sign-in-box-heading{
text-align: center;
margin-bottom : 10px;
}
.input-text{
width : 90%;
margin: 15px 12px;
height : 35px;
border-radius : 10px;
text-align: center;
font-weight: bold;
border : none;
color : rgb(0, 0, 0);
background-color : rgb(234, 231, 231)
}
#checkbox{
margin : 15px 15px;
transform :scale(1.5);
border : 6px solid rgb(143, 73, 26);
}
.sign-in-button{
width : 90%;
margin : 15px 12px;
height : 35px;
background-color: rgb(143, 73, 26);
color : white;
border-radius : 20px;
border : none;
}
.sign-in-div{
display: flex;
justify-content : space-between;
margin: 15px 15px;
font-weight : bold;
}
.line{
border-bottom: 1px solid rgb(143, 73, 26);
margin : 4px 15px;
}
.end-text{
text-align: center;
font-size : 12px;
margin : 15px;
}

/* footer */
.footer-list{
color : white;
display : flex;
gap : 100px;
padding : 10px;
position: absolute;
bottom: 7%;
list-style-type: none;
padding : 0 20px;
}