Skip to content

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

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 469b4933 by xcoder
Options

Add translates

1 parent 3bcccd4a
Expand all
Inline Side-by-side
Showing 14 changed files with 491 additions and 24 deletions
assets/_background_1.svg 0 → 100644
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/cashback.svg 0 → 100644
<svg width="52" height="52" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_173_72)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.78916 21.3612L4.17136 21.3348C4.25837 20.9164 4.35652 20.4992 4.46582 20.0836C5.26563 17.0418 6.62188 14.2323 8.49687 11.7333C10.4409 9.14232 12.8582 7.00203 15.6818 5.37183C18.5053 3.74164 21.5676 2.71831 24.7834 2.33025C27.8851 1.95598 30.9963 2.18615 34.0306 3.01441C37.0607 3.84151 39.8626 5.22378 42.3587 7.12282C44.9413 9.08778 47.0809 11.5218 48.7179 14.3572C50.3549 17.1926 51.393 20.2625 51.8034 23.4816C52.2 26.5927 51.9961 29.7105 51.1973 32.7482C50.7112 34.5972 50.2573 35.2449 49.8245 35.8624C49.6279 36.1429 49.4357 36.4172 49.2469 36.7949L45.3926 34.4749C47.6919 30.4885 48.7852 23.5165 44.8023 16.6178C39.3366 7.15108 27.277 3.84467 17.9193 9.24734C13.216 11.9628 10.0767 16.3695 8.8114 21.2834L11.07 21.2583C12.6488 21.2409 13.3759 23.0757 12.207 24.1272L7.33073 28.5136C6.62794 29.1458 5.54412 29.1424 4.88978 28.5061L0.485127 24.2225C-0.585998 23.1808 0.235445 21.3784 1.78916 21.3612ZM17.9124 32.6433C17.9124 32.6433 19.3394 32.6433 20.1655 32.9274L23.3951 19.222C23.3951 19.222 24.071 17.2337 26.5495 17.8728C29.028 18.5119 37.1394 20.3582 37.1394 20.3582L37.7402 18.2278L21.8929 14.8192L17.9124 32.6433ZM4.99418 47.9821H9.42541C10.4624 47.9821 11.3031 47.1872 11.3031 46.2068V36.4781C11.3031 35.4976 10.4624 34.7028 9.42541 34.7028H4.99418C3.95719 34.7028 3.11654 35.4976 3.11654 36.4781V46.2068C3.11654 47.1872 3.95719 47.9821 4.99418 47.9821ZM14.7579 34.8447C13.406 34.8447 13.1056 36.265 13.1056 36.265C13.1056 36.265 13.1056 45.2835 13.2558 46.5618C13.406 47.84 15.2085 48.8342 19.0389 50.6095C22.8693 52.3848 27.1503 52.2428 29.1031 51.3906C31.0558 50.5385 43.298 43.8633 45.401 42.443C47.504 41.0228 47.7293 39.8866 46.6027 37.9693C45.4761 36.0519 41.7959 37.6852 41.7959 37.6852L38.7319 39.0363C37.4731 39.5913 36.3484 40.385 35.4276 41.3681L34.8862 41.946C33.4788 44.3273 31.9671 44.6397 29.62 45.1248L29.5218 45.1451C27.1184 45.6422 25.0325 45.0113 25.0325 43.662C25.0325 42.3128 28.2769 43.0112 28.2769 43.0112C32.633 43.4372 33.9098 42.372 33.985 40.1707C34.0458 38.3871 31.8388 38.4681 30.2798 38.5253C29.9146 38.5387 29.585 38.5508 29.3284 38.5374C27.9765 38.4664 25.1976 37.6142 22.4938 36.194C19.905 34.8341 16.4212 34.8414 14.9429 34.8445H14.9428L14.7579 34.8447ZM24.9723 19.2219L21.893 32.9273C22.4938 33.0693 24.071 34.0635 24.071 34.0635L26.174 24.8319C28.9529 25.1159 29.1031 22.9856 29.1031 22.9856L35.412 24.2638C35.7124 26.5362 37.2896 26.9622 37.2896 26.9622L34.9614 37.117L35.6373 37.6851L37.8154 36.904L40.8947 22.6305L24.9723 19.2219ZM32.3669 36.3406C33.3444 35.6996 33.9849 34.6316 33.9849 33.4217C33.9849 31.4607 32.3036 29.8711 30.2297 29.8711C28.1557 29.8711 26.4744 31.4607 26.4744 33.4217C26.4744 34.2277 26.7588 34.9706 27.2374 35.5665C28.2876 35.3583 30.2866 35.2067 32.3669 36.3406Z" fill="#693D8B"/>
</g>
<defs>
<clipPath id="clip0_173_72">
<rect width="52" height="52" fill="white"/>
</clipPath>
</defs>
</svg>
assets/krystal_logo.svg 0 → 100644
<svg width="100" height="95" viewBox="0 0 100 95" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_173_2)">
<path d="M37.9679 94.7567L87.5553 78.9233C89.9283 78.1926 91.5649 76.0003 91.5649 73.4832L91.7285 21.8421C91.7285 19.325 90.1738 17.1327 87.719 16.402L38.2952 0.325047C35.9222 -0.486919 33.3037 0.406244 31.8308 2.35496L1.14556 44.0088C-0.32733 46.0387 -0.32733 48.7182 1.14556 50.7481L31.5854 92.6456C32.9764 94.6755 35.5949 95.4874 37.9679 94.7567Z" fill="#00B8F0"/>
<path d="M35.5949 1.70506L48.9328 43.9273C49.1782 44.7393 50.1602 45.1452 50.8966 44.6581L89.3555 18.6752C90.2556 18.1068 89.0282 16.8888 88.0463 16.564L37.3133 0.0811329C36.2495 -0.243653 35.2676 0.649509 35.5949 1.70506Z" fill="white"/>
<path d="M1.47284 48.5555L48.9327 44.7393C49.5874 44.6581 50.1602 45.3077 49.9147 46.0385L33.9583 93.0513C33.7128 93.8632 32.7309 94.0256 32.24 93.3761L0.736398 50.0983C0.327261 49.4487 0.736398 48.5555 1.47284 48.5555Z" fill="#008CFF"/>
</g>
</svg>
assets/safe.svg 0 → 100644
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
<!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
<!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
<!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
<!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
<!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
<!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
<!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
<!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
]>
<svg version="1.1" id="Слой_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 52 52"
style="enable-background:new 0 0 52 52;" xml:space="preserve">
<style type="text/css">
.st0{fill:#6A3D8B;}
</style>
<metadata>
<sfw xmlns="&ns_sfw;">
<slices></slices>
<sliceSourceBounds bottomLeftOrigin="true" height="51.4" width="45.1" x="3.5" y="-51.7"></sliceSourceBounds>
</sfw>
</metadata>
<g>
<path class="st0" d="M48.1,9.2c-0.1-1-0.5-1.9-1.2-2.7c-0.6-0.8-1.5-1.4-2.4-1.7l0,0c-2.1-0.7-5.6-1.8-9.1-2.7
c-3.4-0.9-7.1-1.8-9.4-1.8c-2.3,0-5.9,0.9-9.4,1.8l0,0c-3.1,0.8-6.1,1.8-9.1,2.7l0,0c-1,0.3-1.8,0.9-2.4,1.7C4.4,7.3,4,8.2,3.9,9.2
C2,23.5,6.4,34,11.8,41c2.3,3,5,5.6,8,7.8c1.1,0.8,2.2,1.4,3.4,2l0,0c0.9,0.4,1.9,0.8,2.8,0.8c0.9,0,1.9-0.4,2.8-0.8l0,0
c1.2-0.6,2.3-1.2,3.4-2c3.1-2.2,5.8-4.8,8-7.8C45.6,34,50,23.5,48.1,9.2z M37.1,38.6c-2,2.7-4.5,5-7.2,7c-0.9,0.6-1.8,1.2-2.8,1.7
c-0.6,0.3-1,0.4-1.1,0.4c-0.1,0-0.5-0.1-1.1-0.4c-0.9-0.5-1.9-1-2.7-1.6c-2.7-2-5.1-4.3-7.2-7C10.7,33.1,6,23.6,7.9,9.8
c0-0.3,0.1-0.5,0.3-0.7c0.2-0.2,0.4-0.3,0.6-0.4c2.9-1,5.9-1.9,8.9-2.7c5-1.4,7.3-1.6,8.3-1.6c1,0,3.3,0.3,8.3,1.6
c3.3,0.9,6.7,2,8.9,2.7c0.2,0.1,0.4,0.2,0.6,0.4c0.2,0.2,0.3,0.4,0.3,0.7C46,23.6,41.3,33.1,37.1,38.6z"/>
<path class="st0" d="M30.6,21.4c0,1-0.3,1.9-0.8,2.7c-0.6,0.8-1.3,1.4-2.2,1.7l1.2,6.1c0,0.2,0,0.5,0,0.7c-0.1,0.2-0.2,0.4-0.3,0.6
c-0.1,0.2-0.3,0.3-0.5,0.4c-0.2,0.1-0.4,0.1-0.7,0.1h-2.4c-0.2,0-0.5-0.1-0.7-0.1c-0.2-0.1-0.4-0.2-0.5-0.4
c-0.1-0.2-0.2-0.4-0.3-0.6c-0.1-0.2-0.1-0.5,0-0.7l1.2-6.1c-0.8-0.3-1.5-0.8-2-1.4c-0.5-0.7-0.9-1.4-1-2.3c-0.1-0.8,0-1.7,0.3-2.5
c0.3-0.8,0.9-1.5,1.6-1.9s1.5-0.8,2.4-0.8c0.8-0.1,1.7,0.1,2.4,0.5c0.8,0.4,1.4,1,1.8,1.7C30.3,19.7,30.6,20.5,30.6,21.4z"/>
</g>
</svg>
assets/speed.svg 0 → 100644
<svg width="52" height="52" viewBox="0 0 52 52" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_173_72)">
<path d="M51.3021 17.1052L29.0448 29.885C28.2786 29.5755 27.4428 29.4042 26.5675 29.4019C22.8542 29.3922 19.8362 32.4257 19.8266 36.1773C19.817 39.9289 22.8194 42.9782 26.5327 42.9879C30.2459 42.9977 33.2639 39.9642 33.2735 36.2125C33.2739 36.0702 33.2694 35.9289 33.2612 35.7888L51.3021 17.1052ZM26.4287 39.1723C24.9043 39.1723 23.6685 37.9239 23.6685 36.3836C23.6685 34.8434 24.9043 33.595 26.4287 33.595C27.9531 33.595 29.1889 34.8434 29.1889 36.3836C29.1889 37.9239 27.9531 39.1723 26.4287 39.1723Z" fill="#693D8B"/>
<path d="M26.5715 46.4168C26.5478 46.4169 26.5242 46.4172 26.5005 46.4172C14.8931 46.4172 5.44977 37.0827 5.44977 25.6091C5.44977 14.1355 14.8931 4.80098 26.5005 4.80098C34.9591 4.80098 42.2682 9.75812 45.6114 16.8876L49.7912 14.575C48.5253 11.9431 46.8262 9.56183 44.729 7.48415C42.3597 5.13682 39.6009 3.29405 36.5294 2.00697C33.3512 0.675232 29.977 0 26.5005 0C23.0239 0 19.6497 0.675232 16.4716 2.00697C13.4 3.29405 10.6413 5.13682 8.27191 7.48415C5.89929 9.83467 4.03582 12.5735 2.73322 15.6245C1.38271 18.7878 0.697937 22.1471 0.697937 25.6091C0.697937 29.0712 1.38271 32.4305 2.73322 35.5937C4.03582 38.6448 5.89929 41.3836 8.27191 43.7341C10.6413 46.0814 13.4 47.9242 16.4716 49.2112C19.6497 50.543 23.0239 51.2182 26.5005 51.2182C26.5242 51.2182 26.5478 51.2178 26.5715 51.2178V46.4168Z" fill="#693D8B"/>
<path d="M26.7199 11.7408C26.0914 11.7408 25.5818 11.226 25.5818 10.591V6.99141C25.5818 6.35636 26.0914 5.84155 26.7199 5.84155C27.3485 5.84155 27.858 6.35636 27.858 6.99141V10.591C27.858 11.226 27.3485 11.7408 26.7199 11.7408Z" fill="#693D8B"/>
<path d="M7.37238 25.3889V25.3889C7.37238 24.7538 7.88191 24.239 8.51046 24.239H12.0732C12.7017 24.239 13.2113 24.7538 13.2113 25.3889V25.3889C13.2113 26.0239 12.7017 26.5387 12.0732 26.5387H8.51046C7.88191 26.5387 7.37238 26.0239 7.37238 25.3889Z" fill="#693D8B"/>
<path d="M36.272 15.7382V15.7382C35.8275 15.2891 35.8275 14.5611 36.272 14.112L38.7912 11.5668C39.2357 11.1177 39.9563 11.1177 40.4007 11.5668C40.8452 12.0158 40.8452 12.7439 40.4007 13.1929L37.8815 15.7382C37.4371 16.1872 36.7165 16.1872 36.272 15.7382Z" fill="#693D8B"/>
<path d="M13.0392 39.2113V39.2113C12.5948 38.7623 12.5948 38.0342 13.0392 37.5852L15.5584 35.0399C16.0029 34.5909 16.7235 34.5909 17.1679 35.0399C17.6124 35.489 17.6124 36.217 17.1679 36.6661L14.6487 39.2113C14.2043 39.6604 13.4837 39.6604 13.0392 39.2113Z" fill="#693D8B"/>
<path d="M17.1679 15.7382V15.7382C16.7235 16.1872 16.0029 16.1872 15.5584 15.7382L13.0392 13.1929C12.5948 12.7439 12.5948 12.0158 13.0392 11.5668C13.4837 11.1177 14.2043 11.1177 14.6487 11.5668L17.1679 14.112C17.6124 14.5611 17.6124 15.2891 17.1679 15.7382Z" fill="#693D8B"/>
<path d="M21.5504 12.7795C20.9697 13.0225 20.304 12.7439 20.0634 12.1572L18.7 8.83165C18.4595 8.24494 18.7353 7.57231 19.316 7.32928H19.316C19.8967 7.08626 20.5624 7.36487 20.8029 7.95158L22.1663 11.2772C22.4069 11.8639 22.1311 12.5365 21.5504 12.7795Z" fill="#693D8B"/>
<path d="M39.2003 20.1662L39.2003 20.1662C38.9597 19.5795 39.2355 18.9068 39.8162 18.6638L43.1077 17.2863C43.6884 17.0433 44.3542 17.3219 44.5947 17.9086V17.9086C44.8352 18.4953 44.5595 19.168 43.9788 19.411L40.6873 20.7885C40.1066 21.0315 39.4408 20.7529 39.2003 20.1662Z" fill="#693D8B"/>
<path d="M8.84517 32.8695V32.8695C8.60463 32.2828 8.8804 31.6102 9.4611 31.3672L12.7526 29.9897C13.3333 29.7467 13.9991 30.0253 14.2396 30.612V30.612C14.4801 31.1987 14.2044 31.8713 13.6237 32.1144L10.3322 33.4919C9.75145 33.7349 9.0857 33.4563 8.84517 32.8695Z" fill="#693D8B"/>
<path d="M31.8894 12.7795H31.8894C31.3087 12.5365 31.033 11.8639 31.2735 11.2772L32.6369 7.95158C32.8774 7.36487 33.5432 7.08626 34.1239 7.32928C34.7046 7.57231 34.9804 8.24494 34.7398 8.83165L33.3764 12.1572C33.1359 12.7439 32.4702 13.0225 31.8894 12.7795Z" fill="#693D8B"/>
<path d="M14.2396 20.1662V20.1662C13.9991 20.7529 13.3333 21.0315 12.7526 20.7885L9.4611 19.411C8.8804 19.168 8.60463 18.4953 8.84517 17.9086V17.9086C9.0857 17.3219 9.75145 17.0433 10.3322 17.2863L13.6237 18.6638C14.2044 18.9068 14.4801 19.5795 14.2396 20.1662Z" fill="#693D8B"/>
<path d="M26.6085 24.8063H25.4803V22.2311H25.456L24.4651 24.7539H23.773L22.7822 22.2311H22.7578V24.8063H21.6297V20.3613H23.1236L24.1084 22.955H24.1328L25.1145 20.3613H26.6085V24.8063V24.8063Z" fill="#693D8B"/>
<path d="M28.8371 24.6829C28.6562 24.57 28.5262 24.4118 28.4469 24.2085H28.4225V24.8061H27.1725V20.1301H28.4225V21.966H28.4469C28.6217 21.5184 28.9622 21.2945 29.4683 21.2945C29.9012 21.2945 30.2345 21.4485 30.4683 21.7566C30.7 22.0646 30.8158 22.5041 30.8158 23.0749C30.8158 23.6459 30.701 24.0853 30.4713 24.3934C30.2396 24.7014 29.9103 24.8554 29.4835 24.8554C29.2335 24.8554 29.018 24.7979 28.8371 24.6829ZM28.5688 22.4897C28.4693 22.6355 28.4184 22.8316 28.4164 23.078C28.4184 23.3265 28.4693 23.5216 28.5688 23.6633C28.6684 23.8071 28.8046 23.8789 28.9774 23.8789C29.1481 23.8789 29.2843 23.806 29.3859 23.6602C29.4855 23.5165 29.5353 23.3214 29.5353 23.0749C29.5353 22.8306 29.4845 22.6355 29.3829 22.4897C29.2812 22.3439 29.1461 22.271 28.9774 22.271C28.8067 22.271 28.6705 22.3439 28.5688 22.4897Z" fill="#693D8B"/>
<path d="M31.3951 20.9711C31.2732 20.8561 31.2122 20.7124 31.2122 20.5399C31.2122 20.3674 31.2732 20.2237 31.3951 20.1086C31.515 19.9957 31.6623 19.9392 31.8372 19.9392C32.012 19.9392 32.1593 19.9957 32.2793 20.1086C32.4012 20.2237 32.4622 20.3674 32.4622 20.5399C32.4622 20.7124 32.4012 20.8561 32.2793 20.9711C32.1593 21.0841 32.012 21.1405 31.8372 21.1405C31.6623 21.1405 31.515 21.0841 31.3951 20.9711ZM31.2122 21.3438H32.4622V24.8062H31.2122V21.3438Z" fill="#693D8B"/>
<path d="M34.5019 20.583V21.3439H35.1055V22.2618H34.5019V23.5648C34.5019 23.7866 34.6309 23.8975 34.889 23.8975C34.9724 23.8975 35.0445 23.8924 35.1055 23.8821V24.76C34.9571 24.7908 34.7844 24.8062 34.5872 24.8062C34.1095 24.8062 33.7671 24.7312 33.5598 24.5813C33.3545 24.4314 33.2518 24.185 33.2518 23.842V22.2618H32.7975V21.3439H33.2518V20.583H34.5019Z" fill="#693D8B"/>
</g>
<defs>
<clipPath id="clip0_173_72">
<rect width="52" height="52" fill="white"/>
</clipPath>
</defs>
</svg>
bootstrap.min.css
This diff could not be displayed because it is too large.
index.html
......@@ -12,24 +12,42 @@
<header class="d-flex justify-content-center py-3">
<ul class="nav nav-pills">
<li class="nav-item">
<img src="assets/krystal.png" alt="krystal header">
<img src="assets/krystal_logo.svg" alt="krystal header" />
<span class="header_title-one">krystal</span>
<span class="header_title-two">vpn</span>
</li>
<li class="nav-item detailed">
<div class="dropdown">
<div class="btn lng-switcher" id="langSwitcher" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
onclick="openLang()">
<div class="chevron"></div>
<div
class="btn lng-switcher"
id="langSwitcher"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
onclick="openLang()"
>
Русский
</div>
<div class="dropdown-menu" aria-labelledby="langSwitcher">
<span class="dropdown-item active" data-lang="ru" onclick="switchLang('ru')">Русский</span>
<span class="dropdown-item" data-lang="en" onclick="switchLang('en')">English</span>
<span
class="dropdown-item active"
data-lang="ru"
onclick="switchLang('ru')"
>Русский</span
>
<span
class="dropdown-item"
data-lang="en"
onclick="switchLang('en')"
>English</span
>
</div>
</div>
<button type="button" class="btn download"
onclick="do_download()">Скачать KRYSTALVPN</button>
<button type="button" class="lng btn download" onclick="do_download()">
Скачать KRYSTALVPN
</button>
</li>
</ul>
</header>
......@@ -37,37 +55,136 @@
<div class="main">
<div class="main-first">
<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 class="card descr">
<div class="descr-top">
<div class="descr-top__title-top">
Открой для себя по-настоящему
</div>
<div class="descr-top__title-bottom">
<span class="title__colored"> быстрый и безопасный </span>
<span class="title__uncolored">VPN сервис</span>
</div>
</div>
<div class="descr-bottom">
<div class="row-data">
<div class="img-wrapper">
<img src="./assets/planet.svg" alt="description logo" />
</div>
<div class="d-card-wrapper">
<div class="lng d-card-wrapper__title">
Защищенный доступ в любой точке мира
</div>
<div class="lng d-card-wrapper__content">
Надежное подключение к виртуальной частной сети (ВПН) из любой
точки мира. Наши высокоскоростные серверы в 94 странах помогут
вам взять контроль в свои руки.
</div>
</div>
</div>
<div class="row-data">
<div class="img-wrapper">
<img src="./assets/speed.svg" alt="description logo" />
</div>
<div class="d-card-wrapper">
<div class="lng d-card-wrapper__title">
Высокая скорость везде и всегда
</div>
<div class="lng d-card-wrapper__content">
Наша VPN-сеть создана для скорости и использует технологии
нового поколения.
</div>
</div>
</div>
<div class="row-data">
<div class="img-wrapper">
<img src="./assets/safe.svg" alt="description logo" />
</div>
<div class="d-card-wrapper">
<div class="lng d-card-wrapper__title">
Безопасный Интернет за пару секунд
</div>
<div class="lng d-card-wrapper__content">
Использование Интернета не означает, что все должны видеть
ваши личные данные. Совершаете ли вы покупки онлайн или
подключаетесь к Wi-Fi в кафе, вы можете обеспечить более
серьезную защиту своей персональной информации
</div>
</div>
</div>
<div class="row-data">
<div class="img-wrapper">
<img src="./assets/cashback.svg" alt="description logo" />
</div>
<div class="d-card-wrapper">
<div class="lng d-card-wrapper__title">
Гарантия возврата денег 30 дней
</div>
<div class="lng d-card-wrapper__content">
Наш VPN-сервис прост в использовании. Как и наша гарантия.
Если вам что-то не нравится, мы вернем ваши деньги. Никаких
вопросов, никакого риска
</div>
</div>
</div>
</div>
</div>
<div class="card descr"></div>
</div>
<div class="main-second">
<div class="card descr">
<div class="third-description-wrapper">
<div class="lng third-top-title">
Можно использовать
</div>
<span class="lng third-top-second">на всех устройствах</span>
</div>
<article class="lng notation-one">
Оформив подписку на Krystal VPN, вы получите удобные приложения для всех ваших устройств, включая телефоны, планшеты,
компьютеры, роутеры и многие другие девайсы.
</article>
<div class="gp-wrapper">
<img src="./assets/google_play.svg" alt="google play">
</div>
<div class="gp-code-wrapper">
<img src="./assets/code.svg" alt="google play code">
</div>
<div class="gp-link">
https://play.google.com/store/apps/details?id=tw.mobileapp.qrcode.banner&hl=ru&gl=US
</div>
</div>
<div class="card bcg-two">
<img src="./assets/background_2.svg" alt="background image two">
<img src="./assets/background_2.svg" alt="background image two" />
</div>
<div class="card descr"></div>
</div>
<div class="main-third">
<div class="main-third__title">
Наши специалисты доступны 24/7 в онлайн-чате
и по электронной почте, чтобы помочь вам с установкой
и устранением неполадок.
<div class="lng main-third__title">
Наши специалисты доступны 24/7 в онлайн-чате и по электронной почте,
чтобы помочь вам с установкой и устранением неполадок.
</div>
<div class="support-btn">
<button type="button" class="lng btn support" onclick="do_support()">
Связаться с нами
</button>
</div>
</div>
</div>
<footer class="footer">
<div class="text-center first">
<img src="assets/krystal.png" alt="krystal footer">
<img src="assets/krystal_logo.svg" alt="krystal footer" />
<span class="footer_title-one">krystal</span>
<span class="footer_title-two">vpn</span>
</div>
<div class="text-center second">
&copy;
<span class="year"></span>
<span>Все права защищены.</span>
<span class="lng">Все права защищены.</span>
</div>
</footer>
<script src="bootstrap.min.js"></script>
......
index.js
......@@ -59,3 +59,7 @@ function set_current_year() {
yearNode.innerHTML = year;
}
}
function do_support() {
console.log("do support!");
}
\ No newline at end of file
style.css
......@@ -14,6 +14,21 @@
body {
line-height: normal;
overflow-x: hidden;
}
body::-webkit-scrollbar {
width: 6px;
height: 10px;
background: #f2f2f2;
scrollbar-width: thin;
}
body::-webkit-scrollbar-thumb {
min-width: 50px;
background: #ccc;
}
header {
......@@ -68,9 +83,47 @@ header > .nav.nav-pills > .nav-item.detailed {
}
header > .nav.nav-pills > .nav-item.detailed > .dropdown {
display: flex;
margin-right: 30px;
}
.dropdown-menu.show {
top: 30px;
}
.chevron {
width: 12px;
position: relative;
}
.chevron::before {
width: 8px;
height: 8px;
display: inline-block;
border-style: solid;
border-width: 2px 2px 0 0;
content: "";
left: 0;
position: relative;
top: 10px;
color: #fff;
-webkit-transform: rotate(135deg);
-ms-transform: rotate(135deg);
transform: rotate(135deg);
vertical-align: top;
-webkit-transition: -webkit-transform 0.3s ease-in;
transition: -webkit-transform 0.3s ease-in;
-o-transition: transform 0.3s ease-in;
transition: transform 0.3s ease-in;
transition: transform 0.3s ease-in, -webkit-transform 0.3s ease-in;
}
header > .nav.nav-pills > .nav-item.detailed > .dropdown > .btn.lng-switcher {
font-family: "RobotoRegular";
font-style: normal;
......@@ -78,6 +131,8 @@ header > .nav.nav-pills > .nav-item.detailed > .dropdown > .btn.lng-switcher {
font-size: 14px;
text-align: center;
width: 80px;
color: #fff;
}
......@@ -92,23 +147,135 @@ header > .nav.nav-pills > .nav-item.detailed > .dropdown > .btn.lng-switcher {
display: flex;
width: 100%;
background-color: #23003f;
}
.main > .main-first > .card.bcg-one {
width: calc(100% / 2);
height: 648px;
display: flex;
align-items: center;
justify-content: center;
background-color: #23003f;
border: none;
}
.main > .main-first > .card.descr {
width: calc(100% / 2);
align-items: flex-start;
background-color: #23003f;
border: none;
}
.main > .main-first > .card.descr > .descr-top {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 20px 0 22px 0;
}
.main > .main-first > .card.descr > .descr-top > .descr-top__title-top {
font-family: "RobotoRegular";
font-style: normal;
font-weight: 400;
font-size: 35px;
line-height: 41px;
color: #fff;
}
.main
> .main-first
> .card.descr
> .descr-top
> .descr-top__title-bottom
> span.title__colored {
font-family: "Roboto";
font-style: normal;
font-weight: 400;
font-size: 35px;
line-height: 41px;
color: #faff00;
}
.main
> .main-first
> .card.descr
> .descr-top
> .descr-top__title-bottom
> span.title__uncolored {
font-family: "RobotoRegular";
font-style: normal;
font-weight: 400;
font-size: 35px;
line-height: 41px;
color: #fff;
}
.main > .main-first > .card.descr > .descr-bottom {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.main > .main-first > .card.descr > .descr-bottom > .row-data {
width: 100%;
display: flex;
align-items: flex-start;
justify-content: center;
margin-bottom: 28px;
}
.main > .main-first > .card.descr > .descr-bottom > .row-data > .img-wrapper {
margin-right: 32px;
}
.main > .main-first > .card.descr > .descr-bottom > .row-data > .img-wrapper > img {
width: 52px;
}
.main
> .main-first
> .card.descr
> .descr-bottom
> .row-data
> .d-card-wrapper
> .d-card-wrapper__title {
font-family: "RobotoRegular";
font-style: normal;
font-weight: 700;
font-size: 20px;
line-height: 23px;
margin-bottom: 14px;
color: #00b8f0;
}
.main
> .main-first
> .card.descr
> .descr-bottom
> .row-data
> .d-card-wrapper
> .d-card-wrapper__content {
font-family: "RobotoRegular";
font-style: normal;
max-width: 400px;
color: #fff;
}
.main > .main-second {
......@@ -119,30 +286,116 @@ header > .nav.nav-pills > .nav-item.detailed > .dropdown > .btn.lng-switcher {
.main > .main-second > .card.bcg-two {
width: calc(100% / 2);
height: 648px;
display: flex;
align-items: center;
justify-content: center;
background-color: #430092;
background-image: url("./assets/background_2.png");
border: none;
border-radius: 0;
overflow: hidden;
}
.main > .main-second > .card.descr {
width: calc(100% / 2);
display: flex;
align-items: flex-end;
justify-content: center;
padding: 27px 45px 36px 0;
background-color: #430092;
border: none;
border-radius: 0;
overflow: hidden;
}
.main > .main-second > .card.descr > .third-description-wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-bottom: 14px;
}
.main
> .main-second
> .card.descr
> .third-description-wrapper
> .third-top-title {
font-family: "RobotoRegular";
font-style: normal;
font-weight: 400;
font-size: 35px;
line-height: 41px;
color: #ffffff;
}
.main
> .main-second
> .card.descr
> .third-description-wrapper
> .third-top-second {
font-family: "RobotoRegular";
font-style: normal;
font-weight: 400;
font-size: 35px;
line-height: 41px;
color: #faff00;
}
article.notation-one {
font-family: "RobotoRegular";
font-style: normal;
font-weight: 500;
font-size: 14px;
line-height: 16px;
max-width: 560px;
margin-bottom: 34px;
color: #ffffff;
text-align: end;
}
.main > .main-second > .card.descr > .gp-wrapper {
margin-bottom: 24px;
}
.main > .main-second > .card.descr > .gp-code-wrapper {
margin-bottom: 20px;
}
.main > .main-second > .card.descr > .gp-link {
font-family: "RobotoRegular";
font-style: normal;
font-weight: 300;
font-size: 14px;
line-height: 16px;
color: #ffffff;
}
.main-third {
height: 266px;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #430092;
background-color: #23003f;
}
.main-third > .main-third__title {
font-family: "Roboto";
font-family: "RobotoRegular";
font-style: normal;
font-weight: 700;
font-size: 20px;
......@@ -151,12 +404,25 @@ header > .nav.nav-pills > .nav-item.detailed > .dropdown > .btn.lng-switcher {
width: 592px;
padding: 40px 0 50px 0;
padding: 20px 0 60px 0;
color: #fff;
text-align: center;
}
.support-btn > .btn.support {
font-family: "RobotoRegular";
font-style: normal;
font-weight: 700;
font-size: 16px;
line-height: 19px;
padding: 18px 30px;
background-color: #00b8f0;
border-radius: 103px;
}
footer.footer {
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!