Home
Source Code

Source Code of Nitd27.w3spaces.com

10 minute read



Source Code Of nitd27

nitd27.w3spaces.com is website made for communication purpose and for hosting some programs like code compiler.

Please Don't take that dummy texts seriously in website, I have no idea about what to write there so i write whatever comes into my mind like "use this buttons now"(see live and you'll get what I'm talking about.) and etc.

Background color appears reddish black on mobile devices but  CHILL it can be change. 

Use Contact Us page or  mail at Devcod@googlegroupes.com for any help.


Now codes are pubic under creative common license. You can edit it and claim as it is "made by you". 





Index.html 
<link rel="stylesheet" href="style.css">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
<br>
<div class="container">
    <h2 class="frame-1">Welcome</h2>
    <h2 class="frame-2">This site for you</h2>
    <h2 class="frame-3">Use these buttons</h2>
    <h2 class="frame-4">Now!</h2>
    <h2 class="frame-5">
      <span>This</span> 
      <span>Is</span> 
      <span>Nitd27</span>
    </h2>
  </div>
<br>
<div class='desk'>
 <nav>
  <ul>
    <a href="/index-mobile.html">
    <li>
      Mobile viewport!
      <span></span><span></span><span></span><span></span>
    </li></a>
    <a href='https://nitdtech.blogspot.com/p/follow-us.html' target='_blank'>
    <li>
      Our Social Media
      <span></span><span></span><span></span><span></span>
    </li></a>
    <a href="/ourblog.html" target=''>
    <li>
      Our Blogs
      <span></span><span></span><span></span><span></span>
    </li></a>
    <a href="https://feedburner.google.com/fb/a/mailverify?uri=nitdtech&" target="_blank">
    <li>
      Subscribe Blog
            <span></span><span></span><span></span><span></span>
    </li></a>
    <a href="https://codesbynaveen.blogspot.com/p/contact-us.html" target="_blank">
    <li>
      Contact Us
      <span></span><span></span><span></span><span></span>
    </li></a>
    <a href="https://nitdtech.blogspot.com/search/label/Shop?&max-results=6" target="_blank">
    <li>
      Shop
      <span></span><span></span><span></span><span></span>
    </li></a>
    <a href="https://nitdtech.blogspot.com" target="_blank">
    <li>
      Read Blog
      <span></span><span></span><span></span><span></span>
    </li>
    </a>
  </ul>
</nav>

Style.css 
body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url('https://i.ibb.co/RpGF5Qc/bg-codesbynaveen.jpg');
    background-repeat: no-repeat;
    background-size:contain;
    background-color : #3399ff;
     background: #310404;
  font-family: 'Roboto Condensed', sans-serif;

}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

nav ul li {
    --c: rgb(21, 255, 0);
    color: var(--c);
    font-size: 16px;
    border: 0.3em solid var(--c);
    border-radius: 0.5em;
    width: 12em;
    height: 3em;
    text-transform: uppercase;
    font-weight: bold;
    font-family: Arial;
    letter-spacing: 0.1em;
    text-align: center;
    line-height: 3em;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: 0.5s;
    margin: 1em;
}

nav ul li span {
    position: absolute;
    width: 25%;
    height: 100%;
    background-color: var(--c);
    transform: translateY(150%);
    border-radius: 50%;
    left: calc((var(--n) - 1) * 25%);
    transition: 0.5s;
    transition-delay: calc((var(--n) - 1) * 0.1s);
    z-index: -1;
}

nav ul li:hover {
    color: black;
}

nav ul li:hover span {
    transform: translateY(0) scale(2);
}

nav ul li span:nth-child(1) {
    --n: 1;
}

nav ul li span:nth-child(2) {
    --n: 2;
}

nav ul li span:nth-child(3) {
    --n: 3;
}

nav ul li span:nth-child(4) {
    --n: 4;
}

.container {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 0;
  background: -webkit-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
  background: -moz-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
  background: -ms-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
  background: radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
  background-image: url('https://i.ibb.co/RpGF5Qc/bg-codesbynaveen.jpg');
    background-repeat: no-repeat;
    background-size:contain;
}
.content {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  z-index: 1000;
}
.container h2 {
  position: absolute;
  top: 50%;
  line-height: 100px;
  height: 100px;
  margin-top: -50px;
  font-size: 100px;
  width: 100%;
  text-align: center;
  color: transparent;
  animation: blurFadeInOut 3s ease-in backwards;
}
.container h2.frame-1 {
  animation-delay: 0s;
}
.container h2.frame-2 {
  animation-delay: 2.5s;
}
.container h2.frame-3 {
  animation-delay: 5s;
}
.container h2.frame-4 {
  font-size: 200px;
  animation-delay: 7.5s;
}
.container h2.frame-5 {
  animation: none;
  color: transparent;
  text-shadow: 0px 0px 1px #fff;
}
.container h2.frame-5 span {
  animation: blurFadeIn 3s ease-in 12s backwards;
  color: transparent;
  text-shadow: 0px 0px 1px #fff;
}
.container h2.frame-5 span:nth-child(2) {
  animation-delay: 13s;
}
.container h2.frame-5 span:nth-child(3) {
  animation-delay: 14s;
}

@keyframes blurFadeInOut{
  0%{
    opacity: 0;
    text-shadow: 0px 0px 40px #fff;
    transform: scale(0.9);
  }
  20%,75%{
    opacity: 1;
    text-shadow: 0px 0px 1px #fff;
    transform: scale(1);
  }
  100%{
    opacity: 0;
    text-shadow: 0px 0px 50px #fff;
    transform: scale(0);
  }
}
@keyframes blurFadeIn{
  0%{
    opacity: 0;
    text-shadow: 0px 0px 40px #fff;
    transform: scale(1.3);
  }
  50%{
    opacity: 0.5;
    text-shadow: 0px 0px 10px #fff;
    transform: scale(1.1);
  }
  100%{
    opacity: 1;
    text-shadow: 0px 0px 1px #fff;
    transform: scale(1);
  }
}
@keyframes fadeInBack{
  0%{
    opacity: 0;
    transform: scale(0);
  }
  50%{
    opacity: 0.4;
    transform: scale(2);
  }
  100%{
    opacity: 0.2;
    transform: scale(5);
  }
}

index-mobile.html  
<link rel="stylesheet" href="style.css">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
<nav>
  <ul>
    <a href='https://nitdtech.blogspot.com/p/follow-us.html' target='_blank'>
    <li>
      Our Social Media
      <span></span><span></span><span></span><span></span>
    </li></a>
    <a href="/ourblog.html" target="_blank">
    <li>
      Our Blogs
      <span></span><span></span><span></span><span></span>
    </li></a>
    <a href="https://feedburner.google.com/fb/a/mailverify?uri=nitdtech&" target="_blank">
    <li>
      Subscribe Blog
            <span></span><span></span><span></span><span></span>
    </li></a>
    <a href="https://codesbynaveen.blogspot.com/p/contact-us.html" target="_blank">
    <li>
      Contact Us
      <span></span><span></span><span></span><span></span>
    </li></a>
    <a href="https://nitdtech.blogspot.com/search/label/Shop?&max-results=6" target="_blank">
    <li>
      Shop
      <span></span><span></span><span></span><span></span>
    </li></a>
    <a href="https://nitdtech.blogspot.com" target="_blank">
    <li>
      Read Blog
      <span></span><span></span><span></span><span></span>
    </li>
    </a>
  </ul>
</nav>

ourblog.html  
<link rel="stylesheet" href="style.css">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
 <nav>


  <ul><a href="https://Nitdtech.blogspot.com" target="_blank">
    <li>
      Nitd Tech
      <span></span><span></span><span></span><span></span>
    </li></a>
    <a href="https://codesbynaveen.blogspot.com" target="_blank">
    <li>
      Codes By Naveen
      <span></span><span></span><span></span><span></span>
    </li></a>
  </ul>
</nav>

Download Section



Youtube Channel Image
Naveen Kumar Gorai Subscribe Us

Post a Comment

Cookies Consent

This website uses cookies to offer you a better Browsing Experience. By using our website, You agree to the use of Cookies

Learn More