diff --git a/404.html b/404.html index e69de29..970e4e0 100644 --- a/404.html +++ b/404.html @@ -0,0 +1,234 @@ + + + + + + + + 404 Page Not Found + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ + + + + +
+ + + + +
+ + +
+
+
+
+
ERROR !!
+
0
+ +
Uh-Ohh, Page Not Found 😲
+ +
If you feel something is missing that should be here, + contact me + NOW. + +
+ + +
Redirecting you back to HOME in 3...2...1...
+ +
+
+
+
+ + + + + + + + +
+ +
+ + + + + + + + + + + + +
+ + + +
+ + + + + + \ No newline at end of file diff --git a/assets/akrivia-logo.png b/assets/akrivia-logo.png new file mode 100644 index 0000000..3b0fd4a Binary files /dev/null and b/assets/akrivia-logo.png differ diff --git a/index.html b/index.html index 48bf50f..6b48394 100644 --- a/index.html +++ b/index.html @@ -19,7 +19,7 @@ async="async"> - Kashyap + Abhishek Kashyap Abhishek Kashyap India + class="social-icon social-icongmail" title="Email"> - + -

About Me 👨‍💻

Professional Work Experience 👨‍💼💼

+

AKRIVIA HCM + Nov 2023 - Present +

+
+
+
+

Full stack software team lead, everyday tasks includes:

+ +
+
@@ -313,7 +337,7 @@

Software Engineer

Software Engineer @@ -365,7 +389,7 @@

Full Stack MERN Developer

Project Intern diff --git a/main.js b/main.js index e69de29..edd918d 100644 --- a/main.js +++ b/main.js @@ -0,0 +1,181 @@ +//Print this in console as well. + +console.log(`/* +* +* Oh hello there, Mr. Hacker !! , so you want to see some code? +* Sure thing, +* Drop an email at abhi3566@gmail.com +~ Made by Abhishek Kashyap +* +* +*/ +`); + +let lastWindowWidth = document.documentElement.clientWidth; +const scrollAndResizeHandler = (e) => { + if ( + (lastWindowWidth >= 560 && document.documentElement.clientWidth < 560) || + (lastWindowWidth < 560 && document.documentElement.clientWidth >= 560) + ) { + document.getElementsByClassName("nav-icon")[0].classList.remove("open"); + document.getElementById("navbar").classList.remove("shown"); + document.getElementById("navbar2").classList.add("shown"); + } + if (document.documentElement.clientWidth < 560) { + document + .querySelectorAll("nav ul li", "nav2 ul li") + .forEach((e) => e.classList.remove("selected")); + return; + } + if ( + document.body.scrollTop > window.innerHeight * 0.95 || + document.documentElement.scrollTop > window.innerHeight * 0.95 + ) { + document.getElementById("navbar").classList.add("shown"); + document.getElementById("navbar2").classList.remove("shown"); + } else { + document.getElementById("navbar").classList.remove("shown"); + document.getElementById("navbar2").classList.add("shown"); + } + setSelectedNavLink(); + lastWindowWidth = document.documentElement.clientWidth; +}; + +const setSelectedNavLink = () => { + let sections = [ + "community", + "Extra", + "projects", + "education", + "experience", + "introduction", + ]; + let sectionScrolls = sections.map((v) => ({ + name: v, + visible: + document.getElementById(v).offsetTop <= + document.documentElement.scrollTop + + 0.34 * document.documentElement.clientHeight, + })); + sectionScrolls.sort((a, b) => b.visible - a.visible); + // console.log(JSON.stringify(sectionScrolls)); + document + .querySelectorAll("nav ul li", "nav2 ul li") + .forEach((e) => e.classList.remove("selected")); + document + .getElementById(`${sectionScrolls[0].name}Link`) + .classList.add("selected"); +}; + +document.addEventListener("scroll", scrollAndResizeHandler); +window.addEventListener("resize", scrollAndResizeHandler); + +document + .getElementsByClassName("nav-icon")[0] + .addEventListener("click", (e) => { + document.getElementsByClassName("nav-icon")[0].classList.toggle("open"); + document.getElementById("navbar").classList.toggle("shown"); + document.getElementById("navbar2").classList.toggle("shown"); + }); + +document.querySelectorAll("nav ul li", "nav2 ul li").forEach((el) => + el.addEventListener("click", function (e) { + if (document.documentElement.clientWidth < 560) { + document.getElementsByClassName("nav-icon")[0].classList.remove("open"); + document.getElementById("navbar").classList.remove("shown"); + document.getElementById("navbar2").classList.remove("shown"); + } + }) +); + +//document.getElementById('age').innerHTML = (new Date(new Date() - new Date('1993-12-08')).getFullYear() - 1970); + +$(document).ready(function () { + setInterval("cursorAnimation()", 600); +}); +function cursorAnimation() { + $("#logo__cursor") + .animate( + { + opacity: 0, + }, + "fast", + "swing" + ) + .animate( + { + opacity: 1, + }, + "fast", + "swing" + ); +} + +$(document).ready(function () { + // Add class to mailto link + // Needed to separate the disabling of the default action AND copy email to clipboard + $("a[hreff^=mailto]").addClass("mailto-link"); + + var mailto = $(".mailto-link"); + var messageCopy = "Click to copy email address"; + var messageSuccess = "Email address copied"; + + mailto.append(''); + $(".mailto-message").append(messageCopy); + + // Disable default action (opening your email client.) + + $("a[hreff^=mailto]").click(function () { + return false; + }); + + // On click, get href and remove 'mailto:' + // Store email address in a variable. + mailto.click(function () { + var href = $(this).attr("hreff"); + var email = href.replace("mailto:", ""); + copyToClipboard(email); + $(".mailto-message").empty().append(messageSuccess); + setTimeout(function () { + $(".mailto-message").empty().append(messageCopy); + }, 2000); + }); +}); + +// Grabbed this from Stack Overflow. +// Copies the email variable to clipboard +function copyToClipboard(text) { + var dummy = document.createElement("input"); + document.body.appendChild(dummy); + dummy.setAttribute("value", text); + dummy.select(); + document.execCommand("copy"); + document.body.removeChild(dummy); +} + +function ExpandShrink() { + var dots = document.getElementById("dots"); + var moreText = document.getElementById("more"); + var btnText = document.getElementById("myBtn"); + + if (dots.style.display === "none") { + dots.style.display = "inline"; + btnText.innerHTML = "Read more"; + moreText.style.display = "none"; + } else { + dots.style.display = "none"; + btnText.innerHTML = " Read less"; + moreText.style.display = "inline"; + + // window.open("https://amzn.to/3jujImr","_self"); + // window.open("https://abhi3566.github.io/#community", "_blank"); + } +} + +function newRedirect() { + if (window.location.href == "https://abhi3566.github.io/github") { + window.location.href = "https://github.com/abhi3566"; + } +} + +// This website is made by Abhishek Kashyap diff --git a/script.js b/script.js index e69de29..a51acf8 100644 --- a/script.js +++ b/script.js @@ -0,0 +1,51 @@ +var formatThousandsNoRounding = function (n, dp) { + var e = "", + s = e + n, + l = s.length, + b = n < 0 ? 1 : 0, + i = s.lastIndexOf(","), + j = i == -1 ? l : i, + r = e, + d = s.substr(j + 1, dp); + while ((j -= 3) > b) { + r = "." + s.substr(j, 3) + r; + } + return ( + s.substr(0, j + 3) + + r + + (dp ? "," + d + (d.length < dp ? "00000".substr(0, dp - d.length) : e) : e) + ); +}; + +var hasRun = false; + +inView("#countUp").on("enter", function () { + if (hasRun == false) { + $(".number").each(function () { + var $this = $(this), + countTo = $this.attr("data-count"); + + $({ countNum: $this.text() }).animate( + { + countNum: countTo, + }, + { + duration: 2000, + easing: "linear", + step: function () { + $this.text(formatThousandsNoRounding(Math.floor(this.countNum))); + }, + complete: function () { + $this.text(formatThousandsNoRounding(this.countNum)); + }, + } + ); + }); + hasRun = true; + } +}); + +// window.open("https://amzn.to/3jujImr","_self"); +// window.open("https://abhi3566.github.io/#community", "_blank"); + +// This website is made by Abhishek Kashyap diff --git a/src/404.html b/src/404.html index e69de29..970e4e0 100644 --- a/src/404.html +++ b/src/404.html @@ -0,0 +1,234 @@ + + + + + + + + 404 Page Not Found + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ + + + + +
+ + + + +
+ + +
+
+
+
+
ERROR !!
+
0
+ +
Uh-Ohh, Page Not Found 😲
+ +
If you feel something is missing that should be here, + contact me + NOW. + +
+ + +
Redirecting you back to HOME in 3...2...1...
+ +
+
+
+
+ + + + + + + + +
+ + + + + +
+ + + + + + \ No newline at end of file diff --git a/style.css b/style.css index 731af63..81c3204 100644 --- a/style.css +++ b/style.css @@ -1 +1,990 @@ -@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,300");html{font-size:1em;scroll-behavior:smooth;color:#000}body{margin:0;overflow-x:hidden}html,*{font-family:'Open Sans', Helvetica, Arial, sans-serif;line-height:1.2;hyphens:auto;-webkit-text-size-adjust:100%}*{font-size:1.04rem;font-weight:450}.container{display:grid;grid-template-columns:repeat(12, 1fr);grid-column-gap:0.25rem}.container.card-container .card{grid-column:span 12;max-width:100%}@media screen and (min-width: 560px){.container.card-container .card{grid-column:span 6;grid-column-gap:0.5rem}}@media screen and (min-width: 768px){.container.card-container{grid-column-gap:1rem}}.col-centered{grid-column:span 12;max-width:100%;padding:18px}@media screen and (min-width: 768px){.col-centered{grid-column:2/12}}@media screen and (min-width: 1280px){.col-centered{grid-column:3/11}}.col-half{grid-column:span 12;max-width:100%}@media screen and (min-width: 768px){.col-half{grid-column:span 6}}.col-full{grid-column:span 12}.col.card{grid-column:span 12;max-width:100%}@media screen and (min-width: 560px){.col.card{grid-column:span 6}}header{background:#252627;max-width:100%;height:100vh;overflow-x:hidden;display:flex;justify-content:center}.backdrop{position:absolute;top:0;left:0;display:block;height:100%;width:100%;background-image:url("./assets/splash.svg");background-size:cover;background-position:center}.backdrop.filtered{filter:blur(0.5px) grayscale(12%) brightness(62.5%)}.title{z-index:5;align-self:center;padding:0.5rem;max-width:1100px;text-align:center}@media screen and (min-width: 320px){.title{padding:2rem}}.title h1{text-shadow:1px 2px 6px #212121;font-size:2rem;text-transform:uppercase;line-height:0.8;color:#fff;letter-spacing:1px}@media screen and (min-width: 490px){.title h1{letter-spacing:3px;font-size:2.5rem}}@media screen and (min-width: 510px){.title h1{font-size:3.25rem}}@media screen and (min-width: 768px){.title h1{font-size:4rem}}.title h1 small{margin-top:24px;display:block;font-size:1rem;letter-spacing:2px}@media screen and (min-width: 320px){.title h1 small{margin-top:32px;font-size:1.25rem;letter-spacing:5px}}.title .separator{background:#fff;height:2px;width:75px;margin:auto}@media screen and (max-height: 500px){.title .separator{display:none}}.laptop{transform:scale(0.5);width:100%;height:160px;text-align:center;margin-bottom:0px}@media screen and (max-height: 500px){.laptop{display:none}}@media screen and (min-width: 320px){.laptop{transform:scale(0.75);margin-bottom:24px}}@media screen and (min-width: 768px){.laptop{transform:scale(0.8);height:180px;margin-bottom:28px}}.laptop .monitor{width:275px;height:181px;display:block;margin:0 auto;border-radius:10px 10px 0 0;padding:4px;border:1px solid #e0e2e2;background:#101111;padding-top:12px}.laptop .monitor .camera{display:block;width:8px;height:8px;position:absolute;top:2px;left:calc(50% - 6px);border-radius:100%;background:#000}.laptop .monitor .mic{display:block;width:4px;height:4px;position:absolute;top:4px;right:calc(50% - 7px);border-radius:100%;background:#000}.laptop .monitor .screen-bg{background:linear-gradient(210deg, #00d1b2 0%, #008182 100%);display:block;height:100%;width:100%;border-radius:2px 2px 0 0}.laptop .monitor .screen-bg .window{position:relative;top:5.5%;left:2%;width:96%;height:90%;background:#1c2024;border-radius:3px 3px 0 0;box-shadow:1px 2px 3px rgba(0,0,0,0.7)}.laptop .monitor .screen-bg .window .area{overflow:hidden;position:absolute;top:14px;left:0;height:calc(100% - 14px);width:100%;background:#22262b;text-align:left;padding:4px 8px;line-height:0.25rem;box-sizing:border-box}.laptop .monitor .screen-bg .window .area br{line-height:0.25rem}.laptop .monitor .screen-bg .window .area .code{height:4px;display:inline-block;background:#e57373;width:20px;border-radius:2px;position:relative}.laptop .monitor .screen-bg .window .area .code.offset{margin-left:12px}.laptop .monitor .screen-bg .window .area .code.offset.double{margin-left:20px}.laptop .monitor .screen-bg .window .area .code.key{background:#ce93d8}.laptop .monitor .screen-bg .window .area .code.name{background:#64b5f6}.laptop .monitor .screen-bg .window .area .code.val{background:#ff8f00}.laptop .monitor .screen-bg .window .area .code.comment{background:#7f99a5}.laptop .monitor .screen-bg .window .area .code.short{width:13px}.laptop .monitor .screen-bg .window .area .code.medium{width:17px}.laptop .monitor .screen-bg .window .area .code.semilong{width:23px}.laptop .monitor .screen-bg .window .area .code.long{width:30px}.laptop .monitor .screen-bg .window .circle{display:block;width:6px;height:6px;position:absolute;top:5px;left:5px;border-radius:6px;background:#ff5f57}.laptop .monitor .screen-bg .window .circle.yellow{background:#fdbb2d;left:13px}.laptop .monitor .screen-bg .window .circle.green{background:#27c93f;left:22px}.laptop .base{width:338px;height:12px;background:#e0e2e2;display:block;margin:0 auto;border-radius:0px 0px 6px 6px}.laptop .base .pad{margin:0 auto;width:42px;background:#b8b9b9;height:4px;border-radius:0 0 4px 4px;margin-top:-1px}.scroll-down{position:absolute;left:calc(50% - 0.5rem);bottom:5vh;display:block;text-align:center;font-size:1.25rem;z-index:100;text-decoration:none;text-shadow:0;width:2rem;height:2rem;border-bottom:6px solid #fff;border-right:6px solid #fff;transform:translate(-50%, 0%) rotate(45deg);animation:fade_move_down 2s ease-in-out infinite}@keyframes fade_move_down{0%{transform:translate(0, -10px) rotate(45deg);opacity:0}50%{opacity:1}100%{transform:translate(0, 10px) rotate(45deg);opacity:0}}.nav-icon{width:36px;height:36px;position:fixed;margin:32px 24px;bottom:0;right:0;transform:scale(1.25);transition:.5s ease-in-out;background:#1556d6;border-radius:100%;box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2);cursor:pointer;z-index:100}.nav-icon span{display:block;position:absolute;height:2px;width:22px;background:#fff;border-radius:2px;opacity:1;left:7px;transform:rotate(0deg);transition:.25s ease-in-out}.nav-icon span:nth-child(1){top:10px}.nav-icon span:nth-child(4){top:24px}.nav-icon span:nth-child(2),.nav-icon span:nth-child(3){top:17px}.nav-icon.open span:nth-child(1){top:17px;width:0%;left:50%}.nav-icon.open span:nth-child(2){transform:rotate(45deg)}.nav-icon.open span:nth-child(3){transform:rotate(-45deg)}.nav-icon.open span:nth-child(4){top:16px;width:0%;left:50%}@media screen and (min-width: 560px){.nav-icon{display:none}}nav{display:block;position:fixed;height:auto;width:100vw;top:-100vh;background:#fff;left:0;z-index:90;transition:top 0.8s ease;box-shadow:0 0 20px rgba(0,0,0,0.1)}nav.shown{top:0;background-color:#252627;color:#a9a9b3}nav ul{list-style-type:none;margin:0;padding:0;overflow:hidden;display:flex;flex-direction:column;justify-content:space-around;text-align:center}nav ul li{display:inline-block;transition:all 0.5s ease;flex:1 1 auto;padding:0.75rem 0.5rem}nav ul li:hover,nav ul li:focus{background:#3c71da;color:#fff;transform:scale(1.2)}nav ul li.selected{border-bottom:6px solid #3c71da}nav ul li a,nav ul li a:link,nav ul li a:visited,nav ul li a:active,nav ul li a:hover{letter-spacing:1px;width:100%;height:100%;text-decoration:none;color:inherit;display:block}@media screen and (min-width: 560px){nav ul{flex-direction:row}}nav2{display:block;position:fixed;height:auto;width:100vw;top:-100vh;background:#fff;left:0;z-index:90;transition:top 0.8s ease;box-shadow:0 0 20px rgba(0,0,0,0.1)}nav2.shown{top:0;background-color:#252627;color:#a9a9b3}nav2 ul{list-style-type:none;margin:0;padding:0;overflow:hidden;display:flex;flex-direction:row;justify-content:space-around;text-align:center}nav2 ul li{display:inline-block;transition:all 0.5s ease;flex:1 1 auto;padding:0.75rem 0.5rem}nav2 ul li:hover,nav2 ul li:focus{background:#3c71da;color:#fff}nav2 ul li.selected{border-bottom:6px solid #3c71da}nav2 ul li a,nav2 ul li a:link,nav2 ul li a:visited,nav2 ul li a:active,nav2 ul li a:hover{letter-spacing:1px;width:100%;height:100%;text-decoration:none;color:inherit;display:block}@media screen and (max-width: 560px){nav2 ul{flex-direction:column;display:none}}h2{font-size:2.15rem;letter-spacing:-.1rem;margin-left:-4px}h2::after{display:block;content:'';width:40%;max-width:130px;height:5px;background:linear-gradient(135deg, #ffa361 0%, #638de0 100%);position:relative;top:12px;left:2px}@media screen and (min-width: 560px){h2{font-size:2.5rem}}section p,section li{line-height:1.35;overflow-wrap:break-word;word-wrap:break-word;hyphens:auto;text-align:justify}a:link{color:#1556d6}a:visited{color:#0943b4}a,a:link,a:visited{cursor:pointer;text-decoration:none}strong{font-weight:650}section,footer{padding:14px 8px}@media screen and (min-width: 560px){section,footer{padding:2px 12px}}.flex-container{display:flex;flex-flow:row wrap}.flex-media-obj{flex:0 0 auto;padding:8px;max-width:calc(100% - 16px);flex-basis:100%;text-align:center}@media screen and (min-width: 560px){.flex-media-obj{margin-top:1%;max-width:160px;flex-basis:135px}}.flex-fill{flex:0 0 auto;max-width:100%;flex-grow:1;flex-basis:0;text-align:center}@media screen and (min-width: 560px){.flex-fill{text-align:left;padding-left:1.5vw}}.profile-picture{width:120px;border-radius:25%;max-width:100%;height:auto}.flex-media-logo{flex:0 0 auto;padding:4px 8px 4px 0;max-width:64px;flex-basis:64px;text-align:center;align-self:center;box-sizing:border-box}.flex-media-logo img{width:56px;height:auto}.flex-title{flex:0 0 auto;max-width:100%;flex-grow:1;flex-basis:0}@media screen and (min-width: 560px){.flex-title{padding-left:0.75vw}}.flex-title h3{font-size:1.15rem}.flex-title h3 small{font-size:1.0rem;display:block}@media screen and (min-width: 560px){.flex-title h3 small{font-size:1.25rem}}.flex-title h3 small+small{font-size:0.75rem;color:#424242}@media screen and (min-width: 560px){.flex-title h3 small+small{font-size:0.90rem}}@media screen and (min-width: 560px){.flex-title h3{font-size:1.6rem}}.card{display:flex;flex-direction:column;align-self:center;position:relative;width:100%;box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2);border-radius:4px;margin:4px 0;overflow:hidden;transition:all .3s ease;height:calc(100% - 8px)}@media screen and (min-width: 560px){.card{max-width:50%}}@media screen and (min-width: 800px){.card{max-width:33.3333%}}.card .content,.card .media{box-sizing:border-box;margin:0;border:0;border-radius:0;padding:4px 8px;width:100%}.card .media{height:180px;padding:10px;-o-object-fit:cover;object-fit:contain}.card h3{font-size:1.25rem;margin:6px;color:#000}.card h3 small{display:block;font-size:0.8rem;color:#424242}.card:hover{box-shadow:0 3px 3px 0 rgba(0,0,0,0.14),0 1px 7px 0 rgba(0,0,0,0.12),0 3px 1px -1px rgba(0,0,0,0.2)}.content-left-offset{margin-left:60px;margin-top:-14px}@media screen and (min-width: 560px){.content-left-offset{margin-left:calc(0.75vw + 64px)}}.content-left-offset p{margin-bottom:8px}.content-left-offset ul{padding-left:12px;margin-left:-35px;margin-top:8px;list-style:none}@media screen and (min-width: 560px){.content-left-offset ul{margin-left:-10px}}.content-left-offset ul li:before{content:"-";position:absolute;margin-left:-14px}.content-left-offset2{margin-left:30px;margin-top:-8px}@media screen and (min-width: 560px){.content-left-offset2{margin-left:calc(0.75vw + 64px)}}.content-left-offset2 strong{font-size:1.25rem;margin:6px;color:#000;font-weight:800}.content-left-offset2 p{margin-bottom:8px}.content-left-offset2 ul{padding-left:12px;margin-top:8px;list-style:none}.content-left-offset2 ul li:before{content:"#";position:absolute;margin-left:-16px}section h1{font-size:3rem;margin-bottom:8px;margin-top:16px}section h1 small{display:block;font-size:1.25rem;color:#424242}.social-icon,.social-icon:link,.social-icon:visited{color:#5cd6b9;cursor:pointer}.social-icon+.social-icon,.social-icon+.social-icon:link,.social-icon+.social-icon:visited,.social-icon:link+.social-icon,.social-icon:link+.social-icon:link,.social-icon:link+.social-icon:visited,.social-icon:visited+.social-icon,.social-icon:visited+.social-icon:link,.social-icon:visited+.social-icon:visited{padding-left:4px}.mailto-link{position:relative;padding:1.5px 4.5px}.mailto-message{top:1px;left:50%;margin-bottom:-5px;transform:translate(-50%, -100%);position:absolute;display:none;width:auto;white-space:nowrap;font-size:12px;background-color:black;color:white;padding:2px 6px;border-radius:2px}.mailto-message:after{content:''}.mailto-link:hover .mailto-message,.mailto-link:focus .mailto-message,.mailto-link:focus-within .mailto-message{display:block}.well{background-color:#e0ebf3;cursor:pointer}footer{background:linear-gradient(180deg, #f7f7f7 0%, #f0f0f0 100%);margin-top:14px;text-align:center}footer p,footer a,footer a:link,footer a:visited{font-size:0.9rem;color:#666;line-height:1.4}footer a{font-weight:400}.right-text{max-width:100%;padding:2px}@media screen and (min-width: 768px){.right-text{float:right}}*{box-sizing:border-box}input[type=text],select,textarea{width:100%;padding:12px;border:1px solid #ccc;border-radius:4px;box-sizing:border-box;margin-top:6px;margin-bottom:16px;resize:vertical}input[type=submit]{background-color:#373737;color:white;padding:12px 20px;border:3px #fff solid;border-radius:4px;cursor:pointer}input[type=submit]:hover{background-color:#1a87ee}.form{border-radius:10px;background:#f5f5f5;padding:20px}.hover_bkgr_fricc{background:rgba(0,0,0,0.4);cursor:pointer;display:none;height:100%;position:fixed;text-align:center;top:0;width:100%;z-index:10000}.hover_bkgr_fricc .helper{display:inline-block;height:100%;vertical-align:middle}.hover_bkgr_fricc>div{background-color:#fff;box-shadow:10px 10px 60px #555;display:inline-block;height:auto;max-width:551px;min-height:100px;vertical-align:middle;width:60%;position:relative;border-radius:8px;padding:15px 5%}.popupCloseButton{background-color:#fff;border:3px solid #999;border-radius:50px;cursor:pointer;display:inline-block;font-family:arial;font-weight:bold;position:absolute;top:-20px;right:-20px;font-size:25px;line-height:30px;width:30px;height:30px;text-align:center}.popupCloseButton:hover{background-color:#ccc}.trigger_popup_fricc{cursor:pointer;font-size:20px;margin:20px;display:inline-block;font-weight:bold}.st-label{line-height:32px}#more{display:none}#pay-btn{box-sizing:border-box;position:relative;display:block;min-height:38px;padding:12px;line-height:20px;font-size:16px;font-family:Lato, Muli, -apple-system, BlinkMacSystemFont, Arial, sans-serif;word-break:break-word;border-radius:10px;text-align:center;color:#ffff;box-shadow:0 0 10px 0 rgba(0,0,0,0.2);z-index:2;text-decoration:none;background-color:#528FF0;width:225px} +@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,300"); +html { + font-size: 1em; + scroll-behavior: smooth; + color: #000; +} +body { + margin: 0; + overflow-x: hidden; +} +html, +* { + font-family: "Open Sans", Helvetica, Arial, sans-serif; + line-height: 1.2; + hyphens: auto; + -webkit-text-size-adjust: 100%; +} +* { + font-size: 1.04rem; + font-weight: 450; +} +.container { + display: grid; + grid-template-columns: repeat(12, 1fr); + grid-column-gap: 0.25rem; +} +.container.card-container .card { + grid-column: span 12; + max-width: 100%; +} +@media screen and (min-width: 560px) { + .container.card-container .card { + grid-column: span 6; + grid-column-gap: 0.5rem; + } +} +@media screen and (min-width: 768px) { + .container.card-container { + grid-column-gap: 1rem; + } +} +.col-centered { + grid-column: span 12; + max-width: 100%; + padding: 18px; +} +@media screen and (min-width: 768px) { + .col-centered { + grid-column: 2/12; + } +} +@media screen and (min-width: 1280px) { + .col-centered { + grid-column: 3/11; + } +} +.col-half { + grid-column: span 12; + max-width: 100%; +} +@media screen and (min-width: 768px) { + .col-half { + grid-column: span 6; + } +} +.col-full { + grid-column: span 12; +} +.col.card { + grid-column: span 12; + max-width: 100%; +} +@media screen and (min-width: 560px) { + .col.card { + grid-column: span 6; + } +} +header { + background: #252627; + max-width: 100%; + height: 100vh; + overflow-x: hidden; + display: flex; + justify-content: center; +} +.backdrop { + position: absolute; + top: 0; + left: 0; + display: block; + height: 100%; + width: 100%; + background-image: url("./assets/splash.svg"); + background-size: cover; + background-position: center; +} +.backdrop.filtered { + filter: blur(0.5px) grayscale(12%) brightness(62.5%); +} +.title { + z-index: 5; + align-self: center; + padding: 0.5rem; + max-width: 1100px; + text-align: center; +} +@media screen and (min-width: 320px) { + .title { + padding: 2rem; + } +} +.title h1 { + text-shadow: 1px 2px 6px #212121; + font-size: 2rem; + text-transform: uppercase; + line-height: 0.8; + color: #fff; + letter-spacing: 1px; +} +@media screen and (min-width: 490px) { + .title h1 { + letter-spacing: 3px; + font-size: 2.5rem; + } +} +@media screen and (min-width: 510px) { + .title h1 { + font-size: 3.25rem; + } +} +@media screen and (min-width: 768px) { + .title h1 { + font-size: 4rem; + } +} +.title h1 small { + margin-top: 24px; + display: block; + font-size: 1rem; + letter-spacing: 2px; +} +@media screen and (min-width: 320px) { + .title h1 small { + margin-top: 32px; + font-size: 1.25rem; + letter-spacing: 5px; + } +} +.title .separator { + background: #fff; + height: 2px; + width: 75px; + margin: auto; +} +@media screen and (max-height: 500px) { + .title .separator { + display: none; + } +} +.laptop { + transform: scale(0.5); + width: 100%; + height: 160px; + text-align: center; + margin-bottom: 0px; +} +@media screen and (max-height: 500px) { + .laptop { + display: none; + } +} +@media screen and (min-width: 320px) { + .laptop { + transform: scale(0.75); + margin-bottom: 24px; + } +} +@media screen and (min-width: 768px) { + .laptop { + transform: scale(0.8); + height: 180px; + margin-bottom: 28px; + } +} +.laptop .monitor { + width: 275px; + height: 181px; + display: block; + margin: 0 auto; + border-radius: 10px 10px 0 0; + padding: 4px; + border: 1px solid #e0e2e2; + background: #101111; + padding-top: 12px; +} +.laptop .monitor .camera { + display: block; + width: 8px; + height: 8px; + position: absolute; + top: 2px; + left: calc(50% - 6px); + border-radius: 100%; + background: #000; +} +.laptop .monitor .mic { + display: block; + width: 4px; + height: 4px; + position: absolute; + top: 4px; + right: calc(50% - 7px); + border-radius: 100%; + background: #000; +} +.laptop .monitor .screen-bg { + background: linear-gradient(210deg, #00d1b2 0%, #008182 100%); + display: block; + height: 100%; + width: 100%; + border-radius: 2px 2px 0 0; +} +.laptop .monitor .screen-bg .window { + position: relative; + top: 5.5%; + left: 2%; + width: 96%; + height: 90%; + background: #1c2024; + border-radius: 3px 3px 0 0; + box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.7); +} +.laptop .monitor .screen-bg .window .area { + overflow: hidden; + position: absolute; + top: 14px; + left: 0; + height: calc(100% - 14px); + width: 100%; + background: #22262b; + text-align: left; + padding: 4px 8px; + line-height: 0.25rem; + box-sizing: border-box; +} +.laptop .monitor .screen-bg .window .area br { + line-height: 0.25rem; +} +.laptop .monitor .screen-bg .window .area .code { + height: 4px; + display: inline-block; + background: #e57373; + width: 20px; + border-radius: 2px; + position: relative; +} +.laptop .monitor .screen-bg .window .area .code.offset { + margin-left: 12px; +} +.laptop .monitor .screen-bg .window .area .code.offset.double { + margin-left: 20px; +} +.laptop .monitor .screen-bg .window .area .code.key { + background: #ce93d8; +} +.laptop .monitor .screen-bg .window .area .code.name { + background: #64b5f6; +} +.laptop .monitor .screen-bg .window .area .code.val { + background: #ff8f00; +} +.laptop .monitor .screen-bg .window .area .code.comment { + background: #7f99a5; +} +.laptop .monitor .screen-bg .window .area .code.short { + width: 13px; +} +.laptop .monitor .screen-bg .window .area .code.medium { + width: 17px; +} +.laptop .monitor .screen-bg .window .area .code.semilong { + width: 23px; +} +.laptop .monitor .screen-bg .window .area .code.long { + width: 30px; +} +.laptop .monitor .screen-bg .window .circle { + display: block; + width: 6px; + height: 6px; + position: absolute; + top: 5px; + left: 5px; + border-radius: 6px; + background: #ff5f57; +} +.laptop .monitor .screen-bg .window .circle.yellow { + background: #fdbb2d; + left: 13px; +} +.laptop .monitor .screen-bg .window .circle.green { + background: #27c93f; + left: 22px; +} +.laptop .base { + width: 338px; + height: 12px; + background: #e0e2e2; + display: block; + margin: 0 auto; + border-radius: 0px 0px 6px 6px; +} +.laptop .base .pad { + margin: 0 auto; + width: 42px; + background: #b8b9b9; + height: 4px; + border-radius: 0 0 4px 4px; + margin-top: -1px; +} +.scroll-down { + position: absolute; + left: calc(50% - 0.5rem); + bottom: 5vh; + display: block; + text-align: center; + font-size: 1.25rem; + z-index: 100; + text-decoration: none; + text-shadow: 0; + width: 2rem; + height: 2rem; + border-bottom: 6px solid #fff; + border-right: 6px solid #fff; + transform: translate(-50%, 0%) rotate(45deg); + animation: fade_move_down 2s ease-in-out infinite; +} +@keyframes fade_move_down { + 0% { + transform: translate(0, -10px) rotate(45deg); + opacity: 0; + } + 50% { + opacity: 1; + } + 100% { + transform: translate(0, 10px) rotate(45deg); + opacity: 0; + } +} +.nav-icon { + width: 36px; + height: 36px; + position: fixed; + margin: 32px 24px; + bottom: 0; + right: 0; + transform: scale(1.25); + transition: 0.5s ease-in-out; + background: #1556d6; + border-radius: 100%; + box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), + 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2); + cursor: pointer; + z-index: 100; +} +.nav-icon span { + display: block; + position: absolute; + height: 2px; + width: 22px; + background: #fff; + border-radius: 2px; + opacity: 1; + left: 7px; + transform: rotate(0deg); + transition: 0.25s ease-in-out; +} +.nav-icon span:nth-child(1) { + top: 10px; +} +.nav-icon span:nth-child(4) { + top: 24px; +} +.nav-icon span:nth-child(2), +.nav-icon span:nth-child(3) { + top: 17px; +} +.nav-icon.open span:nth-child(1) { + top: 17px; + width: 0%; + left: 50%; +} +.nav-icon.open span:nth-child(2) { + transform: rotate(45deg); +} +.nav-icon.open span:nth-child(3) { + transform: rotate(-45deg); +} +.nav-icon.open span:nth-child(4) { + top: 16px; + width: 0%; + left: 50%; +} +@media screen and (min-width: 560px) { + .nav-icon { + display: none; + } +} +nav { + display: block; + position: fixed; + height: auto; + width: 100vw; + top: -100vh; + background: #fff; + left: 0; + z-index: 90; + transition: top 0.8s ease; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); +} +nav.shown { + top: 0; + background-color: #252627; + color: #a9a9b3; +} +nav ul { + list-style-type: none; + margin: 0; + padding: 0; + overflow: hidden; + display: flex; + flex-direction: column; + justify-content: space-around; + text-align: center; +} +nav ul li { + display: inline-block; + transition: all 0.5s ease; + flex: 1 1 auto; + padding: 0.75rem 0.5rem; +} +nav ul li:hover, +nav ul li:focus { + background: #3c71da; + color: #fff; + transform: scale(1.2); +} +nav ul li.selected { + border-bottom: 6px solid #3c71da; +} +nav ul li a, +nav ul li a:link, +nav ul li a:visited, +nav ul li a:active, +nav ul li a:hover { + letter-spacing: 1px; + width: 100%; + height: 100%; + text-decoration: none; + color: inherit; + display: block; +} +@media screen and (min-width: 560px) { + nav ul { + flex-direction: row; + } +} +nav2 { + display: block; + position: fixed; + height: auto; + width: 100vw; + top: -100vh; + background: #fff; + left: 0; + z-index: 90; + transition: top 0.8s ease; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); +} +nav2.shown { + top: 0; + background-color: #252627; + color: #a9a9b3; +} +nav2 ul { + list-style-type: none; + margin: 0; + padding: 0; + overflow: hidden; + display: flex; + flex-direction: row; + justify-content: space-around; + text-align: center; +} +nav2 ul li { + display: inline-block; + transition: all 0.5s ease; + flex: 1 1 auto; + padding: 0.75rem 0.5rem; +} +nav2 ul li:hover, +nav2 ul li:focus { + background: #3c71da; + color: #fff; +} +nav2 ul li.selected { + border-bottom: 6px solid #3c71da; +} +nav2 ul li a, +nav2 ul li a:link, +nav2 ul li a:visited, +nav2 ul li a:active, +nav2 ul li a:hover { + letter-spacing: 1px; + width: 100%; + height: 100%; + text-decoration: none; + color: inherit; + display: block; +} +@media screen and (max-width: 560px) { + nav2 ul { + flex-direction: column; + display: none; + } +} +h2 { + font-size: 2.15rem; + letter-spacing: -0.1rem; + margin-left: -4px; +} +h2::after { + display: block; + content: ""; + width: 40%; + max-width: 130px; + height: 5px; + background: linear-gradient(135deg, #ffa361 0%, #638de0 100%); + position: relative; + top: 12px; + left: 2px; +} +@media screen and (min-width: 560px) { + h2 { + font-size: 2.5rem; + } +} +section p, +section li { + line-height: 1.35; + overflow-wrap: break-word; + word-wrap: break-word; + hyphens: auto; + text-align: justify; +} +a:link { + color: #1556d6; +} + +a, +a:link, +a:visited { + cursor: pointer; + text-decoration: none; +} +strong { + font-weight: 650; +} +section, +footer { + padding: 14px 8px; +} +@media screen and (min-width: 560px) { + section, + footer { + padding: 2px 12px; + } +} +.flex-container { + display: flex; + flex-flow: row wrap; +} +.flex-media-obj { + flex: 0 0 auto; + padding: 8px; + max-width: calc(100% - 16px); + flex-basis: 100%; + text-align: center; +} +@media screen and (min-width: 560px) { + .flex-media-obj { + margin-top: 1%; + max-width: 160px; + flex-basis: 135px; + } +} +.flex-fill { + flex: 0 0 auto; + max-width: 100%; + flex-grow: 1; + flex-basis: 0; + text-align: center; +} +@media screen and (min-width: 560px) { + .flex-fill { + text-align: left; + padding-left: 1.5vw; + } +} +.profile-picture { + width: 120px; + border-radius: 25%; + max-width: 100%; + height: auto; +} +.flex-media-logo { + flex: 0 0 auto; + padding: 4px 8px 4px 0; + max-width: 64px; + flex-basis: 64px; + text-align: center; + align-self: center; + box-sizing: border-box; +} +.flex-media-logo img { + width: 56px; + height: auto; +} +.flex-title { + flex: 0 0 auto; + max-width: 100%; + flex-grow: 1; + flex-basis: 0; +} +@media screen and (min-width: 560px) { + .flex-title { + padding-left: 0.75vw; + } +} +.flex-title h3 { + font-size: 1.15rem; +} +.flex-title h3 small { + font-size: 1rem; + display: block; +} +@media screen and (min-width: 560px) { + .flex-title h3 small { + font-size: 1.25rem; + } +} +.flex-title h3 small + small { + font-size: 0.75rem; + color: #424242; +} +@media screen and (min-width: 560px) { + .flex-title h3 small + small { + font-size: 0.9rem; + } +} +@media screen and (min-width: 560px) { + .flex-title h3 { + font-size: 1.6rem; + } +} +.card { + display: flex; + flex-direction: column; + align-self: center; + position: relative; + width: 100%; + box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), + 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2); + border-radius: 4px; + margin: 4px 0; + overflow: hidden; + transition: all 0.3s ease; + height: calc(100% - 8px); +} +@media screen and (min-width: 560px) { + .card { + max-width: 50%; + } +} +@media screen and (min-width: 800px) { + .card { + max-width: 33.3333%; + } +} +.card .content, +.card .media { + box-sizing: border-box; + margin: 0; + border: 0; + border-radius: 0; + padding: 4px 8px; + width: 100%; +} +.card .media { + height: 180px; + padding: 10px; + -o-object-fit: cover; + object-fit: contain; +} +.card h3 { + font-size: 1.25rem; + margin: 6px; + color: #000; +} +.card h3 small { + display: block; + font-size: 0.8rem; + color: #424242; +} +.card:hover { + box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), + 0 3px 1px -1px rgba(0, 0, 0, 0.2); +} +.content-left-offset { + margin-left: 60px; + margin-top: -14px; +} +@media screen and (min-width: 560px) { + .content-left-offset { + margin-left: calc(0.75vw + 64px); + } +} +.content-left-offset p { + margin-bottom: 8px; +} +.content-left-offset ul { + padding-left: 12px; + margin-left: -35px; + margin-top: 8px; + list-style: none; +} +@media screen and (min-width: 560px) { + .content-left-offset ul { + margin-left: -10px; + } +} +.content-left-offset ul li:before { + content: "-"; + position: absolute; + margin-left: -14px; +} +.content-left-offset2 { + margin-left: 30px; + margin-top: -8px; +} +@media screen and (min-width: 560px) { + .content-left-offset2 { + margin-left: calc(0.75vw + 64px); + } +} +.content-left-offset2 strong { + font-size: 1.25rem; + margin: 6px; + color: #000; + font-weight: 800; +} +.content-left-offset2 p { + margin-bottom: 8px; +} +.content-left-offset2 ul { + padding-left: 12px; + margin-top: 8px; + list-style: none; +} +.content-left-offset2 ul li:before { + content: "#"; + position: absolute; + margin-left: -16px; +} +section h1 { + font-size: 3rem; + margin-bottom: 8px; + margin-top: 16px; +} +section h1 small { + display: block; + font-size: 1.25rem; + color: #424242; +} +.social-icon, +.social-icon:link, +.social-icon:visited { + cursor: pointer; +} +.social-icon + .social-icon, +.social-icon + .social-icon:link, +.social-icon + .social-icon:visited, +.social-icon:link + .social-icon, +.social-icon:link + .social-icon:link, +.social-icon:link + .social-icon:visited, +.social-icon:visited + .social-icon, +.social-icon:visited + .social-icon:link, +.social-icon:visited + .social-icon:visited { + padding-left: 4px; +} +/* .social-iconlinkedin */ +.social-iconlinkedin { + color: #0077b5; +} +/* .social-icontwitter */ +.social-icontwitter { + color: #1da1f2; +} +/* .social-iconinstagram */ +.social-iconinstagram { + color: #e4405f; +} +/* .social-icongithub */ +.social-icongithub { + color: #333; +} +/* .social-icongmail */ +.social-icongmail { + color: #d14836; +} + +.mailto-link { + position: relative; + padding: 1.5px 4.5px; +} +.mailto-message { + top: 1px; + left: 50%; + margin-bottom: -5px; + transform: translate(-50%, -100%); + position: absolute; + display: none; + width: auto; + white-space: nowrap; + font-size: 12px; + background-color: black; + color: white; + padding: 2px 6px; + border-radius: 2px; +} +.mailto-message:after { + content: ""; +} +.mailto-link:hover .mailto-message, +.mailto-link:focus .mailto-message, +.mailto-link:focus-within .mailto-message { + display: block; +} +.well { + background-color: #e0ebf3; + cursor: pointer; +} +footer { + background: linear-gradient(180deg, #f7f7f7 0%, #f0f0f0 100%); + margin-top: 14px; + text-align: center; +} +footer p, +footer a, +footer a:link, +footer a:visited { + font-size: 0.9rem; + color: #666; + line-height: 1.4; +} +footer a { + font-weight: 400; +} +.right-text { + max-width: 100%; + padding: 2px; +} +@media screen and (min-width: 768px) { + .right-text { + float: right; + } +} +* { + box-sizing: border-box; +} +input[type="text"], +select, +textarea { + width: 100%; + padding: 12px; + border: 1px solid #ccc; + border-radius: 4px; + box-sizing: border-box; + margin-top: 6px; + margin-bottom: 16px; + resize: vertical; +} +input[type="submit"] { + background-color: #373737; + color: white; + padding: 12px 20px; + border: 3px #fff solid; + border-radius: 4px; + cursor: pointer; +} +input[type="submit"]:hover { + background-color: #1a87ee; +} +.form { + border-radius: 10px; + background: #f5f5f5; + padding: 20px; +} +.hover_bkgr_fricc { + background: rgba(0, 0, 0, 0.4); + cursor: pointer; + display: none; + height: 100%; + position: fixed; + text-align: center; + top: 0; + width: 100%; + z-index: 10000; +} +.hover_bkgr_fricc .helper { + display: inline-block; + height: 100%; + vertical-align: middle; +} +.hover_bkgr_fricc > div { + background-color: #fff; + box-shadow: 10px 10px 60px #555; + display: inline-block; + height: auto; + max-width: 551px; + min-height: 100px; + vertical-align: middle; + width: 60%; + position: relative; + border-radius: 8px; + padding: 15px 5%; +} +.popupCloseButton { + background-color: #fff; + border: 3px solid #999; + border-radius: 50px; + cursor: pointer; + display: inline-block; + font-family: arial; + font-weight: bold; + position: absolute; + top: -20px; + right: -20px; + font-size: 25px; + line-height: 30px; + width: 30px; + height: 30px; + text-align: center; +} +.popupCloseButton:hover { + background-color: #ccc; +} +.trigger_popup_fricc { + cursor: pointer; + font-size: 20px; + margin: 20px; + display: inline-block; + font-weight: bold; +} +.st-label { + line-height: 32px; +} +#more { + display: none; +} +#pay-btn { + box-sizing: border-box; + position: relative; + display: block; + min-height: 38px; + padding: 12px; + line-height: 20px; + font-size: 16px; + font-family: Lato, Muli, -apple-system, BlinkMacSystemFont, Arial, sans-serif; + word-break: break-word; + border-radius: 10px; + text-align: center; + color: #ffff; + box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2); + z-index: 2; + text-decoration: none; + background-color: #528ff0; + width: 225px; +}