ID Card

Developer
Jon Graft
Size
2,700 Kb
Views
4,048
  1. ID Card Previews
  2. ID Card HTML Codes
  3. ID Card CSS Codes

How do I make an id card?

I am working on creating an ID card for a simple web app. I could use some help improving the code, so if you have any advice, please let me know!. What is a id card? How do you make a id card? This script and codes were developed by Jon Graft on 30 January 2023, Monday.

ID Card Previews
IQ Test

ID Card - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>ID Card</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper">	<div class="box2"></div>	<div class="box1"> <p id="name">John Doe <a href="https://twitter.com/johndoe">@johndoe</a></p> <table>	<tr>	<th>Followers</th>	<th>Tweets</th>	</tr>	<tr>	<td>123</td>	<td>456</td>	</tr> </table>	</div>
</div>
</body>
</html>

ID Card - Script Codes CSS Codes

body { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300; cursor: default;
}
div, body { margin: 0 auto;
}
p { text-align: center;
}
p a { font-size: 14px; color: #656565; text-decoration: none; display: block;
}
table { width: 100%; color: #fff;
}
th, td { width: 50%; text-align: center;
}
::-moz-selection, ::selection { background: transparent;
}
.box1 { position: absolute; left: 50%; margin-left: -70px; top: 25px; width: 180px; height: 166px; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; -moz-box-shadow: 0 2px 10px rgba(0,0,0,.6), inset 0 1px 1px #fff; -webkit-box-shadow: 0 2px 10px rgba(0,0,0,.6), inset 0 1px 1px #fff; box-shadow: 0 2px 10px rgba(0,0,0,.6), inset 0 1px 1px #fff; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDE4MCAxNjYiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxyYWRpYWxHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIGN4PSI0Ny43Nzc3Nzc3Nzc3Nzc4JSIgY3k9IjE1LjA2MDI0MDk2Mzg1NTQlIiByPSI3NSUiID4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2NiY2JjYiIgc3RvcC1vcGFjaXR5PSIxIi8+CjwvcmFkaWFsR3JhZGllbnQ+Cgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTgwIiBoZWlnaHQ9IjE2NiIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+); background-image: -moz-radial-gradient(48% 15%, circle, #fff 0%, #cbcbcb 100%); background-image: -o-radial-gradient(48% 15%, 249px 249px, #fff 0%, #cbcbcb 100%); background-image: -webkit-radial-gradient(48% 15%, 249px 249px, #fff 0%, #cbcbcb 100%); background-image: radial-gradient(48% 15%, 249px 249px, #fff 0%, #cbcbcb 100%); background: url('https://i.imgur.com/XDF3M.jpg') no-repeat center center;
}
.box2 { width: 83px; height: 83px; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; -moz-box-shadow: 0 1px 5px rgba(0,0,0,.4), 0 0 0 1px rgba(0,0,0,.15); -webkit-box-shadow: 0 1px 5px rgba(0,0,0,.4), 0 0 0 1px rgba(0,0,0,.15); box-shadow: 0 1px 5px rgba(0,0,0,.4), 0 0 0 1px rgba(0,0,0,.15); background:#fff url('https://i.imgur.com/VAYJ9.jpg') no-repeat center center; position: absolute; left: 50%; margin-left: -20px; z-index: 9999;
}
.box3 { width: 100%; height: 57px; background-color: rgba(0,0,0,.4); -moz-box-shadow: inset 0 2px 5px rgba(0,0,0,.55); -webkit-box-shadow: inset 0 2px 5px rgba(0,0,0,.55); box-shadow: inset 0 2px 5px rgba(0,0,0,.55);
}
#name { font-size: 15px; margin-top: 59px;
}
ID Card - Script Codes
ID Card - Script Codes
Home Page Home
Developer Jon Graft
Username FlyersPh9
Uploaded January 30, 2023
Rating 3
Size 2,700 Kb
Views 4,048
Do you need developer help for ID 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!

Jon Graft (FlyersPh9) Script Codes
Name
Bentley Systems Progress Bar
Bentley Systems Form Elements
Bentley Systems CSS Buttons
Bentley Systems Dropdown Menus
Pie Chart
Bar Graph
Simple Social Buttons from Dribbble
User Profile in CSS
Bentley Systems Cards
Bentley Systems Toggles
Create amazing love letters 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!