Learn how to create a stylish attendee badge using HTML and CSS with our easy, step-by-step guide. Perfect for events and conferences.
Table of Contents
Creating an attendee badge is a great way to enhance the professionalism of your events, whether it's a conference, seminar, or workshop. With just a bit of HTML and CSS, you can design and implement an eye-catching badge that represents your event and helps attendees stand out. In this blog, we'll guide you through the process of creating an attendee badge step by step. No advanced coding skills are required—just follow along and you'll have a stylish badge ready in no time!
Source Code
Step 1 (HTML Code):
Start by creating a basic HTML structure for your badge. Open your text editor and create a new file named index.html. Copy and paste the below code:
Here’s a breakdown of the different parts:
<!DOCTYPE html>: This declaration defines the document type and version of HTML being used, which is HTML5 in this case.
<html lang="en">: This is the root element of the HTML document. The lang="en" attribute specifies that the language of the document is English.
<head>: Contains meta-information about the document.
<meta charset="UTF-8">: Sets the character encoding for the document to UTF-8, which supports a wide range of characters.<meta name="viewport" content="width=device-width, initial-scale=1.0">: Ensures the webpage is responsive and adjusts properly on different screen sizes.<title>Attendee Badge</title>: Defines the title of the webpage, which appears in the browser tab.<link rel="stylesheet" href="styles.css">: Links to an external CSS file named styles.css for styling the webpage.
<body>: Contains the content of the webpage.
<div class="badge-container">: A container div element with the class badge-container that groups the badge content together.<div class="badge-header">: A div with the class badge-header for the badge’s header.<h2>Exclusive Event 2024</h2>: A heading element for the event name.<div class="badge-photo">: A div with the class badge-photo for displaying the attendee's photo.<img src="https://www.codewithfaraz.com/favicon.ico" alt="Attendee Photo">: An image element with a link to the attendee’s photo and an alternative text description.<div class="badge-info">: A div with the class badge-info for displaying the attendee’s details.<h3>Faraz</h3>: A heading element for the attendee’s name.<p>Lead Designer</p>: A paragraph element for the attendee’s role.<p>Frontend Component</p>: Another paragraph element for additional information about the attendee.
<div class="badge-footer">: A div with the class badge-footer for the badge’s footer information.<p>Access Level:<span>Attendee</span></p>: A paragraph element showing the access level of the attendee, with the access level itself enclosed in a span element.
Step 2 (CSS Code):
Next, create a CSS file named styles.css and link it to your HTML file. This CSS will style the badge and make it look professional. Copy and paste the below code:
Here's a breakdown:
Font Import:
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
- Imports the Poppins font from Google Fonts with weights 400 and 600.
Body Styling:
body {
font-family: 'Poppins', sans-serif;
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
- Sets the font to Poppins for the entire page.
- Centers the content vertically and horizontally with flexbox.
- The page background is white, and the body has no margin.
Badge Container:
.badge-container {
width: 100%;
max-width: 300px;
background: #162447;
border-radius: 15px;
box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.5);
overflow: hidden;
text-align: center;
color: #fff;
margin: 20px;
}
- The badge container takes full width but is capped at 300px.
- It has a dark blue background, rounded corners, and a shadow effect.
- The content is centered, and the text color is white.
Badge Header:
.badge-header {
background-color: #e43f5a;
position: relative;
padding: 5px;
font-weight: 700;
font-size: 1em;
letter-spacing: 1px;
border-bottom: 2px solid #1a1a2e;
}
.badge-header::before {
content: '';
position: absolute;
background-color: #fff;
width: 60px;
height: 10px;
border-radius: 20px;
left: 50%;
transform: translateX(-50%);
}
- The header has a pink background, bold text, and a border at the bottom.
- The ::before pseudo-element add a white decorative bar in the center.
Badge Photo:
.badge-photo {
margin-top: 20px;
}
.badge-photo img {
border-radius: 50%;
border: 4px solid #e43f5a;
box-shadow: 0px 5px 15px rgba(228, 63, 90, 0.7);
width: 100%;
max-width: 120px;
height: auto;
}
- Adds a margin above the photo.
- Styles the photo with a circular shape, pink border, and a shadow effect.
Badge Info:
.badge-info {
padding: 20px;
}
.badge-info h3 {
margin: 10px 0;
font-size: 1.3em;
font-weight: 700;
color: #eaeaea;
}
.badge-info p {
margin: 5px 0;
font-size: 1em;
color: #eaeaea;
opacity: 0.8;
}
- Provides padding inside the info section.
- Styles the heading and paragraphs with margins, font sizes, and colors.
Badge Footer:
.badge-footer {
background-color: #1f4068;
color: #fff;
padding: 10px;
border-top: 2px solid #1a1a2e;
font-weight: 700;
}
.badge-footer span {
background-color: #e43f5a;
padding: 5px 10px;
border-radius: 8px;
color: #fff;
}
- Styles the footer with a dark blue background, white text, and padding.
- Adds a pink background to span elements within the footer.
Responsive Design:
@media (max-width: 480px) {
.badge-container {
max-width: 90%;
}
.badge-header {
font-size: 1em;
padding: 12px;
}
.badge-info h3 {
font-size: 1.2em;
}
.badge-info p {
font-size: 0.9em;
}
.badge-footer {
font-size: 1em;
padding: 8px;
}
}
- Adjusts the styles for screens 480px wide or smaller.
- Increases the size of the badge container to 90% of the screen width.
- Modifies font sizes and padding to ensure readability on smaller screens.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
body {
font-family: 'Poppins', sans-serif;
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.badge-container {
width: 100%;
max-width: 300px;
background: #162447;
border-radius: 15px;
box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.5);
overflow: hidden;
text-align: center;
color: #fff;
margin: 20px;
}
.badge-header {
background-color: #e43f5a;
position: relative;
padding: 5px;
font-weight: 700;
font-size: 1em;
letter-spacing: 1px;
border-bottom: 2px solid #1a1a2e;
}
.badge-header::before {
content: '';
position: absolute;
background-color: #fff;
width: 60px;
height: 10px;
border-radius: 20px;
left: 50%;
transform: translateX(-50%);
}
.badge-photo {
margin-top: 20px;
}
.badge-photo img {
border-radius: 50%;
border: 4px solid #e43f5a;
box-shadow: 0px 5px 15px rgba(228, 63, 90, 0.7);
width: 100%;
max-width: 120px;
height: auto;
}
.badge-info {
padding: 20px;
}
.badge-info h3 {
margin: 10px 0;
font-size: 1.3em;
font-weight: 700;
color: #eaeaea;
}
.badge-info p {
margin: 5px 0;
font-size: 1em;
color: #eaeaea;
opacity: 0.8;
}
.badge-footer {
background-color: #1f4068;
color: #fff;
padding: 10px;
border-top: 2px solid #1a1a2e;
font-weight: 700;
}
.badge-footer span {
background-color: #e43f5a;
padding: 5px 10px;
border-radius: 8px;
color: #fff;
}
@media (max-width: 480px) {
.badge-container {
max-width: 90%;
}
.badge-header {
font-size: 1em;
padding: 12px;
}
.badge-info h3 {
font-size: 1.2em;
}
.badge-info p {
font-size: 0.9em;
}
.badge-footer {
font-size: 1em;
padding: 8px;
}
} Final Output:
Conclusion:
Congratulations! You've successfully created an attendee badge using HTML and CSS. With this simple guide, you can design professional-looking badges for any event. Feel free to experiment with different styles and layouts to match your event's branding. Remember, a well-designed badge helps identify attendees and adds a touch of class to your event.
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
