Invitation Card

Developer
Kenny Mark
Size
3,032 Kb
Views
18,216
  1. Invitation Card Previews
  2. Invitation Card HTML Codes
  3. Invitation Card CSS Codes

How do I make an invitation card?

What is a invitation card? How do you make a invitation card? This script and codes were developed by Kenny Mark on 28 September 2022, Wednesday.

Invitation Card Previews
IQ Test

Invitation Card - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Invitation Card</title> <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'> <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> <div class="box"> <div class="field1"> <div class="content"> <label for="">Event name</label> <br /> <input type="text" class ="full" value="New HomePage Initial Meeting"/> <br /> <br /> <label> start from</label><br/> <input type="text" /> <br/> <label class= "right"> until</label><br/> <input type="text" class =" right" /> <br/> <label >location</label> <br/> <input type="text" /> <br/> <label >description</label> <br /> <br /> <p class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum tempore unde voluptates, veniam autem laudantium impedit incidunt temporibus obcaecati voluptate?</p> </div> </div> <div class="field2"> <div class="content2"> <input type="text" placeholder ="search people to invite"/> <div class="person"> </div> <div class="person"> </div> <div class="person"> </div> <div class="person"> </div> </div> <input type="button" value = "Send Invitation"/> </div>
</div>
</body>
</html>

Invitation Card - Script Codes CSS Codes

body { background: #b3cbde; font-family: "Varela Round", sans-serif;
}
.box { width: 900px; height: 500px; background: white; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); box-shadow: 1px 4px 20px 4px #b3b3b3;
}
.field1 { width: 60%; height: inherit; float: left; display: flex; justify-content: center; align-items: center;
}
.field2 { height: inherit; box-shadow: 1px 4px 20px 4px #b3b3b3; display: flex; justify-content: center; align-items: center; flex-direction: column; position: relative;
}
.field1 .content { width: 80%; height: 80%; border: 1px solid black;
}
.field2 .content2 { width: 80%; height: 80%; border: 1px solid black; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
}
input { font-family: "Varela Round", sans-serif; border: 0; border-bottom: 1px solid #cccccc; margin-top: 10px; font-size: 19px; outline: 0;
}
label { color: #999999; font-size: 14px; text-transform: capitalize;
}
input[type="button"] { position: relative; top: 240px; padding: 15px 40px; background: #52cb7b; border: none; color: white; border-radius: 40px; font-family: "Varela Round", sans-serif; font-size: 17px; outline: none; cursor: pointer; transition: all .3s ease-in-out;
}
input[type="button"]:hover { box-shadow: 1px 3px 9px 3px #36b461;
}
.desc { font-size: 13px; width: 80%; line-height: 1.4; color: #4d4d4d;
}
.right { float: right;
}
Invitation Card - Script Codes
Invitation Card - Script Codes
Home Page Home
Developer Kenny Mark
Username kennymark
Uploaded September 28, 2022
Rating 3
Size 3,032 Kb
Views 18,216
Do you need developer help for Invitation 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!

Kenny Mark (kennymark) Script Codes
Name
Davon
E-Commerce
Get Movie Cast App
Brick Tennis
Background Randomizer
Twitter Todo List
Blog Post M
Flexbox grid
Modern Welcome Page
About Fse
Create amazing video scripts 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!