mirror of
https://github.com/OpenVGLab/OmniLottie.git
synced 2026-09-16 23:26:26 +00:00
573 lines
27 KiB
HTML
573 lines
27 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="description" content="OmniLottie: Generating Vector Animations via Parameterized Lottie Tokens">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>OmniLottie: Generating Vector Animations via Parameterized Lottie Tokens</title>
|
||
|
||
<link href="https://fonts.googleapis.com/css?family=Google+Sans|Noto+Sans|Castoro" rel="stylesheet">
|
||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"/>
|
||
<link rel="stylesheet" href="./static/css/bulma.min.css">
|
||
<link rel="stylesheet" href="./static/css/bulma-carousel.min.css">
|
||
<link rel="stylesheet" href="./static/css/bulma-slider.min.css">
|
||
<link rel="stylesheet" href="./static/css/fontawesome.all.min.css">
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jpswalsh/academicons@1/css/academicons.min.css">
|
||
<link rel="stylesheet" href="./static/css/index.css">
|
||
<link rel="icon" href="./static/images/lottie_icon.png"/>
|
||
|
||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
|
||
<script defer src="./static/js/fontawesome.all.min.js"></script>
|
||
<script src="./static/js/bulma-slider.min.js"></script>
|
||
<script src="./static/js/index.js"></script>
|
||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
|
||
|
||
<style>
|
||
body {
|
||
margin: auto;
|
||
font-family: Arial, sans-serif;
|
||
}
|
||
|
||
nav {
|
||
position: auto;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
background-color: ghostwhite;
|
||
z-index: 100;
|
||
box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
nav ul {
|
||
padding: 0;
|
||
margin: auto;
|
||
list-style: none;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
nav ul li {
|
||
margin: auto;
|
||
}
|
||
|
||
nav ul li a {
|
||
display: block;
|
||
padding: 5px;
|
||
text-decoration: none;
|
||
transition: background-color 0.3s;
|
||
}
|
||
|
||
nav ul li a:hover {
|
||
background-color: #555;
|
||
}
|
||
|
||
.title {
|
||
font-size: 41px;
|
||
}
|
||
|
||
.teaserTitle {
|
||
font-size: 76px;
|
||
}
|
||
|
||
.subTeaserTitle {
|
||
font-size: 15px;
|
||
}
|
||
|
||
.carousel-indicators {
|
||
bottom: -26px;
|
||
}
|
||
|
||
.carousel-control.left,
|
||
.carousel-control.right {
|
||
background-image: none !important;
|
||
filter: none !important;
|
||
width: 20px;
|
||
}
|
||
|
||
.columns {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.column {
|
||
flex: 1;
|
||
min-width: 150px;
|
||
}
|
||
|
||
.carousel-indicators ol {
|
||
width: 100%;
|
||
}
|
||
|
||
.carousel-indicators li {
|
||
height: 3px !important;
|
||
border-radius: 0px !important;
|
||
width: 25%;
|
||
}
|
||
|
||
.render_wrapper {
|
||
position: relative;
|
||
height: 300px;
|
||
}
|
||
|
||
.render_wrapper_small {
|
||
position: relative;
|
||
height: 200px;
|
||
}
|
||
|
||
.render_div {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
}
|
||
|
||
#interpolation-image-wrapper-car {
|
||
text-align: center;
|
||
}
|
||
|
||
#interpolation-image-wrapper-chair {
|
||
text-align: center;
|
||
}
|
||
|
||
.nested-columns {
|
||
margin-bottom: 0 !important;
|
||
}
|
||
|
||
.task-icon {
|
||
font-size: 1.2em;
|
||
margin-right: 8px;
|
||
}
|
||
|
||
.highlight-box {
|
||
background: linear-gradient(135deg, #b39ddb 0%, #9575cd 100%);
|
||
border-radius: 10px;
|
||
padding: 20px;
|
||
margin: 10px 0;
|
||
color: white;
|
||
}
|
||
|
||
.feature-card {
|
||
border: 1px solid #e0e0e0;
|
||
border-radius: 8px;
|
||
padding: 15px;
|
||
margin: 10px;
|
||
transition: box-shadow 0.3s;
|
||
}
|
||
|
||
.feature-card:hover {
|
||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<section class="hero">
|
||
<div class="hero-body">
|
||
<div class="container is-max-desktop">
|
||
<div class="columns is-centered">
|
||
<div class="column has-text-centered">
|
||
<h1 class="title is-0 publication-title">
|
||
OmniLottie: Generating Vector Animations via Parameterized Lottie Tokens <br/>
|
||
</h1>
|
||
|
||
<style>
|
||
.neurips-text {
|
||
color: #b39ddb; /* 浅紫色 */
|
||
font-size: 30px;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
margin-top: 10px;
|
||
}
|
||
</style>
|
||
|
||
|
||
|
||
<div class="is-size-4 publication-authors">
|
||
<span class="author-block">
|
||
<a href="https://github.com/YiyingYang12/YiyingYang12">Yiying Yang</a><sup>1,2</sup>,</span>
|
||
<span class="author-block">
|
||
<a href="https://wchengad.github.io">Wei Cheng</a><sup>2*</sup>,</span>
|
||
<span class="author-block">
|
||
<a href="https://ch3cook-fdu.github.io/">Sijin Chen</a><sup>3</sup>,</span>
|
||
<span class="author-block">
|
||
<a href="https://romgai.github.io/">Honghao Fu</a><sup>2,4</sup>,</span>
|
||
<span class="author-block">
|
||
</div>
|
||
<div class="is-size-4 publication-authors">
|
||
<span class="author-block">
|
||
<a href="https://scholar.google.com/citations?user=tgDc0fsAAAAJ&hl=en">XianFang Zeng</a><sup>2</sup>,
|
||
</span>
|
||
<span class="author-block">
|
||
<a href="https://scholar.google.com/citations?user=TE7lbQwAAAAJ&hl=en">Yujun Cai</a><sup>4</sup>,
|
||
</span>
|
||
<span class="author-block">
|
||
<a href="https://www.skicyyu.org/">Gang Yu</a><sup>2‡</sup>,</span>
|
||
<span class="author-block">
|
||
<a href="http://xingjunma.com/">Xinjun Ma</a><sup>1‡</sup>,
|
||
</span>
|
||
</div>
|
||
|
||
<div class="is-size-5 publication-authors">
|
||
<span class="author-block"><sup>*</sup>Project Lead,</span>
|
||
<span class="author-block"><sup>‡</sup>Correspondence Authors</span>
|
||
</div>
|
||
<div class="is-size-5 publication-authors">
|
||
<span class="author-block"><sup>1</sup>Fudan University,</span>
|
||
<span class="author-block"><sup>2</sup>StepFun,</span>
|
||
<span class="author-block"><sup>3</sup>HKU MMLab,</span>
|
||
<span class="author-block"><sup>4</sup>University of Queensland</span>
|
||
</div>
|
||
|
||
<div class="column has-text-centered">
|
||
<div class="publication-links">
|
||
<!-- arXiv Link -->
|
||
<span class="link-block">
|
||
<a class="external-link button is-normal is-rounded is-dark" href="#">
|
||
<span class="icon">
|
||
<i class="ai ai-arxiv"></i>
|
||
</span>
|
||
<span>arXiv</span>
|
||
</a>
|
||
</span>
|
||
|
||
<!-- Github Link -->
|
||
<span class="link-block">
|
||
<a href="#" class="external-link button is-normal is-rounded is-dark">
|
||
<span class="icon">
|
||
<i class="fab fa-github" style="color: white;"></i>
|
||
</span>
|
||
<span>Code</span>
|
||
</a>
|
||
</span>
|
||
|
||
<!-- Weights Link -->
|
||
<span class="link-block">
|
||
<a href="#" class="external-link button is-normal is-rounded is-dark">
|
||
<span class="icon">
|
||
<img src="https://huggingface.co/front/assets/huggingface_logo.svg" alt="Hugging Face Logo" style="width: 20px; height: 20px;">
|
||
</span>
|
||
<span>Weights</span>
|
||
</a>
|
||
</span>
|
||
|
||
<!-- Dataset Link -->
|
||
<span class="link-block">
|
||
<a href="#" class="external-link button is-normal is-rounded is-dark">
|
||
<span class="icon">
|
||
<img src="https://huggingface.co/front/assets/huggingface_logo.svg" alt="Hugging Face Logo" style="width: 20px; height: 20px;">
|
||
</span>
|
||
<span>MMLottie-2M Dataset</span>
|
||
</a>
|
||
</span>
|
||
|
||
<!-- Demo Link -->
|
||
<span class="link-block">
|
||
<a href="#" class="external-link button is-normal is-rounded is-dark">
|
||
<span class="icon">
|
||
<i class="fas fa-play"></i>
|
||
</span>
|
||
<span>Demo</span>
|
||
</a>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Banner Video -->
|
||
<section class="section">
|
||
<div class="container is-max-desktop">
|
||
<div class="columns is-centered has-text-centered" style="margin-top: -20px">
|
||
<video src="./assets/OmniLottie-main-demo.mp4" width="100%" autoplay loop muted playsinline></video>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Abstract -->
|
||
<section class="section">
|
||
<div class="container is-max-desktop">
|
||
<div class="columns is-centered has-text-centered" style="margin-top: -80px">
|
||
<div class="column is-four-fifths">
|
||
<h2 class="title is-2">Abstract</h2>
|
||
<div class="content has-text-justified">
|
||
<p>
|
||
<b>OmniLottie</b> is a versatile framework that generates high-quality vector animations from multi-modal instructions.
|
||
For flexible motion and visual content control, we focus on Lottie, a light-weight JSON formatting for both shapes and animation behaviors representation.
|
||
However, the raw Lottie JSON files contain extensive invariant structural metadata and formatting tokens, posing significant challenges for learning vector animation generation.
|
||
Therefore, we introduce a well-designed <b>Lottie tokenizer</b> that transforms JSON files into structured sequences of commands and parameters representing shapes, animation functions and control parameters.
|
||
Such tokenizer enables us to build OmniLottie upon pretrained vision–language models to follow multi-modal interleaved instructions and generate high-quality vector animations.
|
||
To further advance research in vector animation generation, we curate <b>MMLottie-2M</b>, a large-scale dataset of professionally designed vector animations paired with textual and visual annotations.
|
||
With extensive experiments, we validate that OmniLottie can produce vivid and semantically aligned vector animations that adhere closely to multi-modal human instructions.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Highlights -->
|
||
<section class="hero" id="teaser" style="margin-bottom: 50px; margin-top: 50px;">
|
||
<div class="container is-max-desktop">
|
||
<div class="columns is-centered" style="margin-top: 15px">
|
||
<div class="column is-full-width">
|
||
<h2 class="title is-4">Highlights</h2>
|
||
<div class="columns is-centered" style="text-align: center">
|
||
<div class="column" style="align-self: center">
|
||
<img src="./assets/OmniLottie-teaser.jpg" alt="OmniLottie Teaser">
|
||
</div>
|
||
</div>
|
||
<div class="content has-text-justified" style="padding-top: 15px">
|
||
OmniLottie is capable of generating high-quality vector animations across a wide spectrum of complexity — from simple icons to intricate animated illustrations.
|
||
It demonstrates remarkable versatility through multiple generation modalities, including <b>Text-to-Lottie</b>, <b>Text-Image-to-Lottie</b>, and <b>Video-to-Lottie</b>,
|
||
making it a powerful and flexible solution for diverse creative and professional animation tasks.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Method Overview -->
|
||
<div class="columns is-centered" style="margin-top: 15px">
|
||
<div class="column is-full-width">
|
||
<h2 class="title is-4">Method Overview</h2>
|
||
<div class="columns is-centered" style="text-align: center">
|
||
<div class="column" style="align-self: center">
|
||
<img src="./assets/OmniLottie-pipeline.jpg" alt="OmniLottie Pipeline">
|
||
</div>
|
||
</div>
|
||
<div class="content has-text-justified" style="padding-top: 15px">
|
||
OmniLottie is built on a pre-trained vision-language model (Qwen2.5-VL) and incorporates a Lottie tokenizer.
|
||
The model tokenizes both text and image/video inputs as prefix tokens, while the Lottie tokenizer encodes vector animation commands into a unified representation space.
|
||
The Lottie tokenizer abstracts Lottie animations into compact sequences of animation commands and control parameters, removing redundant metadata while preserving full generative flexibility.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Lottie Tokenizer Details -->
|
||
<div class="columns is-centered" style="margin-top: 15px">
|
||
<div class="column is-full-width">
|
||
<h2 class="title is-4">Lottie Tokenizer</h2>
|
||
<div class="columns is-centered" style="text-align: center">
|
||
<div class="column" style="align-self: center">
|
||
<img src="./assets/OmniLottie-tokenizer.jpg" alt="Lottie Tokenizer">
|
||
</div>
|
||
</div>
|
||
<div class="content has-text-justified" style="padding-top: 15px">
|
||
Our Lottie tokenizer converts raw JSON files into compact sequences of shape, effect, and animation commands with their associated parameters.
|
||
This representation substantially shortens sequence lengths (81% reduction compared to raw JSON), improves token efficiency, and enables OmniLottie to learn a clean distribution over animation primitives.
|
||
The tokenizer supports five fundamental layer types: Precomposition, Solid, Null, Shape, and Text layers, each identified by a unique type parameter.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Generation Process -->
|
||
<section class="section">
|
||
<div class="container is-max-desktop" style="margin-top: 30px;">
|
||
<h3 class="title is-4">Generation Process of OmniLottie</h3>
|
||
<div>
|
||
<section class="section" style="overflow:hidden">
|
||
<div class="container">
|
||
<div id="post_images" class="carousel">
|
||
<div class="item-1">
|
||
<video poster="" autoplay="" muted loop="" style="pointer-events: none;">
|
||
<source src="./assets/OmniLottie-demo-text2lottie.mp4" type="video/mp4">
|
||
</video>
|
||
<p class="has-text-centered"><b>Text-to-Lottie Generation</b></p>
|
||
</div>
|
||
<div class="item-2">
|
||
<video poster="" autoplay="" muted loop="" style="pointer-events: none;">
|
||
<source src="./assets/OmniLottie-demo-image2lottie.mp4" type="video/mp4">
|
||
</video>
|
||
<p class="has-text-centered"><b>Text-Image-to-Lottie Generation</b></p>
|
||
</div>
|
||
<div class="item-3">
|
||
<video poster="" autoplay="" muted loop="" style="pointer-events: none;">
|
||
<source src="./assets/OmniLottie-demo-video2lottie.mp4" type="video/mp4">
|
||
</video>
|
||
<p class="has-text-centered"><b>Video-to-Lottie Generation</b></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/bulma-carousel@4.0.3/dist/js/bulma-carousel.min.js"></script>
|
||
<script>
|
||
bulmaCarousel.attach('#post_images', {
|
||
slidesToScroll: 1,
|
||
slidesToShow: 1,
|
||
loop: true,
|
||
});
|
||
</script>
|
||
</div>
|
||
|
||
<!-- Comparison Results -->
|
||
<div class="columns is-centered" style="margin-top: 20px">
|
||
<div class="column is-full-width">
|
||
<h2 class="title is-4">Comparison with SOTA Methods</h2>
|
||
|
||
<h3 class="title is-5">Text-to-Lottie</h3>
|
||
<div class="content has-text-justified">
|
||
<p>OmniLottie achieves near-perfect success rates, the best FVD, and the strongest motion alignment compared to baselines including DeepSeek, GPT-4o, and Recraft.</p>
|
||
</div>
|
||
<div class="columns is-centered">
|
||
<div class="column" style="align-self: center">
|
||
<img src="./assets/OmniLottie-t2lottie.jpg" alt="Text-to-Lottie Comparison">
|
||
</div>
|
||
</div>
|
||
|
||
<h3 class="title is-5">Text-Image-to-Lottie</h3>
|
||
<div class="content has-text-justified">
|
||
<p>OmniLottie ranks first in FVD, object alignment, and motion alignment while maintaining high reliability. Methods such as AniClipart and LiveSketch exhibit low success rates and significantly longer runtimes.</p>
|
||
</div>
|
||
<div class="columns is-centered">
|
||
<div class="column" style="align-self: center">
|
||
<img src="./assets/OmniLottie-ti2lottie.jpg" alt="Text-Image-to-Lottie Comparison">
|
||
</div>
|
||
</div>
|
||
|
||
<h3 class="title is-5">Video-to-Lottie</h3>
|
||
<div class="content has-text-justified">
|
||
<p>OmniLottie preserves temporal and structural fidelity most effectively, achieving the best FVD, PSNR, SSIM, and DINO scores.</p>
|
||
</div>
|
||
<div class="columns is-centered">
|
||
<div class="column" style="align-self: center">
|
||
<img src="./assets/OmniLottie-v2lottie.jpg" alt="Video-to-Lottie Comparison">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Quantitative Results Table -->
|
||
<div class="columns is-centered" style="margin-top: 20px">
|
||
<div class="column is-full-width">
|
||
<h2 class="title is-4">Quantitative Results</h2>
|
||
<div class="columns is-centered">
|
||
<div class="column" style="align-self: center">
|
||
<img src="./assets/OmniLottie-quantitative-table.jpg" alt="Quantitative Results">
|
||
</div>
|
||
</div>
|
||
<div class="content has-text-justified" style="padding-top: 15px">
|
||
OmniLottie achieves 97.3%, 92.0%, and 90.7% success rates for Text-to-Lottie, Text-Image-to-Lottie, and Video-to-Lottie tasks respectively,
|
||
substantially outperforming all baselines while producing richer token sequences that enable more expressive and detailed vector animation generation.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Dataset Section -->
|
||
<div class="columns is-centered" style="margin-top: 20px">
|
||
<div class="column is-full-width">
|
||
<h3 class="title is-4">MMLottie-2M Dataset</h3>
|
||
<div class="columns is-centered">
|
||
<div class="column" style="align-self: center">
|
||
<img src="./assets/MMLottie-dataset.jpg" alt="MMLottie-2M Dataset">
|
||
</div>
|
||
</div>
|
||
<div class="content has-text-justified" style="padding-top: 15px">
|
||
The MMLottie-2M dataset consists of two million Lottie animations paired with multi-modal annotations including text descriptions, keyframe images, and rendered videos.
|
||
Data is collected from major online platforms (LottieFiles, IconScout, Flaticon, Iconfont, Icons8) and augmented with SVG-derived animations.
|
||
The dataset undergoes comprehensive processing including Lottie cleaning, spatial-temporal normalization, video rendering, and coarse-to-fine captioning using VLMs.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Data Pipeline -->
|
||
<div class="columns is-centered" style="margin-top: 20px">
|
||
<div class="column is-full-width">
|
||
<h3 class="title is-4">Data Processing Pipeline</h3>
|
||
<div class="columns is-centered">
|
||
<div class="column" style="align-self: center">
|
||
<img src="./assets/OmniLottie-data-pipeline.jpg" alt="Data Processing Pipeline">
|
||
</div>
|
||
</div>
|
||
<div class="content has-text-justified" style="padding-top: 15px">
|
||
Our data processing pipeline includes five stages: (1) Data collection from web sources and SVG conversion,
|
||
(2) Lottie cleaning to remove non-visual and non-parameterizable layers,
|
||
(3) Spatial-temporal normalization to 512×512 canvas and unified timeline,
|
||
(4) Video rendering with random backgrounds, and
|
||
(5) Multi-modal annotation using a coarse-to-fine VLM captioning strategy.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<br>
|
||
|
||
<!-- Related Links -->
|
||
<div class="columns is-centered">
|
||
<div class="column is-full-width">
|
||
<h2 class="title is-3">Related Links</h2>
|
||
<div class="content has-text-justified">
|
||
<p>
|
||
<b>We thank the following excellent open-source works:</b>
|
||
</p>
|
||
<p>
|
||
<a href="https://omnisvg.github.io/"><b>OmniSVG</b></a>: A unified framework for SVG generation that leverages pre-trained VLMs. We build upon its methodology for vector graphics generation.
|
||
</p>
|
||
<p>
|
||
<a href="https://icon-shop.github.io/"><b>IconShop</b></a>: The first work leveraging LLMs to generate monochrome, icon-level SVGs. We referred to its parametric implementation.
|
||
</p>
|
||
<p>
|
||
<b>Concurrent Works:</b>
|
||
</p>
|
||
<p>
|
||
<a href="https://aniclipart.github.io/"><b>AniClipart</b></a>: Animates static clipart using text-to-video diffusion priors.
|
||
</p>
|
||
<p>
|
||
<a href="#"><b>LiveSketch</b></a>: Generates sketch animations through optimization-based approaches.
|
||
</p>
|
||
<p>
|
||
<a href="https://starvector.github.io/"><b>StarVector</b></a>: Equips LLM with an image encoder for Image-to-SVG generation.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Acknowledgements -->
|
||
<div class="columns is-centered">
|
||
<div class="column is-full-width">
|
||
<h2 class="title is-3">Acknowledgements</h2>
|
||
<div class="content has-text-justified">
|
||
<p>
|
||
We thank all the contributors for dataset construction and valuable discussions.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- BibTeX -->
|
||
<section class="section" id="BibTeX">
|
||
<div class="container is-max-desktop content">
|
||
<h2 class="title">BibTeX</h2>
|
||
<pre><code>@article{omnilottie2025,
|
||
title={OmniLottie: A Unified Scalable Vector Animation Generation Model},
|
||
author={Author1 and Author2 and Author3 and Author4 and Author5 and Author6 and Author7 and Author8 and Author9 and Author10},
|
||
journal={arXiv preprint arXiv:XXXX.XXXXX},
|
||
year={2025}
|
||
}</code></pre>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Footer -->
|
||
<footer class="footer">
|
||
<div class="container">
|
||
<div class="columns is-centered">
|
||
<div class="column is-8">
|
||
<div class="content">
|
||
<p style="text-align:center">
|
||
Source code mainly borrowed from <a href="https://keunhong.com/">Keunhong Park</a>'s <a href="https://nerfies.github.io/">Nerfies website</a>.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
</body>
|
||
|
||
</html>
|