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>

</div>

</HEAD>

<body>

</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>

</head>

<body>

</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>

</head>

<body>

<ul>

</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;

}

{

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

Techno Vihaan

Adsence

HTML and CSS Project with Source Code free download