Skip to content

Commit 0a43959

Browse files
DavidWellsDavidWells
committed
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)