perso/WEBSITE_hugulumu
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

found how to write the banner elements in one line

Browse Source
This commit is contained in:
asus
2023-10-22 13:34:27 +02:00
parent f03655e2a0
commit 764c61ac46
2 changed files with 207 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

191
index.html
View File

@@ -11,20 +11,42 @@
<script type="text/javascript" src="script.js" defer></script> <script type="text/javascript" src="script.js" defer></script>
--> -->
<style> <style>
pre { body {
overflow: hidden;
}
body * {
display: flex;
margin: auto;
}
p, pre {
line-height: 0.8; 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> </style>
</head> </head>
<body> <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>•&#10;&#10;</p>
<p>&#10;•&#10;</p>
<p>&#10;&#10;•</p>
<p>&#10;•&#10;</p>
<p>•&#10;&#10;</p>
<p>&#10;•&#10;</p>
<p>&#10;&#10;•</p>
<p>&#10;•&#10;</p>
<p>•&#10;&#10;</p>
<p>&#10;•&#10;</p>
<p>&#10;&#10;•</p>
<p>&#10;•&#10;</p>
<p>•&#10;&#10;</p>
<p>&#10;•&#10;</p>
<p>&#10;&#10;•</p>
<p>&#10;•&#10;</p>
<p>•&#10;&#10;</p>
<p>&#10;•&#10;</p>
<p>&#10;&#10;•</p>
<p>&#10;•&#10;</p>
<p>•&#10;&#10;</p>
<p>&#10;•&#10;</p>
<p>&#10;&#10;•</p>
<p>&#10;•&#10;</p>
<p>•&#10;&#10;</p>
<p>&#10;•&#10;</p>
<p>&#10;&#10;•</p>
<p>&#10;•&#10;</p>
<p>•&#10;&#10;</p>
<p>&#10;•&#10;</p>
<p>&#10;&#10;•</p>
<p>&#10;•&#10;</p>
<p>•&#10;&#10;</p>
<p>&#10;•&#10;</p>
<p>&#10;&#10;•</p>
<p>&#10;•&#10;</p>
<p>•&#10;&#10;</p>
<p>&#10;•&#10;</p>
<p>&#10;&#10;•</p>
<p>&#10;•&#10;</p>
<p>•&#10;&#10;</p>
<p>&#10;•&#10;</p>
<p>&#10;&#10;•</p>
<p>&#10;•&#10;</p>
<p>•&#10;&#10;</p>
<p>&#10;•&#10;</p>
<p>&#10;&#10;•</p>
<p>&#10;•&#10;</p>
<p>•&#10;&#10;</p>
<p>&#10;•&#10;</p>
<p>&#10;&#10;•</p>
<p>&#10;•&#10;</p>
<p>•&#10;&#10;</p>
<p>&#10;•&#10;</p>
<p>&#10;&#10;•</p>
<p>&#10;•&#10;</p>
<p>•&#10;&#10;</p>
<p>&#10;•&#10;</p>
<p>&#10;&#10;•</p>
<p>&#10;•&#10;</p>
<p>•&#10;&#10;</p>
<p>&#10;•&#10;</p>
<p>&#10;&#10;•</p>
<p>&#10;•&#10;</p>
<p>•&#10;&#10;</p>
<p>&#10;•&#10;</p>
<p>&#10;&#10;•</p>
<p>&#10;•&#10;</p>
<p>•&#10;&#10;</p>
<p>&#10;•&#10;</p>
<p>&#10;&#10;•</p>
<p>&#10;•&#10;</p>
<p>•&#10;&#10;</p>
<p>&#10;•&#10;</p>
<p>&#10;&#10;•</p>
<p>&#10;•&#10;</p>
<p>•&#10;&#10;</p>
<p>&#10;•&#10;</p>
<p>&#10;&#10;•</p>
<p>&#10;•&#10;</p>
<p>•&#10;&#10;</p>
<p>&#10;•&#10;</p>
<p>&#10;&#10;•</p>
<p>&#10;•&#10;</p>
<p>•&#10;&#10;</p>
<p>&#10;•&#10;</p>
<p>&#10;&#10;•</p>
<p>&#10;•&#10;</p>
<p>•&#10;&#10;</p>
<p>&#10;•&#10;</p>
<p>&#10;&#10;•</p>
<p>&#10;•&#10;</p>
<p>•&#10;&#10;</p>
<p>&#10;•&#10;</p>
<p>&#10;&#10;•</p>
<p>&#10;•&#10;</p>
<p>•&#10;&#10;</p>
<p>&#10;•&#10;</p>
<p>&#10;&#10;•</p>
<p>&#10;•&#10;</p>
<p>•&#10;&#10;</p>
<p>&#10;•&#10;</p>
<p>&#10;&#10;•</p>
<p>&#10;•&#10;</p>
<p>•&#10;&#10;</p>
<p>&#10;•&#10;</p>
<p>&#10;&#10;•</p>
<p>&#10;•&#10;</p>
</div>
</body> </body>
</html> </html>

27
test.html Normal file
View 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>