GameHub/Global/Global.css

273 lines
4.5 KiB
CSS
Raw Normal View History

2024-04-21 12:48:12 +02:00
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
2024-04-21 17:42:29 +02:00
html, body {
min-height: 100vh;
2024-04-21 12:48:12 +02:00
background-color: #000;
2024-04-21 14:36:28 +02:00
color: #fff;
2024-04-21 17:42:29 +02:00
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
2024-04-21 12:48:12 +02:00
}
li {
list-style: none;
}
a {
text-decoration: none;
color: #fff;
}
a:hover {
color: orange;
}
/* header */
header {
position: relative;
padding: 2rex;
}
.navbar {
width: 100%;
height: 60px;
max-width: 1200px;
margin: 0 auto;
display: flex;
align-self: center;
justify-content: space-between;
}
.navbar .logo a {
font-size: 1.5rem;
font-weight: bold;
}
.navbar .links {
display: flex;
gap: 2rem;
}
2024-04-21 17:42:29 +02:00
.navbar #toggle-btn {
display: none;
2024-04-21 12:48:12 +02:00
color: #fff;
font-size: 1.5rem;
cursor: pointer;
}
.action_btn {
background-color: orange;
color: #fff;
padding: 0.5rem 1rem;
border: none;
outline: none;
border-radius: 20px;
font-size: 0.8rem;
font-weight: bold;
cursor: pointer;
transition: scale 0.2 ease;
}
.action_btn:hover {
scale: 1.05;
color: #fff;
}
.action_btn:active {
scale: 0.95;
}
.login {
scale: 1.2;
background-color: orange;
margin: 1.5;
}
/* HERO */
section#hero {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
color: #fff;
}
#hero h1 {
font-size: 3rem;
margin-bottom: 1rem;
}
#dropdown_menu {
top: 0;
width: fit-content;
display: flex;
left: auto;
gap: 2rem;
}
#dropdown_menu li {
padding: 0.7rem;
display: flex;
align-items: center;
justify-content: center;
}
#dropdown_menu .action_btn {
width: 100%;
display: flex;
justify-content: center;
}
/* RESPONSIVE DESIGN */
@media(max-width: 992px) {
2024-04-21 17:42:29 +02:00
.navbar #toggle-btn {
2024-04-21 12:48:12 +02:00
display: block;
}
#dropdown_menu {
gap: unset;
position: absolute;
height: 0;
right: 2rem;
top: 60px;
width: 300px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(15px);
border-radius: 10px;
overflow: hidden;
flex-direction: column;
transition: height .2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
2024-04-21 17:42:29 +02:00
z-index: 100;
2024-04-21 12:48:12 +02:00
}
#dropdown_menu.open {
height: fit-content;
}
}
/* footer */
footer {
background-color: #000000aa;
opacity: 0.7;
background-blend-mode: multiply;
backdrop-filter: blur(15px);
color: #fff;
padding: 20px 0;
text-align: left;
}
.footer-content {
display: flex;
flex-direction: column;
align-items: center;
font-size: small;
width: 100%;
}
.footer-links {
padding: 0;
font-size: small;
display: flex;
flex-direction: row;
width: 100%;
align-items: center;
}
.footer-links a {
color: #fff;
display: inline-block;
margin: 0 10px;
text-decoration: none;
}
.footer-links a:hover {
text-decoration: underline;
}
/* login and signup */
.login-container {
width: 300px;
margin: 100px auto;
padding: 20px;
background-color: #007bff;
2024-04-21 17:42:29 +02:00
border-radius: 50px;
2024-04-21 12:48:12 +02:00
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
color: white;
background-image: url(https://pics.craiyon.com/2023-09-23/f73785344017460394781c52dda41e30.webp);
}
h2 {
text-align: center;
margin-bottom: 20px;
color: #fff;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #000000;
border-radius: 3px;
box-sizing: border-box;
}
input[type="email"] {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #000000;
border-radius: 3px;
box-sizing: border-box;
}
input[type="submit"] {
width: 100%;
padding: 10px;
background-color: #007bff;
border: none;
border-radius: 3px;
color: #fff;
font-size: 16px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #0056b3;
}
.signup-container {
width: 300px;
margin: 100px auto;
padding: 20px;
background-color: #007bff;
2024-04-21 17:13:30 +02:00
border-radius: 50px;
2024-04-21 12:48:12 +02:00
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
color: #fff;
background-image: url(https://pics.craiyon.com/2023-09-23/f73785344017460394781c52dda41e30.webp);
2024-04-21 14:44:37 +02:00
}
main {
2024-04-21 17:13:30 +02:00
background-color: #00000038;
width: 80%;
left: 10%;
position: relative;
}
article h2 {
color: #ffba54;
2024-04-21 17:44:43 +02:00
}
article {
background: unset;
2024-04-21 17:42:29 +02:00
}