gamerdonkey
/
tilde-town-website
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Improving containers on vaporwave landscape.

master
gamerdonkey 2021-02-18 05:51:52 +00:00
parent 29d4c0f299
commit 888627e917
2 changed files with 32 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
vaporwave/index.html
View File

@ -7,7 +7,7 @@
</head> </head>
<body> <body>
<div class="container"> <div class="landscape">
<div class="sun"></div> <div class="sun"></div>
<div class="stars"></div> <div class="stars"></div>
@ -39,7 +39,7 @@
<div class="mountain-container flipped"> <div class="mountain-container flipped">
<div class="mountain size200 right"></div> <div class="mountain size200 right"></div>
<div class="mountain"></div> <div class="mountain"></div>
<div class="mountain size200 right"></div> <div class="mountain size200 right"></div>
<div class="mountain size200"></div> <div class="mountain size200"></div>
<div class="mountain"></div> <div class="mountain"></div>
<div class="mountain left"></div> <div class="mountain left"></div>
@ -47,11 +47,13 @@
<div class="mountain size100 left"></div> <div class="mountain size100 left"></div>
</div> </div>
<div class="grid blur"></div> <div class="grid">
<div class="grid"></div> <div class="lines glow"></div>
<div class="lines"></div>
</div>
<div class="scanlines"></div> <div class="scanlines"></div>
</div><!-- container --> </div><!-- landscape -->
</body> </body>
</html> </html>

38
vaporwave/landscape.css
View File

@ -1,25 +1,30 @@
html, body {
height: 100%;
}
body { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
background: #1a001a;
display: flex; display: flex;
justify-content: space-around; align-items: center;
justify-content: center;
background: #1a001a;
} }
div.container { div.landscape {
position: absolute; position: absolute;
display: block;
width: 100%; width: 100%;
height: 100%; height: 100%;
/* margin: 80px; */ max-width: 1920px;
max-height: 1080px;
min-width: 800px;
min-height: 600px;
overflow: hidden; overflow: hidden;
/* border: 2px solid magenta; */ box-shadow: 0px 0px 30px #660066;
box-shadow: 0px 0px 30px #660066; */
} }
div.sun { div.sun {
position: absolute; position: absolute;
display: block;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: radial-gradient(circle at 50% 335px, background: radial-gradient(circle at 50% 335px,
@ -172,17 +177,24 @@ div.grid {
position: absolute; position: absolute;
height: 450px; height: 450px;
width: 200%; width: 200%;
background: linear-gradient(#222, black);
transform: translate(-25%, 370px) perspective(220px) rotateX(51deg);
}
div.grid > .lines {
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(#e765dc 1px, transparent 1px 39px, #e765dc 39px), background: linear-gradient(#e765dc 1px, transparent 1px 39px, #e765dc 39px),
linear-gradient(to right, #e765dc 1px, transparent 1px 39px, #e765dc 39px); linear-gradient(to right, #e765dc 1px, transparent 1px 39px, #e765dc 39px);
background-size: 100% 40px, 40px 100%; background-size: 100% 40px, 40px 100%;
transform: translate(-25%, 365px) perspective(220px) rotateX(51deg);
} }
div.grid.blur { div.grid > .lines.glow {
background: linear-gradient(#da22ca 1px, transparent 1px 39px, #da22ca 39px), background: linear-gradient(#da22ca 1px, transparent 1px 39px, #da22ca 39px),
linear-gradient(to right, #da22ca 1px, transparent 1px 39px, #da22ca 39px), linear-gradient(#111, black); linear-gradient(to right, #da22ca 1px, transparent 1px 39px, #da22ca 39px);
background-size: 100% 40px, 40px 100%, 100% 100%; background-size: 100% 40px, 40px 100%;
filter: blur(5px); filter: blur(4px);
} }
div.scanlines { div.scanlines {