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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy