dsfdf
This commit is contained in:
brausjonas
Generated
+1
-1
@@ -60,7 +60,7 @@
|
||||
<updated>1679674447095</updated>
|
||||
<workItem from="1679674448294" duration="3278000" />
|
||||
<workItem from="1679754546660" duration="3762000" />
|
||||
<workItem from="1679776338023" duration="5167000" />
|
||||
<workItem from="1679776338023" duration="5301000" />
|
||||
</task>
|
||||
<servers />
|
||||
</component>
|
||||
|
||||
-213
@@ -1,213 +0,0 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Alkatra&family=Delicious+Handrawn&family=Roboto:wght@300&display=swap');
|
||||
|
||||
* {
|
||||
font-family: "Roboto Light", sans-serif;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
li, a, button {
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
color: #ecf0f1;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 18cm) {
|
||||
li, a, button {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.hideOnMobile {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 30px 10%;
|
||||
background-color: #24242A;
|
||||
}
|
||||
|
||||
.navLinks {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 18cm) {
|
||||
.navLinks {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.navLinks li {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
padding: 0px 20px;
|
||||
}
|
||||
|
||||
|
||||
.navLinks li a {
|
||||
transition: all 0.5s ease 0s;
|
||||
}
|
||||
|
||||
.navLinks li a:hover, .navLinks li:hover {
|
||||
color: #0088a9;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 9px 25px;
|
||||
background-color: rgba(0, 136, 169, 1);
|
||||
border: none;
|
||||
border-radius: 50px;
|
||||
cursor: pointer;
|
||||
transition: all 0.5s ease 0s;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: rgba(0, 136, 169, 0.3);
|
||||
}
|
||||
|
||||
nav {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
font-size: 50px;
|
||||
|
||||
color: white;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 18cm) {
|
||||
h1 {
|
||||
text-align: center;
|
||||
font-size: 30px;
|
||||
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.margin-top {
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-size: cover;
|
||||
background-color: #31313a;
|
||||
}
|
||||
|
||||
|
||||
.dropdown div {
|
||||
display: none;
|
||||
position: absolute;
|
||||
padding: 20px;
|
||||
margin-left: -90px;
|
||||
background-color: #24242A;
|
||||
border-radius: 50px
|
||||
}
|
||||
|
||||
.dropdown div ul li {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 18cm) {
|
||||
.dropdown div ul li {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.dropdown div ul li {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.dropdown div {
|
||||
right: 150px;
|
||||
border-radius: 0px;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.dropdown:hover div ul, .dropdown:hover div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.mobileMenuButton {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 18cm) {
|
||||
.mobileMenuButton {
|
||||
display: inline-block;
|
||||
transition: all 0.5s ease 0s;
|
||||
}
|
||||
}
|
||||
|
||||
.mobileMenuButton svg {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
top: 30px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.mobileMenuButton svg:hover {
|
||||
color: #0088a9;
|
||||
}
|
||||
|
||||
.mobileMenuDropDown {
|
||||
display: none;
|
||||
background-color: #24242A;
|
||||
transition: all 0.5s ease 0s;
|
||||
}
|
||||
|
||||
.mobileMenuDropDown li
|
||||
{
|
||||
list-style: none;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.mobileMenuDropDown2 div
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobileMenuDropDown2:hover div
|
||||
{
|
||||
display: inherit;
|
||||
}
|
||||
|
||||
.mobileMenuDropDown2:hover div li
|
||||
{
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
|
||||
.mobileMenuButton:hover .mobileMenuDropDown {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
height: 100vh;
|
||||
|
||||
margin-top: 10%;
|
||||
}
|
||||
@@ -1,74 +0,0 @@
|
||||
<!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>
|
||||
+42
-36
@@ -8,51 +8,56 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<header>
|
||||
|
||||
<button>IO Game Studios</button>
|
||||
<button><a href="#mainHeader">IO Game Studios</a></button>
|
||||
|
||||
<nav>
|
||||
<!-- Desktop-->
|
||||
<ul>
|
||||
<nav>
|
||||
<!-- Desktop-->
|
||||
<ul>
|
||||
|
||||
<li class="menuDropdownDesktop">
|
||||
Games
|
||||
<div>
|
||||
<ul>
|
||||
<li><button>FlufflParty</button></li>
|
||||
<li><button>Other</button></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li>Quicklinks</li>
|
||||
<li>About</li>
|
||||
</ul>
|
||||
<li class="menuDropdownDesktop">
|
||||
Games
|
||||
<div>
|
||||
<ul>
|
||||
<li>
|
||||
<button>FlufflParty</button>
|
||||
</li>
|
||||
<li>
|
||||
<button>Other</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li>Quicklinks</li>
|
||||
<li>About</li>
|
||||
</ul>
|
||||
|
||||
<!--Mobile-->
|
||||
<button onclick="showMobileMenuBar()">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-three-dots" viewBox="0 0 16 16">
|
||||
<path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</nav>
|
||||
</header>
|
||||
<!--Mobile-->
|
||||
<button onclick="showMobileMenuBar()">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-three-dots"
|
||||
viewBox="0 0 16 16">
|
||||
<path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<!--Mobile-->
|
||||
<menu id="mobileMenuBar">
|
||||
<div>
|
||||
<ul>
|
||||
<li>Games</li>
|
||||
<!--Mobile-->
|
||||
<menu id="mobileMenuBar">
|
||||
<div>
|
||||
<ul>
|
||||
<li>Games</li>
|
||||
|
||||
<li>Quicklinks</li>
|
||||
<li>Quicklinks</li>
|
||||
|
||||
<li>About</li>
|
||||
</ul>
|
||||
</div>
|
||||
</menu>
|
||||
<li>About</li>
|
||||
</ul>
|
||||
</div>
|
||||
</menu>
|
||||
|
||||
<div>
|
||||
<h1>We create games like back in the days</h1>
|
||||
<h1 id="mainHeader">We create games like back in the days</h1>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
@@ -127,6 +132,7 @@
|
||||
<br/>
|
||||
<br/>
|
||||
|
||||
|
||||
</div>
|
||||
</body>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user