Skip to content

Instantly share code, notes, and snippets.

@AndrewShedov

AndrewShedov/index.html

Last active September 29, 2022 13:20
Show Gist options
  • Save AndrewShedov/dc49cda6b6b507a37f85a566a2732720 to your computer and use it in GitHub Desktop.
Save AndrewShedov/dc49cda6b6b507a37f85a566a2732720 to your computer and use it in GitHub Desktop.
Download ZIP
Call back popup on jQuery
Raw
gistfile1.txt
Live - https://andrewshedov.github.io/Animated_jQuery_popup_callback_form/
Codepen - https://codepen.io/AndrewShedov/pen/yLjVbeK
https://shedov.top/
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="robots" content="noindex,nofollow" />
<meta charset="UTF-8" />
<title>Animated jQuery popup callback form</title>
<link rel="stylesheet" href="./style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel=stylesheet
href=https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css
>
</head>
<body>
<!-- ////////////////////// CALL BACK ///////////////////// 1 -->
<!-- <div class="callback_button_wrap" > 1-->
<div class="callback_button_wrap">
<div class="callback_button_pulsation"></div>
<i class="fa fa-phone"> </i>
</div>
<!-- <div class="callback_button_wrap" > 2-->
<!-- <div class="callback_wrap"> 1-->
<div class="callback_wrap">
<!-- <div class="callback_window_wrap"> 1-->
<div class="callback_window_wrap">
<!-- <div class="callback_window"> 1-->
<div class="callback_window">
<!-- <div class="callback_window-button_close"> 1-->
<div class="callback_window-button_close">
<i
class="fa fa-times callback_window-button_close_icon"
aria-hidden="true"
></i>
</div>
<!-- <div class="callback_window-button_close"> 1-->
<!-- <div class="callback_window_title_wrap"> 1-->
<div class="callback_window_title_wrap">
<p>Request a call back</p>
</div>
<!-- <div class="callback_window_title_wrap"> 2-->
<div class="callback_window_2_wrap">
<!-- <div class="callback_window_input_name_wrap"> 1-->
<div class="callback_window_input_name_wrap">
<input
class="callback_window_input_name"
id="username"
type="text"
name="callback_window_input_name"
placeholder="Name"
/>
</div>
<!-- <div class="callback_window_input_name_wrap"> 2-->
<!-- <div class="callback_window_input_phone_wrap"> 1-->
<div class="callback_window_input_phone_wrap">
<input
class="callback_window_input_phone"
type="text"
id="phone"
name="callback_window_input_phone"
onkeyup="this.value = this.value.replace(/[^+\d]/g, '');"
placeholder="Phone number
"
/>
</div>
<!-- <div class="callback_window_input_phone_wrap"> 2-->
<!-- <div class="callback_privacy_policy_wrap"> 1-->
<div class="callback_privacy_policy_wrap">
<div class="callback_privacy_policy">
<div class="checkbox_callback_privacy_policy_wrap">
<input
class="checkbox_callback_privacy_policy"
type="checkbox"
id="accept-terms"
/>
</div>
<label class="callback_privacy_policy_label" for="accept-terms">
<p>I consent to the processing of my personal data.</p></label
>
</div>
</div>
<!-- <div class="callback_privacy_policy_wrap"> 2-->
<!-- <div class="callback_send_button_wrap"> 1-->
<div class="callback_send_button_wrap">
<input
type="hidden"
name="callback_send_button_recaptcha_response"
id="callback_send_button_recaptcha_token"
/>
<input
class="callback_send_button"
id="callback_send_button"
type="submit"
value="Send"
/>
</div>
<!-- <div class="callback_send_button_wrap"> 2-->
</div>
</div>
<!-- <div class="callback_window"> 2-->
</div>
<!-- <div class="callback_window_wrap"> 2-->
</div>
<!-- <div class="callback_wrap"> 2 -->
<!-- ////////////////////// CALL BACK ///////////////////// 2 -->
<div class="wrap">
<div class="title">
<h1>Animated jQuery popup callback form</h1>
</div>
<div class="site_link_wrap">
<a href="https://shedov.top/" target="blank"
>SHEDOV.TOP</a>
</div>
<div class="look">
<p>
Watch it on
<a href="https://codepen.io/AndrewShedov/pen/yLjVbeK" target="blank"
>СodePen</a
>,
<a
href="https://github.com/AndrewShedov/andrewshedov.github.io/tree/master/Animated_jQuery_popup_callback_form"
target="blank"
>GitHub</a
>.
</p>
</div>
<div class="title_contacting_wrap">
<div class="title_contacting">
<p>Please subscribe to my social networks:</p>
</div>
</div>
<div class="Contacts_Wrap">
<div class="Contacts_Icons_Wrap">
<!-- <div class="Contacts_Icons_Wrap_level_1_wrap"> 1-->
<div class="Contacts_Icons_Wrap_level_1_wrap">
<div class="twitter">
<a
class="twitter2"
href="https://twitter.com/AndrewShedov"
target="blank"
rel="noopener"
><i class="fab fa-twitter"></i>
</a>
</div>
<div class="vk_icon">
<a
class="vk_icon_2"
href="https://vk.com/andrewshedov"
target="blank"
rel="noopener"
><i class="fab fa-vk"></i>
</a>
</div>
<div class="vk_icon_public">
<a
class="vk_icon_2_public"
href="https://vk.com/ShedovClub"
target="blank"
rel="noopener"
><img
src="https://shedov.top/wp-content/images/vk_public_3.png"
alt="vk_public"
/>
</a>
</div>
<div class="discord_icon">
<a
class="discord_icon_2"
href="https://discordapp.com/channels/1006372235172384849/1006372235692486790"
target="blank"
rel="noopener"
><i class="fab fa-discord"></i>
</a>
</div>
<div class="telegram_icon">
<a
class="telegram_icon_2"
href="https://t.me/ShedovClub"
target="blank"
rel="noopener"
><i class="fab fa-telegram"></i>
</a>
</div>
<!-- <div class="Contacts_Icons_Wrap_level_1_wrap"> 2-->
</div>
<!-- <div class="Contacts_text_wrap"> 1-->
<div class="Contacts_text_wrap">
<!-- <div class="Contacts_text"> 1-->
<div class="Contacts_text">
<p>Streams, videos</p>
<!-- <div class="Contacts_text"> 2-->
</div>
<!-- <div class="Contacts_text_wrap"> 2-->
</div>
<!-- <div class="Contacts_Icons_Wrap_level_2_wrap"> 1-->
<div class="Contacts_Icons_Wrap_level_2_wrap">
<div class="trovo_icon">
<a
class="trovo_icon_2"
href="https://trovo.live/s/ShedovShow"
target="blank"
rel="noopener"
><img
src="https://shedov.top/wp-content/images/Trovo.png"
alt="trovo"
/>
</a>
</div>
<div class="youtube_icon">
<a
class="youtube_icon_2"
href="https://www.youtube.com/channel/UCsJiiS9XOmWKQ600_CkNTEg"
target="blank"
rel="noopener"
><i class="fab fa-youtube"></i>
</a>
</div>
<div class="twitch_icon">
<a
class="twitch_icon_2"
href="https://www.twitch.tv/shedov__"
target="blank"
rel="noopener"
><i class="fab fa-twitch"></i>
</a>
</div>
<!-- <div class="Contacts_Icons_Wrap_level_2_wrap"> 2-->
</div>
<!-- <div class="Contacts_text_wrap"> 1-->
<div class="Contacts_text_wrap">
<!-- <div class="Contacts_text"> 1-->
<div class="Contacts_text">
<p>Prog</p>
<!-- <div class="Contacts_text"> 2-->
</div>
<!-- <div class="Contacts_text_wrap"> 2-->
</div>
<!-- <div class="Contacts_Icons_Wrap_level_4_wrap"> 1-->
<div class="Contacts_Icons_Wrap_level_4_wrap">
<div class="codepen">
<a
class="codepen2"
href="https://codepen.io/AndrewShedov"
target="blank"
rel="noopener"
><i class="fab fa-codepen"></i>
</a>
</div>
<a class="telegram_icon_pro_svg_contacts_a" href="https://t.me/ShedovPRO" target="_blank">
<div class="telegram_icon_pro_svg_contacts_wrap">
<svg class="telegram_icon_pro_svg_contacts" width="45" height="45" viewBox="0 -7 30 30" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path fill-rule="evenodd" clip-rule="evenodd" d="M18.384,22.779c0.322,0.228 0.737,0.285 1.107,0.145c0.37,-0.141 0.642,-0.457 0.724,-0.84c0.869,-4.084 2.977,-14.421 3.768,-18.136c0.06,-0.28 -0.04,-0.571 -0.26,-0.758c-0.22,-0.187 -0.525,-0.241 -0.797,-0.14c-4.193,1.552 -17.106,6.397 -22.384,8.35c-0.335,0.124 -0.553,0.446 -0.542,0.799c0.012,0.354 0.25,0.661 0.593,0.764c2.367,0.708 5.474,1.693 5.474,1.693c0,0 1.452,4.385 2.209,6.615c0.095,0.28 0.314,0.5 0.603,0.576c0.288,0.075 0.596,-0.004 0.811,-0.207c1.216,-1.148 3.096,-2.923 3.096,-2.923c0,0 3.572,2.619 5.598,4.062Zm-11.01,-8.677l1.679,5.538l0.373,-3.507c0,0 6.487,-5.851 10.185,-9.186c0.108,-0.098 0.123,-0.262 0.033,-0.377c-0.089,-0.115 -0.253,-0.142 -0.376,-0.064c-4.286,2.737 -11.894,7.596 -11.894,7.596Z"/></svg>
</div>
</a>
<div class="github">
<a
class="github2"
href="https://github.com/AndrewShedov"
target="blank"
rel="noopener"
><i class="fab fa-github"></i>
</a>
</div>
<!-- <div class="Contacts_Icons_Wrap_level_4_wrap"> 2-->
</div>
<div class="title_contacting_2_wrap">
<div class="title_contacting_2">
<p>If you want to support me:</p>
</div>
</div>
<!-- <div class="donate_subscribe_buttons_wrap"> 1-->
<div class="donate_subscribe_buttons_wrap">
<!-- <div class="donate_subscribe_buttons"> 1-->
<div class="donate_subscribe_buttons">
<!-- <div class="donate_button_wrap"> 1-->
<a
class="donate_button_wrap_a"
href="https://www.donationalerts.com/r/andrewshedov"
target="blank"
rel="noopener"
>
<div class="donate_button_wrap">
<p>Donate</p>
</div>
</a>
<!-- <div class="donate_button_wrap"> 2-->
<!-- <div class="subscribe_button_wrap"> 1-->
<a href="https://boosty.to/shedov" target="blank" rel="noopener">
<div class="subscribe_button_wrap">
<p>Subscribe</p>
</div>
</a>
<!-- <div class="subscribe_button_wrap"> 2-->
<!-- <div class="donate_subscribe_buttons"> 2-->
</div>
<!-- <div class="donate_subscribe_buttons_wrap"> 2-->
</div>
<!-- <div class="Contacts_text_wrap"> 1-->
<div class="Contacts_text_wrap">
<!-- <div class="Contacts_text"> 1-->
<div class="Contacts_text">
<p>Payment Details</p>
<!-- <div class="Contacts_text"> 2-->
</div>
<!-- <div class="Contacts_text_wrap"> 2-->
</div>
<!-- <div class="Contacts_Icons_Wrap_level_3_wrap"> 1-->
<div class="Contacts_Icons_Wrap_level_3_wrap">
<div class="qiwi_icon">
<a
class="qiwi_icon_2"
href="https://qiwi.com/n/ANDREWSHEDOV"
target="blank"
rel="noopener"
><img
src="https://shedov.top/wp-content/images/qiwi.png"
alt="qiwi"
/>
</a>
</div>
<div class="yoomoney_icon">
<a
class="yoomoney_icon_2"
href="https://yoomoney.ru/to/410011226872318"
target="blank"
rel="noopener"
><img
src="https://shedov.top/wp-content/images/yoomoney.png"
alt="yoomoney"
/>
</a>
</div>
<div class="paypal_icon">
<a
class="paypal_icon_2"
href="https://paypal.me/AndrewShedov"
target="blank"
rel="noopener"
><i class="fab fa-paypal"></i>
</a>
</div>
<div class="tinkoff_icon">
<a
class="tinkoff_icon_2"
href="https://www.tinkoff.ru/rm/shedov.andrey2/lGla256001"
target="blank"
rel="noopener"
><img
src="https://shedov.top/wp-content/images/tinkoff_logo.png"
alt="tinkoff"
/>
</a>
</div>
<!-- <div class="Contacts_Icons_Wrap_level_3_wrap"> 2-->
</div>
<!-- <div class="Contacts_Icons_Wrap_level_5_wrap"> 1-->
<div class="Contacts_Icons_Wrap_level_5_wrap">
<!-- <div class="Contacts_Icons_Wrap_level_5"> 1-->
<div class="Contacts_Icons_Wrap_level_5">
<p>
BTC (Network - BTC Bitcoin): 1C2EWWeEXVhg93hJA9KovpkSd3Rn3BkcYm
</p>
<p>
ETH (Network - ETH Ethereum (ERC20)):
0x4c2cc23dcf86f0b39db499c951984f40d7bdf3ac
</p>
<!-- <div class="Contacts_Icons_Wrap_level_5"> 2-->
</div>
<!-- <div class="Contacts_Icons_Wrap_level_5_wrap"> 2-->
</div>
</div>
</div>
</div>
<!-- partial -->
<script src="https://yandex.st/jquery/2.1.1/jquery.min.js"></script>
<script src="./script.js"></script>
</body>
</html>
Raw
script.js
$(document).ready(function($) {
$('.callback_button_wrap').click(function() {
$('.callback_window_wrap').fadeIn(500);
$('.callback_button_wrap').fadeOut(300);
$('.callback_wrap').fadeIn(500);
});
$('.callback_window-button_close').click(function() {
$('.callback_window_wrap').fadeOut(500);
$('.callback_button_wrap').fadeIn(500);
});
$('.callback_window_wrap').click(function(e) {
if (e.target == this){
$('.callback_wrap').fadeOut(500);
$('.callback_button_wrap').fadeIn(500);
}
});
});
Raw
style.css
/*/////////////////////// CALL BACK ///////////////////// 1 */
.callback_button_wrap {
position: fixed;
right: 30px;
bottom: 50px;
border-radius: 50%;
background-color: rgb(223 179 58 / 39%);
color: rgb(255, 255, 255);
width: 80px;
height: 80px;
display: flex;
justify-content: center;
cursor: pointer;
transform: rotate(100deg);
align-items: center;
z-index: 1;
}
.callback_button_wrap i {
font-size: 40px;
animation-name: joomly-callback-tossing;
animation-duration: 1.5s;
animation-iteration-count: infinite;
}
@keyframes joomly-callback-tossing {
0% {
transform: rotate(-8deg);
}
50% {
transform: rotate(8deg);
}
100% {
transform: rotate(-8deg);
}
}
.callback_button_pulsation {
width: 95px;
height: 95px;
background: rgba(200, 158, 30, 0.504);
border-radius: 50%;
transform: scale(0.85);
animation: pulse 2s ease-in-out infinite;
position: absolute;
z-index: 0;
}
@keyframes pulse {
from {
transform: scale(0.85);
}
50% {
transform: scale(1.1);
}
to {
transform: scale(0.85);
}
}
.callback_wrap {
display: none;
}
.callback_window_wrap {
position: fixed;
display: flex;
justify-content: center;
align-items: center;
background: rgb(0 0 0 / 14%);
height: 100%;
width: 100%;
z-index: 1;
opacity: 1;
}
.callback_window {
border-radius: 8px;
width: 100%;
max-width: 300px;
border: 2px solid rgb(0, 0, 0) !important;
background: rgb(0, 0, 0);
margin-left: 20px;
margin-right: 20px;
z-index: 2;
position: relative;
}
.callback_window_2_wrap {
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
background-color: #fff;
}
.callback_window-button_close {
position: absolute;
border: 2px solid rgb(0, 0, 0) !important;
top: -11px;
right: -10px;
cursor: pointer;
border-radius: 50%;
width: 25px;
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
padding: 2px;
transition: all 300ms ease;
}
.callback_window-button_close i {
font-size: 25px;
color: rgb(0, 0, 0);
transition: all 300ms ease;
}
.callback_window-button_close_icon {
transition: all 500ms ease;
}
.callback_window-button_close:hover .callback_window-button_close_icon {
color: rgb(0, 0, 0);
transition: all 500ms ease;
transform: rotate(360deg);
}
.callback_privacy_policy_wrap {
margin-top: 5px;
margin-bottom: 11px;
}
.callback_privacy_policy {
display: flex;
justify-content: center;
align-items: center;
}
.checkbox_callback_privacy_policy_wrap {
display: flex;
justify-content: center;
align-items: center;
margin-left: 5px;
}
.callback_privacy_policy_label {
text-align: left;
font-size: 12px;
color: rgb(0, 0, 0) !important;
margin-left: 5px;
margin-right: 5px;
font-family: Arial, Helvetica, sans-serif;
cursor: pointer;
}
.checkbox_callback_privacy_policy {
cursor: pointer;
}
.callback_window_title_wrap {
background-color: rgb(0, 0, 0);
cursor: default;
}
.callback_window_title_wrap p {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 17px;
padding: 5px;
color: rgb(255, 255, 255) !important;
}
.callback_window_input_name_wrap {
display: flex;
justify-content: center;
}
.callback_window_input_name::placeholder {
font-family: Arial, Helvetica, sans-serif;
color: rgb(0, 0, 0) !important;
}
input {
outline: none;
}
.callback_window_input_name {
transition: all 500ms ease;
margin-top: 17px;
width: 100%;
max-width: 190px !important;
font-family: Arial, Helvetica, sans-serif;
height: 25px !important;
padding-left: 15px;
border: 2px solid rgb(0, 0, 0) !important;
border-radius: 20px;
resize: none;
background-color: transparent;
color: rgb(0, 0, 0) !important;
transition: all 500ms ease;
font-size: 15px;
font-weight: 400;
line-height: 18px;
text-decoration: none !important;
}
.callback_window_input_phone_wrap {
display: flex;
justify-content: center;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.callback_window_input_phone::placeholder {
font-family: Arial, Helvetica, sans-serif;
color: rgb(0, 0, 0) !important;
}
.callback_window_input_phone {
font-family: Arial, Helvetica, sans-serif;
transition: all 500ms ease;
margin-bottom: 6px !important;
width: 100%;
max-width: 190px !important;
margin-top: 10px !important;
height: 25px !important;
padding-left: 15px;
border: 2px solid rgb(0, 0, 0) !important;
border-radius: 20px;
resize: none;
background-color: transparent;
color: rgb(0, 0, 0) !important;
margin-bottom: 10px;
transition: all 500ms ease;
font-size: 15px;
font-weight: 400;
line-height: 18px;
text-decoration: none !important;
}
.callback_send_button_wrap {
display: flex;
justify-content: center;
}
.callback_send_button {
display: flex;
justify-content: center;
cursor: pointer;
border-radius: 25px;
height: 30px;
background: rgb(0, 0, 0);
font-family: Arial, Helvetica, sans-serif;
margin-bottom: 15px;
color: #fff;
font-weight: bold;
border: none;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
transition: all 500ms ease;
padding-left: 10px;
padding-right: 10px;
}
.callback_send_button:hover {
background: rgb(43, 42, 42);
transition: all 500ms ease;
}
/*/////////////////////// CALL BACK ///////////////////// 2 */
.title_contacting_wrap {
display: flex;
justify-content: center;
}
.title_contacting {
text-align: center;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
font-size: 20px;
margin-left: 15px;
margin-right: 15px;
}
.title_contacting_2_wrap {
display: flex;
justify-content: center;
margin-left: 15px;
margin-right: 15px;
margin-top: 20px !important;
margin-bottom: 20px !important;
width: 100%;
}
.title_contacting_2 {
text-align: center;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
font-size: 20px;
}
.Contacts_Wrap {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.Contacts_Mail_wrap {
display: flex;
width: 100%;
justify-content: center;
align-items: center;
margin-top: 38px;
margin-right: 14px;
}
.Contacts_Mail_wrap a {
color: #000000de;
text-decoration: none;
font-family: "Roboto", sans-serif;
font-size: 27px;
font-weight: 400;
}
.Contacts_Mail_wrap a:hover {
font-size: 27px;
}
@media screen and (min-width: 0px) and (max-width: 390px) {
.Contacts_Mail_wrap a {
color: #000000;
font-family: "Roboto", sans-serif;
font-size: 6vw !important;
}
}
.Contacts_Icons_Wrap {
display: flex;
justify-content: center;
margin-top: 10px;
flex-wrap: wrap;
width: 100%;
max-width: 700px;
margin-bottom: 75px;
transition: all 300ms ease;
}
.Contacts_Icons_Wrap_level_1_wrap {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
margin-right: 7px;
margin-bottom: 5px;
flex-wrap: wrap;
}
.Contacts_Icons_Wrap_level_2_wrap {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
flex-wrap: wrap;
margin-bottom: 5px;
}
.Contacts_Icons_Wrap_level_3_wrap {
height: 25px;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
margin-top: 20px;
}
.Contacts_Icons_Wrap_level_4_wrap {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
margin-top: 5px;
margin-bottom: 7px;
margin-right: 20px;
}
.Contacts_Icons_Wrap_level_5_wrap {
display: flex;
justify-content: center;
margin-top: 35px;
margin-left: 15px;
margin-right: 15px;
}
.Contacts_Icons_Wrap_level_5 {
width: 100%;
max-width: 290px;
}
.Contacts_Icons_Wrap_level_5 p {
font-family: "Roboto", sans-serif;
word-break: break-all;
font-size: 15px;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
.Contacts_Icons_Wrap_level_5 p {
font-family: "Roboto", sans-serif;
word-break: break-all;
font-size: 16px;
}
}
.Contacts_Icons_Wrap_level_5 p:nth-child(2) {
margin-top: 10px;
}
.Contacts_text_wrap {
display: flex;
justify-content: center;
margin-top: 15px;
margin-bottom: 3px;
margin-left: 15px;
margin-right: 15px;
width: 100%;
}
.Contacts_text {
width: 100%;
max-width: 270px;
}
.Contacts_text p {
font-family: "Roboto", sans-serif;
word-break: break-all;
font-size: 16px;
text-align: center;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
.Contacts_text p {
font-size: 17px;
}
}
.github {
transition: all 300ms ease;
max-height: 45px;
/*
max-height: 58px;
*/
height: 100%;
background-color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
margin-top: 15px;
margin-left: 30px;
margin-right: 4px;
}
@media screen and (min-width: 1000px) and (max-width: 99999999px) {
.github:hover {
width: 55px;
height: 55px;
background-color: #000000;
transition: all 300ms ease;
}
}
.github2 {
font-size: 47px;
color: rgb(0, 0, 0);
justify-content: center;
border-radius: 50%;
display: flex;
align-items: center;
transition: all 300ms ease;
text-decoration: none;
}
@media screen and (min-width: 1000px) and (max-width: 99999999px) {
.github2:hover {
font-size: 65px;
color: rgb(255, 255, 255);
justify-content: center;
display: flex;
align-items: center;
transition: all 300ms ease;
}
}
.telegram_icon_pro_svg_contacts_a {
margin-left: 30px;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
.telegram_icon_pro_svg_contacts_a {
margin-left: 22px;
}
}
.telegram_icon_pro_svg_contacts_wrap{
display: flex;
justify-content: center;
align-items: center;
}
.telegram_icon_pro_svg_contacts {
fill: rgb(0, 0, 0);
transition: all 300ms ease;
display: flex;
align-items: center;
}
@media screen and (min-width: 1000px) and (max-width: 99999999px) {
.telegram_icon_pro_svg_contacts:hover {
transition: all 300ms ease;
width: 53px;
height: 53px;
}
}
.behance {
transition: all 300ms ease;
width: 60px;
height: 60px;
background-color: #fff !important;
border-radius: 50%;
display: none;
align-items: center;
justify-content: center;
cursor: pointer;
margin-top: 15px;
}
@media screen and (min-width: 1000px) and (max-width: 99999999px) {
.behance:hover {
width: 75px;
height: 75px;
background-color: #000000 !important;
transition: all 300ms ease;
}
}
.behance2 {
color: #000000;
font-size: 45px;
text-decoration: none;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 300ms ease;
}
@media screen and (min-width: 1000px) and (max-width: 99999999px) {
.behance2:hover {
color: #fff;
transition: all 300ms ease;
}
}
.vk_icon_public {
transition: all 300ms ease;
width: 45px;
height: 45px;
background-color: #fff !important;
border-radius: 50%;
margin-left: 15px;
margin-right: 15px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
margin-top: 15px;
}
@media screen and (min-width: 1000px) and (max-width: 99999999px) {
.vk_icon_public:hover {
width: 55px;
height: 55px;
background-color: #0378ff !important;
transition: all 300ms ease;
}
}
.vk_icon_2_public {
color: #67adfe;
font-size: 38px;
text-decoration: none;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 300ms ease;
}
@media screen and (min-width: 1000px) and (max-width: 99999999px) {
.vk_icon_2_public:hover {
color: #fff;
transition: all 300ms ease;
}
}
.vk_icon {
transition: all 300ms ease;
width: 55px;
height: 55px;
background-color: #fff !important;
border-radius: 50%;
margin-left: 15px;
margin-right: 15px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
margin-top: 15px;
}
@media screen and (min-width: 1000px) and (max-width: 99999999px) {
.vk_icon:hover {
width: 65px;
height: 65px;
background-color: #0378ff !important;
transition: all 300ms ease;
}
}
.vk_icon_2 {
color: #0378ff;
font-size: 38px;
text-decoration: none;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 300ms ease;
}
@media screen and (min-width: 1000px) and (max-width: 99999999px) {
.vk_icon_2:hover {
color: #fff;
transition: all 300ms ease;
}
}
.discord_icon {
transition: all 300ms ease;
width: 55px;
height: 55px;
background-color: #fff !important;
border-radius: 50%;
margin-left: 15px;
margin-right: 15px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
margin-top: 15px;
}
@media screen and (min-width: 1000px) and (max-width: 99999999px) {
.discord_icon:hover {
width: 65px;
height: 65px;
background-color: #5562ea !important;
transition: all 300ms ease;
}
}
.discord_icon_2 {
color: #5562ea;
font-size: 38px;
text-decoration: none;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 300ms ease;
}
@media screen and (min-width: 1000px) and (max-width: 99999999px) {
.discord_icon_2:hover {
color: #fff;
transition: all 300ms ease;
}
}
.telegram_icon {
transition: all 300ms ease;
width: 43px;
height: 43px;
background-color: #fff !important;
border-radius: 50%;
margin-left: 15px;
margin-right: 15px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
margin-top: 15px;
}
@media screen and (min-width: 1000px) and (max-width: 99999999px) {
.telegram_icon:hover {
width: 65px;
height: 65px;
background-color: #ffffff !important;
transition: all 300ms ease;
}
}
.telegram_icon_2 {
color: #27a3e2;
font-size: 45px;
text-decoration: none;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 300ms ease;
}
@media screen and (min-width: 1000px) and (max-width: 99999999px) {
.telegram_icon_2:hover {
color: #27a3e2;
font-size: 55px;
transition: all 300ms ease;
}
}
.youtube_icon {
transition: all 300ms ease;
width: 55px;
height: 55px;
background-color: #fff !important;
border-radius: 50%;
margin-left: 15px;
margin-right: 15px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
margin-top: 15px;
}
@media screen and (min-width: 1000px) and (max-width: 99999999px) {
.youtube_icon:hover {
width: 65px;
height: 65px;
background-color: #ff0000 !important;
transition: all 300ms ease;
}
}
.youtube_icon_2 {
color: #ff0000;
font-size: 35px;
text-decoration: none;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 300ms ease;
}
@media screen and (min-width: 1000px) and (max-width: 99999999px) {
.youtube_icon_2:hover {
color: #ffffff;
transition: all 300ms ease;
}
}
.twitch_icon {
transition: all 300ms ease;
width: 55px;
height: 55px;
background-color: #fff !important;
border-radius: 50%;
margin-left: 5px;
margin-right: 15px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
margin-top: 15px;
}
@media screen and (min-width: 1000px) and (max-width: 99999999px) {
.twitch_icon:hover {
width: 65px;
height: 65px;
background-color: #9146ff !important;
transition: all 300ms ease;
}
}
.twitch_icon_2 {
color: #9146ff;
font-size: 35px;
text-decoration: none;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 300ms ease;
}
@media screen and (min-width: 1000px) and (max-width: 99999999px) {
.twitch_icon_2:hover {
color: #ffffff;
transition: all 300ms ease;
}
}
.trovo_icon {
transition: all 300ms ease;
width: 45px;
height: 45px;
background-color: #fff !important;
border-radius: 50%;
margin-left: 15px;
margin-right: 15px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
margin-top: 15px;
}
@media screen and (min-width: 1000px) and (max-width: 99999999px) {
.trovo_icon:hover {
width: 55px;
height: 55px;
background-color: #ffffff !important;
transition: all 300ms ease;
}
}
.trovo_icon_2 {
color: #9146ff;
font-size: 45px;
text-decoration: none;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 300ms ease;
}
@media screen and (min-width: 1000px) and (max-width: 99999999px) {
.trovo_icon_2:hover {
color: #ffffff;
transition: all 300ms ease;
}
}
.donationalerts_icon {
transition: all 300ms ease;
width: 35px;
height: 35px;
background-color: #fff !important;
border-radius: 50%;
margin-left: 15px;
margin-right: 15px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
margin-top: 15px;
}
@media screen and (min-width: 1000px) and (max-width: 99999999px) {
.donationalerts_icon:hover {
width: 45px;
height: 45px;
background-color: #ffffff !important;
transition: all 300ms ease;
}
}
.donationalerts_icon_2 {
color: #9146ff;
font-size: 45px;
text-decoration: none;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 300ms ease;
}
@media screen and (min-width: 1000px) and (max-width: 99999999px) {
.donationalerts_icon_2:hover {
color: #ffffff;
transition: all 300ms ease;
}
}
.boosty_icon {
transition: all 300ms ease;
width: 32px;
height: 35px;
background-color: #fff !important;
border-radius: 50%;
margin-left: 15px;
margin-right: 15px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
margin-top: 15px;
}
@media screen and (min-width: 1000px) and (max-width: 99999999px) {
.boosty_icon:hover {
width: 45px;
height: 45px;
background-color: #ffffff !important;
transition: all 300ms ease;
}
}
.boosty_icon_2 {
color: #9146ff;
font-size: 45px;
text-decoration: none;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 300ms ease;
}
@media screen and (min-width: 1000px) and (max-width: 99999999px) {
.boosty_icon_2:hover {
color: #ffffff;
transition: all 300ms ease;
}
}
.qiwi_icon {
transition: all 300ms ease;
width: 37px;
height: 37px;
background-color: #fff !important;
border-radius: 50%;
margin-left: 15px;
margin-right: 15px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
margin-top: 15px;
}
@media screen and (min-width: 1000px) and (max-width: 99999999px) {
.qiwi_icon:hover {
width: 45px;
height: 45px;
background-color: #ffffff !important;
transition: all 300ms ease;
}
}
.qiwi_icon_2 {
color: #9146ff;
font-size: 45px;
text-decoration: none;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 300ms ease;
}
@media screen and (min-width: 1000px) and (max-width: 99999999px) {
.qiwi_icon_2:hover {
color: #ffffff;
transition: all 300ms ease;
}
}
.yoomoney_icon {
transition: all 300ms ease;
width: 40px;
height: 40px;
background-color: #fff !important;
border-radius: 50%;
margin-left: 15px;
margin-right: 15px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
margin-top: 15px;
}
@media screen and (min-width: 1000px) and (max-width: 99999999px) {
.yoomoney_icon:hover {
width: 50px;
height: 50px;
background-color: #ffffff !important;
transition: all 300ms ease;
}
}
.yoomoney_icon_2 {
color: #9146ff;
font-size: 45px;
text-decoration: none;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 300ms ease;
}
@media screen and (min-width: 1000px) and (max-width: 99999999px) {
.yoomoney_icon_2:hover {
color: #ffffff;
transition: all 300ms ease;
}
}
.tinkoff_icon {
transition: all 300ms ease;
width: 50px;
height: 50px;
background-color: #fff !important;
border-radius: 50%;
margin-left: 15px;
margin-right: 15px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
margin-top: 15px;
}
@media screen and (min-width: 1000px) and (max-width: 99999999px) {
.tinkoff_icon:hover {
width: 60px;
height: 60px;
background-color: #ffffff !important;
transition: all 300ms ease;
}
}
.tinkoff_icon_2 {
color: #9146ff;
font-size: 45px;
text-decoration: none;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 300ms ease;
}
@media screen and (min-width: 1000px) and (max-width: 99999999px) {
.tinkoff_icon_2:hover {
color: #ffffff;
transition: all 300ms ease;
}
}
.paypal_icon {
transition: all 300ms ease;
width: 40px;
height: 40px;
background-color: #fff !important;
border-radius: 50%;
margin-left: 15px;
margin-right: 15px;
display: none;
align-items: center;
justify-content: center;
cursor: pointer;
margin-top: 15px;
}
@media screen and (min-width: 1000px) and (max-width: 99999999px) {
.paypal_icon:hover {
width: 65px;
height: 65px;
background-color: #2c96e4 !important;
transition: all 300ms ease;
}
}
.paypal_icon_2 {
color: #2c96e4;
font-size: 45px;
text-decoration: none;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 300ms ease;
}
@media screen and (min-width: 1000px) and (max-width: 99999999px) {
.paypal_icon_2:hover {
color: #ffffff;
transition: all 300ms ease;
}
}
.twitter {
transition: all 300ms ease;
width: 55px;
height: 55px;
background-color: #fff !important;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
margin-top: 15px;
}
@media screen and (min-width: 1000px) and (max-width: 99999999px) {
.twitter:hover {
width: 65px;
height: 65px;
background-color: #1da1f2 !important;
transition: all 300ms ease;
}
}
.twitter2 {
color: #1da1f2;
font-size: 35px;
text-decoration: none;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 300ms ease;
}
@media screen and (min-width: 1000px) and (max-width: 99999999px) {
.twitter2:hover {
color: #fff;
transition: all 300ms ease;
}
}
.codepen {
transition: all 300ms ease;
width: 50px;
height: 50px;
background-color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
margin-top: 15px;
margin-left: 20px;
}
@media screen and (min-width: 1000px) and (max-width: 99999999px) {
.codepen:hover {
width: 65px;
height: 65px;
background-color: #000000;
transition: all 300ms ease;
}
}
.codepen2 {
color: #000000;
/*
font-size: 45px;
*/
font-size: 44px;
text-decoration: none;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 300ms ease;
}
@media screen and (min-width: 1000px) and (max-width: 99999999px) {
.codepen2:hover {
color: #fff;
transition: all 300ms ease;
}
}
@media screen and (min-width: 0px) and (max-width: 350px) {
.twitter {
}
.github {
margin-left: 20px;
}
}
@media screen and (min-width: 0px) and (max-width: 600px) {
.telegram_icon {
margin-left: 5px;
margin-right: 5px;
}
.discord_icon {
margin-left: 5px;
margin-right: 5px;
}
.vk_icon_public {
margin-left: 5px;
margin-right: 5px;
}
.vk_icon {
margin-left: 5px;
margin-right: 5px;
}
.twitter {
transition: all 300ms ease;
width: 45px !important;
height: 45px !important;
}
.twitch_icon {
margin-left: 0px !important;
margin-right: 0px !important;
}
.youtube_icon {
margin-left: 0px !important;
margin-right: 0px !important;
}
.trovo_icon {
margin-left: 5px !important;
margin-right: 10px !important;
}
.github {
margin-left: 19px;
}
.tinkoff_icon {
margin-left: 3px !important;
margin-right: 15px !important;
}
.yoomoney_icon {
margin-left: 4px;
margin-right: 15px;
}
.boosty_icon {
margin-left: 6px;
}
.donationalerts_icon {
margin-left: 5px;
}
}
.donate_subscribe_buttons_wrap {
width: 100%;
max-width: 400px;
margin-top: 20px;
margin-bottom: 20px;
display: flex;
justify-content: center;
border-radius: 18px;
}
.donate_subscribe_buttons {
width: 100%;
max-width: 350px;
display: flex;
justify-content: center;
}
.donate_button_wrap {
display: flex;
justify-content: center;
align-items: center;
border-radius: 18px;
background: #ffffff;
transition: all 300ms ease;
border: 2px solid rgb(0, 0, 0) !important;
color: rgb(0, 0, 0);
padding: 8px;
font-family: "Roboto", sans-serif;
font-weight: 600;
}
.donate_button_wrap:hover {
background: #edeef0bb;
transition: all 300ms ease;
}
.donate_button_wrap_a {
margin-right: 20px;
}
.subscribe_button_wrap {
display: flex;
justify-content: center;
align-items: center;
border-radius: 18px;
background: #ffffff;
transition: all 300ms ease;
border: 2px solid rgb(0, 0, 0) !important;
color: rgb(0, 0, 0);
padding: 8px;
font-family: "Roboto", sans-serif;
font-weight: 600;
}
.subscribe_button_wrap:hover {
background: #edeef0bb;
transition: all 300ms ease;
}
@-webkit-keyframes fade-in {
0% {
opacity: 0.1;
}
100% {
opacity: 1;
}
}
@-moz-keyframes fade-in {
0% {
opacity: 0.1;
}
100% {
opacity: 1;
}
}
@-o-keyframes fade-in {
0% {
opacity: 0.1;
}
100% {
opacity: 1;
}
}
@keyframes fade-in {
0% {
opacity: 0.1;
}
100% {
opacity: 1;
}
}
body {
-webkit-animation: fade-in 700ms linear;
-moz-animation: fade-in 700ms linear;
-o-animation: fade-in 700ms linear;
animation: fade-in 700ms linear;
}
html,
body {
height: 100%;
}
* {
text-decoration: none;
}
svg path {
stroke: inherit;
stroke-width: inherit;
fill: inherit;
}
ul[class],
ol[class] {
padding: 0;
}
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
margin: 0;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
.wrap {
display: flex;
flex-direction: column;
height: 100%;
transition: all 300ms ease;
}
.content {
flex: 1 0 auto;
}
/*///////////////EXAMPLE BLOCKS/////////////////*/
.block1 {
display: flex;
transition: all 300ms ease !important;
flex-wrap: wrap !important;
justify-content: center;
}
.block {
display: flex;
transition: all 300ms ease !important;
flex-wrap: wrap;
justify-content: center;
}
/*//////////////////Scroll Level Control/////////////////*/
.blocks {
top: -20px;
}
/*//////////////////Scroll Level Control/////////////////*/
.blockt1 a {
text-align: center;
padding-top: 30px;
padding-bottom: 20px;
display: flex;
justify-content: center;
font-family: "Trebuchet MS";
font-size: 20px;
font-weight: 400;
line-height: 18px;
text-decoration: none !important;
transition: all 300ms ease;
color: rgb(26, 26, 26);
cursor: pointer;
}
.blockt1 {
transition: all 300ms ease;
}
.blockt2 {
font-size: 17px;
padding: 20px;
font-family: "Trebuchet MS";
text-align: justify;
transition: all 300ms ease;
text-decoration: none !important;
color: rgb(26, 26, 26);
line-height: 35px;
}
.title {
margin-left: 20px;
margin-right: 20px;
margin-top: 30px;
margin-bottom: 10px;
}
.title h1 {
font-size: 35px;
text-align: center;
color: rgb(26, 26, 26);
font-family: "Trebuchet MS";
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
}
/*///////////////////////FOOTER///////////////////////*/
.footer_wrap {
background: rgb(214, 184, 86);
display: flex;
transition: all 300ms ease;
justify-content: center;
flex: 0 0 auto;
margin-top: 99px;
flex-wrap: wrap;
min-height: 145px;
}
.footer {
flex-wrap: wrap;
width: 100%;
display: flex;
margin-left: 15px;
margin-right: 15px;
justify-content: center;
}
.footer a {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
vertical-align: middle;
color: #000000;
font-size: 20px;
transition: all 500ms ease;
text-decoration: none;
}
.footer p {
font-family: "Playfair Display SC", serif;
vertical-align: middle;
color: #383535;
text-transform: uppercase;
font-size: 12px;
transition: all 500ms ease;
text-decoration: none;
cursor: default;
}
@media screen and (min-width: 1000px) and (max-width: 99999999px) {
.footer a:hover {
color: rgba(26, 26, 26, 0.87);
transition: 0.5s;
}
}
.site_link_wrap {
text-align: center;
margin-left: 20px;
margin-right: 20px;
margin-top: 20px;
}
.site_link_wrap a {
font-size: 20px;
color: rgb(202, 172, 88);
text-decoration: none;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
margin-top: 0px;
margin-bottom: 0px;
transition: all 300ms ease;
}
.look {
text-align: center;
margin-left: 20px;
margin-right: 20px;
margin-top: 20px;
margin-bottom: 20px;
}
.look p {
font-size: 20px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
margin-top: 0px;
margin-bottom: 0px;
}
.look a {
font-size: 20px;
color: rgb(202, 172, 88);
text-decoration: none;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
margin-top: 0px;
margin-bottom: 0px;
transition: all 300ms ease;
}
@media screen and (min-width: 1000px) and (max-width: 99999999px) {
.look a:hover {
color: rgb(0, 0, 0);
transition: all 300ms ease;
}
.look a:nth-child(2):hover {
color: rgb(0, 0, 0);
transition: all 300ms ease;
}
.site_link_wrap a:hover {
color: rgb(0, 0, 0);
transition: all 300ms ease;
}
}
body {
font-size: 14px;
}
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
margin: 0;
}
body img {
border: none;
max-width: 100%;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment