Created
January 14, 2018 15:47
-
-
Save flourigh/1ff4e6e4a7f4e624571ffabe39097438 to your computer and use it in GitHub Desktop.
DkTeclive
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset='utf-8' /> | |
| <title>DkTeclive</title> | |
| <meta name='description' content='Desenvolvedor Web com diploma na instituição Estácio de Sá focado em linguagem BackEnd e admirado por um FrontEnd com design limpo e agradável.' /> | |
| <base href='https://dkteclive.github.io' /> | |
| <link rel='canonical' href='https://dkteclive.github.io' /> | |
| <link rel='icon' href='https://dkteclive.github.io/favicon.ico' /> | |
| <meta name='viewport' content='width=device-width, initial-scale=1, user-scalable=no' /> | |
| <script src="https://dkteclive.github.io/jquery.js"></script> | |
| <style> | |
| * { padding: 0; margin: 0; text-decoration: none; outline: none; border: none; resize: none; } | |
| body { background: #f5f5f5; overflow: hidden; } | |
| .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; margin: auto; position: relative; top: 25%; } | |
| section.banner img.logotipo { box-shadow: 0px 0px 17px -3px #111111; border-radius: 50%; width: 15vw; min-width: 64px; max-width: 165px; left: 60px; position: relative; background: #f5f5f5; } | |
| section.banner span.logotipo { text-shadow: 0px 0px 7px #111111; color: #f5f5f5; font-size: 15vw; font-family: segoe ui; position: relative; top: -30px; font-weight: 100; } | |
| @media screen and (min-width: 1060px) { | |
| section.banner span.logotipo { font-size: 158px; } } | |
| section.midlebottom { width: 100vw; height: calc(100vh - 90vh); position: absolute; top: 90vh; 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: 90vw; height: 95vh; left: 5vw; background: #f5f5f5; border-radius: 15px 15px 0px 0px; top: 5vh; } | |
| section.container.hidden { top: 100vh; } | |
| section.container div.close { position: absolute; right: 10px; top: 10px; font-family: segoe ui; 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' src='https://dkteclive.github.io/favicon.ico' /> | |
| <span class='logotipo'>DkTeclive</span> | |
| </div> | |
| </section> | |
| <section class='midlebottom transition_background'> | |
| <div class='list'> | |
| <div class='iten 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 class='iten second transition_height cursor_pointer'> | |
| <svg class='facebook' viewBox='-1.4 -1.4 26.667 26.667'><defs><linearGradient id='gradient_facebook'><stop offset='5%' stop-color='#4e69a2' /><stop offset='95%' stop-color='#3b5998' /></linearGradient></defs><path fill='url(#gradient_facebook)' d='M20,2H4C2.9,2,2,2.9,2,4v16c0,1.1,0.9,2,2,2h16c1.1,0,2-0.9,2-2V4C22,2.9,21.1,2,20,2z M18.4,7.4H17c-0.9,0-1,0.3-1,1l0,1.3 h2.1L18,12h-1.9v7h-3.2v-7h-1.2V9.6h1.2V8.1c0-2,0.8-3.1,3.1-3.1h2.4V7.4z'></path></svg> | |
| </div> | |
| <div class='iten third transition_height cursor_pointer'> | |
| <svg class='more' viewBox='0 0 24 24'><defs><linearGradient id='gradient_more'><stop offset='5%' stop-color='#34495e' /><stop offset='95%' stop-color='#2c3e50' /></linearGradient></defs><path fill='url(#gradient_more)' d="M 6 3 C 4.3 3 3 4.3 3 6 L 3 18 C 3 19.7 4.3 21 6 21 L 18 21 C 19.7 21 21 19.7 21 18 L 21 6 C 21 4.3 19.7 3 18 3 L 6 3 z M 6 5 L 18 5 C 18.6 5 19 5.4 19 6 L 19 18 C 19 18.6 18.6 19 18 19 L 6 19 C 5.4 19 5 18.6 5 18 L 5 6 C 5 5.4 5.4 5 6 5 z M 12.09375 9 L 6 13.3125 L 7.09375 15 L 12.09375 11.40625 L 17.09375 15 L 18.1875 13.3125 L 12.09375 9 z"></path></svg> | |
| </div> | |
| </div> | |
| </section> | |
| <section class='container hidden transition_top'> | |
| <div class='close cursor_pointer'> | |
| <span>X</span> | |
| </div> | |
| <a href="http://br.hostg.co/14233">WebHost</a> | |
| </section> | |
| <script> | |
| $('section.midlebottom > div.list div.iten svg.instagram').click(function() { | |
| window.open('https://www.instagram.com/dkteclive/', '_blank'); }); | |
| $('section.midlebottom > div.list div.iten svg.facebook').click(function() { | |
| window.open('https://www.facebook.com/dkteclive/', '_blank'); }); | |
| $('section.midlebottom > div.list div.iten').hover(function(handlerIn, handlerOut) { | |
| $('section.midlebottom').toggleClass('hidden'); }); | |
| $('section.midlebottom > div.list div.iten.third, section.container div.close').click(function() { | |
| $('section.container').toggleClass('hidden'); }); | |
| </script> | |
| <meta name="thirdparties"/> | |
| <!-- WhatsHelp.io widget --> | |
| <script type="text/javascript"> | |
| (function () { | |
| var options = { | |
| facebook: "900511406772557", // Facebook page ID | |
| whatsapp: "+5521986762331", // WhatsApp number | |
| email: "fye@live.dk", // Email | |
| sms: "+5521986762331", // Sms phone number | |
| call: "+5521986762331", // Call phone number | |
| company_logo_url: "//storage.whatshelp.io/widget/d2/d271/d2719fa164cdffd0426334cc5132be54/23316491_900515083438856_8013941661591170630_n.png", // URL of company logo (png, jpg, gif) | |
| greeting_message: "Desenvolvedor Web com diploma na instituição Estácio de Sá focado em linguagem BackEnd e admirado por um FrontEnd com design limpo e agradável.\nBusco aperfeiçoamento em Git para utilização comercial assim como criação de Containers e distribuição de conteúdo dinâmico e responsivo.\nBuscar o novo é um rumo que deve ser tomado.", // Text of greeting message | |
| call_to_action: "Buscar o novo é um rumo que deve ser tomado.", // Call to action | |
| button_color: "#932C8B", // Color of button | |
| position: "right", // Position may be 'right' or 'left' | |
| order: "facebook,whatsapp,sms,call,email" // Order of buttons | |
| }; | |
| var proto = document.location.protocol, host = "whatshelp.io", url = proto + "//static." + host; | |
| var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = url + '/widget-send-button/js/init.js'; | |
| s.onload = function () { WhWidgetSendButton.init(host, proto, options); }; | |
| var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x); | |
| })(); | |
| </script> | |
| <!-- /WhatsHelp.io widget --> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment