207 lines
8.3 KiB
HTML
207 lines
8.3 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Minimalist Modern Title Happy To Be Here</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="icon" href="/assets/images/favicon.jpg" type="image/jpeg">
|
|
<style>
|
|
body {
|
|
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
background-color: #F8F9FA;
|
|
color: #212529;
|
|
}
|
|
.preview-container { max-width: 960px; }
|
|
/* assets/css/custom.css */
|
|
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
|
|
|
|
:root {
|
|
--primary-color: #007bff; /* A vibrant blue */
|
|
--primary-hover: #0056b3;
|
|
--background-color: #fdfdfd; /* A very light, almost white grey */
|
|
--card-bg-color: #ffffff;
|
|
--text-color: #333;
|
|
--text-light: #666;
|
|
--border-color: #eef2f7;
|
|
--shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
|
|
--border-radius: 12px;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Poppins', sans-serif;
|
|
background-color: var(--background-color);
|
|
color: var(--text-color);
|
|
}
|
|
|
|
a {
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--primary-hover);
|
|
}
|
|
|
|
.btn-primary {
|
|
background-color: var(--primary-color);
|
|
border-color: var(--primary-color);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background-color: var(--primary-hover);
|
|
border-color: var(--primary-hover);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.btn-success {
|
|
background-color: #28a745;
|
|
border-color: #28a745;
|
|
}
|
|
|
|
.btn-success:hover {
|
|
background-color: #218838;
|
|
border-color: #1e7e34;
|
|
}
|
|
|
|
header.bg-white {
|
|
background-color: var(--card-bg-color) !important;
|
|
border-bottom-color: var(--border-color) !important;
|
|
}
|
|
|
|
header .fs-4 {
|
|
font-weight: 600;
|
|
}
|
|
|
|
#gallery-section .display-5 {
|
|
font-weight: 700;
|
|
}
|
|
|
|
#gallery-section .card {
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--border-radius);
|
|
box-shadow: none;
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
}
|
|
|
|
#gallery-section .card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
#gallery-section .card-img-top {
|
|
border-top-left-radius: var(--border-radius);
|
|
border-top-right-radius: var(--border-radius);
|
|
}
|
|
|
|
#gallery-section .card-title {
|
|
font-weight: 600;
|
|
}
|
|
|
|
#gallery-section .card-footer {
|
|
background-color: transparent;
|
|
}
|
|
|
|
#preview-section {
|
|
padding-top: 4rem;
|
|
padding-bottom: 4rem;
|
|
}
|
|
|
|
.preview-container {
|
|
max-width: 960px;
|
|
margin: auto;
|
|
background: var(--card-bg-color);
|
|
padding: 3rem;
|
|
border-radius: var(--border-radius);
|
|
box-shadow: var(--shadow);
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.preview-container img {
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
#editor-section {
|
|
background-color: #f8f9fa; /* A slightly darker grey for contrast */
|
|
}
|
|
|
|
#editor-section h2 {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.form-control, .form-select {
|
|
border-radius: 8px;
|
|
border-color: var(--border-color);
|
|
}
|
|
|
|
.form-control:focus {
|
|
box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.15);
|
|
border-color: var(--primary-color);
|
|
}
|
|
|
|
footer.bg-light {
|
|
background-color: var(--card-bg-color) !important;
|
|
border-top-color: var(--border-color) !important;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<section class="py-5">
|
|
<div class="container preview-container">
|
|
|
|
<div class="row align-items-center">
|
|
<div class="col-md-6">
|
|
<img id="previewImage" src="https://marketing-landing-page-downloader.dev.flatlogic.app/assets/images/Social-Media-eBook.png" class="img-fluid rounded shadow-sm" alt="Ebook Cover">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h1 id="previewTitle" class="display-5 fw-bold mt-4 mt-md-0">Minimalist Modern Title Happy To Be Here</h1>
|
|
<p id="previewDescription" class="lead fs-4">A compelling description for the minimalist modern template.A compelling description for the minimalist modern template.A compelling description for the minimalist modern template.A compelling description for the minimalist modern template.A compelling description for the minimalist modern template.A compelling description for the minimalist modern template.A compelling description for the minimalist modern template.A compelling description for the minimalist modern template.</p>
|
|
<div id="previewCtaContainer">
|
|
<div class="flex flex-col mb-10 lg:items-start items-center">
|
|
<div class="w-12 h-12 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 mb-5"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-6 h-6">
|
|
<path d="M22 12h-4l-3 9L9 3l-3 9H2"></path>
|
|
</svg></div>
|
|
<div class="flex-grow">
|
|
<h2 class="text-gray-900 text-lg title-font font-medium mb-3">Shooting Stars</h2>
|
|
<p class="leading-relaxed text-base">Blue bottle crucifix vinyl post-ironic four dollar toast vegan taxidermy. Gastropub indxgo juice poutine.</p><a class="mt-3 text-indigo-500 inline-flex items-center">Learn More<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-4 h-4 ml-2">
|
|
<path d="M5 12h14M12 5l7 7-7 7"></path>
|
|
</svg></a>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col mb-10 lg:items-start items-center">
|
|
<div class="w-12 h-12 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 mb-5"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-6 h-6">
|
|
<circle cx="6" cy="6" r="3"></circle>
|
|
<circle cx="6" cy="18" r="3"></circle>
|
|
<path d="M20 4L8.12 15.88M14.47 14.48L20 20M8.12 8.12L12 12"></path>
|
|
</svg></div>
|
|
<div class="flex-grow">
|
|
<h2 class="text-gray-900 text-lg title-font font-medium mb-3">The Catalyzer</h2>
|
|
<p class="leading-relaxed text-base">Blue bottle crucifix vinyl post-ironic four dollar toast vegan taxidermy. Gastropub indxgo juice poutine.</p><a class="mt-3 text-indigo-500 inline-flex items-center">Learn More<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-4 h-4 ml-2">
|
|
<path d="M5 12h14M12 5l7 7-7 7"></path>
|
|
</svg></a>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col mb-10 lg:items-start items-center">
|
|
<div class="w-12 h-12 inline-flex items-center justify-center rounded-full bg-indigo-100 text-indigo-500 mb-5"><svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-6 h-6">
|
|
<path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"></path>
|
|
<circle cx="12" cy="7" r="4"></circle>
|
|
</svg></div>
|
|
<div class="flex-grow">
|
|
<h2 class="text-gray-900 text-lg title-font font-medium mb-3">Neptune</h2>
|
|
<p class="leading-relaxed text-base">Blue bottle crucifix vinyl post-ironic four dollar toast vegan taxidermy. Gastropub indxgo juice poutine.</p><a class="mt-3 text-indigo-500 inline-flex items-center">Learn More<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="w-4 h-4 ml-2">
|
|
<path d="M5 12h14M12 5l7 7-7 7"></path>
|
|
</svg></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<footer class="text-center py-3 bg-light">
|
|
<p class="mb-0">© 2025 <a href="https://www.thecontentrepreneur.com/">The Contentrepreneur</a></p>
|
|
</footer>
|
|
</body>
|
|
</html> |