found how to write the banner elements in one line
This commit is contained in:
asus
191
index.html
191
index.html
@@ -11,20 +11,42 @@
|
||||
<script type="text/javascript" src="script.js" defer></script>
|
||||
-->
|
||||
<style>
|
||||
pre {
|
||||
body {
|
||||
overflow: hidden;
|
||||
}
|
||||
body * {
|
||||
display: flex;
|
||||
margin: auto;
|
||||
}
|
||||
p, pre {
|
||||
line-height: 0.8;
|
||||
font-size: 12px;
|
||||
font-family: monospace;
|
||||
}
|
||||
.banner {
|
||||
width: 100px;
|
||||
border: 1px solid red;
|
||||
}
|
||||
.banner, .banner * {
|
||||
margin: 0px;
|
||||
}
|
||||
.banner p {
|
||||
white-space: pre;
|
||||
}
|
||||
.banner br {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<pre>
|
||||
<pre>
|
||||
• • • • ••••• ••••• • ••• • • • •
|
||||
• • • • • • • • • • •• •• • •
|
||||
••••• • • • •• • • • ••••• • • • •
|
||||
• • • • • • • • • • • • • •
|
||||
• • ••••• ••••• ••••• ••••• • • • • •
|
||||
</pre>
|
||||
<pre>
|
||||
</pre>
|
||||
<pre>
|
||||
•
|
||||
•• ••••• •••••
|
||||
••• • • • • ••
|
||||
@@ -41,8 +63,8 @@
|
||||
••• • ••••••• • • •••
|
||||
•• • • •••••
|
||||
•••••••• • • •
|
||||
</pre>
|
||||
<pre>
|
||||
</pre>
|
||||
<pre>
|
||||
•••• •
|
||||
• • •
|
||||
• • •
|
||||
@@ -59,8 +81,8 @@
|
||||
••• • • •
|
||||
••••••••
|
||||
•
|
||||
</pre>
|
||||
<pre>
|
||||
</pre>
|
||||
<pre>
|
||||
•
|
||||
•
|
||||
•• •
|
||||
@@ -75,8 +97,8 @@
|
||||
• ••••
|
||||
•• •
|
||||
•
|
||||
</pre>
|
||||
<pre>
|
||||
</pre>
|
||||
<pre>
|
||||
•
|
||||
•• •
|
||||
• • •
|
||||
@@ -90,6 +112,153 @@
|
||||
• • • •
|
||||
• •• •
|
||||
••• ••••
|
||||
</pre>
|
||||
</pre>
|
||||
<pre>
|
||||
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
|
||||
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
|
||||
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
|
||||
</pre>
|
||||
<pre>
|
||||
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
|
||||
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
|
||||
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •
|
||||
</pre>
|
||||
<div class="banner">
|
||||
<p>• </p>
|
||||
<p> • </p>
|
||||
<p> •</p>
|
||||
<p> • </p>
|
||||
|
||||
<p>• </p>
|
||||
<p> • </p>
|
||||
<p> •</p>
|
||||
<p> • </p>
|
||||
|
||||
<p>• </p>
|
||||
<p> • </p>
|
||||
<p> •</p>
|
||||
<p> • </p>
|
||||
|
||||
<p>• </p>
|
||||
<p> • </p>
|
||||
<p> •</p>
|
||||
<p> • </p>
|
||||
|
||||
<p>• </p>
|
||||
<p> • </p>
|
||||
<p> •</p>
|
||||
<p> • </p>
|
||||
|
||||
<p>• </p>
|
||||
<p> • </p>
|
||||
<p> •</p>
|
||||
<p> • </p>
|
||||
|
||||
<p>• </p>
|
||||
<p> • </p>
|
||||
<p> •</p>
|
||||
<p> • </p>
|
||||
|
||||
<p>• </p>
|
||||
<p> • </p>
|
||||
<p> •</p>
|
||||
<p> • </p>
|
||||
|
||||
<p>• </p>
|
||||
<p> • </p>
|
||||
<p> •</p>
|
||||
<p> • </p>
|
||||
|
||||
<p>• </p>
|
||||
<p> • </p>
|
||||
<p> •</p>
|
||||
<p> • </p>
|
||||
|
||||
<p>• </p>
|
||||
<p> • </p>
|
||||
<p> •</p>
|
||||
<p> • </p>
|
||||
|
||||
<p>• </p>
|
||||
<p> • </p>
|
||||
<p> •</p>
|
||||
<p> • </p>
|
||||
|
||||
<p>• </p>
|
||||
<p> • </p>
|
||||
<p> •</p>
|
||||
<p> • </p>
|
||||
|
||||
<p>• </p>
|
||||
<p> • </p>
|
||||
<p> •</p>
|
||||
<p> • </p>
|
||||
|
||||
<p>• </p>
|
||||
<p> • </p>
|
||||
<p> •</p>
|
||||
<p> • </p>
|
||||
|
||||
<p>• </p>
|
||||
<p> • </p>
|
||||
<p> •</p>
|
||||
<p> • </p>
|
||||
|
||||
<p>• </p>
|
||||
<p> • </p>
|
||||
<p> •</p>
|
||||
<p> • </p>
|
||||
|
||||
<p>• </p>
|
||||
<p> • </p>
|
||||
<p> •</p>
|
||||
<p> • </p>
|
||||
|
||||
<p>• </p>
|
||||
<p> • </p>
|
||||
<p> •</p>
|
||||
<p> • </p>
|
||||
|
||||
<p>• </p>
|
||||
<p> • </p>
|
||||
<p> •</p>
|
||||
<p> • </p>
|
||||
|
||||
<p>• </p>
|
||||
<p> • </p>
|
||||
<p> •</p>
|
||||
<p> • </p>
|
||||
|
||||
<p>• </p>
|
||||
<p> • </p>
|
||||
<p> •</p>
|
||||
<p> • </p>
|
||||
|
||||
<p>• </p>
|
||||
<p> • </p>
|
||||
<p> •</p>
|
||||
<p> • </p>
|
||||
|
||||
<p>• </p>
|
||||
<p> • </p>
|
||||
<p> •</p>
|
||||
<p> • </p>
|
||||
|
||||
<p>• </p>
|
||||
<p> • </p>
|
||||
<p> •</p>
|
||||
<p> • </p>
|
||||
|
||||
<p>• </p>
|
||||
<p> • </p>
|
||||
<p> •</p>
|
||||
<p> • </p>
|
||||
|
||||
<p>• </p>
|
||||
<p> • </p>
|
||||
<p> •</p>
|
||||
<p> • </p>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
27
test.html
Normal file
27
test.html
Normal file
@@ -0,0 +1,27 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(to right, black 1px, transparent 1px) 0 0 / 30px 100% repeat-x;
|
||||
/* Adjust the size of the text and color here */
|
||||
}
|
||||
.repeat-text::before {
|
||||
content: 'Your Text '; /* Add your desired text here */
|
||||
color: black; /* Set the color of the text */
|
||||
font-size: 16px; /* Set the font size of the text */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="repeat-text"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user