Footer etc.

This commit is contained in:
brausjonas
2023-03-26 18:05:23 +02:00
parent d56d16c19a
commit ecc532e7f5
7 changed files with 56 additions and 15 deletions
+2 -2
View File
@@ -14,8 +14,8 @@
<option name="RECENT_TEMPLATES"> <option name="RECENT_TEMPLATES">
<list> <list>
<option value="JavaScript File" /> <option value="JavaScript File" />
<option value="CSS File" />
<option value="HTML File" /> <option value="HTML File" />
<option value="CSS File" />
</list> </list>
</option> </option>
</component> </component>
@@ -62,7 +62,7 @@
<workItem from="1679674448294" duration="3278000" /> <workItem from="1679674448294" duration="3278000" />
<workItem from="1679754546660" duration="3762000" /> <workItem from="1679754546660" duration="3762000" />
<workItem from="1679776338023" duration="11768000" /> <workItem from="1679776338023" duration="11768000" />
<workItem from="1679841996008" duration="2668000" /> <workItem from="1679841996008" duration="4647000" />
</task> </task>
<servers /> <servers />
</component> </component>
+8
View File
@@ -0,0 +1,8 @@
footer
{
margin-top: 50px;
padding: 30px 0;
text-align: center;
font-size: 20px;
background-color: #ffe2c1;
}
BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 393 KiB

+1 -1
View File
@@ -51,7 +51,7 @@
<div class="contentArea"> <div class="contentArea">
<div id="mainPageGames"> <div id="mainPageCards">
</div> </div>
+25 -1
View File
@@ -7,6 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="navigationStyle.css"> <link rel="stylesheet" href="navigationStyle.css">
<link rel="stylesheet" href="mainPage.css"> <link rel="stylesheet" href="mainPage.css">
<link rel="stylesheet" href="Footerstyle.css">
</head> </head>
<body onresize="hideMobileMenuBar()"> <body onresize="hideMobileMenuBar()">
@@ -59,7 +60,7 @@
<h1 style="color: #F7A4A4;">Short overview</h1> <h1 style="color: #F7A4A4;">Short overview</h1>
<div id="mainPageGames"> <div class="mainPageCards">
<div class="color3"> <div class="color3">
<h2>We</h2> <h2>We</h2>
<p> <p>
@@ -76,8 +77,31 @@
<h2>Coming Soon</h2> <h2>Coming Soon</h2>
</div> </div>
</div> </div>
<button>Learn More</button>
<h1 style="color: #F7A4A4">Have a look at our games page</h1>
<div class="mainPageCards">
<div class="flufflPartyCard">
<h2>FlufflParty</h2>
<p>
An online multiplayer party game to have fun with your friends. Cool minigames action and more.
</p>
</div>
<div class="color3">
<h2>Coming Soon</h2>
</div>
<div class="color2">
<h2>Coming Soon</h2>
</div>
</div>
<button>Visit Games Page</button>
</div> </div>
</body> </body>
<footer>IOGameStudios 2023</footer>
<script src="StartPage.js"></script> <script src="StartPage.js"></script>
</html> </html>
+19 -10
View File
@@ -53,7 +53,7 @@ h2
color: #41423f; color: #41423f;
} }
#mainPageGames .mainPageCards
{ {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -62,13 +62,13 @@ h2
@media (max-width: 18cm) @media (max-width: 18cm)
{ {
#mainPageGames .mainPageCards
{ {
flex-direction: column; flex-direction: column;
} }
} }
#mainPageGames div .mainPageCards div
{ {
min-height: 300px; min-height: 300px;
max-height: 300px; max-height: 300px;
@@ -82,7 +82,7 @@ h2
@media (min-width: 18.1cm) @media (min-width: 18.1cm)
{ {
#mainPageGames div .mainPageCards div
{ {
min-width: 30%; min-width: 30%;
max-width: 30%; max-width: 30%;
@@ -91,7 +91,7 @@ h2
@media (max-width: 18cm) @media (max-width: 18cm)
{ {
#mainPageGames div .mainPageCards div
{ {
min-width: 80%; min-width: 80%;
max-width: 80%; max-width: 80%;
@@ -99,25 +99,34 @@ h2
} }
#mainPageGames div h2 .mainPageCards div h2
{ {
margin-bottom: 40px; margin-bottom: 40px;
} }
#mainPageGames p .mainPageCards p
{ {
color: #41423f; color: #41423f;
text-align: center; text-align: center;
font-size: 18px;
} }
#mainPageGames button .contentArea button
{ {
margin-top: 20px; margin-top: 20px;
border-radius: 50px; border-radius: 50px;
border-style: none; border-style: none;
color: #41423f; background-image: linear-gradient(#F7A4A4, #FEBE8C);
cursor: pointer; cursor: pointer;
padding: 15px; padding: 15px 50px;
}
.flufflPartyCard
{
background-image: url("Icon.png"), linear-gradient(#F7A4A4, #FEBE8C);
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
} }
.imageFull .imageFull
+1 -1
View File
@@ -50,7 +50,7 @@
<div class="contentArea"> <div class="contentArea">
<div id="mainPageGames"> <div id="mainPageCards">
</div> </div>