Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 0a43959

Browse files
add styles
1 parent 958c4af commit 0a43959

File tree

5 files changed

+130
-20
lines changed

5 files changed

+130
-20
lines changed

‎src/App.css

Lines changed: 96 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,114 @@
11
.App {
22
text-align: center;
33
}
4-
5-
.App-logo {
6-
animation: App-logo-spin infinite 20s linear;
7-
height: 80px;
4+
.logo-wrapper {
5+
display: flex;
6+
align-items: center;
7+
justify-content: center;
8+
margin-top: 20px;
9+
}
10+
.netlify-logo {
11+
height: 60px;
12+
}
13+
.express-logo {
14+
height: 50px;
15+
margin-top: 15px;
16+
}
17+
.and {
18+
font-size: 55px;
19+
margin: 0 15px;
20+
margin-left: 14px;
821
}
922

1023
.App-header {
11-
background-color: #1a94dc;
12-
height: 150px;
24+
height: 140px;
1325
padding: 20px;
1426
color: white;
27+
display: flex;
28+
flex-direction: column;
29+
align-items: center;
30+
justify-content: center;
31+
background: linear-gradient(230deg,#a24bcf,#4b79cf,#4bc5cf);
32+
background-size:300% 300%;
33+
animation: MoveBG 30s ease infinite;
1534
}
1635

1736
.App-title {
18-
font-size: 1.5em;
37+
font-size: 27px;
38+
font-weight: 400;
39+
font-style: normal;
1940
}
2041

2142
.App-intro {
2243
font-size: large;
2344
}
45+
.content {
46+
width: 600px;
47+
margin: auto;
48+
}
49+
.link {
50+
position: relative;
51+
height: 100%;
52+
border: 0px solid rgba(123, 123, 123, 0.498039);
53+
border-radius: 4px;
54+
color: #999999;
55+
line-height: 90px;
56+
padding-left: 32px;
57+
font-size: 24px;
58+
font-weight: 400;
59+
background-color: white;
60+
box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px 0px;
61+
margin-bottom: 15px;
62+
transition: all .6s cubic-bezier(0.165, 0.84, 0.44, 1);
63+
display: block;
64+
text-decoration: none;
65+
}
66+
.link:after {
67+
content: '';
68+
position: absolute;
69+
z-index: -1;
70+
width: 100%;
71+
height: 100%;
72+
opacity: 0;
73+
top: 0;
74+
left: 0;
75+
border-radius: 5px;
76+
box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 8px 0px;
77+
transition: all .6s cubic-bezier(0.165, 0.84, 0.44, 1);
78+
cursor: pointer;
79+
}
80+
.link:hover {
81+
transform: scale(1.02, 1.02);
82+
}
83+
.link:hover:after {
84+
opacity: 1;
85+
}
2486

25-
@keyframes App-logo-spin {
26-
from { transform: rotate(0deg); }
27-
to { transform: rotate(360deg); }
87+
@keyframes MoveBG {
88+
0%{
89+
background-position:0% 84%
90+
}
91+
50% {
92+
background-position:100% 16%
93+
}
94+
100% {
95+
background-position:0% 84%
96+
}
2897
}
98+
99+
100+
@media (max-width: 768px) {
101+
.App-header {
102+
height: auto;
103+
}
104+
.App-title {
105+
font-size: 22px;
106+
}
107+
.logo-wrapper {
108+
flex-direction: column;
109+
margin-top: 5px;
110+
}
111+
.and {
112+
font-size: 30px;
113+
}
114+
}

‎src/App.js

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,33 @@
11
import React, { Component } from 'react'
2-
import logo from './logo.svg'
2+
import netlifyLogo from './netlify-logo.svg'
3+
import expressLogo from './express.png'
34
import './App.css'
45

56
class App extends Component {
67
render() {
78
return (
89
<div className="App">
910
<header className="App-header">
10-
<img src={logo} className="App-logo" alt="logo" />
11-
<h1 className="App-title">Express Demo</h1>
11+
<div className="logo-wrapper">
12+
<img src={netlifyLogo} className="netlify-logo" alt="logo" />
13+
<span className='and'>+</span>
14+
<img src={expressLogo} className="express-logo" alt="logo" />
15+
16+
</div>
17+
<h1 className="App-title">How to use express.js with Netlify functions</h1>
1218
</header>
19+
1320
<p className="App-intro">
14-
This is using express!
21+
<h2>Choose an example</h2>
1522
</p>
1623

17-
<div>
18-
<a href="/.netlify/functions/aws-serverless-express">Example using `aws-serverless-express`</a>
19-
</div>
20-
<div>
21-
<a href="/.netlify/functions/serverless-http">Example using `serverless-http`</a>
24+
<div className='content'>
25+
<a className='link' href="/.netlify/functions/aws-serverless-express">
26+
Example using `aws-serverless-express`
27+
</a>
28+
<a className='link' href="/.netlify/functions/serverless-http">
29+
Example using `serverless-http`
30+
</a>
2231
</div>
2332
</div>
2433
)

‎src/express.png

8.2 KB
Loading[フレーム]

‎src/index.css

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
1+
@import url('https://fonts.googleapis.com/css?family=Roboto');
2+
3+
4+
15
body {
26
margin: 0;
37
padding: 0;
4-
font-family: sans-serif;
8+
font-family: 'Roboto', sans-serif;
9+
background: #eeeeee;
510
}

‎src/netlify-logo.svg

Lines changed: 10 additions & 0 deletions
Loading[フレーム]

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /