Skip to content

Commit 4ffa4e7

Browse files
lakshyalakshya
lakshya
authored and
lakshya
committed
Added separate component for navbar and footer and updated UI
1 parent f8ff144 commit 4ffa4e7

File tree

8 files changed

+123
-79
lines changed

8 files changed

+123
-79
lines changed

‎src/App.js‎

Lines changed: 8 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,33 @@
11
import React from 'react';
2-
import logo from './newlogo.png';
32
import './App.css';
4-
import Home from "./pages/Home/NewHome";
5-
import {Nav,Navbar,Container,Image,NavDropdown} from 'react-bootstrap';
63
import Team from './pages/Team/Team';
74
import NewBlog from './pages/NewBlog/NewBlog'
85
import NewHome from './pages/Home/NewHome';
96
import JoinUs from './pages/JoinUs/JoinUs'
107
import {
118
Switch,
129
Route,
13-
Link,
1410
HashRouter,
1511
} from "react-router-dom";
1612
import About from './pages/About/About'
17-
import Donut from './pages/Donut/Donut';
13+
// import Donut from './pages/Donut/Donut';
1814
import Blog from './pages/Blogs/Blog';
1915
import BlogList from './pages/Blogs/BlogList'
20-
import Codebadge from './pages/Codebadge/Codebadge';
16+
// import Codebadge from './pages/Codebadge/Codebadge';
17+
import NavBar from './components/NavBar'
18+
import Footer from './components/Footer'
2119
// import Header from "./Header/header"
2220
function App() {
2321
return (
2422
<>
2523
<div className="App" style={{width:"100%"}}>
2624

2725
<HashRouter>
28-
<Navbar class="shadow" collapseOnSelect expand="lg" bg="white" variant="light" fixed="top" class="navbar">
29-
<div className="container">
30-
<Navbar.Brand href="/"><Link to="/"><Image id="logo" src={logo} alt="codeuino logo" style={{heigth:"20vh",width:"10vw"}}/></Link></Navbar.Brand>
31-
<Navbar.Toggle aria-controls="responsive-navbar-nav" data-toggle="collapse" data-target="#myDropdown"/>
32-
<Navbar.Collapse id="responsive-navbar-nav" style={{backgroundColor:"white"}}>
33-
<Nav className="mr-auto">
34-
35-
</Nav>
36-
<Nav>
37-
<Link to="/"><Nav.Link href="/">Home</Nav.Link></Link>
38-
<NavDropdown title="Activities" id="responsive-navbar-nav">
39-
<NavDropdown.Item data-target=".navbar-collapse.show" href="/#/gsoc19" style={{"textAlign": "center"}}>GSOC 2019</NavDropdown.Item>
40-
<NavDropdown.Item data-target=".navbar-collapse.show" href="/#/gci19" style={{"textAlign": "center"}}>GCI 2019-20</NavDropdown.Item>
41-
<NavDropdown.Item data-target=".navbar-collapse.show" href="/#/kwoc18" style={{"textAlign": "center"}} >KWOC 2018</NavDropdown.Item>
42-
<NavDropdown.Item data-target=".navbar-collapse.show" href="/#/gssoc19" style={{"textAlign": "center"}} >GSSOC 2019</NavDropdown.Item>
43-
</NavDropdown>
44-
{/* <Navbar.Dropdown>
45-
46-
</Navbar.Dropdown> */}
47-
<Link to="/team"><Nav.Link href="/team">Team</Nav.Link></Link>
48-
<Nav.Link href="https://docs.codeuino.org/documentation/">Docs</Nav.Link>
49-
<Link to="/about"><Nav.Link href="/about">About Us</Nav.Link></Link>
50-
<Link to="/bloglist"><Nav.Link href="/bloglist">Blog</Nav.Link></Link>
51-
<Link to="/joinus"><Nav.Link href="/joinus">Join Us</Nav.Link></Link>
52-
</Nav>
53-
</Navbar.Collapse>
54-
</div>
55-
</Navbar>
56-
57-
58-
<Switch>
59-
60-
26+
<NavBar/>
27+
<Switch>
6128
<Route path="/about" >
62-
<div class="main container-fluid"
63-
style={{maxWidth: "100vw",margin:"0"}}
64-
>
65-
<main>
29+
6630
<About/>
67-
</main>
68-
</div>
6931
</Route>
7032
<Route path="/team" >
7133
<Team/>
@@ -103,34 +65,7 @@ function App() {
10365

10466
</Switch>
10567
</HashRouter>
106-
<footer>
107-
<div className="container">
108-
<h3 style={{alignContent:"left"}}>Want to know more about CodeUino?</h3>
109-
<button type="button" id="discover1" className="btn btn-default" style={{alignContent:"right"}}>Discover more</button>
110-
{/* <button type="button" id="discover2" class="btn btn-default col-md-3">Discover more</button> */}
111-
</div>
112-
<div className="container">
113-
<div className="row">
114-
<div className="col-md-3">
115-
<h6>Resources</h6>
116-
<div><a href="/">Home</a></div>
117-
<div><a href="/about">About</a></div>
118-
<div><a href="/blog">Blog</a></div>
119-
<div><a href="/join">Join Us</a></div>
120-
</div>
121-
<div className="col-md-6">
122-
<p>Codeuino is a Non-Profit Open Source Social Networking organisation that provides various robust frameworks solutions which could span the entire world through building all kinds of social environments, discussion portals and collaboration.</p>
123-
</div>
124-
<div className="col-md-3">
125-
<p><i class="fa fa-envelope"></i> codeuino@gmail.com</p>
126-
<p><i class="fa fa-map-marker"></i> Coduino</p>
127-
</div>
128-
</div>
129-
</div>
130-
© {new Date().getFullYear()}, Built by
131-
{` `}
132-
<a href="http://codeuino.org/">Codeuino</a>
133-
</footer>
68+
<Footer/>
13469
</div>
13570
</>
13671
);

‎src/components/Footer/Footer.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.footer {
2+
padding:30px;
3+
color:white;
4+
}

‎src/components/Footer/index.js‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import React from 'react'
2+
import './Footer.css'
3+
const Footer = () => {
4+
return (
5+
<footer className="footer bg-dark">
6+
<div className="container">
7+
<h3 style={{alignContent:"left"}}>Want to know more about CodeUino?</h3>
8+
<button type="button" id="discover1" className="btn btn-default my-2" style={{alignContent:"right"}}>Discover more</button>
9+
{/* <button type="button" id="discover2" class="btn btn-default col-md-3">Discover more</button> */}
10+
</div>
11+
<div className="container">
12+
<div className="row">
13+
<div className="col-md-3">
14+
<h6>Resources</h6>
15+
<div><a href="/">Home</a></div>
16+
<div><a href="/about">About</a></div>
17+
<div><a href="/blog">Blog</a></div>
18+
<div><a href="/join">Join Us</a></div>
19+
</div>
20+
<div className="col-md-6">
21+
<p>Codeuino is a Non-Profit Open Source Social Networking organisation that provides various robust frameworks solutions which could span the entire world through building all kinds of social environments, discussion portals and collaboration.</p>
22+
</div>
23+
<div className="col-md-3">
24+
<p><i class="fa fa-envelope"></i> codeuino@gmail.com</p>
25+
<p><i class="fa fa-map-marker"></i> Coduino</p>
26+
</div>
27+
</div>
28+
</div>
29+
© {new Date().getFullYear()}, Built by
30+
{` `}
31+
<a href="http://codeuino.org/">Codeuino</a>
32+
</footer>
33+
)
34+
}
35+
export default Footer

‎src/components/NavBar/NavBar.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
#myNav{
2+
box-shadow: 0px 2px 15px grey;
3+
}
4+
a {
5+
transition: transform 0.6s;
6+
}
7+
a:hover{
8+
text-decoration:none;
9+
transform: scale(1.05);
10+
}

‎src/components/NavBar/index.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import React from 'react'
2+
import {
3+
Navbar,
4+
Nav,
5+
NavDropdown,
6+
Image
7+
} from 'react-bootstrap'
8+
import './NavBar.css'
9+
import logo from '../../newlogo.png';
10+
11+
import {Link} from 'react-router-dom'
12+
const NavBar = () => {
13+
return (
14+
<Navbar collapseOnSelect expand="lg" bg="white" variant="light" fixed="top" class="navbar "id="myNav" >
15+
<div className="container">
16+
<Navbar.Brand href="/"><Link to="/"><Image id="logo" src={logo} alt="codeuino logo" style={{heigth:"20vh",width:"10vw"}}/></Link></Navbar.Brand>
17+
<Navbar.Toggle aria-controls="responsive-navbar-nav" data-toggle="collapse" data-target="#myDropdown"/>
18+
<Navbar.Collapse id="responsive-navbar-nav" style={{backgroundColor:"white"}}>
19+
<Nav className="mr-auto">
20+
21+
</Nav>
22+
<Nav>
23+
<Link to="/"><Nav.Link href="/" className="nav-key">Home</Nav.Link></Link>
24+
<NavDropdown title="Activities" className="nav-key" id="responsive-navbar-nav">
25+
<NavDropdown.Item data-target=".navbar-collapse.show" href="/#/gsoc19" style={{"textAlign": "center"}}>GSOC 2019</NavDropdown.Item>
26+
<NavDropdown.Item data-target=".navbar-collapse.show" href="/#/gci19" style={{"textAlign": "center"}}>GCI 2019-20</NavDropdown.Item>
27+
<NavDropdown.Item data-target=".navbar-collapse.show" href="/#/kwoc18" style={{"textAlign": "center"}} >KWOC 2018</NavDropdown.Item>
28+
<NavDropdown.Item data-target=".navbar-collapse.show" href="/#/gssoc19" style={{"textAlign": "center"}} >GSSOC 2019</NavDropdown.Item>
29+
</NavDropdown>
30+
{/* <Navbar.Dropdown>
31+
32+
</Navbar.Dropdown> */}
33+
<Link to="/team"><Nav.Link href="/team" className="nav-key">Team</Nav.Link></Link>
34+
<Nav.Link href="https://docs.codeuino.org/documentation/" className="nav-key">Docs</Nav.Link>
35+
<Link to="/about"><Nav.Link href="/about" className="nav-key">About Us</Nav.Link></Link>
36+
<Link to="/bloglist"><Nav.Link href="/bloglist" className="nav-key">Blog</Nav.Link></Link>
37+
<Link to="/joinus"><Nav.Link href="/joinus" className="nav-key">Join Us</Nav.Link></Link>
38+
</Nav>
39+
</Navbar.Collapse>
40+
</div>
41+
</Navbar>
42+
)
43+
}
44+
export default NavBar

‎src/pages/About/About.css‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
.cover-img-wrapper {
2+
text-align: center;
3+
padding:20px;
4+
background-color: rgb(224,226,228);
5+
}
6+
.cover-img-wrapper > img {
7+
width:auto;
8+
height:25vh
9+
}
10+
@media screen and (max-width:661px) {
11+
.cover-img-wrapper > img {
12+
width:100%;
13+
}
14+
}

‎src/pages/About/About.js‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
22
import PropTypes from 'prop-types';
33
// import BlogList from './BlogList';
44
import Markdown from 'react-markdown';
5+
import './About.css'
56
import marked from "marked";
67
import codeuino from './codeuino-banner.jpg'
78
class Blog extends Component {
@@ -34,11 +35,12 @@ class Blog extends Component {
3435
<div style={{outline:"none"}} tabindex="-1" role="group" id="gatsby-focus-wrapper">
3536

3637
<div class="mt-12"></div>
37-
38-
<div className="container">
38+
<div className="cover-img-wrapper">
39+
<img src={codeuino} alt="img" />
40+
</div>
41+
<div className="container mt-5">
3942
<div className="row">
40-
<div className="blog" style={{maxWidth:"100%"}}>
41-
<img src={codeuino} alt="img" style={{width:"100%",height:'25vh'}}/>
43+
<div className="blog" style={{maxWidth:"100%",textAlign:'justify'}}>
4244
<h2><b>What is CodeUino?</b></h2>
4345
<p>CodeUino is a Non-Profit Open Source Social Networking organisation that provides various robust frameworks solutions which could span the entire world through building all kinds of social environments, discussion portals and collaboration platforms by giving prospectus to various other organisations, users and outreachers to showcase their products in a custom way.</p>
4446
<p>This wide social open networking framework organisation is driven by the volunteers all over the globe. This helps open source enthusiast to build up various technocratic social wide living softwares and researching FOSS projects under code survivors and challenging world. CodeUino takes into house the development of some of the coolest Open Source Projects that are made with the sole motive to benefit more and more people present all over the world.</p>

‎src/pages/Team/Team.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ class Team extends Component {
3636
let contributors=this.state.contributors;
3737
// console.log(contributors)
3838
var contrilist = contributors.map((contri)=>{
39-
return <div class="col-xs-2 lawyer-post g-mb-50"><a href={contri.url}><img class="img-responsive full-width g-mb-25" title={contri.name} src={" "+contri.image+" "} alt="" style={{width:"10vw",height:"10vw", borderRadius:"50%"}}/></a> </div>
39+
return <div class="col-xs-2 lawyer-post g-mb-50 m-2"><a href={contri.url}><img class="img-responsive full-width g-mb-25" title={contri.name} src={" "+contri.image+" "} alt="" style={{width:"10vw",height:"10vw", borderRadius:"50%"}}/></a> </div>
4040
})
4141
return (
4242
<>
@@ -240,7 +240,7 @@ class Team extends Component {
240240
</div>
241241
</div>
242242
<h2>Our Awesome Contributors</h2>
243-
<div id="cotributors" style={{marginLeft:"6vw",display:"flex",justifyContent:"center"}}>
243+
<div id="cotributors" className="container d-flex">
244244
<div class="row" style={{display:"flex",justifyContent:"center"}}>
245245
{contrilist}
246246
</div>

0 commit comments

Comments
 (0)