diff --git a/.index.php.swp b/.index.php.swp new file mode 100644 index 0000000..a158003 Binary files /dev/null and b/.index.php.swp differ diff --git a/css/activities.css b/css/activities.css new file mode 100644 index 0000000..bcfafbe --- /dev/null +++ b/css/activities.css @@ -0,0 +1,32 @@ +.activities { + display: flex; + flex-direction: column; +} +.activities div { + margin: 0.5em 0; + padding: 1em; + + border-radius: var(--rad); +} +.activities div p, +.activities div h3 { + text-align: left; + + color: var(--fg-dark); +} +.activities div:first-child { + margin-top: 0; +} +.activities div:last-child { + margin-bottom: 0; +} + +#showcase { + background-color: var(--dv8-orange); +} +#demo { + background-color: var(--dv8-cyan); +} +#more { + background-color: var(--dv8-yellow); +} diff --git a/css/footer.css b/css/footer.css new file mode 100644 index 0000000..821bdb6 --- /dev/null +++ b/css/footer.css @@ -0,0 +1,67 @@ +/* + Footer +*/ +footer div a, +footer div p { + font-family: "Open Sans", sans-serif; + text-decoration: none; + + margin: 1em 0; + + display: block; + + color: var(--fg-dark); +} + +footer .top { + margin: 4em -0.5em 0.5em -0.5em; + padding: 0.5em; + + display: flex; + flex-wrap: wrap; + justify-content: space-around; + + border-radius: 1em; + background-color: var(--footer); +} +footer .top div { + margin: 0.5em; + padding: 0.5em; + + min-width: 20em; + + text-align: center; + + color: var(--fg-dark); +} +footer .madeBy { + margin: 0.5em auto; + padding: 0; + + max-width: 35em; + + display: flex; + justify-content: space-around; +} +footer .madeBy hr { + margin: 0; + padding: 0; +} +@media (max-width:470px) { + footer .madeBy { + flex-direction: column; + justify-content: center; + align-items: center; + } + footer .madeBy hr { + display: none; + } +} + +footer .madeBy p, +footer .madeBy a { + font-family: 'Lexend Deca', sans-serif; + + margin: 0; + padding: 0; +} diff --git a/css/navigation.css b/css/navigation.css new file mode 100644 index 0000000..7f5764b --- /dev/null +++ b/css/navigation.css @@ -0,0 +1,110 @@ +/* + This CSS is quite messy, this is because all of the + navigation bar is made with CSS and CSS only... +*/ + +nav { + margin: -0.5em; + padding: 0.5em 1em; + + width: calc(100% - 3em); + height: 2.5em; + + position: fixed; + z-index: 1; + + display: flex; + flex-wrap: wrap; + justify-content: space-between; + align-items: center; + + background-color: var(--nav); + border-radius: var(--rad); + user-select: none; +} + +nav .logo { + margin: 0 0.5em; + + max-height: 2.5em; + + transition: max-height 0.2s ease; +} +nav .menu { + display: flex; +} +nav .menu a, +nav .menu p { + font-family: 'Lexend Deca', sans-serif; + text-decoration: none; + + padding: 0; + margin: 0 0.5em; + + color: var(--fg-light); +} + +/* + There must be a better way of doing this +*/ + +nav .menu .about:hover { + color: var(--dv8-orange); +} +nav .menu .team:hover { + color: var(--dv8-cyan); +} +nav .menu .visitors:hover { + color: var(--dv8-yellow); +} +nav .menu .times:hover { + color: var(--dv8-magenta); +} +nav .menu .activities:hover { + color: var(--dv8-lime); +} + +/* + Toggler for the menu +*/ + +nav i { + color: var(--fg-light); +} +#toggler, +nav label { + display: none; +} + +@media (max-width:600px) { + nav { + height: auto; + } + nav .logo { + margin: 0; + + max-height: 2em; + } + nav .menu { + width: 100%; + height: auto; + max-height: 0px; + + overflow: hidden; + + display: flex; + flex-direction: column; + align-items: center; + + transition: max-height 0.2s ease; + } + nav .menu a { + margin: 1em; + } + nav label { + display: inline-flex; + } + #toggler:checked ~ .menu { + max-height: 275px; + } +} diff --git a/css/team.css b/css/team.css new file mode 100644 index 0000000..4b5446d --- /dev/null +++ b/css/team.css @@ -0,0 +1,39 @@ +#team div img { + width: 100%; + max-width: 30em; + min-width: 0; + + display: block; + object-fit: contain; + + border-radius: var(--rad); +} +#team div { + margin: 0 0 0.5em 0; + + display: flex; + flex-direction: column; + + text-align: justify; + align-items: center; +} +#teams div p { + margin: 0 !important; +} +#team div span { + margin: 0 0.5em; +} + +/* + When page is too thin, the picture and text stacks +*/ + +@media (min-width:800px) { + #team div { + display: flex; + flex-direction: row; + } + #team div img { + min-width: 20em; + } +} diff --git a/css/times.css b/css/times.css new file mode 100644 index 0000000..ea5d1e5 --- /dev/null +++ b/css/times.css @@ -0,0 +1,56 @@ +.times { + display: flex; + justify-content: space-around; +} +.times img { + margin: 0; + width: 70%; + min-height: 20em; + + object-fit: cover; + border-radius: var(--rad); +} + +.times div { + margin: 0; + padding: 0; + width: 30%; + + display: flex; + flex-direction: column; + justify-content: space-around; + align-items: center; + + background-color: var(--bg-light); +} +.times div div { + padding: 0; + + width: auto; + + text-align: center; + + display: flex; + flex-direction: row; +} + +/* + When page is too thin, the map and text stacks +*/ + +@media (max-width:900px) { + .times { + display: flex; + flex-direction: column; + } + .times img { + width: auto; + + border-radius: var(--rad); + } + .times div { + margin: 0; + padding: 2em; + width: auto; + } +} diff --git a/css/visitors.css b/css/visitors.css new file mode 100644 index 0000000..657a209 --- /dev/null +++ b/css/visitors.css @@ -0,0 +1,12 @@ +#visitors div img { + max-width: 15em; + max-height: 15em; +} + +#visitors div { + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: center; + flex-wrap: wrap; +} diff --git a/images/dv8.png b/images/dv8.png new file mode 100644 index 0000000..55c1a6b Binary files /dev/null and b/images/dv8.png differ diff --git a/images/filler.jpg b/images/filler.jpg new file mode 100644 index 0000000..6914560 Binary files /dev/null and b/images/filler.jpg differ diff --git a/images/filler2.png b/images/filler2.png new file mode 100644 index 0000000..90d48d1 Binary files /dev/null and b/images/filler2.png differ diff --git a/images/teams/RSLogo.svg b/images/teams/RSLogo.svg new file mode 100644 index 0000000..33fa5e7 --- /dev/null +++ b/images/teams/RSLogo.svg @@ -0,0 +1,537 @@ + + + + + + + + + + + + RED + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Scorpion + + + diff --git a/images/teams/Spooked_Mouse.svg b/images/teams/Spooked_Mouse.svg new file mode 100644 index 0000000..f3d9b2b --- /dev/null +++ b/images/teams/Spooked_Mouse.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/temporaryDirections.png b/images/temporaryDirections.png new file mode 100644 index 0000000..9809b16 Binary files /dev/null and b/images/temporaryDirections.png differ diff --git a/images/visitors/EpicGames.png b/images/visitors/EpicGames.png new file mode 100644 index 0000000..1356a4e Binary files /dev/null and b/images/visitors/EpicGames.png differ diff --git a/images/visitors/makereal.svg b/images/visitors/makereal.svg new file mode 100644 index 0000000..38819ca --- /dev/null +++ b/images/visitors/makereal.svg @@ -0,0 +1,33 @@ + + + + MR_Logo_No_Strap_PMS390 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/images/wiggleAfter.png b/images/wiggleAfter.png new file mode 100644 index 0000000..144ea7a Binary files /dev/null and b/images/wiggleAfter.png differ diff --git a/images/wiggleBefore.png b/images/wiggleBefore.png new file mode 100644 index 0000000..7b711a1 Binary files /dev/null and b/images/wiggleBefore.png differ diff --git a/index.php b/index.php new file mode 100644 index 0000000..d9e3ad7 --- /dev/null +++ b/index.php @@ -0,0 +1,101 @@ + + + + + + + Game Expo + + + + + + + + + + +
+
+ +

Welcome to DV8s Game Expo!

+ +
+ + + + +
+

The Team

+ +
+ +
+

About

+
+

The DV8 Game Expo is a panel run by its students, showcasing their hard work they have done during this year and a chance to show off their skills to others!

+
+
+ + + +
+

Featured Visitors

+
+ Epic Games + Make Real +
+
+ + +
+

Times and Dates

+
+
+

Friday - June

+
+ event +

24/6/2022

+
+
+ schedule +

11:00 to 16:00

+
+
+ place +

Richmond Pl, Brighton

+
+
+ directions +
+
+ + +
+

Activities

+
+
+

Game Showcase and Demos

+

Panles showing off the different teams' work and a chance to play some of the amazing works

+
+
+

Wren's Panel

+

A panel discusing how we could sucessfully implament non-binary chacters into video games. From NPCs to the main cast to the main character themselves.

+
+
+

More!

+

And many other things?!

+
+
+
+
+ + + + diff --git a/stylesheet.css b/stylesheet.css new file mode 100644 index 0000000..6da3c29 --- /dev/null +++ b/stylesheet.css @@ -0,0 +1,158 @@ +/* + I seperated out the different elements CSS into different files + this is to keep the CSS semi tidy and easier to configure if + any problems occur. +*/ + +/* UI */ +@import url("css/navigation.css"); +@import url("css/footer.css"); +/* Main */ +@import url("css/team.css"); +@import url("css/visitors.css"); +@import url("css/times.css"); +@import url("css/activities.css"); + +:root { + --nav: #151515; + --footer: #FFFFFF; + + --bg-dark: #151515; + --bg: #E8E3E3; + --bg-light: #FFFFFF; + --fg-dark: #151515; + --fg-light: #E8E3E3; + + --rad: 15px; + + --dv8-orange: #F36023; + --dv8-yellow: #FFE11C; + --dv8-cyan: #00AAB0; + --dv8-magenta:#D51E90; + --dv8-lime: #C0D939; +} +* { + font-family: "Open Sans", sans-serif; +} + +/* + Page Structure +*/ + +html { + margin: 0; + padding: 0; + scroll-behavior: smooth; +} +body { + margin: 0; + padding: 1em 1em 0; + + background-image: url(); + background-color: var(--bg); +} + +main { + margin: 0 auto; + padding: 4em 1em 1em 1em; + + max-width: 1000px; + min-height: 100vh; + + background-color: var(--bg); +} +section { + margin: 0; + padding: 6em 0 0; +} +section div { + padding: 1em; + + background-color: var(--bg-light); + border-radius: var(--rad); +} +section p { + margin: 0.5em; + + font-weight: 500; + + color: var(--fg-dark) +} + +header { + margin: 3em 0 0; + + display: flex; + justify-content: space-around; + align-items: center; +} +header img { + margin: -0.38em; + padding: 0; + + width: 4.5em; + height: 5em; +} + +/* + Text and headings +*/ + +h1 { + font-family: 'Lexend Deca', sans-serif; + + text-align: center; + font-size: 50px; +} +h2 { + font-family: 'Lexend Deca', sans-serif; + + margin: -0.5em 0.5em; + padding: 0.5em 0.5em 0.5em 1.5em; + + position: relative; + + border-radius: var(--rad); +} +h3 { + font-family: 'Lexend Deca', sans-serif; + + margin: 0.5em 0; +} + +#about h2 { + background-color: var(--dv8-orange); +} +#team h2 { + background-color: var(--dv8-cyan); +} +#visitors h2 { + background-color: var(--dv8-yellow); +} +#times h2 { + background-color: var(--dv8-magenta); +} +#activities h2 { + background-color: var(--dv8-lime); +} + +@media (max-width:600px) { + header img { + width: 3em; + height: 3em; + } + h1 { + font-size: 40px; + } + h2 { + padding-left: 0.5em; + + text-align: center; + } + main { + padding: 3em 0 0 0; + } + section { + padding: 5.5em 0 0; + } +} diff --git a/ui/footer.html b/ui/footer.html new file mode 100644 index 0000000..063d1f7 --- /dev/null +++ b/ui/footer.html @@ -0,0 +1,31 @@ + diff --git a/ui/navigationRoot.html b/ui/navigationRoot.html new file mode 100644 index 0000000..9468476 --- /dev/null +++ b/ui/navigationRoot.html @@ -0,0 +1,12 @@ + diff --git a/ui/teams.html b/ui/teams.html new file mode 100644 index 0000000..bdb845b --- /dev/null +++ b/ui/teams.html @@ -0,0 +1,15 @@ +
+ + +

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+
+
+

Again is an innovative game made towards gamers from all ends. Speedrunners and achievers, to casual gamers admiring works and the environment. With: high quality, custom made, assets; fast, fun gameplay and many ways to finish. You are surely going to have a fun time playing! Made by Leon, Bartek, Michal and Nathan.

+ + Red Scorpion logo +
+
+ Spooked Mouse SVG logo + +

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+