metro4
Version:
The front-end framework for Build responsive, mobile-first projects on the web with the first front-end component library in Metro Style
84 lines (73 loc) • 2.63 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="../metro/css/metro-all.css?ver=@@b-version" rel="stylesheet">
<title>Test Marquee - Metro 4 :: Popular HTML, CSS and JS library</title>
<style>
body {
background: #0a0a0a;
perspective: 400px;
transform-style: preserve-3d;
}
.marquee {
transform: rotateX(45deg);
}
.star-wars {
background: #0a0a0a;
color: #feda4a;
}
.scene {
width: 600px;
position: relative;
display: block;
font-size: 300%;
font-weight: 600;
line-height: 150%;
font-family: 'Pathway Gothic One', sans-serif;
}
.scene p:not(.st) {
white-space: normal;
font-size: 60%;
line-height: 1.2;
text-align: justify;
}
.tt {
font-size: 130%;
}
</style>
</head>
<body class="m4-cloak h-vh-100">
<div class="container h-100 d-flex flex-align-center flex-column">
<h1 class="w-50 text-center fg-cyan">A long time ago in a galaxy far, far, away...</h1>
<div class="w-100 mt-20"
data-role="marquee"
data-duration="12000"
data-accent-pause="3000"
data-direction="up"
data-height="500"
data-background-color="#0a0a0a"
data-loop="true"
data-first-pause="5000"
>
<div class="star-wars">
<div class="scene">
<div class="title text-center">
<p class="st">Episode IV</p>
<div class="tt">A New Hope</div>
</div>
<p>It is a period of civil war. Rebel spaceships, striking from a hidden base, have won their first victory against the evil Galactic Empire.</p>
<p>During the battle, Rebel spies managed to steal secret plans to the Empire’s ultimate weapon, the DEATH STAR, an armored space station with enough power to destroy an entire planet.</p>
<p>Pursued by the Empire’s sinister agents, Princess Leia races home aboard her starship, custodian of the stolen plans that can save her people and restore freedom to the galaxy….</p>
</div>
</div>
</div>
</div>
<script src="../metro/js/metro.js?ver=@@b-version"></script>
<script>
$(function(){
})
</script>
</body>
</html>