Browse Source

added animate.css

pull/323/head
GilbN 3 years ago
parent
commit
e394a6b8fe
  1. 3
      index.html
  2. 50
      resources/landing-page/css/custom.css

3
index.html

@ -37,6 +37,7 @@
<!-- Third party plugin CSS-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css"
rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<!-- Core theme CSS (includes Bootstrap)-->
<link href="resources/landing-page/css/styles.css?v=1.1" rel="stylesheet" />
<link rel="stylesheet" href="resources/landing-page/css/jquery-bg-slideshow.css">
@ -176,7 +177,7 @@
<div class="col-lg-10 align-self-end">
</div>
<div class="col-lg-8 align-self-baseline">
<button id="switch-theme" class="btn btn-primary btn-xl click-me-btn">Click Me!</button>
<button id="switch-theme" class="btn btn-primary btn-xl animate__animated animate__pulse animate__infinite">Click Me!</button>
</div>
</div>
</div>

50
resources/landing-page/css/custom.css

@ -307,23 +307,14 @@ p {
line-height: 1.2;
}
@keyframes glowing {
0% {
background-color: var(--button-color);
box-shadow: 0 0 5px rgba(var(--accent-color), 0.502);
}
50% {
background-color: var(--button-color-hover);
box-shadow: 0 0 10px rgba(var(--accent-color));
}
100% {
background-color: var(--button-color);
box-shadow: 0 0 5px rgba(var(--accent-color), 0.502)
.animate__animated.animate__pulse {
--animate-duration: 1.5s;
}
.animate__pulse:hover {
box-shadow: 0 0 10px rgba(var(--accent-color), 0.502);
}
.click-me-btn {
animation: glowing 1300ms infinite;
}
/* @media (min-width: 992px) {
.portfolio-box img {
object-fit: cover;
@ -381,37 +372,54 @@ p {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-moz-keyframes fadein { /* Firefox */
@-moz-keyframes fadein {
/* Firefox */
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-webkit-keyframes fadein { /* Safari and Chrome */
@-webkit-keyframes fadein {
/* Safari and Chrome */
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-o-keyframes fadein { /* Opera */
@-o-keyframes fadein {
/* Opera */
from {
opacity: 0;
}
to {
opacity: 1;
}
}
body {
animation: fadein 2s;
-moz-animation: fadein 2s; /* Firefox */
-webkit-animation: fadein 2s; /* Safari and Chrome */
-o-animation: fadein 2s; /* Opera */
-moz-animation: fadein 2s;
/* Firefox */
-webkit-animation: fadein 2s;
/* Safari and Chrome */
-o-animation: fadein 2s;
/* Opera */
}
Loading…
Cancel
Save