diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/1.css b/1.css new file mode 100644 index 0000000..73aa381 --- /dev/null +++ b/1.css @@ -0,0 +1,296 @@ +/*# sourceMappingURL=index.css.map */ +body{ + background: url(mainmenu.png) no-repeat center center fixed; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + background-size: cover; + margin: auto; + display: flex; + flex-direction: column; + width: 90%; + } + .main{ + display: flex; + justify-content: space-between; + flex-flow:row nowrap; + align-items: center; + flex-direction: row; + width: 68%; + margin: 20px auto; +} + a{ + display: inline-block; + word-break: keep-all; + text-decoration: none; + color: #fff; + font-family: "Montserrat"; + border-radius: 29px; + border: solid 1px rgb(53, 81, 93) ; + background: rgb(17, 52, 70, 53%); + text-transform: uppercase; + overflow: hidden; + padding: 8px 14px; + font-size: 16px; + } + +.next{ + padding: 0px 8px 0px 8px; + text-align: center; + font-weight: 500; +} +.logo{ + align-items: center; +} +.logo1{ + margin-right: 26px; + height: 35px; + width: 137.79px; + align-items:center; +} +.logo2{ + height: 38px; + width: 99px; + margin-top: 6px; +} + +.button{ + display:inline-block; + text-align: center; + margin-top: 12px; + overflow: hidden; + +} +.button1{ + margin-right: 16px; + padding: 10px 8px; + width: 200px; + text-align: center; +} +.button2{ + width: 141px; + padding: 10px 8px; + text-align: center; +} +.container{ + display: flex; + flex-direction: column; + width: 100%; +} +.tag{ + margin-top: 200px; + display: flex; + flex-direction: column; + justify-content: center; +} +.tag1{ + font-size: 30px; + margin: 4px 0px 1px 0px; + font-family: "Montserrat"; + color: #fff; + text-align: center; + font-weight: lighter; + text-transform: uppercase; + +} +.tag2{ + font-size: 60px; + margin: 0px auto; + font-family: "Montserrat"; + color: #fff; + text-align: center; + font-weight: 500; + text-transform: uppercase; +} + +.group{ + display: flex; + min-block-size: 600px; + flex-direction: row; + flex-wrap: wrap; + justify-content:center; + min-width: 281.44px; + gap: 10px ; +} +.group > * { + align-items: center; + margin: 10px; + } + +.group1{ + background-image: url("Path 6 Copy.png"); + position: relative; + background-repeat: no-repeat;; + min-height: 350px; + min-width: 281.44px; + margin-top: 150px; +} +.group1 h1{ + font-size: 32px; + font-family: "Montserrat"; + font-weight: 500; + color: rgb(255, 255, 255, 0.5); + text-transform: uppercase; + margin-top: 280px; + margin-left: 35px; +} + +.oval{ + margin: 70px 10px 10px 70px; + overflow: hidden; + position: absolute; + opacity: 50%; +} + +.bglogo{ + position: absolute; + margin-top: 115px; + margin-left: 115px; + height: 52px; + width: 60.54px; + opacity: 50%; + +} +.group2{ + background-image: url("Path 6 Copy.png"); + background-repeat: no-repeat; + height: 350px; + min-width: 281.44px; + margin-top: 150px; + +} +.group3{ + background-image: url("Path 6 Copy.png"); + background-repeat: no-repeat; + height: 350px; + min-width: 281.44px; + margin-top: 150px; + +} +.group4{ + background-image: url("Path 6 Copy.png"); + background-repeat: no-repeat; + height: 350px; + min-width: 281.44px; + margin-top: 150px; +} +.group2 h1{ + font-size: 32px; + font-family: "Montserrat"; + font-weight: 500; + color: rgb(255, 255, 255, 0.5); + text-transform: uppercase; + margin-top: 280px; + margin-left: 10px; +} +.oval0{ + margin: 70px 10px 10px 70px; + overflow: hidden; + position: absolute; + opacity: 50%; +} + +.bglogo0{ + position: absolute; + margin-top: 105px; + margin-left: 120px; + height: 69px; + opacity: 50%; + +} + +.group3 h1{ + font-size: 32px; + font-family: "Montserrat"; + font-weight: 500; + color: rgb(255, 255, 255, 0.5); + text-transform: uppercase; + margin-top: 280px; + margin-left: 25px; +} +.oval1{ + margin: 70px 10px 10px 70px; + overflow: hidden; + position: absolute; + opacity: 50%; +} + +.bglogo1{ + position: absolute; + margin-top: 100px; + margin-left: 130px; + height: 82px; + opacity: 50%; +} + +.group4 h1{ + font-size: 32px; + font-family: "Montserrat"; + font-weight: 500; + color: rgb(255, 255, 255,0.53); + text-transform: uppercase; + margin-top: 280px; + margin-left: 35px; +} +.oval2{ + margin: 70px 10px 10px 70px; + overflow: hidden; + position: absolute; + opacity: 50%; +} + +.bglogo2{ + position: absolute; + margin-top: 120px; + margin-left: 130px; + height: 44px; + opacity: 50%; + +} +.group1:hover,.group2:hover,.group3:hover,.group4:hover{ + background-image: url("Path 6.png"); + color: #fff; +} +.group4:hover h1,.group3:hover h1,.group2:hover h1,.group1:hover h1{ + color: #fff; + opacity: 100%; +} +.group1:hover .bglogo,.group2:hover .bglogo0, .group3:hover .bglogo1, .group4:hover .bglogo2,.group1:hover .oval,.group2:hover .oval0,.group3:hover .oval1,.group4:hover .oval2{ + opacity: 100%; +} + +@media screen and (max-width: 1600px) { + .main{ + width: 90%; + } + + } +@media screen and (max-width: 1400px) { + .container{ + width: 72%; + display: flex; + flex-direction: column; + margin: auto; + justify-content: center; + } + .tag{ + margin-top: 100px; + } + .group1{ + margin-top: 50px; + } + .group2{ + margin-top: 50px; + } + .group3{ + margin-top: 20px; + } + .group4{ + margin-top: 20px ; + } + .main{ + width: 100%; + } + + } + \ No newline at end of file diff --git a/1.html b/1.html new file mode 100644 index 0000000..a9f8584 --- /dev/null +++ b/1.html @@ -0,0 +1,56 @@ + + + + + + + + Game Rules-1 + + +
+ +
+ Next6 CONNECTED + NextLog out +
+
+ + +
+
+

Virtual Escape Presents

+

Time's Ticking

+
+
+
+ + oval +

OUr games

+ +
+
+ bglogo + oval +

Leaderboard

+ +
+
+ bglogo + oval +

How TO PLAY

+ +
+
+ bglogo + oval +

START GAME

+ +
+
+
+ + \ No newline at end of file diff --git a/Group 3 Copy 2.png b/Group 3 Copy 2.png new file mode 100644 index 0000000..9adc3a3 Binary files /dev/null and b/Group 3 Copy 2.png differ diff --git a/Group 4.png b/Group 4.png new file mode 100644 index 0000000..43e45e5 Binary files /dev/null and b/Group 4.png differ diff --git a/Group 8.png b/Group 8.png new file mode 100644 index 0000000..1b3a75d Binary files /dev/null and b/Group 8.png differ diff --git a/Image 7.png b/Image 7.png new file mode 100644 index 0000000..8acce8f Binary files /dev/null and b/Image 7.png differ diff --git a/Image 8.png b/Image 8.png new file mode 100644 index 0000000..5e248e2 Binary files /dev/null and b/Image 8.png differ diff --git a/Oval 3.png b/Oval 3.png new file mode 100644 index 0000000..283133b Binary files /dev/null and b/Oval 3.png differ diff --git a/Path 5.png b/Path 5.png new file mode 100644 index 0000000..e20b149 Binary files /dev/null and b/Path 5.png differ diff --git a/Path 6 Copy 3.png b/Path 6 Copy 3.png new file mode 100644 index 0000000..8831e63 Binary files /dev/null and b/Path 6 Copy 3.png differ diff --git a/Path 6 Copy.png b/Path 6 Copy.png new file mode 100644 index 0000000..f273cfb Binary files /dev/null and b/Path 6 Copy.png differ diff --git a/Path 6.png b/Path 6.png new file mode 100644 index 0000000..ced46ee Binary files /dev/null and b/Path 6.png differ diff --git a/asset1.png b/asset1.png new file mode 100644 index 0000000..8a986e5 Binary files /dev/null and b/asset1.png differ diff --git a/index.css b/index.css new file mode 100644 index 0000000..198e3bb --- /dev/null +++ b/index.css @@ -0,0 +1,98 @@ +@import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap"); +:root { + /* basic color palette */ + --white-1: hsl(0, 0%, 100%); + --white-2: hsl(0, 0%, 90%); + --black-1: hsl(0, 0%, 0%); + --red-1: hsl(0, 70%, 40%); + --red-2: hsl(0, 70%, 80%); + /* fonts */ + --ft-fy-fallback-1: sans-serif; + --ft-fy-1: "Lato", var(--ft-fy-fallback-1); + --ft-wt-600: 600; + --ft-se-500: 1.55rem; + --ft-se-400: 1.02rem; +} + +/* reset */ +*, +*::before, +*::after { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* components */ +.page { + color: var(--black-1); + background-color: var(--white-1); + font-family: var(--ft-fy-1); +} + +.topbar { + --cr: var(--white-1); + --bd-cr: var(--red-1); + color: var(--white-1); + display: flex; + padding: 20px; + justify-content: space-between; + align-items: center; + background-color: var(--bd-cr); +} + +.logo { + color: var(--cr, var(--white-1)); + background-color: var(--bd-cr, var(--red-1)); + font-size: var(--ft-se-500); + font-weight: var(--ft-wt-600); + text-decoration: none; +} +.logo:hover { + --cr: var(--red-2, var(--white-2)); +} + +.nav { + --__link_pg: 0.7em 1em; + --__link_cr: inherit; + --__link_ft-se: var(--ft-se-400); + color: var(--cr, var(--white-1)); + background-color: var(--bd-cr, var(--red-1)); +} +.nav__list { + display: flex; + align-items: center; +} +.nav__item { + list-style-type: none; +} +.nav__item_active { + --__link_cr: var(--red-1); + background-color: var(--white-1); + border-radius: 6px; +} +.nav__link { + padding: var(--__link_pg); + color: var(--__link_cr); + display: block; + font-size: var(--__link_ft-se); + text-decoration: none; +} +.nav__link:hover:not(.nav__item_active .nav__link) { + --__link_cr: var(--red-2); +} + +@media (max-width: 550px) { + .topbar { + gap: 1em; + align-items: initial; + flex-direction: column; + } + + .nav__list { + flex-direction: column; + } + .nav__item { + width: 100%; + } +} \ No newline at end of file diff --git a/index.css.map b/index.css.map new file mode 100644 index 0000000..cfbcf60 --- /dev/null +++ b/index.css.map @@ -0,0 +1 @@ +{"version":3,"sources":[],"names":[],"mappings":"","file":"index.css"} \ No newline at end of file diff --git a/index.sass b/index.sass new file mode 100644 index 0000000..e69de29 diff --git a/logo1.png b/logo1.png new file mode 100644 index 0000000..10a34a8 Binary files /dev/null and b/logo1.png differ diff --git a/logo2.png b/logo2.png new file mode 100644 index 0000000..bf55aa3 Binary files /dev/null and b/logo2.png differ diff --git a/mainmenu.png b/mainmenu.png new file mode 100644 index 0000000..3dfcbbc Binary files /dev/null and b/mainmenu.png differ