/**********************MY RESUME TEMPLATE*************************/
html {
scroll-behavior: smooth;
}
:root{
scrollbar-color: rgb(210,210,210) rgb(46,54,69) !important;
scrollbar-width: thin !important;
}
::-webkit-scrollbar {
height: 12px;
width: 8px;
background: #000;
}
::-webkit-scrollbar-thumb {
background: gray;
-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
}
::-webkit-scrollbar-corner {
background: #000;
}
/*DEFAULT*/
body{
margin:0;
overflow:hidden;
background-color:#000;
font-family: 'PT Sans Narrow', sans-serif;
}
a{
text-decoration:none;
transition:0.5s;
}
table{
width:100%;
border-collapse:collapse;
}
table td{
width:50%;
position:relative;
}
em{
color:rgba(130, 252, 170, 1);
font-style:normal;
text-transform:uppercase;
}
/*HEADER*/
header{
width:100%;
display:flex !important;
align-items:center;
justify-content:center;
}
header .nav{
margin:auto;
position:fixed;
top:1em;
width:50%;
box-shadow:0px 6px 16px -6px rgba(1,1,1,0.5);
background:#1e1e1e;
border-radius:40px;
padding:5px;
transition:0.5s;
z-index:999;
}
header .nav a{
display:inline-block;
margin:0px 20px;
text-decoration:none;
color:#fff;
transition:0.5s;
}
header .nav a:hover:not(:first-child){
color:#82fcaa;
}
header .nav a.active{
box-sizing: border-box;
transition: all 0.2s ease-in-out;
appearance: none;
-webkit-appearance: none;
padding:10px 20px;
border-radius:40px;
border:1px solid gray;
}
header .nav a.active:hover{
background:rgba(130, 252, 170, 1);
color:#000;
border:1px solid rgba(130, 252, 170, 1);
}
header .nav .dropdown li:before{
content:"\f0a4";
font-family:"FontAwesome";
color:#e9bc79;
margin:0px 4px;
}
header .nav .icon{
display:none;
}
.dropbtn{
background:transparent;
border:0;
outline:0;
font-size:17px;
margin:0px 10px;
color:#fff;
transition:0.5s;
}
.dropbtn:hover{
color:#82fcaa;
}
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #1e1e1e;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
margin-top:20px;
}
.dropdown-content:before {
content:"\f0d8";
font-family:"FontAwesome";
position:absolute;
text-align:center;
left:45%;
top:-15px;
font-size:20px;
color:#82fcaa;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {color:#82fcaa;}
.dropdown:hover .dropdown-content {display: block;}
@media (max-width:1100px){
header .nav{
width:80%;
}
}
@media (max-width:920px){
header .nav{
width:80%;
}
}
@media (max-width:850px){
header .nav{
width:80%;
}
}
@media (max-width:800px){
header .nav{
width:90%;
}
}
@media (max-width:720px){
header .nav{
height:45px;
overflow-y:hidden;
transition:0.5s;
}
header .nav a:not(:first-child){
display:block;
margin:15px;
}
header .nav a.active{
width:120px;
}
header .nav .icon{
display:block;
float:right;
position:absolute;
right:15px;
top:0px;
cursor:pointer;
}
.dropbtn{
margin:5px 8px;
}
.dropdown-content a{
margin:5px;
padding:0px;
}
.dropdown-content:before {
content:"\f0d9";
font-family:"FontAwesome";
position:absolute;
left:-8px;
color:gray;
top:0px;
}
.dropdown-content a:nth-child(1){
margin:0px 10px;
padding-left:5px;
}
.dropdown-content {
position:fixed;
z-index:9;
left:30%;
margin-top:-25px;
}
}
/*CONTAINER*/
.container{
width:100%;
height:100vh;
}
.container table td{
height:100vh;
}
.container table td:nth-child(1){
background: linear-gradient(rgba(130, 252, 170, 0.9), rgba(1, 1, 1, 0.8)), url("https://i.ibb.co/9YmYb4j/bg.jpg");
background-size:cover;
}
.container .author_content{
padding:30px;
color:#fff;
margin-right:10vw;
}
.container .author_content em{
color:#000;
}
.container .author_content .title{
font-size:3em;
}
.container .author_name{
width:140px;
height:140px;
border-radius:50%;
padding:50px;
color:#fff;
background:#000;
font-weight:bold;
font-size:2.5em;
position:absolute;
top:40%;
right:-120px;
text-align:center;
font-family: 'Otomanopee One', sans-serif;
border:2px solid rgba(130, 252, 170, 1);
background: linear-gradient(rgba(1, 1, 1, 0.6), rgba(1, 1, 1, 0.6)), url("https://i.ibb.co/yNGW4gg/avatar.png");
background-size:cover;
}
.container section{
padding:10vh;
margin:10vh;
height:50vh;
border-right:1px solid rgba(255,255,255,0.2);
text-align:center;
}
.container .social_icons{
position:fixed;
right:20px;
bottom:20px;
z-index:9;
}
.container .social_icons a{
display:block;
margin:20px 0;
text-align:center;
color:gray;
font-size:20px;
}
.container .social_icons a:hover{
color:rgba(130, 252, 170, 1);
}
.languages {
justify-content: center;
align-items: center;
background: #000;
height: 100vh;
padding: 0;
margin: 0;
}
.languages label{
display:block;
color:#fff;
text-align:left;
margin:5px 0;
margin-top:10px;
}
.progress {
background: rgba(255,255,255,0.1);
justify-content: flex-start;
border-radius: 100px;
align-items: center;
position: relative;
padding: 0 5px;
display: flex;
height: 20px;
width: 90%;
}
.progress-value {
animation: load 3s normal forwards;
box-shadow: 0 10px 40px -10px #fff;
border-radius: 100px;
background: #fff;
height: 10px;
width: 0;
}
@keyframes load {
0% { width: 0; }
100% { width: 88%; }
}
.progress2,.progress3,.progress4,.progress5,.progress6,.progress7,.progress8 {
box-shadow: 0 10px 40px -10px #fff;
border-radius: 100px;
background: #fff;
height: 10px;
width: 0;
}
.progress2{
animation: load2 3s normal forwards;
}
.progress3{
animation: load3 3s normal forwards;
}
.progress4{
animation: load4 3s normal forwards;
}
.progress5{
animation: load5 3s normal forwards;
}
.progress6{
animation: load6 3s normal forwards;
}
.progress7{
animation: load7 3s normal forwards;
}
.progress8{
animation: load8 3s normal forwards;
}
@keyframes load2 {
0% { width: 0; }
100% { width: 75%; }
}
@keyframes load3 {
0% { width: 0; }
100% { width: 70%; }
}
@keyframes load4 {
0% { width: 0; }
100% { width: 60%; }
}
@keyframes load5 {
0% { width: 0; }
100% { width: 65%; }
}
@keyframes load6 {
0% { width: 0; }
100% { width: 20%; }
}
@keyframes load7 {
0% { width: 0; }
100% { width: 15%; }
}
@keyframes load8 {
0% { width: 0; }
100% { width: 55%; }
}
/*WORKS*/
.works{
height:100vh;
}
.reviews{
margin:5vh;
}
.works .checked {
color: orange;
}
.works ul li{
color:gray;
list-style:none;
display:inline-block;
}
.works div:nth-child(3) ul li{
width:100px;
}
.works b{
color:#fff;
}
.works div{
margin:20px 0;
text-align:left;
margin-left:2vw;
}
#lang{
max-width:150px !important;
width:150px !important;
}
.reviews img{
width:100%;
margin:5px;
}
.mySlides {display: none}
/* Slideshow container */
.slideshow-container {
position: relative;
margin: auto;
}
.slideshow-container .codepen{
width:100%;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 100%;
left:0;
width: auto;
padding: 16px;
margin-top: 10px;
color: #000;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
background:rgba(130, 252, 170, 1);
}
/* Position the "next button" to the right */
.next {
margin:10px 60px;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: #1e1e1e;
color:#fff;
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
display:none;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}
/*CONTACT*/
.contact{
margin:auto;
text-align:left;
}
.contact input,.contact textarea{
display:block;
width:100%;
padding:15px 10px;
border:0;
outline:none !important;
background:#1e1e1e;
color:gray;
font-weight:bold;
}
.contact textarea{
resize:none;
height:80px;
}
.contact label{
display:block;
color:rgba(130, 252, 170, 1);
margin:5px 0;
margin-top:10px;
text-align:left;
}
.contact button{
background:rgba(130, 252, 170, 1);
border:0;
outline:none;
display:block;
margin:4vh 0;
text-align:center;
color:#000;
padding:20px;
border-radius:40px;
transition:0.5s;
}
.contact button:hover{
background:#70c48b;
}
footer{
color:#000;
margin-top:2vh;
margin-left:2vw;
}
/*MEDIA*/
@media (max-width:820px){
body{
overflow:auto;
}
table td{
width:100%;
display:block;
}
header .nav a{
margin-top:15px;
}
header .nav a.active{
width:200px;
}
.container .author_name{
position:static;
width:60px;
height:60px;
margin:10px;
}
.container section{
padding:10vh 2vh;
margin:10vh;
height:50vh;
border-right:1px solid rgba(255,255,255,0.2);
text-align:center;
}
.reviews img{
height:100px;
margin:15px 0px;
}
}
/*POPUPS*/
#snackbar,#snackbar2 {
visibility: hidden;
min-width: 250px;
margin-left: -125px;
background-color: #c0392b;
color: #fff;
text-align: center;
border-radius: 2px;
padding: 16px;
position: fixed;
z-index: 1;
left: 50%;
bottom: 30px;
font-size: 17px;
}
#snackbar2{
background-color:rgba(130, 252, 170, 1);
color:#000;
}
#snackbar.show,#snackbar2 .show {
visibility: visible;
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
@-webkit-keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}
@keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}
@-webkit-keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 0; opacity: 0;}
}
@keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 0; opacity: 0;}
}
!
