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

171
index.html
View File

@@ -11,8 +11,30 @@
<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>
@@ -91,5 +113,152 @@
• •• • • •• •
••• •••• ••• ••••
</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>