× İletişim Formu AMP HTML Modal Bildirim Kutusu Arlina Design 8/10/2017 Etiketler : AMP AMP Modal Arlina Design <!doctype html> <html ⚡> <head> <meta charset="utf-8"> <script async src="https://cdn.ampproject.org/v0.js"></script> <script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script> <link rel="canonical" href="https://ampbyexample.com/components/amp-lightbox/"> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript> <style amp-custom='amp-custom'> @font-face{font-family:'Roboto';font-style:normal;font-weight:400;src:local('Roboto'),local('Roboto-Regular'),url(https://fonts.gstatic.com/s/roboto/v16/CWB0XYA8bzo0kSThX0UTuA.woff2) format('woff2'),url(https://fonts.gstatic.com/s/roboto/v16/2UX7WLTfW3W8TclTUvlFyQ.woff) format('woff'),url(https://fonts.gstatic.com/s/roboto/v16/QHD8zigcbDB8aPfIoaupKOvvDin1pK8aKteLpeZ5c0A.ttf) format('truetype')} @font-face{font-family:'Roboto';font-style:normal;font-weight:500;src:local('Roboto Medium'),local('Roboto-Medium'),url(https://fonts.gstatic.com/s/roboto/v16/RxZJdnzeo3R5zSexge8UUVtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'),url(https://fonts.gstatic.com/s/roboto/v16/RxZJdnzeo3R5zSexge8UUT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff'),url(https://fonts.gstatic.com/s/roboto/v16/RxZJdnzeo3R5zSexge8UUSZ2oysoEQEeKwjgmXLRnTc.ttf) format('truetype')} *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box} #modalbox{z-index:10000} .modalbox{display:flex;align-items:center;justify-content:center;z-index:1;background:rgba(0,0,0,0.5);width:100%;height:100%;position:fixed;} .modal_box{margin-left:-25%;z-index:99;border-radius:4px;box-shadow:0 9px 46px 8px rgba(0,0,0,.14),0 11px 15px -7px rgba(0,0,0,.12),0 24px 38px 3px rgba(0,0,0,.2);z-index:2;background:#fff;color:#555;font-family:Roboto,sans-serif;position:absolute;padding:25px;top:15%;transition:all .3s ease-in-out;width:50%;left:50%;} .modal_box p{font-weight:400;line-height:1.3;margin:0;padding:0;font-size:14px;} .modal_box h4{margin:0 0 10px;line-height:1;color:#333;font-size:18px;font-weight:500;} hr{height:0;border:0;border-top:1px solid #eee;} .modalbox .close_modalbox{line-height:20px;text-align:center;padding:0;color:#555;font-size:30px;position:absolute;top:23px;background:0 0;border:none;right:23px;cursor:pointer;width:20px;height:20px;} .modalbox .close_modalbox:focus,.modalbox .done_modalbox:focus{outline:none} .modalbox .done_modalbox{padding:10px 13px;border-radius:3px;box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);background:#009688;color:#fff;border:none;margin-top:15px;display:inline-block;float:right;font-family:Roboto,sans-serif;font-size:14px;font-weight:500;text-transform:uppercase;cursor:pointer} .modalbox .close_modalbox:hover{color:#C51162} .modalbox .done_modalbox:hover{background:#008688} .slideInDown{-webkit-animation-name:slideInDown;animation-name:slideInDown;-webkit-animation-duration:.4s;animation-duration:.4s;-webkit-animation-fill-mode:both;animation-fill-mode:both} @-webkit-keyframes slideInDown{0%{-webkit-transform:translateY(-100%);transform:translateY(-100%);visibility:visible}100%{-webkit-transform:translateY(0);transform:translateY(0)}} @keyframes slideInDown{0%{-webkit-transform:translateY(-100%);transform:translateY(-100%);visibility:visible}100%{-webkit-transform:translateY(0);transform:translateY(0)}} </style> </head> <body> <button on="tap:modalbox" role="button" tabindex="0"> Bildirim Kutusu </button> <amp-lightbox id="modalbox" layout="nodisplay"> <div class="modalbox"> <div class="modal_box slideInDown"> <button class='close_modalbox' on='tap:modalbox.close' role='button' tabindex='0' title='Close'>×</button> <h4>Bildirim</h4> <hr/> <p> Blogger Eklentileri, özel yeni nesil eklentileri, temaları, CSS, CSS3, HTML, HTML5 Javascript ve JQuery kodları ile blog sitelerinize farklı tasarımlar kazandırmayı amaçlayan, blogger ipuçları hakkında bilgiler paylaşan ve rehberlik yapan kişisel bir blog.<br/> <br> Daha iyi bloglar için faydalı bilgilerin yanı sıra blog sitelerine katkıda bulunmak temel amacımızdır. Teşekkürler. </p> <button class='done_modalbox' on='tap:modalbox.close' role='button' tabindex='0' title='Tamam'>Tamam</button> </div> </div> </amp-lightbox> </body> </html> YENİ YAYIN ÖNCEKİ YAYIN "AMP HTML Modal Bildirim Kutusu" 0 Yorum yapıldı. Yorum Gönder Sonraki Kayıt Ana Sayfa Kaydol: Kayıt Yorumları (Atom) ×
AMP HTML Modal Bildirim Kutusu Arlina Design 8/10/2017 Etiketler : AMP AMP Modal Arlina Design <!doctype html> <html ⚡> <head> <meta charset="utf-8"> <script async src="https://cdn.ampproject.org/v0.js"></script> <script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script> <link rel="canonical" href="https://ampbyexample.com/components/amp-lightbox/"> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript> <style amp-custom='amp-custom'> @font-face{font-family:'Roboto';font-style:normal;font-weight:400;src:local('Roboto'),local('Roboto-Regular'),url(https://fonts.gstatic.com/s/roboto/v16/CWB0XYA8bzo0kSThX0UTuA.woff2) format('woff2'),url(https://fonts.gstatic.com/s/roboto/v16/2UX7WLTfW3W8TclTUvlFyQ.woff) format('woff'),url(https://fonts.gstatic.com/s/roboto/v16/QHD8zigcbDB8aPfIoaupKOvvDin1pK8aKteLpeZ5c0A.ttf) format('truetype')} @font-face{font-family:'Roboto';font-style:normal;font-weight:500;src:local('Roboto Medium'),local('Roboto-Medium'),url(https://fonts.gstatic.com/s/roboto/v16/RxZJdnzeo3R5zSexge8UUVtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'),url(https://fonts.gstatic.com/s/roboto/v16/RxZJdnzeo3R5zSexge8UUT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff'),url(https://fonts.gstatic.com/s/roboto/v16/RxZJdnzeo3R5zSexge8UUSZ2oysoEQEeKwjgmXLRnTc.ttf) format('truetype')} *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box} #modalbox{z-index:10000} .modalbox{display:flex;align-items:center;justify-content:center;z-index:1;background:rgba(0,0,0,0.5);width:100%;height:100%;position:fixed;} .modal_box{margin-left:-25%;z-index:99;border-radius:4px;box-shadow:0 9px 46px 8px rgba(0,0,0,.14),0 11px 15px -7px rgba(0,0,0,.12),0 24px 38px 3px rgba(0,0,0,.2);z-index:2;background:#fff;color:#555;font-family:Roboto,sans-serif;position:absolute;padding:25px;top:15%;transition:all .3s ease-in-out;width:50%;left:50%;} .modal_box p{font-weight:400;line-height:1.3;margin:0;padding:0;font-size:14px;} .modal_box h4{margin:0 0 10px;line-height:1;color:#333;font-size:18px;font-weight:500;} hr{height:0;border:0;border-top:1px solid #eee;} .modalbox .close_modalbox{line-height:20px;text-align:center;padding:0;color:#555;font-size:30px;position:absolute;top:23px;background:0 0;border:none;right:23px;cursor:pointer;width:20px;height:20px;} .modalbox .close_modalbox:focus,.modalbox .done_modalbox:focus{outline:none} .modalbox .done_modalbox{padding:10px 13px;border-radius:3px;box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);background:#009688;color:#fff;border:none;margin-top:15px;display:inline-block;float:right;font-family:Roboto,sans-serif;font-size:14px;font-weight:500;text-transform:uppercase;cursor:pointer} .modalbox .close_modalbox:hover{color:#C51162} .modalbox .done_modalbox:hover{background:#008688} .slideInDown{-webkit-animation-name:slideInDown;animation-name:slideInDown;-webkit-animation-duration:.4s;animation-duration:.4s;-webkit-animation-fill-mode:both;animation-fill-mode:both} @-webkit-keyframes slideInDown{0%{-webkit-transform:translateY(-100%);transform:translateY(-100%);visibility:visible}100%{-webkit-transform:translateY(0);transform:translateY(0)}} @keyframes slideInDown{0%{-webkit-transform:translateY(-100%);transform:translateY(-100%);visibility:visible}100%{-webkit-transform:translateY(0);transform:translateY(0)}} </style> </head> <body> <button on="tap:modalbox" role="button" tabindex="0"> Bildirim Kutusu </button> <amp-lightbox id="modalbox" layout="nodisplay"> <div class="modalbox"> <div class="modal_box slideInDown"> <button class='close_modalbox' on='tap:modalbox.close' role='button' tabindex='0' title='Close'>×</button> <h4>Bildirim</h4> <hr/> <p> Blogger Eklentileri, özel yeni nesil eklentileri, temaları, CSS, CSS3, HTML, HTML5 Javascript ve JQuery kodları ile blog sitelerinize farklı tasarımlar kazandırmayı amaçlayan, blogger ipuçları hakkında bilgiler paylaşan ve rehberlik yapan kişisel bir blog.<br/> <br> Daha iyi bloglar için faydalı bilgilerin yanı sıra blog sitelerine katkıda bulunmak temel amacımızdır. Teşekkürler. </p> <button class='done_modalbox' on='tap:modalbox.close' role='button' tabindex='0' title='Tamam'>Tamam</button> </div> </div> </amp-lightbox> </body> </html>
Yorum Gönder