Skip to content

Commit

Permalink
Add more decorative elements
Browse files Browse the repository at this point in the history 
Signed-off-by: mohin7 <csemohin@gmail.com>
  • Loading branch information
@mohin7
mohin7 committed Mar 19, 2024
1 parent f60320a commit e6e6a5c
Show file tree
Hide file tree
Showing 9 changed files with 174 additions and 59 deletions.
16 changes: 8 additions & 8 deletions layouts/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,15 +80,15 @@ <h1 data-aos="fade-up" data-aos-duration="1000"><span>Kubernetes Native</span><b
<!-- buttons -->
</div>
<div class="column is-6">
<div class="h-right-content" data-aos="zoom-in" data-aos-duration="900">
<div class="h-right-content">

<!-- intro video -->
<a class="intro-view-button demo-video" href="https://www.youtube.com/watch?v=8az5rYUxyGs">
<a class="intro-view-button demo-video" data-aos="zoom-in" data-aos-duration="900" href="https://www.youtube.com/watch?v=8az5rYUxyGs">
<div class="video-icon">
<img src="/assets/images/products/appscode/icons/global/play-icon.png" alt="play-icon">
</div>
<div class="content">
<p>Newly introduce our K8’s UI 🎉</p>
<p class="is-gradient">Newly introduce our K8’s UI</p>
<span class="is-underlined">See Demo</span>
</div>
</a>
Expand Down Expand Up @@ -343,7 +343,7 @@ <h4>Better Safe than Sorry</h4>
<div class="is-flex is-flex-wrap-wrap more-products" >
<!-- single features item start -->
<div class="single-feature card-view">
<div class="icon"><img src="https://img.icons8.com/external-smashingstocks-detailed-outline-smashing-stocks/100/00A651/external-monitoring-seo-and-web-smashingstocks-detailed-outline-smashing-stocks.png" alt="Kubernetes Made Easy"></div>
<div class="icon"><img src="https://img.icons8.com/external-smashingstocks-detailed-outline-smashing-stocks/100/5959CF/external-monitoring-seo-and-web-smashingstocks-detailed-outline-smashing-stocks.png" alt="Kubernetes Made Easy"></div>
<div class="content">
<h4>Monitoring & Alerting</h4>
<p>UI comes with native integration with Prometheus and Grafana. No need to switch between your control plane and your monitoring dashboards</p>
Expand All @@ -353,7 +353,7 @@ <h4>Monitoring & Alerting</h4>

<!-- single features item start -->
<div class="single-feature card-view">
<div class="icon"><img src="https://img.icons8.com/fluency-systems-regular/100/00A651/keyhole-shield.png" alt="Kubernetes Made Easy"></div>
<div class="icon"><img src="https://img.icons8.com/fluency-systems-regular/100/FFC629/keyhole-shield.png" alt="Kubernetes Made Easy"></div>
<div class="content">
<h4>Security</h4>
<p>With built-in support cert-manager, you can easily secure your applications with TLS. ByteBuilders also comes with built-in support for Kubevault, a Kubernetes operator for HashiCorp Vault. This lets you manage your access credentials securely</p>
Expand All @@ -372,7 +372,7 @@ <h4>Self Host or Managed</h4>

<!-- single features item start -->
<div class="single-feature card-view">
<div class="icon"><img src="https://img.icons8.com/external-outline-juicy-fish/100/00A651/external-flexible-arrows-outline-outline-juicy-fish-2.png" alt="Kubernetes Made Easy"></div>
<div class="icon"><img src="https://img.icons8.com/external-outline-juicy-fish/100/5100A6/external-flexible-arrows-outline-outline-juicy-fish-2.png" alt="Kubernetes Made Easy"></div>
<div class="content">
<h4>Flexible & Extensible</h4>
<p>It is flexible and extensible to adapt to your needs. You can override our default presets and add new presets to work better with your environment</p>
Expand Down Expand Up @@ -427,7 +427,7 @@ <h4>We are always there for you</h4>


<!--==================== Explore the mechanics start ====================-->
<section class="section-padding dark-bg" id="mechanics">
<section class="section-padding dark-bg mechanics-area" id="mechanics">
<div class="container">
<!-- section title -->
<div class="columns is-centered">
Expand Down Expand Up @@ -729,7 +729,7 @@ <h2>{{ $social_cards.users }}</h2>


<!-- press-area start -->
<section class="press-area section-padding">
<section class="press-area section-padding is-hidden">
<div class="container">
<div class="columns">
<div class="column is-8 is-offset-2 has-text-centered">
Expand Down
Binary file added static/assets/images/shape/decorative-el-large-2.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added static/assets/images/shape/decorative-el-large.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
26 changes: 13 additions & 13 deletions static/assets/sass/base/utilities/_typography.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,21 +31,21 @@ h6 {
font-style: normal;
font-weight: 500;
color: $ac-color-heading;
&.is-gradient {
background: linear-gradient(
-45deg,
$ac-primary,
#940148,
#4c346f,
#3334f5
);
background-size: 300% 300%;
animation: gradient 5s ease infinite;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}

.is-gradient {
background: linear-gradient(
-45deg,
$ac-primary,
#940148,
#4c346f,
$ac-primary
);
background-size: 300% 300%;
animation: gradient 5s ease infinite;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
h1 {
font-weight: 300;
font-size: 60px;
Expand Down
18 changes: 16 additions & 2 deletions static/assets/sass/components/_cta.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
.cta-area {
margin-bottom: 60px;
position: relative;
z-index: 1;

.cta-area-inner {
padding: 20px 50px;
Expand All @@ -10,11 +12,23 @@
align-items: center;
background-color: #F4FBF7;
border: 1px solid $ac-primary;
position: relative;
z-index: 1;
&:after {
position: absolute;
content: "";
left: 0;
top: 0;
width: 100%;
z-index: -1;
@extend .decorative-el-large;
}
h3 {
margin-bottom: 1rem;
text-wrap: balance;
}

p {
p{
text-wrap: balance;
}
}
}
Expand Down
16 changes: 15 additions & 1 deletion static/assets/sass/components/_footer.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,17 @@
.footer-area {
position: relative;
z-index: 1;
&:after {
position: absolute;
content: "";
left: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: -1;
@extend .decorative-el-large;
}
}
.single-footer-widget {
.footer-logo {
max-width: 160px;
Expand Down Expand Up @@ -113,7 +127,7 @@ p.spam-message {

.footer-top {
padding: 50px 0 30px 0;
border-bottom: 1px solid $ac-white-light;
border-bottom: 1px solid rgba(255,255,255, 0.1);
}

.footer-bottom {
Expand Down
102 changes: 79 additions & 23 deletions static/assets/sass/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18216,13 +18216,9 @@ h6 {
font-weight: 500;
color: #1c1c1c;
}
h1.is-gradient,
h2.is-gradient,
h3.is-gradient,
h4.is-gradient,
h5.is-gradient,
h6.is-gradient {
background: linear-gradient(-45deg, var(--ac-primary), #940148, #4c346f, #3334f5);

.is-gradient {
background: linear-gradient(-45deg, var(--ac-primary), #940148, #4c346f, var(--ac-primary));
background-size: 300% 300%;
animation: gradient 5s ease infinite;
-webkit-background-clip: text;
Expand Down Expand Up @@ -18346,11 +18342,11 @@ strong {
font-size: 18px;
}

.decorative-el, .others-products, .products-features .features-tabs, .ui-features-area, .products-area {
.decorative-el, .others-products, .products-features .features-tabs, .ui-features-area, .mechanics-area, .products-area, .hero-area-1 .h-right-content {
position: relative;
z-index: 1;
}
.decorative-el::after, .others-products::after, .products-features .features-tabs::after, .ui-features-area::after, .products-area::after {
.decorative-el::after, .others-products::after, .products-features .features-tabs::after, .ui-features-area::after, .mechanics-area::after, .products-area::after, .hero-area-1 .h-right-content::after {
position: absolute;
content: "";
left: -54px;
Expand All @@ -18362,7 +18358,7 @@ strong {
background-repeat: no-repeat;
}
@media screen and (max-width: 768px) {
.decorative-el::after, .others-products::after, .products-features .features-tabs::after, .ui-features-area::after, .products-area::after {
.decorative-el::after, .others-products::after, .products-features .features-tabs::after, .ui-features-area::after, .mechanics-area::after, .products-area::after, .hero-area-1 .h-right-content::after {
width: 120px;
height: 120px;
}
Expand Down Expand Up @@ -23123,6 +23119,8 @@ Responsive Classes

.cta-area {
margin-bottom: 60px;
position: relative;
z-index: 1;
}
.cta-area .cta-area-inner {
padding: 20px 50px;
Expand All @@ -23133,10 +23131,25 @@ Responsive Classes
align-items: center;
background-color: #F4FBF7;
border: 1px solid var(--ac-primary);
position: relative;
z-index: 1;
}
.cta-area .cta-area-inner:after {
position: absolute;
content: "";
left: 0;
top: 0;
width: 100%;
z-index: -1;
}
.cta-area .cta-area-inner h3 {
margin-bottom: 1rem;
text-wrap: balance;
}
.cta-area .cta-area-inner p {
text-wrap: balance;
}

/****************************************
Responsive Classes
*****************************************/
Expand Down Expand Up @@ -23525,6 +23538,20 @@ video {
opacity: 1;
}

.footer-area {
position: relative;
z-index: 1;
}
.footer-area:after {
position: absolute;
content: "";
left: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: -1;
}

.single-footer-widget .footer-logo {
max-width: 160px;
}
Expand Down Expand Up @@ -23623,7 +23650,7 @@ p.spam-message {

.footer-top {
padding: 50px 0 30px 0;
border-bottom: 1px solid #e7e7e7;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom {
Expand Down Expand Up @@ -25128,15 +25155,22 @@ Responsive Classes
}
.hero-area-1 .h-right-content {
margin-right: -84px;
opacity: 0;
visibility: hidden;
transform: scale(0);
transition: 0.5s ease-in-out;
position: relative;
z-index: 1;
}
.hero-area-1 .h-right-content.is-visible {
opacity: 1;
visibility: visible;
transform: scale(1);
.hero-area-1 .h-right-content::after {
transform: scale(3) rotate(90deg);
left: auto;
right: 200px;
top: 0;
bottom: auto;
opacity: 0.5;
}
@media screen and (max-width: 1023px) {
.hero-area-1 .h-right-content::after {
transform: scale(1.5) rotate(90deg);
right: 0;
}
}

.news-message {
Expand Down Expand Up @@ -25228,6 +25262,20 @@ Responsive Classes
border: 1px solid #e7e7e7;
padding: 16px;
border-radius: 4px;
background-color: #FBFBFE;
}
.single-feature.card-view:nth-child(2) {
background-color: #FEFDFA;
}
.single-feature.card-view:nth-child(3) {
background-color: #FAFEFC;
}
.single-feature.card-view:nth-child(4) {
background-color: #FCFAFF;
}
.single-feature.card-view .icon {
border: 1px solid transparent;
background-color: #ffffff;
}
.single-feature.card-view .content {
width: 100%;
Expand Down Expand Up @@ -25313,6 +25361,11 @@ Responsive Classes
background-repeat: no-repeat;
}

.mechanics-area {
position: relative;
z-index: 1;
}

.dark-bg {
background-color: #000A05;
}
Expand Down Expand Up @@ -25342,7 +25395,7 @@ Responsive Classes
opacity: 0.9;
}
.dark-bg .footer-top {
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.dark-bg .footer-inline-link, .dark-bg .subscription-form label, .dark-bg .all-contact-info li a, .dark-bg p.spam-message {
color: #ADB2B0;
Expand All @@ -25355,6 +25408,12 @@ Responsive Classes
color: var(--ac-primary);
}

.decorative-el-large, .intro-kubedb-ui:after, .cta-area .cta-area-inner:after, .footer-area:after {
background-image: url("../images/shape/decorative-el-large-2.png");
background-size: cover;
background-position: center;
}

.intro-kubedb-ui {
padding: 60px 0;
position: relative;
Expand Down Expand Up @@ -26127,9 +26186,6 @@ Responsive Classes
.subscription-area .subscription-message {
padding: 0;
}
.social-connect-area {
padding: 50px 0 150px;
}
.social-connect-area h2 {
font-size: 28px;
letter-spacing: -0.3px;
Expand Down
2 changes: 1 addition & 1 deletion static/assets/sass/main.css.map
View file

Large diffs are not rendered by default.

Loading

0 comments on commit e6e6a5c

Please sign in to comment.