Skip to content

Improvements to the website #210

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
merged 3 commits into from
Jul 15, 2020
Merged

Improvements to the website #210

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a533bea
look and feel improvements to the landing page
ksraj123 Jul 12, 2020
c036f8d
improvements to teams page
ksraj123 Jul 12, 2020
4ec643d
added the spansberry image
ksraj123 Jul 12, 2020
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
9 changes: 9 additions & 0 deletions src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,12 @@
@font-face {
font-family: 'Inter';
src: local('Inter'), url(./fonts/Inter-Regular.otf) format('opentype');
}

p {
font-family: Inter;
}

.App {
text-align: center;
}
Expand Down
53 changes: 8 additions & 45 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,40 +1,24 @@
import React, { useState, useEffect } from "react";
import { Switch, Route, HashRouter as Router } from "react-router-dom";
import React from "react";
import "./App.css";
import Team from "./pages/Team/Team";
import NewBlog from "./pages/NewBlog/NewBlog";
import BlogList from "./pages/Blogs/BlogList";
import NewHome from "./pages/Home/NewHome";
import JoinUs from "./pages/JoinUs/JoinUs";
import { Switch, Route, HashRouter as Router } from "react-router-dom";
import COC from "./pages/COC/COC";
import About from "./pages/About/About";
// import Donut from './pages/Donut/Donut';
import Blog from "./pages/Blogs/Blog";
import BlogList from "./pages/Blogs/BlogList";
// import Codebadge from './pages/Codebadge/Codebadge';
import NavBar from "./components/NavBar";
import About from "./pages/About/About";
import Footer from "./components/Footer";
// import 'bootstrap/dist/css/bootstrap.min.css';
import Blog from "./pages/Blogs/Blog";
import Team from "./pages/Team/Team";
import COC from "./pages/COC/COC";

// import Header from "./Header/header"
function App() {
const [scroll, setScroll] = useState("");

window.onscroll = () => {
if (window.scrollY > 0) {
setScroll("navbar-scroll");
} else {
setScroll("");
}
};
return (
<>
<div className="App" style={{ width: "100%" }}>
<Router>
<NavBar onScroll={scroll} />
<NavBar />
<Switch>
<Route path="/about">
<About />
</Route>
<Route path="/team">
<Team />
</Route>
Expand All @@ -44,27 +28,6 @@ function App() {
<Route path="/codeofconduct">
<COC />
</Route>
<Route path="/bloglist">
<BlogList />
</Route>
<Route path="/blog">
<Blog />
</Route>
<Route path="/newblog">
<NewBlog />
</Route>
<Route path="/gsoc19">
<NewHome />
</Route>
<Route path="/gssoc19">
<NewHome />
</Route>
<Route path="/gci19">
<NewHome />
</Route>
<Route path="/kwoc19">
<NewHome />
</Route>
<Route exact path="/">
<NewHome />
</Route>
Expand Down
53 changes: 53 additions & 0 deletions src/components/Collaborate/CollaborateCard.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
.collaborate-card.option {
width: 100%;
height: 100%;
border: none;
}

.collaborate-card.option:hover {
box-shadow: 5px 10px 20px 1px rgba(0, 0, 0, 0.253);
transition: box-shadow 1s ease;
}

.collaborate-card.option.collaborate-card-body {
padding: 1rem 0;
}

.collaborate-card.option.card-text {
font-size: 0.9rem;
padding: 0.4rem 1.9rem;
}

.container.fluid.row {
padding-top: 6rem;
}

.collaborate-card {
height: 40rem;
width: 25rem;
border: 1px solid gray;
padding: 2rem;
}

.collaborate-card-img-top.option {
transform: scale(1);
transition: transform 0.5s ease;
height: 10rem;
object-fit: scale-down;
}

.collaborate-card-img-top.option:hover {
transform: scale(1.2);
overflow: hidden;
}

.collaborate-card-description {
text-align: left;
}

.collaborate-card-title {
margin-top: 2rem;
margin-bottom: 1rem;
height: max-content !important;
font-weight: bold;
}
23 changes: 23 additions & 0 deletions src/components/Collaborate/CollaborateCard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import React from "react";
import "./CollaborateCard.css";

const CollaborateCard = (props) => {
return (
<div className="collaborate-card d-flex flex-column text-center option overflow-hidden">
<img
src={props.image}
alt="collaborate"
className="collaborate-card-img-top option"/>
<div className="collaborate-card-body text-dark flex-column d-flex">
<h4 className="collaborate-card-title option" style={{ height: "100" }}>
{props.title}
</h4>
<p className="collaborate-card-description">
{props.description}
</p>
</div>
</div>
);
};

export default CollaborateCard;
65 changes: 35 additions & 30 deletions src/components/Footer/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ const Footer = () => {
<Container>
<Row style={{textAlign: "left"}}>
<Col lg={8} sm={12}>
<p className="footer-para-question">Want to know more about CodeUino?</p>
<h1 className="footer-para-question">Wants to know about Codeuino Founder?</h1>
<p>
Codeuino is an Open Source Social Networking organisation that
provides various robust frameworks solutions which could span the
Expand Down Expand Up @@ -45,35 +45,40 @@ const Footer = () => {
</Col>
</Row>
<Row>
<Col className="footer-icon" sm={2} xs={4}>
<a href="https://twitter.com/codeuino?lang=en">
<i class="fab fa-twitter fa-2x text-white"></i>
</a>
</Col>
<Col className="footer-icon" sm={2} xs={4}>
<a href="https://www.facebook.com/codeuino/">
<i class="fab fa-facebook-f fa-2x text-white"></i>
</a>
</Col>
<Col className="footer-icon" sm={2} xs={4}>
<a href="https://github.com/codeuino">
<i class="fab fa-github fa-2x text-white"></i>
</a>
</Col>
<Col className="footer-icon" sm={2} xs={4}>
<a href="https://www.linkedin.com/company/codeuino/">
<i class="fab fa-linkedin-in fa-2x text-white"></i>
</a>
</Col>
<Col className="footer-icon" sm={2} xs={4}>
<a href="https://www.youtube.com/channel/UCmC2EOPv_oyJIevTyzlZTDQ">
<i class="fab fa-youtube fa-2x text-white"></i>
</a>
</Col>
<Col className="footer-icon" sm={2} xs={4}>
<a href="https://medium.com/codeuino">
<i class="fab fa-medium-m fa-2x text-white"></i>
</a>
<Col md={0} lg={8}></Col>
<Col md={12} lg={4}>
<Row>
<Col className="footer-icon" sm={2} xs={4}>
<a href="https://twitter.com/codeuino?lang=en">
<i class="fab fa-twitter fa-2x text-white"></i>
</a>
</Col>
<Col className="footer-icon" sm={2} xs={4}>
<a href="https://www.facebook.com/codeuino/">
<i class="fab fa-facebook-f fa-2x text-white"></i>
</a>
</Col>
<Col className="footer-icon" sm={2} xs={4}>
<a href="https://github.com/codeuino">
<i class="fab fa-github fa-2x text-white"></i>
</a>
</Col>
<Col className="footer-icon" sm={2} xs={4}>
<a href="https://www.linkedin.com/company/codeuino/">
<i class="fab fa-linkedin-in fa-2x text-white"></i>
</a>
</Col>
<Col className="footer-icon" sm={2} xs={4}>
<a href="https://www.youtube.com/channel/UCmC2EOPv_oyJIevTyzlZTDQ">
<i class="fab fa-youtube fa-2x text-white"></i>
</a>
</Col>
<Col className="footer-icon" sm={2} xs={4}>
<a href="https://medium.com/codeuino">
<i class="fab fa-medium-m fa-2x text-white"></i>
</a>
</Col>
</Row>
</Col>
</Row>
</Container>
Expand Down
10 changes: 5 additions & 5 deletions src/components/NavBar/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { Image, Navbar, Container, Nav } from "react-bootstrap";
import "./NavBar.css";
import logo from "../../newlogo.png";
import { HashLink as Link } from "react-router-hash-link";
const NavBar = ({ onScroll }) => {
const NavBar = () => {

const navbarRef = useRef(null);

Expand All @@ -19,26 +19,26 @@ const NavBar = ({ onScroll }) => {
return (
<React.Fragment>
<Navbar expand="lg" variant="light" bg="light">
<Navbar.Brand>
<Navbar.Brand className="mr-0">
<Link to="/">
<Image
id="logo"
src={logo}
alt="codeuino logo"
style={{ heigth: "20vh", width: "10vw" }}/>
style={{ heigth: "20vh", width: "12vw" }}/>
</Link>
</Navbar.Brand>
</Navbar>

<Navbar variant="light" bg="light" expand="lg" fixed="top" className={`${onScroll}`} id="myNav" ref={navbarRef}>
<Navbar variant="light" bg="light" expand="lg" fixed="top" id="myNav" ref={navbarRef}>
<Container>
<Navbar.Brand>
<Link to="/">
<Image
id="logo"
src={logo}
alt="codeuino logo"
style={{ heigth: "20vh", width: "10vw" }}/>
style={{ heigth: "20vh", width: "12vw" }}/>
</Link>
</Navbar.Brand>
<Navbar.Toggle
Expand Down
Binary file added src/fonts/Inter-Regular.otf
View file
Open in desktop
Binary file not shown.
13 changes: 0 additions & 13 deletions src/pages/Codo/Codo.js
View file
Open in desktop

This file was deleted.

42 changes: 39 additions & 3 deletions src/pages/Home/Components/Activities.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
border-color: #22247a;
}

.activity-card-container {
.collaborate-card-container {
width: 100%;
display: grid;
grid-template-columns: auto auto auto;
Expand All @@ -26,10 +26,46 @@
text-align: center;
}

.activity-cards {
.collaborate-cards {
height: 610px;
}

.activity-cards:last-child {
.collaborate-cards:last-child {
height: 300px;
}

.collaborate-card.activity {
width: 100%;
height: 100%;
border: none;
}

.collaborate-card.activity:hover {
box-shadow: 5px 10px 20px 1px rgba(0, 0, 0, 0.253);
transition: box-shadow 1s ease;
}

.collaborate-card.activity.collaborate-card-body {
padding: 1rem 0;
}

.collaborate-card.activity.card-text {
font-size: 0.9rem;
padding: 0.4rem 1.9rem;
}

.container.fluid.row {
padding-top: 6rem;
}

.btn.activity {
color: #22247a;
background-color: #fff;
border-color: #22247a;
}

.btn.activity:hover {
color: #fff;
background-color: #22247a;
border-color: #22247a;
}
Loading