-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
177 lines (150 loc) · 14.9 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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
<!DOCTYPE html>
<html lang="pt-BR">
<meta charset="utf-8" />
<title>Roberto Monteiro</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!--base href="//flourigh.github.io/" target="_blank"/-->
<link rel="icon" href="./favicon.ico" />
<link rel="icon" type="image/x-icon" href="./favicon.ico" />
<link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
<meta name="keywords" content="Desenvolvimento, Aplicativos, Consultoria, Tecnologia, Web" />
<meta name="description" content="Desenvolvimento de Aplicações Web e Consultoria em tecnologia" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="application-name" content="Roberto Monteiro" />
<meta name="theme-color" content="#101010" />
<meta name="image" content="./static/manifest/screenshots.png" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta name="msapplication-navbutton-color" content="#101010" />
<meta name="msapplication-starturl" content="//flourigh.com/" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-title" content="Roberto Monteiro" />
<link rel="apple-touch-icon" href="./static/manifest/128x128.png" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<link rel="apple-touch-startup-image" href="./static/manifest/screenshots.png" />
<link rel="manifest" href="./manifest.json" />
<script async src="//cdn.jsdelivr.net/npm/[email protected]/pwacompat.min.js"
integrity="sha384-uONtBTCBzHKF84F6XvyC8S0gL8HTkAPeCyBNvfLfsqHh+Kd6s/kaS4BdmNQ5ktp1"
crossorigin="anonymous"></script>
<link rel="icon" type="image/png" href="./static/manifest/128x128.png" sizes="128x128" />
<meta itemprop="name" content="Roberto Monteiro" />
<meta itemprop="description" content="Desenvolvimento de Aplicações Web e Consultoria em tecnologia" />
<meta itemprop="image" content="./static/manifest/screenshots.png" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="Roberto Monteiro" />
<meta name="twitter:description" content="Desenvolvimento de Aplicações Web e Consultoria em tecnologia" />
<meta name="twitter:site" content="@flourigh" />
<meta name="twitter:creator" content="@flourigh" />
<meta name="twitter:image:src" content="./static/manifest/screenshots.png" />
<meta name="og:title" content="Roberto Monteiro" />
<meta name="og:description" content="Desenvolvimento de Aplicações Web e Consultoria em tecnologia" />
<meta name="og:image" content="./static/manifest/screenshots.png" />
<meta name="og:url" content="//flourigh.com" />
<meta name="og:site_name" content="Roberto Monteiro" />
<meta name="og:locale" content="pt_BR" />
<meta name="fb:admins" content="100001867472590" />
<meta name="fb:app_id" content="578406102338987" />
<meta name="og:type" content="website" />
<style>
* { padding: 0; margin: 0; text-decoration: none; outline: none; border: none; resize: none }
body { background: #f5f5f5; overflow: hidden; font-family: 'segoe ui', arial; }
.transition_height { transition: height 1s }
.transition_background { transition: background 1s }
.transition_top { transition: top 1s }
.cursor_pointer { cursor: pointer }
section.banner { width: 100vw; height: 100vh; position: relative; top: 0; left: 0; }
section.banner > div.mask { width: 90vw; max-width: 900px; min-width: 320px; margin: auto; position: relative; top: 25%; text-align: center }
section.banner img.logotipo { box-shadow: 0px 0px 17px -3px #111111; border-radius: 50%; width: 15vw; min-width: 64px; max-width: 165px; position: relative; background: #f5f5f5; margin: auto; display: block; top: -70px; padding: 15px }
section.banner span.logotipo { text-shadow: 0px 0px 7px #111111; color: #f5f5f5; font-size: 10vw; position: relative; top: -55px; font-weight: 100 }
@media screen and (min-width: 1060px) {
section.banner span.logotipo { font-size: 116px } }
section.midlebottom { width: 100vw; height: calc(100vh - 90vh); position: fixed; bottom: 0vh; background: #101010 }
section.midlebottom.hidden { background: rgba(255, 255, 255, 0) }
section.midlebottom > div.list { position: relative; width: 90vw; max-width: 900px; height: 10vh; margin: auto }
section.midlebottom > div.list div.iten { overflow: hidden; background: #f5f5f5; width: 30%; height: 7vh; position: absolute; bottom: 0px; border-radius: 15px 15px 0px 0px; box-shadow: 0px 0px 17px -3px #111111 }
section.midlebottom > div.list div.iten.second { left: calc(50% - 15%) }
section.midlebottom > div.list div.iten.third { right: 0px }
section.midlebottom > div.list div.iten:hover { height: 40vh }
section.container { position: absolute; width: calc(90vw - 20px); height: calc(95vh - 20px); left: 5vw; background: #2a2e2e; border-radius: 15px 15px 0px 0px; top: 5vh; padding: 10px; overflow-y: auto }
section.container.hidden { top: 100vh }
section.container div.close { position: absolute; right: 10px; top: 10px; font-size: 2em; color: #101010; background: #efecec; border-radius: 15px; padding: 5px 15px }
@-webkit-keyframes background_animation_element { 0% { background-position: 30% 0% } 50% { background-position: 70% 100% } 100% { background-position: 30% 0% } }
@-moz-keyframes background_animation_element { 0% { background-position: 30% 0% } 50% { background-position: 70% 100% } 100% { background-position: 30% 0% } }
@-o-keyframes background_animation_element { 0% { background-position: 30% 0% } 50% { background-position: 70% 100% } 100% { background-position: 30% 0% } }
@keyframes background_animation_element { 0% { background-position: 30% 0% } 50% { background-position: 70% 100% } 100% { background-position: 30% 0% } }
.background_animation_element { background: linear-gradient(130deg, #2ecc71, #e67e22, #f1c40f, #34495e, #9b59b6, #e74c3c, #3498db, #1abc9c, #e74c3c, #e67e22, #9b59b6, #f1c40f, #2ecc71, #1abc9c, #3498db, #34495e);
background-size: 10000vw 10000vh;
-webkit-animation: background_animation_element 60s cubic-bezier(0.43, 0.16, 0, 0.26) infinite;
-moz-animation: background_animation_element 60s cubic-bezier(0.43, 0.16, 0, 0.26) infinite;
-o-animation: background_animation_element 60s cubic-bezier(0.43, 0.16, 0, 0.26) infinite;
animation: background_animation_element 60s cubic-bezier(0.43, 0.16, 0, 0.26) infinite }
</style>
<section class="banner background_animation_element">
<div class="mask">
<img class="logotipo cursor_pointer" src="./static/manifest/128x128.png" />
<span class="logotipo">Roberto Monteiro</span>
</div>
</section>
<section class="midlebottom transition_background">
<div class="list">
<div class="iten transition_height cursor_pointer">
<svg class="whatsapp" viewBox="0 0 48 48">
<path style="fill:#FFFFFF;" d="M 4.867188 43.304688 L 7.5625 33.46875 C 5.898438 30.589844 5.027344 27.324219 5.027344 23.980469 C 5.03125 13.515625 13.546875 5 24.015625 5 C 29.09375 5.003906 33.859375 6.980469 37.445313 10.566406 C 41.027344 14.152344 43.003906 18.921875 43 23.992188 C 42.996094 34.460938 34.476563 42.972656 24.015625 42.972656 C 24.011719 42.972656 24.015625 42.972656 24.015625 42.972656 L 24.007813 42.972656 C 20.828125 42.972656 17.707031 42.175781 14.933594 40.664063 Z "></path>
<path style=" fill:#FFFFFF;" d="M 4.867188 43.804688 C 4.734375 43.804688 4.609375 43.75 4.511719 43.65625 C 4.386719 43.527344 4.339844 43.34375 4.386719 43.171875 L 7.023438 33.535156 C 5.390625 30.628906 4.527344 27.328125 4.527344 23.980469 C 4.53125 13.238281 13.273438 4.5 24.015625 4.5 C 29.222656 4.503906 34.117188 6.53125 37.796875 10.214844 C 41.476563 13.894531 43.503906 18.789063 43.5 23.992188 C 43.496094 34.734375 34.753906 43.472656 24.015625 43.472656 C 20.824219 43.472656 17.671875 42.6875 14.871094 41.195313 L 4.996094 43.785156 C 4.953125 43.796875 4.910156 43.804688 4.867188 43.804688 Z "></path>
<path style="fill:#f5f5f5;" d="M 24.015625 5 C 29.09375 5.003906 33.859375 6.980469 37.445313 10.566406 C 41.027344 14.152344 43.003906 18.921875 43 23.992188 C 42.996094 34.460938 34.476563 42.972656 24.015625 42.972656 L 24.007813 42.972656 C 20.828125 42.972656 17.707031 42.175781 14.933594 40.664063 L 4.867188 43.304688 L 7.5625 33.46875 C 5.898438 30.589844 5.027344 27.324219 5.027344 23.980469 C 5.03125 13.515625 13.546875 5 24.015625 5 M 24.015625 42.972656 L 24.015625 42.972656 M 24.015625 42.972656 L 24.015625 42.972656 M 24.015625 4 C 12.996094 4 4.03125 12.960938 4.027344 23.980469 C 4.027344 27.347656 4.875 30.664063 6.488281 33.601563 L 3.902344 43.039063 C 3.808594 43.386719 3.90625 43.753906 4.15625 44.007813 C 4.347656 44.199219 4.605469 44.304688 4.867188 44.304688 C 4.953125 44.304688 5.039063 44.292969 5.121094 44.269531 L 14.808594 41.730469 C 17.636719 43.199219 20.808594 43.972656 24.007813 43.976563 C 35.03125 43.976563 43.996094 35.011719 44 23.996094 C 44.003906 18.65625 41.925781 13.636719 38.152344 9.859375 C 34.378906 6.082031 29.355469 4.003906 24.015625 4 Z "></path>
<path style=" fill:#40C351;" d="M 35.175781 12.832031 C 32.195313 9.851563 28.234375 8.207031 24.019531 8.207031 C 15.316406 8.207031 8.234375 15.28125 8.230469 23.980469 C 8.230469 26.960938 9.066406 29.863281 10.644531 32.375 L 11.019531 32.972656 L 9.425781 38.792969 L 15.398438 37.226563 L 15.976563 37.570313 C 18.398438 39.007813 21.175781 39.769531 24.007813 39.769531 L 24.015625 39.769531 C 32.710938 39.769531 39.789063 32.691406 39.792969 23.992188 C 39.796875 19.777344 38.15625 15.8125 35.175781 12.832031 Z "></path>
<path style=" fill-rule:evenodd;fill:#FFFFFF;" d="M 19.269531 16.046875 C 18.914063 15.253906 18.539063 15.238281 18.199219 15.226563 C 17.921875 15.214844 17.605469 15.214844 17.289063 15.214844 C 16.976563 15.214844 16.460938 15.332031 16.027344 15.808594 C 15.589844 16.28125 14.363281 17.429688 14.363281 19.765625 C 14.363281 22.097656 16.066406 24.355469 16.300781 24.671875 C 16.539063 24.984375 19.585938 29.929688 24.40625 31.832031 C 28.414063 33.410156 29.230469 33.097656 30.097656 33.019531 C 30.96875 32.9375 32.90625 31.871094 33.300781 30.761719 C 33.695313 29.65625 33.695313 28.707031 33.578125 28.507813 C 33.460938 28.308594 33.144531 28.191406 32.667969 27.953125 C 32.195313 27.714844 29.863281 26.570313 29.425781 26.410156 C 28.992188 26.253906 28.675781 26.175781 28.359375 26.648438 C 28.042969 27.121094 27.132813 28.191406 26.855469 28.507813 C 26.578125 28.824219 26.304688 28.863281 25.828125 28.628906 C 25.355469 28.390625 23.828125 27.890625 22.015625 26.273438 C 20.605469 25.015625 19.652344 23.464844 19.375 22.988281 C 19.097656 22.515625 19.34375 22.257813 19.582031 22.019531 C 19.796875 21.808594 20.058594 21.464844 20.296875 21.1875 C 20.53125 20.910156 20.609375 20.714844 20.769531 20.398438 C 20.925781 20.082031 20.847656 19.804688 20.730469 19.566406 C 20.613281 19.328125 19.691406 16.984375 19.269531 16.046875 Z "></path>
</svg>
</div>
<div class="iten second transition_height cursor_pointer">
<svg class="twitter" viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
<path style="fill:#03A9F4;" d="M42,37c0,2.762-2.239,5-5,5H11c-2.762,0-5-2.238-5-5V11c0-2.762,2.238-5,5-5h26c2.761,0,5,2.238,5,5 V37z"></path>
<path style="fill:#FFFFFF;" d="M36,17.12c-0.882,0.391-1.999,0.758-3,0.88c1.018-0.604,2.633-1.862,3-3 c-0.951,0.559-2.671,1.156-3.793,1.372C31.311,15.422,30.033,15,28.617,15C25.897,15,24,17.305,24,20v2c-4,0-7.9-3.047-10.327-6 c-0.427,0.721-0.667,1.565-0.667,2.457c0,1.819,1.671,3.665,2.994,4.543c-0.807-0.025-2.335-0.641-3-1c0,0.016,0,0.036,0,0.057 c0,2.367,1.661,3.974,3.912,4.422C16.501,26.592,16,27,14.072,27c0.626,1.935,3.773,2.958,5.928,3c-1.686,1.307-4.692,2-7,2 c-0.399,0-0.615,0.022-1-0.023C14.178,33.357,17.22,34,20,34c9.057,0,14-6.918,14-13.37c0-0.212-0.007-0.922-0.018-1.13 C34.95,18.818,35.342,18.104,36,17.12"></path>
</svg>
</div>
<div class="iten third transition_height cursor_pointer">
<svg class="instagram" viewBox="0 0 24 24">
<defs>
<radialGradient id="gradient_instagram" gradientUnits="userSpaceOnUse" cx="0" cy="20" r="20">
<stop offset="40%" stop-color="#f8b857" />
<stop offset="100%" stop-color="#d23593" />
</radialGradient>
</defs>
<path fill="url(#gradient_instagram)" d="M 8 3 C 5.239 3 3 5.239 3 8 L 3 16 C 3 18.761 5.239 21 8 21 L 16 21 C 18.761 21 21 18.761 21 16 L 21 8 C 21 5.239 18.761 3 16 3 L 8 3 z M 18 5 C 18.552 5 19 5.448 19 6 C 19 6.552 18.552 7 18 7 C 17.448 7 17 6.552 17 6 C 17 5.448 17.448 5 18 5 z M 12 7 C 14.761 7 17 9.239 17 12 C 17 14.761 14.761 17 12 17 C 9.239 17 7 14.761 7 12 C 7 9.239 9.239 7 12 7 z M 12 9 A 3 3 0 0 0 9 12 A 3 3 0 0 0 12 15 A 3 3 0 0 0 15 12 A 3 3 0 0 0 12 9 z"></path>
</svg>
</div>
</div>
</section>
<section class="container hidden transition_top">
<div class="close cursor_pointer">
<span>X</span>
</div>
<div id="disqus_thread"></div>
</section>
<script src="https://flourigh.github.io/scripts/jquery-3.2.1.slim.min.js"></script>
<script src="https://flourigh.github.io/scripts/disqus.js"></script>
<script src="https://flourigh.github.io/scripts/getWindowLocation.js"></script>
<script src="https://flourigh.github.io/scripts/routers.js"></script>
<script>
/* Buttons */
$("section.midlebottom > div.list div.iten svg.instagram").click(function() {
location.assign('https://instagram.com/flourigh') })
$("section.midlebottom > div.list div.iten svg.twitter").click(function() {
location.assign('https://twitter.com/flourigh') })
$("section.midlebottom > div.list div.iten svg.whatsapp").click(function() {
location.assign('https://wa.me/5521986762331') })
$("section.midlebottom > div.list div.iten").hover(function(handlerIn, handlerOut) {
$("section.midlebottom").toggleClass("hidden") })
$("section.banner img.logotipo, section.container div.close").click(function() {
$("section.container").toggleClass("hidden") })
/* Buttons */
/* Service Worker */
if (navigator.serviceWorker.controller) {} else {
navigator.serviceWorker.register('sw.js', {
scope: './'
}).then(function(reg) {
// console.log(reg.scope)
})
}
/* Service Worker */
</script>
</html>