Initial commit
This commit is contained in:
177
try.html
Normal file
177
try.html
Normal file
@@ -0,0 +1,177 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
|
||||
|
||||
</head>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
/* CTA Background */
|
||||
|
||||
.bg-secn-prt {
|
||||
background: url("./wp-content/themes/evisa/assets/img/cta.png") center/cover no-repeat fixed;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Overlay */
|
||||
.cta__overlay {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(245, 130, 31, 0.8) 0%, /* #F5821F with 80% opacity */
|
||||
rgba(245, 130, 31, 0.6) 50%, /* mid fade */
|
||||
rgba(245, 130, 31, 0.4) 100% /* lighter at bottom */
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
/* Increased height */
|
||||
.cta__inner11 {
|
||||
padding: 120px 0; /* MORE HEIGHT */
|
||||
}
|
||||
|
||||
/* Text */
|
||||
.cta__title {
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.cta__text11 {
|
||||
font-size: 16px;
|
||||
color: #e0e0e0;
|
||||
max-width: 720px;
|
||||
}
|
||||
|
||||
/* Button group */
|
||||
.cta-btn-group {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
justify-content: flex-end;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* Base button */
|
||||
.cta-btn {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
padding: 18px 40px;
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
background: linear-gradient(135deg, #F5821F, #ff9b45);
|
||||
transition: transform 0.45s ease, color 0.3s ease;
|
||||
}
|
||||
|
||||
/* Liquid fill */
|
||||
.cta-btn::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: -30%;
|
||||
width: 140%;
|
||||
height: 140%;
|
||||
background: linear-gradient(135deg, #ff9b45, #F5821F);
|
||||
border-radius: 50% 50% 0 0;
|
||||
transform: translateX(-50%) scaleY(0);
|
||||
transform-origin: bottom;
|
||||
transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
|
||||
border-radius 0.9s ease;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* Hover */
|
||||
.cta-btn:hover::before {
|
||||
transform: translateX(-50%) scaleY(1);
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.cta-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* Secondary button */
|
||||
.cta-btn.outline {
|
||||
background: transparent;
|
||||
border: 2px solid #F5821F;
|
||||
}
|
||||
|
||||
.cta-btn.outline::before {
|
||||
|
||||
}
|
||||
@media (max-width: 575px) {
|
||||
.cta__inner {
|
||||
padding: 80px 0; /* slightly smaller on mobile */
|
||||
}
|
||||
|
||||
.cta__title {
|
||||
font-size: 24px;
|
||||
line-height: 1.3;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cta__text {
|
||||
font-size: 15px;
|
||||
text-align: center;
|
||||
margin: 0 auto 25px;
|
||||
}
|
||||
|
||||
.cta-btn-group {
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.cta-btn {
|
||||
width: 100%;
|
||||
max-width: 280px;
|
||||
padding: 16px 24px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
<body>
|
||||
<section class="cta__area bg-secn-prt">
|
||||
<div class="cta__overlay">
|
||||
<div class="container">
|
||||
<div class="cta__inner11">
|
||||
<div class="row align-items-center">
|
||||
|
||||
<div class="col-lg-6 col-md-12">
|
||||
<h3 class="cta__title">
|
||||
Still Unsure? Let’s Make It Easy for You!
|
||||
</h3>
|
||||
<p class="cta__text11">
|
||||
Choosing the right path can be overwhelming. Our experts are here to guide you
|
||||
and help you make confident decisions for your future.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6 col-md-12 mt-4 mt-lg-0 text-lg-end">
|
||||
<div class="cta-btn-group">
|
||||
<a href="#" class="btn cta-btn">
|
||||
Book Free Consultation
|
||||
</a>
|
||||
<a href="#" class="btn cta-btn outline">
|
||||
Talk to an Expert
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user