Wednesday, July 19, 2023

Sample Identity Card in HTML&CSS

<html>

<head>
    <title>ID Card</title>
    <style>
        body {
            background: url(back.jpg) center;
            background-size: cover;
        }

        .card {
            height: 450px;
            width: 320px;
            background-color: rgba(255, 255, 255, 0.06);
            backdrop-filter: blur(20px);
            position: absolute;
            margin: auto;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            border-radius: 8px;
            box-shadow: 20px 20px 22px rgba(0, 0, 0, 0.2);
            font-family: 'Poppins', sans-serif;
        }

        .card-img {
            height: 120px;
            width: 120px;
            background-color: rgba(255, 255, 255, 0.06);
            backdrop-filter: blur(20px);
            border-radius: 50%;
            position: relative;
            margin: 1px auto 1px auto;

        }

        .card-img img {
            height: 86%;
            width: 86%;
            border-radius: 50%;
            margin-left: 7%;
            margin-top: 7%;
        }

        .desc {
            width: 100%;
            text-align: center;
            position: absolute;
            top: 160px;
        }

        .primary-text {
            color: #d5d5d5;
            font-size: 16px;
            font-weight: 600;
            letter-spacing: 0.7px;
            margin: 80px auto 0px auto;
        }

        .main-text1 {
            text-align: center;
            align-items: center;
            color: #d5d5d5;
            font-size: 16px;
            font-weight: 600;
            letter-spacing: 0.7px;
            margin: 5px 10px;
        }

        .main-text2 {
            text-align: center;
            align-items: center;
            color: #d5d5d5;
            font-size: 16px;
            letter-spacing: 0.2px;
            margin: 5px 0;
        }

        .main-text3 {
            align-items: left;
            color: #5d5d5d;
            background-image: linear-gradient(to right, #d5d5d5, #5d5d5d);
            font-size: 18px;
            text-transform: uppercase;
            letter-spacing: 4px;
            margin: 15px 0;
        }

        .secondary-text {
            color: #c0c0c0;
            font-weight: 400;
            font-size: 14px;
            letter-spacing: 1px;
            margin: 5px 0;
        }

        table {
            display: inline-block;
        }
    </style>
</head>

<body>
    <div class="card">
        <h6 class="main-text1">Academy of Medical Education's</h6>
        <h6 class="main-text2">Degree Science and Commerce College</h6>
        <h6 class="main-text3">Identity Card</h6>
        <div class="card-img">
            <img src="pro.jpg">
        </div>
        <div class="desc">
            <h6 class="primary-text">Madhusudan Navandar</h6>
            <h6 class="secondary-text">Professor in Computer Science</h6>
            <br>
            <table>
                <tr>
                    <th class="main-text1">Phone</th>
                    <td class="main-text2">+91 8123724274</td>
                </tr>
                <tr>
                    <th class="main-text1">E-Mail</th>
                    <td class="main-text2">madhunavandar@gmail.com</td>
                </tr>
                <tr>
                    <th class="main-text1">Date </th>
                    <td class="main-text2">04-08-2013</td>
                </tr>
                <tr>
                    <th class="main-text1">Blog</th>
                    <td class="main-text2">madhunavandar@blogspot.com</td>
                </tr>
                <tr>
                    <th class="main-text1">Home</th>
                    <td class="main-text2">VidyaNagar, Raichur, Karnataka</td>
                </tr>
            </table>
        </div>


    </div>


</body>

</html>




1 comment:

  1. For impactful exhibits, partnering with experienced trade show exhibit builders in Chicago is vital. AARS Exhibits LLC knows how to create immersive brand environments.Trade show booth Rental in Chicago

    ReplyDelete

Sample Identity Card in HTML&CSS

<html> <head>     <title>ID Card</title>     <style>         body {             background: url(back.jpg) cent...