Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!doctype html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans" />
- <style>
- .barrita{
- background-color: #eeeeee;
- height: 25px;
- text-align: right;
- width: 100%;
- position: absolute;
- top:0px;
- left:0px;
- z-index: 99999999999;
- }
- .barrita a{
- font-family: 'Open Sans';
- font-size: 13px;
- padding: 5px;
- text-decoration: none;
- color: #000;
- }
- .fondo{
- position: absolute;
- background-color: #000;
- top: 0px;
- left: 0px;
- width:100%;
- height:100%;
- opacity: 0.5;
- filter: alpha(opacity=50);
- }
- .alerta{
- font-family: 'Open Sans';
- z-index: 99999999999;
- }
- /* Android */
- .clase0 {
- border-radius: 3px;
- background: #eeeeee;
- width: 90%;
- margin: auto;
- position: absolute;
- left: 0;
- right: 0;
- top: 30%;
- border: 1px solid #fff;
- }
- .clase0 img{
- width: 30px;
- height: 30px;
- border-radius: 5px;
- margin: 4px 0px 0px 5%;
- float: left;
- }
- .clase0 header{
- font-weight: bold;
- color: #3c3c3c;
- padding: 10px 0px 0px 5%;
- }
- .clase0 article{
- font-weight: 500;
- margin: 4px 5% 0px 5%;
- font-size: 14px;
- color: #3c3c3c;
- }
- .clase0 footer{
- float: left;
- width: 100%;
- text-align: right;
- margin-bottom: 10px;
- margin-left: -10px;
- }
- .clase0 footer .boton{
- font-size: 14px;
- color: #009688;
- font-weight: bold;
- margin: 2%;
- }
- .clase0 .nombreAPP{
- font-size: 14px;
- float: left;
- font-weight: bold;
- color: #3c3c3c;
- margin: 10px 0px 0px 1%;
- padding: 0px;
- }
- @media only screen and (min-width: 768px) {
- .clase0 footer{
- margin-bottom: 10px;
- margin-left: 0px;
- }
- }
- /* iOS */
- .clase1 {
- border-radius: 8px;
- background: #e6e6e6;
- width: 90%;
- margin: auto;
- position: absolute;
- left: 0;
- right: 0;
- top: 30%;
- border: 1px solid #fff;
- }
- .clase1 img{
- width: 30px;
- height: 30px;
- border-radius: 5px;
- margin: 4px 0px 8px 5%;
- vertical-align:middle;
- }
- .clase1 header{
- font-weight: bold;
- color: #4f4f4f;
- width: 100%;
- text-align: center;
- padding-top: 10px;
- }
- .clase1 article{
- width: 100%;
- text-align: center;
- font-size: 14px;
- color: #3c3c3c;
- }
- .clase1 footer{
- margin-bottom: 10px;
- width: 100%;
- text-align: center;
- border-top: solid 1px #dcdcdc;
- }
- .clase1 footer .boton{
- font-size: 14px;
- color: #6dacf3;
- font-weight: bold;
- padding: 15px;
- }
- .clase1 .nombreAPP{
- font-size: 14px;
- font-weight: bold;
- color: #3c3c3c;
- }
- @media only screen and (min-width: 768px) {
- .clase1 footer{
- margin-bottom: 10px;
- margin-left: 0px;
- }
- }
- </style>
- </head>
- <body>
- test test test test test test test test test
- <div class="barrita"><a href="javascript:void(0);" onclick="CerrarX();">x</a></div>
- <div class="fondo"></div>
- <div class="alerta">
- <div class="clase0">
- <header>Alerta</header>
- <article>Para ver el contenido es necesario instalar esta aplicacion</article> <img src="http://icons.iconarchive.com/icons/custom-icon-design/flatastic-9/64/Stop-red-icon.png"> <span class="nombreAPP">OLX</span>
- <footer><span class="boton">OK</span></footer>
- </div>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement