Digital Holiday Card

Developer
AppleCrazy
Size
3,776 Kb
Views
26,312
  1. Digital Holiday Card Previews
  2. Digital Holiday Card HTML Codes
  3. Digital Holiday Card CSS Codes
  4. Digital Holiday Card JS Codes

How do I make an digital holiday card?

What is a digital holiday card? How do you make a digital holiday card? This script and codes were developed by AppleCrazy on 23 September 2022, Friday.

Digital Holiday Card Previews
IQ Test

Digital Holiday Card - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Digital Holiday Card</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!--
This is the HTML.
HTML allows you to actually build out the content of
your page.
In HTML, all content is contained within a TAG.
A tag is like a box for text or even more tags.
There are hundreds of tags for HTML, but let's
focus on the most useful ones.
- <div></div> means a division in your page. > A div tag is commonly used as a container for other tags.
- <h1></h1> is a header. > Headers are used as a titles on your page.
- <p></p> is a paragraph. > Paragraphs are used to contain actual body text.
- <img src="https://tinyurl.com/fireplace-holidays"> is an image tag. > Images are used, well, to display images. > Notice the weird src="". Within the quotes, you need to put the link to a specific image on the internet.
Happy coding!
-->
<!-- This is our background -->
<div class="background"></div>
<!-- This is our actual card -->
<div class="card text-centered" id="card">
<!-- This is the front --> <div class="front">
<!-- h1 is a header. Headers are for titles. --> <h1>Happy Holidays!</h1> </div>
<!-- This is the back --> <div class="back"> <p>

Digital Holiday Card - Script Codes CSS Codes

/*
Welcome! Feel free to modify any part of the code you see.
- On my left you can see the HTML, which is the TEXT of the page.
- On my right is the JavaScript, which allows you to click the card and display the front and back accordingly.
- And over here is the fun part: CSS. CSS allows you to customize how everything looks. Without it, your pages would look like crap from the 1980's. Feel free to play around here; you can always come back to the original on CodePen if you mess anything up.
- Anything grayed out like this is a COMMENT. Comments are for humans and don't do anything. -- AppleCrazy
*/
/*
This grabs that cool handwriting font you see...
ask me how to grab more fonts!
*/
@import url('https://fonts.googleapis.com/css?family=Cookie');
/* These are the styles for the background */
.background { /* This is how big the background is */ width: 100vw; height: 100vh; /* This is our background */ background: url("https://tinyurl.com/fireplace-holidays"); background-size: cover;
/* This gives it that artistic sepia look */ -webkit-filter: sepia(20); filter: sepia(20); /* We want the picture to be edge to edge, filling the screen, so we set zero margins */ margin: 0; padding: 0; /* z-index is how far back your image is from other things. */ z-index: -999; /* We don't want our background to move... that would be VERY weird. */ position: fixed; /* Some basic positioning */ left: 0; top: 0; overflow: none;
}
.card { font-family: Cookie, sans-serif;
/* background: rgba(255, 255, 255, 0.7); */
/* This is that cool fireplace GIF you see. */ background: url("https://tinyurl.com/coolfireplacegif"); background-size: cover; padding: 20px; font-size: 30pt; border-radius: 20px;
/* This is that shadow you see around the card. */ box-shadow: 0px 0px 25px 3px rgba(255,255,255,0.5);
}
h1 { font-size: 60pt;
}
.front, .back { padding: 20px; background: rgba(255, 255, 255, 0.6);
}
.back { text-align: center;
}
/* IGNORE THIS STUFF, IT'S STUPID */
body { width: 100vw; height: 100vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: black;
}
.text-centered { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
.card { cursor: pointer; width: calc(700px - 40px); height: calc(500px - 40px);
}
.front, .back { display: none;
}
.big { width: calc(700px - 40px); height: calc(500px - 40px);
}

Digital Holiday Card - Script Codes JS Codes

/*
Welcome to the JavaScript code!
JavaScript code allows you to create
awesome interactive features.
Below, you can see the code
that allows this digital card
to flip between the front and back
of the card.
*/
// When you click the card,
// it should the toggle which side is shown
$("#card").click(toggleCard);
// A variable to store whether or not the front
// is shown
var frontShown = false;
// A function to toggle which side is shown
function toggleCard() { var hideCard = (frontShown) ? '.front' : '.back'; var showCard = (frontShown) ? '.back' : '.front'; $(hideCard) .fadeOut(500, function() { $(showCard).fadeIn(); }); frontShown = !frontShown;
}
// We want to show the front when the page loads
$(toggleCard);
// This is there so you can view all the emoji
// on your old Windows computers! :D
// BTW, this produces the same emoji as Twitter!
// Cool, isn't it?
twemoji.parse(document.body);
Digital Holiday Card - Script Codes
Digital Holiday Card - Script Codes
Home Page Home
Developer AppleCrazy
Username applecrazy
Uploaded September 23, 2022
Rating 3
Size 3,776 Kb
Views 26,312
Do you need developer help for Digital Holiday Card?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

AppleCrazy (applecrazy) Script Codes
Name
VueJS Stack Overflow Feed
Personal Portfolio
Pure JS Webpage
Watch the News
Google Web Fonts
Get Some Zen
Bootstrap 4 Testdrive
ISS Live
Uncartify1
Markdownify
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!