HTML and CSS Project with Source Code free download

HTML and CSS Project with Source Code free download



3D Text moving With a Neon button And Social media icons project




Note:- Place all the file in a folder on desktop to load faster.
In this project there is 3 HTML files and 3 CSS.

Copy the below code and paste on your html compiler 
and save it with the name (
main.html )
!!!Do not change the name otherwise the code will not run!!!


<!doctype html>
<html>
<HEAD> 
<title> 
PUBG EMULATOR GAMING
</title>
 <link rel="htmlfile" type="text/html" href="icon1.html">
<link rel="stylesheet" type="text/css" href="icon.css">
   <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> 
<META CHARSET="utf-8">
<div class="stage">
  <div class="layer"></div>
  <div class="layer"></div>
  <div class="layer"></div>
  <div class="layer"></div>
  <div class="layer"></div>
  <div class="layer"></div>
  <div class="layer"></div>
  <div class="layer"></div>
  <div class="layer"></div>
  <div class="layer"></div>
  <div class="layer"></div>
  <div class="layer"></div>
  <div class="layer"></div>
  <div class="layer"></div>
  <div class="layer"></div>
  <div class="layer"></div>
  <div class="layer"></div>
  <div class="layer"></div>
  <div class="layer"></div>
  <div class="layer"></div>
</div>

<link rel="stylesheet" href="adi.css">
<link rel="stylesheet" href="neonbutton.css">
</HEAD>
<body>
 <a href="file:///D:\aditya\study\html\web pages\html 3d cube\New folder\icon1.html">Let's Go</a>
</body>
</html>


Copy the below code and paste on your html compiler 
and save it with the name (
neonbutton.html )
!!!Do not change the name otherwise the code will not run!!!


<!doctype html>
<html>
<head>
<title>
neon button
</title>
<link rel="stylesheet" type="text/css" href="neonbutton.css">
<link rel="htmlfile" type="text/html" href="icon1.html"> 
<link rel="stylesheet" type="text/css" href="icon.css">
   <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
 <META CHARSET="utf-8">
 </head>
<body>
 <a href="file:///G:/html/web%20pages/html%203d%20cube/New%20folder/icon.html">Let's Go</a>
</body>
</html>

Copy the below code and paste on your html compiler 
and save it with the name (
icon1.html )
!!!Do not change the name otherwise the code will not run!!!


<!doctype html>
<html>
<head>
    <title>Glowing Gradient icon hover effect</title>
    <link rel="stylesheet" type="text/css" href="icon.css">
   <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> 
    </head>
    <body>
    <ul>
       
         <li><a href="https://www.youtube.com/"><i class="fa fa-youtube" aria-hidden="true"></i></a></li>
        <li><a href="https://www.instagram.com/"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
                <li><a href="https://www.facebook.com"><i class="fa fa-facebook-official" aria-hidden="true"></i></a></li>
        <li><a href="https://web.whatsapp.com"><i class="fa fa-whatsapp" aria-hidden="true"></i></a></li> 
        </ul>
    </body>
</html>

Copy the below code and paste on your html compiler 
and save it with the name (
mainCSS.css)
!!!Do not change the name otherwise the code will not run!!!


@charset "UTF-8";
@import url("//fonts.googleapis.com/css?family=Pacifico&text=Techno");
@import url("//fonts.googleapis.com/css?family=Roboto:700&text=Vihaan");
@import url("//fonts.googleapis.com/css?family=Kaushan+Script&text=!");
body {
  min-height: 450px;
  height: 100vh;
  margin: 0;
  background: radial-gradient(circle, #0077ea, #1f4f96, #1b2949, #000);
}

.stage {
  height: 300px;
  width: 500px;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  perspective: 9999px;
  transform-style: preserve-3d;
}

.layer {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  animation: ಠ_ಠ 5s infinite alternate ease-in-out -10s;
  animation-fill-mode: backwards;
  transform: rotateY(40deg) rotateX(33deg) translateZ(0);
}

.layer:after {
  font: 150px/0.65 'Pacifico', 'Kaushan Script', Futura, 'Roboto', 'Trebuchet MS', Helvetica, sans-serif;
  content:'Techno\A\A Vihaan !';
  white-space: pre;
  text-align: center;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 50px;
  color: whitesmoke;
  letter-spacing: 0px;

  text-shadow: 4px 0 10px rgba(0, 0, 0, 0.13);
}

.layer:nth-child(1):after {
  transform: translateZ(0px);
}

.layer:nth-child(2):after {
  transform: translateZ(-1.5px);
}

.layer:nth-child(3):after {
  transform: translateZ(-3px);
}

.layer:nth-child(4):after {
  transform: translateZ(-4.5px);
}

.layer:nth-child(5):after {
  transform: translateZ(-6px);
}

.layer:nth-child(6):after {
  transform: translateZ(-7.5px);
}

.layer:nth-child(7):after {
  transform: translateZ(-9px);
}

.layer:nth-child(8):after {
  transform: translateZ(-10.5px);
}

.layer:nth-child(9):after {
  transform: translateZ(-12px);
}

.layer:nth-child(10):after {
  transform: translateZ(-13.5px);
}

.layer:nth-child(11):after {
  transform: translateZ(-15px);
}

.layer:nth-child(12):after {
  transform: translateZ(-16.5px);
}

.layer:nth-child(13):after {
  transform: translateZ(-18px);
}

.layer:nth-child(14):after {
  transform: translateZ(-19.5px);
}

.layer:nth-child(15):after {
  transform: translateZ(-21px);
}

.layer:nth-child(16):after {
  transform: translateZ(-22.5px);
}

.layer:nth-child(17):after {
  transform: translateZ(-24px);
}

.layer:nth-child(18):after {
  transform: translateZ(-25.5px);
}

.layer:nth-child(19):after {
  transform: translateZ(-27px);
}

.layer:nth-child(20):after {
  transform: translateZ(-28.5px);
}

.layer:nth-child(n+10):after {
  -webkit-text-stroke: 3px rgba(0, 0, 0, 0.25);
}

.layer:nth-child(n+11):after {
  -webkit-text-stroke: 15px dodgerblue;
  text-shadow: 6px 0 6px #00366b, 5px 5px 5px #002951, 0 6px 6px #00366b;
}

.layer:nth-child(n+12):after {
  -webkit-text-stroke: 15px #0077ea;
}

.layer:last-child:after {
  -webkit-text-stroke: 17px rgba(0, 0, 0, 0.1);
}

.layer:first-child:after {
  color: #fff;
  text-shadow: none;
}

@keyframes ಠ_ಠ {
  100% {
    transform: rotateY(-40deg) rotateX(-43deg);
  }
}


Copy the below code and paste on your html compiler 
and save it with the name (
neonbutton.css)
!!!Do not change the name otherwise the code will not run!!!


body
{
    margin:0;
    padding:0;
    background:#00041d;
}
a
{
    position:absolute;
    top:85%;
    left:50%;
    transform:translate(-50%,-50%);
    width:200px;
    height:40px;
    background:radial-gradient(circle, #0077ea, #1f4f96, #1b2949, #000);
    text-align:center;
    line-height:40px;
    border-radius: 20px;
    color:#555;
    text-transform:uppercase;
    text-decoration:none;
    font-family:Copperplate Gothic Bold;
    letter-spacing: 6px;
    transition:5s;
    overflow:hidden;
}
a:hover
{
   color: #fff;
    box-shadow: -15px 0 50px rgba(252,20,152,1), 15px 0 50px rgba(122,0,255,1);
    text-shadow: 0 0 25px rgba(255,255,255,0.50), 0 0 35px rgba(225,225,225,0.50), 0 0 45px rgba(225,225,225,0.50);
    }
a:before
{
    content: '';
    position: absolute;
    top:0;
    left:0;
    width:40px;
    height:40px;
    border-radius:50%;
    background: rgba(122,0,225,1);
    filter:blur(4px);
    transition:5s;
    z-index: -1;
    mix-blend-mode: lighten;
}
a:hover:before
{
    background: rgba(252,20,152,1);
    transform: scaleX(5)
}
a:after
{
    content: '';
    position: absolute;
    top:0;
    right:0;
    width:40px;
    height:40px;
    border-radius:50%;
    background: rgba(122,0,225,0);
    filter:blur(4px);
    transition:5s;
    z-index: -1;
    mix-blend-mode: lighten;
}
a:hover:after
{
    background: rgba(122,0,225,1);
    transform: scaleX(5)
}


Copy the below code and paste on your html compiler 
and save it with the name (
icon.css)
!!!Do not change the name otherwise the code will not run!!!


body
{
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #1b141a;
}
ul
{
    margin: 0;
    padding: 0;
    display: flex;
}
ul li
{
    position: relative;
    list-style: none;
    width: 100px;
    height: 100px;
    margin: 0 10px;
    border-radius: 50%;
    box-sizing: border-box;
}
ul li:before,
ul li:after
{
content: '';
position: absolute;
 top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
border-radius: 50%;
filter: blur(20px);
opacity: 0;
transition: 1s;
z-index: -1; 
}
ul li:after
{
    filter: blur(40px);
}
ul li:hover:before,
ul li:hover:after
{
    opacity: 1;
}
ul li a
{
    position:absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    text-align: center;
    line-height: 80px;
    color: #fff;
    background: #000;
    font-size: 36px;
    border-radius: 50%;
}{
  min-height: 450px;
  height: 100vh;
  margin: 0;
  background: radial-gradient(circle, #0077ea, #1f4f96, #1b2949, #000);
}
ul li a .fa
{
    text-shadow: 0 2px 5px rgba(0,0,0.2);
    transition: 0.5s;
    transform: rotateY(0deg) scale(0.8);
    opacity: 0.2;
ul li a:hover .fa
{
    opacity: 1;
    transform: scale(1.2);
}
ul li:nth-child(1) a,
ul li:nth-child(1):before,
ul li:nth-child(1):after
{
    background: linear-gradient(45deg,#ff0057,#e64a19)
}
ul li:nth-child(2) a,
ul li:nth-child(2):before,
ul li:nth-child(2):after
{
    background: linear-gradient(45deg,#89ff00,#00bcd4)
}
ul li:nth-child(3) a,
ul li:nth-child(3):before,
ul li:nth-child(3):after
{
    background: linear-gradient(45deg,#e91e63,#5d02ff)
}
ul li:nth-child(4) a,
ul li:nth-child(4):before,
ul li:nth-child(4):after
{
    background: linear-gradient(45deg,#ff0000,#ffc107)
}

COMPLETED

if you are facing any problem from the above code then just comment below i try to solve it.....
&
if you like this Project then Share it with your friends

Post a Comment

1 Comments