Sexy Version - iOS web app bookmark reminder bubble

Developer
Patrick Cox
Size
2,880 Kb
Views
44,528
  1. Sexy Version - iOS web app bookmark reminder bubble Previews
  2. Sexy Version - iOS web app bookmark reminder bubble HTML Codes
  3. Sexy Version - iOS web app bookmark reminder bubble CSS Codes
  4. Sexy Version - iOS web app bookmark reminder bubble JS Codes

How do I make an sexy version - ios web app bookmark reminder bubble?

Sexy version of http://codepen.io/pcridesagain/pen/htJag. Added iPad and iPhone positioning, full screen detection hide, and styled the bubble. . What is a sexy version - ios web app bookmark reminder bubble? How do you make a sexy version - ios web app bookmark reminder bubble? This script and codes were developed by Patrick Cox on 04 September 2022, Sunday.

Sexy Version - iOS web app bookmark reminder bubble Previews
IQ Test

Sexy Version - iOS web app bookmark reminder bubble - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Sexy Version - iOS web app bookmark reminder bubble</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="bubble"> <a class="bubble-close">x</a> <p>To install this web app, press arrow and select <strong>"Add to Home Screen"</strong></p>
</div>​
<!-- wanna the see the bubble again after you closed it? inspect/resources/localStorage/secure.codepen.io, delete the 'bubble' key and refresh --> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Sexy Version - iOS web app bookmark reminder bubble - Script Codes CSS Codes

/* reminder bubble styling */
body{ background: url('https://goo.gl/ko4fB') center top no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
}
.bubble{ background-color: #f8d97c; border: 3px solid #e8b929; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; color: #444; display: none; padding: 0px; position: fixed; text-align: center; z-index: 100; box-shadow: 0 0 18px rgba(0,0,0,0.6);
}
.bubble p { font: normal 18px Arial, Sans-serif; margin: 8px;
}
.bubble strong{ font-style: italic; font-weight: bold;
}
.bubble p, .bubble strong, .bubble span{ text-shadow: 0 1px 0 rgba(256,256,256,0.5);
}
.iphone{ bottom: 0; left: 51%; width: 240px; margin-bottom: 25px; margin-left: -125px;
}
.iphone:before,
.iphone:after { bottom: -16px; border: solid 20px transparent; border-bottom: 0; border-top-color: #f8d97c; content: "\0020"; display: block; height: 0; left: 42%; overflow: hidden; position: absolute; width: 0; z-index: 101;
}
.iphone:before { bottom: -20px; border-top-color: #e8b929; z-index: 99;
}
.ipad{ top: 22px; left: 67px; width: 440px;
}
.ipad p{ font-size: 20px;
}
.ipad:before,
.ipad:after { top: -16px; border: solid 20px transparent; border-top: 0; border-bottom-color: #f8d97c; content: "\0020"; display: block; height: 0; left: 16%; overflow: hidden; position: absolute; width: 0; z-index: 101;
}
.ipad:before { top: -20px; border-bottom-color: #e8b929; z-index: 99;
}
a.bubble-close{ background-color: #e8b929; border-radius: 80px; color: white; cursor: pointer; font: bold 20px Arial, Sans-serif; float: right; margin-right: -20px; margin-top: -15px; padding: 3px 9px;
}

Sexy Version - iOS web app bookmark reminder bubble - Script Codes JS Codes

//toggle these vars to test device positioning
var isIphone = false;
var isIpad = true;
//toggle this to simulate full screen mode or not
var isStandAlone = false;
$(document).ready(function() { showMeTheBubble();
});
function showMeTheBubble(){ if(!isStandAlone){ if(isIphone){ $('.bubble').addClass('iphone'); }else if(isIpad){ $('.bubble').addClass('ipad'); } if(!localStorage.bubble){ $('.bubble').show(); $('.bubble-close').click(function(){ $('.bubble').hide(); localStorage.setItem("bubble", true); }); } }
}
Sexy Version - iOS web app bookmark reminder bubble - Script Codes
Sexy Version - iOS web app bookmark reminder bubble - Script Codes
Home Page Home
Developer Patrick Cox
Username pcridesagain
Uploaded September 04, 2022
Rating 3
Size 2,880 Kb
Views 44,528
Do you need developer help for Sexy Version - iOS web app bookmark reminder bubble?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Patrick Cox (pcridesagain) Script Codes
Name
A Better Moustache
Vans Logo, single element, no fonts, no psuedos
A Pen by Patrick Cox
Responsive Content Experiment
A Pen by Patrick Cox
IOS web app bookmark reminder bubble
CSS Q-Bert
Single Element Pure CSS US Flag
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!