Skip to content

Instantly share code, notes, and snippets.

@jcrashkit
Last active February 19, 2020 02:25
Show Gist options
  • Save jcrashkit/c0b9f1771f7f0b91b04c0c2a30c273d4 to your computer and use it in GitHub Desktop.
Save jcrashkit/c0b9f1771f7f0b91b04c0c2a30c273d4 to your computer and use it in GitHub Desktop.
misc css
@media (min-width: 992px) {
.animate {
animation-duration: 0.3s;
-webkit-animation-duration: 0.3s;
animation-fill-mode: both;
-webkit-animation-fill-mode: both;
}
}
@keyframes slideIn {
0% {
transform: translateY(1rem);
opacity: 0;
}
100% {
transform:translateY(0rem);
opacity: 1;
}
0% {
transform: translateY(1rem);
opacity: 0;
}
}
@-webkit-keyframes slideIn {
0% {
-webkit-transform: transform;
-webkit-opacity: 0;
}
100% {
-webkit-transform: translateY(0);
-webkit-opacity: 1;
}
0% {
-webkit-transform: translateY(1rem);
-webkit-opacity: 0;
}
}
.slideIn {
-webkit-animation-name: slideIn;
animation-name: slideIn;
}
<meta property="og:title" content="" />
<meta property="og:description" content="" />
<meta property="og:image" content="" />
<meta property="og:url" content="" />
<meta name="twitter:card" content="" />
<!-- Non-Essential, But Recommended -->
<meta property="og:site_name" content="On-One" />
<meta name="twitter:image:alt" content="Alt text for image" />
<!-- Non-Essential, But Required for Analytics -->
<meta property="fb:app_id" content="your_app_id" />
<meta name="twitter:site" content="@website-username" />
body {
margin: 0 auto;
max-width: 56em;
padding: 1em 0;
}
.grid {
/* Grid Fallback */
display: flex;
flex-wrap: wrap;
/* Supports Grid */
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-auto-rows: minmax(150px, auto);
grid-gap: 1em;
}
.module {
/* Demo-Specific Styles */
background: #eaeaea;
display: flex;
align-items: center;
justify-content: center;
height: 200px;
/* Flex Fallback */
margin-left: 5px;
margin-right: 5px;
flex: 1 1 200px;
}
/* If Grid is supported, remove the margin we set for the fallback */
@supports (display: grid) {
.module {
margin: 0;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta property="og:title" content="" />
<meta property="og:description" content="" />
<meta property="og:image" content="" />
<meta property="og:url" content="" />
<meta name="twitter:card" content="" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />
<link rel="stylesheet" href="assets/css/style.css">
<script src="assets/js/main.js"></script>
<title>
</title>
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/sw.js').then(function(registration) {
// Registration was successful
console.log('ServiceWorker registration successful with scope: ', registration.scope);
}, function(err) {
// registration failed :(
console.log('ServiceWorker registration failed: ', err);
});
});
}
</script>
</head>
<body>
<script src="https://www.gstatic.com/firebasejs/7.8.2/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.8.2/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.8.2/firebase-firestore.js"></script>
/* <script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "",
authDomain: "",
databaseURL: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: "",
measurementId: ""
};*/
firebase.initializeApp(firebaseConfig);
firebase.analytics();
firebase.firestore();
/* let db = firebase.firestore(); */
</script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
</body>
</html>
@font-face {
font-family: Jhiaxus;
src: url("Jhiaxus.eot"); /* IE9 Compat Modes */
src: url("Jhiaxus.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
url("Jhiaxus.woff") format("woff"), /* Modern Browsers */
url("Jhiaxus.ttf") format("truetype"), /* Safari, Android, iOS */
url("Jhiaxus.svg#svgJhiaxus") format("svg"); /* Legacy iOS */
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment