jonas/flufflparty-
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Colors

Browse Source
This commit is contained in:
brausjonas
2023-03-26 01:56:35 +01:00
parent d0e607e0da
commit 28e62f6b3c
5 changed files with 40 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.idea/workspace.xml
Generated
+2 -1
View File
@@ -47,6 +47,7 @@
}</component> }</component>
<component name="RecentsManager"> <component name="RecentsManager">
<key name="MoveFile.RECENT_KEYS"> <key name="MoveFile.RECENT_KEYS">
<recent name="D:\HTML\flufflparty" />
<recent name="D:\HTML\flufflparty\Temp" /> <recent name="D:\HTML\flufflparty\Temp" />
</key> </key>
</component> </component>
@@ -60,7 +61,7 @@
<updated>1679674447095</updated> <updated>1679674447095</updated>
<workItem from="1679674448294" duration="3278000" /> <workItem from="1679674448294" duration="3278000" />
<workItem from="1679754546660" duration="3762000" /> <workItem from="1679754546660" duration="3762000" />
<workItem from="1679776338023" duration="6712000" /> <workItem from="1679776338023" duration="7774000" />
</task> </task>
<servers /> <servers />
</component> </component>
StartPage.js
+2 -2
View File
@@ -4,7 +4,7 @@ function showMobileMenuBar()
{ {
if(!menuActive) { if(!menuActive) {
document.getElementById("mobileMenuBar").style.display = "block"; document.getElementById("mobileMenuBar").style.display = "block";
document.getElementById("mobileMenuBarButton").style.backgroundColor = "rgba(198, 119, 70, 0.5)"; document.getElementById("mobileMenuBarButton").style.backgroundColor = "#B6E2A1";
menuActive = true; menuActive = true;
} }
else else
@@ -16,6 +16,6 @@ function showMobileMenuBar()
function hideMobileMenuBar() function hideMobileMenuBar()
{ {
document.getElementById("mobileMenuBar").style.display = "none"; document.getElementById("mobileMenuBar").style.display = "none";
document.getElementById("mobileMenuBarButton").style.backgroundColor = "rgba(198, 119, 70, 0)"; document.getElementById("mobileMenuBarButton").style.backgroundColor = "rgba(0, 0, 0, 0)";
menuActive = false; menuActive = false;
} }
index.html
+5 -75
View File
@@ -11,12 +11,12 @@
<header> <header>
<button><a href="#mainHeader">IO Game Studios</a></button> <button>IO Game Studios</button>
<nav> <nav>
<!-- Desktop--> <!-- Desktop-->
<ul> <ul>
<li class="highlighted">Home</li>
<li>Games</li> <li>Games</li>
<li>Quicklinks</li> <li>Quicklinks</li>
<li>About</li> <li>About</li>
@@ -45,82 +45,12 @@
</div> </div>
</menu> </menu>
<div> <div class="contentArea">
<h1 id="mainHeader">We create games like back in the days</h1> <h1 id="mainHeader">We create games like back in the days</h1>
<br/> <div id="mainPageGames">
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
</div>
</div> </div>
</body> </body>
mainPage.css
+14 -3
View File
@@ -4,9 +4,14 @@ General
------------------------------------------------------------------------------------------ ------------------------------------------------------------------------------------------
*/ */
body { @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');
background-image: linear-gradient(#c67746, #88b3ae);
height: 100%; * {
font-family: "Poppins", sans-serif;
box-sizing: border-box;
margin: 0;
padding: 0;
font-size: 16px;
} }
h1 { h1 {
@@ -17,3 +22,9 @@ h1 {
color: #41423f; color: #41423f;
} }
.contentArea
{
display: flex;
flex-direction: column;
}
navigationStyle.css
+17 -34
View File
@@ -1,7 +1,8 @@
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');
* { * {
font-family: "Roboto Light", sans-serif; font-family: "Poppins", sans-serif;
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
padding: 0; padding: 0;
@@ -16,7 +17,7 @@ Desktop
/*basic li a and button setup*/ /*basic li a and button setup*/
li, a, button { li, a, button {
font-weight: 500; font-weight: 500;
color: white; color: black;
text-decoration: none; text-decoration: none;
} }
@@ -28,7 +29,7 @@ header {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 10px 100px; padding: 10px 100px;
background-color: #41423f; background-color: #FFFBC1;
} }
/*IO Game Studios button (only navigation)*/ /*IO Game Studios button (only navigation)*/
@@ -36,7 +37,7 @@ header button {
padding: 20px; padding: 20px;
border-radius: 50px; border-radius: 50px;
border-style: none; border-style: none;
background-color: #88b3ae; background-color: #F7A4A4;
cursor: pointer; cursor: pointer;
} }
@@ -49,36 +50,18 @@ nav li {
} }
nav li:hover { nav li:hover {
color: #88b3ae; color: #B6E2A1;
} }
/*Dropdown*/
nav ul li div {
display: none;
position: absolute;
background-color: #41423f;
border-radius: 50px;
padding-top: 70px;
margin-left: -50px;
padding-bottom: 10px;
}
nav ul li div ul {
display: flex;
flex-direction: column;
}
nav ul li div ul li {
padding: 0 0 10px 20px;
text-align: center;
}
nav ul li div ul li button {
padding: 20px;
}
header button:hover { header button:hover {
background-color: rgba(198, 119, 70, 0.5); background-color: #B6E2A1;
}
.highlighted
{
color: #F7A4A4;
} }
/*Mobile Excluded*/ /*Mobile Excluded*/
@@ -118,7 +101,7 @@ Mobile
/*Style the Menu Icon*/ /*Style the Menu Icon*/
nav svg { nav svg {
color: white; color: black;
width: 30px; width: 30px;
height: 30px; height: 30px;
} }
@@ -126,7 +109,7 @@ Mobile
menu div { menu div {
float: right; float: right;
background-color: #41423f; background-color: #FFFBC1;
border-radius: 0 0 0 50px; border-radius: 0 0 0 50px;
padding-bottom: 15px; padding-bottom: 15px;
} }
@@ -143,10 +126,10 @@ Mobile
margin: 5px 30px; margin: 5px 30px;
cursor: pointer; cursor: pointer;
border-radius: 50px; border-radius: 50px;
background-color: rgba(136, 179, 174, 1); background-color: #F7A4A4;
} }
menu div ul li:hover { menu div ul li:hover {
background-color: rgba(198, 119, 70, 0.5); background-color: #B6E2A1;
} }
} }