-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
95 lines (87 loc) · 4.67 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="description" content="🎡👆 GraphQL at your fingertips">
<meta property="og:title" content="Ocelot GraphQL">
<meta property="og:description" content="🎡👆 GraphQL at your fingertips">
<meta property="og:image" content="https://www.dropbox.com/s/uuzwqg94nmx4n3p/meta.png?raw=1">
<meta property="og:url" content="https://ocelotgraphql.com">
<title>Ocelot GraphQL</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
user-select: none;
-webkit-user-select: none;
}
.logo__wrapper {
width: 160px;
margin: 0 auto;
background: #292E32;
text-align: center;
padding: 48px 0;
}
.description {
font-family: 'Heebo', sans-serif;
font-weight: 700;
color: #292E32;
font-size: 70px;
margin: 80px auto;
text-align: center;
}
.social {
margin: 80px auto;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.social__headline {
font-family: 'Heebo', sans-serif;
font-weight: 300;
color: #292E32;
font-size: 24px;
}
.social__icons {
margin: 24px 0;
display: flex;
align-items: center;
}
.social__icons > span {
margin: 0 16px;
font-size: 24px;
font-family: 'Heebo', sans-serif;
}
@media (max-width: 580px) {
.description {
font-size: 40px;
}
}
</style>
</head>
<body>
<div class="logo__wrapper">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 93 93" width="93" height="93"><path fill="hsl(0, 0%, 100%)" d="M38.1 92.1c-1.8-.9-4.8-5.3-4.8-5.7 0-.3-1.1-1.4-2.4-2.3-1.3-1-3-2.7-3.7-3.7-.8-1.1-2.6-2.8-4-3.8-3.3-2-9.6-9.3-11.3-13-2.4-4.7-3-8.4-2.7-14l.4-5.2L7 41.6A18.4 18.4 0 0 1 2.3 29 14 14 0 0 0 1 22.5C0 20.2 0 19.3.1 16c.5-6.5 3.5-13 6.9-15 2-1.3 5.5-1.4 8-.4a88.2 88.2 0 0 1 18.8 17c0 .6.3.8 1.2.5 3.1-1 5.4-1.3 11.3-1.3 3.9 0 6.6 0 9.2.8 2.6.6 3 .6 3.4-.1a46 46 0 0 1 9.5-9.4c3.8-3.4 7.9-6.6 9-7.2C80.4-.3 83.9-.3 86 1c3.4 2 6.4 8.6 7 15.1a11 11 0 0 1-1 6.4 18 18 0 0 0-1.2 7.3c-.2 5.4-1 7.5-4.7 11.7L84 44l.3 5.4c.4 6-.3 9.6-2.7 14.3a47 47 0 0 1-11.2 13c-1.5.9-3.3 2.6-4.1 3.7-.8 1.2-2.5 2.9-3.8 3.8-1.2.9-2.2 1-2.2 2.2 0 1.1-3 4.4-4.7 5.4-1.8 1-3.5 1.2-8.8 1.2-5.4 0-7 0-8.7-.9z"/></svg>
<span></span>
</div>
<p class="description">🎡👆 GraphQL at your fingertips</p>
<div class="social">
<p class="social__headline">Follow <b>Ocelot</b> on</p>
<div class="social__icons">
<a href="https://github.com/ocelotgraphql">
<svg xmlns="http://www.w3.org/2000/svg" width="38.333" height="37.405"><path d="M 19.167 0 C 8.581 0 0 8.581 0 19.167 C 0 27.638 5.501 34.826 13.11 37.375 C 14.068 37.528 14.375 36.934 14.375 36.417 L 14.375 33.178 C 9.066 34.328 7.935 30.609 7.935 30.609 C 7.053 28.386 5.808 27.792 5.808 27.792 C 4.063 26.603 5.942 26.642 5.942 26.642 C 7.858 26.776 8.874 28.616 8.874 28.616 C 10.542 31.529 13.359 30.667 14.452 30.207 C 14.624 28.961 15.123 28.117 15.659 27.638 C 11.404 27.159 6.938 25.511 6.938 18.208 C 6.938 16.081 7.667 14.375 8.913 13.014 C 8.721 12.535 8.05 10.542 9.104 7.954 C 9.104 7.954 10.714 7.437 14.375 9.909 C 15.889 9.487 17.538 9.277 19.167 9.277 C 20.796 9.277 22.444 9.487 23.958 9.909 C 27.619 7.437 29.229 7.954 29.229 7.954 C 30.283 10.542 29.613 12.535 29.421 13.014 C 30.667 14.375 31.395 16.081 31.395 18.208 C 31.395 25.53 26.91 27.14 22.636 27.619 C 23.326 28.213 23.958 29.383 23.958 31.165 L 23.958 36.417 C 23.958 36.934 24.265 37.547 25.243 37.375 C 32.852 34.807 38.333 27.638 38.333 19.167 C 38.333 8.581 29.752 0 19.167 0 Z" fill="rgb(41,46,50)"></path></svg>
</a>
<span>and</span>
<a href="https://twitter.com/ocelotgraphql">
<svg xmlns="http://www.w3.org/2000/svg" width="40.097" height="32.583"><path d="M 40.097 3.833 C 38.621 4.504 37.03 4.945 35.382 5.156 C 37.068 4.14 38.372 2.53 38.985 0.594 C 37.394 1.552 35.631 2.223 33.772 2.607 C 32.258 0.958 30.13 0 27.715 0 C 23.211 0 19.531 3.68 19.531 8.222 C 19.531 8.874 19.608 9.507 19.742 10.101 C 12.918 9.756 6.842 6.478 2.798 1.514 C 2.089 2.722 1.687 4.14 1.687 5.635 C 1.687 8.491 3.124 11.021 5.347 12.458 C 3.987 12.458 2.722 12.075 1.61 11.5 L 1.61 11.557 C 1.61 15.544 4.447 18.879 8.203 19.627 C 6.997 19.957 5.731 20.003 4.504 19.761 C 5.572 23.111 8.655 25.408 12.171 25.473 C 9.264 27.773 5.662 29.017 1.955 28.999 C 1.303 28.999 0.652 28.961 0 28.884 C 3.642 31.223 7.973 32.583 12.612 32.583 C 27.715 32.583 36.014 20.048 36.014 9.181 C 36.014 8.817 36.014 8.472 35.995 8.107 C 37.605 6.957 38.985 5.501 40.097 3.833 Z" fill="rgb(41,46,50)"></path></svg>
</a>
</div>
</div>
</body>
</html>