Untitled

mail@pastecode.io avatar
unknown
html
a year ago
11 kB
1
Indexable
Never
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
        crossorigin="anonymous"></script>
    <style>
       
        body {
            background-color: #f2f2f2;
            font-family: Nunito, sans-serif;
            font-size: 18px;
            font-weight: 400;
            line-height: 24px;
            overflow-x: hidden;
        }

        .mobile-screen {
            width: 100vw;
            /* Set width to the full viewport width */
            height: 100vh;
            /* Set height to the full viewport height */
            max-width: 455px;
            /* Set a maximum width for mobile devices */
            margin: 0 auto;
            /* Center the div horizontally */
            background-color: #ffffff;
            /* Set a background color or any other styles */
            box-shadow: 0 4px 16px rgba(17, 17, 26, .1), 0 8px 32px rgba(17, 17, 26, .05);
            /* Add any additional styles as needed */

            /* Media query for larger viewports */
            @media (min-width: 768px) {
                max-width: 455px;
                /* Maintain the same width on larger screens */
                height: auto;
                /* Set a fixed height for larger screens */
            }
        }

        .sec-1 {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .bg-black {
            margin: 0 auto;
            /* width: 500px; */
            /* height: 200px; */
            /* background: lightblue; */
            position: relative;
            overflow: hidden;
        }

        .bg-black:after {
            content: "";
            position: absolute;
            height: 80px;
            left: -10%;
            right: -10%;
            border-radius: 50%;
            bottom: -25px;
            background-color: #ffffff;
        }

        .dv-2 {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .circle-div {
            position: relative;
            bottom: 15vh;
            background-image: url(qr.png);
            background-repeat: no-repeat;
            background-size: contain;
        }

        .btn-dark {
            padding: 10px 20px;
            background-color: black;
            color: whitesmoke;
            border-radius: 50px;
            text-transform: uppercase;
            font-size: small;
            width: 50%;

        }

        .btns {
            margin-top: -5%;
        }

        .contact-lists ul {
            display: flex;
            flex-wrap: wrap
        }

        .contact-lists ul li {
            margin: 5%;
        }

        .copyright-content {
            -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
            background-color: hsla(0, 0%, 100%, .5);
            bottom: 0;
            left: 0;
            margin: auto;
            padding: 10px;
            position: fixed;
            right: 0;
            text-align: center;
            width: 455px;
            font-size: medium;
        }
        .contact-lists ul{
            list-style-type: none;
        }

        /*  */
    </style>
</head>

<body>
    <div class="mobile-screen">
        <div class="bg-black sec-1" style="height: 30vh;">
            <img src="logo-nbg.png" alt="" style="margin-bottom: 20%;">
        </div>
        <div class="dv-2 ">
            <div class="circle-div"
                style="border: 5px solid #b6b6b6e4; border-radius: 50%; width: 180px; height: 180px;">
            </div>
        </div>

        <div class="user-detail text-center  " style="position: relative;bottom: 10vh;">
            <h4 style="color: rgb(0, 0, 0);">TAPiTAG Official</h4>
            <p style="color: rgb(0, 0, 0);">
            <div><b>Welcome to the TAPiTAG Profile.</b><br>This shows you&nbsp;how your profile could look.<br>Your
                profile is&nbsp;fully customisable <br>&amp; you can update it at any time.<br>Add a your logo,
                profile pic, name &amp; Bio.<br>Share all your socials, websites &amp; more.<br><br><br><br><br>
            </div>
            </p>
            <div class="btns">
                <a href="https://account.tapitag.co/tapitag/api/v1/downloadcard?user_id=107&rfNo=044B34626D6F81"
                    class="btn btn-dark mb-2">save my contact card</a><br>
                <a href="form.html" class="btn btn-dark">connect with me</a>
            </div>
        </div>
          <div class="column info">
            <div class="contact-lists">
                <ul>
                    <li><a href="tel:+353894740660" style="color: rgb(0, 0, 0);"><img
                                src="https://projectsuperone.s3.us-west-2.amazonaws.com/images/media/tt4FqOU5tkGVx0zNRajfKhvHtBjvpq8rvztOolUj.png"
                                alt="Phone Number" style="width: 80px; height: 80px; border-radius: 20px;"></a></li>
                    <li><a href="mailto:Sales@tapitag.co" style="color: rgb(0, 0, 0);"><img
                                src="https://projectsuperone.s3.us-west-2.amazonaws.com/images/media/7clCpRwLavq6gJUTlhHDH9X0w7UCJUOFVYYVlHVK.png"
                                alt="Email" style="width: 80px; height: 80px; border-radius: 20px;"></a></li>
                    <li><a href="https://www.tapitag.co/" style="color: rgb(0, 0, 0);"><img
                                src="https://projectsuperone.s3.us-west-2.amazonaws.com/images/media/5LnnPP9Gp1ZHlYaid89btFCNkcr94TOFqYpRjBhw.png"
                                alt="Website" style="width: 80px; height: 80px; border-radius: 20px;"></a></li>
                    <li><a href="https://www.linkedin.com/company/78061113/admin/" style="color: rgb(0, 0, 0);"><img
                                src="https://projectsuperone.s3.us-west-2.amazonaws.com/images/media/cHqoUBni6gkfbnpau1SqPPijzov0OI1sFVzSMDSD.png"
                                alt="Linkedin" style="width: 80px; height: 80px; border-radius: 20px;"></a></li>
                    <li><a href="https://api.whatsapp.com/send?phone=+353894740660" style="color: rgb(0, 0, 0);"><img
                                src="https://projectsuperone.s3.us-west-2.amazonaws.com/images/media/7ObC0Q8rkeatXWjXRRbmmD9gbypgIJQlqgfSFZay.png"
                                alt="Whatsapp" style="width: 80px; height: 80px; border-radius: 20px;"></a></li>
                    <li><a href="https://www.instagram.com/tapitag" style="color: rgb(0, 0, 0);"><img
                                src="https://projectsuperone.s3.us-west-2.amazonaws.com/images/media/2igxI0IdLy2xkAm91tonG4yIS1Ouuo4OVxQZD3xY.png"
                                alt="Instagram" style="width: 80px; height: 80px; border-radius: 20px;"></a></li>
                    <li><a href="https://www.facebook.com/mytapitag" style="color: rgb(0, 0, 0);"><img
                                src="https://projectsuperone.s3.us-west-2.amazonaws.com/images/media/4dArralwEGDEYiLRLV1JaCbljogx6M6uREfRY5Z2.png"
                                alt="Facebook" style="width: 80px; height: 80px; border-radius: 20px;"></a></li>
                    <li><a href="https://twitter.com/@TAPiTAG_IRL" style="color: rgb(0, 0, 0);"><img
                                src="https://projectsuperone.s3.us-west-2.amazonaws.com/images/media/q0peUPCK3VaQGqmlRuzIQv8ZEDkHkGbf406RYUzY.png"
                                alt="Twitter" style="width: 80px; height: 80px; border-radius: 20px;"></a></li>
                    <li><a href="https://www.snapchat.com/add/tapitag_irl" style="color: rgb(0, 0, 0);"><img
                                src="https://projectsuperone.s3.us-west-2.amazonaws.com/images/media/H3jqFvMu4Y1oUALnClUMc6zweMXDqCghUTuhQ4Lv.png"
                                alt="Snapchat" style="width: 80px; height: 80px; border-radius: 20px;"></a></li>
                    <li><a href="https://www.tiktok.com/@tapitag" style="color: rgb(0, 0, 0);"><img
                                src="https://projectsuperone.s3.us-west-2.amazonaws.com/images/media/G6TSOydbjzfp19A04zHpoOUY18yl6a9hAjUsx452.png"
                                alt="TikTok" style="width: 80px; height: 80px; border-radius: 20px;"></a></li>
                    <li><a href="https://www.youtube.com/@tapitag/" style="color: rgb(0, 0, 0);"><img
                                src="https://projectsuperone.s3.us-west-2.amazonaws.com/images/media/IIqOPILJjAUz9IEipjky7LJssm0Y7xnWOfpwO7eY.png"
                                alt="YouTube" style="width: 80px; height: 80px; border-radius: 20px;"></a></li>
                    <li><a href="https://www.tapitag.co/" style="color: rgb(0, 0, 0);"><img
                                src="https://projectsuperone.s3.us-west-2.amazonaws.com/images/media/Mi7dOl1gaIjqAcXs6P7QdoBqiDghTnfouRJWcvhp.png"
                                alt="Product Portfolio" style="width: 80px; height: 80px; border-radius: 20px;"></a>
                    </li>
                    <li><a href="https://www.tapitag.co/pages/faq" style="color: rgb(0, 0, 0);"><img
                                src="https://projectsuperone.s3.us-west-2.amazonaws.com/images/media/1645578853faq.png"
                                alt="FAQ" style="width: 80px; height: 80px; border-radius: 20px;"></a></li>
                    <li><a href="https://www.tapitag.co/pages/corporate-enquiries" style="color: rgb(0, 0, 0);"><img
                                src="https://projectsuperone.s3.us-west-2.amazonaws.com/images/media/1nN2x4Ga96W5P4PN8BK3OK2CWHzIsmWZXraZrawM.png"
                                alt="TAPiTAG Corporate" style="width: 80px; height: 80px; border-radius: 20px;"></a>
                    </li>
                    <li><a href="https://tapitag.co/pages/contact-us" style="color: rgb(0, 0, 0);"><img
                                src="https://projectsuperone.s3.us-west-2.amazonaws.com/images/media/2ApFTcGyKd3DiQRBf6le5mvpbnNExw8Fc5tFLuyH.png"
                                alt="Enquiry Forms" style="width: 80px; height: 80px; border-radius: 20px;"></a></li>
                </ul>
            </div>
        </div>
        <BR><BR></BR></BR>

        <div class="copyright-content">
            <p>POWERED BY TAPiTAG</p>
        </div>

    </div>

</body>

</html>