Responsive Invite Card Design using HTML, CSS & JavaScript

Responsive Invite Card Design using HTML, CSS & JavaScript

 

Hello developers, today in this blog you'll learn how to create a Responsive Invite Card Design using HTML, CSS & JavaScript.

The card design can be a convenient means of displaying contents that include various information pictures or icons of the particular information that what has to be displayed or conveyed, title and description.

The @media query property is used to make the web page responsive. When you view this page on a larger screen, there will be information at the left and the image will be at the right, whereas on the smaller screen the image will be at the top and the information will be below the image.

In this blog (Responsive Invite Card Design) on the webpage, there is the title as 'You Are Invited' with the awesome font, a description and there is an input box with a button named as Join Me In to join in the meeting. We have done this card to invite a person to a meeting or a party, you can do this card for any kind of wishes with the respective picture and title. You can create as many cards as you need.

The source code of this Responsive Invite Card Design is given below, and you can copy the source code of this program. You can use this code of Responsive Invite Card Design with your creativity and can take this card to the subsequent level.

Responsive Invite Card Design [Source Code]

To make this website (Responsive Invite Card Design), you need to create two files: an HTML file, a CSS file & a JavaScript file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.

<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Invite card || learningrobo</title> <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'><link rel="stylesheet" href="./style.css"> </head> <body> <div class="wrapper"> <div class="container"> <div class="columns form_container"> <div class="column is-half spooky_bg2"> </div> <div class="column is-half input_container"> <h1>You Are Invited</h1> <h2>Let the challenge begin</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> <div class="mt-5"> <input type="text" name="" placeholder="Input anything" style="" id="input" onkeyup="annoy(input);"> <input type="submit" name="" value="Join Me In" class="submit"> </div> <div class="mt-2 ml-2"> <span id="error"></span> </div> <div class="credit">Made with <span style="color:tomato;font-size:20px;">❤</span> by <a href="https://www.learningrobo.com/">Learning Robo</a></div> </div> <div class="column is-half spooky_bg"> </div> </div> </div> </div> <script src="./script.js"></script> </body> </html>
CSS provides style to an HTML page. To make the page attractive and responsive create a CSS file with the name style.css and remember that you have to create a file with a .css extension.


@import url("https://fonts.googleapis.com/css2?family=Lato&display=swap");
body{
	background-color: #21D4FD;
background-image: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);

}
.wrapper {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	height: 100vh;
}
.form_container {
	-webkit-box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
		rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
		rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
	border-radius: 20px;
	background-color: #12192c;
}
.input_container {
	padding: 4em;
	position: relative;
	color: #fff;
}
.input_container h1{
	font-size: 30px;
}
#input {
	padding: 10px 30px;
	background: #fff;
	width: 100%;
	font-size: 16px;
	border-radius: 15px;
	border: 2px solid #B721FF;
}

.submit {
	background: #B721FF;
	padding: 10px 30px;
	color: #fff;
	border: 2px solid #B721FF;
	font-size: 16px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border-radius: 20px;
	position: absolute;
	right: 2em;
	border-top-right-radius: 15px;
	border-bottom-right-radius: 15px;
}
.spooky_bg {
	background: url(https://cdn.pixabay.com/photo/2018/05/10/11/34/concert-3387324__340.jpg);
	background-size: cover;
	border-top-right-radius: 20px;
	border-bottom-right-radius: 20px;
	-webkit-clip-path: polygon(
		100% 0%,
		99% 50%,
		100% 100%,
		23% 100%,
		11% 51%,
		0 0
	);
	clip-path: polygon(100% 0%, 99% 50%, 100% 100%, 23% 100%, 11% 51%, 0 0);
}
.spooky_bg2 {
	display: none;
	background: url(https://cdn.thetealmango.com/wp-content/uploads/2021/10/squiddd.jpg);
	background-size: cover;
	border-top-right-radius: 20px;
	border-bottom-right-radius: 20px;
}
#error {
	color: #35b7a4;
}
@media (max-width: 768px) {
	.spooky_bg {
		display: none;
	}
	.spooky_bg2 {
		display: block !important;
		height: 300px;
		-webkit-clip-path: polygon(0 0, 100% 0, 100% 84%, 0% 100%);
		clip-path: polygon(0 0, 100% 0, 100% 84%, 0% 100%);
	}
}

.credit a{
	text-decoration: none;
	color: #B721FF;
	font-weight: 800;
	}
	
	.credit {
	  margin: 10px;
	}
JavaScript makes the page work functionally. At last, create a JavaScript file with the name of script.js, and remember that you've got to make a file with a .js extension.


let input = document.getElementById("input");
let error = document.getElementById("error");
function annoy(inputtxt) {
	var letters = /^[A-Za-z]+$/;
	if (inputtxt.value.match(letters)) {
		inputtxt.value = "";
		error.innerHTML = "Please insert numbers only";
	} else {
		inputtxt.value = "";
		error.innerHTML = "Please insert characters only";
	}
	var numbers = /^[0-9]+$/;
	if (inputtxt.value.match(numbers)) {
		inputtxt.value = "";
		error.innerHTML = "Please insert characters only";
	}
}
We hope you would like this Responsive Invite Card Design using HTML, CSS & JavaScript.

Thank you for reading our blog. If you face any problem in creating this Responsive Invite Card Design using HTML, CSS & JavaScript, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.

Thank you
Learning robo team

إرسال تعليق

Thank you
Learning robo team

Post a Comment (0)

أحدث أقدم
Learning Robo says...
code copied
Welcome