@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap");
:root {
--bg: #fff;
--header: #DEDEDE;
--shadow: #CECECE;
--logo: #000;
--hover: #009EAA;
--name: #000;
--social: #000;
--navbar: #000;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #232323;
--header: #303030;
--shadow: #1B1B1B;
--logo: #fff;
--hover: #009EAA;
--name: #fff;
--social: #fff;
--navbar: #fff;
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
border: none;
outline: none;
scroll-behavior: smooth;
font-family: "Poppins", sans-serif;
}
html {
font-size: 62.5%;
/* overflow: hidden; */
}
body {
-moz-user-select: none;
-o-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
text-decoration: none;
background: var(--bg);
color: #fff;
}
section {
min-height: 100vh;
padding: 10rem 9% 2rem;
}
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 2rem 9%;
box-shadow: 1px 1px 50px 1px var(--shadow, 0.15);
background: var(--header);
display: flex;
justify-content: space-between;
align-items: center;
z-index: 100;
}
.logo {
font-size: 2.7rem;
color: var(--logo);
font-weight: 600;
cursor: default;
}
.navbar a {
font-size: 1.7rem;
color: var(--navbar);
margin-left: 4rem;
cursor: pointer;
transition: 0.4s all ease;
}
.navbar a:hover {
color: var(--shadow);
}
.home {
display: flex;
justify-content: center;
align-items: center;
gap: 60px;
}
.home-content h3:nth-of-type(2) {
margin-bottom: 3rem;
}
.home-content h3 {
font-size: 5.5rem;
text-align: center;
color: var(--name);
}
span {
color: var(--hover);
}
.home-content h1 {
font-size: 3rem;
text-align: center;
display: block;
}
.social a {
display: inline-flex;
text-align: center;
align-items: center;
justify-content: center;
width: 10rem;
height: 10rem;
font-size: 6rem;
color: var(--social);
transition: 0.5s all ease;
margin: 0 auto;
}
.social a:hover {
color: var(--hover);
}
a.active {
color: var(--shadow);
}
.home-img img {
width: 40%;
text-align: center;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: -10%;
position: inherit;
border-radius: 50%;
}
.heading {
text-align: center;
font-size: 4.5rem;
}
@media (max-width: 730px) {
.navbar {
display: flex;
flex-direction: column;
gap: 8px;
}
.home {
font-size: 6px
}
.home-content {
font-size: 6px
}
.home-content h3 {
font-size: 30px
}
.home-content h1 {
font-size: 17.5px;
}
.home-img {
width: 450px;
}
.social a {
font-size: 4rem;
width: 8rem;
height: 8rem;
}
}
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:type" content="website" />
<meta property="og:site_name" content="permach.su/" />
<meta name="apple-mobile-web-app-title" content="permach.su/">
<meta property="og:title" content="permach.su/" />
<meta property="og:url" content="https://permach.su/" />
<meta name="theme-color" content="#262d39" />
<link rel="shortcut icon" href="assets/img/icon.svg" type="image/x-icon">
<link rel="icon" href="assets/img/icon.svg">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/css/boxicons.min.css" />
<script src="https://api.cloudflare.com/client/v4/zones/ff1dad20fbbf8656d57c7796bc393f32/settings/security_level"></script>
<script src="https://unpkg.com/scrollreveal"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
</head>
<body>
<header class="header">
<a href="https://permach.su/" class="logo">PERMACH</a>
<nav class="navbar">
<a href="https://permach.su/" class="active">Главная</a>
<a href="https://guilds.permach.su/" target="_blank">Гильдии</a>
<a href="https://nohello.permach.su/" target="_blank">Мета</a>
</nav>
</header>
<section class="home" id="home">
<div class="home-content">
<div class="home-img">
<img src="https://cdn.discordapp.com/avatars/687661528337350705/ed23e07561d21577674ee8be9131cd34.webp?size=1024&width=0&height=204" alt="permach_avatar" />
</div>
<h3>Permach</h3>
<h1 style="color: #487878;">Jumping off a <span>window</span> is just an action.</h1>
<div class="social">
<a href="" target="_blank"><i class="bx bxl-discord"></i></a>
<a href="" target="_blank"><i class="bx bxl-steam"></i></a>
<a href="" target="_blank"><i class="bx bxl-telegram"></i></a>
</div>
</div>
</section>
</body>
</html>