Nudista-Online/area-51
1
1
Fork 0
Code Issues 6 Pull requests Projects 1 Releases Packages Wiki Activity

Úprava souboru index.html

Browse source
This commit is contained in:
janrippl 2025-02-13 08:32:53 +01:00
parent 027b9e74d4
commit b6d18d642a
2 changed files with 104 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

72
index.html
View file

@ -9,77 +9,7 @@
<meta name="author" content="">
<!-- CSS -->
<style>
@import url("https://fonts.googleapis.com/css?family=Raleway:400,400i,700");
*, *::before, *::after {
padding: 0;
margin: 0 auto;
box-sizing: border-box;
}
body {
font-family: Raleway, sans-serif;
background-color: #000;
color: #fff;
font-size: 24px;
}
.content {
width: 95%;
max-width: 40ch;
padding: 3em 1em;
}
.marquee {
position: relative;
width: 100%;
height: 2em;
font-size: 5em;
display: grid;
place-items: center;
overflow: hidden;
&_text {
position: absolute;
min-width: 100%;
white-space: nowrap;
animation: marquee 16s infinite linear;
@keyframes marquee {
from { translate: 70%; }
to { translate: -70%; }
}
}
&_blur {
position: absolute;
inset: 0;
display: grid;
place-items: center;
background-color: black;
background-image:
linear-gradient(to right, white, 1rem, transparent 50%),
linear-gradient(to left, white, 1rem, transparent 50%);
filter: contrast(15);
p {
filter: blur(0.07em);
}
}
&_clear {
position: absolute;
inset: 0;
display: grid;
place-items: center;
}
}
.text {
margin-block: 2em;
}
</style>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="content">

103
style.css Executable file
View file

@ -0,0 +1,103 @@
/*-----------------------------------------------------------------------------------*/
/* GENERAL STYLING
/*-----------------------------------------------------------------------------------*/
@import url("https://fonts.googleapis.com/css?family=Raleway:400,400i,700");
*, *::before, *::after {
padding: 0;
margin: 0 auto;
box-sizing: border-box;
}
body {
font-family: Raleway, sans-serif;
background-color: #000;
color: #fff;
font-size: 24px;
}
.content {
width: 95%;
max-width: 40ch;
padding: 3em 1em;
}
.marquee {
position: relative;
width: 100%;
height: 2em;
font-size: 5em;
display: grid;
place-items: center;
overflow: hidden;
&_text {
position: absolute;
min-width: 100%;
white-space: nowrap;
animation: marquee 16s infinite linear;
@keyframes marquee {
from { translate: 70%; }
to { translate: -70%; }
}
}
&_blur {
position: absolute;
inset: 0;
display: grid;
place-items: center;
background-color: black;
background-image:
linear-gradient(to right, white, 1rem, transparent 50%),
linear-gradient(to left, white, 1rem, transparent 50%);
filter: contrast(15);
p {
filter: blur(0.07em);
}
}
&_clear {
position: absolute;
inset: 0;
display: grid;
place-items: center;
}
}
.text {
margin-block: 2em;
}