Skip to content

Commit 6a9e18d

Browse files
geekyoriongeekyorion
committed
Saving code
1 parent 55620ef commit 6a9e18d

32 files changed

+1618
-80
lines changed

‎package-lock.json

Lines changed: 421 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,12 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6+
"bootstrap": "^4.3.1",
7+
"prismjs": "^1.16.0",
68
"react": "^16.8.6",
9+
"react-bootstrap": "^1.0.0-beta.9",
710
"react-dom": "^16.8.6",
11+
"react-router-dom": "^5.0.1",
812
"react-scripts": "3.0.1"
913
},
1014
"scripts": {

‎public/favicon.ico

-3.78 KB
Binary file not shown.

‎public/favicon_16.ico

1.12 KB
Binary file not shown.

‎public/favicon_48.ico

16.6 KB
Binary file not shown.

‎public/favicon_high.ico

264 KB
Binary file not shown.

‎public/index.html

Lines changed: 8 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -2,37 +2,21 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8" />
5-
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
5+
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon_16.ico" />
66
<meta name="viewport" content="width=device-width, initial-scale=1" />
77
<meta name="theme-color" content="#000000" />
8-
<!--
9-
manifest.json provides metadata used when your web app is installed on a
10-
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
11-
-->
8+
129
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
13-
<!--
14-
Notice the use of %PUBLIC_URL% in the tags above.
15-
It will be replaced with the URL of the `public` folder during the build.
16-
Only files inside the `public` folder can be referenced from the HTML.
1710

18-
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
19-
work correctly both with client-side routing and a non-root public URL.
20-
Learn how to configure a non-root public URL by running `npm run build`.
21-
-->
22-
<title>React App</title>
11+
<!-- google font: Roboto -->
12+
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
13+
14+
<title>Gradient Code</title>
2315
</head>
2416
<body>
2517
<noscript>You need to enable JavaScript to run this app.</noscript>
26-
<div id="root"></div>
27-
<!--
28-
This HTML file is a template.
29-
If you open it directly in the browser, you will see an empty page.
3018

31-
You can add webfonts, meta tags, or analytics to this file.
32-
The build step will place the bundled scripts into the <body> tag.
33-
34-
To begin the development, run `npm start` or `yarn start`.
35-
To create a production bundle, use `npm run build` or `yarn build`.
36-
-->
19+
<!-- Main root ID where all the data is going to render -->
20+
<div id="root"></div>
3721
</body>
3822
</html>

‎public/manifest.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
{
2-
"short_name": "React App",
3-
"name": "Create React App Sample",
2+
"short_name": "Gradient Code",
3+
"name": "Generate Random Gradient Code",
44
"icons": [
55
{
6-
"src": "favicon.ico",
7-
"sizes": "64x64 32x32 24x24 16x16",
6+
"src": "favicon_16.ico",
7+
"sizes": "256x256 48x48 16x16",
88
"type": "image/x-icon"
99
}
1010
],

‎src/App.css

Lines changed: 34 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,43 @@
1-
.App {
2-
text-align: center;
1+
.wrapper {
2+
position: fixed;
3+
margin: 10px;
4+
width: calc(100% - 20px);
35
}
46

5-
.App-logo {
6-
animation: App-logo-spin infinite 20s linear;
7-
height: 40vmin;
8-
pointer-events: none;
7+
.navbar {
8+
background: rgba(255, 255, 255, 0.4) !important;
9+
border-radius: 5px;
910
}
1011

11-
.App-header {
12-
background-color: #282c34;
13-
min-height: 100vh;
14-
display: flex;
15-
flex-direction: column;
16-
align-items: center;
17-
justify-content: center;
18-
font-size: calc(10px + 2vmin);
19-
color: white;
12+
.nav-links {
13+
color: #444;
14+
text-decoration: none;
15+
padding: 0 10px;
16+
transition-duration: .25s;
2017
}
2118

22-
.App-link {
23-
color: #61dafb;
19+
.nav-links:hover {
20+
text-decoration: none;
21+
color: #000;
2422
}
2523

26-
@keyframes App-logo-spin {
27-
from {
28-
transform: rotate(0deg);
29-
}
30-
to {
31-
transform: rotate(360deg);
32-
}
24+
@media only screen and (max-width: 991px) {
25+
.nav-links {
26+
padding: 5px 10px;
27+
}
3328
}
29+
30+
::selection {
31+
background: black;
32+
color: white;
33+
}
34+
35+
::-moz-selection {
36+
background: black;
37+
color: white;
38+
}
39+
40+
::-webkit-selection {
41+
background: black;
42+
color: white;
43+
}

‎src/App.js

Lines changed: 24 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,32 @@
11
import React from 'react';
2-
import logo from './logo.svg';
32
import './App.css';
3+
import Routing from './components/routing';
4+
import 'bootstrap/dist/css/bootstrap.css';
5+
import { Navbar, Nav } from 'react-bootstrap';
6+
import { Link } from 'react-router-dom';
7+
48

59
function App() {
610
return (
7-
<div className="App">
8-
<header className="App-header">
9-
<img src={logo} className="App-logo" alt="logo" />
10-
<p>
11-
Edit <code>src/App.js</code> and save to reload.
12-
</p>
13-
<a
14-
className="App-link"
15-
href="https://reactjs.org"
16-
target="_blank"
17-
rel="noopener noreferrer"
18-
>
19-
Learn React
20-
</a>
21-
</header>
11+
<div>
12+
<div className="wrapper">
13+
<Navbar collapseOnSelect expand="lg">
14+
<Navbar.Brand>
15+
<Link className="nav-links" to="/">Gradient Code</Link>
16+
</Navbar.Brand>
17+
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
18+
<Navbar.Collapse id="responsive-navbar-nav">
19+
<Nav className="ml-auto">
20+
<Link className="nav-links" to="/">Home</Link>
21+
<Link className="nav-links" to="gradients">Gradients</Link>
22+
<Link className="nav-links" to="about">About</Link>
23+
</Nav>
24+
</Navbar.Collapse>
25+
</Navbar>
26+
</div>
27+
28+
<Routing />
29+
2230
</div>
2331
);
2432
}

‎src/components/about/about.css

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
.about-wrapper {
2+
min-height: 100vh;
3+
display: flex;
4+
flex-direction: column;
5+
justify-content: center;
6+
align-items: center;
7+
text-align: center;
8+
overflow-x: hidden;
9+
background-color: #03a9f4;
10+
background: linear-gradient(90deg, #03a9f4, #9f7be3, #f441a5, #64c1ea, #9fea64, #1de07c, #9fea64, #64c1ea,#f441a5, #9f7be3, #03a9f4);
11+
background-size: 1000%;
12+
animation: animate 150s linear infinite;
13+
color: white;
14+
}
15+
16+
.about-content div {
17+
text-shadow: 0 0 40px black;
18+
background: transparent;
19+
border: none;
20+
}
21+
22+
.about-content .older-version {
23+
color: white;
24+
border: 1px solid white;
25+
padding: 3px 10px;
26+
border-radius: 5px;
27+
transition-duration: .25s;
28+
}
29+
30+
.about-content .older-version:hover {
31+
color: black;
32+
background: white;
33+
text-decoration: none;
34+
}
35+
36+
.social-links {
37+
display: inline-block;
38+
width: 3em;
39+
margin: -10px 10px;
40+
}
41+
42+
.social-links svg {
43+
width: auto;
44+
stroke: white;
45+
stroke-width: .75;
46+
fill-opacity: 0;
47+
fill: white;
48+
transition-duration: .25s;
49+
}
50+
51+
.social-links svg:hover {
52+
fill-opacity: 1;
53+
stroke-opacity: 0;
54+
}
55+
56+
.author-info {
57+
position: absolute;
58+
bottom: 10px;
59+
}
60+
61+
.author-name {
62+
text-shadow: 0 0 10px black;
63+
}
64+
65+
@keyframes animate {
66+
0% {
67+
background-position: 0%;
68+
}
69+
70+
100% {
71+
background-position: 500%;
72+
}
73+
}

‎src/components/about/about.jsx

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
import React from 'react';
2+
import './about.css';
3+
import { Card, OverlayTrigger, Tooltip } from 'react-bootstrap';
4+
5+
export default class About extends React.Component {
6+
render() {
7+
return (
8+
<div className="about-wrapper">
9+
<div className="about-content">
10+
<Card className="text-center">
11+
<Card.Body>
12+
<Card.Title>Explore and Experience</Card.Title>
13+
<Card.Text>
14+
<span className="about-heading">Gradient Code</span> is a single page application,
15+
created in reactjs to provide ease of access to web desingers.
16+
<br />
17+
You may also visit the older version of <a className="older-version" href="https://geekyorion.github.io/Web-Designing/Generate%20Random%20Gradient%20Color/" target="_blank" rel="noopener noreferrer">Gradient Code</a>
18+
</Card.Text>
19+
</Card.Body>
20+
<Card.Footer>
21+
<div>
22+
<span className="social-links">
23+
<a href="https://github.com/geekyorion/" target="_blank" rel="noopener noreferrer">
24+
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
25+
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205
26+
11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422
27+
18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236
28+
1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93
29+
0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405
30+
1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91
31+
1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565
32+
22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
33+
</svg>
34+
</a>
35+
</span>
36+
<span className="social-links">
37+
<a href="http://www.facebook.com/gradientcode/" target="_blank" rel="noopener noreferrer">
38+
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
39+
<path d="M23.9981 11.9991C23.9981 5.37216 18.626 0 11.9991 0C5.37216 0 0 5.37216 0 11.9991C0 17.9882
40+
4.38789 22.9522 10.1242 23.8524V15.4676H7.07758V11.9991H10.1242V9.35553C10.1242 6.34826 11.9156 4.68714
41+
14.6564 4.68714C15.9692 4.68714 17.3424 4.92149 17.3424 4.92149V7.87439H15.8294C14.3388 7.87439 13.8739
42+
8.79933 13.8739 9.74824V11.9991H17.2018L16.6698 15.4676H13.8739V23.8524C19.6103 22.9522 23.9981 17.9882 23.9981 11.9991Z"/>
43+
</svg>
44+
</a>
45+
</span>
46+
<span className="social-links">
47+
<a href="https://www.instagram.com/gradient_code/" target="_blank" rel="noopener noreferrer">
48+
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
49+
<path d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935
50+
3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558
51+
2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333
52+
23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667
53+
1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935
54+
19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055
55+
1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07
56+
1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211
57+
0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844
58+
0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166
59+
1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76
60+
6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4
61+
4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439
62+
1.44-1.439.793-.001 1.44.645 1.44 1.439z"/>
63+
</svg>
64+
</a>
65+
</span>
66+
</div>
67+
</Card.Footer>
68+
</Card>
69+
</div>
70+
<div className="author-info">
71+
Developed by
72+
73+
<OverlayTrigger key="top" placement="top"
74+
overlay={<Tooltip id="tooltip-top">
75+
Shashank Sharma
76+
</Tooltip>
77+
}>
78+
<span className="author-name"> GeekyOrion </span>
79+
</OverlayTrigger>
80+
81+
with <span style={{color: "red"}}>&hearts;</span> and &#128187; obviously
82+
</div>
83+
</div>
84+
);
85+
}
86+
}

0 commit comments

Comments
 (0)