Skip to content

Commit f165cca

Browse files
devesh-vermadevesh-verma
authored
Merge pull request #210 from ksraj123/newWebsiteDesign
Improvements to the website
2 parents e51d91b + 4ec643d commit f165cca

25 files changed

+342
-556
lines changed

‎src/App.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,12 @@
1+
@font-face {
2+
font-family: 'Inter';
3+
src: local('Inter'), url(./fonts/Inter-Regular.otf) format('opentype');
4+
}
5+
6+
p {
7+
font-family: Inter;
8+
}
9+
110
.App {
211
text-align: center;
312
}

‎src/App.js‎

Lines changed: 8 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,24 @@
1-
import React, { useState, useEffect } from "react";
1+
import { Switch, Route, HashRouter as Router } from "react-router-dom";
2+
import React from "react";
23
import "./App.css";
3-
import Team from "./pages/Team/Team";
44
import NewBlog from "./pages/NewBlog/NewBlog";
5+
import BlogList from "./pages/Blogs/BlogList";
56
import NewHome from "./pages/Home/NewHome";
67
import JoinUs from "./pages/JoinUs/JoinUs";
7-
import { Switch, Route, HashRouter as Router } from "react-router-dom";
8-
import COC from "./pages/COC/COC";
9-
import About from "./pages/About/About";
10-
// import Donut from './pages/Donut/Donut';
11-
import Blog from "./pages/Blogs/Blog";
12-
import BlogList from "./pages/Blogs/BlogList";
13-
// import Codebadge from './pages/Codebadge/Codebadge';
148
import NavBar from "./components/NavBar";
9+
import About from "./pages/About/About";
1510
import Footer from "./components/Footer";
16-
// import 'bootstrap/dist/css/bootstrap.min.css';
11+
import Blog from "./pages/Blogs/Blog";
12+
import Team from "./pages/Team/Team";
13+
import COC from "./pages/COC/COC";
1714

18-
// import Header from "./Header/header"
1915
function App() {
20-
const [scroll, setScroll] = useState("");
21-
22-
window.onscroll = () => {
23-
if (window.scrollY > 0) {
24-
setScroll("navbar-scroll");
25-
} else {
26-
setScroll("");
27-
}
28-
};
2916
return (
3017
<>
3118
<div className="App" style={{ width: "100%" }}>
3219
<Router>
33-
<NavBar onScroll={scroll} />
20+
<NavBar />
3421
<Switch>
35-
<Route path="/about">
36-
<About />
37-
</Route>
3822
<Route path="/team">
3923
<Team />
4024
</Route>
@@ -44,27 +28,6 @@ function App() {
4428
<Route path="/codeofconduct">
4529
<COC />
4630
</Route>
47-
<Route path="/bloglist">
48-
<BlogList />
49-
</Route>
50-
<Route path="/blog">
51-
<Blog />
52-
</Route>
53-
<Route path="/newblog">
54-
<NewBlog />
55-
</Route>
56-
<Route path="/gsoc19">
57-
<NewHome />
58-
</Route>
59-
<Route path="/gssoc19">
60-
<NewHome />
61-
</Route>
62-
<Route path="/gci19">
63-
<NewHome />
64-
</Route>
65-
<Route path="/kwoc19">
66-
<NewHome />
67-
</Route>
6831
<Route exact path="/">
6932
<NewHome />
7033
</Route>

‎src/components/Collaborate/CollaborateCard.css‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
.collaborate-card.option {
2+
width: 100%;
3+
height: 100%;
4+
border: none;
5+
}
6+
7+
.collaborate-card.option:hover {
8+
box-shadow: 5px 10px 20px 1px rgba(0, 0, 0, 0.253);
9+
transition: box-shadow 1s ease;
10+
}
11+
12+
.collaborate-card.option.collaborate-card-body {
13+
padding: 1rem 0;
14+
}
15+
16+
.collaborate-card.option.card-text {
17+
font-size: 0.9rem;
18+
padding: 0.4rem 1.9rem;
19+
}
20+
21+
.container.fluid.row {
22+
padding-top: 6rem;
23+
}
24+
25+
.collaborate-card {
26+
height: 40rem;
27+
width: 25rem;
28+
border: 1px solid gray;
29+
padding: 2rem;
30+
}
31+
32+
.collaborate-card-img-top.option {
33+
transform: scale(1);
34+
transition: transform 0.5s ease;
35+
height: 10rem;
36+
object-fit: scale-down;
37+
}
38+
39+
.collaborate-card-img-top.option:hover {
40+
transform: scale(1.2);
41+
overflow: hidden;
42+
}
43+
44+
.collaborate-card-description {
45+
text-align: left;
46+
}
47+
48+
.collaborate-card-title {
49+
margin-top: 2rem;
50+
margin-bottom: 1rem;
51+
height: max-content !important;
52+
font-weight: bold;
53+
}

‎src/components/Collaborate/CollaborateCard.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import React from "react";
2+
import "./CollaborateCard.css";
3+
4+
const CollaborateCard = (props) => {
5+
return (
6+
<div className="collaborate-card d-flex flex-column text-center option overflow-hidden">
7+
<img
8+
src={props.image}
9+
alt="collaborate"
10+
className="collaborate-card-img-top option"/>
11+
<div className="collaborate-card-body text-dark flex-column d-flex">
12+
<h4 className="collaborate-card-title option" style={{ height: "100" }}>
13+
{props.title}
14+
</h4>
15+
<p className="collaborate-card-description">
16+
{props.description}
17+
</p>
18+
</div>
19+
</div>
20+
);
21+
};
22+
23+
export default CollaborateCard;

‎src/components/Footer/index.js‎

Lines changed: 35 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const Footer = () => {
99
<Container>
1010
<Row style={{textAlign: "left"}}>
1111
<Col lg={8} sm={12}>
12-
<p className="footer-para-question">Want to know more about CodeUino?</p>
12+
<h1 className="footer-para-question">Wants to know about Codeuino Founder?</h1>
1313
<p>
1414
Codeuino is an Open Source Social Networking organisation that
1515
provides various robust frameworks solutions which could span the
@@ -45,35 +45,40 @@ const Footer = () => {
4545
</Col>
4646
</Row>
4747
<Row>
48-
<Col className="footer-icon" sm={2} xs={4}>
49-
<a href="https://twitter.com/codeuino?lang=en">
50-
<i class="fab fa-twitter fa-2x text-white"></i>
51-
</a>
52-
</Col>
53-
<Col className="footer-icon" sm={2} xs={4}>
54-
<a href="https://www.facebook.com/codeuino/">
55-
<i class="fab fa-facebook-f fa-2x text-white"></i>
56-
</a>
57-
</Col>
58-
<Col className="footer-icon" sm={2} xs={4}>
59-
<a href="https://github.com/codeuino">
60-
<i class="fab fa-github fa-2x text-white"></i>
61-
</a>
62-
</Col>
63-
<Col className="footer-icon" sm={2} xs={4}>
64-
<a href="https://www.linkedin.com/company/codeuino/">
65-
<i class="fab fa-linkedin-in fa-2x text-white"></i>
66-
</a>
67-
</Col>
68-
<Col className="footer-icon" sm={2} xs={4}>
69-
<a href="https://www.youtube.com/channel/UCmC2EOPv_oyJIevTyzlZTDQ">
70-
<i class="fab fa-youtube fa-2x text-white"></i>
71-
</a>
72-
</Col>
73-
<Col className="footer-icon" sm={2} xs={4}>
74-
<a href="https://medium.com/codeuino">
75-
<i class="fab fa-medium-m fa-2x text-white"></i>
76-
</a>
48+
<Col md={0} lg={8}></Col>
49+
<Col md={12} lg={4}>
50+
<Row>
51+
<Col className="footer-icon" sm={2} xs={4}>
52+
<a href="https://twitter.com/codeuino?lang=en">
53+
<i class="fab fa-twitter fa-2x text-white"></i>
54+
</a>
55+
</Col>
56+
<Col className="footer-icon" sm={2} xs={4}>
57+
<a href="https://www.facebook.com/codeuino/">
58+
<i class="fab fa-facebook-f fa-2x text-white"></i>
59+
</a>
60+
</Col>
61+
<Col className="footer-icon" sm={2} xs={4}>
62+
<a href="https://github.com/codeuino">
63+
<i class="fab fa-github fa-2x text-white"></i>
64+
</a>
65+
</Col>
66+
<Col className="footer-icon" sm={2} xs={4}>
67+
<a href="https://www.linkedin.com/company/codeuino/">
68+
<i class="fab fa-linkedin-in fa-2x text-white"></i>
69+
</a>
70+
</Col>
71+
<Col className="footer-icon" sm={2} xs={4}>
72+
<a href="https://www.youtube.com/channel/UCmC2EOPv_oyJIevTyzlZTDQ">
73+
<i class="fab fa-youtube fa-2x text-white"></i>
74+
</a>
75+
</Col>
76+
<Col className="footer-icon" sm={2} xs={4}>
77+
<a href="https://medium.com/codeuino">
78+
<i class="fab fa-medium-m fa-2x text-white"></i>
79+
</a>
80+
</Col>
81+
</Row>
7782
</Col>
7883
</Row>
7984
</Container>

‎src/components/NavBar/index.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Image, Navbar, Container, Nav } from "react-bootstrap";
33
import "./NavBar.css";
44
import logo from "../../newlogo.png";
55
import { HashLink as Link } from "react-router-hash-link";
6-
const NavBar = ({ onScroll }) => {
6+
const NavBar = () => {
77

88
const navbarRef = useRef(null);
99

@@ -19,26 +19,26 @@ const NavBar = ({ onScroll }) => {
1919
return (
2020
<React.Fragment>
2121
<Navbar expand="lg" variant="light" bg="light">
22-
<Navbar.Brand>
22+
<Navbar.Brand className="mr-0">
2323
<Link to="/">
2424
<Image
2525
id="logo"
2626
src={logo}
2727
alt="codeuino logo"
28-
style={{ heigth: "20vh", width: "10vw" }}/>
28+
style={{ heigth: "20vh", width: "12vw" }}/>
2929
</Link>
3030
</Navbar.Brand>
3131
</Navbar>
3232

33-
<Navbar variant="light" bg="light" expand="lg" fixed="top" className={`${onScroll}`} id="myNav" ref={navbarRef}>
33+
<Navbar variant="light" bg="light" expand="lg" fixed="top" id="myNav" ref={navbarRef}>
3434
<Container>
3535
<Navbar.Brand>
3636
<Link to="/">
3737
<Image
3838
id="logo"
3939
src={logo}
4040
alt="codeuino logo"
41-
style={{ heigth: "20vh", width: "10vw" }}/>
41+
style={{ heigth: "20vh", width: "12vw" }}/>
4242
</Link>
4343
</Navbar.Brand>
4444
<Navbar.Toggle

‎src/fonts/Inter-Regular.otf‎

218 KB
Binary file not shown.

‎src/pages/Codo/Codo.js‎

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎src/pages/Home/Components/Activities.css‎

Lines changed: 39 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
border-color: #22247a;
1111
}
1212

13-
.activity-card-container {
13+
.collaborate-card-container {
1414
width: 100%;
1515
display: grid;
1616
grid-template-columns: auto auto auto;
@@ -26,10 +26,46 @@
2626
text-align: center;
2727
}
2828

29-
.activity-cards {
29+
.collaborate-cards {
3030
height: 610px;
3131
}
3232

33-
.activity-cards:last-child {
33+
.collaborate-cards:last-child {
3434
height: 300px;
3535
}
36+
37+
.collaborate-card.activity {
38+
width: 100%;
39+
height: 100%;
40+
border: none;
41+
}
42+
43+
.collaborate-card.activity:hover {
44+
box-shadow: 5px 10px 20px 1px rgba(0, 0, 0, 0.253);
45+
transition: box-shadow 1s ease;
46+
}
47+
48+
.collaborate-card.activity.collaborate-card-body {
49+
padding: 1rem 0;
50+
}
51+
52+
.collaborate-card.activity.card-text {
53+
font-size: 0.9rem;
54+
padding: 0.4rem 1.9rem;
55+
}
56+
57+
.container.fluid.row {
58+
padding-top: 6rem;
59+
}
60+
61+
.btn.activity {
62+
color: #22247a;
63+
background-color: #fff;
64+
border-color: #22247a;
65+
}
66+
67+
.btn.activity:hover {
68+
color: #fff;
69+
background-color: #22247a;
70+
border-color: #22247a;
71+
}

0 commit comments

Comments
 (0)