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

Desiignn

Browse Source
This commit is contained in:
brausjonas
2023-03-26 03:46:36 +02:00
parent 1727e5356c
commit 6f904c5b95
6 changed files with 244 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.idea/workspace.xml
Generated
+2 -2
View File
@@ -13,9 +13,9 @@
<component name="FileTemplateManagerImpl">
<option name="RECENT_TEMPLATES">
<list>
<option value="HTML File" />
<option value="JavaScript File" />
<option value="CSS File" />
<option value="HTML File" />
</list>
</option>
</component>
@@ -61,7 +61,7 @@
<updated>1679674447095</updated>
<workItem from="1679674448294" duration="3278000" />
<workItem from="1679754546660" duration="3762000" />
<workItem from="1679776338023" duration="8024000" />
<workItem from="1679776338023" duration="10678000" />
</task>
<servers />
</component>
games.html
+62
View File
@@ -0,0 +1,62 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>IO Game Studios | Games</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="navigationStyle.css">
<link rel="stylesheet" href="mainPage.css">
</head>
<body onresize="hideMobileMenuBar()">
<header>
<button>IO Game Studios</button>
<nav>
<!-- Desktop-->
<ul>
<li><a href="index.html">Home</a></li>
<li><a class="highlighted" href="games.html">Games</a></li>
<li><a href="quicklinks.html">Quicklinks</a></li>
<li>About</li>
</ul>
<!--Mobile-->
<button onclick="showMobileMenuBar()" id="mobileMenuBarButton">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
</svg>
</button>
</nav>
</header>
<!--Mobile-->
<menu id="mobileMenuBar">
<div>
<ul>
<li><a href="index.html">Home</a></li>
<li class="highlighted"><a href="games.html">Games</a></li>
<li><a href="quicklinks.html">Quicklinks</a></li>
<li>About</li>
</ul>
</div>
</menu>
<!--Menu Ends here-->
<div class="contentArea">
<div id="mainPageGames">
</div>
</div>
</body>
<script src="StartPage.js"></script>
</html>
index.html
+29 -7
View File
@@ -16,9 +16,9 @@
<nav>
<!-- Desktop-->
<ul>
<li class="highlighted">Home</li>
<li>Games</li>
<li>Quicklinks</li>
<li><a class="highlighted" href="index.html">Home</a></li>
<li><a href="games.html">Games</a></li>
<li><a href="quicklinks.html">Quicklinks</a></li>
<li>About</li>
</ul>
@@ -35,11 +35,11 @@
<menu id="mobileMenuBar">
<div>
<ul>
<li class="highlighted">Home</li>
<li class="highlighted" ><a href="index.html">Home</a></li>
<li>Games</li>
<li><a href="games.html">Games</a></li>
<li>Quicklinks</li>
<li><a href="quicklinks.html">Quicklinks</a></li>
<li>About</li>
</ul>
@@ -49,10 +49,32 @@
<!--Menu Ends here-->
<div class="contentArea">
<h1 id="mainHeader">We create games like back in the days</h1>
<h1 style="color: #F7A4A4">We create games like back in the days</h1>
<h2>Have a look at our games and contents!</h2>
<div id="mainPageGames">
<div class="color3">
<h2>FlufflParty</h2>
<p>
FlufflParty is the new partygame for mobile and pc.
Play free and online with your friends. NO ADS.
</p>
<button class="color1">Visit now</button>
</div>
<div class="color1">
<h2>Characters</h2>
<p>
In FlufflParty there are witing many maps and cute characters for you!
</p>
<button class="color2">Review</button>
</div>
<div class="color2">
<h2>Coming Soon</h2>
</div>
</div>
</div>
mainPage.css
+89
View File
@@ -26,5 +26,94 @@ h1 {
{
display: flex;
flex-direction: column;
align-items: center;
}
.color1
{
background-color: #F7A4A4;
}
.color2
{
background-color: #FEBE8C;
}
.color3
{
background-color: #B6E2A1;
}
h2
{
font-size: 22px;
text-align: center;
padding: 20px;
color: #41423f;
}
#mainPageGames
{
display: flex;
align-items: center;
justify-content: center;
}
@media (max-width: 18cm)
{
#mainPageGames
{
flex-direction: column;
}
}
#mainPageGames div
{
min-height: 300px;
max-height: 300px;
border-radius: 50px;
margin: 10px;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
justify-items: center;
flex-direction: column;
}
@media (min-width: 18.1cm)
{
#mainPageGames div
{
min-width: 30%;
max-width: 30%;
}
}
@media (max-width: 18cm)
{
#mainPageGames div
{
min-width: 80%;
max-width: 80%;
}
}
#mainPageGames p
{
color: #41423f;
text-align: center;
}
#mainPageGames button
{
margin-top: 20px;
border-radius: 50px;
border-style: none;
color: #41423f;
cursor: pointer;
padding: 15px;
}
navigationStyle.css
+1 -1
View File
@@ -17,7 +17,7 @@ Desktop
/*basic li a and button setup*/
li, a, button {
font-weight: 500;
color: black;
color: #41423f;;
text-decoration: none;
}
quicklinks.html
+61
View File
@@ -0,0 +1,61 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>IO Game Studios</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="navigationStyle.css">
<link rel="stylesheet" href="mainPage.css">
</head>
<body onresize="hideMobileMenuBar()">
<header>
<button>IO Game Studios</button>
<nav>
<!-- Desktop-->
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="games.html">Games</a></li>
<li><a class="highlighted" href="quicklinks.html">Quicklinks</a></li>
<li>About</li>
</ul>
<!--Mobile-->
<button onclick="showMobileMenuBar()" id="mobileMenuBarButton">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
</svg>
</button>
</nav>
</header>
<!--Mobile-->
<menu id="mobileMenuBar">
<div>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="games.html">Games</a></li>
<li class="highlighted"><a href="quicklinks.html">Quicklinks</a></li>
<li>About</li>
</ul>
</div>
</menu>
<!--Menu Ends here-->
<div class="contentArea">
<div id="mainPageGames">
</div>
</div>
</body>
<script src="StartPage.js"></script>
</html>