MAINHACK

Viewing / Editing File: style.css

body{ width: 100%; height: 100vh; padding: 0; margin: 0;background: #28013c; background: #000; justify-content: center; align-items: center; cursor: none;}
h1, h2 { padding: 0; margin: 0;  font-family: 'Rubik Iso', cursive; }
h3, h4 { padding: 0; margin: 0; font-family: 'Archivo Black', sans-serif;}
h5, h6, p{ padding: 0; margin: 0; font-family: 'Urbanist', sans-serif;}
ul{ padding: 0; margin: 0; }
li{ list-style: none; }
a{ text-decoration: none !important ; outline: none !important ; color: red; }
*{ padding: 0; margin: 0; font-family: 'Raleway', sans-serif; }
.myContent{ height: 100vh;}
.cursor{ z-index: 999; background: #2696EB; position: fixed; width: 20px; height: 20px; border-radius: 50%; pointer-events: none; box-shadow: 0 0 20px #2696EB, 0 0 60px #2696EB, 0 0 100px #2696EB; animation: colors 5s infinite; transform: translate(-50%, -50%); display: none; }
.cursor:before{ content: ""; position: absolute; background: #2696EB; width: 50px; height: 50px; opacity: 0.2; transform: translate(-30%, -30%); border-radius: 50%; }
@keyframes colors{
  0%{
    filter: hue-rotate(0deg);
  }
  100%{
    filter: hue-rotate(360deg);
  }  
}

/*header-top*/
.header-bottom{ width: 100%; position: sticky; content: ""; top: 0; left: 0; right: 0; display: block; background: #fff; padding: 0px 0; margin: 0; z-index: 9999; border-bottom: 3px solid #cf1a1c; }
.header-bottom .logo{  background: #111; background-size: 0.2em 100%; font: 5em/1 Open Sans, Impact; text-transform: uppercase; margin: 0;}
svg { position: absolute; content: ""; top: -40px; width: 100%; left: -65px; margin: 0;}

.header{ background: #000; padding: 0; margin: 0; width: 100%; position: sticky;     top: 0;
    position: fixed; height: 70px; z-index: 9; }
.header-bottom .menu{ width: 100%; display:block; padding: 0px 0 0; margin:0; }

/* Logo Main styles */
.text { fill: none; font-size: 60px; stroke-width: 3; stroke-linejoin: round;    letter-spacing: -10px; stroke-dasharray: 70 330; stroke-dashoffset: 0; -webkit-animation: stroke 6s infinite linear; animation: stroke 6s infinite linear; }
.text:nth-child(5n+1) { stroke: #f2385a; -webkit-animation-delay: -1.2s; animation-delay: -1.2s; }
.text:nth-child(5n+2) { stroke: #f5a503; -webkit-animation-delay: -2.4s; animation-delay: -2.4s; }
.text:nth-child(5n+3) { stroke: #e9f1df; -webkit-animation-delay: -3.6s; animation-delay: -3.6s; }
.text:nth-child(5n+4) { stroke: #56d9cd; -webkit-animation-delay: -4.8s; animation-delay: -4.8s; }
.text:nth-child(5n+5) { stroke: #3aa1bf; -webkit-animation-delay: -6s; animation-delay: -6s; }

@keyframes stroke {
  100% {
    stroke-dashoffset: -400;
  }
}

/*Banner Start*/
.banner{ position: relative; width: 100%; height: 100vh; display: inline-block;  padding: 70px 0 0 0; }
.raj-name{ width: 100%; padding: 0 0; margin:100px 0 0; }
.raj-name h6{ color: #fff; font-size: 35px; letter-spacing: 1px; line-height: 40px; padding: 20px 0 10px; margin: 0;}
.raj-name h4{ font-size: 40px; line-height: 50px; color: #fff; padding: 0 0 10px; margin: 0; }
.raj-name h5{ font-weight: bold; font-size: 25px; color: #fff; }
.raj-name h5{ color: #fff; font-family: 'Roboto', sans-serif; font-size: 3rem; font-weight: 100; line-height: 1.5; white-space: nowrap; overflow: hidden; position: relative; padding: 0; margin: 0; }
.raj-name h5 span{ font-family: 'Roboto', sans-serif; font-size: 24px; line-height: 28px; color: #fff; padding: 0; margin: 0; font-weight: bold; }
.raj-name h5 .message { background-color: #05ecfe;color: #091c2a; display: block; font-weight: 900; overflow: hidden; position: absolute; padding-left: 0.5rem; top: 0.2rem; left: 110px; animation: openclose 8s ease-in-out infinite; }
.raj-name h5 .message .word1, .word2, .word3 { font-family: 'Roboto', sans-serif; width: 100%; }
@keyframes openclose {
  0% {
    top: 0.2rem;
    width: 0;
  }
  5% {
    width: 0;
  }
  15% {
    width: 250px;
  }
  30% {
    top: 0.2rem;
    width: 280px;
  }
  33% {
    top: 0.2rem;
    width: 0;
  }
  35% {
    top: 0.2rem;
    width: 0;
  }
  38% {
    top: -4.5rem;
    
  }
  48% {
    top: -4.5rem;
    width: 400px;
  }
  62% {
    top: -4.5rem;
    width: 400px;
  }
  66% {
    top: -4.5rem;
    width: 0;
    text-indent: 0;
  }
  71% {
    top: -9rem;
    width: 0;
    text-indent: 5px;
  }
  86% {
    top: -9rem;
    width: 385px;
  }
  95% {
    top: -9rem;
    width: 385px;
  }
  98% {
    top: -9rem;
    width: 0;
    text-indent: 5px;
  }
  100% {
    top: 0;
    width: 0;
    text-indent: 0;
  }
}
.raj-name p{ font-weight: lighter; color: #cccc; font-size: 20px; line-height: 35px; padding: 10px 0 0;margin: 0 0 50px;}
.raj-name ul { margin: 0; padding: 0; width: 100%; text-align: left; display: inline-block;  }
.raj-name ul li{ display: inline-block; padding: 0 20px 0 0; margin: 0; }
.raj-name ul li a{ font-size: 15px; line-height: 10px; color: #ffffffdb; border: 2px solid #05ecfe; border-radius: 50%; padding: 10px 13px; margin: 0; transition: all 400ms ease-in-out; }
.raj-name ul li a:hover{ background-color: #05ecfe; color: #000; -webkit-box-shadow: 0px 0px 19px 0px rgba(5,236,254,1);
-moz-box-shadow: 0px 0px 19px 0px rgba(5,236,254,1);
box-shadow: 0px 0px 19px 0px rgba(5,236,254,1); transition: all 400ms ease-in-out;}
.raj-name a.down{ font-family: 'Roboto', sans-serif; font-size: 18px; line-height: 24px; color: #000; background-color:#05ecfe; border-radius: 30px; padding: 10px 30px; margin: 0; transition: all 400ms ease-in-out; -webkit-box-shadow: 0px 0px 19px 0px rgba(5,236,254,1);
-moz-box-shadow: 0px 0px 19px 0px rgba(5,236,254,1);
box-shadow: 0px 0px 19px 0px rgba(5,236,254,1); margin: 50px 0 0; display: inline-block;}
.raj-name a.down:hover{ box-shadow:none; transition: all 400ms ease-in-out;  }

.banner h2{ width: 100%; overflow: hidden; padding: 50px 0 0; color: #fff; font-size: 40px; line-height: 80px; font-family: 'Rubik Iso', cursive;}
.banner h2 span {
  display: inline-block;
  text-shadow: 0 0 0 whitesmoke;
  -webkit-animation: smoky 5s 3s both;
          animation: smoky 5s 3s both;
          font-family: 'Rubik Iso', cursive;
}

.banner h2 span:nth-child(even) {
  -webkit-animation-name: smoky-mirror;
          animation-name: smoky-mirror;
}

@-webkit-keyframes smoky {
  60% {
    text-shadow: 0 0 40px whitesmoke;
  }
  to {
    transform: translate3d(15rem, -8rem, 0) rotate(-40deg) skewX(70deg) scale(1.5);
    text-shadow: 0 0 20px whitesmoke;
    opacity: 0;
  }
}

@keyframes smoky {
  60% {
    text-shadow: 0 0 40px whitesmoke;
  }
  to {
    transform: translate3d(15rem, -8rem, 0) rotate(-40deg) skewX(70deg) scale(1.5);
    text-shadow: 0 0 20px whitesmoke;
    opacity: 0;
  }
}
@-webkit-keyframes smoky-mirror {
  60% {
    text-shadow: 0 0 40px whitesmoke;
  }
  to {
    transform: translate3d(18rem, -8rem, 0) rotate(-40deg) skewX(-70deg) scale(2);
    text-shadow: 0 0 20px whitesmoke;
    opacity: 0;
  }
}
@keyframes smoky-mirror {
  60% {
    text-shadow: 0 0 40px whitesmoke;
  }
  to {
    transform: translate3d(18rem, -8rem, 0) rotate(-40deg) skewX(-70deg) scale(2);
    text-shadow: 0 0 20px whitesmoke;
    opacity: 0;
  }
}
.banner h2 span:nth-of-type(1) {
  -webkit-animation-delay: 3.1s;
          animation-delay: 3.1s;
}

.banner h2 span:nth-of-type(2) {
  -webkit-animation-delay: 3.2s;
          animation-delay: 3.2s;
}

.banner h2 span:nth-of-type(3) {
  -webkit-animation-delay: 3.3s;
          animation-delay: 3.3s;
}

.banner h2 span:nth-of-type(4) {
  -webkit-animation-delay: 3.4s;
          animation-delay: 3.4s;
}

span:nth-of-type(5) {
  -webkit-animation-delay: 3.5s;
          animation-delay: 3.5s;
}

.banner h2 span:nth-of-type(6) {
  -webkit-animation-delay: 3.6s;
          animation-delay: 3.6s;
}

.banner h2 span:nth-of-type(7) {
  -webkit-animation-delay: 3.7s;
          animation-delay: 3.7s;
}

.banner h2 span:nth-of-type(8) {
  -webkit-animation-delay: 3.8s;
          animation-delay: 3.8s;
}

.banner h2 span:nth-of-type(9) {
  -webkit-animation-delay: 3.9s;
          animation-delay: 3.9s;
}

.banner h2 span:nth-of-type(10) {
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
}

.banner h2 span:nth-of-type(11) {
  -webkit-animation-delay: 4.1s;
          animation-delay: 4.1s;
}

.banner h2 span:nth-of-type(12) {
  -webkit-animation-delay: 4.2s;
          animation-delay: 4.2s;
}

.banner h2 span:nth-of-type(13) {
  -webkit-animation-delay: 4.3s;
          animation-delay: 4.3s;
}

.banner h2 span:nth-of-type(14) {
  -webkit-animation-delay: 4.4s;
          animation-delay: 4.4s;
}

.banner h2 span:nth-of-type(15) {
  -webkit-animation-delay: 4.5s;
          animation-delay: 4.5s;
}

.banner h2 span:nth-of-type(16) {
  -webkit-animation-delay: 4.6s;
          animation-delay: 4.6s;
}

.banner h2 span:nth-of-type(17) {
  -webkit-animation-delay: 4.7s;
          animation-delay: 4.7s;
}

.banner h2 span:nth-of-type(18) {
  -webkit-animation-delay: 4.8s;
          animation-delay: 4.8s;
}

.banner h2 span:nth-of-type(19) {
  -webkit-animation-delay: 4.9s;
          animation-delay: 4.9s;
}

.banner h2 span:nth-of-type(20) {
  -webkit-animation-delay: 5s;
          animation-delay: 5s;
}

.banner h2 span:nth-of-type(21) {
  -webkit-animation-delay: 5.1s;
          animation-delay: 5.1s;
}
.banner h2 span:nth-of-type(22) {
  -webkit-animation-delay: 5.2s;
          animation-delay: 5.2s;
}
.banner h2 span:nth-of-type(23) {
  -webkit-animation-delay: 5.3s;
          animation-delay: 5.3s;
}
.banner h2 span:nth-of-type(23) {
  -webkit-animation-delay: 5.4s;
          animation-delay: 5.4s;
}
.banner h2 span:nth-of-type(24) {
  -webkit-animation-delay: 5.5s;
          animation-delay: 5.5s;
}
.banner h2 span:nth-of-type(25) {
  -webkit-animation-delay: 5.6s;
          animation-delay: 5.6s;
}

.banner h2 span:nth-of-type(26) {
  -webkit-animation-delay: 5.7s;
          animation-delay: 5.7s;
}
.banner h2 span:nth-of-type(27) {
  -webkit-animation-delay: 5.8s;
          animation-delay: 5.8s;
}
.banner h2 span:nth-of-type(28) {
  -webkit-animation-delay: 5.9s;
          animation-delay: 5.9s;
}
.banner h2 span:nth-of-type(29) {
  -webkit-animation-delay: 6.0s;
          animation-delay: 6.0s;
}
.banner h2 span:nth-of-type(30) {
  -webkit-animation-delay: 6.2s;
          animation-delay: 6.2s;
}
.banner h2 span:nth-of-type(31) {
  -webkit-animation-delay: 6.3s;
          animation-delay: 6.3s;
}
.banner h2 span:nth-of-type(32) {
  -webkit-animation-delay: 6.4s;
          animation-delay: 6.4s;
}
.banner h2 span:nth-of-type(33) {
  -webkit-animation-delay: 6.5s;
          animation-delay: 6.5s;
}
.banner h2 span:nth-of-type(34) {
  -webkit-animation-delay: 6.6s;
          animation-delay: 6.6s;
}
.banner h2 span:nth-of-type(305) {
  -webkit-animation-delay: 6.7s;
          animation-delay: 6.7s;
}

.raj-photo{ position: relative; width: 100%; opacity: 1; margin: 0px 0 0; }
.raj-photo img{ background: #2696EB; width: 450px; height: 450px; border-radius: 50%; pointer-events: none; box-shadow: 0 0 20px #2696EB, 0 0 60px #2696EB, 0 0 100px #2696EB; animation: colors 5s infinite; transform: translate(-50%, -50%); left: 260px; position: relative; z-index: 99999; top: 310px;}

/*about*/
.about{ width: 100%; height: 100vh; position: relative; background-color: #28013c; background: #000; padding: 50px 0; margin: 0; }
.about .banner-images{ width: 100%; padding: 100px 0 0 0; margin: 0; }
.about .banner-images img{ width: 100%; filter: drop-shadow(0px 0px 5rem #05ecfe); }
.about .banner-images img.vert-move {
    -webkit-animation: mover 0.5s infinite  alternate;
    animation: mover 0.7s infinite  alternate;
}

@keyframes mover {
    0% { transform: translateY(0); }
    100% { transform: translateY(-30px); }
}

.about .about-dec{ width: 86%; float: right; padding: 40px 0 0; margin: 0; }
.about .about-dec h3{ font-size: 30px; line-height: 41px; color: #fff; padding: 0; margin: 0; font-weight: bold; font-family: 'Urbanist', sans-serif; }
.about .about-dec h3 span{ color: #05ecfe; }
.about .about-dec h5{ font-size: 21px; line-height: 26px; color: #05ecfe; padding: 0; margin: 5px 0 10px; text-transform: uppercase; letter-spacing: 1px; font-weight: bold; }
.about .about-dec p{  text-align: justify; font-family: 'Urbanist', sans-serif; letter-spacing: 1px; font-weight: lighter; color: #cccc; font-size: 18px; line-height: 31px; padding: 10px 0 0; margin: 0 0 20px; }
.about .about-dec a{ font-family: 'Roboto', sans-serif; font-size: 18px; line-height: 24px; color: #000; background-color:#05ecfe; border-radius: 30px; padding: 10px 30px; margin: 0; transition: all 400ms ease-in-out; -webkit-box-shadow: 0px 0px 19px 0px rgba(5,236,254,1);
-moz-box-shadow: 0px 0px 19px 0px rgba(5,236,254,1);
box-shadow: 0px 0px 19px 0px rgba(5,236,254,1); }
.about .about-dec a:hover{ box-shadow:none; transition: all 400ms ease-in-out; }
.about .about-dec ul{ padding: 0 0; margin: 0 0; }
.about .about-dec ul li{ font-weight: lighter; color: #f5f5f5; transition: all 400ms ease-in-out;  font-size: 20px; line-height: 35px; padding: 0; font-family: 'Urbanist', sans-serif; display: inline-block; width: 50%; float: left; letter-spacing: 1px; }
.about .about-dec ul li:hover{ color: #fff;  transition: all 400ms ease-in-out; }
.about .about-dec ul li i{font-size: 15px; padding: 0 5px 0 0; color: #05ecfe; }

/*services*/
.services{ width: 100%; height: 100vh; position: relative;  padding: 80px 0 40px; margin: 0;  }
.services h3{font-size: 30px; line-height: 41px; color: #fff; text-align: center; padding: 0; margin: 0; font-weight: bold; font-family: 'Urbanist', sans-serif;}
.services h3 span{color: #05ecfe; font-weight: bold;}
.services h5{    text-align: center; font-size: 20px; letter-spacing: 1px; padding: 10px 0 30px; color: #fff; }
.services .raj-skil{ width: 100%; }
.services .raj-skil img{ width: 100%; }
.services .raj-services{ width: 48%; float: left; margin:15px 0 15px 10px; text-align: left; }
.services .raj-services span{ color: #00edff; font-size: 20px; line-height: 40px; padding: 0; }
.services .raj-services i{ color: #00edff; font-size: 20px; line-height: 40px; padding: 0; }
.services .raj-services h4{ color: #05ecfe; font-size: 15px; letter-spacing: 1px; font-weight: normal; padding: 4px 0 10px; }
.services .raj-services p{ transition: all 400ms ease-in-out; font-size: 15px; line-height: 22px; letter-spacing: 1px; padding: 0 0 5px; color: #ffffffa1;}
.services .raj-services p:hover{ transition: all 400ms ease-in-out; color: #fff; }

/*project*/
.project{ width: 100%; position: relative; overflow: hidden;  padding: 80px 0px 40px; margin: 0;   }
.project h3{font-size: 30px; line-height: 41px; color: #fff; text-align: center; padding: 0; margin: 0; font-weight: bold; font-family: 'Urbanist', sans-serif;}
.project h3 span{color: #05ecfe; font-weight: bold;}
.project h5{  text-align: center; font-size: 20px; letter-spacing: 1px; padding: 10px 0 30px; color: #fff;}
.project #project-slider01{}
.project #project-slider01 .item{margin: 10px;height: 150px;overflow: hidden;}
.project #project-slider01 .item img{ width: 100%; }
.project #project-slider02{}
.project #project-slider02 .item{margin: 10px;height: 150px;overflow: hidden;}
.project #project-slider02 .item img{ width: 100%; }
.project #project-slider03 .item { padding: 0; margin: 0 4px; }
.project #project-slider03 .item img{ width: 100%; opacity: 0.8;transition: all 400ms ease-in-out;}
.project #project-slider03 .item img:hover{ width: 100%; opacity: 1;transition: all 600ms ease-in-out;}
.gallery-box{ position: relative; width: 100%; padding: 0; margin: 0; float: left; height: 150px; overflow: hidden;     background: rgba(0, 0, 0, 0.82); transition: all 400ms ease-in-out;   }
.gallery-box img.pho-gall { width: 100%; height: 150px;    opacity: 0.2; transition: all 400ms ease-in-out;  }
.gallery-box img.pho-gall:hover {   opacity: 1;  transition: all 400ms ease-in-out; }
.gallery-box:hover{background: rgb(0 0 0 / 0%); transition: all 400ms ease-in-out; }
.gallery-box .view-caption { position: absolute; top:-140%; transition: all 400ms ease-in-out;  width: 100%; text-align: center; padding: 40px 0; -webkit-transition: .5s all; -moz-transition: .5s all; transition: .5s all; background: rgba(0, 0, 0, 0.82);     background: rgb(0 0 0 / 41%); z-index: 99999;}
.gallery-box:hover .view-caption { top: 0%; height:100%;  transition: all 400ms ease-in-out;  }
.gallery-box .view-caption p { position: relative;  width: 40%; font-family: 'Roboto', sans-serif; font-size: 11px; letter-spacing: 0; line-height: 18px; text-decoration: none; text-shadow: none; background: #ffffff; padding: 5px 14px; color: #fff !important; margin: 15px auto 0; text-transform: uppercase; font-weight: bold;  background: linear-gradient(90deg, rgb(135, 22, 210) 0%, rgb(20, 182, 208) 50%, rgb(202, 10, 91) 100%);}
.gallery-box:after{   transition: all 400ms ease-in-out;   position: absolute; content: ""; width: 90%; height: 1px; background: #ffffff61;     background: linear-gradient(90deg, rgb(135, 22, 210) 0%, rgb(20, 182, 208) 50%, rgb(202, 10, 91) 100%);top: 45%; left: 0; right: 0; margin: 0 auto; }
.gallery-box:before{   transition: all 400ms ease-in-out;   position: absolute; content: ""; width: 1px; height: 90%; background: #ffffff61;    background: linear-gradient(90deg, rgb(135, 22, 210) 0%, rgb(20, 182, 208) 50%, rgb(202, 10, 91) 100%); top: 5%; left: 0; right: 0; margin: 0 auto; z-index: 999;}

/*contact*/
.contact{ width: 100%; height: 100vh; position: relative;  padding: 80px 0 0px; margin: 0;   }
.contact h3{font-size: 30px; line-height: 41px; color: #fff; text-align: center; padding: 0; margin: 0; font-weight: bold; font-family: 'Urbanist', sans-serif;}
.contact h3 span{color: #05ecfe; font-weight: bold;}
.contact p{ text-align: center; font-size: 17px; letter-spacing: 1px; color: #fff; line-height: 30px; padding:15px 0 25px; margin: 0 0 0; }
.contact .map{ margin: 30px 0 35px; background: #000; transition: all 600ms ease-in-out; }
.contact .map iframe{ opacity: 0.7; transition: all 600ms ease-in-out; }
.contact .map iframe:hover{ opacity: 1; transition: all 400ms ease-in-out; }
.contact ul{    margin: 30px 50px 5px 0; padding: 0; text-align: right;}
.contact ul li{font-family: 'Urbanist', sans-serif; padding: 0 0 5px; font-size: 18px; color: #05e6f7; letter-spacing: 0.5px;}
.contact ul li a{transition: all 400ms ease-in-out;  color: #fff; font-family: 'Urbanist', sans-serif; letter-spacing: 1px; font-weight: lighter; font-size: 17px; line-height: 20px; }
.contact ul li a:hover{color: #05e6f7;transition: all 600ms ease-in-out; }
.contact ul.raaj-social { margin: 10px 0 0 0; padding: 0; width: 95%; text-align: right; display: inline-block; }
.contact ul.raaj-social li { display: inline-block; padding: 0 20px 0 0; margin: 0; }
.contact ul.raaj-social li a { font-size: 15px; line-height: 10px; color: #ffffffdb; border: 2px solid #05ecfe; border-radius: 50%; padding: 10px 13px; margin: 0; transition: all 400ms ease-in-out; }
.contact ul.raaj-social li a:hover{ background-color: #05ecfe; color: #000; -webkit-box-shadow: 0px 0px 19px 0px rgba(5,236,254,1);
-moz-box-shadow: 0px 0px 19px 0px rgba(5,236,254,1);
box-shadow: 0px 0px 19px 0px rgba(5,236,254,1); transition: all 400ms ease-in-out;}
.contact ul.raaj-social a.down{ font-family: 'Roboto', sans-serif; font-size: 18px; line-height: 24px; color: #000; background-color:#05ecfe; border-radius: 30px; padding: 10px 30px; margin: 0; transition: all 400ms ease-in-out; -webkit-box-shadow: 0px 0px 19px 0px rgba(5,236,254,1);
-moz-box-shadow: 0px 0px 19px 0px rgba(5,236,254,1);
box-shadow: 0px 0px 19px 0px rgba(5,236,254,1); margin: 50px 0 0; display: inline-block;}
.contact ul.raaj-social a.down:hover{ box-shadow:none; transition: all 400ms ease-in-out;  }

/*footer*/
footer{ text-align: center; background: #0a0a0a;}
footer p{color: #fff; font-size: 17px; line-height: 20px; letter-spacing: 1px; padding: 20px 0 20px; margin: 0;}
footer p b{    color: #05e7f9;}

Cancel / Back

[ MAINHACK ]

Viewing / Editing File: style.css

Server Info

System Features

User Info