Skip to content

Created About component #47

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
wants to merge 8 commits into
base: main
Choose a base branch
from
Open

Created About component #47

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
6707dd3
background color applies to the whole body
JeelRajodiya Dec 27, 2022
9f98704
borders in progress
JeelRajodiya Dec 27, 2022
1af2917
component is almost done
JeelRajodiya Dec 29, 2022
c528468
Done
JeelRajodiya Dec 29, 2022
3103029
made it mobile friendly
JeelRajodiya Dec 30, 2022
b52e9bb
Revert "made it mobile friendly"
JeelRajodiya Dec 30, 2022
784a262
Done
JeelRajodiya Dec 30, 2022
e68812e
minor change
JeelRajodiya Dec 30, 2022
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
24 changes: 12 additions & 12 deletions client/src/components/Layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
import React from 'react';
import { Outlet } from 'react-router-dom';
import React from "react"
import { Outlet } from "react-router-dom"

import Navbar from './Navbar';
import Footer from './Footer';
import Navbar from "./Navbar"
import Footer from "./Footer"

const Layout: React.FC = () => {
return (
<div className="App bg-black bg-no-repeat bg-cover">
<Navbar />
<Outlet />
<Footer />
</div>
)
return (
<div className="App mt-28">
<Navbar />
<Outlet />
<Footer />
</div>
)
}

export default Layout;
export default Layout
254 changes: 141 additions & 113 deletions client/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,116 +3,144 @@
@tailwind utilities;

@layer components {
* {
@apply box-border
}

html {
@apply overflow-x-hidden font-inter scroll-smooth
}

::-webkit-scrollbar {
width: 10px;
}

::-webkit-scrollbar-track {
@apply bg-[#2b2b2b]
}

::-webkit-scrollbar-thumb {
@apply bg-[#40E9F1]
}

::-webkit-scrollbar-thumb:hover {
@apply bg-[#D7BDF2]
}

.nav-link {
@apply uppercase text-gray-400 text-sm tracking-widest
}

.nav-link-active {
@apply text-white
}

.btn-primary {
@apply border-2 border-[#40E9F1] text-[#40E9F1] uppercase rounded-md hover:border-2 hover:border-white hover:bg-[#06a6ae] hover:text-white
}

.heading {
text-shadow: 0px 1px 10px #40E9F1;
}

.primary-input {
@apply bg-black text-white border-[1px] border-[#40E9F1] rounded-xl w-full py-4 text-lg text-center focus:outline-none
}

input::placeholder {
@apply text-white capitalize opacity-100 font-inter
}

.btn-shape {
clip-path: polygon(4% 0, 96% 0, 100% 6%, 100% 94%, 96% 100%, 4% 100%, 0 94%, 0 6%);
}

.btn-text-shadow {
text-shadow: 0px 2px 4px #00000034;
}

.btn-secondary {
@apply uppercase relative btn-shape text-[#FBFFFF] bg-[#40E9F1] btn-text-shadow tracking-wider text-lg
}

.btn-secondary::before {
content: "sign up";
display: flex;
justify-content: center;
align-items: center;
height: 48px;
width: 218px;
position: absolute;
top: 1px;
left: 1px;
background-color: rgba(14, 79, 94, 1);
clip-path: polygon(4% 0, 96% 0, 100% 6%, 100% 94%, 96% 100%, 4% 100%, 0 94%, 0 6%);
}

.btn-secondary::after {
content: "";
height: 48px;
width: 48px;
position: absolute;
top: 1px;
left: 40%;
background-image: linear-gradient(to right, rgba(11, 82, 189, 0), rgba(11, 82, 189, 1), rgba(11, 82, 189, 0));
opacity: 0.2;
}

.footer-bg {
background-color: rgba(255, 255, 255, 0.04)
}

.right::before {
content: "";
position: absolute;
top: 3px;
right: 18px;
background-color: rgba(255, 255, 255, 1);
width: 100%;
height: 1px;
}

.left::before {
content: "";
position: absolute;
top: 3px;
left: 18px;
background-color: rgba(255, 255, 255, 0.6);
width: 100%;
height: 1px;
}

.error {
@apply text-[#40E9F1] text-sm text-center py-1
}
}
* {
@apply box-border;
}

html {
@apply overflow-x-hidden font-inter scroll-smooth;
}

::-webkit-scrollbar {
width: 10px;
}

::-webkit-scrollbar-track {
@apply bg-[#2b2b2b];
}

::-webkit-scrollbar-thumb {
@apply bg-[#40E9F1];
}

::-webkit-scrollbar-thumb:hover {
@apply bg-[#D7BDF2];
}

.nav-link {
@apply uppercase text-gray-400 text-sm tracking-widest;
}

.nav-link-active {
@apply text-white;
}

.btn-primary {
@apply border-2 border-[#40E9F1] text-[#40E9F1] uppercase rounded-md hover:border-2 hover:border-white hover:bg-[#06a6ae] hover:text-white;
}

.heading {
text-shadow: 0px 1px 10px #40e9f1;
}

.primary-input {
@apply bg-black text-white border-[1px] border-[#40E9F1] rounded-xl w-full py-4 text-lg text-center focus:outline-none;
}

input::placeholder {
@apply text-white capitalize opacity-100 font-inter;
}

.btn-shape {
clip-path: polygon(
4% 0,
96% 0,
100% 6%,
100% 94%,
96% 100%,
4% 100%,
0 94%,
0 6%
);
}

.btn-text-shadow {
text-shadow: 0px 2px 4px #00000034;
}

.btn-secondary {
@apply uppercase relative btn-shape text-[#FBFFFF] bg-[#40E9F1] btn-text-shadow tracking-wider text-lg;
}

.btn-secondary::before {
content: "sign up";
display: flex;
justify-content: center;
align-items: center;
height: 48px;
width: 218px;
position: absolute;
top: 1px;
left: 1px;
background-color: rgba(14, 79, 94, 1);
clip-path: polygon(
4% 0,
96% 0,
100% 6%,
100% 94%,
96% 100%,
4% 100%,
0 94%,
0 6%
);
}

.btn-secondary::after {
content: "";
height: 48px;
width: 48px;
position: absolute;
top: 1px;
left: 40%;
background-image: linear-gradient(
to right,
rgba(11, 82, 189, 0),
rgba(11, 82, 189, 1),
rgba(11, 82, 189, 0)
);
opacity: 0.2;
}

.footer-bg {
background-color: rgba(255, 255, 255, 0.04);
}

.right::before {
content: "";
position: absolute;
top: 3px;
right: 18px;
background-color: rgba(255, 255, 255, 1);
width: 100%;
height: 1px;
}

.left::before {
content: "";
position: absolute;
top: 3px;
left: 18px;
background-color: rgba(255, 255, 255, 0.6);
width: 100%;
height: 1px;
}

.error {
@apply text-[#40E9F1] text-sm text-center py-1;
}
}
body {
background-color: black;
background-repeat: no-repeat;
background-size: cover;
}
46 changes: 39 additions & 7 deletions client/src/pages/About.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,41 @@
import React from 'react';
import React from "react"
import "../styles/About.css"
export default function About() {
return (
<div id="about">
<div id="top-border">
<div id="top-border-1"></div>
<div id="top-border-2"></div>
<div id="top-border-3"></div>
</div>

const About: React.FC = () => {
return (
<div>About Page</div>
);
}
<div className="grid" id="about-content">
<div id="picture-container" className="border-none">
Picture
</div>
<div id="middle-border">
<div id="middle-border-top"></div>
<div id="middle-border-middle"></div>
<div id="middle-border-bottom"></div>
</div>
<div className="p-12">
<h1 className="text-2xl p-1">ABOUT</h1>
<div className="p-2" id="text-container-content">
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 Ut enim ad minim veniam, quis nostrud
exercitation
</div>
</div>
</div>

export default About;
<div id="bottom-border">
<div id="bottom-border-1"></div>
<div id="bottom-border-2"></div>
<div id="bottom-border-3"></div>
<div id="bottom-border-4"></div>
</div>
</div>
)
}
Loading