Hellow friends, In festival time we get wishing message from our family, friends and relatives. And they share a wishing link with that when we click on that link we get to see an ipressive web page which is also create using Html, Css and JavaScript. do you know you can also create your own festival wishing web page. And you can also share your own wishing page page with anyone in the world.
For creating wishing web page you don't need any thing execpt HTML, Css and JavaScript. We are going to create in a easy way. The web page we are going to create is static web page but some people will get to know that, the web page static. Because Our wishing web page will work like dynamic. for example:- person who will share it will show their name on the top of the web page. like the below source.
New Year wishing web page Script features
- SEO friendly
- Mobile Resposive & Mobile Friendly
- Easy Codes and reuseable codes
- Fastest speed
- No Addvertisment
I have hosted this wishing web page on GitHub Pages for free and life-time. If you also want to know how to host your web page on GitHub pages. than click on the blue link.
HTML code for creating wishing web page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>H😍ppy N😎w Year 2😷21 By Jeamshiv</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Courgette&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/251c1ad996.js"></script>
<style> /* Paste Css Code HERE */ </style>
</head>
<body style="background-image: url('img/bg1.gif');">
<header class="container">
<marquee behavior="" direction="">
आपको नव वर्ष 2021 की हार्दिक शुà¤à¤•ामनाये !
</marquee>
</header>
<div class="container" id="head">
<h1 class="text-center mt-4" id="heading_name">
Jeamshiv
</h1>
<div class="text-center">
<img src="img/1.png" class="img-fluid text-center" alt="Image">
</div>
</div><!-- head end -->
<div class="container mt-4">
<div class="text-center">
<img src="img/2.gif" class="img-fluid text-center" alt="Image">
</div>
<div class="mt-4 text-center">
<p>
Always keep smiling, leave the ters behind hold the laugh, and think of joy cause it's New Year. Happy New Year 2021!
</p>
<div class="pt-4">
<img src="img/3.png" class="img-fluid" alt="Image">
</div>
<p class="mt-5">
My Dear Friend, you are bringing so much joy into my life, I am thankful for that and I want to wish you a fabulous upcoming year and tremedous success!
</p>
</div>
</div>
<div class="container text-center">
<h3>Coded By Jeamshiv</h3>
</div>
<footer>
<div class="text-center mb-5">
<button type="submit" class="pk_btn" data-toggle="modal" data-target="#create_modal">Create Your Own</button>
</div>
<!-- modal -->
<div class="modal" id="create_modal" tabindex="-1" role="dialog" aria-labelledby="create_modallabel" aria-hiddne="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="create_modallabel">
Happy New Year by Jeamshiv
</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="inputCity">Share with Your Wish</label>
<input type="text" name="by" id="name" class="form-control" placeholder="Your Name" required="">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="share">Share Now!
<i class="fab fa-whatsapp"></i>
</button>
</div>
</form>
</div>
</div>
</div>
</footer>
<script> //Paste JavaScript Code Here </script>
</body>
</html>Css Style code for wishing web page
#head h1{color: #fbc450;
font-size: 50px;
font-weight: 900;
text-shadow: 4px 4px 12px rgba(0,0,0,0.6);
}
.container div p{font-size: 32px;
font-weight: 700;
color: #49c5e8;
font-family: 'Courgette', cursive;
text-shadow: 2px 2px #fbc450;
}
header{font-size: 32px;
font-weight: 700;
margin-top: 10px;
text-shadow: 4px 4px 6px rgba(0,0,0,0.6);
}
.pk_btn{
background-image: linear-gradient(54deg, #53b2fe, #065af3);
margin-top: 20px;
padding: 10px 45px;
color: white;
box-shadow: 0 1px 7px 0 rgba(0, 0, 0, 0.2);
border-radius: 34px;
font-size: 24px;
line-height: 24px;
font-weight: 700;
border: none;
}
.pk_btn:hover{
background-image: linear-gradient(54deg, #065af3, #53b2fe);
color: #fff;
text-decoration: none;
}
JavaScript code for creating wishing web page
$(document).ready(function (event) {
$("#share").on('click', function(e) {
var name = $("#name").val();
by = name.replace(/ /g, '+');
if($(window).width()> 768){
var temp_message = ` ${by} has send you New Year 2021 wishes click on blue text https://jeamshiv.github.io/2k21/index.html?by=${by}`;
var message = temp_message.replace(/ /g, '%20');
window.location.href=`https://api.whatsapp.com/send?text=${message}`;
}
window.location.href=`whatsapp://send?text= ${by} has send you New Year 2021 wishes click on blue text https://jeamshiv.github.io/2k21/index.html?by=${by}`;
});
var urlParams = new URLSearchParams(window.location.search);
var by = urlParams.get('by');
if(by !=null){
/*alert(by);*/
$("#heading_name").html(by);
}
});Notes:- The below code is use for get value from the url and after that we have stored name's value from the url and stored into a variable.
var urlParams = new URLSearchParams(window.location.search);
var by = urlParams.get('by');This was the simplest way to create wishing web page
