Skip to content

Ghufran #34

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

Open
ghufran099 wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Ghufran #34

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d570a4a
changes
its-rishabh-code Jan 3, 2024
245d51d
initial commit
ghufran099 Jan 6, 2024
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
18,922 changes: 11,214 additions & 7,708 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

5 changes: 4 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
"react-scripts": "3.3.0"
},
"scripts": {
"start": "react-scripts start",
"start": "react-scripts --openssl-legacy-provider start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
Expand All @@ -33,5 +33,8 @@
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"sass": "^1.69.7"
}
}
24 changes: 10 additions & 14 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,27 @@
import React from 'react';
import './App.css';
import React from "react";
import "./App.css";
import * as ReactBootStrap from "react-bootstrap";
import DankMemes from "./Components/DankMemes";
import Features from "./Components/Features";
import Pricing from "./Components/Pricing";
import MoreDeets from "./Components/MoreDeets";
import NavBar from "./Components/Navbar"
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";

import NavBar from "./Components/Navbar";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import Home from "./Screens/Home";

function App() {
return (
<div className="App">
<Router>
<Router>

<NavBar />

<Home />

{/* A <Switch> looks through its children <Route>s and
renders the first one that matches the current URL. */}
<Switch>
<Route path="/features" component={Features}>
<Features />
<Features />
</Route>
<Route path="/pricing" component={Pricing}>
<Pricing />
Expand All @@ -37,7 +33,7 @@ function App() {
<DankMemes />
</Route>
</Switch>
</Router>
</Router>
</div>
);
}
Expand Down
24 changes: 16 additions & 8 deletions src/Components/Features.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,19 @@
import React from 'react';
import React from "react";
import stadium from "../assets/images/stadium.jpg";

const Feature = () => {
return(
<div className="App">
<h1>Feature HOURS</h1>
</div>
)
}
return (
<div>
<img
src={stadium}
style={{
width: "100%",
height: "100vh",
objectFit: "cover",
}}
/>
</div>
);
};

export default Feature;
export default Feature;
114 changes: 72 additions & 42 deletions src/Components/Navbar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,46 +1,76 @@
import React from 'react';
import React from "react";
import * as ReactBootStrap from "react-bootstrap";
import {
BrowserRouter as Router,
Link
} from "react-router-dom";
import { BrowserRouter as Router, Link } from "react-router-dom";

const NavBar = () => {
return(
<div className="App">
<ReactBootStrap.Navbar collapseOnSelect expand="xl" bg="danger" variant="dark">
<ReactBootStrap.Navbar.Brand href="#home">THICC BOIS HOURS</ReactBootStrap.Navbar.Brand>
<ReactBootStrap.Navbar.Toggle aria-controls="responsive-navbar-nav" />
<ReactBootStrap.Navbar.Collapse id="responsive-navbar-nav">
<ReactBootStrap.Nav className="mr-auto">
<Link to="/features">
<ReactBootStrap.Nav.Link href="#features">Features</ReactBootStrap.Nav.Link>
</Link>
<Link to="/pricing">
<ReactBootStrap.Nav.Link href="#pricing">Pricing</ReactBootStrap.Nav.Link>
</Link>
<ReactBootStrap.NavDropdown title="YEET" id="collasible-nav-dropdown">
<ReactBootStrap.NavDropdown.Item href="#action/3.1">Action</ReactBootStrap.NavDropdown.Item>
<ReactBootStrap.NavDropdown.Item href="#action/3.2">Another action</ReactBootStrap.NavDropdown.Item>
<ReactBootStrap.NavDropdown.Item href="#action/3.3">Something</ReactBootStrap.NavDropdown.Item>
<ReactBootStrap.NavDropdown.Divider />
<ReactBootStrap.NavDropdown.Item href="#action/3.4">Separated link</ReactBootStrap.NavDropdown.Item>
</ReactBootStrap.NavDropdown>
</ReactBootStrap.Nav>
<ReactBootStrap.Nav>
<Link to="/deets">
<ReactBootStrap.Nav.Link href="#deets">More deets</ReactBootStrap.Nav.Link>
</Link>
<Link to="/dankmemes">
<ReactBootStrap.Nav.Link eventKey={2} href="#memes">
Dank memes
</ReactBootStrap.Nav.Link>
</Link>
</ReactBootStrap.Nav>
</ReactBootStrap.Navbar.Collapse>
</ReactBootStrap.Navbar>
</div>
)
}
return (
<div className="App">
<ReactBootStrap.Navbar
collapseOnSelect
expand="xl"
variant="dark"
style={{
// position: "absolute",
width: "100%",
height: "10vh",
// opacity: "0.8",
backgroundColor: "black",
background:" linear-gradient(90deg, #78b4f4 0%, #78b4f4 20%, #78b4f4 80%)",

export default NavBar;
// background: "linear-gradient(90deg, #d3e5ff 60%, cyan)",
}}
>
<ReactBootStrap.Navbar.Brand href="#home">
CRICKHOUR
</ReactBootStrap.Navbar.Brand>
<ReactBootStrap.Navbar.Toggle aria-controls="responsive-navbar-nav" />
<ReactBootStrap.Navbar.Collapse id="responsive-navbar-nav">
<ReactBootStrap.Nav className="mr-auto">
<Link to="/features">
<ReactBootStrap.Nav.Link href="#features">
Fantasy Cricket
</ReactBootStrap.Nav.Link>
</Link>
<Link to="/pricing">
<ReactBootStrap.Nav.Link href="#pricing">
App Download
</ReactBootStrap.Nav.Link>
</Link>
<ReactBootStrap.NavDropdown
title="Fantasy Sports"
id="collasible-nav-dropdown"
>
<ReactBootStrap.NavDropdown.Item href="#action/3.1">
Action
</ReactBootStrap.NavDropdown.Item>
<ReactBootStrap.NavDropdown.Item href="#action/3.2">
Another action
</ReactBootStrap.NavDropdown.Item>
<ReactBootStrap.NavDropdown.Item href="#action/3.3">
Something
</ReactBootStrap.NavDropdown.Item>
<ReactBootStrap.NavDropdown.Divider />
<ReactBootStrap.NavDropdown.Item href="#action/3.4">
Separated link
</ReactBootStrap.NavDropdown.Item>
</ReactBootStrap.NavDropdown>
</ReactBootStrap.Nav>
<ReactBootStrap.Nav>
<Link to="/deets">
<ReactBootStrap.Nav.Link href="#deets">
About Us
</ReactBootStrap.Nav.Link>
</Link>
<Link to="/dankmemes">
<ReactBootStrap.Nav.Link eventKey={2} href="#memes">
Contact Us
</ReactBootStrap.Nav.Link>
</Link>
</ReactBootStrap.Nav>
</ReactBootStrap.Navbar.Collapse>
</ReactBootStrap.Navbar>
</div>
);
};

export default NavBar;
46 changes: 46 additions & 0 deletions src/Screens/Home.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
.cool-box {
background-color: #61dafb;
border: 2px solid #282c34;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 20px;
text-align: center;
}

.cool-box h2 {
color: #ffffff;
font-size: 24px;
margin-bottom: 10px;
}

.cool-box p {
color: #ffffff;
font-size: 16px;
margin: 0;
}
.winprize{
font-size: 14px;
line-height: 20px;
color: #2072E4;
background: linear-gradient(90deg, #FFFFFF 0%, #E3EFFF 50.93%, #FFFFFF 101.85%);
border-radius: 33px;
text-align: center;
font-family: 'robotomedium';
font-weight: normal;
padding: 8px 15px;
max-width: 513px;
width: auto;
margin: 0 auto 20px;
}
.letsstarts{
font-size: 23px;
line-height: 26px;
font-family: 'robotobold';
font-weight: bold;
background: #121FCF;
background: linear-gradient(to right, #E10000 0%, #2B0101 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-align: center;
}

71 changes: 71 additions & 0 deletions src/Screens/Home.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
import React from "react";
import stadium from "../assets/images/stadium.jpg";
import virat from "../assets/images/virat.png";
import "./Home.css";
// import style from "../style/home.module.scss";
// import style from "../Screens/Home.css"
// import style from "../style/home.module.scss";

const Home = () => {
return (
<div>
<div style={{ backgroundColor: "black",position:"relative", }}>
<img
src={stadium}
style={{

width: "100%",
height: "80vh",
objectFit: "cover",
}}

/>
<div></div>
<div style={{
position:"absolute",
borderTopLeftRadius:"50px",
borderTopRightRadius:"50px",
padding:"20px 50px",
left:"33%",
bottom:"0%",
background:"#fff",
display:"flex",
alignItems:"center",
gap:"30px"
}}>
<div className="letsstarts">GET STARTED <br></br> CRICHOUR OFFICIALS</div>
<div
style={{
fontSize: "16px",
fontWeight:"bold",
padding:" 10px 20px",
borderRadius:"20px",

background:"#4da24d"
}}
>
Login here
</div>
</div>
</div>
{/* <div
style={{
position: "absolute",
top: "10%",
color: "white",
fontSize: "50px",
fontWeight: "bold",
textAlign: "center",
width: "100%",
height: "90%",
opacity: "0.6",
backgroundColor: "black",
}}
></div> */}
<div className="winprize">Play CrickHour Win And Win Cash Prizes Upto 1000000 INR</div>
<div></div>
</div>
);
};

export default Home;
Binary file added src/assets/images/stadium.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/images/virat.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
14 changes: 14 additions & 0 deletions src/style/home.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
.winprize{
font-size: 14px;
line-height: 20px;
color: #2072E4;
background: linear-gradient(90deg, #FFFFFF 0%, #E3EFFF 50.93%, #FFFFFF 101.85%);
border-radius: 33px;
text-align: center;
font-family: 'robotomedium';
font-weight: normal;
padding: 8px 15px;
max-width: 513px;
width: auto;
margin: 0 auto 20px;
}