Skip to content

Commit 2952645

Browse files
elangosundarelangosundar
committed
Changed the UI
1 parent d71f43f commit 2952645

File tree

4 files changed

+74
-100
lines changed

4 files changed

+74
-100
lines changed

‎src/App.js‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from "react";
22
import { Button } from 'reactstrap';
3+
import main from './main.css';
34
import Navigation from './Components/Navigation';
45
import Main from './Components/Main';
56

@@ -27,14 +28,11 @@ class App extends React.Component {
2728

2829
render() {
2930
return (
30-
<div>
31-
<div className="container">
31+
<div className="main">
32+
<div className="container main">
3233
<Navigation />
33-
<div class="row">
34-
<Main />
35-
</div>
34+
<Main />
3635
</div>
37-
3836
</div>
3937
);
4038
}

‎src/Components/Main.js‎

Lines changed: 57 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -4,100 +4,69 @@ import React from 'react';
44
class Main extends React.Component {
55
render() {
66
return (
7-
8-
9-
<div className="row">
10-
<div className="col-md-4">
11-
<div className="card mb-4 box-shadow">
12-
<div className="card-body">
13-
<p className="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
14-
<div className="d-flex justify-content-between align-items-center">
15-
<div className="btn-group">
16-
<button type="button" className="btn btn-sm btn-outline-secondary">View</button>
17-
<button type="button" className="btn btn-sm btn-outline-secondary">Edit</button>
18-
</div>
19-
<small className="text-muted">9 mins</small>
20-
</div>
21-
</div>
22-
</div>
23-
</div>
24-
25-
<div className="col-md-4">
26-
<div className="card mb-4 box-shadow">
27-
<div className="card-body">
28-
<p className="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
29-
<div className="d-flex justify-content-between align-items-center">
30-
<div className="btn-group">
31-
<button type="button" className="btn btn-sm btn-outline-secondary">View</button>
32-
<button type="button" className="btn btn-sm btn-outline-secondary">Edit</button>
7+
<div className="row">
8+
<div className="row container">
9+
<div className="jumbotron container jumbotron-bg">
10+
<div className="container">
11+
<div className="row">
12+
<div className="col-12 main-text">
13+
<h1>Debug APIs like a <span className="jumbotron__undie">human</span>, not a robot</h1>
14+
<p className="font-light text-xl no-margin-bottom">Finally, a REST client you'll</p>
15+
</div>
16+
</div>
3317
</div>
34-
<small className="text-muted">9 mins</small>
3518
</div>
3619
</div>
37-
</div>
38-
</div>
20+
<div className="row">
21+
<section className="no-margin padding-top-lg padding-bottom-lg">
22+
<div className="container center">
23+
<div className="row">
24+
<div className="col-12 main-text">
25+
<h2 className="text-xxl">Powerful HTTP and GraphQL tool belt</h2>
26+
<p className="text-lg"><strong>Free</strong> and <strong>open source</strong> on Mac, Windows, and Linux</p>
27+
</div>
28+
</div>
29+
<div className="row">
30+
<div className="col-4 padding-top">
31+
<div className="img--promo">
32+
<div className="gatsby-image-outer-wrapper" >
33+
<div className="gatsby-image-wrapper" >
34+
<div></div>
35+
</div>
36+
</div>
37+
</div>
38+
<h3>Create HTTP requests</h3>
39+
<p>Specify URL, payload, headers, and authorization all in one place. Then just hit send.</p>
40+
</div>
3941

40-
<div className="col-md-4">
41-
<div className="card mb-4 box-shadow">
42-
<div className="card-body">
43-
<p className="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
44-
<div className="d-flex justify-content-between align-items-center">
45-
<div className="btn-group">
46-
<button type="button" className="btn btn-sm btn-outline-secondary">View</button>
47-
<button type="button" className="btn btn-sm btn-outline-secondary">Edit</button>
42+
<div className="col-4 padding-top">
43+
<div className="img--promo">
44+
<div className="gatsby-image-outer-wrapper" >
45+
<div className="gatsby-image-wrapper" >
46+
<div></div>
47+
</div>
48+
</div>
49+
</div>
50+
<h3>View response details</h3>
51+
<p>Get all the details on every response. View status code, body, headers, cookies, and more!</p>
52+
</div>
53+
54+
<div className="col-4 padding-top">
55+
<div className="img--promo">
56+
<div className="gatsby-image-outer-wrapper" >
57+
<div className="gatsby-image-wrapper" >
58+
<div></div>
59+
</div>
60+
</div>
61+
</div>
62+
<h3>Organize everything</h3>
63+
<p>Create workspaces or folders, drag-and-drop requests, and easily import and export your data.</p>
64+
</div>
65+
</div>
4866
</div>
49-
<small className="text-muted">9 mins</small>
50-
</div>
51-
</div>
52-
</div>
53-
</div>
54-
55-
<div className="col-md-4">
56-
<div className="card mb-4 box-shadow">
57-
<div className="card-body">
58-
<p className="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
59-
<div className="d-flex justify-content-between align-items-center">
60-
<div className="btn-group">
61-
<button type="button" className="btn btn-sm btn-outline-secondary">View</button>
62-
<button type="button" className="btn btn-sm btn-outline-secondary">Edit</button>
63-
</div>
64-
<small className="text-muted">9 mins</small>
65-
</div>
67+
</section>
6668
</div>
67-
</div>
68-
</div>
69-
70-
<div className="col-md-4">
71-
<div className="card mb-4 box-shadow">
72-
<div className="card-body">
73-
<p className="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
74-
<div className="d-flex justify-content-between align-items-center">
75-
<div className="btn-group">
76-
<button type="button" className="btn btn-sm btn-outline-secondary">View</button>
77-
<button type="button" className="btn btn-sm btn-outline-secondary">Edit</button>
78-
</div>
79-
<small className="text-muted">9 mins</small>
80-
</div>
81-
</div>
82-
</div>
83-
</div>
84-
85-
<div className="col-md-4">
86-
<div className="card mb-4 box-shadow">
87-
<div className="card-body">
88-
<p className="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
89-
<div className="d-flex justify-content-between align-items-center">
90-
<div className="btn-group">
91-
<button type="button" className="btn btn-sm btn-outline-secondary">View</button>
92-
<button type="button" className="btn btn-sm btn-outline-secondary">Edit</button>
93-
</div>
94-
<small className="text-muted">9 mins</small>
95-
</div>
96-
</div>
97-
</div>
98-
</div>
99-
</div>
100-
69+
</div>
10170
)
10271
}
10372
}

‎src/Components/Navigation.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import React from 'react';
44
class Navigation extends React.Component {
55
render() {
66
return (
7-
<nav className="navbar navbar-expand-lg navbar-light bg-light">
7+
<nav className="navbar navbar-expand-lg navbar-light">
88
<a className="navbar-brand" href="/">Navbar</a>
99
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
1010
<span className="navbar-toggler-icon"></span>

‎src/main.css‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,16 @@ body {
22
line-height: 2;
33
}
44

5+
.main {
6+
background-color: #6e60cc !important;
7+
}
8+
9+
.jumbotron-bg {
10+
background-color: #6e60cc !important;
11+
}
512

6-
.materialize-red.lighten-5 {
7-
background-color: #fdeaeb !important; }
8-
9-
.materialize-red-text.text-lighten-5 {
10-
color: #fdeaeb !important; }
13+
.main-text{
14+
text-align: center;
15+
color: white;
16+
font-size: 15px;
17+
}

0 commit comments

Comments
 (0)