Thanks to visit codestin.com
Credit goes to github.com

Skip to content
This repository was archived by the owner on Mar 9, 2021. It is now read-only.

Commit d22e267

Browse files
author
M-ZubairAhmed
committed
top banner added
1 parent f216dfc commit d22e267

File tree

1 file changed

+123
-109
lines changed

1 file changed

+123
-109
lines changed

‎pages/learn.js

Lines changed: 123 additions & 109 deletions
Original file line numberDiff line numberDiff line change
@@ -2,128 +2,142 @@ import React from 'react';
22
import { Accordion, Icon, List } from 'semantic-ui-react';
33

44
import publicPage from '../hocs/public-page';
5+
import TopBanner from '../components/top-banner';
56

67
export default publicPage(() => {
78
return (
89
<div>
10+
<TopBanner
11+
pageTitle="Learn"
12+
pageSubTitle="Open Source Learning Guides to master your favorite technology"
13+
/>
914
<main>
10-
<Accordion fluid styled>
11-
<Accordion.Title>
12-
<Icon name="dropdown" />
13-
Web Development
14-
</Accordion.Title>
15-
<Accordion.Content>
16-
<Accordion>
17-
<Accordion.Title>
18-
<Icon name="dropdown" />
19-
Frontend
20-
</Accordion.Title>
21-
<Accordion.Content>
22-
<List selection verticalAlign="middle">
23-
<List.Item>
24-
<List.Content>
25-
<List.Header>Basics</List.Header>
26-
<List.Description>
27-
Get started with Frontend development
28-
</List.Description>
29-
</List.Content>
30-
</List.Item>
31-
<List.Item>
32-
<List.Content>
33-
<List.Header>Intermediate</List.Header>
34-
<List.Description>
35-
Next level after basics course
36-
</List.Description>
37-
</List.Content>
38-
</List.Item>
39-
<List.Item>
40-
<List.Content>
41-
<List.Header>Angular</List.Header>
42-
<List.Description>
43-
Front-end web application framework by Google
44-
</List.Description>
45-
</List.Content>
46-
</List.Item>
47-
<List.Item>
48-
<List.Content>
49-
<List.Header>React</List.Header>
50-
<List.Description>
51-
JavaScript library for building user interfaces from
52-
Facebook
53-
</List.Description>
54-
</List.Content>
55-
</List.Item>
56-
<List.Item>
57-
<List.Content>
58-
<List.Header>Vue</List.Header>
59-
<List.Description>
60-
Progressive JavaScript framework for building user
61-
interfaces by community
62-
</List.Description>
63-
</List.Content>
64-
</List.Item>
65-
</List>
66-
</Accordion.Content>
67-
<Accordion.Title>
68-
<Icon name="dropdown" />
69-
Backend
70-
</Accordion.Title>
71-
<Accordion.Content>
72-
<List selection verticalAlign="middle">
73-
<List.Item>
74-
<List.Content>
75-
<List.Header>Laravel</List.Header>
76-
<List.Description>PHP web framework</List.Description>
77-
</List.Content>
78-
</List.Item>
79-
</List>
80-
</Accordion.Content>
81-
</Accordion>
82-
</Accordion.Content>
83-
<Accordion.Title>
84-
<Icon name="dropdown" />
85-
Data Science
86-
</Accordion.Title>
87-
<Accordion.Content>
88-
<List selection verticalAlign="middle">
89-
<List.Item>
90-
<List.Content>
91-
<List.Header>Core Data Science</List.Header>
92-
<List.Description>
93-
A field which provides meaningful information from large
94-
amounts of data.
95-
</List.Description>
96-
</List.Content>
97-
</List.Item>
98-
</List>
99-
</Accordion.Content>
100-
<Accordion.Title>
101-
<Icon name="dropdown" />
102-
Distributed Computing
103-
</Accordion.Title>
104-
<Accordion.Content>
105-
<List selection verticalAlign="middle">
106-
<List.Item>
107-
<List.Content>
108-
<List.Header>Blockchain</List.Header>
109-
<List.Description>
110-
A distributed database technology
111-
</List.Description>
112-
</List.Content>
113-
</List.Item>
114-
</List>
115-
</Accordion.Content>
116-
</Accordion>
15+
<section>
16+
<Accordion styled>
17+
<Accordion.Title>
18+
<Icon name="dropdown" />
19+
Web Development
20+
</Accordion.Title>
21+
<Accordion.Content>
22+
<Accordion>
23+
<Accordion.Title>
24+
<Icon name="dropdown" />
25+
Frontend
26+
</Accordion.Title>
27+
<Accordion.Content>
28+
<List selection verticalAlign="middle">
29+
<List.Item>
30+
<List.Content>
31+
<List.Header>Basics</List.Header>
32+
<List.Description>
33+
Get started with Frontend development
34+
</List.Description>
35+
</List.Content>
36+
</List.Item>
37+
<List.Item>
38+
<List.Content>
39+
<List.Header>Intermediate</List.Header>
40+
<List.Description>
41+
Next level after basics course
42+
</List.Description>
43+
</List.Content>
44+
</List.Item>
45+
<List.Item>
46+
<List.Content>
47+
<List.Header>Angular</List.Header>
48+
<List.Description>
49+
Front-end web application framework by Google
50+
</List.Description>
51+
</List.Content>
52+
</List.Item>
53+
<List.Item>
54+
<List.Content>
55+
<List.Header>React</List.Header>
56+
<List.Description>
57+
JavaScript library for building user interfaces from
58+
Facebook
59+
</List.Description>
60+
</List.Content>
61+
</List.Item>
62+
<List.Item>
63+
<List.Content>
64+
<List.Header>Vue</List.Header>
65+
<List.Description>
66+
Progressive JavaScript framework for building user
67+
interfaces by community
68+
</List.Description>
69+
</List.Content>
70+
</List.Item>
71+
</List>
72+
</Accordion.Content>
73+
<Accordion.Title>
74+
<Icon name="dropdown" />
75+
Backend
76+
</Accordion.Title>
77+
<Accordion.Content>
78+
<List selection verticalAlign="middle">
79+
<List.Item>
80+
<List.Content>
81+
<List.Header>Laravel</List.Header>
82+
<List.Description>PHP web framework</List.Description>
83+
</List.Content>
84+
</List.Item>
85+
</List>
86+
</Accordion.Content>
87+
</Accordion>
88+
</Accordion.Content>
89+
<Accordion.Title>
90+
<Icon name="dropdown" />
91+
Data Science
92+
</Accordion.Title>
93+
<Accordion.Content>
94+
<List selection verticalAlign="middle">
95+
<List.Item>
96+
<List.Content>
97+
<List.Header>Core Data Science</List.Header>
98+
<List.Description>
99+
A field which provides meaningful information from large
100+
amounts of data.
101+
</List.Description>
102+
</List.Content>
103+
</List.Item>
104+
</List>
105+
</Accordion.Content>
106+
<Accordion.Title>
107+
<Icon name="dropdown" />
108+
Distributed Computing
109+
</Accordion.Title>
110+
<Accordion.Content>
111+
<List selection verticalAlign="middle">
112+
<List.Item>
113+
<List.Content>
114+
<List.Header>Blockchain</List.Header>
115+
<List.Description>
116+
A distributed database technology
117+
</List.Description>
118+
</List.Content>
119+
</List.Item>
120+
</List>
121+
</Accordion.Content>
122+
</Accordion>
123+
</section>
117124
</main>
118125
<style jsx>{`
119126
main {
127+
background-color: #ffffff;
128+
padding-top: 30px;
129+
padding-bottom: 30px;
130+
padding-left: 30px;
131+
padding-right: 30px;
120132
min-height: calc(100vh - 70px);
121-
background: #f4f7fb;
122-
color: #314159;
123133
display: flex;
124134
justify-content: center;
125135
align-items: center;
126136
flex-direction: column;
137+
margin: 0 auto;
138+
}
139+
section {
140+
margin: 50px 0;
127141
}
128142
`}</style>
129143
</div>

0 commit comments

Comments
 (0)