diff --git a/glass-website/images/assassins.png b/glass-website/images/assassins.png new file mode 100644 index 0000000..79e9270 Binary files /dev/null and b/glass-website/images/assassins.png differ diff --git a/glass-website/images/avatar.png b/glass-website/images/avatar.png new file mode 100644 index 0000000..4226864 Binary files /dev/null and b/glass-website/images/avatar.png differ diff --git a/glass-website/images/controller.png b/glass-website/images/controller.png new file mode 100644 index 0000000..e78505b Binary files /dev/null and b/glass-website/images/controller.png differ diff --git a/glass-website/images/gojo.png b/glass-website/images/gojo.png new file mode 100644 index 0000000..c3d3f0b Binary files /dev/null and b/glass-website/images/gojo.png differ diff --git a/glass-website/images/gojo_dp .png b/glass-website/images/gojo_dp .png new file mode 100644 index 0000000..c3d3f0b Binary files /dev/null and b/glass-website/images/gojo_dp .png differ diff --git a/glass-website/images/library.png b/glass-website/images/library.png new file mode 100644 index 0000000..67f4d92 Binary files /dev/null and b/glass-website/images/library.png differ diff --git a/glass-website/images/sackboy.png b/glass-website/images/sackboy.png new file mode 100644 index 0000000..bdf2aef Binary files /dev/null and b/glass-website/images/sackboy.png differ diff --git a/glass-website/images/spiderman.png b/glass-website/images/spiderman.png new file mode 100644 index 0000000..b7b5fac Binary files /dev/null and b/glass-website/images/spiderman.png differ diff --git a/glass-website/images/steam.png b/glass-website/images/steam.png new file mode 100644 index 0000000..f0bccef Binary files /dev/null and b/glass-website/images/steam.png differ diff --git a/glass-website/images/twitch.png b/glass-website/images/twitch.png new file mode 100644 index 0000000..2114acd Binary files /dev/null and b/glass-website/images/twitch.png differ diff --git a/glass-website/images/upcoming.png b/glass-website/images/upcoming.png new file mode 100644 index 0000000..85eba05 Binary files /dev/null and b/glass-website/images/upcoming.png differ diff --git a/glass-website/index.html b/glass-website/index.html new file mode 100644 index 0000000..f5b94a6 --- /dev/null +++ b/glass-website/index.html @@ -0,0 +1,85 @@ + + + + + + + Glass Website + + + + + + +
+
+
+
+ +

Blackfury

+

Pro Member

+
+
+
+ +

Streams

+
+
+ +

Games

+
+ +

New

+
+
+ +

Library

+
+
+
+

Join pro for free games.

+ +
+
+
+
+

Active Games

+ +
+
+
+ +
+

Assassins Creed Valhalla

+

PS5 Version

+
+
+

60%

+
+
+ +
+

Sackboy A Great Adventure

+

PS5 Version

+
+
+

60%

+
+
+ +
+

Spiderman Miles Morales

+

PS5 Version

+
+
+

60%

+
+
+
+ +
+
+
+
+ + \ No newline at end of file diff --git a/glass-website/style.css b/glass-website/style.css new file mode 100644 index 0000000..1571344 --- /dev/null +++ b/glass-website/style.css @@ -0,0 +1,180 @@ +* { + margin: 0; + padding:0; + box-sizing: border-box; +} + +h1{ + color: #426696; + font-weight: 600; + font-size: 3rem; + opacity: 0.8; +} +h2,p{ + color:#658ec6; + font-weight: 500; + opacity: 0.8; +} + +h3{ + color: #426696; + font-weight: 600; + opacity: 0.8; +} + +main{ + font-family: "Poppins", sans-serif; + min-height : 100vh; + background: linear-gradient(to right top,#65dfc9, #6cdbeb); + display: flex; + align-items: center; + justify-content:center; +} + +.glass{ + background: white; + min-height: 80vh; + width: 60%; + background: linear-gradient(to right bottom, + rgba(255,255,255,0.7), + rgba(255,255,255,0.3)); + border-radius: 2rem; + z-index: 3; + backdrop-filter: blur(2rem); + display: flex; +} + +.circle1, .circle2{ + background: white; + + background: linear-gradient(to right bottom, + rgba(255,255,255,0.8), + rgba(255,255,255,0.3)); + height: 20rem; + width: 20rem; + position: absolute; + border-radius: 50%; +} + +.circle1{ + top:5%; + right:15%; + /* background :red; */ +} + +.circle2{ + bottom: 5%; + left: 10%; +} + +.dashboard{ + flex:1; + display:flex; + flex-direction: column; + align-items: center; + justify-content: space-evenly; + text-align: center; + background: linear-gradient(to right bottom, + rgba(255,255,255,0.7), + rgba(255,255,255,0.3)); + border-radius: 2rem; +} + +.link{ + display:flex; + margin: 2rem 0rem; + padding: 1rem 5rem; + align-items: center; +} +.link h2{ + padding: 0rem 2rem; +} + +.games{ + flex:2; +} + +.pro{ + background: linear-gradient(to right top,#65dfc9, #6cdbeb); + border-radius: 2rem; + color:white; + padding: 1rem; + /* display: flex; */ + position:relative; +} + +.pro img{ + position: absolute; + top: -10%; +} +.pro h2{ + width:40%; + color: white; + font-weight:600; +} + +/* GAMES */ +.status{ + margin-bottom: 3rem; +} +.status input{ + background: linear-gradient(to right bottom, + rgba(255,255,255,0.7), + rgba(255,255,255,0.3)); + border: none; + width: 50%; + padding: 0.5rem; + border-radius: 2rem; + +} + +.games{ + margin: 5rem; + display:flex; + flex-direction:column; + justify-content: space-evenly; +} + +.card{ + display: flex; + background: linear-gradient(to left top, + rgba(255,255,255,0.8), + rgba(255,255,255,0.5)); + border-radius: 1rem; + margin: 2rem 0rem; + padding: 2rem; + box-shadow: 6px 6px 20px rgba(122,122,122,0.2); + justify-content: space-between; +} + +.progress{ + background: linear-gradient(to right top,#65dfc9, #6cdbeb); + width: 100%; + height: 25%; + border-radius: 1rem; + position: relative; + overflow: hidden; +} +/* the right side of the progress bar */ +.progress::after{ + content: ""; + width: 100%; + height: 100%; + background: rgb(236,236,236); + position: absolute; + left:60%; +} + +.card-info{ + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.percentage{ + font-weight: bold; + background: linear-gradient(to right top,#65dfc9, #6cdbeb); + -webkit-background-clip: text; + /* To add the linear gradient to the text */ + -webkit-text-fill-color: transparent; +}