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

Better

Browse Source
This commit is contained in:
brausjonas
2023-03-25 21:57:41 +01:00
parent d42e8b34e9
commit 4343a6b019
5 changed files with 215 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.idea/workspace.xml
Generated
+8
View File
@@ -14,6 +14,7 @@
<option name="RECENT_TEMPLATES">
<list>
<option value="HTML File" />
<option value="CSS File" />
</list>
</option>
</component>
@@ -35,6 +36,7 @@
"RunOnceActivity.ShowReadmeOnStart": "true",
"WebServerToolWindowFactoryState": "false",
"last_opened_file_path": "D:/HTML/flufflparty",
"list.type.of.created.stylesheet": "CSS",
"node.js.detected.package.eslint": "true",
"node.js.detected.package.tslint": "true",
"node.js.selected.package.eslint": "(autodetect)",
@@ -42,6 +44,11 @@
"vue.rearranger.settings.migration": "true"
}
}]]></component>
<component name="RecentsManager">
<key name="MoveFile.RECENT_KEYS">
<recent name="D:\HTML\flufflparty\Temp" />
</key>
</component>
<component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="application-level" UseSingleDictionary="true" transferred="true" />
<component name="TaskManager">
<task active="true" id="Default" summary="Default task">
@@ -52,6 +59,7 @@
<updated>1679674447095</updated>
<workItem from="1679674448294" duration="3278000" />
<workItem from="1679754546660" duration="3762000" />
<workItem from="1679776338023" duration="1445000" />
</task>
<servers />
</component>
Style.css → Temp/Style.css
View File
Temp/index.html
+74
View File
@@ -0,0 +1,74 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>IO Game Studios</title>
<link rel="stylesheet" href="Style.css">
</head>
<body>
<header>
<nav>
<ul class="navLinks">
<li class="dropdown">
Games
<div>
<ul>
<li>
<button>FlufflParty</button>
</li>
<li>
<button>More</button>
</li>
</ul>
</div>
</li>
<li><a href="#">Quicklinks</a></li>
<li><a href="#">About Us</a></li>
</ul>
</nav>
<a href="#">
<button>IO Game Studios</button>
</a>
<div class="mobileMenuButton">
<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>
<div class="mobileMenuDropDown">
<ul>
<li class="mobileMenuDropDown2">
Games
<div>
<ul>
<li>
<button>FlufflParty</button>
</li>
<li>
<button>More</button>
</li>
</ul>
</div>
</li>
<hr/>
<li><a href="#">Quicklinks</a></li>
<hr/>
<li><a href="#">About Us</a></li>
</ul>
</div>
</div>
</header>
<h1 class="margin-top">
We create games like back in the days
</h1>
</body>
</html>
index.html
+24 -45
View File
@@ -1,64 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title>IO Game Studios</title>
<link rel="stylesheet" href="Style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="navigationStyle.css">
</head>
<body>
<header>
<header>
<button>IO Game Studios</button>
<nav>
<ul class="navLinks">
<li class="dropdown">
<ul>
<<<<<<< Updated upstream
<li>
<a href="#">Games</a>
=======
<<<<<<< HEAD
<li class="menuDropdownDesktop">
Games
<div>
<ul>
<li>
<button>FlufflParty</button>
</li>
<li>
<button>More</button>
</li>
<li><button>FlufflParty</button></li>
<li><button>Other</button></li>
</ul>
</div>
</li>
<li><a href="#">Quicklinks</a></li>
<li><a href="#">About Us</a></li>
</ul>
</nav>
<a href="#">
<button>IO Game Studios</button>
</a>
<div class="mobileMenuButton">
<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>
<div class="mobileMenuDropDown">
<ul>
=======
<li>
<a href="#">Games</a>
>>>>>>> d42e8b34e9844fb27c9eaa20a1c6e2d671dd152f
>>>>>>> Stashed changes
</li>
<hr/>
<li><a href="#">Quicklinks</a></li>
<hr/>
<li><a href="#">About Us</a></li>
<li>Quicklinks</li>
<li>About</li>
</ul>
</div>
</div>
</header>
<h1 class="margin-top">
We create games like back in the days
</h1>
</nav>
</header>
</body>
</html>
navigationStyle.css
+107
View File
@@ -0,0 +1,107 @@
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
*
{
font-family: "Roboto Light", sans-serif;
box-sizing: border-box;
margin: 0;
padding: 0;
font-size: 16px;
}
/*
------------------------------------------------------------------------------------------
Desktop
------------------------------------------------------------------------------------------
*/
/*basic li a and button setup*/
li, a, button
{
font-weight: 500;
color: white;
text-decoration: none;
}
/*title bar*/
header
{
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
background-color: #41423f;
}
/*IO Game Studios button (only navigation)*/
header button
{
padding: 20px;
border-radius: 50px;
border-style: none;
background-color: #88b3ae;
cursor: pointer;
}
header button:hover
{
background-color: rgba(136, 179, 174, 0.2);
}
/*List Element Style (only navigation)*/
header nav li
{
display: inline-block;
margin-right: 20px;
cursor: pointer;
}
header nav li:hover
{
color: #88b3ae;
}
/*Dropdown*/
nav ul li div
{
display: none;
position: absolute;
background-color: #41423f;
border-radius: 50px;
right: 330px;
padding-top: 70px;
}
.menuDropdownDesktop:hover div
{
display: block;
}
nav ul li div ul
{
display: flex;
flex-direction: column;
}
nav ul li div ul li
{
padding: 0 0 20px 20px;
text-align: center;
}
nav ul li div ul li button
{
padding: 10px;
}
/*
------------------------------------------------------------------------------------------
Mobile
------------------------------------------------------------------------------------------
*/
@media (max-width: 18cm)
{
nav ul
{
display: none;
}
}