Skip to content

Воронков Валерий / krystalvpn

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 873af9f5 by xcoder
Options

Add favicon

1 parent fbc84e43
Inline Side-by-side
Showing 15 changed files with 281 additions and 28 deletions
assets/_background_1.svg deleted 100644 → 0
This diff could not be displayed because it is too large.
assets/background_1.svg
This diff could not be displayed because it is too large.
assets/background_2.svg
This file is too large to display.
favicons/browserconfig.xml 0 → 100644
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square150x150logo src="/mstile-150x150.png"/>
<TileColor>#da532c</TileColor>
</tile>
</msapplication>
</browserconfig>
favicons/favicon.ico 0 → 100644
No preview for this file type
favicons/site.webmanifest 0 → 100644
{
"name": "",
"short_name": "",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}
index.html
...@@ -4,6 +4,8 @@ ...@@ -4,6 +4,8 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link type="image/x-icon" href="favicons/favicon.ico" rel="shortcut icon" />
<link type="Image/x-icon" href="favicons/favicon.ico" rel="icon" />
<link rel="stylesheet" href="bootstrap.min.css" /> <link rel="stylesheet" href="bootstrap.min.css" />
<link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="style.css" />
<title>KrystalVPN</title> <title>KrystalVPN</title>
...@@ -17,6 +19,18 @@ ...@@ -17,6 +19,18 @@
<span class="header_title-two">vpn</span> <span class="header_title-two">vpn</span>
</li> </li>
<li class="nav-item detailed"> <li class="nav-item detailed">
<div class="menu">
<span data-lang="functions">
<a href="#functions">Функции</a>
</span>
<span data-lang="download-menu">
<a href="#download">Скачать</a>
</span>
<span data-lang="contact-us">
<a href="#download">Контакты</a>
</span>
</div>
<div class="dropdown"> <div class="dropdown">
<div class="chevron"></div> <div class="chevron"></div>
<div <div
...@@ -45,6 +59,26 @@ ...@@ -45,6 +59,26 @@
</div> </div>
</div> </div>
<div class="humburger" onclick="switchMobileMenu()">
<div class="humburger-line"></div>
<div class="humburger-line"></div>
<div class="humburger-line"></div>
</div>
<div id="opened-menu" class="opened-mob-menu">
<div class="menu" onclick="switchMobileMenu()">
<span data-lang="functions">
<a href="#functions">Функции</a>
</span>
<span data-lang="download-menu">
<a href="#download">Скачать</a>
</span>
<span data-lang="contact-us">
<a href="#download">Контакты</a>
</span>
</div>
</div>
<button type="button" data-lang="download" class="btn download" onclick="do_download()"> <button type="button" data-lang="download" class="btn download" onclick="do_download()">
Скачать KRYSTALVPN Скачать KRYSTALVPN
</button> </button>
...@@ -57,7 +91,7 @@ ...@@ -57,7 +91,7 @@
<div class="card bcg-one"> <div class="card bcg-one">
<img src="./assets/background_1.svg" alt="background image one" /> <img src="./assets/background_1.svg" alt="background image one" />
</div> </div>
<div class="card descr"> <div id="functions" class="card descr">
<div class="descr-top"> <div class="descr-top">
<div class="descr-top__title-top" data-lang="truely"> <div class="descr-top__title-top" data-lang="truely">
Открой для себя по-настоящему Открой для себя по-настоящему
...@@ -136,7 +170,7 @@ ...@@ -136,7 +170,7 @@
</div> </div>
</div> </div>
<div class="main-second"> <div class="main-second">
<div class="card descr"> <div id="download" class="card descr">
<div class="third-description-wrapper"> <div class="third-description-wrapper">
<div class="third-top-title" data-lang="can-use"> <div class="third-top-title" data-lang="can-use">
Можно использовать Можно использовать
...@@ -166,7 +200,7 @@ ...@@ -166,7 +200,7 @@
</div> </div>
</div> </div>
<div class="main-third"> <div class="main-third">
<div class="main-third__title" data-lang="support-onl"> <div id="contact-us" class="main-third__title" data-lang="support-onl">
Наши специалисты доступны 24/7 в онлайн-чате и по электронной почте, Наши специалисты доступны 24/7 в онлайн-чате и по электронной почте,
чтобы помочь вам с установкой и устранением неполадок. чтобы помочь вам с установкой и устранением неполадок.
</div> </div>
......
index.js
...@@ -74,4 +74,34 @@ function set_current_year() { ...@@ -74,4 +74,34 @@ function set_current_year() {
function do_support() { function do_support() {
console.log("do support!"); console.log("do support!");
}
\ No newline at end of file \ No newline at end of file
}
function switchMobileMenu() {
const openedMenu = document.querySelector("#opened-menu");
if (openedMenu != null) {
openedMenu.classList.toggle("show");
}
}
let portrait = window.matchMedia("(orientation: portrait)");
portrait.addEventListener("change", function(e) {
if(e.matches) {
// Portrait mode
console.log("Portrait mode");
const main = document.querySelector(".main");
if (main != null) {
main.classList.remove("oriented")
}
} else {
// Landscape
console.log("Landscape");
const main = document.querySelector(".main");
if (main != null) {
main.classList.add("oriented")
}
}
})
\ No newline at end of file \ No newline at end of file
style.css
...@@ -38,7 +38,7 @@ header { ...@@ -38,7 +38,7 @@ header {
header > ul.nav.nav-pills { header > ul.nav.nav-pills {
width: 100%; width: 100%;
max-width: 1000px; max-width: 1200px;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
...@@ -124,12 +124,55 @@ header > ul.nav.nav-pills > .nav-item.detailed { ...@@ -124,12 +124,55 @@ header > ul.nav.nav-pills > .nav-item.detailed {
} }
} }
header > ul.nav.nav-pills > .nav-item.detailed > .menu {
padding-right: 100px;
}
@media screen and (max-width: 1060px) {
header > ul.nav.nav-pills > .nav-item.detailed > .menu {
padding-right: 0;
}
}
@media screen and (max-width: 680px) {
header > ul.nav.nav-pills > .nav-item.detailed > .menu {
display: none;
}
}
header > ul.nav.nav-pills > .nav-item.detailed > .menu > span > a {
font-family: "RobotoRegular";
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 16px;
margin: 0 16px;
color: #ffffff;
text-decoration: none;
}
header > ul.nav.nav-pills > .nav-item.detailed > .menu > span > a:first-child {
margin: 0 0 0 16px;
}
header > ul.nav.nav-pills > .nav-item.detailed > .menu > span > a:last-child {
margin: 0 16px 0 0px;
}
header > ul.nav.nav-pills > .nav-item.detailed > .dropdown { header > ul.nav.nav-pills > .nav-item.detailed > .dropdown {
display: flex; display: flex;
margin-right: 30px; margin-right: 30px;
} }
@media screen and (max-width: 680px) {
header > ul.nav.nav-pills > .nav-item.detailed > .dropdown {
display: none;
}
}
.dropdown-menu.show { .dropdown-menu.show {
top: 30px; top: 30px;
} }
...@@ -178,6 +221,77 @@ header > .nav.nav-pills > .nav-item.detailed > .dropdown > .btn.lng-switcher { ...@@ -178,6 +221,77 @@ header > .nav.nav-pills > .nav-item.detailed > .dropdown > .btn.lng-switcher {
color: #fff; color: #fff;
} }
.humburger {
display: none;
}
@media screen and (max-width: 680px) {
.humburger {
display: block;
}
.humburger > .humburger-line {
width: 42px;
height: 4px;
margin: 6px 0;
background-color: #faff00;
}
}
.opened-mob-menu {
display: none;
}
@media screen and (min-width: 681px) {
.opened-mob-menu {
display: none;
}
}
.opened-mob-menu.show {
display: block;
position: absolute;
z-index: 100;
top: 65px;
}
.opened-mob-menu.show > .menu {
display: flex;
flex-direction: column;
padding: 6px;
background-color: #fff;
}
.opened-mob-menu.show > .menu > span {
margin-bottom: 6px;
}
.opened-mob-menu.show > .menu > span > a {
font-family: "RobotoRegular";
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 16px;
margin: 0 16px;
color: #0f309b;
text-decoration: none;
}
.opened-mob-menu.show > .menu > span > a:first-child {
margin: 0 0 0 16px;
}
.opened-mob-menu.show > .menu > span > a:last-child {
margin: 0 16px 0 0px;
}
.main { .main {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -284,11 +398,11 @@ header > .nav.nav-pills > .nav-item.detailed > .dropdown > .btn.lng-switcher { ...@@ -284,11 +398,11 @@ header > .nav.nav-pills > .nav-item.detailed > .dropdown > .btn.lng-switcher {
@media screen and (max-width: 680px) { @media screen and (max-width: 680px) {
.main .main
> .main-first > .main-first
> .card.descr > .card.descr
> .descr-top > .descr-top
> .descr-top__title-bottom > .descr-top__title-bottom
> span.title__colored { > span.title__colored {
font-size: 20px; font-size: 20px;
line-height: normal; line-height: normal;
} }
...@@ -311,11 +425,11 @@ header > .nav.nav-pills > .nav-item.detailed > .dropdown > .btn.lng-switcher { ...@@ -311,11 +425,11 @@ header > .nav.nav-pills > .nav-item.detailed > .dropdown > .btn.lng-switcher {
@media screen and (max-width: 680px) { @media screen and (max-width: 680px) {
.main .main
> .main-first > .main-first
> .card.descr > .card.descr
> .descr-top > .descr-top
> .descr-top__title-bottom > .descr-top__title-bottom
> span.title__uncolored { > span.title__uncolored {
font-size: 20px; font-size: 20px;
line-height: normal; line-height: normal;
} }
...@@ -342,16 +456,34 @@ header > .nav.nav-pills > .nav-item.detailed > .dropdown > .btn.lng-switcher { ...@@ -342,16 +456,34 @@ header > .nav.nav-pills > .nav-item.detailed > .dropdown > .btn.lng-switcher {
margin-right: 32px; margin-right: 32px;
} }
.main > .main-first > .card.descr > .descr-bottom > .row-data > .img-wrapper > img.mob { .main
> .main-first
> .card.descr
> .descr-bottom
> .row-data
> .img-wrapper
> img.mob {
display: none; display: none;
} }
@media screen and (max-width: 680px) { @media screen and (max-width: 680px) {
.main > .main-first > .card.descr > .descr-bottom > .row-data > .img-wrapper > img { .main
> .main-first
> .card.descr
> .descr-bottom
> .row-data
> .img-wrapper
> img {
display: none; display: none;
} }
.main > .main-first > .card.descr > .descr-bottom > .row-data > .img-wrapper > img.mob { .main
> .main-first
> .card.descr
> .descr-bottom
> .row-data
> .img-wrapper
> img.mob {
display: block; display: block;
} }
} }
...@@ -502,10 +634,10 @@ header > .nav.nav-pills > .nav-item.detailed > .dropdown > .btn.lng-switcher { ...@@ -502,10 +634,10 @@ header > .nav.nav-pills > .nav-item.detailed > .dropdown > .btn.lng-switcher {
@media screen and (max-width: 680px) { @media screen and (max-width: 680px) {
.main .main
> .main-second > .main-second
> .card.descr > .card.descr
> .third-description-wrapper > .third-description-wrapper
> .third-top-title { > .third-top-title {
font-size: 20px; font-size: 20px;
line-height: 22px; line-height: 22px;
} }
...@@ -527,10 +659,10 @@ header > .nav.nav-pills > .nav-item.detailed > .dropdown > .btn.lng-switcher { ...@@ -527,10 +659,10 @@ header > .nav.nav-pills > .nav-item.detailed > .dropdown > .btn.lng-switcher {
@media screen and (max-width: 680px) { @media screen and (max-width: 680px) {
.main .main
> .main-second > .main-second
> .card.descr > .card.descr
> .third-description-wrapper > .third-description-wrapper
> .third-top-second { > .third-top-second {
font-size: 20px; font-size: 20px;
line-height: 22px; line-height: 22px;
} }
...@@ -646,6 +778,35 @@ article.notation-one { ...@@ -646,6 +778,35 @@ article.notation-one {
border-radius: 103px; border-radius: 103px;
} }
.main.oriented > .main-first {
flex-direction: row;
align-items: flex-start;
}
.main.oriented > .main-first > .card.bcg-one {
width: calc(100% / 3);
padding: 14px 0 0 14px;
}
.main.oriented > .main-first > .card.bcg-one > .card.descr > .descr-top {
padding: 0px 0 8px 0;
}
.main.oriented > .main-first > .card.bcg-one > .card.descr > .descr-top > .descr-top__title-top {
font-size: 20px;
padding: 0px 0 6px 0;
}
.main.oriented > .main-first > .card.bcg-one > .card.descr > .descr-top__title-bottom > .title__colored {
font-size: 20px;
}
.main.oriented > .main-first > .card.bcg-one > .card.descr > .descr-top__title-bottom > .title__uncolored {
font-size: 20px;
}
footer.footer { footer.footer {
width: 100%; width: 100%;
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!