Marketing Links - HTML type, iFrame, multimedia...

Marketing links - HTML type

(Landing Page Examples)

These examples demonstrate how to create engaging landing pages that can be quickly deployed for various marketing campaigns. Whether you need a professional business layout or an entertainment-focused page, these examples provide a solid foundation that can be easily customized.

“Business News Example”

A clean, professional landing perfect for communications, product launches, or business updates.

What You Can Do With It

Share company news and updates
Showcase multiple product features
Present business insights or case studies
Create sectioned content with smooth navigation
Add custom branded elements (logos, colors, images)

HTML Implementation

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Business News</title>

<style>

{margin:0; padding:0; box-sizing:border-box; font-family:Arial}

html {scroll-behavior:smooth}

body {background:#f5f5f5}

.nav {

background:white;

box-shadow:0 2px 4px rgba(0,0,0,.1);

position:fixed;

width:100%;

top:0;

z-index:100;

}

.nav-inner {

max-width:1200px;

margin:0 auto;

padding:1rem;

display:flex;

justify-content:space-between;

align-items:center;

}

.nav-logo {

font-weight:bold;

color:#2c3e50;

text-decoration:none;

font-size:1.5rem;

transition:.3s;

}

.nav-logo:hover {color:#3498db}

.nav-links {display:flex; gap:2rem}

.nav-link {

color:#2c3e50;

text-decoration:none;

padding:.5rem;

transition:.3s;

cursor:pointer;

}

.nav-link:hover {color:#3498db}

.header {

background:linear-gradient(135deg,#2c3e50,#3498db);

color:white;

text-align:center;

padding:3rem 1rem;

margin-top:60px;

}

.container {

max-width:1200px;

margin:0 auto;

padding:1rem;

}

.card {

background:white;

border-radius:8px;

padding:1.5rem;

margin:2rem 0;

box-shadow:0 2px 4px rgba(0,0,0,.1);

transition:.3s;

animation:fadeIn .5s;

}

.card:hover {

transform:translateY(-5px);

box-shadow:0 5px 15px rgba(0,0,0,.1);

}

.icon {

width:80px;

height:80px;

margin:1rem 0;

animation:float 3s infinite;

}

.title {

color:#2c3e50;

margin:1rem 0;

font-size:1.5rem;

}

.content {

color:#666;

line-height:1.6;

margin:1rem 0;

}

.tag {

display:inline-block;

background:#e0e0e0;

padding:.3rem .8rem;

border-radius:15px;

margin:.5rem .5rem .5rem 0;

font-size:.9rem;

transition:.3s;

}

.tag:hover {

background:#d0d0d0;

transform:translateY(-2px);

}

.dot {

position:absolute;

top:1rem;

right:1rem;

width:8px;

height:8px;

background:#e74c3c;

border-radius:50%;

animation:pulse 2s infinite;

}

@keyframes fadeIn {

from {opacity:0; transform:translateY(20px)}

to {opacity:1; transform:translateY(0)}

}

@keyframes float {

50% {transform:translateY(-10px)}

}

@keyframes pulse {

50% {transform:scale(1.5); opacity:.5}

}

section {scroll-margin-top:80px}

</style>

</head>

<body>

<nav class="nav">

<div class="nav-inner">

<a class="nav-logo" onclick="scrollTo(0,0)">BID</a>

<div class="nav-links">

<a class="nav-link" onclick="document.getElementById('tech').scrollIntoView({behavior:'smooth',block:'start'})">Technology</a>

<a class="nav-link" onclick="document.getElementById('sustain').scrollIntoView({behavior:'smooth',block:'start'})">Sustainability</a>

<a class="nav-link" onclick="document.getElementById('work').scrollIntoView({behavior:'smooth',block:'start'})">Workplace</a>

<a class="nav-link" onclick="document.getElementById('market').scrollIntoView({behavior:'smooth',block:'start'})">Markets</a>

</div>

</nav>

<header class="header">

<h1>Business Insights Daily</h1>

<p>Your Source for Global Business News</p>

</header>

<div class="container">

<section id="tech">

<div class="card">

<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#3498db" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">

<circle cx="12" cy="12" r="10"/>

<path d="M12 6v6l4 2M16 16l-4-2M8 16l4-2M12 16v4"/>

</svg>

<span class="dot"></span>

<h2 class="title">Digital Transformation</h2>

<p class="content">Businesses worldwide are witnessing a fundamental shift in how they operate and deliver value to customers. The convergence of AI, cloud computing, and data analytics is creating new opportunities.</p>

<div class="tag">Technology</div>

<div class="tag">Innovation</div>

</div>

</section>

<section id="sustain">

<div class="card">

<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#2ecc71" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">

<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>

</svg>

<span class="dot"></span>

<h2 class="title">Sustainable Business</h2>

<p class="content">Companies embracing sustainable practices are seeing significant market advantages. Environmental responsibility is becoming a key driver of business success.</p>

<div class="tag">Sustainability</div>

<div class="tag">Growth</div>

</div>

</section>

<section id="work">

<div class="card">

<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#9b59b6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">

<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>

<circle cx="9" cy="7" r="4"/>

<path d="M23 21v-2a4 4 0 0 0-3-3.87"/>

</svg>

<span class="dot"></span>

<h2 class="title">Modern Workplace</h2>

<p class="content">Organizations are adapting to hybrid work models, with teams finding innovative ways to maintain productivity and foster creativity across time zones.</p>

<div class="tag">Workplace</div>

<div class="tag">Future</div>

</div>

</section>

<section id="market">

<div class="card">

<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#e74c3c" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">

<path d="M23 6l-9.5 9.5-5-5L1 18"/>

<path d="M17 6h6v6"/>

</svg>

<span class="dot"></span>

<h2 class="title">Global Markets</h2>

<p class="content">Economic analysts highlight unprecedented opportunities in emerging markets, particularly in regions embracing technological innovation.</p>

<div class="tag">Markets</div>

<div class="tag">Global</div>

</div>

</section>

</div>

</body>

</html>

Live Example

Check out how it looks in action: https://dkcomp.dev-test-landing.envoy.is/RMiuW0

Customization Options

Change color scheme to match your brand
Add more content sections as needed
Integrate your company’s imagery
Modify animations and transitions
Add contact forms or CTAs
Include social media links

Entertainment & Media Example

An eye-catching landing designed for media content, perfect for promotional campaigns or entertainment updates.

What You Can Do With It

Feature videos and animated content
Showcase events or releases
Create engaging media galleries
Display promotional content
Share updates and news

HTML Implementation

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Entertainment Zone</title>

<style>

{margin:0; padding:0; box-sizing:border-box; font-family:Arial}

html {scroll-behavior:smooth}

body {background:#0a0a0a; color:#fff}

.nav {

background:rgba(20,20,20,0.95);

box-shadow:0 2px 4px rgba(0,0,0,.3);

position:fixed;

width:100%;

top:0;

z-index:100;

backdrop-filter:blur(10px);

}

.nav-inner {

max-width:1200px;

margin:0 auto;

padding:1rem;

display:flex;

justify-content:space-between;

align-items:center;

}

.nav-logo {

font-weight:bold;

color:#ff3e6c;

text-decoration:none;

font-size:1.5rem;

transition:.3s;

}

.nav-links {display:flex; gap:2rem}

.nav-link {

color:#fff;

text-decoration:none;

padding:.5rem;

transition:.3s;

cursor:pointer;

}

.nav-link:hover {color:#ff3e6c}

.header {

background:linear-gradient(135deg,#ff3e6c,#ff8e53);

text-align:center;

padding:6rem 1rem 3rem;

}

.container {

max-width:1200px;

margin:0 auto;

padding:1rem;

}

.card {

background:#1a1a1a;

border-radius:12px;

padding:1.5rem;

margin:2rem 0;

box-shadow:0 4px 6px rgba(0,0,0,.2);

transition:.3s;

}

.card:hover {

transform:translateY(-5px);

box-shadow:0 8px 15px rgba(0,0,0,.3);

}

.video-container {

position:relative;

padding-bottom:56.25%;

height:0;

overflow:hidden;

max-width:100%;

margin:1rem 0;

}

.video-container iframe {

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

border:none;

}

.gif-container {

width:100%;

margin:1rem 0;

border-radius:8px;

overflow:hidden;

text-align:center;

}

.gif-container img {

max-width:100%;

height:auto;

}

.title {color:#fff; margin:1rem 0; font-size:1.8rem}

.content {color:#ccc; line-height:1.6; margin:1rem 0}

.tag {

display:inline-block;

background:#ff3e6c;

color:#fff;

padding:.3rem .8rem;

border-radius:20px;

margin:.5rem .5rem .5rem 0;

font-size:.9rem;

transition:.3s;

}

.tag:hover {

background:#ff6b8b;

transform:translateY(-2px);

}

</style>

</head>

<body>

<nav class="nav">

<div class="nav-inner">

<a class="nav-logo" onclick="scrollTo(0,0)">EntZone</a>

<div class="nav-links">

<a class="nav-link" onclick="document.getElementById('movies').scrollIntoView({behavior:'smooth'})">Movies</a>

<a class="nav-link" onclick="document.getElementById('gaming').scrollIntoView({behavior:'smooth'})">Gaming</a>

</div>

</nav>

<header class="header">

<h1>Entertainment Zone</h1>

<p>Your Daily Dose of Entertainment</p>

</header>

<div class="container">

<section id="movies">

<div class="card">

<div class="video-container">

<iframe

src="https://www.youtube.com/embed/WZpK-M7wKVk"

frameborder="0"

allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"

allowfullscreen>

</iframe>

</div>

<h2 class="title">Latest Movie Trends</h2>

<p class="content">Explore the most anticipated movie releases and trending cinema news.</p>

<div class="tag">Movies</div>

<div class="tag">Cinema</div>

</div>

</section>

<section id="gaming">

<div class="card">

<div class="gif-container">

<img src="https://media.giphy.com/media/oyQ5Qf9Ihu3ctAe4hw/giphy.gif" alt="Gaming highlights">

</div>

<h2 class="title">Gaming Highlights</h2>

<p class="content">The latest updates from the gaming world, including new releases and esports.</p>

<div class="tag">Gaming</div>

<div class="tag">Esports</div>

</div>

</section>

</div>

</body>

</html>

Live Example

See it in action here:https://dkcomp.dev-test-landing.envoy.is/IHboQw https://dkcomp.dev-test-landing.envoy.is/IHboQw

Customization Options

Embed different types of media (videos, GIFs, images)
Add more interactive elements
Customize the dark theme
Include social media feeds

Getting Started

Go to the generating links and create new link with html type
Create the HTML code
Deploy and share with your user!

Need help or have questions about it? Feel free to reach out to our team!