Happy Birthday Card Created By Html & Css:-
Hello friends, as you know that we upload many coding projects, that too for free so that you can learn coding easily. Let us discuss the topic of today's coding project. If you want to create project html and css as shown in the image above then copy the code below and paste it on your code runner.
-----------------------------------------------------------------------------------------------------------------------------
<html>
<head>
</head>
<body>
<div id="card">
<div id="card-inside">
<div class="wrap">
<p>Hey son,</p>
<p>I lost the message inside the card 2 times.. and i realsied i am slow at this :'( </p>
<p>Listen kid, I want you to be the happiest today.. and i suck at making people happy..This is probably the only gift i can give you, my word..</p>
<p>I will be there with you in your heart and soul whenever you seek me.
I love you.
</p>
<p>always.</p>
<p><a href="">NEXT</a></p>
<p class="signed">Priyanshu</p>
</div>
</div>
<div id="card-front">
<div class="wrap">
<h1>Happy Birthday! My Best Friend</h1>
</div>
<button id="open">></button>
<button id="close"><</button>
</div>
</div>
<div class="footer"><p class="footer-text">Created By <a href="https://wbpscode.blogspot.com" class="footer-link">WBPS Code</a>
</div>
</body>
<style>
@import url(https://fonts.googleapis.com/css?family=Nobile:400italic,700italic);
@import url(https://fonts.googleapis.com/css?family=Dancing+Script);
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
body {
background: #E5E5E5;
background-image: url("/gray-floral.png");
padding: 50px;
}
#card-front {
color: #FFDFDF;
}
#card, #card-front, #card-inside {
height: 480px;
}
.wrap {
padding: 1.5em 2.5em;
height: 100%;
}
#card-front, #card-inside {
width: 60%;
-webkit-box-shadow: 2px 2px 30px rgba(0, 0, 0, .25), 0 0 1px rgba(0, 0, 0, .5);
-moz-box-shadow: 2px 2px 30px rgba(0, 0, 0, .25), 0 0 1px rgba(0, 0, 0, .5);
box-shadow: 2px 2px 30px rgba(0, 0, 0, .25), 0 0 1px rgba(0, 0, 0, .5);
position: absolute;
left:50%;
}
#card-inside .wrap {
background: #FFEFEF;
-webkit-box-shadow: inset 2px 0 1px rgba(0, 0, 0, .05);
-moz-box-shadow: inset 2px 0 1px rgba(0, 0, 0, .05);
box-shadow: inset 2px 0 1px rgba(0, 0, 0, .05);
}
#card {
max-width: 960px;
margin: 0 auto;
transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
perspective: 5000px;
-moz-perspective: 5000px;
-webkit-perspective: 5000px;
position: relative;
}
#card h1 {
text-align: center;
font-family: 'Nobile', sans-serif;
font-style: italic;
font-size: 70px;
text-shadow:
4px 4px 0px rgba(0, 0, 0, .15),
1px 1px 0 rgba(255, 200, 200, 255),
2px 2px 0 rgba(255, 150, 150, 255),
3px 3px 0 rgba(255, 125, 125, 255);
color: #FFF;
}
#card-inside {
font-size: 1.1em;
line-height: 1.4;
font-family: 'Nobile';
color: #331717;
font-style: italic;
}
p {
margin-top: 1em;
}
p:first-child {
margin-top: 0;
}
p.signed {
margin-top: 1.5em;
text-align: center;
font-family: 'Dancing Script', sans-serif;
font-size: 1.5em;
}
#card-front {
background-color: #FF5555;
background-image: linear-gradient(top, #FF5555 0%, #FF7777 100%);
background-image: -moz-linear-gradient(top, #FF5555 0%, #FF7777 100%);
background-image: -webkit-linear-gradient(top, #FF5555 0%, #FF7777 100%);
transform-origin: left;
-moz-transform-origin: left;
-webkit-transform-origin: left;
transition: transform 1s linear;
-moz-transition: -moz-transform 1s linear;
-webkit-transition: -webkit-transform 1s linear;
position: relative;
}
#card-front .wrap {
transition: background 1s linear;
-moz-transition: background 1s linear;
-webkit-transition: background 1s linear;
}
#card-front button {
position: absolute;
bottom: 1em;
right: -12px;
background: #F44;
color: #FFF;
font-family: 'Nobile', sans-serif;
font-style: italic;
font-weight: bold;
font-size: 1.5em;
padding: .5em;
border: none;
cursor: pointer;
box-shadow: 2px 2px 3px rgba(0, 0, 0, .25), 0 0 1px rgba(0, 0, 0, .4);
-moz-box-shadow: 2px 2px 3px rgba(0, 0, 0, .25), 0 0 1px rgba(0, 0, 0, .4);
-webkit-box-shadow: 2px 2px 3px rgba(0, 0, 0, .25), 0 0 1px rgba(0, 0, 0, .4);
}
#card-front button:hover,
#card-front button:focus {
background: #F22;
}
#close {
display: none;
}
#card.open-fully #close,
#card-open-half #close {
display: inline;
}
#card.open-fully #open {
display: none;
}
#card.open-half #card-front,
#card.close-half #card-front {
transform: rotateY(-90deg);
-moz-transform: rotateY(-90deg);
-webkit-transform: rotateY(-90deg);
}
#card.open-half #card-front .wrap {
background-color: rgba(0, 0, 0, .5);
}
#card.open-fully #card-front,
#card.close-half #card-front {
background: #FFEFEF;
}
#card.open-fully #card-front {
transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
}
#card.open-fully #card-front .wrap {
background-color: rgba(0, 0, 0, 0);
}
#card.open-fully #card-front .wrap *,
#card.close-half #card-front .wrap * {
display: none;
}
.footer{
position: fixed;
left: 0;
bottom: 0;
width: 100%;
margin: 10px 0 10px 0;
font-size: 20px;
text-align:center;
color: white;
box-shadow: 6px 6px 10px -1px rgba(0,0,0,0.15),
-6px -6px 10px -1px rgba(255,255,255,0.7);
border: 1px solid rgba(0,0,0,0);
transition: transform 0.5s;
background: #24cfaa;
border: 1px solid #24cfaa;
}
.footer:hover{
background-color: #fa6060;
}
.footer-text{
margin: 10.1px 0;
font-family: sans-serif;
}
.footer-link{
color: #ffffff;
text-decoration: none;
margin-right:5px;
}
.footer-link:hover{
color:#24cfaa;
}
</style>
<script>
(function() {
function $(id) {
return document.getElementById(id);
}
var card = $('card'),
openB = $('open'),
closeB = $('close'),
timer = null;
console.log('wat', card);
openB.addEventListener('click', function () {
card.setAttribute('class', 'open-half');
if (timer) clearTimeout(timer);
timer = setTimeout(function () {
card.setAttribute('class', 'open-fully');
timer = null;
}, 1000);
});
closeB.addEventListener('click', function () {
card.setAttribute('class', 'close-half');
if (timer) clearTimerout(timer);
timer = setTimeout(function () {
card.setAttribute('class', '');
timer = null;
}, 1000);
});
}());
</script>
</html>
-----------------------------------------------------------------------------------------------------------------------------
If you want input of any other project, then visit our website and if any project which you think should be in our website, then comment and if you want to share your project with us, then email it to us.
Let us tell you that when you send your project to us, then send a screenshot of the project with it and send a photo and name along with it that you want to show to the public.
-----------------------------------------------------------------------------------------------------------------------------
Published By :-
Wbps Code
2 Comments
Thank you
ReplyDeletePlease make a beautiful firework
ReplyDelete