1737 lines
47 KiB
HTML
1737 lines
47 KiB
HTML
|
SafeValue must use [property]=binding:
|
|||
|
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<title>home</title>
|
|||
|
|
<style>
|
|||
|
|
|
|||
|
|
body {
|
|||
|
|
font-family: sans-serif;
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
background: #f9f9f9;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tn1-blog-section {
|
|||
|
|
max-width: 960px;
|
|||
|
|
margin: auto;
|
|||
|
|
padding: 60px 20px;
|
|||
|
|
background: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tn1-subheading {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #666;
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tn1-main-heading {
|
|||
|
|
font-size: 28px;
|
|||
|
|
margin: 10px 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tn1-description {
|
|||
|
|
color: #888;
|
|||
|
|
margin-bottom: 40px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tn1-blog-grid {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 20px;
|
|||
|
|
justify-content: center;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tn1-blog-card {
|
|||
|
|
background: #f1f1f1;
|
|||
|
|
padding: 20px;
|
|||
|
|
max-width: 280px;
|
|||
|
|
flex: 1 1 250px;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
text-align: left;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tn1-placeholder {
|
|||
|
|
background: #ccc;
|
|||
|
|
height: 160px;
|
|||
|
|
border-radius: 6px;
|
|||
|
|
margin-bottom: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tn1-category {
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #999;
|
|||
|
|
text-transform: uppercase;
|
|||
|
|
margin: 8px 0 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tn1-title {
|
|||
|
|
font-size: 16px;
|
|||
|
|
margin: 0 0 10px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tn1-summary {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #555;
|
|||
|
|
margin-bottom: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tn1-meta {
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #777;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tn1-view-all-btn {
|
|||
|
|
margin-top: 40px;
|
|||
|
|
padding: 10px 20px;
|
|||
|
|
background: transparent;
|
|||
|
|
border: 1px solid #000;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body {
|
|||
|
|
font-family: sans-serif;
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
background: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.blog-2-section {
|
|||
|
|
max-width: 1200px;
|
|||
|
|
margin: auto;
|
|||
|
|
padding: 60px 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.blog-2-header {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
margin-bottom: 40px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.blog-2-subheading {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #666;
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.blog-2-main-heading {
|
|||
|
|
font-size: 28px;
|
|||
|
|
margin: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.blog-2-description {
|
|||
|
|
font-size: 16px;
|
|||
|
|
color: #888;
|
|||
|
|
margin-top: 10px;
|
|||
|
|
max-width: 500px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.blog-2-view-all {
|
|||
|
|
padding: 8px 16px;
|
|||
|
|
background: transparent;
|
|||
|
|
border: 1px solid #000;
|
|||
|
|
cursor: pointer;
|
|||
|
|
margin-top: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.blog-2-grid {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|||
|
|
gap: 50px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.blog-2-card {
|
|||
|
|
background: #fff;
|
|||
|
|
border: 1px solid #ddd;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.blog-2-placeholder {
|
|||
|
|
height: 160px;
|
|||
|
|
background: #ccc;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.blog-2-content {
|
|||
|
|
padding: 16px;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.blog-2-meta {
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #777;
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
display: flex;
|
|||
|
|
gap: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.blog-2-title {
|
|||
|
|
font-size: 18px;
|
|||
|
|
margin: 10px 0;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.blog-2-summary {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #555;
|
|||
|
|
margin-bottom: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.blog-2-read-more {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #000;
|
|||
|
|
text-decoration: none;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
.contact-1-wrapper {
|
|||
|
|
margin: 0;
|
|||
|
|
font-family: Arial, sans-serif;
|
|||
|
|
background: #f0efec;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.contact-1-section {
|
|||
|
|
background: #fff;
|
|||
|
|
max-width: 480px;
|
|||
|
|
margin: 60px auto;
|
|||
|
|
padding: 40px 30px;
|
|||
|
|
text-align: center;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.contact-1-tagline {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #777;
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.contact-1-heading {
|
|||
|
|
font-size: 24px;
|
|||
|
|
margin: 0 0 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.contact-1-description {
|
|||
|
|
color: #666;
|
|||
|
|
font-size: 14px;
|
|||
|
|
margin-bottom: 30px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.contact-1-form {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 16px;
|
|||
|
|
text-align: left;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.contact-1-label {
|
|||
|
|
font-size: 14px;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.contact-1-input,
|
|||
|
|
.contact-1-textarea {
|
|||
|
|
width: 100%;
|
|||
|
|
padding: 10px;
|
|||
|
|
border: 1px solid #ccc;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.contact-1-checkbox-row {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 8px;
|
|||
|
|
font-size: 13px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.contact-1-submit-btn {
|
|||
|
|
background: #000;
|
|||
|
|
color: #fff;
|
|||
|
|
padding: 10px 20px;
|
|||
|
|
border: none;
|
|||
|
|
font-weight: bold;
|
|||
|
|
cursor: pointer;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.newsletter-2-wrapper {
|
|||
|
|
font-family: sans-serif;
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
background: #f5f3f0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.newsletter-2-section {
|
|||
|
|
background: #fff;
|
|||
|
|
padding: 60px 40px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.newsletter-2-container {
|
|||
|
|
max-width: 1200px;
|
|||
|
|
margin: auto;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
gap: 40px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.newsletter-2-left {
|
|||
|
|
flex: 1;
|
|||
|
|
min-width: 300px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.newsletter-2-heading {
|
|||
|
|
font-size: 24px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.newsletter-2-description {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #666;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.newsletter-2-right {
|
|||
|
|
flex: 1;
|
|||
|
|
min-width: 280px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.newsletter-2-signup-form {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 10px;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.newsletter-2-email-input {
|
|||
|
|
flex: 1;
|
|||
|
|
padding: 10px;
|
|||
|
|
font-size: 14px;
|
|||
|
|
border: 1px solid #aaa;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.newsletter-2-submit-btn {
|
|||
|
|
padding: 10px 16px;
|
|||
|
|
background: #000;
|
|||
|
|
color: #fff;
|
|||
|
|
border: none;
|
|||
|
|
font-weight: bold;
|
|||
|
|
cursor: pointer;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.newsletter-2-disclaimer {
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #888;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.newsletter-2-disclaimer a {
|
|||
|
|
color: #000;
|
|||
|
|
text-decoration: underline;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cta-3-wrapper {
|
|||
|
|
font-family: sans-serif;
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
background: #f5f3f0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cta-3-section {
|
|||
|
|
background: #fff;
|
|||
|
|
padding: 80px 20px;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cta-3-heading {
|
|||
|
|
font-size: 28px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin-bottom: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cta-3-description {
|
|||
|
|
font-size: 16px;
|
|||
|
|
color: #666;
|
|||
|
|
max-width: 600px;
|
|||
|
|
margin: 0 auto 32px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cta-3-button-group {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
gap: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cta-3-btn {
|
|||
|
|
padding: 10px 24px;
|
|||
|
|
font-size: 14px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cta-3-solid {
|
|||
|
|
background-color: #000;
|
|||
|
|
color: #fff;
|
|||
|
|
border: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cta-3-outline {
|
|||
|
|
background-color: transparent;
|
|||
|
|
color: #000;
|
|||
|
|
border: 1px solid #000;
|
|||
|
|
}
|
|||
|
|
.faq-4-wrapper {
|
|||
|
|
margin: 0;
|
|||
|
|
font-family: sans-serif;
|
|||
|
|
background: #f5f5f5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.faq-4-section {
|
|||
|
|
background: #fff;
|
|||
|
|
padding: 60px 20px;
|
|||
|
|
max-width: 700px;
|
|||
|
|
margin: auto;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.faq-4-heading {
|
|||
|
|
font-size: 28px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin-bottom: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.faq-4-description {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #666;
|
|||
|
|
margin-bottom: 32px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.faq-4-list {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 12px;
|
|||
|
|
margin-bottom: 40px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.faq-4-question {
|
|||
|
|
width: 100%;
|
|||
|
|
padding: 14px 18px;
|
|||
|
|
font-size: 14px;
|
|||
|
|
text-align: left;
|
|||
|
|
background: #f1f1f1;
|
|||
|
|
border: none;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.faq-4-footer {
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.faq-4-footer-heading {
|
|||
|
|
font-size: 18px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.faq-4-footer-description {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #777;
|
|||
|
|
margin-bottom: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.faq-4-footer-btn {
|
|||
|
|
padding: 10px 20px;
|
|||
|
|
border: 1px solid #000;
|
|||
|
|
background: transparent;
|
|||
|
|
cursor: pointer;
|
|||
|
|
font-weight: bold;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
}
|
|||
|
|
.faq-5-wrapper {
|
|||
|
|
margin: 0;
|
|||
|
|
font-family: sans-serif;
|
|||
|
|
background: #f5f3f0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.faq-5-section {
|
|||
|
|
background: #fff;
|
|||
|
|
padding: 60px 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.faq-5-container {
|
|||
|
|
max-width: 1100px;
|
|||
|
|
margin: auto;
|
|||
|
|
display: flex;
|
|||
|
|
gap: 40px;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.faq-5-left {
|
|||
|
|
flex: 1;
|
|||
|
|
min-width: 280px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.faq-5-heading {
|
|||
|
|
font-size: 24px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin-bottom: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.faq-5-description {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #666;
|
|||
|
|
margin-bottom: 24px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.faq-5-contact-btn {
|
|||
|
|
padding: 10px 20px;
|
|||
|
|
background: transparent;
|
|||
|
|
border: 1px solid #000;
|
|||
|
|
font-weight: bold;
|
|||
|
|
cursor: pointer;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.faq-5-right {
|
|||
|
|
flex: 2;
|
|||
|
|
min-width: 400px;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.faq-5-item .faq-5-question {
|
|||
|
|
width: 100%;
|
|||
|
|
text-align: left;
|
|||
|
|
padding: 14px 18px;
|
|||
|
|
background: #f1f1f1;
|
|||
|
|
border: none;
|
|||
|
|
font-size: 14px;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
.faq-6-wrapper {
|
|||
|
|
margin: 0;
|
|||
|
|
font-family: sans-serif;
|
|||
|
|
background: #f5f5f5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.faq-6-block {
|
|||
|
|
max-width: 700px;
|
|||
|
|
margin: 60px auto;
|
|||
|
|
padding: 40px 20px;
|
|||
|
|
background: #fff;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.faq-6-tagline {
|
|||
|
|
font-size: 12px;
|
|||
|
|
letter-spacing: 1px;
|
|||
|
|
text-transform: uppercase;
|
|||
|
|
color: #999;
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.faq-6-heading {
|
|||
|
|
font-size: 22px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin-bottom: 24px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.faq-6-list {
|
|||
|
|
text-align: left;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.faq-6-item {
|
|||
|
|
border-top: 1px solid #ddd;
|
|||
|
|
padding: 16px 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.faq-6-question {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
font-weight: 500;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.faq-6-icon {
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.faq-6-answer {
|
|||
|
|
margin-top: 10px;
|
|||
|
|
color: #444;
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.faq-6-answer a {
|
|||
|
|
color: #000;
|
|||
|
|
text-decoration: underline;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.faq-6-footer {
|
|||
|
|
margin-top: 30px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.faq-6-view-more-btn {
|
|||
|
|
padding: 10px 24px;
|
|||
|
|
border: 1px solid #000;
|
|||
|
|
background: transparent;
|
|||
|
|
font-weight: bold;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
.faq-7-wrapper {
|
|||
|
|
font-family: sans-serif;
|
|||
|
|
margin: 0;
|
|||
|
|
background: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.faq-7-container {
|
|||
|
|
display: flex;
|
|||
|
|
padding: 60px 30px;
|
|||
|
|
gap: 60px;
|
|||
|
|
max-width: 1200px;
|
|||
|
|
margin: auto;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.faq-7-left {
|
|||
|
|
flex: 1;
|
|||
|
|
min-width: 260px;
|
|||
|
|
text-align: center;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.faq-7-support-label {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #888;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.faq-7-support-action {
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin: 10px 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.faq-7-chat-icon img {
|
|||
|
|
width: 40px;
|
|||
|
|
height: 40px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.faq-7-right {
|
|||
|
|
flex: 2;
|
|||
|
|
min-width: 400px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.faq-7-heading {
|
|||
|
|
font-size: 28px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin-bottom: 24px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.faq-7-search input {
|
|||
|
|
width: 100%;
|
|||
|
|
padding: 12px 16px;
|
|||
|
|
font-size: 14px;
|
|||
|
|
margin-bottom: 24px;
|
|||
|
|
border: 1px solid #ccc;
|
|||
|
|
border-radius: 6px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.faq-7-list {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.faq-7-item {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.faq-7-question {
|
|||
|
|
width: 100%;
|
|||
|
|
padding: 14px;
|
|||
|
|
text-align: left;
|
|||
|
|
font-size: 16px;
|
|||
|
|
border: none;
|
|||
|
|
background: #f9f9f9;
|
|||
|
|
border-radius: 6px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.faq-7-answer {
|
|||
|
|
padding: 12px 14px;
|
|||
|
|
font-size: 14px;
|
|||
|
|
background: #f0f0f0;
|
|||
|
|
margin-top: 8px;
|
|||
|
|
border-radius: 6px;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
.split-8-wrapper {
|
|||
|
|
margin: 0;
|
|||
|
|
font-family: sans-serif;
|
|||
|
|
background: #f5f3f0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.split-8-section {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
gap: 40px;
|
|||
|
|
padding: 60px 30px;
|
|||
|
|
max-width: 1200px;
|
|||
|
|
margin: auto;
|
|||
|
|
background: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.split-8-left {
|
|||
|
|
flex: 1;
|
|||
|
|
min-width: 280px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.split-8-tagline {
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #999;
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.split-8-heading {
|
|||
|
|
font-size: 28px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin-bottom: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.split-8-description {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #555;
|
|||
|
|
margin-bottom: 24px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.split-8-button-group {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 16px;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.split-8-btn {
|
|||
|
|
padding: 10px 20px;
|
|||
|
|
font-size: 14px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
cursor: pointer;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.split-8-outline {
|
|||
|
|
background: transparent;
|
|||
|
|
border: 1px solid #000;
|
|||
|
|
color: #000;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.split-8-arrow {
|
|||
|
|
background: transparent;
|
|||
|
|
border: none;
|
|||
|
|
color: #000;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.split-8-right {
|
|||
|
|
flex: 1;
|
|||
|
|
min-width: 300px;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.split-8-placeholder {
|
|||
|
|
width: 100%;
|
|||
|
|
max-width: 400px;
|
|||
|
|
height: 300px;
|
|||
|
|
background: #ccc;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
}
|
|||
|
|
.hero-9-wrapper {
|
|||
|
|
margin: 0;
|
|||
|
|
font-family: sans-serif;
|
|||
|
|
background: #f4f4f4;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero-9-section {
|
|||
|
|
text-align: center;
|
|||
|
|
padding: 60px 20px 40px;
|
|||
|
|
background: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero-9-tagline {
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #777;
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero-9-heading {
|
|||
|
|
font-size: 28px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin-bottom: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero-9-description {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #555;
|
|||
|
|
max-width: 600px;
|
|||
|
|
margin: 0 auto 24px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero-9-button-group {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
gap: 16px;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
margin-bottom: 40px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero-9-btn {
|
|||
|
|
padding: 10px 20px;
|
|||
|
|
font-size: 14px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
font-weight: bold;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero-9-outline {
|
|||
|
|
background: transparent;
|
|||
|
|
border: 1px solid #000;
|
|||
|
|
color: #000;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero-9-arrow {
|
|||
|
|
background: transparent;
|
|||
|
|
border: none;
|
|||
|
|
color: #000;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero-9-image-wrapper {
|
|||
|
|
max-width: 1000px;
|
|||
|
|
margin: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero-9-placeholder {
|
|||
|
|
height: 320px;
|
|||
|
|
background: #ccc;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
}
|
|||
|
|
.split-10-wrapper {
|
|||
|
|
margin: 0;
|
|||
|
|
font-family: sans-serif;
|
|||
|
|
background: #f5f3f0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.split-10-section {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
gap: 40px;
|
|||
|
|
padding: 60px 30px;
|
|||
|
|
max-width: 1200px;
|
|||
|
|
margin: auto;
|
|||
|
|
background: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.split-10-left {
|
|||
|
|
flex: 1;
|
|||
|
|
min-width: 300px;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.split-10-placeholder {
|
|||
|
|
width: 100%;
|
|||
|
|
max-width: 400px;
|
|||
|
|
height: 300px;
|
|||
|
|
background: #ccc;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.split-10-right {
|
|||
|
|
flex: 1;
|
|||
|
|
min-width: 280px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.split-10-tagline {
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #999;
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.split-10-heading {
|
|||
|
|
font-size: 28px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin-bottom: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.split-10-description {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #555;
|
|||
|
|
margin-bottom: 24px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.split-10-button-group {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 16px;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.split-10-btn {
|
|||
|
|
padding: 10px 20px;
|
|||
|
|
font-size: 14px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
cursor: pointer;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.split-10-outline {
|
|||
|
|
background: transparent;
|
|||
|
|
border: 1px solid #000;
|
|||
|
|
color: #000;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.split-10-arrow {
|
|||
|
|
background: transparent;
|
|||
|
|
border: none;
|
|||
|
|
color: #000;
|
|||
|
|
}
|
|||
|
|
.grid-11-wrapper {
|
|||
|
|
margin: 0;
|
|||
|
|
font-family: sans-serif;
|
|||
|
|
background: #f5f5f5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.grid-11-section {
|
|||
|
|
padding: 60px 20px;
|
|||
|
|
text-align: center;
|
|||
|
|
background: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.grid-11-tagline {
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #777;
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.grid-11-heading {
|
|||
|
|
font-size: 28px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin-bottom: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.grid-11-description {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #555;
|
|||
|
|
max-width: 700px;
|
|||
|
|
margin: 0 auto 40px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.grid-11-card-grid {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 24px;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
justify-content: center;
|
|||
|
|
margin-bottom: 40px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.grid-11-card {
|
|||
|
|
max-width: 300px;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.grid-11-placeholder {
|
|||
|
|
height: 180px;
|
|||
|
|
background: #ccc;
|
|||
|
|
border-radius: 6px;
|
|||
|
|
margin-bottom: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.grid-11-card-title {
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.grid-11-card-desc {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #666;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.grid-11-button-group {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 16px;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.grid-11-btn {
|
|||
|
|
padding: 10px 20px;
|
|||
|
|
font-size: 14px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
cursor: pointer;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.grid-11-outline {
|
|||
|
|
background: transparent;
|
|||
|
|
border: 1px solid #000;
|
|||
|
|
color: #000;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.grid-11-arrow {
|
|||
|
|
background: transparent;
|
|||
|
|
border: none;
|
|||
|
|
color: #000;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.grid-12-wrapper {
|
|||
|
|
margin: 0;
|
|||
|
|
font-family: sans-serif;
|
|||
|
|
background: #f5f5f5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.grid-12-section {
|
|||
|
|
padding: 60px 20px;
|
|||
|
|
text-align: center;
|
|||
|
|
background: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.grid-12-heading {
|
|||
|
|
font-size: 26px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin-bottom: 40px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.grid-12-grid {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 24px;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.grid-12-card {
|
|||
|
|
max-width: 280px;
|
|||
|
|
text-align: left;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.grid-12-icon {
|
|||
|
|
font-size: 24px;
|
|||
|
|
margin-bottom: 16px;
|
|||
|
|
color: #000;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.grid-12-title {
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin-bottom: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.grid-12-desc {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #555;
|
|||
|
|
margin-bottom: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.grid-12-btn {
|
|||
|
|
font-size: 14px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
cursor: pointer;
|
|||
|
|
background: transparent;
|
|||
|
|
border: none;
|
|||
|
|
color: #000;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.grid-12-arrow {
|
|||
|
|
font-size: 14px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
cursor: pointer;
|
|||
|
|
background: transparent;
|
|||
|
|
border: none;
|
|||
|
|
color: #000;
|
|||
|
|
}
|
|||
|
|
.footer-1-wrapper {
|
|||
|
|
background: #f8f8f8;
|
|||
|
|
font-family: sans-serif;
|
|||
|
|
margin: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footer-1-section {
|
|||
|
|
background: #fff;
|
|||
|
|
padding: 40px 30px 20px;
|
|||
|
|
border-top: 1px solid #eee;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footer-1-top {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
gap: 40px;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
margin-bottom: 40px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footer-1-brand {
|
|||
|
|
flex: 1 1 300px;
|
|||
|
|
max-width: 350px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footer-1-logo {
|
|||
|
|
font-size: 20px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footer-1-newsletter-text {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #333;
|
|||
|
|
margin-bottom: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footer-1-newsletter-form {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 10px;
|
|||
|
|
margin-bottom: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footer-1-newsletter-form input[type="email"] {
|
|||
|
|
padding: 10px;
|
|||
|
|
flex: 1;
|
|||
|
|
font-size: 14px;
|
|||
|
|
border: 1px solid #ccc;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footer-1-subscribe-btn {
|
|||
|
|
padding: 10px 16px;
|
|||
|
|
font-size: 14px;
|
|||
|
|
border: 1px solid #000;
|
|||
|
|
background: #000;
|
|||
|
|
color: #fff;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footer-1-privacy-note {
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #666;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footer-1-privacy-note a {
|
|||
|
|
text-decoration: underline;
|
|||
|
|
color: #000;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footer-1-columns {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 40px;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
flex: 2 1 500px;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footer-1-column {
|
|||
|
|
min-width: 150px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footer-1-column h4 {
|
|||
|
|
font-size: 14px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin-bottom: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footer-1-column ul {
|
|||
|
|
list-style: none;
|
|||
|
|
padding: 0;
|
|||
|
|
margin: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footer-1-column ul li {
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footer-1-column ul li a {
|
|||
|
|
color: #000;
|
|||
|
|
text-decoration: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footer-1-social ul li {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footer-1-social ul li i {
|
|||
|
|
width: 18px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footer-1-bottom {
|
|||
|
|
border-top: 1px solid #eee;
|
|||
|
|
padding-top: 20px;
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
font-size: 13px;
|
|||
|
|
color: #777;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footer-1-links {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 20px;
|
|||
|
|
list-style: none;
|
|||
|
|
padding: 0;
|
|||
|
|
margin: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footer-1-links li a {
|
|||
|
|
text-decoration: none;
|
|||
|
|
color: #555;
|
|||
|
|
}
|
|||
|
|
.footer-2-wrapper {
|
|||
|
|
font-family: sans-serif;
|
|||
|
|
background: #f5f5f5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footer-2-section {
|
|||
|
|
background: #fff;
|
|||
|
|
padding: 40px 30px 20px;
|
|||
|
|
border-top: 1px solid #eee;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footer-2-top {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
gap: 40px;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
margin-bottom: 40px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footer-2-left {
|
|||
|
|
flex: 1 1 300px;
|
|||
|
|
max-width: 350px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footer-2-left .logo {
|
|||
|
|
font-size: 20px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footer-2-left p {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #333;
|
|||
|
|
margin: 10px 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footer-2-left a {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #000;
|
|||
|
|
text-decoration: underline;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footer-2-social-icons {
|
|||
|
|
margin-top: 12px;
|
|||
|
|
display: flex;
|
|||
|
|
gap: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footer-2-social-icons i {
|
|||
|
|
font-size: 16px;
|
|||
|
|
color: #000;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footer-2-links-columns {
|
|||
|
|
flex: 2 1 400px;
|
|||
|
|
display: flex;
|
|||
|
|
gap: 80px;
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footer-2-links-columns ul {
|
|||
|
|
list-style: none;
|
|||
|
|
padding: 0;
|
|||
|
|
margin: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footer-2-links-columns ul li {
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footer-2-links-columns ul li a {
|
|||
|
|
text-decoration: none;
|
|||
|
|
color: #000;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footer-2-bottom {
|
|||
|
|
border-top: 1px solid #eee;
|
|||
|
|
padding-top: 20px;
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
font-size: 13px;
|
|||
|
|
color: #777;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footer-2-bottom .footer-2-links {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 20px;
|
|||
|
|
list-style: none;
|
|||
|
|
padding: 0;
|
|||
|
|
margin: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footer-2-bottom .footer-2-links li a {
|
|||
|
|
text-decoration: none;
|
|||
|
|
color: #555;
|
|||
|
|
}
|
|||
|
|
.text-1-wrapper {
|
|||
|
|
margin: 0;
|
|||
|
|
font-family: sans-serif;
|
|||
|
|
background: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.text-1-section {
|
|||
|
|
padding: 60px 30px;
|
|||
|
|
max-width: 700px;
|
|||
|
|
margin: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.text-1-tagline {
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #999;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.text-1-heading {
|
|||
|
|
font-size: 28px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin-bottom: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.text-1-description {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #555;
|
|||
|
|
margin-bottom: 24px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.text-1-button-group {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.text-1-btn {
|
|||
|
|
padding: 10px 20px;
|
|||
|
|
font-size: 14px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.text-1-solid {
|
|||
|
|
background: #000;
|
|||
|
|
color: #fff;
|
|||
|
|
border: 1px solid #000;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.text-1-outline {
|
|||
|
|
background: transparent;
|
|||
|
|
border: 1px solid #000;
|
|||
|
|
color: #000;
|
|||
|
|
}
|
|||
|
|
.text-2-wrapper {
|
|||
|
|
margin: 0;
|
|||
|
|
font-family: sans-serif;
|
|||
|
|
background: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.text-2-section {
|
|||
|
|
padding: 60px 30px;
|
|||
|
|
text-align: center;
|
|||
|
|
max-width: 700px;
|
|||
|
|
margin: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.text-2-tagline {
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #999;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.text-2-heading {
|
|||
|
|
font-size: 28px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin-bottom: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.text-2-description {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #555;
|
|||
|
|
margin-bottom: 24px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.text-2-button-group {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 16px;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.text-2-btn {
|
|||
|
|
padding: 10px 20px;
|
|||
|
|
font-size: 14px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.text-2-solid {
|
|||
|
|
background: #000;
|
|||
|
|
color: #fff;
|
|||
|
|
border: 1px solid #000;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.text-2-outline {
|
|||
|
|
background: transparent;
|
|||
|
|
border: 1px solid #000;
|
|||
|
|
color: #000;
|
|||
|
|
}
|
|||
|
|
.hero-1-wrapper {
|
|||
|
|
margin: 0;
|
|||
|
|
font-family: sans-serif;
|
|||
|
|
background: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero-1-two-column {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
padding: 60px 30px;
|
|||
|
|
gap: 40px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero-1-content {
|
|||
|
|
flex: 1 1 400px;
|
|||
|
|
max-width: 600px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero-1-image {
|
|||
|
|
flex: 1 1 300px;
|
|||
|
|
max-width: 500px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero-1-placeholder {
|
|||
|
|
background: #ccc;
|
|||
|
|
height: 300px;
|
|||
|
|
border-radius: 6px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero-1-heading {
|
|||
|
|
font-size: 28px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin-bottom: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero-1-description {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #555;
|
|||
|
|
margin-bottom: 24px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero-1-button-group {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero-1-btn {
|
|||
|
|
padding: 10px 20px;
|
|||
|
|
font-size: 14px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero-1-solid {
|
|||
|
|
background: #000;
|
|||
|
|
color: #fff;
|
|||
|
|
border: 1px solid #000;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero-1-outline {
|
|||
|
|
background: transparent;
|
|||
|
|
border: 1px solid #000;
|
|||
|
|
color: #000;
|
|||
|
|
}
|
|||
|
|
.hero-2-wrapper {
|
|||
|
|
margin: 0;
|
|||
|
|
font-family: sans-serif;
|
|||
|
|
background: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero-2-centered-hero {
|
|||
|
|
text-align: center;
|
|||
|
|
padding: 60px 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero-2-heading {
|
|||
|
|
font-size: 28px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin-bottom: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero-2-description {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #555;
|
|||
|
|
margin-bottom: 24px;
|
|||
|
|
max-width: 700px;
|
|||
|
|
margin-left: auto;
|
|||
|
|
margin-right: auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero-2-button-group {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 16px;
|
|||
|
|
justify-content: center;
|
|||
|
|
margin-bottom: 40px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero-2-btn {
|
|||
|
|
padding: 10px 20px;
|
|||
|
|
font-size: 14px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero-2-solid {
|
|||
|
|
background: #000;
|
|||
|
|
color: #fff;
|
|||
|
|
border: 1px solid #000;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero-2-outline {
|
|||
|
|
background: transparent;
|
|||
|
|
border: 1px solid #000;
|
|||
|
|
color: #000;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero-2-image {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
margin-top: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero-2-placeholder {
|
|||
|
|
background: #ccc;
|
|||
|
|
width: 100%;
|
|||
|
|
max-width: 800px;
|
|||
|
|
height: 300px;
|
|||
|
|
border-radius: 6px;
|
|||
|
|
}
|
|||
|
|
.logo-1-wrapper {
|
|||
|
|
margin: 0;
|
|||
|
|
font-family: sans-serif;
|
|||
|
|
background: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.logo-1-cloud {
|
|||
|
|
padding: 40px 20px;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.logo-1-intro-text {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #333;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.logo-1-grid {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
justify-content: center;
|
|||
|
|
gap: 24px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.logo-1-grid img {
|
|||
|
|
height: 30px;
|
|||
|
|
opacity: 0.8;
|
|||
|
|
transition: opacity 0.3s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.logo-1-grid img:hover {
|
|||
|
|
opacity: 1;
|
|||
|
|
}
|
|||
|
|
.feature-1-wrapper {
|
|||
|
|
margin: 0;
|
|||
|
|
font-family: sans-serif;
|
|||
|
|
background-color: #fff;
|
|||
|
|
color: #111;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.feature-1-section {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
padding: 60px 40px;
|
|||
|
|
max-width: 1200px;
|
|||
|
|
margin: auto;
|
|||
|
|
gap: 40px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.feature-1-text {
|
|||
|
|
flex: 1 1 500px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.feature-1-tag {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #555;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.feature-1-title {
|
|||
|
|
font-size: 36px;
|
|||
|
|
font-weight: 800;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.feature-1-subtitle {
|
|||
|
|
font-size: 16px;
|
|||
|
|
line-height: 1.6;
|
|||
|
|
color: #333;
|
|||
|
|
margin-bottom: 30px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.feature-1-benefits {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 40px;
|
|||
|
|
margin-bottom: 30px;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.feature-1-benefit {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
gap: 10px;
|
|||
|
|
max-width: 250px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.feature-1-benefit i {
|
|||
|
|
font-size: 24px;
|
|||
|
|
color: #000;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.feature-1-benefit h4 {
|
|||
|
|
margin: 0 0 5px;
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-weight: 700;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.feature-1-benefit p {
|
|||
|
|
margin: 0;
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #444;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.feature-1-actions {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.feature-1-btn.feature-1-primary {
|
|||
|
|
padding: 10px 20px;
|
|||
|
|
background-color: #fff;
|
|||
|
|
border: 2px solid #111;
|
|||
|
|
font-weight: 600;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.feature-1-btn-link {
|
|||
|
|
font-weight: 500;
|
|||
|
|
font-size: 14px;
|
|||
|
|
text-decoration: none;
|
|||
|
|
color: #111;
|
|||
|
|
display: inline-flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 5px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.feature-1-image {
|
|||
|
|
flex: 1 1 400px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.feature-1-placeholder {
|
|||
|
|
width: 100%;
|
|||
|
|
aspect-ratio: 1 / 1;
|
|||
|
|
background-color: #ddd;
|
|||
|
|
background-image: url('https://via.placeholder.com/100x100?text=Image');
|
|||
|
|
background-repeat: no-repeat;
|
|||
|
|
background-position: center;
|
|||
|
|
background-size: 40px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
html, body {
|
|||
|
|
margin: 0 !important;
|
|||
|
|
padding: 0 !important;
|
|||
|
|
min-height: 100% !important;
|
|||
|
|
width: 100% !important;
|
|||
|
|
font-family: 'Segoe UI', sans-serif !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
|
|||
|
|
<section class="tn1-blog-section"><p class="tn1-subheading">Blog</p><h2 class="tn1-main-heading">Short heading goes here</h2><p class="tn1-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><div class="tn1-blog-grid"><div class="tn1-blog-card"><div class="tn1-placeholder"></div><p class="tn1-category">Category</p><h3 class="tn1-title">Blog title heading will go here</h3><p class="tn1-summary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim.</p><div class="tn1-meta"><span>7 Jan 2024</span><span> • </span><span>5 min read</span></div></div><div class="tn1-blog-card"><div class="tn1-placeholder"></div><p class="tn1-category">Category</p><h3 class="tn1-title">Blog title heading will go here</h3><p class="tn1-summary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim.</p><div class="tn1-meta"><span>7 Jan 2024</span><span> • </span><span>5 min read</span></div></div><div class="tn1-blog-card"><div class="tn1-placeholder"></div><p class="tn1-category">Category</p><h3 class="tn1-title">Blog title heading will go here</h3><p class="tn1-summary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim.</p><div class="tn1-meta"><span>7 Jan 2024</span><span> • </span><span>5 min read</span></div></div></div><button class="tn1-view-all-btn">View all</button></section>
|
|||
|
|
<section class="blog-2-section"><div class="blog-2-header"><div><p class="blog-2-subheading">Blog</p><h2 class="blog-2-main-heading">Short heading goes here</h2><p class="blog-2-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div><button class="blog-2-view-all">View all</button></div><div class="blog-2-grid"><div class="blog-2-card"><div class="blog-2-placeholder"></div><div class="blog-2-content"><div class="blog-2-meta"><span>Category</span><span> • </span><span>5 min read</span></div><h3 class="blog-2-title">Blog title heading will go here</h3><p class="blog-2-summary">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><a class="blog-2-read-more" href="#">Read more →</a></div></div><div class="blog-2-card"><div class="blog-2-placeholder"></div><div class="blog-2-content"><div class="blog-2-meta"><span>Category</span><span> • </span><span>5 min read</span></div><h3 class="blog-2-title">Blog title heading will go here</h3><p class="blog-2-summary">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><a class="blog-2-read-more" href="#">Read more →</a></div></div><div class="blog-2-card"><div class="blog-2-placeholder"></div><div class="blog-2-content"><div class="blog-2-meta"><span>Category</span><span> • </span><span>5 min read</span></div><h3 class="blog-2-title">Blog title heading will go here</h3><p class="blog-2-summary">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><a class="blog-2-read-more" href="#">Read more →</a></div></div></div></section>
|
|||
|
|
<div class="contact-1-wrapper"><section class="contact-1-section"><p class="contact-1-tagline">Tagline</p><h2 class="contact-1-heading">Contact us</h2><p class="contact-1-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><form class="contact-1-form"><label class="contact-1-label">Name</label><input class="contact-1-input" id="name" type="text" placeholder="Enter your name"></input><label class="contact-1-label">Email</label><input class="contact-1-input" id="email" type="email" placeholder="Enter your email"></input><label class="contact-1-label">Message</label><textarea class="contact-1-textarea" id="message" placeholder="Type your message..."></textarea><div class="contact-1-checkbox-row"><input class="contact-1-checkbox" id="consent" type="checkbox"></input><label class="contact-1-label">I accept the terms</label></div><button class="contact-1-submit-btn" type="submit">Submit</button></form></section></div>
|
|||
|
|
<div class="newsletter-2-wrapper"><section class="newsletter-2-section"><div class="newsletter-2-container"><div class="newsletter-2-left"><h2 class="newsletter-2-heading">Medium length heading goes here</h2><p class="newsletter-2-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div><div class="newsletter-2-right"><form class="newsletter-2-signup-form"><input class="newsletter-2-email-input" type="email" placeholder="Enter your email"></input><button class="newsletter-2-submit-btn" type="submit">Sign Up</button></form><p class="newsletter-2-disclaimer">By clicking Sign Up you're confirming that you agree with our <a href="#">Terms and Conditions</a><span>.</span></p></div></div></section></div>
|
|||
|
|
<div class="cta-3-wrapper"><section class="cta-3-section"><h2 class="cta-3-heading">Medium length heading goes here</h2><p class="cta-3-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.</p><div class="cta-3-button-group"><button class="cta-3-btn cta-3-solid">Button</button><button class="cta-3-btn cta-3-outline">Button</button></div></section></div>
|
|||
|
|
<div class="faq-4-wrapper"><section class="faq-4-section"><h2 class="faq-4-heading">FAQs</h2><p class="faq-4-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.</p><div class="faq-4-list"><div class="faq-4-item"><button class="faq-4-question">Question text goes here<span>▼</span></button></div><div class="faq-4-item"><button class="faq-4-question">Question text goes here<span>▼</span></button></div><div class="faq-4-item"><button class="faq-4-question">Question text goes here<span>▼</span></button></div><div class="faq-4-item"><button class="faq-4-question">Question text goes here<span>▼</span></button></div><div class="faq-4-item"><button class="faq-4-question">Question text goes here<span>▼</span></button></div></div><div class="faq-4-footer"><h3 class="faq-4-footer-heading">Still have questions?</h3><p class="faq-4-footer-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p><button class="faq-4-footer-btn">Contact</button></div></section></div>
|
|||
|
|
<div class="faq-5-wrapper"><section class="faq-5-section"><div class="faq-5-container"><div class="faq-5-left"><h2 class="faq-5-heading">FAQs</h2><p class="faq-5-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.</p><button class="faq-5-contact-btn">Contact</button></div><div class="faq-5-right"><div class="faq-5-item"><button class="faq-5-question">Question text goes here<span>+</span></button></div><div class="faq-5-item"><button class="faq-5-question">Question text goes here<span>+</span></button></div><div class="faq-5-item"><button class="faq-5-question">Question text goes here<span>+</span></button></div><div class="faq-5-item"><button class="faq-5-question">Question text goes here<span>+</span></button></div><div class="faq-5-item"><button class="faq-5-question">Question text goes here<span>+</span></button></div></div></div></section></div>
|
|||
|
|
<div class="faq-6-wrapper"><section class="faq-6-block"><p class="faq-6-tagline">BASE TIDE PRO</p><h2 class="faq-6-heading">FREQUENTLY ASKED QUESTIONS</h2><div class="faq-6-list"><div class="faq-6-item faq-6-expanded"><div class="faq-6-question"><span>Which beaches are available on my Base Tide Pro?</span><span class="faq-6-icon">−</span></div><div class="faq-6-answer">There are <a href="#">550 beaches</a><span> available to program as your home beach or your surf travel destination.</span></div></div><div class="faq-6-item"><div class="faq-6-question"><span>How does temperature impact my watch?</span><span class="faq-6-icon">+</span></div></div><div class="faq-6-item"><div class="faq-6-question"><span>How do I reset my digital tide watch?</span><span class="faq-6-icon">+</span></div></div></div><div class="faq-6-footer"><button class="faq-6-view-more-btn">VIEW MORE</button></div></section></div>
|
|||
|
|
<div class="faq-7-wrapper"><section class="faq-7-container"><div class="faq-7-left"><p class="faq-7-support-label">Can’t find what you are looking for?</p><p class="faq-7-support-action">We would like to chat with you.</p><div class="faq-7-chat-icon"><img src="chat-icon.svg" alt="Chat icon"></img></div></div><div class="faq-7-right"><h2 class="faq-7-heading">Frequently Asked Questions</h2><div class="faq-7-search"><input type="text" placeholder="What are you looking for?"></input></div><div class="faq-7-list"><div class="faq-7-item"><button class="faq-7-question">Who should use Popupsmart?</button></div><div class="faq-7-item faq-7-expanded"><button class="faq-7-question">What is required to use Popupsmart?</button><div class="faq-7-answer">You are not required anything to use Popupsmart. It is a no-code tool. All you need to do is create a free account, design a popup or select one of our predesigned popup templates, and embed the popup code to your website.
|
|||
|
|
|
|||
|
|
Popupsmart can be installed on every website platform on the internet. Moreover, we offer integrations with the most powerful digital solution providers.</div></div><div class="faq-7-item"><button class="faq-7-question">Do I need to have coding skills to use Popupsmart?</button></div><div class="faq-7-item"><button class="faq-7-question">Do I need to have design skills to design popups with Popupsmart?</button></div><div class="faq-7-item"><button class="faq-7-question">Why should I choose Popupsmart over similar popup apps?</button></div></div></div></section></div>
|
|||
|
|
<div class="split-8-wrapper"><section class="split-8-section"><div class="split-8-left"><p class="split-8-tagline">Tagline</p><h2 class="split-8-heading">Medium length section heading goes here</h2><p class="split-8-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.</p><div class="split-8-button-group"><button class="split-8-btn split-8-outline">Button</button><button class="split-8-btn split-8-arrow">Button →</button></div></div><div class="split-8-right"><div class="split-8-placeholder"></div></div></section></div>
|
|||
|
|
<div class="hero-9-wrapper"><section class="hero-9-section"><p class="hero-9-tagline">Tagline</p><h1 class="hero-9-heading">Medium length section heading goes here</h1><p class="hero-9-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.</p><div class="hero-9-button-group"><button class="hero-9-btn hero-9-outline">Button</button><button class="hero-9-btn hero-9-arrow">Button →</button></div><div class="hero-9-image-wrapper"><div class="hero-9-placeholder"></div></div></section></div>
|
|||
|
|
<div class="split-10-wrapper"><section class="split-10-section"><div class="split-10-left"><div class="split-10-placeholder"></div></div><div class="split-10-right"><p class="split-10-tagline">Tagline</p><h2 class="split-10-heading">Medium length section heading goes here</h2><p class="split-10-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.</p><div class="split-10-button-group"><button class="split-10-btn split-10-outline">Button</button><button class="split-10-btn split-10-arrow">Button →</button></div></div></section></div>
|
|||
|
|
<div class="grid-11-wrapper"><section class="grid-11-section"><p class="grid-11-tagline">Tagline</p><h2 class="grid-11-heading">Medium length section heading goes here</h2><p class="grid-11-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.</p><div class="grid-11-card-grid"><div class="grid-11-card"><div class="grid-11-placeholder"></div><h3 class="grid-11-card-title">Medium length section heading goes here</h3><p class="grid-11-card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla.</p></div><div class="grid-11-card"><div class="grid-11-placeholder"></div><h3 class="grid-11-card-title">Medium length section heading goes here</h3><p class="grid-11-card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla.</p></div><div class="grid-11-card"><div class="grid-11-placeholder"></div><h3 class="grid-11-card-title">Medium length section heading goes here</h3><p class="grid-11-card-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla.</p></div></div><div class="grid-11-button-group"><button class="grid-11-btn grid-11-outline">Button</button><button class="grid-11-btn grid-11-arrow">Button →</button></div></section></div>
|
|||
|
|
<div class="grid-12-wrapper"><section class="grid-12-section"><h2 class="grid-12-heading">Long heading is what you see here in this feature section</h2><div class="grid-12-grid"><div class="grid-12-card"><i class="fas fa-cube grid-12-icon"></i><h3 class="grid-12-title">Long heading is what you see here in this feature section</h3><p class="grid-12-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla.</p><button class="grid-12-btn grid-12-arrow">Button →</button></div><div class="grid-12-card"><i class="fas fa-cube grid-12-icon"></i><h3 class="grid-12-title">Long heading is what you see here in this feature section</h3><p class="grid-12-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla.</p><button class="grid-12-btn grid-12-arrow">Button →</button></div><div class="grid-12-card"><i class="fas fa-cube grid-12-icon"></i><h3 class="grid-12-title">Long heading is what you see here in this feature section</h3><p class="grid-12-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla.</p><button class="grid-12-btn grid-12-arrow">Button →</button></div></div></section></div>
|
|||
|
|
<div class="feature-1-wrapper"><section class="feature-1-section"><div class="feature-1-text"><p class="feature-1-tag">Efficiency</p><h1 class="feature-1-title">Unlock the Power of Real-Time Data</h1><p class="feature-1-subtitle">The Tor Jupiter Gateway revolutionizes industrial operations by enhancing data accuracy and minimizing downtime. Experience improved operational efficiency with real-time monitoring and management.</p><div class="feature-1-benefits"><div class="feature-1-benefit" title="Operational Efficiency"><i class="fas fa-cube">📦</i><h3>Operational Efficiency</h3><p>Streamline processes and boost productivity with reliable data-driven insights.</p></div><div class="feature-1-benefit" title="Data Accuracy"><i class="fas fa-cube">📦</i><h3>Data Accuracy</h3><p>Ensure precise data collection for informed decision-making and enhanced performance.</p></div></div><div class="feature-1-actions"><button class="feature-1-btn feature-1-primary">Learn More</button><a class="feature-1-btn-link">Sign Up<i class="fas fa-arrow-right"></i></a></div></div><div class="feature-1-image"><div class="feature-1-placeholder"></div></div></section></div>
|
|||
|
|
<div class="footer-1-wrapper"><section class="footer-1-section"><div class="footer-1-top"><div class="footer-1-brand"><h3 class="footer-1-logo">Logo</h3><p class="footer-1-newsletter-text">Join our newsletter to stay up to date on features and releases.</p><div class="footer-1-newsletter-form"><input type="email" placeholder="Enter your email"></input><button class="footer-1-subscribe-btn">Subscribe</button></div><p class="footer-1-privacy-note"><span>By subscribing you agree to with our </span><a href="#">Privacy Policy</a><span> and provide consent to receive updates from our company.</span></p></div><div class="footer-1-columns"><div class="footer-1-column"><h4>Column One</h4><ul><li><a href="#">Link One</a></li><li><a href="#">Link Two</a></li><li><a href="#">Link Three</a></li><li><a href="#">Link Four</a></li><li><a href="#">Link Five</a></li></ul></div><div class="footer-1-column"><h4>Column Two</h4><ul><li><a href="#">Link Six</a></li><li><a href="#">Link Seven</a></li><li><a href="#">Link Eight</a></li><li><a href="#">Link Nine</a></li><li><a href="#">Link Ten</a></li></ul></div><div class="footer-1-column footer-1-social"><h4>Follow us</h4><ul><li><i class="fab fa-facebook"></i><span>Facebook</span></li><li><i class="fab fa-instagram"></i><span>Instagram</span></li><li><i class="fab fa-x-twitter"></i><span>X</span></li><li><i class="fab fa-linkedin"></i><span>LinkedIn</span></li><li><i class="fab fa-youtube"></i><span>Youtube</span></li></ul></div></div></div><div class="footer-1-bottom"><p>© 2023 Relume. All rights reserved.</p><ul class="footer-1-links"><li><a href="#">Privacy Policy</a></li><li><a href="#">Terms of Service</a></li><li><a href="#">Cookies Settings</a></li></ul></div></section></div>
|
|||
|
|
<div class="footer-2-wrapper"><section class="footer-2-section"><div class="footer-2-top"><div class="footer-2-left"><h3 class="logo">Logo</h3><p><strong>Address:</strong><br></br><span>Level 1, 12 Sample St, Sydney NSW 2000</span></p><p><strong>Contact:</strong><br></br><span>1800 123 4567</span><br></br><a href="mailto:info@relume.io">info@relume.io</a></p><div class="footer-2-social-icons"><i class="fab fa-facebook"></i><i class="fab fa-instagram"></i><i class="fab fa-x-twitter"></i><i class="fab fa-linkedin"></i><i class="fab fa-youtube"></i></div></div><div class="footer-2-links-columns"><ul><li><a href="#">Link One</a></li><li><a href="#">Link Two</a></li><li><a href="#">Link Three</a></li><li><a href="#">Link Four</a></li><li><a href="#">Link Five</a></li></ul><ul><li><a href="#">Link Six</a></li><li><a href="#">Link Seven</a></li><li><a href="#">Link Eight</a></li><li><a href="#">Link Nine</a></li><li><a href="#">Link Ten</a></li></ul></div></div><div class="footer-2-bottom"><p>© 2023 Relume. All rights reserved.</p><ul class="footer-2-links"><li><a href="#">Privacy Policy</a></li><li><a href="#">Terms of Service</a></li><li><a href="#">Cookies Settings</a></li></ul></div></section></div>
|
|||
|
|
<div class="text-1-wrapper"><section class="text-1-section"><p class="text-1-tagline">Tagline</p><h2 class="text-1-heading">Short heading here</h2><p class="text-1-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.</p><div class="text-1-button-group"><button class="text-1-btn text-1-solid">Button</button><button class="text-1-btn text-1-outline">Button</button></div></section></div>
|
|||
|
|
<div class="text-2-wrapper"><section class="text-2-section"><p class="text-2-tagline">Tagline</p><h2 class="text-2-heading">Short heading here</h2><p class="text-2-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.</p><div class="text-2-button-group"><button class="text-2-btn text-2-solid">Button</button><button class="text-2-btn text-2-outline">Button</button></div></section></div>
|
|||
|
|
<div class="hero-1-wrapper"><section class="hero-1-two-column"><div class="hero-1-content"><h2 class="hero-1-heading">Medium length hero heading goes here</h2><p class="hero-1-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.</p><div class="hero-1-button-group"><button class="hero-1-btn hero-1-solid">Button</button><button class="hero-1-btn hero-1-outline">Button</button></div></div><div class="hero-1-image"><div class="hero-1-placeholder"></div></div></section></div>
|
|||
|
|
<div class="hero-2-wrapper"><section class="hero-2-centered-hero"><h2 class="hero-2-heading">Medium length hero heading goes here</h2><p class="hero-2-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.</p><div class="hero-2-button-group"><button class="hero-2-btn hero-2-solid">Button</button><button class="hero-2-btn hero-2-outline">Button</button></div><div class="hero-2-image"><div class="hero-2-placeholder"></div></div></section></div>
|
|||
|
|
<div class="logo-1-wrapper"><section class="logo-1-cloud"><p class="logo-1-intro-text">Used by the world’s most awesome companies</p><div class="logo-1-grid"><img src="webflow.svg" alt="Webflow"></img><img src="relume.svg" alt="Relume"></img><img src="webflow.svg" alt="Webflow"></img><img src="relume.svg" alt="Relume"></img><img src="webflow.svg" alt="Webflow"></img><img src="relume.svg" alt="Relume"></img><img src="webflow.svg" alt="Webflow"></img><img src="relume.svg" alt="Relume"></img><img src="webflow.svg" alt="Webflow"></img><img src="relume.svg" alt="Relume"></img></div></section></div>
|
|||
|
|
|
|||
|
|
</body>
|
|||
|
|
</html> (see https://g.co/ng/security#xss)
|