Welcome to Programming Hub! We’re excited to show you how to create a Glassmorphic Credit Card using HTML and CSS. This project is perfect for anyone who is just starting out with web development and wants to learn the basics of HTML and CSS.
HTML (HyperText Markup Language) is the standard markup language used to create web pages. It is used to structure the content on a web page, including text, images, and links. CSS (Cascading Style Sheets) is used to style the HTML content and make it look visually appealing.
In this project, we will use HTML to create the structure of the credit card and CSS to add the glass-like design elements. You will learn how to use CSS to change the font, color, and size of text, how to add background images and colors, and how to create basic animations.
This project is a fun and easy way to get started with web development and learn the basics of HTML and CSS. So, let’s get started and create a beautiful and functional Glassmorphic Credit Card!”
Let's Cover HTML PART
```<!DOCTYPE html>
Glassmorphic Credit Card using HTML and CSS - @programminghub
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
<!-- CSS -->
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.6.1.js"></script>
```
Paste the below code in your tag
```
Please enter your credit card
details below
<div class="card">
<form>
<div class="logo">
<?xml version="1.0" encoding="UTF-8"?>
<svg width="48px" height="48px" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Group</title>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Group" fill="#FFFFFF">
<circle id="Oval" cx="16" cy="16" r="16"></circle>
<circle id="Oval" cx="16" cy="48" r="16"></circle>
<circle id="Oval" cx="48" cy="16" r="16"></circle>
<circle id="Oval" cx="48" cy="48" r="16"></circle>
</g>
</g>
</svg>
</div>
<div class="card-number">
<label>Card Number</label>
<input id="card-number" placeholder="1234 1234 1234 1234" type="text" required maxlength="19" />
<span class="underline"></span>
</div>
<br />
<div class="group">
<div class="card-name">
<label>Card Holder</label>
<input id="card-name" placeholder="John Doe" type="text" required />
<span class="underline"></span>
</div>
<div class="expiration-date">
<label>Exp. Date</label>
<input id="card-exp" placeholder="10/25" type="text" maxlength="5" required />
<span class="underline"></span>
</div>
<div class="ccv">
<label>CCV</label>
<input id="card-ccv" placeholder="123" type="text" maxlength="3" required />
<span class="underline"></span>
</div>
</div>
</form>
</div>
</div>
</div>```
output till now
Top comments (0)