From 802361eb5dab1f3292d99248be053ed8800921d1 Mon Sep 17 00:00:00 2001 From: Franco Date: Wed, 17 Jan 2024 16:45:35 -0800 Subject: [PATCH] added spot for side bars --- index.html | 279 +++++++++++++++++++++++++++-------------------------- style.css | 28 ++++-- 2 files changed, 162 insertions(+), 145 deletions(-) diff --git a/index.html b/index.html index 15d7c29..dbfb673 100644 --- a/index.html +++ b/index.html @@ -1,142 +1,143 @@ - - - - - - SANDTRIS - - - - - - - - - -
-
- -
- -
-

SANDTRIS

-
- - -
-
- -

MADE BY FRANCO MIRANDA USING P5.JS

- -

INSPIRED BY SETRIS BY - MSLIVO

-
- CONTROLS -

Move Block: Left/Right Arrows

-

Move Down Faster: Down Arrow

-

Spin Block: Up Arrow

-

Pause: P

-
-

Connect the same color
across the screen to clear lines!

-
-

NOT AFFILIATED WITH Tetris®

-
- -
- - - -
-
- Welcome to - - -
- -

-

Level:

- - -

- MUS - - -
- SFX - - -

- -
- - - - - -
-
- PAUSED -

- -

- -

- MUS - -
- SFX - -
- - - -
-
- GAME OVER -
-

- - - -

- -
- - -
LOADING
-
-
- + + SANDTRIS + + + + + + + + +
+
+ +
+
+

SANDTRIS

+ +
+
+ +

MADE BY FRANCO MIRANDA USING P5.JS

+

INSPIRED BY SETRIS BY + MSLIVO +

+
+ CONTROLS +

Move Block: Left/Right Arrows

+

Move Down Faster: Down Arrow

+

Spin Block: Up Arrow

+

Pause: P

+
+

Connect the same color
across the screen to clear lines!

+
+

NOT AFFILIATED WITH Tetris®

+
+ +
+ + +
+
+ Welcome to + +
+ +

+

Level:

+ +

+ MUS + +
+ SFX + +

+ +
+ + +
+
+ PAUSED +

+ +

+ +

+ MUS + +
+ SFX + +
+ + +
+
+ GAME OVER +
+

+ +

+ +
+ +
+
+ + + + +
+ +
+
LOADING
+
+
+ + + + +
+
+
+ diff --git a/style.css b/style.css index 0ef257d..28215f4 100644 --- a/style.css +++ b/style.css @@ -55,16 +55,32 @@ h1{ text-shadow: 0px 4px rgb(73, 62, 46); } -#cnv{ +#main{ position: absolute; - background-color: var(--desert-brown); - width: 590px; - height: 640px; - + z-index: 0; + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-gap: 20px; + height:660px; + width: 1100px; top:50%; left:50%; transform: translate(-50%,-50%); - z-index: 0; + +} + +.ads{ + width: 200px; + height: 640px; + + padding: 10px; +} + +#cnv{ + + background-color: var(--desert-brown); + width: 590px; + height: 640px; padding: 10px; box-shadow: 0px 16px var(--desert-browndark);