Create A Wishing Website In Less Than 1 Minute.

Yeah, As The Title Of This Blog, You Can Make A Simple Wishing Website, In Just Less Than One Minute.

But There Is A Condition, Which Is That, You Have To Be A Domain Name And A Hosting Account.

Source Code :-

<!DOCTYPE html>

(adsbygoogle = window.adsbygoogle || []).push({

google_ad_client: "ca-pub-1049105813311584",

enable_page_level_ads: true

});

</script>

window.dataLayer = window.dataLayer || [];

function gtag(){dataLayer.push(arguments);}

gtag('js', new Date());

gtag('config', 'UA-111093883-1');

</script>

<title>Wish Before</title>

<style>

i {

color: darkblue;

}

input[type=name], select {

width: 100%;

padding: 12px 20px;

margin: 4px 0;

display: inline-block;

border: 1px solid #ccc;

border-radius: 4px;

box-sizing: border-box;

}

.footerbtn {

display: block;

line-height: 15px;

position: fixed;

left:0px;

bottom:0px;

height:40px;

border-radius: 15px;

box-sizing: border-box;

padding: 5px;

background:#34af23;

color: #ffffff;

font-size: 18px;

text-align: center;

text-decoration: none;

width:95%;

margin-left:10px;

margin-right:30px;

box-shadow: 0 4px 12px 0 rgba(0, 0, 0, .3);

animation: footer infinite linear 1s;

-webkit-transform: translate3d(30%,0,0);

transform: translate3d(30%,0,0);

position: fixed;

}

.footerbtn :active {

box-shadow: none

}

@-webkit-keyframes footer {

from {

-webkit-transform: rotateZ(0)

}

25% {

-webkit-transform: rotateZ(1.5deg)

}

50% {

-webkit-transform: rotateZ(0deg)

}

75% {

-webkit-transform: rotateZ(-1.5deg)

}

to {

-webkit-transform: rotateZ(0)

}}

@-webkit-keyframes jello { from, 11.1%, to { transform: none; }

22.2% { transform: skewX(-12.5deg) skewY(-12.5deg); }

33.3% { transform: skewX(6.25deg) skewY(6.25deg); }

44.4% { transform: skewX(-3.125deg) skewY(-3.125deg); }

55.5% { transform: skewX(1.5625deg) skewY(1.5625deg); }

66.6% { transform: skewX(-0.78125deg) skewY(-0.78125deg); }

77.7% { transform: skewX(0.390625deg) skewY(0.390625deg); }

88.8% { transform: skewX(-0.1953125deg) skewY(-0.1953125deg); }}

.jello { -webkit-animation: jello 3s infinite; transform-origin: center; -webkit-animation-delay:6s}

@-webkit-keyframes hue {

from { -webkit-filter: hue-rotate(0deg); }

to { -webkit-filter: hue-rotate(-360deg); }}

.m1{position:fixed;left:1%; width:auto;height:100%;top:1%;color:#000;}

.m2{position:fixed;right:1%; width:auto;height:100%;top:1%;color:#000;}

.bubbles {

font-family: arial;

}

.bubbles hi {

font-family: 'Luckiest Guy', cursive;

color: black;

}

hi {

font-size:2.5em;

user-select:none;

}

hi span { display:inline-block; animation:float .2s ease-in-out infinite; }

@keyframes float {

0%,100%{ transform:none; }

33%{ transform:translateY(-1px) rotate(-2deg); }

66%{ transform:translateY(1px) rotate(2deg); }

}

body:hover span { animation:bounce .6s; }

@keyframes bounce {

0%,100%{ transform:translate(0); }

25%{ transform:rotateX(20deg) translateY(2px) rotate(-3deg); }

50%{ transform:translateY(-20px) rotate(3deg) scale(1.1); }

}

@import url(http://fonts.googleapis.com/css?family=Concert+One);

h1 {

animation:glow 10s ease-in-out infinite;

}

* { box-sizing:border-box; }

figure {

animation:wobble 5s ease-in-out infinite;

transform-origin:center center;

transform-style:preserve-3d;

}

@keyframes wobble {

0%,100%{ transform:rotate3d(1,1,0,40deg); }

25%{ transform:rotate3d(-1,1,0,40deg); }

50%{ transform:rotate3d(-1,-1,0,40deg); }

75%{ transform:rotate3d(1,-1,0,40deg); }

}

h1 {

display:block;

width:90%;

line-height:1.5;

font:900 35px 'Concert One', sans-serif;

position:absolute;

color:#fff;

}

@keyframes glow {

0%,100%{ text-shadow:0 0 30px red; }

25%{ text-shadow:0 0 30px orange; }

50%{ text-shadow:0 0 30px forestgreen; }

75%{ text-shadow:0 0 30px cyan; }

}

h1:nth-child(2){ transform:translateZ(5px); }

h1:nth-child(3){ transform:translateZ(10px);}

h1:nth-child(4){ transform:translateZ(15px); }

h1:nth-child(5){ transform:translateZ(20px); }

h1:nth-child(6){ transform:translateZ(25px); }

h1:nth-child(7){ transform:translateZ(30p.rock{animation:infinite 1s rock}

@keyframes rock { 0% { transform: rotate(-1deg); }

50% { transform: rotate(2deg); }

100% { transform: rotate(-1deg); }}x); }

h1:nth-child(8){ transform:translateZ(35px); }

h1:nth-child(9){ transform:translateZ(40px); }

h1:nth-child(10){ transform:translateZ(45px); }

.rock{animation:infinite 1s rock}

@keyframes rock { 0% { transform: rotate(-1deg); }

50% { transform: rotate(2deg); }

100% { transform: rotate(-1deg); }}

.fuck{animation:infinite 1s fuck}

@keyframes rock { 0% { transform: rotate(-2deg); }

50% { transform: rotate(2deg); }

100% { transform: rotate(-2deg); }}

h2 {

font-size: 38px;

text-align: center;

padding:1px;

margin:1px;

color: white;

text-shadow: 1px 1px silver, -1px -1px silver;

animation: rock infinite 1s;

font-family: 'Indie Flower', cursive;

letter-spacing: 2px;

color:black;

}

h3 {

font-size: 48px;

text-align: center;

padding:1px;

margin:1px;

color: white;

text-shadow: 1px 1px silver, -1px -1px blue;

aanimation: fuck infinite 1s;

font-family: 'Indie Flower', cursive;

letter-spacing: 2px;

}

</style>

</head>

</marquee>

</marquee>

var mufazmi=prompt("Please Enter Your Name\n\n👇👇👇👇👇");

document.write(mufazmi);

</script>

document.write(mufazmi);

</script>

document.write(mufazmi);

</script>

document.write(mufazmi);

</script>

document.write(mufazmi);

</script>

document.write(mufazmi);

function sendWhatsapp(){

var url = "WishBefore.tk/?name=" + mufazmi;

var sMsg = encodeURIComponent( "Hi, I am *" + mufazmi + "* and I have something Special for you. just click on the link 👉👉👉 " + url );

var whatsapp_url = "whatsapp://send?text=" + sMsg;

window.location.href = whatsapp_url;

}

</script>

//document.write(window.location.href);

var urlinput= function ( field, url ) {

var href = url ? url : window.location.href;

var reg = new RegExp( '[?&]' + field + '=([^&#]*)', 'i' );

var string = reg.exec(href);

return string ? string[1] : null;

};

</script> </h1>

</figure>

<h3>Wishing You</h3>

</h2>

</h2>

// Set the date we're counting down to

var countDownDate = new Date("Jan 01, 2018 00:00:00").getTime();

// Update the count down every 01 second

var x = setInterval(function() {

// Get todays date and time

var now = new Date().getTime();

// Find the distance between now an the count down date

var distance = countDownDate - now;

// Time calculations for days, hours, minutes and seconds

var days = Math.floor(distance / (1000 * 60 * 60 * 24));

var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));

var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));

var seconds = Math.floor((distance % (1000 * 60)) / 1000);

// Display the result in the element with id="demo"

document.getElementById("demo").innerHTML = days + "<i> Days,</i> " + hours + " <i>Hrs,</i> "

+ minutes + "<i> Min,</i> " + seconds + "<i> Sec</i> ";

// If the count down is finished, write some text

if (distance < 0) {

clearInterval(x);

document.getElementById("demo").innerHTML = "EXPIRED";

}

}, 1000);

</script>

</div>

<p aling="center" style="font-size:25px;"><b></p>My best wishes for you,<br>

Great start for Jan,<br>

Love for Feb,<br>

peace for March,<br>

No worries for April,<br>

fun for May,<br>

Joy for June to Nov,<br>

Happiness for Dec.<br>

Have a lucky and wonderful 2018</p></b></p> <img src="mufazmi.emoji3.png" height="40px" width="40px"/>

</div>

document.write("By- ");

document.write(urlinput('name'));

</script><br><img src="mufazmi.emoji4.png" height="35px" width="35px"/></p>

<ins class="adsbygoogle"

style="display:block"

data-ad-client="ca-pub-1049105813311584"

data-ad-slot="5602301429"

data-ad-format="auto"></ins>

(adsbygoogle = window.adsbygoogle || []).push({});

</script>

</center>

</div>

<a class="footerbtn" href="#" onclick="sendWhatsapp()"><img width="25px" height="25px" src="mufazmi.whatsappicon.png"/><b style="font-size: 15px;"> Click Here To Wish Your Friends</b> <img width="25px" height="25px" src="mufazmi.whatsappicon.png"/></a>

</center>

</body>

</html>

CSS Code :-

So Now Create A File .css Extension, For Example : - Style.css

#clockbox {
    color: white; font-size: 20px; background-color: darkgreen; display: inline-block; border: 3px solid darkgreen ; border-radius: 3px; margin:0px; padding: 0px; font-weight: bold;
}
img[src*="https://cdn.rawgit.com/000webhost/logo/e9bd13f7/footer-powered-by-000webhost-white2.png"] {
    display: none;}
body {
    background: url("Snow_falling1.gif");
    background-size: cover;
}
@-webkit-keyframes AnimationName {
    0%{background-position:48% 0%}
    50%{background-position:53% 100%}
    100%{background-position:48% 0%}
}
@-moz-keyframes AnimationName {
    0%{background-position:48% 0%}
    50%{background-position:53% 100%}
    100%{background-position:48% 0%}
}
@-o-keyframes AnimationName {
    0%{background-position:48% 0%}
    50%{background-position:53% 100%}
    100%{background-position:48% 0%}
}
@keyframes AnimationName {
    0%{background-position:48% 0%}
    50%{background-position:53% 100%}
    100%{background-position:48% 0%}
}
.wish-story{
 text-shadow:2px 2px gold;
 font-size:20px;
}

.container {
   
    padding-right: 30px;
    padding-left: 30px;
    padding-top: 20px;
  
}
.main-form {
    max-width: 500px;
    margin: auto;
    text-align: center;
    position: relative;
    padding: 20px;
    box-shadow: 3px 3px 23px 0 rgba(0, 0, 0, 0.64);
    margin-bottom: 60px;
    background-color: rgba(255, 255, 255, 0.96);
}

.main-form h4 {
    text-shadow: -2px -1px 2px #f39f01;
    font-weight: 700;
    color: #da004c;
    border-bottom: 1px solid #f93;
    padding-bottom: 10px;
    margin-bottom: 10px;
}
label{
    color: #da004c;
}
.element {
    display: block;
    align-items: center;
}
i.fa-camera {
    margin: 10px;
    cursor: pointer;
    font-size: 30px;
}
i:hover {
    opacity: 0.6;
}
input {
    display: none;
}
.form-control{
    border: 1px solid #f39f01;
    font-size: 13px;
    color:rgb(199, 120, 1) ;
}

.main-form .title {
    text-shadow: -1px 3px 19px rgba(0, 0, 0, 0.2);
    font-weight: 700;
    text-align: center;
    font-size: 16px
}

.main-form .form {
    text-align: left
}

.main-form .form label small {
    font-size: 10px
}

.main-form .form .form-control {
    border-radius: 0
}

.main-form .form .btn {
    border-radius: 0;
    width: 50% !important;
    margin: auto !important;
    display: block;
    font-weight: 600;
    color: #fff;
    border-color: #f39f01;
    font-size: 20px;
    background-color: rgba(222, 13, 77, 0.86);
}

.main-form .form .bg-group label {
    display: inline-block;
    width: 50px;
    height: 50px;
    margin: 5px;
    border: 5px solid rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    background-size: cover;
    cursor: pointer
}

.main-form .form .bg-group label.active {
    border-color: #f30
}
.swing1 {
  animation:swing1 3s cubic-bezier(0, 0, 0.25, 1) infinite;
}

.main-form .form .vi-group label {
    display: inline-block;
    width: 100px;
    height: 75px;
    margin: 5px;
    border: 5px solid rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    background-size: cover;
    cursor: pointer;
    background-position: center
}

.main-form .form .vi-group label.active {
    border-color: #f30
}

.main-form .border {
    border: 1px solid #f39f01;
    padding: 10px;
}

.main-form .table {
    font-size: 12px;
    margin: 0;
    white-space: pre-line
}

.main-form .table textarea {
    display: none
}

.main-form .table tr td {
    cursor: pointer
}

.main-form .table tr.active textarea {
    display: block
}

.main-form .pp_box {
    display: none
}

.main-form .pp_box label {
    text-align: center;
    cursor: pointer
}

.main-form .pp_box label img {
    margin-bottom: 30px
}

.main-greeting {
   
    max-width: 400px;
    margin: auto;
    text-align: center;
    position: relative;
    padding: 5px;
    background: orange;
    box-shadow: 3px 4px 41px 0 rgba(0, 0, 0, 0.64);
    margin-bottom: 60px
}
.greeting-box {
    overflow:hidden;
    background: rgba(255, 255, 255, 0.39);
    border-radius: inherit;
}
.main-greeting .main_body {
    text-align: center;
    font-size: 1.3em
}
.main-greeting .main_body .text2 {
    padding: 10px;
    font-size: 20px
}
.main-greeting .text {
    color: #405d9b;
    letter-spacing: 1px;
    font-weight: 600;
    padding: 0px 10px;
    text-align: center;
}
.main-greeting .pp-img {
    max-width: 400px;
    margin-bottom: 10px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.64);
}

.main-greeting .text_gradient {
    margin: 5px auto;
    font-weight: 700;
    font-size: 24px;
    color: #b50dae;
}
.busi {
    font-size: 30px;
    font-weight: 800;
    color: #da0051;
}
.share-box {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0
}

.share-box div {
    padding: 0
}

.share-box .btn {
    border-radius: 0;
    color: #fff;
    text-transform: uppercase;
    padding: 15px 0;
    font-size: 11px
}
.footer{
    border-top: 1px solid #f93;
    margin-top: 10px;
    padding-top: 5px;
    color: #da004c;
}

.share-box .btn.whatsapp {
    background-color: #4caf50
}

.share-box .btn.facebook {
    background-color: #405d9b
}
.share-box .btn.download {
     background: #ed5600;
}
.new_wish{
    font-size: 20px;
    font-weight: bold;
    border-left: 0;
    border-right: 0;
    border-radius: 0px;
}
.btn-bg {
    color: #fff;
    background-color: #f00 !important;
    border-color: #f00 !important;
}
.btn-bg:hover{
    background-color: #000 !important;
    border-color: #000 !important;

}
@keyframes move {
    0% {
        top: 0
    }
    60% {
        top: -40px
    }
    100% {
        top: -80px
    }
}

@-webkit-keyframes jump {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    20% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    40% {
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px)
    }
    50% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    60% {
        -webkit-transform: translateY(-15px);
        transform: translateY(-15px)
    }
    80% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes jump {
    0% {
        transform: translateY(0)
    }
    20% {
        transform: translateY(0)
    }
    40% {
        transform: translateY(-30px)
    }
    50% {
        transform: translateY(0)
    }
    60% {
        transform: translateY(-15px)
    }
    80% {
        transform: translateY(0)
    }
    100% {
        transform: translateY(0)
    }
}

So Now You Have Created Two Files, The First File Is Index.php, Which Is Your Main Page, And Second File Is style.css Which Is Your Style File,

Upload Both File In Your Hosting, After That Now Your Website Is Ready,

You Can Also Earn Money After Attaching Adsense Code In Your Website, Which You Have Maked Right Now.

( Note: If you don't know that, how can you insert adsense add code in your website the comment below. )

Breaking

Sunday, July 8, 2018

Create A Wishing Website In Less Than 1 Minute.

Source Code :-

CSS Code :-

I Have Also Attache The Zip File Click On Download Button To Download.

No comments:

Post a Comment

Follow Us

Recent

Facebook

Comments

Labels

Recent Post

Statistics - Computer Science

Popular